Loader 匹配规则
当然，webpack可以通过引入模块的路径规则，来判断是否使用内联模式或者剔除一些前置(pre) Loader, 后置(post) , 普通(normal) Loader。
danger
这种内联模式, 并非 ES module 中的规范路径格式, 要尽量避免，因为
- 会在代码中耦合 webpack 的具体细节
- 可能会对 IDE 的路径解析产生干扰
规则如下:
-! : 剔除 配置中符合条件的 pre 和 normal 的 Loader
! : 剔除 配置中符合条件的 normal Loader
!! : 剔除 配置中符合条件的 pre & normal & post 的 Loader
// Disable normal loaders
import { a } from '!./file1.js';
// Disable preloaders and normal loaders
import { b } from '-!./file2.js';
// Disable all loaders
import { c } from '!!./file3.js';
实现代码
webpack代码逻辑解析规则如下(5.0.0.beta.15 vs 4.43.0)
// ...
const firstChar = requestWithoutMatchResource.charCodeAt(0);
const secondChar = requestWithoutMatchResource.charCodeAt(1);
// 注意👇🏻👇🏻👇🏻: 旧版本是通过 Char Code 判断的是否是特殊标记📌
const noPreAutoLoaders = firstChar === 45 && secondChar === 33; // startsWith "-!"
const noAutoLoaders = noPreAutoLoaders || firstChar === 33; // startsWith "!"
const noPrePostAutoLoaders = firstChar === 33 && secondChar === 33; // startsWith "!!";
const rawElements = requestWithoutMatchResource
.slice(noPreAutoLoaders || noPrePostAutoLoaders ? 2 : noAutoLoaders ? 1 : 0)
.split(/!+/);
// ...
详见 4.43.0 webpack NormalModuleFactory.js
// ...
// 注意👇🏻👇🏻👇🏻: 新版本通过判断开头是否是特殊标记📌
const noPreAutoLoaders = requestWithoutMatchResource.startsWith('-!');
const noAutoLoaders =
noPreAutoLoaders || requestWithoutMatchResource.startsWith('!');
const noPrePostAutoLoaders = requestWithoutMatchResource.startsWith('!!');
let elements = requestWithoutMatchResource
.replace(/^-?!+/, '')
.replace(/!!+/g, '!')
.split('!');
let resource = elements.pop();
elements = elements.map(identToLoaderRequest);
// ...