ProgressPlugin

?ProgressPlugin? 提供了一種自定義如何在編譯過程中報告進度的方法。

Usage

創(chuàng)建 ?ProgressPlugin? 的一個實例，并提供一個允許的參數。

Providing ?function?

提供一個處理函數，當鉤子報告進度時調用它。處理程序函數參數:

• ?percentage?:0到1之間的數字，表示編譯完成的百分比
• ?Message?:當前正在執(zhí)行的鉤子的簡短描述
• ?…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);

Providing ?object?

當向 ?ProgressPlugin? 提供 object 時，支持以下屬性:

• ?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,
});

Percentage calculation

默認情況下，進度百分比根據已構建模塊數和總模塊數計算: built / total

模塊總數事先是未知的，并且在構建過程中會發(fā)生變化。這可能導致不準確的進度百分比。

為了解決這個問題，?ProgressPlugin? 緩存最后已知的模塊總數，并在下一個構建中重用這個值。第一次構建將加熱緩存，但后續(xù)構建將使用并更新此值。

我們建議對具有多個配置入口點的項目使用?percentBy: 'entries'?設置。百分比計算將變得更加準確，因為入口點的數量是預先知道的。

Supported Hooks

下面的鉤子向?ProgressPlugin?報告進度信息。

Compiler

• compilation
• emit*
• afterEmit*
• done

Compilation

• buildModule
• failedModule
• succeedModule
• finishModules*
• seal*
• optimizeDependenciesBasic*
• optimizeDependencies*
• optimizeDependenciesAdvanced*
• afterOptimizeDependencies*
• optimize*
• optimizeModulesBasic*
• optimizeModules*
• optimizeModulesAdvanced*
• afterOptimizeModules*
• optimizeChunksBasic*
• optimizeChunks*
• optimizeChunksAdvanced*
• afterOptimizeChunks*
• optimizeTree*
• afterOptimizeTree*
• optimizeChunkModulesBasic*
• optimizeChunkModules*
• optimizeChunkModulesAdvanced*
• afterOptimizeChunkModules*
• reviveModules*
• optimizeModuleOrder*
• advancedOptimizeModuleOrder*
• beforeModuleIds*
• moduleIds*
• optimizeModuleIds*
• afterOptimizeModuleIds*
• reviveChunks*
• optimizeChunkOrder*
• beforeChunkIds*
• optimizeChunkIds*
• afterOptimizeChunkIds*
• recordModules*
• recordChunks*
• beforeHash*
• afterHash*
• recordHash*
• beforeModuleAssets*
• beforeChunkAssets*
• additionalChunkAssets*
• record*
• additionalAssets*
• optimizeChunkAssets*
• afterOptimizeChunkAssets*
• optimizeAssets*
• afterOptimizeAssets*
• afterSeal*

Source

• ?ProgressPlugin? source