feat!: (WIP) upgrade to webpack-dev-server v4

vuejs · haoqunjiang · Sep 15, 2021 · Sep 3, 2021 · Sep 3, 2021 · Sep 3, 2021
commit 87cbb4096f0adb25cb378b777473f1c7f221f0d4
diff --git a/docs/migrations/migrate-from-v4.md b/docs/migrations/migrate-from-v4.md
@@ -60,7 +60,18 @@ Besides the internal changes that are only noticeable for custom configurations,
 1. Named exports from JSON modules are no longer supported. Instead of `import { version } from './package.json'; console.log(version);` use `import package from './package.json'; console.log(package.version);`
 2. Webpack 5 does no longer include polyfills for Node.js modules by default. You shall see an informative error message if your code relies on any of these modules. A detailed list of previously polyfilled modules is also available [here](https://github.com/webpack/webpack/pull/8460/commits/a68426e9255edcce7822480b78416837617ab065).
 
-#### Changes to the `build` command and modern mode
+#### Dev Server
+
+`webpack-dev-server` has been updated from v3 to v4. So there are breaking changes with regard to the `devServer` option in `vue.config.js`. Please check out the [`webpack-dev-server` migration guide](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md) for more details.
+
+Most notably:
+
+* The `disableHostCheck` option was removed in favor `allowedHosts: 'all'`;
+* FIXME: `watch` option
+* `public`, `sockHost`, `sockPath`, and `sockPort` options were removed in favor `client.webSocketURL` option.
+* FIXME: IE9 compatibility note
+
+#### The `build` Command and Modern Mode
 
 Starting with v5.0.0-beta.0, running `vue-cli-service build` will automatically generate different bundles based on your browserslist configurations.
 The `--modern` flag is no longer needed because it is turned on by default.

diff --git a/packages/@vue/cli-service/lib/commands/serve.js b/packages/@vue/cli-service/lib/commands/serve.js
@@ -25,7 +25,6 @@ module.exports = (api, options) => {
       '--mode': `specify env mode (default: development)`,
       '--host': `specify host (default: ${defaults.host})`,
       '--port': `specify port (default: ${defaults.port})`,
-      '--https': `use https (default: ${defaults.https})`,
       '--public': `specify the public network URL for the HMR client`,
       '--skip-plugins': `comma-separated list of plugin names to skip for this run`
     }
@@ -37,7 +36,6 @@ module.exports = (api, options) => {
     const isInContainer = checkInContainer()
     const isProduction = process.env.NODE_ENV === 'production'
 
-    const url = require('url')
     const { chalk } = require('@vue/cli-shared-utils')
     const webpack = require('webpack')
     const WebpackDevServer = require('webpack-dev-server')
@@ -56,21 +54,11 @@ module.exports = (api, options) => {
             .devtool('eval-cheap-module-source-map')
         }
 
-        webpackConfig
-          .plugin('hmr')
-            .use(require('webpack/lib/HotModuleReplacementPlugin'))
-
         // https://github.com/webpack/webpack/issues/6642
         // https://github.com/vuejs/vue-cli/issues/3539
         webpackConfig
           .output
             .globalObject(`(typeof self !== 'undefined' ? self : this)`)
-
-        if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
-          webpackConfig
-            .plugin('progress')
-            .use(webpack.ProgressPlugin)
-        }
       }
     })
 
@@ -131,38 +119,41 @@ module.exports = (api, options) => {
     )
 
     // inject dev & hot-reload middleware entries
+    let webSocketURL
     if (!isProduction) {
-      const sockPath = projectDevServerOptions.sockPath || '/sockjs-node'
-      const sockjsUrl = publicUrl
+      if (publicHost) {
         // explicitly configured via devServer.public
-        ? `?${publicUrl}&sockPath=${sockPath}`
-        : isInContainer
-          // can't infer public network url if inside a container...
-          // use client-side inference (note this would break with non-root publicPath)
-          ? ``
-          // otherwise infer the url
-          : `?` + url.format({
-            protocol,
-            port,
-            hostname: urls.lanUrlForConfig || 'localhost'
-          }) + `&sockPath=${sockPath}`
-      const devClients = [
-        // dev server client
-        require.resolve(`webpack-dev-server/client`) + sockjsUrl,
-        // hmr client
-        require.resolve(projectDevServerOptions.hotOnly
-          ? 'webpack/hot/only-dev-server'
-          : 'webpack/hot/dev-server')
-        // TODO custom overlay client
-        // `@vue/cli-overlay/dist/client`
-      ]
+        webSocketURL = {
+          protocol: protocol === 'https' ? 'wss' : 'ws',
+          hostname: publicHost,
+          port
+        }
+      } else if (isInContainer) {
+        // can't infer public network url if inside a container
+        // infer it from the browser instead
+        webSocketURL = 'auto://0.0.0.0:0/ws'
+      } else {
+        // otherwise infer the url from the config
+        webSocketURL = {
+          protocol: protocol === 'https' ? 'wss' : 'ws',
+          hostname: urls.lanUrlForConfig || 'localhost',
+          port
+        }
+      }
+
       if (process.env.APPVEYOR) {
-        devClients.push(`webpack/hot/poll?500`)
+        addDevClientToEntry(webpackConfig, [`webpack/hot/poll?500`])
       }
-      // inject dev/hot client
-      addDevClientToEntry(webpackConfig, devClients)
     }
 
