Talk about webpack packaging progress display and beautification

This is the fourth day of my participation in the First Wen Challenge 2022.First challenge in 2022

introduce

When we were in their own building project, in waiting for packaging the build is very boring, especially special big don’t know, how long is the most horrible, might as well get a progress bar plug-in at this moment, let us no longer anxious, in this issue we will recommend three progress bar plug-in for you to choose, find out or that a transformation like to use their own projects.

To prepare

If we want to beautify the progress bar, we should consider changing the color. At present, chalk is the best color for terminal strings on the market. It supports many colors and is very clean and simple. We use version 4.1.2 here.

# NPM
npm i -D chalk
# YARN
yarn add -D chalk
Copy the code

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

// webpack.config.js
const 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
}
Copy the code

That’s the infrastructure for now, and we’ll push the plugins into plugins later, so we’ll get to the point.

1.webpack.ProgressPlugin

Webpack.progressplugin is a built-in plugin for WebPack that outputs the current progress and summary in a packaged build. Although it may be limited in scope and aesthetics, you don’t need to download other third-party plug-ins.

const { ProgressPlugin } = require("webpack")
let progressPlugin = new ProgressPlugin({
  activeModules: true.// Default false, displays active module count and an active module in progress message.
  entries: true.// Defaults to true to display ongoing entry count messages.
  modules: false.// Defaults to true to display ongoing module count messages.
  modulesCount: 5000.// Defaults to 5000, the minimum number of modules to start with. PS:modules This parameter takes effect when the attribute is enabled.
  profile: false.// The default is false, telling ProgressPlugin to collect configuration file data for progress steps.
  dependencies: false.// Defaults to true to display ongoing dependency counting messages.
  dependenciesCount: 10000.// Default is 10000, the minimum dependency count to start with. PS:dependencies Takes effect when the attribute is enabled.
})
plugins.push(progressPlugin)
Copy the code

The main parameters are stated in the notes and are not repeated.

Finally, our output is as follows:

Note that there is one parameter left out of webpack.Progressplugin: Handler. This is the hook function that returns build information.

new ProgressPlugin({
    // ...
    handler(percentage, message, ... args) {   // The hook function
            console.log(chalk.yellow("Progress:") + chalk.green.bold(~~(percentage * 100) + "%") + "" + chalk.yellow.bold("Operation:") + chalk.blue.bold(message))
    }
})
Copy the code

The following information is returned:

• Percentag: A number between 0 and 1 that represents the percentage of compilation completed.

• Message: A short description of the currently executing hook.

• . Args: Zero or more additional strings describing the current progress.

The output of the above hook function is as follows:

2.progress-bar-webpack-plugin

Progress-bar-webpack-plugin is not a strange plugin if you are familiar with Node-Progress, because its options are almost the same as Node-Progress, and it is very easy to modify and expand. In general, it is flexible and easy to use, very small and convenient.

Let’s install it first:

# NPM
npm i -D progress-bar-webpack-plugin
# YARN
yarn add -D progress-bar-webpack-plugin
Copy the code

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
let progressPlugin = new ProgressBarPlugin({
  width: 50.// The default is 20, the number of progress cells is the number of progress, if 20, then one cell 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 "=", complete character
  clear: false.// Defaults to true and clears the bar's options when done
  renderThrottle: "".// Default 16, minimum time between updates (in milliseconds)
  callback() {                   // Optional function to call when the progress bar completes
    console.log(chalk.red.bold("Complete"))
  }
})
plugins.push(progressPlugin)
Copy the code

Format is the format of the progress bar:

• :bar Indicates the progress bar

• :current Indicates the current scale

• : total total scale

• Elapsed time in seconds

• : Percent Indicates the completion percentage

• MSG Indicates the current progress message

Here we can construct and display the information we need to display by writing the corresponding string.

Finally, our output is as follows:

3.webpackbar

Webpackbar this is a personal feeling is a very beautiful and elegant progress bar, many famous frames have used him. It’s also extremely easy to use and supports multiple concurrent builds, making it a very powerful progress plugin.

We still need to install:

# NPM
npm i -D webpackbar
# YARN
yarn add -D webpackbar
Copy the code

const WebpackBar = require('webpackbar');
let progressPlugin = new WebpackBar({
  color: "#85d".// The progress bar supports HEX by default green
  basic: false.// Defaults to true to enable a simple log reporter
  profile:false.// By default, profiler is enabled.
})
plugins.push(progressPlugin)
Copy the code

These are the most commonly used property configurations, and the comments make that clear.

Of course, there’s a property in there that’s not written in yet, so you can register events in there, or you can interpret it as various hook functions. As follows:

{   // Register a custom reporter array
    start(context) {
      // called when (re) compilation starts
      const { start, progress, message, details, request, hasErrors } = context
    },
    change(context) {
      // Called when the file changes in Watch mode
    },
    update(context) {
      // called after each progress update
    },
    done(context) {
      // called when compilation is complete
    },
    progress(context) {
      // Called when the build progress updates
    },
    allDone(context) {
      // Called when compilation is complete
    },
    beforeAllDone(context) {
      // called before compilation is complete
    },
    afterAllDone(context) {
      // called when compilation is complete}},Copy the code

Of course, most of the time, we don’t use these, and basically the default is enough.

Finally, our output from the previous code looks like this:

conclusion

Finally, make an objective evaluation of their use:

How about, I prefer WebpackBar anyway, after all, this is the age of face. Of course, the specific good or bad is also need you to experience, their respective official websites have corresponding existing problems and some different expansion methods waiting for you to discover, what are waiting for? Blunt duck ~