ProgressPlugin

​ProgressPlugin​ 提供了一种自定义如何在编译过程中报告进度的方法。

Usage

创建 ​ProgressPlugin​ 的一个实例，并提供一个允许的参数。

Providing ​function​

提供一个处理函数，当钩子报告进度时调用它。处理程序函数参数:

• ​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);

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

模块总数事先是未知的，并且在构建过程中会发生变化。这可能导致不准确的进度百分比。

为了解决这个问题，​ProgressPlugin​ 缓存最后已知的模块总数，并在下一个构建中重用这个值。第一次构建将加热缓存，但后续构建将使用并更新此值。

我们建议对具有多个配置入口点的项目使用​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