コンパイルフック#

概要#

buildModule#

モジュールのビルド開始前にトリガーされます。

• 型: SyncHook<[Module]>
• 引数
  • Module: モジュールインスタンス

executeModule#

コンパイル時の実行モジュールが存在する場合、それらが実行されるときにこのフックが呼び出されます。

• 型: SyncHook<[ExecuteModuleArgument, ExecuteModuleContext]>
• 引数
  • ExecuteModuleArgument: コンパイル時実行モジュールの引数
  • ExecuteModuleContext: コンパイル時実行モジュールのコンテキスト

succeedModule#

モジュールが正常にビルドされたときに実行されます。

• 型: SyncHook<[Module]>
• 引数
  • Module: モジュールインスタンス

finishModules#

すべてのモジュールがエラーなしでビルドされたときに呼び出されます。

• 型: AsyncSeriesHook<[Module[]]>
• 引数
  • Module[]: モジュールインスタンスのリスト

seal#

コンパイルが新しいモジュールの受け入れを停止し、モジュールの最適化を開始するときに呼び出されます。

• 型: SyncHook<[]>

optimizeModules#

モジュール最適化フェーズの開始時に呼び出されます。

• 型: SyncBailHook<[Module[]]>
• 引数
  • Module[]: モジュールインスタンスのリスト

afterOptimizeModules#

モジュール最適化が完了した後に呼び出されます。

• 型: SyncBailHook<[Module[]]>
• 引数
  • Module[]: モジュールインスタンスのリスト

optimizeTree#

依存関係ツリーの最適化前に呼び出されます。

• 型: AsyncSeriesHook<[Chunk[], Module[]]>
• 引数
  • Chunk[]: チャンクインスタンスのリスト
  • Module[]: モジュールインスタンスのリスト

optimizeChunkModules#

ツリー最適化の後、チャンクモジュール最適化の開始時に呼び出されます。

• 型: AsyncSeriesBailHook<[Chunk[], Module[]]>
• 引数
  • Chunk[]: チャンクインスタンスのリスト
  • Module[]: モジュールインスタンスのリスト

additionalTreeRuntimeRequirements#

ツリーランタイム要件の収集後に呼び出されます。

• 型: SyncHook<[Chunk, Set<RuntimeGlobals>]>
• 引数
  • Chunk: チャンクインスタンス
  • Set<RuntimeGlobals>: ランタイム要件

ここで、ランタイム要件セットを変更することで、追加のビルトインランタイムモジュールを追加できます。

module.exports = {
  entry: './index.js',
  plugins: [
    {
      apply(compiler) {
        const { RuntimeGlobals } = compiler.webpack;
        compiler.hooks.thisCompilation.tap('CustomPlugin', compilation => {
          compilation.hooks.additionalTreeRuntimeRequirements.tap(
            'CustomPlugin',
            (_, set) => {
              // add a runtime module which define `__webpack_require__.h`
              set.add(RuntimeGlobals.getFullHash);
            },
          );
        });
      },
    },
  ],
};

// will print hash of this compilation
console.log(__webpack_require__.h);

runtimeRequirementInTree#

コンパイルにランタイムモジュールを追加する際に呼び出されます。

• 型: HookMap<SyncBailHook<[Chunk, Set<RuntimeGlobals>]>>
• 引数
  • Chunk: チャンクインスタンス
  • Set<RuntimeGlobals>: ランタイム要件

ランタイム要件セットの変更またはcompilation.addRuntimeModule の呼び出しによるカスタムランタイムモジュールの追加によって、ここで追加のビルトインランタイムモジュールを追加できます。

module.exports = {
  entry: './index.js',
  plugins: [
    {
      apply(compiler) {
        const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
        class CustomRuntimeModule extends RuntimeModule {
          constructor() {
            super('custom');
          }

          generate() {
            const compilation = this.compilation;
            return `
            __webpack_require__.mock = function(file) {
              return ${RuntimeGlobals.publicPath} + "/subpath/" + file;
            };
          `;
          }
        }

        compiler.hooks.thisCompilation.tap('CustomPlugin', compilation => {
          compilation.hooks.runtimeRequirementInTree
            .for(RuntimeGlobals.ensureChunkHandlers)
            .tap('CustomPlugin', (chunk, set) => {
              // add a runtime module to access public path
              set.add(RuntimeGlobals.publicPath);
              compilation.addRuntimeModule(chunk, new CustomRuntimeModule());
            });
        });
      },
    },
  ],
};