+    // fixme:
+    // add `whatwg-fetch` polyfill to the entry to support IE10/11
+
+    // fixme: temporary fix to suppress dev server logging
+    // should be more robust to show necessary info but not duplicate errors
+    webpackConfig.infrastructureLogging = { ...webpackConfig.infrastructureLogging, level: 'none' }
+    webpackConfig.stats = 'errors-only'
+
     // create compiler
     const compiler = webpack(webpackConfig)
 
@@ -173,9 +164,7 @@ module.exports = (api, options) => {
     })
 
     // create server
-    const server = new WebpackDevServer(compiler, Object.assign({
-      logLevel: 'silent',
-      clientLogLevel: 'silent',
+    const server = new WebpackDevServer(Object.assign({
       historyApiFallback: {
         disableDotRule: true,
         htmlAcceptHeaders: [
@@ -184,47 +173,66 @@ module.exports = (api, options) => {
         ],
         rewrites: genHistoryApiFallbackRewrites(options.publicPath, options.pages)
       },
-      contentBase: api.resolve('public'),
-      watchContentBase: !isProduction,
-      hot: !isProduction,
-      injectClient: false,
-      compress: isProduction,
-      publicPath: options.publicPath,
-      overlay: isProduction // TODO disable this
-        ? false
-        : { warnings: false, errors: true }
+      hot: !isProduction
     }, projectDevServerOptions, {
+      host,
+      port,
       https: useHttps,
       proxy: proxySettings,
-      public: publicHost,
+
+      static: {
+        directory: api.resolve('public'),
+        publicPath: options.publicPath,
+        watch: !isProduction,
+
+        ...projectDevServerOptions.static
+      },
+
+      client: {
+        webSocketURL,
+
+        logging: 'none',
+        overlay: isProduction // TODO disable this
+          ? false
+          : { warnings: false, errors: true },
+        progress: !process.env.VUE_CLI_TEST,
+
+        ...projectDevServerOptions.client
+      },
+
+      // avoid opening browser
+      open: false,
+      setupExitSignals: true,
+
       // eslint-disable-next-line no-shadow
-      before (app, server) {
+      onBeforeSetupMiddleware (server) {
         // launch editor support.
         // this works with vue-devtools & @vue/cli-overlay
-        app.use('/__open-in-editor', launchEditorMiddleware(() => console.log(
+        server.app.use('/__open-in-editor', launchEditorMiddleware(() => console.log(
           `To specify an editor, specify the EDITOR env variable or ` +
           `add "editor" field to your Vue project config.\n`
         )))
+
         // allow other plugins to register middlewares, e.g. PWA
-        api.service.devServerConfigFns.forEach(fn => fn(app, server))
+        // todo: migrate to the new API interface
+        api.service.devServerConfigFns.forEach(fn => fn(server.app, server))
+
         // apply in project middlewares
-        projectDevServerOptions.before && projectDevServerOptions.before(app, server)
-      },
-      // avoid opening browser
-      open: false
-    }))
+        if (projectDevServerOptions.before) {
+          // soft deprecation in this beta
+          // todo: should throw error in RC
+          projectDevServerOptions.before(server.app, server)
+        }
 
-    ;['SIGINT', 'SIGTERM'].forEach(signal => {
-      process.on(signal, () => {
-        server.close(() => {
-          process.exit(0)
-        })
-      })
-    })
+        if (projectDevServerOptions.onBeforeSetupMiddleware) {
+          projectDevServerOptions.onBeforeSetupMiddleware(server)
+        }
+      }
+    }), compiler)
 
     if (args.stdin) {
       process.stdin.on('end', () => {
-        server.close(() => {
+        server.stopCallback(() => {
           process.exit(0)
         })
       })
@@ -238,7 +246,7 @@ module.exports = (api, options) => {
       process.stdin.on('data', data => {
         if (data.toString() === 'close') {
           console.log('got close signal!')
-          server.close(() => {
+          server.stopCallback(() => {
             process.exit(0)
           })
         }
@@ -301,6 +309,7 @@ module.exports = (api, options) => {
           }
           console.log()
 
+          // fixme: `openPage` is unified into `open`
           if (args.open || projectDevServerOptions.open) {
             const pageUri = (projectDevServerOptions.openPage && typeof projectDevServerOptions.openPage === 'string')
               ? projectDevServerOptions.openPage
@@ -330,11 +339,7 @@ module.exports = (api, options) => {
         }
       })
 
-      server.listen(port, host, err => {
-        if (err) {
-          reject(err)
-        }
-      })
+      server.start().catch(err => reject(err))
     })
   })
 }

diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
@@ -27,7 +27,7 @@
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
     "@soda/get-current-script": "^1.0.2",
     "@types/minimist": "^1.2.0",
-    "@types/webpack-dev-server": "^3.11.0",
+    "@types/webpack-dev-server": "^4.1.0",
     "@vue/cli-overlay": "^5.0.0-beta.3",
     "@vue/cli-plugin-router": "^5.0.0-beta.3",
     "@vue/cli-plugin-vuex": "^5.0.0-beta.3",
@@ -77,7 +77,7 @@
     "webpack": "^5.22.0",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-chain": "^6.5.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.1.0",
     "webpack-merge": "^5.7.3",
     "webpack-virtual-modules": "^0.4.2"
   },