前言:
上一节学习了webpack最基本的打包,将浏览器不识别的模块化打包为浏览器识别的模块化
但是也有一个问题,就是webpack不能直接打包样式文件,
因此我们需要使用loader来辅助webpack打包,
如果要使用loader,咱们就不要在像之前一样在命令中指定入口,入口文件了,
因为把所有需要的内容写在命令行就会非常不好, 也不利于代码调试和维护
因此我们需要配置webpack打包文件,文件的名字固定为webpack.config.js
1. webpack 配置文件
1.1 配置文件的理解
-
webpack配置文件名称固定为webpack.config.js, - 处理好配置文件以后, 在打包时只需要在命令行输入
webpack命令就可以打包了, - 因为
webpack在打包时会自动查找到webpack.config.js进行解析
webpack.config.js的作用就是告诉webpack接下来要做哪些工作
1.2 配置文件选项
注意: 所有的构建工具都是基于node环境的, 因此,在webpack.config.js中,默认使用commonjs模块化规范
配置文件代码:
// webpack.config.js
const {resolve } = require("path")
// 导出webpack配置
module.exports = {
// webpack 打包的入口文件(起点)
entry:"./src/index.js",
// webpack 打包的出口配置(输出)
output:{
filename:"bundle.js", // 出口文件
path:resolve(__dirname,"build") // 出口文件所在的目录
},
// loader的配置
module:{
// rules 规则, 详细的loader配置,
// 不同的loader 处理不同的文件
rules:[
]
},
// plugins 配置
plugins:[
// 详细的plugins 插件的配置
],
// webpack打包模式,是开发模式还是生产模式, 只能有一个
mode:"development",
// mode:"production"
}
2. 配置打包CSS样式文件的loader
2.1 打包样式loader的说明
说明:
- 打包css是需要通过
css-loader将样式文件处理为webpack识别的模块 -
webpack将样式文件当成模块打包到出口的js文件中 - 通过
style-loader在html文件中创建style标签,并将js中内容抽出插入到style中
2.2 下载所需要的loader包
将loader安装到开发依赖, 项目打包上线以后,就不需要这些loader了
$ yarn add css-loader style-loader -D
2.3 配置处理样式文件的loader
// loader的配置
module:{
// rules 规则, 详细的loader配置,
// 不同的loader 处理不同的文件
rules:[
// rules 规则是一个数组,里面可以配置多个规则,一个规则就是一个对象
{
// 正则, 匹配所有后缀名为css的文件并使用下面的loader处理
test: /\.css$/,
// use 使用 使用那些loader 处理匹配成功的文件
use:[
// style-loader 创建style标签
// 在将js中的样式资源插入到style标签中,并添加要页面的head中
"style-loader",
// css-loader会将css文件处理为commonjs模块并加载到js中
// 文件中的内容是样式字符串
"css-loader"
]
}
]
},
2.4 打包
$ webpack
3. 打包less 样式文件
打包less样式文件,我们就需要有能够将less转为css文件的loader
3.1 下载处理less文件的loader
$ $ yarn add less-loader -D
3.2 配置处理less样式文件的loader
// loader的配置
module:{
rules:[
// 配置处理less文件的规则
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
// 将less文件编译为css文件,再用处理css文件的loader处理后续
"less-loader"
]
}
]
},
配置完毕以后就可以在命令行使用webpack命令进行打包了
