Update to latest webpack-dev-server

This fixes a bunch of dependency audit problems. Luckily the new
webpack-dev-server is compatible with webpack v4 and webpack v5.

Updating this separately from the rest of webpack seems like a step in
the right direction. So far there are no problems with the webpack dev
server locally and HMR and all these things seem to work perfectly.

config/helpers/incremental_webpack_compiler/compiler.js

@@ -4,8 +4,8 @@ const path = require('path');
 const { History, HistoryWithTTL } = require('./history');
 const log = require('./log');
 
-const onRequestEntryPoint = (app, callback) => {
-  app.use((req, res, next) => {
+const onRequestEntryPoint = (callback) => {
+  return (req, res, next) => {
     const fileName = path.basename(req.url);
 
     /**
@@ -20,7 +20,7 @@ const onRequestEntryPoint = (app, callback) => {
     }
 
     next();
-  });
+  };
 };
 
 /**
@@ -40,7 +40,9 @@ class NoopCompiler {
   logStatus() {}
 
   // eslint-disable-next-line class-methods-use-this
-  setupMiddleware() {}
+  createMiddleware() {
+    return null;
+  }
 }
 
 /**
@@ -55,8 +57,8 @@ class HistoryOnlyCompiler extends NoopCompiler {
     this.history = new History(historyFilePath);
   }
 
-  setupMiddleware(app) {
-    onRequestEntryPoint(app, (entryPoint) => {
+  createMiddleware() {
+    return onRequestEntryPoint((entryPoint) => {
       this.history.onRequestEntryPoint(entryPoint);
     });
   }
@@ -92,16 +94,16 @@ class IncrementalWebpackCompiler {
     log(`Currently compiling route entrypoints: ${this.history.size} of ${totalCount}`);
   }
 
-  setupMiddleware(app, server) {
-    onRequestEntryPoint(app, (entryPoint) => {
+  createMiddleware(devServer) {
+    return onRequestEntryPoint((entryPoint) => {
       const wasVisitedRecently = this.history.onRequestEntryPoint(entryPoint);
       if (!wasVisitedRecently) {
         log(`Have not visited ${entryPoint} recently. Adding to compilation.`);
 
         setTimeout(() => {
-          server.middleware.invalidate(() => {
-            if (server.sockets) {
-              server.sockWrite(server.sockets, 'content-changed');
+          devServer.invalidate(() => {
+            if (devServer.sockets) {
+              devServer.sendMessage(devServer.webSocketServer.clients, 'static-changed');
             }
           });
         }, TIMEOUT);

config/webpack.config.js

@@ -38,11 +38,10 @@ const SUPPORTED_BROWSERS_HASH = crypto
 const VENDOR_DLL = process.env.WEBPACK_VENDOR_DLL && process.env.WEBPACK_VENDOR_DLL !== 'false';
 const CACHE_PATH = process.env.WEBPACK_CACHE_PATH || path.join(ROOT_PATH, 'tmp/cache');
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
-const IS_DEV_SERVER = process.env.WEBPACK_DEV_SERVER === 'true';
+const IS_DEV_SERVER = process.env.WEBPACK_SERVE === 'true';
 
-const DEV_SERVER_HOST = process.env.DEV_SERVER_HOST || 'localhost';
-const DEV_SERVER_PORT = parseInt(process.env.DEV_SERVER_PORT, 10) || 3808;
-const { DEV_SERVER_PUBLIC_ADDR } = process.env;
+const { DEV_SERVER_HOST, DEV_SERVER_PUBLIC_ADDR } = process.env;
+const DEV_SERVER_PORT = parseInt(process.env.DEV_SERVER_PORT, 10);
 const DEV_SERVER_ALLOWED_HOSTS =
   process.env.DEV_SERVER_ALLOWED_HOSTS && process.env.DEV_SERVER_ALLOWED_HOSTS.split(',');
 const DEV_SERVER_HTTPS = process.env.DEV_SERVER_HTTPS && process.env.DEV_SERVER_HTTPS !== 'false';
@@ -654,9 +653,6 @@ module.exports = {
       },
     },
 
-    // enable HMR only in webpack-dev-server
-    DEV_SERVER_LIVERELOAD && new webpack.HotModuleReplacementPlugin(),
-
     // optionally generate webpack bundle analysis
     WEBPACK_REPORT &&
       new BundleAnalyzerPlugin({
@@ -689,19 +685,38 @@ module.exports = {
     */
     new webpack.IgnorePlugin(/moment/, /pikaday/),
   ].filter(Boolean),
+
   devServer: {
-    before(app, server) {
-      incrementalCompiler.setupMiddleware(app, server);
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
+
+      const incrementalCompilerMiddleware = incrementalCompiler.createMiddleware(devServer);
+
+      if (incrementalCompilerMiddleware) {
+        middlewares.unshift(incrementalCompilerMiddleware);
+      }
+
+      return middlewares;
     },
-    host: DEV_SERVER_HOST,
-    port: DEV_SERVER_PORT,
-    public: DEV_SERVER_PUBLIC_ADDR,
-    allowedHosts: DEV_SERVER_ALLOWED_HOSTS,
+    // Only print errors to CLI
+    devMiddleware: {
+      stats: 'errors-only',
+    },
+    host: DEV_SERVER_HOST || 'localhost',
+    port: DEV_SERVER_PORT || 3808,
     https: DEV_SERVER_HTTPS,
-    contentBase: false,
-    stats: 'errors-only',
     hot: DEV_SERVER_LIVERELOAD,
-    inline: DEV_SERVER_LIVERELOAD,
+    // The following settings are mainly needed for HMR support in gitpod.
+    // Per default only local hosts are allowed, but here we could
+    // allow different hosts (e.g. ['.gitpod'], all of gitpod),
+    // as the webpack server will run on a different subdomain than
+    // the rails application
+    ...(DEV_SERVER_ALLOWED_HOSTS ? { allowedHosts: DEV_SERVER_ALLOWED_HOSTS } : {}),
+    client: {
+      ...(DEV_SERVER_PUBLIC_ADDR ? { webSocketURL: DEV_SERVER_PUBLIC_ADDR } : {}),
+    },
   },
 
   devtool: NO_SOURCEMAPS ? false : devtool,

package.json

@@ -198,7 +198,7 @@
     "web-vitals": "^0.2.4",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.9.2",
     "webpack-stats-plugin": "^0.3.1",
     "worker-loader": "^2.0.0",
     "xterm": "3.14.5",
@@ -257,7 +257,7 @@
     "stylelint": "^14.3.0",
     "timezone-mock": "^1.0.8",
     "vue-jest": "4.0.1",
-    "webpack-dev-server": "^3.11.3",
+    "webpack-dev-server": "4.7.4",
     "xhr-mock": "^2.5.1",
     "yarn-check-webpack-plugin": "^1.2.0",
     "yarn-deduplicate": "^3.1.0"