Open in browser using local address.

package.json

@@ -60,12 +60,12 @@
     "less": "^3.0.2",
     "less-loader": "^4.1.0",
     "loading-cli": "^1.0.6",
+    "local-ip-url": "^1.0.1",
     "mini-css-extract-plugin": "^0.4.0",
     "open-browsers": "^1.1.1",
     "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",
@@ -86,6 +86,7 @@
     "webpack-dev-middleware": "^3.1.3",
     "webpack-dev-server": "^3.1.4",
     "webpack-hot-dev-clients": "^1.0.4",
+    "webpackbar": "^2.6.1",
     "write": "^1.0.3"
   },
   "devDependencies": {

src/conf/webpack.config.js

@@ -1,7 +1,7 @@
 const PATH = require('path');
 const webpack = require('webpack');
+const WebpackBar = require('webpackbar');
 const UPATH = require('upath');
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const paths = require('./path');
 const pkg = require('../../package.json');
 
@@ -88,10 +88,7 @@ module.exports = {
     ],
   },
   plugins: [
-    new ProgressBarPlugin({
-      format: ` build [:bar] ${':percent'.green} (:elapsed seconds)`,
-      clear: false,
-    }),
+    new WebpackBar({ name: pkg.name }),
     new webpack.DefinePlugin({
       VERSION: JSON.stringify(pkg.version),
     }),

src/server.js

@@ -2,31 +2,44 @@ const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const openBrowsers = require('open-browsers');
 const detect = require('detect-port');
+const prepareUrls = require('local-ip-url/prepareUrls');
 const conf = require('./conf/webpack.config.dev');
 const createDevServerConfig = require('./conf/webpack.config.server');
 require('colors-cli/toxic');
 
+function clearConsole() {
+  process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H');
+}
+
 module.exports = function server(cmd) {
   const HOST = cmd.host;
   let DEFAULT_PORT = cmd.port;
   const webpackConf = conf(cmd);
   const compiler = webpack(webpackConf);
 
-  // https://webpack.js.org/api/compiler-hooks/#aftercompile
-  // 编译完成之后打印日志
-  compiler.hooks.done.tap('done', () => {
-    // eslint-disable-next-line
-    console.log(`\nDev Server Listening at ${`http://${HOST}:${DEFAULT_PORT}`.green}`);
-  });
 
   detect(DEFAULT_PORT).then((_port) => {
     if (DEFAULT_PORT !== _port) DEFAULT_PORT = _port;
+
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const urls = prepareUrls({ protocol, host: HOST, port: DEFAULT_PORT });
+    // https://webpack.js.org/api/compiler-hooks/#aftercompile
+    // 编译完成之后打印日志
+    compiler.hooks.done.tap('done', () => {
+      /* eslint-disable */
+      console.log(`Dev Server Listening at Local: ${urls.localUrl.green}`);
+      console.log(`              On Your Network: ${urls.lanUrl.green}`);
+      console.log(`\nTo create a production build, use ${'npm run build'.blue_bt}.`);
+      /* eslint-enable */
+    });
+
     new WebpackDevServer(compiler, createDevServerConfig(cmd, webpackConf)).listen(DEFAULT_PORT, HOST, (err) => {
       if (err) {
         return console.log(err); // eslint-disable-line
       }
+      clearConsole();
       // open browser
-      openBrowsers(`http://${HOST}:${DEFAULT_PORT}`);
+      openBrowsers(urls.localUrl);
     });
   }).catch((err) => {
     console.log(err); // eslint-disable-line