feat: Upgrade to webpack v5

dhruv-m-patel · Mar 19, 2024 · 9c7272a · 9c7272a
1 parent a485d07
commit 9c7272a
Show file tree

Hide file tree

Showing 5 changed files with 902 additions and 832 deletions.
diff --git a/packages/web-app/package.json b/packages/web-app/package.json
@@ -17,58 +17,60 @@
   },
   "dependencies": {
     "@babel/register": "^7.23.7",
-    "@loadable/webpack-plugin": "^5.14.0",
+    "@loadable/webpack-plugin": "^5.15.2",
     "compression": "^1.7.4",
-    "cookie-parser": "^1.4.5",
+    "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "express-enrouten": "^1.3.0",
-    "express-session": "^1.17.2",
+    "express-session": "^1.18.0",
     "fetch-everywhere": "^1.0.5",
     "morgan": "^1.10.0",
     "react-svg-loader": "^3.0.3",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack-manifest-plugin": "^3.0.0"
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack-manifest-plugin": "^3.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.24.0",
     "@dhruv-m-patel/eslint-config-base": "workspace:^",
-    "@types/compression": "^1.7.0",
-    "@types/cookie-parser": "^1.4.2",
-    "@types/cors": "^2.8.10",
-    "@types/express": "^4.17.12",
-    "@types/express-session": "^1.17.3",
-    "@types/loadable__webpack-plugin": "^5.7.2",
-    "@types/morgan": "^1.9.2",
+    "@types/compression": "^1.7.5",
+    "@types/cookie-parser": "^1.4.7",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/express-session": "^1.18.0",
+    "@types/loadable__webpack-plugin": "^5.7.6",
+    "@types/morgan": "^1.9.9",
     "@types/optimize-css-assets-webpack-plugin": "^5.0.8",
     "@types/supertest": "^2.0.11",
     "@types/uuid": "^8.3.0",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.10.0",
-    "cssnano": "^6.0.3",
-    "express": "^4.17.1",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "express": "^4.18.3",
     "jest": "27.0.5",
     "jest-junit": "^12.2.0",
-    "mini-css-extract-plugin": "^2.8.0",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "mini-css-extract-plugin": "^2.8.1",
     "postcss-import": "^16.0.1",
-    "postcss-loader": "^8.1.0",
-    "postcss-preset-env": "^9.4.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.1",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.4",
     "supertest": "^6.1.3",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^27.0.3",
-    "ts-loader": "^8.0.12",
-    "ts-node": "^10.0.0",
-    "typescript": "4.3.4",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "4.9.5",
     "uuid": "^8.3.2",
-    "webpack": "^4.44.2",
-    "webpack-dev-middleware": "^3.7.3",
-    "webpack-hot-middleware": "^2.25.0",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-middleware": "^7.0.0",
+    "webpack-hot-middleware": "^2.26.1",
+    "webpack-manifest-plugin": "^5.0.0",
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
     "express": ">= 4",
-    "webpack": ">= 4"
+    "webpack": ">= 5"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/web-app/src/configureApp.ts b/packages/web-app/src/configureApp.ts
@@ -52,7 +52,7 @@ export interface AppOptions {
   useBabel?: Boolean;
 }
 
-export default function configureApp(options: AppOptions) {
+export default async function configureApp(options: AppOptions) {
   const {
     setup,
     paths: { routes, staticDirectories, webpackConfig },
@@ -127,8 +127,11 @@ export default function configureApp(options: AppOptions) {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     app.use(
       webpackHotMiddleware(compiler, {
+        path: '/__webpack_hmr',
+        heartbeat: 10 * 1000,
+        // @ts-ignore
+        dynamicPublicPath: true,
         reload: true,
-        heartbeat: 10000,
       })
     );
   } else {

diff --git a/packages/web-app/src/getWebpackConfig.ts b/packages/web-app/src/getWebpackConfig.ts
@@ -5,7 +5,7 @@ import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 import LoadablePlugin from '@loadable/webpack-plugin';
 import nodeExternals from 'webpack-node-externals';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 export type Environment = 'development' | 'staging' | 'production';
 
@@ -18,13 +18,12 @@ export default function getWebpackConfig(
 
   return {
     mode: environment || 'production',
+    devtool: 'inline-source-map',
     entry: {
-      client: !isDevelopment
-        ? path.resolve(basePath, 'src/client')
-        : [
-            'webpack-hot-middleware/client',
-            path.resolve(basePath, 'src/client'),
-          ],
+      client: [
+        isDevelopment && 'webpack-hot-middleware/client?reload=true',
+        path.resolve(basePath, 'src/client'),
+      ].filter(Boolean),
     },
     output: {
       filename: isProduction ? '[name].[chunkhash].js' : '[name].bundle.js',
@@ -34,19 +33,25 @@ export default function getWebpackConfig(
     module: {
       rules: [
         {
-          test: /\.jsx?$/,
+          test: /\.tsx?$/,
           exclude: /node_modules/,
-          loader: 'babel-loader',
+          use: [
+            'babel-loader',
+            {
+              loader: 'ts-loader',
+              options: {
+                compilerOptions: {
+                  sourceMap: true,
+                  module: 'esnext',
+                },
+              },
+            },
+          ],
         },
         {
-          test: /\.tsx?$/,
+          test: /\.jsx?$/,
           exclude: /node_modules/,
-          loader: 'ts-loader',
-          options: {
-            compilerOptions: {
-              module: 'esnext',
-            },
-          },
+          loader: 'babel-loader',
         },
         {
           test: /\.svg$/,
@@ -81,7 +86,11 @@ export default function getWebpackConfig(
                   require('postcss-import'),
                   // eslint-disable-next-line global-require
                   require('postcss-preset-env')({
-                    browsers: '> 0.5%, last 2 versions, Firefox ESR, not dead',
+                    // If you don't set this, you get the GB preset default,
+                    // which is fine in most cases
+                    browsers: process.env.BROWSER_SUPPORT,
+                    // Setting to stage 1 for now so we don't break functionality
+                    // that worked with postcss-cssnext
                     stage: 1,
                   }),
                 ],
@@ -92,11 +101,16 @@ export default function getWebpackConfig(
       ],
     },
     plugins: [
-      new WebpackManifestPlugin(),
+      new WebpackManifestPlugin({}),
       new LoadablePlugin({ writeToDisk: true }),
+      isProduction && new MiniCssExtractPlugin({
+          filename: '[name].[contenthash].css',
+        }),
       isDevelopment && new webpack.HotModuleReplacementPlugin(),
+      isDevelopment && new webpack.NoEmitOnErrorsPlugin(),
     ].filter(Boolean),
     optimization: {
+      moduleIds: 'named',
       splitChunks: {
         cacheGroups: {
           vendor: {
@@ -107,33 +121,41 @@ export default function getWebpackConfig(
           },
         },
       },
-      namedModules: true,
-      noEmitOnErrors: true,
       ...(isProduction && {
         minimizer: [
           new TerserPlugin({
-            sourceMap: true,
-            cache: true,
             parallel: true,
+            terserOptions: {
+              sourceMap: true,
+              compress: true,
+              mangle: true,
+            },
           }),
-          new OptimizeCSSAssetsPlugin({
-            cssProcessorOptions: {
-              map: {
-                inline: false,
-              },
+          new CssMinimizerPlugin({
+            minimizerOptions: {
+              preset: [
+                'default',
+                {
+                  discardComments: true,
+                },
+              ],
             },
+            minify: CssMinimizerPlugin.cleanCssMinify,
           }),
         ],
       }),
     },
     resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-    },
-    devtool: isProduction ? 'cheap-source-map' : false,
-    performance: {
-      maxAssetSize: 500000, // in bytes
-      hints: false,
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.css'],
     },
+    ...(isProduction && {
+      devtool: 'source-map',
+      performance: {
+        maxAssetSize: 200 * 1000, // Max 200kB per bundle
+        maxEntrypointSize: 300 * 1000, // Max 300kB per bundle
+        hints: 'warning',
+      },
+    }),
     externals: nodeExternals(),
   };
 }
diff --git a/packages/web-app/src/runApp.ts b/packages/web-app/src/runApp.ts
@@ -11,7 +11,7 @@ function isPromise(value?: any) {
   return Boolean(value && typeof value.then === 'function');
 }
 
-export default function runApp(
+export default async function runApp(
   app: express.Application,
   options: AppStartupOptions = {
     port: 3000,