Optimize the compilation process.

Author: jaywcjlove

package.json

@@ -52,7 +52,7 @@
     "eslint-plugin-react": "^7.7.0",
     "file-loader": "^1.1.11",
     "fs-extra": "^5.0.0",
-    "gh-pages": "^1.1.0",
+    "gh-pages": "^1.2.0",
     "highlight.js": "^9.12.0",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.0.2",
@@ -62,6 +62,7 @@
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.9",
+    "progress-bar-webpack-plugin": "^1.11.0",
     "raw-content-replace-loader": "^1.0.1",
     "raw-extend-loader": "^1.0.5",
     "raw-tree-replace-loader": "^1.1.0",
@@ -78,8 +79,8 @@
     "style-loader": "^0.19.1",
     "upath": "^1.0.2",
     "url-replace-loader": "^1.0.0",
-    "webpack": "^4.8.1",
-    "webpack-cli": "^2.1.3",
+    "webpack": "^4.10.2",
+    "webpack-cli": "^3.0.1",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-dev-server": "^3.1.4",
     "webpack-hot-dev-clients": "^1.0.4",

src/build.js

@@ -1,16 +1,11 @@
 const webpack = require('webpack');
-const load = require('loading-cli');
 const conf = require('./conf/webpack.config.prod');
 require('colors-cli/toxic');
 
 module.exports = function serve(program) {
-  const loading = load('Compiler is running...'.green).start();
-  loading.color = 'green';
-
   const webpackConf = conf(program);
   const compiler = webpack(webpackConf);
   compiler.run((err, stats) => {
-    loading.stop();
     // 官方输出参数
     // https://webpack.js.org/configuration/stats/
     // https://github.com/webpack/webpack/issues/538#issuecomment-59586196

src/conf/webpack.config.dev.js

@@ -27,7 +27,8 @@ module.exports = function (cmd) {
       loaders.push({
         // Process JS with Babel.
         test: /\.(js|jsx|mjs)$/,
-        exclude: paths.getExcludeFoldersRegExp.concat(/\.(cache)/),
+        // exclude: paths.getExcludeFoldersRegExp.concat(/\.(cache)/),
+        exclude: /node_modules/,
         use: [
           {
             loader: require.resolve('string-replace-loader'),
@@ -106,7 +107,7 @@ module.exports = function (cmd) {
   });
 
   config.plugins = config.plugins.concat([
-    // new webpack.HotModuleReplacementPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       inject: true,
       favicon: paths.defaultFaviconPath,

src/conf/webpack.config.js

@@ -1,4 +1,5 @@
 const PATH = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const paths = require('./path');
 
 module.exports = {
@@ -78,7 +79,12 @@ module.exports = {
       },
     ],
   },
-  plugins: [],
+  plugins: [
+    new ProgressBarPlugin({
+      format: ` build [:bar] ${':percent'.green} (:elapsed seconds)`,
+      clear: false,
+    }),
+  ],
   node: {
     dgram: 'empty',
     fs: 'empty',

src/server.js

@@ -2,7 +2,6 @@ const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const opn = require('opn');
 const detect = require('detect-port');
-const load = require('loading-cli');
 const conf = require('./conf/webpack.config.dev');
 const createDevServerConfig = require('./conf/webpack.config.server');
 require('colors-cli/toxic');
@@ -12,13 +11,10 @@ module.exports = function server(cmd) {
   let DEFAULT_PORT = cmd.port;
   const webpackConf = conf(cmd);
   const compiler = webpack(webpackConf);
-  const loading = load('Compiler is running...'.green).start();
-  loading.color = 'green';
 
   // https://webpack.js.org/api/compiler-hooks/#aftercompile
   // 编译完成之后打印日志
   compiler.hooks.done.tap('done', () => {
-    loading.stop();
     // eslint-disable-next-line
     console.log(`\nDev Server Listening at ${`http://${HOST}:${DEFAULT_PORT}`.green}`);
   });

src/web/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'babel-polyfill';
 import RouterRoot from './Router';
 
 ReactDOM.render(