use pretty webpack bar

package.json

@@ -175,6 +175,7 @@
     "typescript": "~3.0.1",
     "unified": "^7.0.0",
     "values.js": "^1.0.3",
+    "webpackbar": "^2.6.1",
     "xhr-mock": "^2.4.0",
     "xhr2": "^0.1.3"
   },

site/bisheng.config.js

@@ -2,6 +2,8 @@ const path = require('path');
 const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
 const OfflinePlugin = require('@yesmeck/offline-plugin');
 const replaceLib = require('antd-tools/lib/replaceLib');
+const webpack = require('webpack');
+const WebpackBar = require('webpackbar');
 const getExternalResources = require('./getExternalResources');
 
 const isDev = process.env.NODE_ENV === 'development';
@@ -22,6 +24,23 @@ function alertBabelConfig(rules) {
   });
 }
 
+function usePrettyWebpackBar(config) {
+  // remove old progress plugin.
+  config.plugins = config.plugins
+    .filter((plugin) => {
+      return !(plugin instanceof webpack.ProgressPlugin)
+        && !(plugin instanceof WebpackBar);
+    });
+
+  // use brand new progress bar.
+  config.plugins.push(
+    new WebpackBar({
+      name: '📦  Site',
+      minimal: false,
+    })
+  );
+}
+
 module.exports = {
   port: 8001,
   source: {
@@ -109,6 +128,7 @@ module.exports = {
     }
 
     alertBabelConfig(config.module.rules);
+    usePrettyWebpackBar(config);
 
     config.plugins.push(
       new CSSSplitWebpackPlugin({ size: 4000 }),

webpack.config.js

@@ -1,6 +1,7 @@
 // This config is for building dist files
 const webpack = require('webpack');
 const getWebpackConfig = require('antd-tools/lib/getWebpackConfig');
+const WebpackBar = require('webpackbar');
 
 // noParse still leave `require('./locale' + name)` in dist files
 // ignore is better
@@ -28,12 +29,30 @@ function externalMoment(config) {
   };
 }
 
+function usePrettyWebpackBar(config) {
+  // remove old progress plugin.
+  config.plugins = config.plugins
+    .filter((plugin) => {
+      return !(plugin instanceof webpack.ProgressPlugin)
+        && !(plugin instanceof WebpackBar);
+    });
+
+  // use brand new progress bar.
+  config.plugins.push(
+    new WebpackBar({
+      name: '📦  Webpack',
+      minimal: false,
+    })
+  );
+}
+
 const webpackConfig = getWebpackConfig(false);
 if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach((config) => {
     ignoreMomentLocale(config);
     externalMoment(config);
     addLocales(config);
+    usePrettyWebpackBar(config);
   });
 }