上节说明了参数rule.resource/rule.resourceQuery
配置值可以是string、regex、funciton、array组合,
关键在于通过RuleSet.normalizeCondition处理实现
比较完整的格式如下:
module: { rules: [{ resource: { test: /\.js$/, include: [], exclude: [] }, use: ['babel-loader], issuer: [], compiler: [], rules: [], oneOf: [] }] }
官网说法:
When we import './style.css'
within app.js
, the resource is /path/to/style.css
and the issuer is /path/to/app.js
因为存在MultiCompiler这个类,可以实现多compiler,所以compiler这个属性还是有意义的
{ test: /.css$/, oneOf: [ { resourceQuery: /inline/, // foo.css?inline use: 'url-loader' }, { resourceQuery: /external/, // foo.css?external use: 'file-loader' } ] }
在通过主逻辑resource/resource/issuer/compiler判定通过之后,可以认为筛选出了使用的loader,
此时并没有停止,可以继续进行判定,过滤出更多的使用的loader,
oneOf表示使用第一个判断通过的loader配置
这点区别于rules,表示后续所有通过判定的loader都使用
_run(data, rule, result) { .............. .............. if(rule.use) { rule.use.forEach((use) => { result.push({ type: "use", value: typeof use === "function" ? RuleSet.normalizeUseItemFunction(use, data) : use, enforce: rule.enforce }); }); } if(rule.rules) { for(let i = 0; i < rule.rules.length; i++) { this._run(data, rule.rules[i], result); } } if(rule.oneOf) { for(let i = 0; i < rule.oneOf.length; i++) { if(this._run(data, rule.oneOf[i], result)) break; } } }
_run函数是个递归调用,只要你愿意,可以到深渊。。。