chore: upgrade webpack and postcss.

config/webpackDevServer.config.cjs

@@ -16,6 +16,7 @@ const sockPort = process.env.WDS_SOCKET_PORT;
 module.exports = function (proxy, allowedHost) {
   const disableFirewall =
     !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+  const httpsConfig = getHttpsConfig();
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -91,7 +92,10 @@ module.exports = function (proxy, allowedHost) {
       publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
 
-    https: getHttpsConfig(),
+    server: {
+      type: httpsConfig === false ? "http" : "https",
+      options: typeof httpsConfig === "object" ? httpsConfig : undefined,
+    },
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
@@ -101,27 +105,32 @@ module.exports = function (proxy, allowedHost) {
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    onBeforeSetupMiddleware(devServer) {
-      // Keep `evalSourceMapMiddleware`
-      // middlewares before `redirectServedPath` otherwise will not have any effect
-      // This lets us fetch source contents from webpack for the error overlay
-      devServer.app.use(evalSourceMapMiddleware(devServer));
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+          throw new Error('webpack-dev-server is not defined')
+      }
 
       if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(devServer.app);
+          // This registers user provided middleware for proxy reasons
+          require(paths.proxySetup)(devServer.app)
       }
-    },
-    onAfterSetupMiddleware(devServer) {
-      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      middlewares.push(
+          // Keep `evalSourceMapMiddleware`
+          // middlewares before `redirectServedPath` otherwise will not have any effect.
+          // This lets us fetch source contents from webpack for the error overlay.
+          evalSourceMapMiddleware(devServer),
+          // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+          redirectServedPath(paths.publicUrlOrPath),
+          // This service worker file is effectively a 'no-op' that will reset any
+          // previous service worker registered for the same host:port combination.
+          // We do this in development to avoid hitting the production cache if
+          // it used the same host and port.
+          // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+          noopServiceWorkerMiddleware(paths.publicUrlOrPath)
+      )
+
+      return middlewares;
     },
   };
 };

package.json

@@ -55,11 +55,11 @@
     "mini-css-extract-plugin": "^2.4.5",
     "os-browserify": "^0.3.0",
     "pagedjs": "^0.3.5",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.38",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^8.1.1",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
+    "postcss-preset-env": "^9.5.2",
     "process": "^0.11.10",
     "prompts": "^2.4.2",
     "qrcode": "^1.5.1",
@@ -91,10 +91,10 @@
     "url": "^0.11.0",
     "uuid": "^9.0.0",
     "web-vitals": "^3.0.4",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
+    "webpack": "^5.91.0",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-manifest-plugin": "^5.0.0",
+    "workbox-webpack-plugin": "^7.0.0"
   },
   "scripts": {
     "start": "node ./scripts/start.cjs",
@@ -151,7 +151,7 @@
     "mini-css-extract-plugin": "^2.6.1",
     "moq.ts": "^9.0.2",
     "node-sass": "^9.0.0",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.38",
     "react-test-renderer": "^18.2.0",
     "source-map-explorer": "^2.5.3",
     "ts-node": "^10.9.1",

scripts/start.cjs

@@ -133,15 +133,15 @@ checkBrowsers(paths.appPath, isInteractive)
 
     ['SIGINT', 'SIGTERM'].forEach(function (sig) {
       process.on(sig, function () {
-        devServer.close();
+        devServer.stop();
         process.exit();
       });
     });
 
     if (process.env.CI !== 'true') {
       // Gracefully exit when stdin ends
       process.stdin.on('end', function () {
-        devServer.close();
+        devServer.stop();
         process.exit();
       });
     }