ProgressPlugin 插件

ProgressPlugin 提供了一种在编译期间自定义进度报告方式的方法。

提示：自 webpack 5.109.0 起，你可以通过 infrastructureLogging.progress 显示构建进度，无需手动添加插件。这是 WebpackBar 等第三方进度插件的推荐替代方案。

用法

创建 ProgressPlugin 实例并提供以下允许的参数之一。此外，还有一个静态方法 createDefaultHandler，可用于自定义默认处理函数。

提供 function

提供一个处理函数，当 hooks 报告进度时将调用该函数。handler 函数参数：

• percentage：0 到 1 之间的数字，表示编译完成的百分比。
• message：当前正在执行的 hook 的简短描述。
• ...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（参见提供 function）。
• modules（boolean = true）：在进度消息中显示模块数量。
• modulesCount（number = 5000）：开始显示的最小模块数量。当 modules 属性启用时生效。
• profile（boolean = false）：让 ProgressPlugin 为进度步骤收集 profile 数据。
• dependencies（boolean = true）：在进度消息中显示依赖数量。
• dependenciesCount（number = 10000）：开始显示的最小依赖数量。当 dependencies 属性启用时生效。
• percentBy（string = null，值为 'entries' | 'dependencies' | 'modules' | null）：告诉 ProgressPlugin 如何计算进度百分比。
• progressBar（boolean | 'auto' | object = false，自 5.107.0 起）：在终端中渲染进度条，而不是显示普通的百分比消息。仅在使用默认处理函数（即未提供自定义 handler）时生效。传入 true 以使用默认配置启用，传入 'auto'（自 5.109.0 起）则仅在交互式终端（TTY）中启用，或传入一个包含以下属性的对象：
  • name（string = 'Build'）：进度条前显示的名称。
  • color（string = 'green'）：进度条已填充部分的颜色。当给定颜色不受支持时，回退为 'green'。
  • width（number = 25，自 5.109.0 起）：进度条的字符宽度。
• estimatedTime（boolean = false，自 5.109.0 起）：根据构建进度显示预计剩余时间。
• phaseTimings（boolean = false，自 5.109.0 起）：构建完成时显示每个构建阶段的时间明细。

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

渲染进度条：

new webpack.ProgressPlugin({
  progressBar: {
    name: "Build",
    color: "green",
  },
});

webpack.ProgressPlugin.createDefaultHandler

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

static createDefaultHandler: (
  profile: undefined | null | boolean,
  logger: WebpackLogger,
  progressBar?: { name: string, color: string } | false
) => (percentage: number, msg: string, ...args: string[]) => void;

百分比计算

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

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

为了解决这个问题，ProgressPlugin 会缓存最近一次已知的总模块数量，并在下一次构建时复用该值。第一次构建会预热缓存，而后续构建会使用并更新此值。

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

支持的 Hooks

以下 hooks 会向 ProgressPlugin 报告进度信息。

提示：带有 \* 的 Hooks 允许插件使用 reportProgress 报告进度信息。更多信息，请参阅 Plugin API: Reporting Progress。

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 源代码