Wen zheng/ink
preface
When using Webpack, we often use webpack plug-ins such as WebPackbar or Progress-bar-webpack-plugin to display the construction progress of Webpack by means of progress bar, so as to improve the feedback experience during the construction process. For different plug-ins, they only have different UI display forms of progress bar, but the data source of real-time progress of the core Webpack construction is the same, which is provided by the plug-in ProgressPlugin inside WebPack. I’ll show you how the plugin calculates the webPack build progress and exposes the progress data to a third-party progress bar plug-in using the source code. Before you read on, try asking yourself: How would you calculate webPack build progress?
Calculation of build schedule
The plug-in mainly defines the current progress value based on the webPack build phase. The WebPack build process is divided into many different stages, and at each stage WebPack exposes the corresponding event hooks. It is through these event hooks that ProgressPlugin defines a base progress value for each stage, as shown below:
The interceptHook method in the above code can be ignored for now, but will be covered later.
Using the code above, you can see that ProgressPlugin sets a progress value to each hook in the Compiler. However, these progress values are not detailed enough to reflect the detailed build process of WebPack, missing 0.06 to 0.69 and 0.69 to 0.95 stages in between. The actual execution of a WebPack build is primarily in the Compilation, and the values for these two stages are populated by the Compilation hooks.
0.06 ~ 0.69
The call to the update method is triggered by the compilation hook as follows:
The main work in this stage is the processing and construction of Module,entry and dependencies. On the other hand, this part of the work is also the most time-consuming part of WebPack, judging from the progress value set for this phase by ProgressPlugin.
0.69 ~ 0.95
This interval is based solely on the hooks of programmer compilation that specify the current build progress. This stage is mainly about module, chunk, and assets optimization.
Basically, the progress of the entire WebPack build process is set according to the compiler and compilation hooks described above.
Disclosure of progress data
After the webPack build progress is determined, the remaining task is to expose the progress data to the third-party progress bar plug-in for display. To do this, the ProgressPlugin does two things. One is to provide a cut point to the callback function. The second is the passing in of the percentage value of progress that needs to be able to execute the callback function in the corresponding hook node. Here’s how these two things work
The callback function
ProgressPlugin defines a handler function to access as a callback, as shown below:
Hook hijacked
The implementation of hook hijacking is very simple, mainly using the Intercept method provided by Webpack Hook native. The interceptHook method mentioned above is only the encapsulation of the Intercept method. The sample code is as follows:
conclusion
The implementation principle of the progress bar constructed by Webpack is so simple that a progress value is set for the corresponding hook in each construction stage, and then the progress information is passed into the callback function through handler callback and hook hijacking. Finally, the third plug-in obtains the progress value through handler and displays it.
A lot of webPack’s other features aren’t as complex or fancy as you’d expect, and reading the source code to see how it works, you’re probably going to slap your thighs and say, wow, that’s fun in and of itself.
Continue to hit the recruitment advertisement, Alibaba business platform experience technology team to recruit senior front-end and front-end technology experts, welcome to submit your resume.
Email: [email protected] Wechat: Longmaost