前言
当我们需要配置 loader 时,都是在 module.rules
中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则。
看一下基础实例:
module.exports = {
// ...
module: {
rules: [
{
test: /.jsx?/, // 条件
include: [
path.resolve(__dirname, 'src'),
], // 条件
use: 'babel-loader', // 规则应用结果
}, // 一个 object 即一条规则
// ...
],
},
}
loader 的匹配规则中有两个最关键的因素:一个是匹配条件,一个是匹配规则后的应用。
接下来对一些关键字解析一下啦~
规则条件配置
- { test: ... } 匹配特定条件
- { include: ... } 匹配特定路径
- { exclude: ... } 排除特定路径
- { and: [...] }必须匹配数组中所有条件
- { or: [...] } 匹配数组中任意一个条件
- { not: [...] } 排除匹配数组中所有条件
也就可以是以下的理解
- 字符串:必须以提供的字符串开始,所以是字符串的话,这里我们需要提供绝对路径
- 正则表达式:调用正则的 test 方法来判断匹配
- 函数:(path) => boolean,返回 true 表示匹配
- 数组:至少包含一个条件的数组
- 对象:匹配所有属性值的条件
简单的例子理解一下
rules: [
{
test: /.jsx?/, // 正则
include: [
path.resolve(__dirname, 'src'), // 字符串,注意是绝对路径
], // 数组
// ...
},
{
test: {
js: /.js/,
jsx: /.jsx/,
}, // 对象,不建议使用
not: [
(value) => { /* ... */ return true; }, // 函数,通常需要高度自定义时才会使用
],
},
],
嘿哈,以上的配置差不多很日常了,再说一个官方例子
module.rules
允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式,并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览:
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
module type
{
test: /.js/,
include: [
path.resolve(__dirname, 'src'),
],
type: 'javascript/esm', // 这里指定模块类型
},
上述做法是可以帮助你规范整个项目的模块系统,但是如果遗留太多不同类型的模块代码时,建议还是直接使用默认的 javascript/auto
。
后言
想了解更多的可以认真读一遍官方文档
官方链接:https://webpack.docschina.org/concepts/loaders/