webpack打包进度展示以及美化教程

# NPM
npm i -D chalk
# YARN
yarn add -D chalk

// 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
}

const { ProgressPlugin } = require("webpack")
let progressPlugin = new ProgressPlugin({
  activeModules: true,         // 默认false，显示活动模块计数和一个活动模块正在进行消息。
  entries: true,  			   // 默认true，显示正在进行的条目计数消息。
  modules: false,              // 默认true，显示正在进行的模块计数消息。
  modulesCount: 5000,          // 默认5000，开始时的最小模块数。PS:modules启用属性时生效。
  profile: false,         	   // 默认false，告诉ProgressPlugin为进度步骤收集配置文件数据。
  dependencies: false,         // 默认true，显示正在进行的依赖项计数消息。
  dependenciesCount: 10000,    // 默认10000，开始时的最小依赖项计数。PS:dependencies启用属性时生效。
})
plugins.push(progressPlugin)

new ProgressPlugin({
    // ...
    handler(percentage, message, ...args) {   // 钩子函数
            console.log(chalk.yellow("进度：") + chalk.green.bold(~~(percentage * 100) + "%") + " " + chalk.yellow.bold("操作：") + chalk.blue.bold(message))
    }
})

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

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
let progressPlugin = new ProgressBarPlugin({
  width: 50, 					 // 默认20，进度格子数量即每个代表进度数，如果是20，那么一格就是5。
  format: chalk.blue.bold("build") + chalk.yellow('[:bar] ') + chalk.green.bold(':percent') + ' (:elapsed秒)',
  stream: process.stderr,        // 默认stderr，输出流
  complete: "#",                 // 默认“=”，完成字符
  clear: false,                  // 默认true，完成时清除栏的选项
  renderThrottle: "",            // 默认16，更新之间的最短时间（以毫秒为单位）
  callback() {                   // 进度条完成时调用的可选函数
    console.log(chalk.red.bold("完成"))
  }
})
plugins.push(progressPlugin)

# NPM
npm i -D webpackbar
# YARN
yarn add -D webpackbar

const WebpackBar = require('webpackbar');
let progressPlugin = new WebpackBar({
  color: "#85d",  // 默认green，进度条颜色支持HEX
  basic: false,   // 默认true，启用一个简单的日志报告器
  profile:false,  // 默认false，启用探查器。
})
plugins.push(progressPlugin)

{   // 注册一个自定义记者数组
    start(context) {
      // 在（重新）编译开始时调用
      const { start, progress, message, details, request, hasErrors } = context
    },
    change(context) {
      // 在 watch 模式下文件更改时调用
    },
    update(context) {
      // 在每次进度更新后调用
    },
    done(context) {
      // 编译完成时调用
    },
    progress(context) {
      // 构建进度更新时调用
    },
    allDone(context) {
      // 当编译完成时调用
    },
    beforeAllDone(context) {
      // 当编译完成前调用
    },
    afterAllDone(context) {
      // 当编译完成后调用
    },
}