webpack中loader配置思路方法

本文详细介绍了webpack中Loader的概念和使用,包括Loader的理解、文件转换链、实操案例——配置less文件以及常用Loader的查找。强调了Loader作为npm包的特性,以及在webpack.config.js中配置Loader的规则,明确了文件转换链的重要性。通过一个具体的less文件处理流程,展示了如何从识别文件类型到确定转换链,再到具体Loader的配置。文章最后提醒读者,官方文档是获取Loader信息的重要来源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


0. 前言

上一篇文章提到webpack的配置文件webpack.config.js是以CommonJS语法导出了entry, output, module, plugins, mode等几个属性。

其中moduleplugins的配置相对麻烦,本文重点探究module的配置方法。

module的功能是通过配置各种loader,来使webpack能够识别除了JSJSON之外的文件

本文试图总结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类型文件。

X-loader
Y-loader
A
B
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属性中,以对象数组形式赋值,每个对象需要指定testloader属性(loader其实很多情况写成use,均可);
  3. loader属性可能会是数组,这需要明确文件转换链,最后用到的loader最先写;
  4. 如果对loader进行配置(老套娃选手了),可将其改为对象,赋值loaderoptions属性;
  5. 相比于loader的配置,不知道有什么loader可能更要命,这里是官方总结的常用loader,本文可以不收藏,但这个建议收藏一下~

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

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值