improve progressbar experience

lib/builder/webpack/client.config.js

@@ -5,10 +5,12 @@ const HTMLPlugin = require('html-webpack-plugin')
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+const ProgressPlugin = require('webpack/lib/ProgressPlugin')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const { resolve } = require('path')
 const { existsSync } = require('fs')
 const Debug = require('debug')
+const Chalk = require('chalk')
 const base = require('./base.config.js')
 
 const debug = Debug('nuxt:build')
@@ -90,18 +92,26 @@ module.exports = function webpackClientConfig() {
     }))
   )
 
+  // Add friendly error plugin
+  config.plugins.push(new FriendlyErrorsWebpackPlugin())
+
   // Build progress bar
-  config.plugins.push(
-    new ProgressBarPlugin()
-  )
+  if (this.options.build.profile) {
+    config.plugins.push(new ProgressPlugin({
+      profile: true
+    }))
+  } else {
+    config.plugins.push(new ProgressBarPlugin({
+      complete: Chalk.green('█'),
+      incomplete: Chalk.white('█'),
+      format: '  :bar ' + Chalk.green.bold(':percent') + ' :msg'
+    }))
+  }
 
   // --------------------------------------
   // Dev specific config
   // --------------------------------------
   if (this.options.dev) {
-    // Add friendly error plugin
-    config.plugins.push(new FriendlyErrorsWebpackPlugin())
-
     // https://webpack.js.org/plugins/named-modules-plugin
     config.plugins.push(new webpack.NamedModulesPlugin())
 

lib/common/options.js

@@ -207,6 +207,7 @@ Options.defaults = {
   nuxtAppDir: resolve(__dirname, '../app'),
   build: {
     analyze: false,
+    profile: process.argv.includes('--profile'),
     dll: false,
     scopeHoisting: false,
     extractCSS: false,