エンタープライズアプリケーション向けデータグリッドとチャート
webpack
webpackとのパートナーシップを誇りに思います

コンパイルフック

Compilationモジュールは、Compilerによって新しいコンパイル（またはビルド）を作成するために使用されます。compilationインスタンスは、すべてのモジュールとその依存関係（そのほとんどは循環参照です）にアクセスできます。これは、アプリケーションの依存関係グラフ内のすべてのモジュールの文字通りのコンパイルです。コンパイルフェーズでは、モジュールはロード、シール、最適化、チャンク化、ハッシュ化、復元されます。

CompilationクラスはTapableを拡張し、以下のライフサイクルフックを提供します。これらはコンパイラーフックと同じ方法でタップできます。

compilation.hooks.someHook.tap(/* ... */);

compilerと同様に、フックの種類によってはtapAsyncとtapPromiseも使用できる場合があります。

buildModule

SyncHook

モジュールのビルドが開始される前にトリガーされ、モジュールを変更するために使用できます。

  • コールバックパラメーター: module
compilation.hooks.buildModule.tap(
  'SourceMapDevToolModuleOptionsPlugin',
  (module) => {
    module.useSourceMap = true;
  }
);

rebuildModule

SyncHook

モジュールの再ビルド前に発生します。

  • コールバックパラメーター: module

failedModule

SyncHook

モジュールのビルドが失敗したときに実行されます。

  • コールバックパラメーター: module error

succeedModule

SyncHook

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

  • コールバックパラメーター: module

finishModules

AsyncSeriesHook

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

  • コールバックパラメーター: modules

finishRebuildingModule

SyncHook

成功した場合とエラーが発生した場合の両方で、モジュールの再ビルドが完了したときに実行されます。

  • コールバックパラメーター: module

seal

SyncHook

コンパイルが新しいモジュールを受け入れなくなる際に発生します。

unseal

SyncHook

コンパイルが新しいモジュールを受け入れ始める際に発生します。

optimizeDependencies

SyncBailHook

依存関係の最適化の開始時に発生します。

  • コールバックパラメーター: modules

afterOptimizeDependencies

SyncHook

依存関係の最適化後に発生します。

  • コールバックパラメーター: modules

afterChunks

SyncHook

5.83.0+

afterChunksフックは、チャンクとモジュールグラフの作成後、それらの最適化前に呼び出されます。このフックは、必要に応じてチャンクグラフを検査、分析、および変更する機会を提供します。

compilation.hooks.afterChunksフックの使用方法の例をこちらで確認できます。

  • コールバックパラメーター: chunks

optimize

SyncHook

最適化フェーズの開始時にトリガーされます。

optimizeModules

SyncBailHook

モジュールの最適化フェーズの開始時に呼び出されます。プラグインは、このフックを利用してモジュールの最適化を実行できます。

  • コールバックパラメーター: modules

afterOptimizeModules

SyncHook

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

  • コールバックパラメーター: modules

optimizeChunks

SyncBailHook

チャンクの最適化フェーズの開始時に呼び出されます。プラグインは、このフックを利用してチャンクの最適化を実行できます。

  • コールバックパラメーター: chunks

afterOptimizeChunks

SyncHook

チャンクの最適化が完了した後に発生します。

  • コールバックパラメーター: chunks

optimizeTree

AsyncSeriesHook

依存関係ツリーの最適化の前に呼び出されます。プラグインは、このフックを利用して依存関係ツリーの最適化を実行できます。

  • コールバックパラメーター: chunks modules

afterOptimizeTree

SyncHook

依存関係ツリーの最適化が正常に完了した後に呼び出されます。

  • コールバックパラメーター: chunks modules

optimizeChunkModules

SyncBailHook

ツリーの最適化後、チャンクモジュールの最適化の開始時に呼び出されます。プラグインは、このフックを利用してチャンクモジュールの最適化を実行できます。

  • コールバックパラメーター: chunks modules

afterOptimizeChunkModules

SyncHook

chunkmodulesの最適化が正常に完了した後に呼び出されます。

  • コールバックパラメーター: chunks modules

shouldRecord

SyncBailHook

レコードを保存するかどうかを決定するために呼び出されます。!== falseを返すものは、他のすべての「レコード」フックの実行を妨げます（record、recordModules、recordChunks、およびrecordHash）。

reviveModules

SyncHook

レコードからモジュール情報を復元します。

  • コールバックパラメーター: modules records

beforeModuleIds

SyncHook

各モジュールにidを割り当てる前に実行されます。

  • コールバックパラメーター: modules

moduleIds

SyncHook

