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];
};