文章轉載自公眾號：墨箏
前言
我們在使用 webpack 的時候經(jīng)常會用到 webpackbar 或者 progress-bar-webpack-plugin 之類的 webpack 插件通過進度條等方式來展示 webpack 的構建進度，以提升構建過程中的反饋體驗。對于不同的插件來說，它們只是進度條的 UI 展示形式不同而已，但最核心的 webpack 構建的實時進度的數(shù)據(jù)來源卻是一致的，均由 webpack 內(nèi)部的 ProgressPlugin 這個插件提供。下面我會結合源碼來講解該插件是如何計算 webpack 的構建進度并將進度數(shù)據(jù)暴露給第三方的進度條插件。在閱讀下文之前可以試著問下自己：如果是你，你會如何計算 webpack 的構建進度。
構建進度的計算
該插件主要根據(jù) webpack 的構建階段來定義當前進度值。webpack 的構建過程分為很多不同的階段，在每個階段 webpack 都暴露了對應的事件鉤子。ProgressPlugin 正是通過這些事件鉤子對每個階段都定義了一個基礎進度值，代碼如下所示：
上述代碼中的 interceptHook 方法可以先忽略，這個后續(xù)會提到。
通過上述代碼你會發(fā)現(xiàn) ProgressPlugin 給 compiler 中的每個鉤子都設置了一個指定的進度值。但這些進度值還不夠細致到反映 webpack 的詳細構建過程，中間還差了 0.06 到 0.69 以及 0.69 到 0.95 兩個階段的數(shù)值。webpack構建的具體執(zhí)行過程主要在 compilation 中，這兩個階段的數(shù)值由 compilation 的鉤子填充。
0.06~0.69
update 方法的調(diào)用由 compilation 的鉤子觸發(fā)，如下所示：
這個階段的主要工作是 module,entry 以及 dependencies 的處理和構建。換個角度從 ProgressPlugin 給該階段設置的進度值來看，這部分工作也是 webpack 最耗時的地方。
0.69~0.95
從上述代碼中可以看出這個間隔段就完全是根據(jù) compilation 的 hooks 來計算和指定當前的構建進度值，從hook 的描述中可以看出這個階段主要是 module, chunk 以及assets等資源的優(yōu)化工作。
基本上整個 webpack 構建過程的進度值就是根據(jù)上述中的 compiler 和 compilation 的 hooks 來設置的。
進度數(shù)據(jù)的透出
webpack 的構建進度確定之后剩下的任務就是將進度數(shù)據(jù)透出給第三方的進度條插件進行展示。要完成該任務需要ProgressPlugin完成兩件事情，一是提供回調(diào)函數(shù)的切入口；二是需要能在對應的 hook 節(jié)點執(zhí)行該回調(diào)函數(shù)進行進度的百分比值的傳入。以下是這兩點的實現(xiàn)原理
回調(diào)函數(shù)
ProgressPlugin 定義了 handler 函數(shù)來作為回調(diào)函數(shù)切入，代碼如下所示：
hook 劫持
hook 劫持的實現(xiàn)非常簡單，主要利用 webpack hook 原生提供的intercept方法，前文中提到的interceptHook方法只是對于 intercept 方法的封裝，示例代碼如下：
結語
webpack 構建的進度條實現(xiàn)原理就是如此簡單，給每個構建階段對應的 hook 設置一個進度值，然后通過 handler 回調(diào)和 hook 劫持切入到構建環(huán)節(jié)將進度信息傳入回調(diào)函數(shù)，最終第三插件通過 handler 獲取到進度值后將其展示出來。 webpack 的很多其他功能其實也沒有想象中的那么復雜和高大上，通過閱讀其源代碼了解其實現(xiàn)原理后，你很可能會一拍大腿，大嘆一聲原來如此，這本身就是一件挺有意思的事兒。
以上就是W3Cschool編程獅關于webpack 構建進度條 ProgressPlugin 源碼剖析的相關介紹了，希望對大家有所幫助。