各モジュールにidを割り当てるために呼び出されます。

  • コールバックパラメーター: modules

optimizeModuleIds

SyncHook

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

  • コールバックパラメーター: modules

afterOptimizeModuleIds

SyncHook

モジュールのid最適化フェーズが完了したときに呼び出されます。

  • コールバックパラメーター: modules

reviveChunks

SyncHook

レコードからチャンク情報を復元します。

  • コールバックパラメーター: chunks records

beforeChunkIds

SyncHook

各チャンクにidを割り当てる前に実行されます。

  • コールバックパラメーター: chunks

chunkIds

SyncHook

各チャンクにidを割り当てるために呼び出されます。

  • コールバックパラメーター: chunks

optimizeChunkIds

SyncHook

チャンクのid最適化フェーズの開始時に呼び出されます。

  • コールバックパラメーター: chunks

afterOptimizeChunkIds

SyncHook

チャンクのid最適化が完了した後にトリガーされます。

  • コールバックパラメーター: chunks

recordModules

SyncHook

shouldRecordがtruthy値を返す場合に、レコードにモジュール情報を保存します。

  • コールバックパラメーター: modules records

recordChunks

SyncHook

shouldRecordがtruthy値を返す場合にのみ、レコードにチャンク情報を保存します。

  • コールバックパラメーター: chunks records

beforeModuleHash

SyncHook

モジュールのハッシュ化の前に呼び出されます。

afterModuleHash

syncHook

モジュールのハッシュ化後に呼び出されます。

beforeHash

SyncHook

コンパイルのハッシュ化の前に呼び出されます。

afterHash

SyncHook

コンパイルのハッシュ化後に呼び出されます。

recordHash

SyncHook

shouldRecordがtruthy値を返す場合にのみ、レコードハッシュに関する情報をrecordsに保存します。

  • コールバックパラメーター: records

record

SyncHook

shouldRecordがtruthy値を返す場合にのみ、compilationに関する情報をrecordsに保存します。

  • コールバックパラメーター: compilation records

beforeModuleAssets

SyncHook

モジュールアセットの作成前に実行されます。

additionalChunkAssets

SyncHook

チャンクに追加のアセットを作成します。

  • コールバックパラメーター: chunks

shouldGenerateChunkAssets

SyncBailHook

チャンクアセットを生成するかどうかを決定するために呼び出されます。!== falseを返すものは、チャンクアセットの生成を許可します。

beforeChunkAssets

SyncHook

チャンクアセットの作成前に実行されます。

additionalAssets

AsyncSeriesHook

コンパイルに追加のアセットを作成します。このフックは、たとえば画像をダウンロードするために使用できます。

compilation.hooks.additionalAssets.tapAsync('MyPlugin', (callback) => {
  download('https://img.shields.io/npm/v/webpack.svg', function (resp) {
    if (resp.status === 200) {
      compilation.assets['webpack-version.svg'] = toAsset(resp);
      callback();
    } else {
      callback(
        new Error('[webpack-example-plugin] Unable to download the image')
      );
    }
  });
});

optimizeChunkAssets

AsyncSeriesHook

チャンクアセットを最適化します。アセットはcompilation.assetsに保存されます。Chunkには、チャンクによって作成されたすべてのファイルを指すプロパティfilesがあります。追加のチャンクアセットは、compilation.additionalChunkAssetsに保存されます。

  • コールバックパラメーター: chunks

各チャンクにバナーを追加する例を次に示します。

compilation.hooks.optimizeChunkAssets.tapAsync(
  'MyPlugin',
  (chunks, callback) => {
    chunks.forEach((chunk) => {
      chunk.files.forEach((file) => {
        compilation.assets[file] = new ConcatSource(
          '/**Sweet Banner**/',
          '\n',
          compilation.assets[file]
        );
      });
    });

    callback();
  }
);

afterOptimizeChunkAssets

SyncHook

チャンクアセットは最適化されました。

  • コールバックパラメーター: chunks

@boopathi の例として、各チャンクに何が含まれているかを正確に出力するプラグインを示します。

compilation.hooks.afterOptimizeChunkAssets.tap('MyPlugin', (chunks) => {
  chunks.forEach((chunk) => {
    console.log({
      id: chunk.id,
      name: chunk.name,
      includes: chunk.getModules().map((module) => module.request),
    });
  });
});

optimizeAssets

AsyncSeriesHook

compilation.assets に格納されているすべてのアセットを最適化します。

  • コールバックパラメータ: assets

afterOptimizeAssets

SyncHook

アセットは最適化されました。

  • コールバックパラメータ: assets

processAssets

AsyncSeriesHook

アセット処理。

