feat: 开发环境增加编译loading动画

package.json

@@ -38,6 +38,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "chalk": "^2.0.1",
+    "cli-spinner": "^0.2.6",
     "clean-webpack-plugin": "^0.1.16",
     "commander": "^2.11.0",
     "copy-webpack-plugin": "^4.0.1",

src/bin/packing-serve-dist.js

@@ -42,6 +42,6 @@ app.listen(port, (err) => {
   if (err) {
     console.error(err);
   } else {
-    console.info('==> 🚧  Webpack development server listening on port %s', port);
+    console.info('==> 🚧  Listening on port %s', port);
   }
 });

src/bin/packing-serve.js

@@ -9,6 +9,7 @@ import Express from 'express';
 import urlrewrite from 'packing-urlrewrite';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
+import { Spinner } from 'cli-spinner';
 /* eslint-enable */
 import { createHash } from 'crypto';
 import mkdirp from 'mkdirp';
@@ -66,11 +67,20 @@ function httpd() {
   const assetsPath = join(cwd, assets);
   const dllPath = join(cwd, dll);
 
+  const spinner = new Spinner('webpack: Compiling.. %s');
+  spinner.setSpinnerString('|/-\\');
+  spinner.start();
+
+  const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, serverOptions);
+  webpackDevMiddlewareInstance.waitUntilValid(() => {
+    spinner.stop();
+  });
+
   const app = new Express();
   app.use(Express.static(assetsPath));
   app.use(Express.static(dllPath));
   app.use(urlrewrite(rewriteRules));
-  app.use(webpackDevMiddleware(compiler, serverOptions));
+  app.use(webpackDevMiddlewareInstance);
   app.use(webpackHotMiddleware(compiler));
   app.use(template({
     templates: templatesPages,
@@ -83,7 +93,6 @@ function httpd() {
       console.error(err);
     } else {
       console.info('==> 🚧  Listening on port %s\n', port);
-      console.log('webpack: Compiling...');
     }
   });
 }

src/config/webpack.serve.babel.js

@@ -7,6 +7,7 @@
 import path from 'path';
 import { isString, isArray, isObject, isFunction } from 'util';
 import webpack from 'webpack';
+// eslint-disable-next-line
 import OpenBrowserPlugin from 'open-browser-webpack-plugin';
 import ProfilesPlugin from 'packing-profile-webpack-plugin';
 import pRequire from '../util/require';