diff --git a/packages/react-dev-utils/BuildProgressPlugin.js b/packages/react-dev-utils/BuildProgressPlugin.js new file mode 100644 index 00000000000..04190102fc3 --- /dev/null +++ b/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; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index f3062c56d19..d76fdad1e04 100644 --- a/packages/react-dev-utils/package.json +++ b/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" } } diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 058db0d7921..f1d84028bc6 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/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.