# 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) {
      // 當編譯完成后調用
    },
}