編譯掛勾

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

afterChunks 鉤子會在建立區塊和模組圖後，以及在最佳化之前呼叫。此鉤子提供機會讓您在必要時檢查、分析和修改區塊圖。

以下是 一個範例，說明如何使用 compilation.hooks.afterChunks 鉤子。

• 呼叫回參數：chunks

最佳化

SyncHook

在最佳化階段一開始觸發。

最佳化模組

SyncBailHook

在模組最佳化階段一開始呼叫。外掛程式可以利用此鉤子對模組執行最佳化。

• 回呼參數：modules

最佳化模組後

SyncHook

在模組最佳化完成後呼叫。

• 回呼參數：modules

最佳化區塊

SyncBailHook

在區塊最佳化階段一開始呼叫。外掛程式可以利用此鉤子對區塊執行最佳化。

• 呼叫回參數：chunks

最佳化區塊後

SyncHook

在區塊最佳化完成後觸發。

• 呼叫回參數：chunks

最佳化樹狀結構

AsyncSeriesHook

在最佳化相依性樹狀結構之前呼叫。外掛程式可以利用此鉤子執行相依性樹狀結構最佳化。

• 呼叫回參數：chunks modules

最佳化樹狀結構後

SyncHook

在依存關係樹最佳化成功完成後呼叫。

• 呼叫回參數：chunks modules

optimizeChunkModules

SyncBailHook

在樹最佳化之後、區塊模組最佳化開始時呼叫。外掛程式可以利用此掛勾來執行區塊模組最佳化。

• 呼叫回參數：chunks modules

afterOptimizeChunkModules

SyncHook

在區塊模組最佳化成功完成後呼叫。

• 呼叫回參數：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 傳回真值，則會觸發此動作。

• 呼叫參數：modules records

recordChunks

SyncHook

將區塊資訊儲存到記錄中。如果 shouldRecord 傳回真值，則只會觸發此動作。

• 回呼參數：chunks records

beforeModuleHash

SyncHook

在對模組進行雜湊處理之前呼叫。

afterModuleHash

syncHook

在對模組進行雜湊處理之後呼叫。

beforeHash

SyncHook

在對編譯進行雜湊處理之前呼叫。

afterHash

SyncHook

在對編譯進行雜湊處理之後呼叫。

recordHash

SyncHook

將紀錄雜湊的資訊儲存到 records。這僅會在 shouldRecord 傳回真值時觸發。

• 呼叫回參數：records

record

SyncHook

將 compilation 的資訊儲存到 records。這僅會在 shouldRecord 傳回真值時觸發。

• 呼叫回參數：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

資產處理。

鉤子參數

• name: string — 外掛程式的名稱
• stage: Stage — 要點選的階段（請參閱下方的 支援階段清單）
• additionalAssets?: true | (assets, [callback]) => (void | Promise<void>) — 額外資源的回呼函式 (請見下方)

回呼函式參數

• 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 之外，您還可以傳遞 additionalAssets 5.8.0+ 選項，它接受 true 值或接收 assets 作為第一個引數的回呼函式

1. true — 針對外掛稍後新增的資源再次執行提供的回呼函式。

   在此模式中，回呼函式將會被呼叫多次：一次是針對在指定階段之前新增的資源，以及多次針對外掛稍後新增的資源 (在此或下一個階段)。

   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>) — 針對外掛稍後新增的資源 (在此或下一個階段) 執行指定的回呼函式。回呼函式必須符合所使用的 tap 方法的類型 (例如，當與 tapPromise() 一起使用時，它應該傳回一個 Promise)。

   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 — 最佳化現有資源的相容性，例如新增 polyfill 或供應商前綴。
• 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。