feat(cli): improve dev server log

packages/vant-cli/package.json

@@ -63,6 +63,7 @@
     "@vue/babel-preset-jsx": "^1.1.2",
     "@vue/component-compiler-utils": "^3.1.1",
     "@vue/test-utils": "1.0.0-beta.29",
+    "address": "^1.1.2",
     "autoprefixer": "^9.7.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,3 +1,5 @@
+import chalk from 'chalk';
+import address from 'address';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { get } from 'lodash';
@@ -5,12 +7,33 @@ import { getPort } from 'portfinder';
 import { siteDevConfig } from '../config/webpack.site.dev';
 import { sitePrdConfig } from '../config/webpack.site.prd';
 
-function watch() {
+function logServerInfo(port: number) {
+  const local = `http://localhost:${port}/`;
+  const network = `http://${address.ip()}:${port}/`;
+
+  console.log('\n  Site running at:\n');
+  console.log(`  ${chalk.bold('Local')}:    ${chalk.cyan.bold(local)} `);
+  console.log(`  ${chalk.bold('Network')}:  ${chalk.cyan.bold(network)}`);
+}
+
+function runDevServer(port: number) {
   const server = new WebpackDevServer(
     webpack(siteDevConfig),
     siteDevConfig.devServer
   );
 
+  // this is a hack to disable wds status log
+  (server as any).showStatus = function() {};
+
+  const host = get(siteDevConfig.devServer, 'host', 'localhost');
+  server.listen(port, host, (err?: Error) => {
+    if (err) {
+      console.log(err);
+    }
+  });
+}
+
+function watch() {
   getPort(
     {
       port: siteDevConfig.devServer!.port
@@ -21,12 +44,8 @@ function watch() {
         return;
       }
 
-      const host = get(siteDevConfig.devServer, 'host', 'localhost');
+      logServerInfo(port);
-      server.listen(port, host, (err?: Error) => {
+      runDevServer(port);
-        if (err) {
-          console.log(err);
-        }
-      });
     }
   );
 }

packages/vant-cli/yarn.lock

@@ -2016,6 +2016,11 @@ add-stream@^1.0.0:
   resolved "https://registry.npm.taobao.org/add-stream/download/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
   integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=
 
+address@^1.1.2:
+  version "1.1.2"
+  resolved "http://registry.npm.qima-inc.com/address/download/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+  integrity sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=
+
 agent-base@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npm.taobao.org/agent-base/download/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"