我们之前了解了webpack最基本的打包方式,如何将浏览器不识别的模块化打包为浏览器识别的模块化 但是有一个问题,就是webpack不能直接打包样式文件, 因此就需要loader来辅助webpack打包, 如果要使用loader,咱们就不要再像之前一样在命令中指定入口,入口文件了, 把所有需要的内容写在命令行就会非常不好, 也不利于代码调试和维护 因此我们需要配置webpack打包文件,文件的名字固定为webpack.config.js webpack.config.js的作用就是告诉webpack接下来要做哪些工作 注意: 所有的构建工具都是基于node环境的, 因此,在webpack.config.js中,默认使用commonjs模块化规范 配置文件代码: 说明: 将loader安装到开发依赖, 项目打包上线以后,就不需要这些loader了 打包less样式文件,我们就需要有能够将less转为css文件的loader 配置完毕以后就可以在命令行使用webpack命令进行打包了1. webpack 配置文件
1.1 配置文件的理解
1.2 配置文件选项
// 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的说明
2.2 下载所需要的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 样式文件
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"
]
}
]
},