简体中文

CC 4.0 协议声明

本节内容派生于以下链接指向的内容，并遵守 CC BY 4.0 许可证的规定。
https://webpack.js.org/api/loaders/#inline-matchresource
以下内容如果没有特殊声明，可以认为都是基于原内容的修改和删减后的结果。

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

内联 matchResource#

内联 matchResource