Add BuildProgressPlugin

packages/react-dev-utils/BuildProgressPlugin.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const path = require('path');
+
+const ProgressPlugin = require('webpack').ProgressPlugin;
+const ProgressBar = require('progress');
+const chalk = require('chalk');
+
+function BuildProgressPlugin() {
+  if (process.env.CI) {
+    return new ProgressPlugin(function handler(percentage, msg) {
+      // noop
+    })
+  }
+  const bar = new ProgressBar(`  [:bar] ${ chalk.bold(':percent') } ${ chalk.yellow(':etas') } (${ chalk.dim(':msg') })`, {
+    total: 100,
+    complete: '=',
+    incomplete: ' ',
+    width: 25
+  });
+  return new ProgressPlugin(function handler(percent, msg) {
+    const done = percent === 1;
+    if (done) {
+      msg = 'completed';
+    }
+    bar.update(percent, { msg });
+    if (done) {
+      bar.terminate();
+    }
+  });
+}
+
+module.exports = BuildProgressPlugin;

packages/react-dev-utils/package.json

@@ -11,6 +11,7 @@
     "node": ">=4"
   },
   "files": [
+    "BuildProgressPlugin.js",
     "clearConsole.js",
     "checkRequiredFiles.js",
     "formatWebpackMessages.js",
@@ -28,7 +29,11 @@
     "escape-string-regexp": "1.0.5",
     "html-entities": "1.2.0",
     "opn": "4.0.2",
+    "progress": "1.1.8",
     "sockjs-client": "1.0.1",
     "strip-ansi": "3.0.1"
+  },
+  "devDependencies": {
+    "webpack": "^1.14.0"
   }
 }

packages/react-scripts/config/webpack.config.prod.js

@@ -18,6 +18,7 @@ var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 var url = require('url');
 var paths = require('./paths');
 var getClientEnvironment = require('./env');
+var BuildProgressPlugin = require('react-dev-utils/BuildProgressPlugin');
 
 // @remove-on-eject-begin
 // `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
@@ -268,7 +269,9 @@ module.exports = {
     // having to parse `index.html`.
     new ManifestPlugin({
       fileName: 'asset-manifest.json'
-    })
+    }),
+    // Displays a progress bar during the build
+    new BuildProgressPlugin()
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.