webpack中loader配置思路方法

---

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. 总结

1. webpack里的loader其实就是一个个npm包，下载以后使用即可；
2. 使用时在webpack.config.js文件导出的module.rules属性中，以对象数组形式赋值，每个对象需要指定test和loader属性（loader其实很多情况写成use，均可）；
3. loader属性可能会是数组，这需要明确文件转换链，最后用到的loader最先写；
4. 如果对loader进行配置（老套娃选手了），可将其改为对象，赋值loader和options属性；
5. 相比于loader的配置，不知道有什么loader可能更要命，这里是官方总结的常用loader，本文可以不收藏，但这个建议收藏一下~

---

如有错误 ❌ ，欢迎指正 ☝️~

如有收获 🍗，可以考虑点赞👍/评论💬/收藏⭐️/关注👀，大家共同进步~

---