ProgressPlugin

ProgressPlugin 提供一種自訂在編譯期間如何報告進度的途徑。

用法

建立 ProgressPlugin 的執行個體並提供一個允許的參數，此外，還有一個靜態方法 createDefaultHandler 可用於自訂預設處理常式。

提供 function

提供一個處理常式函數，當掛勾報告進度時將呼叫該函數。handler 函數引數

• percentage：一個介於 0 到 1 之間的數字，表示編譯完成的百分比
• message：目前正在執行的掛勾的簡短說明
• ...args：零個或多個描述目前進度的其他字串

const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);

提供 object

當提供 object 給 ProgressPlugin 時，支援下列屬性

• activeModules (boolean = false)：顯示活動模組計數和進行中的活動模組訊息。
• entries (boolean = true)：在進度訊息中顯示項目計數。
• handler（請參閱 提供函式）
• modules (boolean = true)：在進度訊息中顯示模組計數。
• modulesCount (number = 5000)：開始的最小模組計數。當啟用 modules 屬性時生效。
• profile (boolean = false)：指示 ProgressPlugin 為進度步驟收集設定檔資料。
• dependencies (boolean = true)：在進度訊息中顯示依賴項計數。
• dependenciesCount (number = 10000)：開始的最小依賴項計數。當啟用 dependencies 屬性時生效。
• percentBy (string = null: 'entries' | 'dependencies' | 'modules' | null)：指示 ProgressPlugin 如何計算進度百分比。

new webpack.ProgressPlugin({
  activeModules: false,
  entries: true,
  handler(percentage, message, ...args) {
    // custom logic
  },
  modules: true,
  modulesCount: 5000,
  profile: false,
  dependencies: true,
  dependenciesCount: 10000,
  percentBy: null,
});

webpack.ProgressPlugin.createDefaultHandler

如果 ProgressPlugin 的預設處理常式不符合您的需求，您可以使用靜態 ProgressPlugin.createDefaultHandler 方法自訂處理常式。

static createDefaultHandler: (
  profile: undefined | null | boolean,
  logger: WebpackLogger
) => (percentage: number, msg: string, ...args: string[]) => void;

百分比計算

預設情況下，進度百分比是根據已建置模組計數和總模組計數計算的：已建置 / 總計

總模組計數事先未知，且會在建置過程中變更。這可能會導致進度百分比不準確。

為了解決此問題，ProgressPlugin 會快取最後已知的總模組計數，並在下次建置時重複使用此值。第一次建置會預熱快取，但後續建置會使用並更新此值。

對於有多個已設定進入點的專案，我們建議使用 percentBy: 'entries' 設定。因為事先已知道進入點的數量，所以百分比計算會更準確。

支援的 Hook

下列 Hook 會將進度資訊回報給 ProgressPlugin。

編譯器

• 編譯
• 發射*
• 發射後*
• 完成

編譯

• 建置模組
• 模組失敗
• 模組成功
• 完成模組*
• 封存*
• 最佳化基本相依性*
• 最佳化相依性*
• 最佳化進階相依性*
• 最佳化相依性後*
• 最佳化*
• 最佳化基本模組*
• 最佳化模組*
• 最佳化進階模組*
• 最佳化模組後*
• 最佳化基本區塊*
• 最佳化區塊*
• 最佳化進階區塊*
• 最佳化區塊後*
• 最佳化樹狀結構*
• 最佳化樹狀結構後*
• 最佳化基本區塊模組*
• 最佳化區塊模組*
• 最佳化進階區塊模組*
• 最佳化區塊模組後*
• 復原模組*
• 最佳化模組順序*
• 進階最佳化模組順序*
• 模組 ID 前*
• 模組 ID*
• 最佳化模組 ID*
• 最佳化模組 ID 後*
• 復原區塊*
• 最佳化區塊順序*
• 區塊 ID 前*
• 最佳化區塊 ID*
• 最佳化區塊 ID 後*
• 記錄模組*
• 記錄區塊*
• 雜湊前*
• 雜湊後*
• 記錄雜湊*
• 模組資產前*
• 區塊資產前*
• 其他區塊資產*
• 記錄*
• additionalAssets*
• optimizeChunkAssets*
• afterOptimizeChunkAssets*
• optimizeAssets*
• afterOptimizeAssets*
• afterSeal*

來源

• ProgressPlugin 來源