use webpackbar

lib/builder/webpack/base.mjs

@@ -5,13 +5,13 @@ import webpack from 'webpack'
 import _ from 'lodash'
 import VueLoader from 'vue-loader'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import WebpackBar from 'webpackbar'
 
 import { isUrl, urlJoin } from '../../common/utils'
 
 import customLoaders from './loaders'
 import StyleLoader from './utils/style-loader'
 import WarnFixPlugin from './plugins/warnfix'
-import ProgressPlugin from './plugins/progress'
 import StatsPlugin from './plugins/stats'
 
 export default class WebpackBaseConfig {
@@ -212,8 +212,7 @@ export default class WebpackBaseConfig {
         plugins.push(new webpack.ProgressPlugin({ profile: true }))
       } else {
         if (!(this.options.minimalCLI)) {
-          plugins.push(new ProgressPlugin({
-            spinner: this.spinner,
+          plugins.push(new WebpackBar({
             name: this.isServer ? 'server' : 'client',
             color: this.isServer ? 'orange' : 'green'
           }))

lib/builder/webpack/plugins/progress.mjs

@@ -1,94 +0,0 @@
-import webpack from 'webpack'
-import chalk from 'chalk'
-import _ from 'lodash'
-import logUpdate from 'log-update'
-
-const sharedState = {}
-
-const BAR_LENGTH = 25
-const IS_WINDOWS = /^win/.test(process.platform)
-const BLOCK_CHAR = IS_WINDOWS ? ' ' : '█'
-const BLOCK_CHAR2 = IS_WINDOWS ? '=' : '█'
-const ICON_CHAR = IS_WINDOWS ? ':' : '⠸'
-const BAR_BEFORE = IS_WINDOWS ? chalk.grey('[') : ''
-const BAR_AFTER = IS_WINDOWS ? chalk.grey(']') : ''
-
-export default class ProgressPlugin extends webpack.ProgressPlugin {
-  constructor(options) {
-    super(options)
-
-    this.handler = (percent, msg, ...details) => this.updateProgress(percent, msg, details)
-
-    this.handler = _.throttle(this.handler, 25, { leading: true, trailing: true })
-
-    this.options = options
-
-    if (!sharedState[options.name]) {
-      sharedState[options.name] = {
-        color: options.color
-      }
-    }
-  }
-
-  apply(compiler) {
-    super.apply(compiler)
-
-    compiler.hooks.done.tap('progress', () => logUpdate.clear())
-  }
-
-  get state() {
-    return sharedState[this.options.name]
-  }
-
-  updateProgress(percent, msg, details) {
-    const progress = Math.floor(percent * 100)
-
-    this.state.progress = progress
-    this.state.msg = msg
-    this.state.details = details
-    this.state.isRunning = (progress && progress !== 100) && (msg && msg.length)
-
-    // Process all states
-    let isRunning = false
-
-    const lines = []
-
-    _.sortBy(Object.keys(sharedState), s => s.name).reverse().forEach(name => {
-      const state = sharedState[name]
-
-      if (state.isRunning) {
-        isRunning = true
-      } else {
-        return
-      }
-
-      const _color = chalk.keyword(state.color)
-
-      const _icon = _color(ICON_CHAR)
-      const _name = _color(_.startCase(name))
-      const _bar = this._renderBar(state.progress, state.color)
-      const _msg = chalk.grey(_.startCase(state.msg))
-      const _progress = chalk.grey('(' + state.progress + '%)')
-
-      lines.push([_icon, _name, _bar, _msg, _progress].join(' '))
-    })
-
-    if (!isRunning) {
-      logUpdate.clear()
-    } else {
-      const title = chalk.bgBlue.black('BUILDING')
-
-      logUpdate('\n' + title + '\n\n' + lines.join('\n'))
-    }
-  }
-
-  _renderBar(progress, color) {
-    const w = progress * (BAR_LENGTH / 100)
-    const bg = chalk.white(BLOCK_CHAR)
-    const fg = chalk.keyword(color)(BLOCK_CHAR2)
-
-    return BAR_BEFORE +
-      _.range(BAR_LENGTH).map(i => i < w ? fg : bg).join('') +
-      BAR_AFTER
-  }
-}

package.json

@@ -118,7 +118,8 @@
     "webpack-bundle-analyzer": "^2.11.1",
     "webpack-dev-middleware": "^3.0.1",
     "webpack-hot-middleware": "^2.21.2",
-    "webpack-node-externals": "^1.6.0"
+    "webpack-node-externals": "^1.6.0",
+    "webpackbar": "^1.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",

yarn.lock

@@ -7537,6 +7537,15 @@ webpack@^4.2.0:
     watchpack "^1.5.0"
     webpack-sources "^1.0.1"
 
+webpackbar@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/webpackbar/-/webpackbar-1.0.0.tgz#9dd1dcc8c1744233156798d6c882a7ed1d02cc4d"
+  dependencies:
+    chalk "^2.3.2"
+    figures "^2.0.0"
+    lodash "^4.17.5"
+    log-update "^2.3.0"
+
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"