feat(cli): bump webpack-dev-server v4 (#9292)

* feat(cli): bump webpack-dev-server v4

* fix: deps

packages/vant-cli/package.json

@@ -42,7 +42,6 @@
     "@babel/preset-typescript": "^7.14.5",
     "@docsearch/css": "3.0.0-alpha.33",
     "@docsearch/js": "3.0.0-alpha.33",
-    "@types/webpack-dev-server": "^3.11.4",
     "@vant/eslint-config": "^3.3.2",
     "@vant/markdown-loader": "^4.1.0",
     "@vant/markdown-vetur": "^2.2.0",
@@ -50,7 +49,6 @@
     "@vant/touch-emulator": "^1.3.0",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/test-utils": "2.0.0-rc.6",
-    "address": "^1.1.2",
     "autoprefixer": "^9.0.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
@@ -92,7 +90,7 @@
     "vue-loader": "^16.1.2",
     "vue-router": "^4.0.0",
     "webpack": "^5.38.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^5.8.0",
     "webpackbar": "^5.0.0-3"
   },

packages/vant-cli/src/common/types.ts

@@ -1,6 +1,5 @@
 import type Webpack from 'webpack';
-import type WebpackDevServer from 'webpack-dev-server';
 
 export type WebpackConfig = Webpack.Configuration & {
-  devServer?: WebpackDevServer.Configuration;
+  devServer?: any;
 };

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

@@ -1,56 +1,33 @@
-import chalk from 'chalk';
-import address from 'address';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { get } from 'lodash';
-import { getPort } from 'portfinder';
-import { GREEN } from '../common/constant';
+import { getPortPromise } from 'portfinder';
 import { getSiteDevConfig } from '../config/webpack.site.dev';
 import { getSitePrdConfig } from '../config/webpack.site.prd';
 
-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.hex(GREEN)(local)} `);
-  console.log(`  ${chalk.bold('Network')}:  ${chalk.hex(GREEN)(network)}`);
-}
-
-function runDevServer(
+async function runDevServer(
   port: number,
   config: ReturnType<typeof getSiteDevConfig>
 ) {
-  const server = new WebpackDevServer(webpack(config), config.devServer);
-
-  // this is a hack to disable wds status log
-  (server as any).showStatus = function () {};
-
   const host = get(config.devServer, 'host', 'localhost');
-  server.listen(port, host, (err?: Error) => {
-    if (err) {
-      console.log(err);
-    }
-  });
+  const server = new WebpackDevServer(
+    {
+      ...config.devServer,
+      port,
+      host,
+    },
+    webpack(config)
+  );
+
+  await server.start();
 }
 
-function watch() {
+async function watch() {
   const config = getSiteDevConfig();
-
-  getPort(
-    {
-      port: config.devServer!.port,
-    },
-    (err, port) => {
-      if (err) {
-        console.log(err);
-        return;
-      }
-
-      logServerInfo(port);
-      runDevServer(port, config);
-    }
-  );
+  const port = await getPortPromise({
+    port: config.devServer.port,
+  });
+  await runDevServer(port, config);
 }
 
 function build() {
@@ -71,6 +48,6 @@ export async function compileSite(production = false) {
   if (production) {
     await build();
   } else {
-    watch();
+    await watch();
   }
 }

packages/vant-cli/src/config/webpack.site.dev.ts

@@ -49,9 +49,11 @@ export function getSiteDevBaseConfig(): WebpackConfig {
     devServer: {
       port: 8080,
       host: '0.0.0.0',
-      stats: 'errors-only',
-      publicPath: '/',
-      disableHostCheck: true,
+      allowedHosts: 'all',
+      devMiddleware: {
+        stats: 'errors-only',
+        publicPath: '/',
+      },
     },
     resolve: {
       alias: {

packages/vant-cli/src/module.d.ts

@@ -6,6 +6,7 @@ declare module 'hash-sum';
 declare module 'clean-css';
 declare module 'webpackbar';
 declare module 'release-it';
+declare module 'webpack-dev-server';
 declare module 'html-webpack-plugin';
 declare module 'conventional-changelog';
 declare module '@vant/markdown-vetur';