webpack5的loader配置小白学习篇
作者：smallStone
这篇文章主要为大家介绍了webpack5的loader配置非常适合webpack入门的小白学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
loader 用于各类资源的处理
loader用于处理其他类型资源；什么是其他类型？就是各个类型都行，例如：css,scss,sass,stylus,ts,png,jpg,jpeg,font,svg...你能想到的所有资源都可以通过此属性来处理，包括路径处理，文件处理，不支持的语言解析都可以通过这个处理。
这里我列6个：
babel-loader
ts-loader
css-loader
sass-loader
style-loader
MiniCssExtractPlugin.loader
以上这些都是关于js和css处理的loader。关于图片、字体等其他静态资源文件，我再以后的文章中会给大家介绍到。
js和css相关的loader
// webpack.config.js
...
module: {
rules: [
{
test: /\.css$/, // 用于匹配文件,可以是字符串或者正则
loader: 'css-loader', // 当只有一个的时候就用这个
use: ['style-loader','css-loader',] // 当有多个的时候就用这个，执行顺序是从右向左
},
{
test: /\.scss$/, // 用于匹配文件,可以是字符串或者正则
loader: 'css-loader', // 当只有一个的时候就用这个
use: [MiniCssExtractPlugin.loader, 'style-loader','css-loader', 'sass-loader'] // 执行顺序是从右向左
},
{
test: /\.styl$/, // 用于匹配文件,可以是字符串或者正则
loader: 'stylus-loader', // 当只有一个的时候就用这个
use: [{
loader: 'postcss-loader', // 如果loader带有参数，则使用此方式
option: {
name: 'stylus'
},
},'css-loader', 'stylus-loader'] // 执行顺序是从右向左
}
]
}
...需要注意的是：此前我就已经说过css-loader是只吧css文件打包成模块。并未引用到html文件。因此需要引入到html文件，则需要在css-loader处理后在执行style-loader把处理后的css插入到html页面内使用（既生成一个style标签插入）。
sass-loader的使用前需要安装sass/node-sass
MiniCssExtractPlugin.loader其实也是个plugin,它可以把样式文件拎出来。变成一个css文件。既代码分割，样式分割。
// webpack.config.js
...
module: {},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].min.css', // css名称
chunkFileName: '[name].chunk_[id].css' // 异步引入的css名称
})
]
...这个chunk之前解释过这里再加强一下。chunkFileName就是异步引入的css文件。例如：按需加载的css。则就会走chunkFileName配置的名称。
以上就是webpack5的loader配置小白学习篇的详细内容，后续再讲plugin属性，此属性是最强，更多关于webpack5 loader配置的资料请关注脚本之家其它相关文章！