CC 4.0 协议声明
本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。
以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。
内联 matchResource
在一个请求前缀 <match-resource>!=!
将为这个请求设置匹配资源。
当 matchResource
被设置时,它将被用来与 module.rules
而不是原始资源进行匹配。当如果有更多的 loader 应该应用到资源上,或者需要改变模块的类型,这可能很有用。
例子:
file.js
/*STYLE: body { background: red; } */
console.log('yep');
Loader 可以将该文件转化为以下文件,并使用 matchResource
来应用用户指定的 CSS 处理规则:
file.js (transformed by loader)
import './file.js.css!=! extract-style-loader/getStyles!./file.js';
console.log('yep');
这会将 extract-style-loader/getStyles!./file.js
作为一个依赖添加到编译流程中,并将结果作为 file.js.css
。
当 module.rules
有一个匹配 /\.css$/
的规则时,将会被这个资源命中。
Loader 可以是这样的:
extract-style-loader/index.js
const getStylesLoader = require.resolve('./getStyles');
module.exports = function (source) {
if (STYLES_REGEXP.test(source)) {
source = source.replace(STYLES_REGEXP, '');
return `import ${JSON.stringify(
this.utils.contextify(
this.context || this.rootContext,
`${this.resource}.css!=!${getStylesLoader}!${this.remainingRequest}`,
),
)};${source}`;
}
return source;
};
extract-style-loader/getStyles.js
module.exports = function (source) {
const match = source.match(STYLES_REGEXP);
return match[0];
};