Shulou(Shulou.com)06/01 Report--

This article is to share with you about how webpack achieves packaging progress presentation and beautification. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Prepare for

Since we want to beautify the progress bar, we have to consider changing the color for him. At present, the best way to color terminal strings on the market is chalk, which supports a lot of colors and is very clean and simple. We are using version 4.1.2 here.

# NPMnpm I-D chalk# YARNyarn add-D chalk

After we install it, refer to it in webpack.config.js, as follows:

/ / webpack.config.jsconst HtmlWebpackPlugin = require ("html-webpack-plugin"); const {CleanWebpackPlugin} = require ('clean-webpack-plugin'); const chalk = require ("chalk"); const plugins = [new CleanWebpackPlugin (), new HtmlWebpackPlugin ({filename: "index.html", template: path.resolve (_ dirname, "public/index.html")})] module.exports = {/ /. Plugins}

This is the current infrastructure, and later we will push the introduced plug-ins to plugins, so we will get to the point.

1.webpack.ProgressPlugin

Webpack.ProgressPlugin, as a built-in plug-in to webpack, has the ability to output current progress and brief descriptions in a packaged build, although the extension and beauty may be limited, but you don't have to download other third-party plug-ins.

Const {ProgressPlugin} = require ("webpack") let progressPlugin = new ProgressPlugin ({activeModules: true, / / default false, showing the active module count and an active module in progress message. Entries: true, / / default true, which displays the item count message in progress. Modules: false, / / default true, which displays the module count message in progress. ModulesCount: 5000, / / default is 5000, the minimum number of modules at the beginning. PS:modules takes effect when attributes are enabled. Profile: false, / / default false, tells ProgressPlugin to collect profile data for progress steps. Dependencies: false, / / default true, which displays the dependency count message in progress. DependenciesCount: 10000, / / default 10000, minimum dependency count at the beginning. PS:dependencies takes effect when attributes are enabled. }) plugins.push (progressPlugin)

If the main parameters are specified in the comments, they will not be repeated.

Finally, our output is as follows:

Note that there is one parameter left unwritten in webpack.ProgressPlugin, which is handler, which is a hook function that returns build information, so let's write it briefly.

New ProgressPlugin ({/ /... Handler (percentage, message,... args) {/ / hook function console.log (chalk.yellow ("Progress:") + chalk.green.bold (~ (percentage * 100) + "%") + "" + chalk.yellow.bold ("Action:") + chalk.blue.bold (message)}})

The information returned is as follows:

Percentag: a number between 0 and 1 that represents the percentage complete of the compilation.

Message: a short description of the currently executed hook.

... args: zero or more additional strings that describe the current progress.

The code output of the above hook function is:

2.progress-bar-webpack-plugin

Progress-bar-webpack-plugin this plug-in, if you are familiar with node-progress students will feel no stranger, because its options are almost exactly the same as node-progress, and the transformation is very easy to expand, generally speaking, flexible and easy to use is very small and convenient.

We need to install it first:

# NPMnpm I-D progress-bar-webpack-plugin# YARNyarn add-D progress-bar-webpack-pluginconst ProgressBarPlugin = require ('progress-bar-webpack-plugin'); let progressPlugin = new ProgressBarPlugin ({width: 50, / / default 20, the number of progress grids represents the number of progress, if it is 20, then one grid is 5. Format: chalk.blue.bold ("build") + chalk.yellow ('[: bar]') + chalk.green.bold (': percent') +'(: elapsed seconds)', stream: process.stderr, / / default stderr, output stream complete: "#", / / default "=", completion characters clear: false, / / default true RenderThrottle: "", / / default 16, minimum time between updates (in milliseconds) callback () {/ / optional function called when the progress bar is completed console.log (chalk.red.bold ("done")}) plugins.push (progressPlugin)

What is important here is that format is the format of the progress bar:

Bar progress bar itself

Current tick count of current

Total total scale

Elapsed time in seconds

:% percent complete

Msg current progress message

Here we only need to write the corresponding string to build and display the information that needs to be displayed.

Finally, our output is as follows:

3.webpackbar

Webpackbar this is a personal feeling is a very beautiful and elegant progress bar, many famous frameworks have used him. It is also extremely easy to use and can support multiple concurrent builds. It is a very powerful progress plug-in.

We still have to install it first:

# NPMnpm I-D webpackbar# YARNyarn add-D webpackbarconst WebpackBar = require ('webpackbar'); let progressPlugin = new WebpackBar ({color: "# 85d", / / default green, progress bar color supports HEX basic: false, / / default true, enable a simple logger profile:false, / / default false, enable profiler. }) plugins.push (progressPlugin)

In fact, these are the most commonly used attribute configurations, which are clearly written in the comments.

Of course, there is also a property that reporters has not been written, you can register events in it, can also be understood as a variety of hook functions. As follows:

{/ / Register a custom journalist array start (context) {/ / call const {start, progress, message, details, request, hasErrors} = context} at the beginning of compilation, change (context) {/ / call} when the file changes in watch mode}, update (context) {/ / call} after each progress update Done (context) {/ / call when compilation is complete}, progress (context) {/ / build progress update}, allDone (context) {/ / call when compilation is complete}, beforeAllDone (context) {/ / call} before compilation is complete, afterAllDone (context) {/ / call} when compilation is complete,}

Of course, in most cases, we don't use these, and basically default is enough.

Finally, our output from the code just now is as follows:

Conclusion

Finally, let's make an objective evaluation of their use:

Progress plug-in beautiful expansibility extra installation size webpack.ProgressPlugin poor easy / generally do not need 16.9 KBprogress-bar-webpack-plugin good easy / excellent need 5.72kBwebpackbar excellent complex / excellent need 134KB thank you for reading! This is the end of the article on "how to display and beautify the packaging progress of webpack". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.