参考

progressBarPlugin
chalk
webpack-bundle-analyzer

配置功能

查看进程完成进度(progressBarPlugin+chalk)，树图的方式展示打包后的资源(webpack-bundle-analyzer)；

1.安装progress-bar-webpack-plugin和chalk

npm i  progress-bar-webpack-plugin chalk -D

2.配置webpack.config.js

const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 以树图的方式展示打包后的文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: 'production',
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {loader: 'babel-loader'}
        ]
      }
    ]
  },
  plugins: [
    new ProgressBarPlugin({
      format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
      clear: false
    }),
    new BundleAnalyzerPlugin()
  ]
}

在控制台展示编译进程

树图展示：