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