1. 前言
webpack是不能直接处理 css 、less、图片等资源的，需要使用对应的 loader ，有关loader的介绍请查看这篇博客 webpack中的loader
2. 打包css文件
目录结构（本案例的演示代码在页面底部有下载链接）
（1）项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。在src目录中，创建一个css文件夹，其中创建一个normal.css文件。
body {
/*normal.css中的代码非常简单，就是将body设置为blue*/
background-color: blue;
}
但是，这个时候normal.css中的样式会生效吗？
- 不会。因为我们就没有引用它。
- webpack也不可能找到它，因为我们只有一个入口，而webpack会从入口开始查找其他依赖的文件。
打包的时候，只有打包入口文件依赖的文件才会进行打包。如果依赖的文件又依赖了其他的文件，webpack会自动处理。如果创建了一个新的文件，比如css文件，但是并没有任何其它文件依赖新创建的文件，那么这个文件不会被打包进去。
（2）接下来我们在 mian.js 入口文件导入 normal.css 文件
// 依赖css文件，css文件也可以被当做一个模块来处理。
// 由于我们只要依赖css文件就可以了，并不需要用一个变量来接收
require('./css/normal.css')
重新进行打包，发现报错了，提示我们需要安装一个合适的loader：
（3）查阅 webpack 官网 https://www.webpackjs.com/loaders/css-loader/，发现我们需要安装 css-loader 和 style-loader ，使用命令 npm install --save-dev xxx （xxx替换为对应loader的名字）
然后需要在 webpack.config.js 文件中进行一些配置
let path = require('path');
module.exports = {
entry: './src/main.js', //打包入口
output: { //出口
path: path.join(__dirname,'dist'),
filename: 'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
// css-loader只负责将css文件进行加载
// style-loader负责将样式添加到DOM中，要放在css-loader的前面
// webpack在使用多个loader时，是按照从右向左（或者说从下到上）的顺序使用
use:['style-loader','css-loader']
}
]
}
}
接下来重新打包，发现打包成功，dist 文件夹下就多了一个 bundle.js 文件，我们只需要在 html 文件中引入这个 bundle.js 文件即可。
3. 打包less文件
（1）先创建一个special.less文件，依然放在css文件夹中
@fontSize:50px;
@fontColor:orange;
body {
font-size:@fontSize;
color: @fontColor;
}
（2）在入口文件main.js文件中引入
（3）查阅官网 https://www.webpackjs.com/loaders/less-loader/ 打包less文件需要安装对应的loader，less-loader
npm install --save-dev less-loader less
（4）修改 webpack.config.js 配置文件，加入对应的 less-loader 的配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
4. 资料
- 本博客的演示代码下载链接 https://webchang.lanzous.com/i6bFtkflaef 密码:2h4i
- webpack中文网 - loader
- 博客 webpack中的loader的介绍
- 提示：在使用webpack的loader的过程中可能会遇到版本的问题，要注意一下，可以看这篇博客 https://blog.csdn.net/weixin_43974265/article/details/112667927
前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入