RuleSet之resource/resourceQuery
RuleSet解析webpack.config.js设定的一系列配置约束(module.rules部分),
结合import(resourcePath)/require(resourcePath)引入的资源,
计算resourcePath和配置规则的匹配结果
直白的说,可以认为这个过程是筛选使用哪些loader去加载处理资源的过程
webpack源码RuleSet看到condition部分,总结一下
https://webpack.js.org/configuration/module/#rule-resource
一般大众化配置格式:
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader],
exclude: [],
include: []
}]
}没想到test、exclude、include是resource的简写,变换如下:
module: {
rules: [{
use: ['babel-loader],
resource: {
test: /\.js$/,
exclude: [],
include: []
}
}]
}需要说明使用了resource,不可以同时配置test、include、exclude属性
使用resource方式配置,还有or、and、not属性可以配置,完整的如下
module: {
rules: [{
use: ['babel-loader],
resource: {
test: /\.js$/,
exclude: [],
include: [],
not: [],
and: [],
or: []
}
}]
}注意:无论是resource,还是其下的exclude、include、not、or、and,
其值可以为function、string(字符串开头判定)、regex、array(funciton string, regex组合)
与resource并列的,还有个resoureceQuery参数,
其值参照resource参数配置,用来测试通过import/require引入的模块参数是否符合要求,比如
{
test: /.css$/,
resourceQuery: /inline/,
use: 'url-loader'
}可以匹配:
import Foo from './foo.css?inline'
RuleSet.normalizeCondition这个方法是实现and or exclude include not的关键,逻辑与的关系
比如resource配置代码,解析为:
符合js结尾的文件,并且满足在exclude指定的目录中,同时不在include指定的目录中,才使用babel-loader