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

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

* fix: deps

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';