0. 前言
上一篇文章提到webpack
的配置文件webpack.config.js
是以CommonJS
语法导出了entry, output, module, plugins, mode
等几个属性。
其中module
和plugins
的配置相对麻烦,本文重点探究module
的配置方法。
module
的功能是通过配置各种loader
,来使webpack
能够识别除了JS
和JSON
之外的文件。
本文试图总结loader配置通用思路方法,通过该思路今后无论想要配置什么类型文件,均可以自主实现配置,而不是每用一次都无头无脑到处Ctrl+C。
1. loader的理解
前面提了很多配置loader,但对loader
本身似乎没什么了解。
首先,loader
都是npm
的包(package
),需要通过npm install xx-loader
的形式安装后才能使用。
既然是一个npm
包,那就可以上npmjs官网去查询它的来龙去脉,上面会有它的各种信息,包括使用条件、如何安装、各种属性、配置方法等。
此处我们主要需要了解它的输入和输出分别是什么,即loader
识别什么类型的文件输入,处理后会输出什么类型的文件。
2. 文件转换链
本着解耦和复用的原则,很多的loader
只是完成一小步的工作,而我们在实际导入某一种类型文件时,可能需要很多步骤。如下图所示,A
类型文件经过X-loader
后转换成B
类型,再经过Y-loader
后转换成可用的C
类型文件。
所以我们需要清楚目标类型的文件转换链🔗。
3. 实操
在有了以上2
个概念之后,以less
文件的配置为例,实操一下loader
的配置过程。
1️⃣ 首先明确文件转换链:less
是在css
的基础上发展的一种语言,扩展了css
的功能,所以思路应该是识别less
文件,先输出为css
文件,通过其它loader
加载css
文件到项目;
2️⃣ 上npmjs
上搜一下less
,直接蹦出来一个less-loader
的提示,那想必这就是我们需要的loader
了:
3️⃣ 点进去less-loader的页面,直接就有webpack.config.js
代码:
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
其中test : /\.less$/i
表示处理.less
结尾($
符号)的文件,且忽略大小写(后面的i
)。
loader
这里是一个数组,使用了style-loader, css-loader, less-loader
这三者,这与我们的预期基本相符:先转换为css
文件,然后通过其它loader
处理css
文件。
这里可以顺带了解一下:🌔
css-loader
能让webpack
加载css
文件,🌏style-loader
能将css
文件添加到html
文件的style
标签中。
同时我们注意到,最后调用的loader最先写,文件转换链不能接错了,这一点切记。
再加深一下印象:module.rules是一个对象数组,每个对象设置test和loader属性,前者正则匹配,后者指定loader链。
另外,对于每个loader
还可以进行配置(❌禁止套娃❌),这需要loader数组中需要配置的那一项写成对象,提供其loader和options属性。具体如何设置则参考各自的📖文档吧~
module.exports = {
module:{
rules:[
{
test: 'xxx',
use: [
{
loader: "xx-loader",
options: {
// 填入loader的配置
}
}
]
}
]
}
}
4. 常用loader
请直接参考:📖官方文档(这难道不比自己总结的香嘛❓)
5. 总结
webpack
里的loader
其实就是一个个npm
包,下载以后使用即可;- 使用时在
webpack.config.js
文件导出的module.rules
属性中,以对象数组形式赋值,每个对象需要指定test
和loader
属性(loader
其实很多情况写成use
,均可); loader
属性可能会是数组,这需要明确文件转换链,最后用到的loader
最先写;- 如果对
loader
进行配置(老套娃选手了),可将其改为对象,赋值loader
和options
属性; - 相比于
loader
的配置,不知道有什么loader可能更要命,这里是官方总结的常用loader
,本文可以不收藏,但这个建议收藏一下~
如有错误 ❌ ,欢迎指正 ☝️~
如有收获 🍗,可以考虑点赞👍/评论💬/收藏⭐️/关注👀,大家共同进步~