为webpack添加编译进度条

config/web/webpack.config.js

@@ -25,6 +25,7 @@ const InjectScriptWebpackPlugin = require('./../../plugins/InjectScriptWebpackPl
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
+const WebpackBar = require('webpackbar');
 
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
@@ -1007,6 +1008,11 @@ module.exports = function (webpackEnv) {
                     statsOptions: null,
                     logLevel: 'info',
                 }),
+                new WebpackBar({
+                    color: "#85d",  // 默认green，进度条颜色支持HEX
+                    basic: false,   // 默认true，启用一个简单的日志报告器
+                    profile:false,  // 默认false，启用探查器。
+                })
         ].filter(Boolean),
         // Turn off performance processing because we utilize
         // our own hints via the FileSizeReporter

package.json

@@ -40,7 +40,8 @@
         "events": "^3.3.0",
         "fork-ts-checker-webpack-plugin": "^8.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "^5.2.2"
+        "typescript": "^5.2.2",
+        "webpackbar": "^7.0.0"
     },
     "dependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",