feat: support webpack dev server v4 (#16414)

* feat: support webpack dev server v4

* simplify code

* add types

npm/webpack-dev-server/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "tsc",
     "build-prod": "tsc",
-    "test": "tsc && mocha -r @packages/ts/register test/**/*.spec.ts --exit",
+    "test": "tsc && mocha -r @packages/ts/register test/**/*.spec.ts test/*.spec.ts --exit",
     "watch": "tsc -w"
   },
   "dependencies": {
@@ -29,7 +29,7 @@
   "peerDependencies": {
     "html-webpack-plugin": ">=4",
     "webpack": ">=4",
-    "webpack-dev-server": "^3.0.0"
+    "webpack-dev-server": ">=3.0.0"
   },
   "files": [
     "dist",

npm/webpack-dev-server/src/index.ts

@@ -1,5 +1,6 @@
 import { debug as debugFn } from 'debug'
 import { AddressInfo } from 'net'
+import { Server } from 'http'
 import { start as createDevServer, StartDevServer } from './startServer'
 
 const debug = debugFn('cypress:webpack-dev-server:webpack')
@@ -18,16 +19,23 @@ export async function startDevServer (startDevServerArgs: StartDevServer, exitPr
 
   return new Promise<ResolvedDevServerConfig>((resolve) => {
     const httpSvr = webpackDevServer.listen(0, '127.0.0.1', () => {
-      // FIXME: handle address returning a string
-      const port = (httpSvr.address() as AddressInfo).port
+      // webpack-dev-server v3 returns `http.Server`.
+      // v4 returns a Promise that resolves `http.Server`.
+      // use Promise.resolve to make sure we get the `http.Server`,
+      // regardless of webpack-dev-server version.
+      Promise.resolve(httpSvr).then((server: Server) => {
+        // FIXME: handle address returning a string
+        const port = (server.address() as AddressInfo).port
 
-      debug('Component testing webpack server started on port', port)
-      resolve({
-        port,
-        close: (done?: DoneCallback) => {
-          httpSvr.close()
-          done?.()
-        },
+        debug('Component testing webpack server started on port', port)
+
+        return resolve({
+          port,
+          close: (done?: DoneCallback) => {
+            httpSvr.close()
+            done?.()
+          },
+        })
       })
     })
   })

npm/webpack-dev-server/src/startServer.ts

@@ -1,6 +1,7 @@
 import Debug from 'debug'
 import webpack from 'webpack'
 import WebpackDevServer from 'webpack-dev-server'
+import webpackDevServerPkg from 'webpack-dev-server/package.json'
 import { makeWebpackConfig, UserWebpackDevServerOptions } from './makeWebpackConfig'
 
 export interface StartDevServer extends UserWebpackDevServerOptions {
@@ -48,13 +49,28 @@ export async function start ({ webpackConfig: userWebpackConfig, template, optio
   }
 
   debug('starting webpack dev server')
-
-  const webpackDevServerConfig: WebpackDevServer.Configuration = {
+  let webpackDevServerConfig: WebpackDevServer.Configuration = {
     ...userWebpackConfig.devServer,
     hot: false,
-    inline: false,
-    publicPath: devServerPublicPathRoute,
-    noInfo: false,
+  }
+
+  if (webpackDevServerPkg.version.match(/3\./)) {
+    webpackDevServerConfig = {
+      ...webpackDevServerConfig,
+      inline: false,
+      publicPath: devServerPublicPathRoute,
+      noInfo: false,
+    }
+  } else if (webpackDevServerPkg.version.match(/4\./)) {
+    webpackDevServerConfig = {
+      ...userWebpackConfig.devServer,
+      devMiddleware: {
+        publicPath: devServerPublicPathRoute,
+      },
+      hot: false,
+    }
+  } else {
+    throw Error(`@cypress/webpack-dev-server only supports webpack-dev-server v3 and v4. Found: ${webpackDevServerPkg.version}.`)
   }
 
   // @ts-ignore types for webpack v5 are incorrect?

npm/webpack-dev-server/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     /* Basic Options */
+    "resolveJsonModule": true,
     "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
     "skipLibCheck": true,