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

当向 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,
});

webpack.ProgressPlugin.createDefaultHandler

如果 ProgressPlugin 的默认处理器不符合你的要求，你可以使用静态方法 ProgressPlugin.createDefaultHandler 进行自定义。

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

百分比计算

默认情况下，进度百分比是根据已构建模块计数和总模块计数计算的：built / total。

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

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

对于具有多个配置入口点的项目，我们建议使用 percentBy: 'entries' 设置。由于入口点数量是预先知道的，百分比计算将变得更加准确。

支持的钩子

以下钩子向 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*

源码

• ProgressPlugin 源码