CC 4.0 ライセンス

このセクションの内容は、以下のリンクの内容に由来しており、CC BY 4.0ライセンスに従います。
https://webpack.dokyumento.jp/api/loaders/#inline-matchresource
特に明記されていない場合、以下の内容は元の内容に基づいて修正および削除された結果とみなすことができます。

インライン matchResource

リクエストに<match-resource>!=!をプレフィックスとして付けると、このリクエストのmatchResourceが設定されます。

matchResourceが設定されている場合、元のリソースではなく、module.rulesとの照合に使用されます。これは、リソースにさらにローダーを適用する必要がある場合や、モジュールタイプを変更する必要がある場合に役立ちます。

例

file.js

/* STYLE: body { background: red; } */
console.log('yep');

ローダーは、ファイルを次のファイルに変換し、matchResourceを使用してユーザー指定のCSS処理ルールを適用できます。

file.js (ローダーによって変換されたもの)

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$/に一致するルールがあるため、この依存関係に適用されます。

ローダーは次のようになります

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