// will print "/subpath/index.js"
console.log(__webpack_require__.mock('index.js'));

runtimeModule#

ランタイムモジュールがコンパイルに追加された後に呼び出されます。

• 型: SyncHook<[RuntimeModule, Chunk]>
• 引数
  • RuntimeModule: ランタイムモジュールインスタンス
  • Chunk: チャンクインスタンス

このランタイムモジュールの生成コードは、そのsourceプロパティを通じて変更できます。

module.exports = {
  plugins: [
    {
      apply(compiler) {
        const { RuntimeGlobals } = compiler.webpack;
        compiler.hooks.compilation.tap('CustomPlugin', compilation => {
          compilation.hooks.runtimeModule.tap(
            'CustomPlugin',
            (module, chunk) => {
              if (module.name === 'public_path' && chunk.name === 'main') {
                const originSource = module.source.source.toString('utf-8');
                module.source.source = Buffer.from(
                  `${RuntimeGlobals.publicPath} = "/override/public/path";\n`,
                  'utf-8',
                );
              }
            },
          );
        });
      },
    },
  ],
};

// will print "/override/public/path"
console.log(__webpack_require__.p);

processAssets#

出力前にアセットを処理します。

• 型: AsyncSeriesHook<Assets>
• フックパラメータ
  • name: string — プラグインの名前
  • stage: Stage — タップインするステージ（以下のアセット処理ステージを参照）
• 引数
  • Assets: Record<string, Source>: プレーンオブジェクト。キーはアセットのパス名、値はSourceで表されるアセットのデータです。

アセット処理の例#

• PROCESS_ASSETS_STAGE_ADDITIONAL ステージで新しいアセットを出力します

compiler.hooks.thisCompilation.tap('MyPlugin', compilation => {
  compilation.hooks.processAssets.tap(
    {
      name: 'MyPlugin',
      stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
    },
    assets => {
      const { RawSource } = compiler.webpack.sources;
      const source = new RawSource('This is a new asset!');
      compilation.emitAsset('new-asset.txt', source);
    },
  );
});

• 既存のアセットの更新

compiler.hooks.thisCompilation.tap('MyPlugin', compilation => {
  compilation.hooks.processAssets.tap(
    {
      name: 'MyPlugin',
      stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
    },
    assets => {
      const asset = assets['foo.js'];
      if (!asset) {
        return;
      }

      const { RawSource } = compiler.webpack.sources;
      const oldContent = asset.source();
      const newContent = oldContent + '\nconsole.log("hello world!")';
      const source = new RawSource(newContent);

      compilation.updateAsset(assetName, source);
    },
  );
});

• アセットの削除

compiler.hooks.thisCompilation.tap('MyPlugin', compilation => {
  compilation.hooks.processAssets.tap(
    {
      name: 'MyPlugin',
      stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
    },
    assets => {
      const assetName = 'unwanted-script.js';
      if (assets[assetName]) {
        compilation.deleteAsset(assetName);
      }
    },
  );
});

アセット処理ステージ#

サポートされているステージのリストを以下に示します。Rspackはこれらのステージを上から下へ順番に実行します。実行する操作に基づいて適切なステージを選択してください。

