diff --git a/packages/react-dev-utils/BuildProgressPlugin.js b/packages/react-dev-utils/BuildProgressPlugin.js new file mode 100644 index 00000000000..b0d5c984086 --- /dev/null +++ b/packages/react-dev-utils/BuildProgressPlugin.js @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +const path = require('path'); + +let ProgressPlugin; +if (__dirname.indexOf(path.join('packages', 'react-dev-utils')) !== -1) { + ProgressPlugin = require('../react-scripts/node_modules/webpack').ProgressPlugin; +} else { + ProgressPlugin = require('webpack').ProgressPlugin; +} +const ProgressBar = require('progress'); +const chalk = require('chalk'); + +function BuildProgressPlugin() { + const bar = new ProgressBar(` [:bar] ${chalk.bold(':percent')} ${chalk.yellow(':etas')} (${chalk.dim(':msg')})`, { + total: 100, + complete: '=', + incomplete: ' ', + width: 25 + }) + return new ProgressPlugin(function(percent, msg) { + if (percent === 1) msg = 'completed'; + bar.update(percent, { msg }); + if (percent === 1) bar.terminate(); + }); +} + +module.exports = BuildProgressPlugin; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 14c860999ae..b754dcdf207 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -27,6 +27,7 @@ "escape-string-regexp": "1.0.5", "html-entities": "1.2.0", "opn": "4.0.2", + "progress": "1.1.8", "sockjs-client": "1.0.3", "strip-ansi": "3.0.1" }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index e0141b851b4..107b2536c78 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -19,6 +19,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'); function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); @@ -257,7 +258,8 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json' - }) + }), + 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.