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;

百分比计算

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

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

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

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

支持的钩子

以下钩子向 ProgressPlugin 报告进度信息。

编译器

• 编译
• emit*
• afterEmit*
• 完成

编译

• 构建模块
• 模块失败
• 模块成功
• 完成模块*
• 密封*
• 优化基本依赖项*
• 优化依赖项*
• 优化高级依赖项*
• 优化依赖项后*
• 优化*
• 优化基本模块*
• 优化模块*
• 优化高级模块*
• 优化模块后*
• 优化基本块*
• 优化块*
• 优化高级块*
• 优化块后*
• 优化树*
• 优化树后*
• 优化块模块基本*
• 优化块模块*
• 优化块模块高级*
• 优化块模块后*
• 恢复模块*
• 优化模块顺序*
• 高级优化模块顺序*
• 模块 ID 之前*
• 模块 ID*
• optimizeModuleIds*
• afterOptimizeModuleIds*
• reviveChunks*
• optimizeChunkOrder*
• beforeChunkIds*
• optimizeChunkIds*
• afterOptimizeChunkIds*
• recordModules*
• recordChunks*
• beforeHash*
• afterHash*
• recordHash*
• beforeModuleAssets*
• beforeChunkAssets*
• additionalChunkAssets*
• record*
• additionalAssets*
• optimizeChunkAssets*
• afterOptimizeChunkAssets*
• optimizeAssets*
• afterOptimizeAssets*
• afterSeal*

来源

• ProgressPlugin 来源