前言
我们在使用webpack时，经常会使用webpackbar或者progress-bar-webpack-plugin等webpack插件，通过进度条等形式展示webpack创建的进度，以改善创建过程中的反馈体验。 对于不同的插件来说，只是进度条的UI显示方式不同，但是webpack构建的核心实时进度数据源是相同的，都是由webpack内部的ProgressPlugin插件提供的。 下面我将结合源码来讲解该插件是如何估算webpack创建的进度，并将进度数据暴露给第三方进度条插件的。 在阅读以下内容之前，你可以尝试问自己：如果是你webpack配置进度，你会如何估计 webpack 的建立进度。
估计构建进度
该插件主要根据webpack的构建阶段定义当前进度值。 webpack的建立过程分为很多不同的阶段，每个阶段webpack都会暴露相应的storm hooks。 ProgressPlugin通过这个storm hook定义了每个阶段的基本进度值，代码如下：
上面代码中的interceptHook方法可以先忽略，后面会提到。 通过上面的代码，你会发现ProgressPlugin在编译器中为每个hook设置了一个指定的进度值。 不过这个进度值还不够详细，无法体现webpack详细的改进过程。 还有0.06到0.69和0.69到0.95两个阶段的数值。 webpack建立的具体执行过程主要是在编译阶段webpack配置进度，这两个阶段的值都是通过编译钩子来填充的。
0.06~0.69
update方法的调用是由编译钩子触发的，如下：
这一阶段的主要工作是模块、入口和依赖的处理和重构。 从另一个角度来看，从ProgressPlugin为本阶段设置的进度值来看，这部分工作也是webpack最耗时的部分。
0.69~0.95
从上面的代码可以看出，这个间隔完全是根据编译钩子来估计和指定当前的创建进度值的。 从hook的描述可以看出，这个阶段主要是模块、chunks、assets等资源的优化。 基本上整个webpack构建过程的进度值都是根据上面提到的编译器和编译钩子来设置的。
进展数据披露
webpack的建立进度确定后，剩下的任务就是将进度数据透露给第三方进度条插件进行显示。 为了完成这个任务，ProgressPlugin需要完成两件事。 一是为回调函数提供入口点； 另一种是能够在对应的钩子节点上执行反弹函数传入进度的百分比值。下面是这两点的实现原理
打回来
ProgressPlugin 定义了一个用作回调函数的处理函数。 代码如下：
钩子劫持
hook劫持的实现极其简单，主要依靠webpack hook原生提供的intercept方法。 上面提到的interceptHook方法只是对intercept方法的封装。 示例代码如下：
结论
webpack构建的进度条的实现原理很简单，就是为每个建立阶段对应的hook设置一个进度值，然后通过handler回调和hook劫持切入建立阶段，将进度信息传递给回调函数。 最后第三个插件通过handler获取。 达到进度值后，显示。 webpack的其他很多功能似乎并没有想象中的那么复杂和精巧。 读完它的源码了解了它的实现原理后，你很可能会拍拍屁股感叹原来如此。 这本身就是一件非常有趣的事情。 事物。
以上是W3Cschool编程狮关于ProgressPlugin webpack构建进度条源码分析的相关介绍。 希望对您有所帮助。
