Webpack build progress bar ProgressPlugin source profile

This article was reproduced from the public number: Mozheng

preface

Webpack plug-ins such as webpackbar or progress-bar-webpack-plugin are often used when using webpack to demonstrate the progress of a webpack build in a way that improves the feedback experience during the build process. F or different plug-ins, they are just different UI representations of the progress bar, but the core webpack builds a consistent source of real-time progress data, provided by ProgressPlugin plug-in inside the webpack. I 'll combine the source code to explain how the plug-in calculates the progress of a webpack build and exposes progress data to third-party progress bar plug-ins. Try asking yourself before reading below: If it were you, how would you calculate the build progress of webpack.

The calculation of the build progress

The plug-in defines the current progress value primarily based on the build phase of the webpack. pack build process is divided into many different stages, each of which exposes the corresponding event hooks. It is through these event hooks that ProgressPlugin defines a base progress value for each stage, as follows:

The interceptHook method in the code above can be ignored first, as mentioned later. F rom the code above, you will find that ProgressPlugin sets a specified progress value for each hook in compiler H owever, these progress values are not detailed enough to reflect the detailed build process of webpack, with values in the middle of 0.06 to 0.69 and 0.69 to 0.95 stages. The specific execution of the webpack build is primarily in compilation and the values for these two stages are populated by the hooks of compilation

0.06~0.69

The call to the update method is triggered by the hook of the compile, as follows:

The main work at this stage is the processing and construction of module entry and dependencies To put it another way, this part of the work is also the most time-consuming part of the webpack, given the progress value set by ProgressPlugin for this phase.

0.69~0.95

As you can see from the above code, this interval is based entirely on the hooks of the compilation to calculate and specify the current build progress value, as can be seen from the description of hook, which is primarily the optimization of resources such as module chunk and assets Basically, the progress value for the entire webpack build process is set based on compiler and compilation hooks in the above.

Progress data is revealed

After the build progress of webpack is determined, the remaining task is to present the progress data to the third party's progress bar plug-in. T o accomplish this task, ProgressPlugin needs to do two things, one is to provide a cut entry to the callback function, and the other is to be able to execute the callback function in the corresponding hook node to progress the percentage value of the value. Here's how these two things work

Callback function

ProgressPlugin defines the handler function to cut in as a callback function, as follows:

Hook hijacking

The implementation of hook hijacking is very simple, mainly using the intercept method provided by the webpack hook native, and the interceptHook method mentioned earlier is only a encapsulation of the intercept method, the sample code is as follows:

epilogue

The progress bar implementation principle of the webpack build is as simple as this, setting a progress value for the hook corresponding to each build phase, and then passing the progress information into the callback function through the handler callback and hook hijacking to the build, and finally the third plug-in gets the progress value through handler and displays it. Many of webpack's other features aren't as complex and tall as you might think, and by reading its source code to understand how it works, you're likely to pat your thighs and sigh that it's the way it is, which is interesting in itself.

The above is W3Cschool编程狮 about the webpack build progress bar ProgressPlugin source profile of the relevant introduction, I hope to help you.