一般来说，中型项目的首次编译时间为 5-20s，没个进度条等得多着急，通过 progress-bar-webpack-plugin 插件查看编译进度，方便我们掌握编译情况。


    安装： 

    1. npm install --save-dev progress-bar-webpack-plugin

    webpack.common.js 配置方式 ：

    1. const chalk = require('chalk')
    2. const ProgressBarPlugin = require('progress-bar-webpack-plugin')
    3. module.exports = {
    4.   plugins: [
    5.     // 打包的进度条
    6.     new ProgressBarPlugin({
    7.       // format 配置百分比和加粗绿色高亮的样式
    8.       format: '  :msg [:bar] :percent (:elapsed s)',
    9.       // building [=========           ] 46% (1.0 s)
    10.     }),
    11.   ],
    12. }

    贴心的为进度百分比添加了加粗和绿色高亮态样式。

    包含内容、进度条、进度百分比、消耗时间，进度条效果如下：
    image.png