Upgrade webpack setup

This includes * `webpack` * `webpack-dev-server` * `webpack-cli` The current versions have a bug that don't correctly expose a library, if one is set: webpack/webpack-dev-server#4469. The issue does not mention an explicit fix version, but upgrading to the latest webpack dev server seems to have fixed it. The upgrade also required updating several options that were newly introduced or deprecated from previous versions.
abhchand · Oct 21, 2022 · b9c5f15 · b9c5f15
1 parent 7c0a92e
commit b9c5f15
Show file tree

Hide file tree

Showing 3 changed files with 1,060 additions and 922 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "lintfix": "eslint . --ext .js,.jsx --fix && stylelint app/frontend/stylesheets/* --fix",
     "testonly": "TZ='UTC' jest --no-cache --config spec/frontend/javascript/jest.config.js",
     "test": "yarn run lint && yarn run testonly",
-    "dev": "NODE_ENV=development webpack-dev-server --open --debug --output-pathinfo",
+    "dev": "NODE_ENV=development webpack-dev-server --output-pathinfo",
     "test-build": "NODE_ENV=test webpack --config webpack.config.js",
     "dev-build": "NODE_ENV=development webpack --config webpack.config.js",
     "prod-build": "NODE_ENV=production webpack --config webpack.config.js"
@@ -26,7 +26,7 @@
     "prettier": "^2.1.2",
     "stylelint": "^9.3.0",
     "stylelint-config-rational-order": "^0.0.2",
-    "webpack-dev-server": "^3.10.0"
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
     "@babel/cli": "^7.4.4",
@@ -64,8 +64,8 @@
     "redux": "^4.0.5",
     "sass": "^1.55.0",
     "sass-loader": "^9.0.2",
-    "webpack": "^5.2.0",
+    "webpack": "^5.74.0",
     "webpack-assets-manifest": "^5.0.0",
-    "webpack-cli": "3.3.12"
+    "webpack-cli": "4.10.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -64,50 +64,47 @@ const config = {
   },
   devtool: 'cheap-module-source-map',
   devServer: {
-    clientLogLevel: 'none',
+    client: {
+      logging: 'none'
+    },
     compress: true,
-    quiet: false,
-    disableHostCheck: true,
+    // `webpack-dev-middleware` library options
+    devMiddleware: {
+      /*
+       * Webpack-dev-server serves assets from memory. Since
+       * the assets/images/* files are statically copied (via the
+       * `CopyPlugin` below) and not built as a webpack "pack"
+       * (using a defined 'entry point') they are not served
+       * from webpack dev server's memory. To get around this
+       * we write these files to disk and the dev server will
+       * fallback to looking for them on the disk since we
+       * statically serve everything under the public directory.
+       */
+      writeToDisk: (filePath) => {
+        return /assets\/images\//u.test(filePath);
+      }
+    },
     host: 'localhost',
     port: 3035,
     https: false,
     hot: true,
 
-    /*
-     * Note: `publicPath` takes precedence if defined
-     * so don't define it and just serve all content
-     * as static from the `public/` directory
-     */
-    contentBase: PUBLIC_DIR,
-    inline: true,
-    useLocalIp: false,
-    public: 'localhost:3035',
     historyApiFallback: {
       disableDotRule: true
     },
     headers: {
       'Access-Control-Allow-Origin': '*'
     },
-    overlay: true,
-    stats: {
-      errorDetails: true
-    },
-    watchOptions: {
-      ignored: '/node_modules/'
-    },
-
-    /*
-     * Webpack-dev-server serves assets from memory. Since
-     * the assets/images/* files are statically copied (via the
-     * `CopyPlugin` below) and not built as a webpack "pack"
-     * (using a defined 'entry point') they are not served
-     * from webpack dev server's memory. To get around this
-     * we write these files to disk and the dev server will
-     * fallback to looking for them on the disk since we
-     * statically serve everything under the public directory
-     */
-    writeToDisk: (filePath) => {
-      return /assets\/images\//u.test(filePath);
+    static: {
+      /*
+       * Note: `publicPath` takes precedence if defined
+       * so don't define it and just serve all content
+       * as static from the `public/` directory
+       */
+      directory: PUBLIC_DIR,
+      watch: {
+        ignored: '/node_modules/'
+      }
     }
   },
   entry: {