フックパラメータ

コールバックパラメータ

  • assets: { [pathname: string]: Source } — キーがアセットのパス名、値が Source で表されるアセットのデータであるプレーンオブジェクト。

例

compilation.hooks.processAssets.tap(
  {
    name: 'MyPlugin',
    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages
  },
  (assets) => {
    console.log('List of assets and their sizes:');
    Object.entries(assets).forEach(([pathname, source]) => {
      console.log(`— ${pathname}: ${source.size()} bytes`);
    });
  }
);

追加のアセット

name と stageに加えて、true またはassets を最初の引数として受け取るコールバック関数のいずれかの値を受け入れる additionalAssets 5.8.0+ オプションを渡すことができます。

  1. true — 後でプラグインによって追加されたアセットに対して、提供されたコールバックを再度実行します。

    このモードでは、コールバックは複数回呼び出されます。指定されたステージの前に追加されたアセットに対して1回、その後でプラグインによって追加されたアセットに対して追加で複数回呼び出されます（このステージまたは次のステージで）。

    compilation.hooks.processAssets.tap(
  {
    name: 'MyPlugin',
    stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
    additionalAssets: true,
  },
  (assets) => {
    // this function will be called multiple times with each bulk of assets
  }
);

  2. (assets, [callback]) => (void | Promise<void>) — 後でプラグインによって追加されたアセットに対して、指定されたコールバックを実行します（このステージまたは次のステージで）。コールバックは、使用されたタップメソッドのタイプを尊重する必要があります（例：tapPromise() で使用する場合、プロミスを返す必要があります）。

    compilation.hooks.processAssets.tap(
  {
    name: 'MyPlugin',
    stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
    additionalAssets: (assets) => {
      // this function potentially could be called multiple times for assets added on later stages
    },
  },
  (assets) => {
    // this function will be called once with assets added by plugins on prior stages
  }
);

アセット処理ステージのリスト

サポートされているステージのリスト（処理順）を示します。

  • 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 5.8.0+ — 既存のアセットの数を最適化します（例：アセットを他のアセットにインライン化する）。
  • PROCESS_ASSETS_STAGE_SUMMARIZE — 既存のアセットのリストを要約します。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_HASH — アセットのハッシュを最適化します（例：アセットコンテンツの実際のハッシュを生成する）。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER — 既存のアセットの転送を最適化します（例：圧縮された（gzip）ファイルを別のアセットとして準備する）。
  • PROCESS_ASSETS_STAGE_ANALYSE — 既存のアセットを分析します。
  • PROCESS_ASSETS_STAGE_REPORT — レポート目的のアセットを作成します。

アセット情報

このフックでは、「アセット情報」メタデータは自動的に提供されません。必要に応じて、コンパイルインスタンスと提供されたアセットパス名を使用して、このメタデータを手動で解決する必要があります。これはWebpackの今後のバージョンで改善されます。

例

compilation.hooks.processAssets.tap(
  {
    /** … */
  },
  (assets) => {
    Object.entries(assets).forEach(([pathname, source]) => {
      const assetInfo = compilation.assetsInfo.get(pathname);
      // @todo: do something with "pathname", "source" and "assetInfo"
    });
  }
);

afterProcessAssets

SyncHook

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

needAdditionalSeal

SyncBailHook

コンパイルで他のファイルを含めるために封印を解除する必要があるかどうかを判断するために呼び出されます。

afterSeal

AsyncSeriesHook

needAdditionalSealの直後に実行されます。

chunkHash

SyncHook

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

  • コールバックパラメータ: chunk chunkHash

moduleAsset

SyncHook

モジュールのアセットがコンパイルに追加されたときに呼び出されます。

  • コールバックパラメータ: module filename

chunkAsset

SyncHook

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

  • コールバックパラメータ: chunk filename

assetPath

SyncWaterfallHook

アセットのパスを決定するために呼び出されます。

  • コールバックパラメータ: path options

needAdditionalPass

SyncBailHook

アセットが発行された後、さらに処理する必要があるかどうかを判断するために呼び出されます。

childCompiler

SyncHook

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

  • コールバックパラメータ: childCompiler compilerName compilerIndex

normalModuleLoader

Webpack v5以降、normalModuleLoaderフックは削除されました。ローダーにアクセスするには、代わりにNormalModule.getCompilationHooks(compilation).loaderを使用してください。

このページを編集·このページを印刷
« 前へ
コンパイラフック
次へ »
ContextModuleFactoryフック

9 貢献者

slavafominbyzykmadhavarshneymisterdevwizardofhogwartsEugeneHlushkochenxsanjamesgeorge007snitin315