• PROCESS_ASSETS_STAGE_ADDITIONAL — コンパイルに追加のアセットを追加します。
• PROCESS_ASSETS_STAGE_PRE_PROCESS — アセットの基本的な前処理。
• PROCESS_ASSETS_STAGE_DERIVED — 既存のアセットから新しいアセットを派生させます。
• PROCESS_ASSETS_STAGE_ADDITIONS — 既存のアセットに追加セクションを追加します（例：バナーまたは初期化コード）。
• PROCESS_ASSETS_STAGE_OPTIMIZE — 一般的な方法で既存のアセットを最適化します。
• PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT — 既存のアセットの数を最適化します（例：マージすることによって）。
• PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY — 既存のアセットの互換性を最適化します（例：ポリフィルまたはベンダープレフィックスを追加することによって）。
• PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE — 既存のアセットのサイズを最適化します（例：空白を最小化または省略することによって）。
• PROCESS_ASSETS_STAGE_DEV_TOOLING — アセットに開発ツールを追加します（例：ソースマップを抽出することによって）。
• PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE — 既存のアセットを他のアセットにインライン化することによって、既存のアセットの数を最適化します。
• PROCESS_ASSETS_STAGE_SUMMARIZE — 既存のアセットのリストを要約します。
• PROCESS_ASSETS_STAGE_OPTIMIZE_HASH — アセットのハッシュを最適化する（例：アセットコンテンツの実際のハッシュを生成する）。
• PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER — 既存のアセットの転送を最適化する（例：圧縮 (gzip) ファイルを別のアセットとして準備する）。
• PROCESS_ASSETS_STAGE_ANALYSE — 既存のアセットを分析する。
• PROCESS_ASSETS_STAGE_REPORT — レポート作成のための資産を作成する。

afterProcessAssets#

processAssetsフックがエラーなしで終了した後に呼び出される。

• 型: SyncHook<Assets>
• 引数
  • Assets: Record<string, Source>: アセットインスタンスのリスト

afterSeal#

シールフェーズ後に呼び出される。

• 型: AsyncSeriesHook<[]>

chunkHash#

各チャンクのハッシュを発行するためにトリガーされる。

• 型: SyncHook<[Chunk, Hash]>
• 引数
  • Chunk: チャンクインスタンス
  • Hash: チャンクハッシュインスタンス

chunkAsset#

チャンクのアセットがコンパイルに追加されたときにトリガーされる。

• 型: SyncHook<[Chunk, string]>
• 引数
  • Chunk: チャンクインスタンス
  • string: アセットファイル名

childCompiler#

子コンパイラの設定後に実行される。

• 型: SyncHook<[Compiler, string, number]>
• 引数
  • Compiler: 子コンパイラインスタンス
  • string: 子コンパイラ名
  • number: 子コンパイラインデックス

statsPreset#

このフックは、プリセットが使用されたときにトリガーされるアクションのリストのようなものです。オプションオブジェクトを受け取ります。プラグインがプリセットを管理する場合、既存のものを置き換えることなく、このオブジェクトの設定を注意深く変更する必要があります。

• 型: SyncHook<[Partial<StatsOptions>, CreateStatsOptionsContext]>
• 引数
  • Partial<StatsOptions>: stats オプション
  • CreateStatsOptionsContext: stats コンテキスト

これはプラグインの例です。

compilation.hooks.statsPreset.for('my-preset').tap('MyPlugin', options => {
  if (options.all === undefined) options.all = true;
});

このプラグインは、プリセット"my-preset"で、allオプションが未定義の場合、デフォルトでtrueになるようにします。

statsNormalize#

このフックは、オプションオブジェクトを一貫性のあるフォーマットに変換するために使用されます。これにより、後続のフックで簡単に使用できます。また、欠落しているオプションをデフォルト値に設定します。

• 型: SyncHook<[Partial<StatsOptions>, CreateStatsOptionsContext]>
• 引数
  • Partial<StatsOptions>: stats オプション
  • CreateStatsOptionsContext: stats コンテキスト

これはプラグインの例です。

compilation.hooks.statsNormalize.tap('MyPlugin', options => {
  if (options.myOption === undefined) options.myOption = [];

  if (!Array.isArray(options.myOption)) options.myOptions = [options.myOptions];
});

このプラグインでは、myOptionが欠落している場合、[]に設定されます。さらに、元々は単一の値として定義されていた場合でも、myOptionが常に配列であることを保証します。

statsFactory#

このフックは、特定のオプションに対してStatsFactoryクラスにアクセスできます。

• 型: SyncHook<[StatsFactory, StatsOptions]>
• 引数
  • StatsFactory: stats ファクトリーインスタンス、詳細はStats Factory Hooksを参照してください。
  • StatsOptions: stats オプション

statsPrinter#

このフックは、特定のオプションに対してStatsPrinterクラスにアクセスできます。

• 型: SyncHook<[StatsPrinter, StatsOptions]>
• 引数
  • StatsPrinter: stats プリンターインスタンス、詳細はStats Printer Hooksを参照してください。
  • StatsOptions: stats オプション