Merge pull request #614 from alphagov/package-updates-webpack

Upgrade to webpack v5

package.json

@@ -43,7 +43,7 @@
     "@wdio/sauce-service": "^7.34.0",
     "@wdio/spec-reporter": "^7.33.0",
     "@wdio/static-server-service": "^7.33.0",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "chai": "^4.3.10",
     "chalk": "^5.3.0",
@@ -57,17 +57,17 @@
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.4.0",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
     "preact": "^8.5.3",
     "puppeteer": "^21.7.0",
-    "source-map-loader": "^1.1.3",
+    "source-map-loader": "^5.0.0",
     "standard": "^17.1.0",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.3.9",
     "webdriverio": "^7.34.0",
-    "webpack": "^4.47.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {

test/karma.config.js

@@ -11,7 +11,7 @@ process.env.CHROME_BIN = puppeteer.executablePath()
 module.exports = function (config) {
   config.set({
     basePath: '../',
-    frameworks: ['mocha'],
+    frameworks: ['mocha', 'webpack'],
     reporters: ['mocha'],
 
     browsers: ['ChromeHeadless'],

webpack.config.mjs

@@ -1,5 +1,6 @@
 import { join } from 'path'
 import { cwd } from 'process'
+
 import TerserPlugin from 'terser-webpack-plugin'
 import webpack from 'webpack'
 
@@ -13,35 +14,23 @@ const plugins = [
   })
 ]
 
+/**
+ * Base webpack config
+ *
+ * @satisfies {WebpackConfiguration}
+ */
 const config = {
   context: join(cwd(), 'src'),
 
-  optimization: {
-    minimize: ENV === 'production',
-    minimizer: [new TerserPlugin({
-      extractComments: true,
-      sourceMap: true,
-      terserOptions: {
-        format: { comments: false },
-
-        // Include sources content from dependency source maps
-        sourceMap: {
-          includeSources: true
-        },
+  devtool: ENV === 'development'
+    ? 'inline-source-map'
+    : 'source-map',
 
-        // Compatibility workarounds
-        safari10: true
-      }
-    })]
-  },
+  externalsType: 'umd',
 
-  resolve: {
-    extensions: ['.js'],
-    modules: [
-      join(cwd(), 'node_modules'),
-      'node_modules'
-    ]
-  },
+  mode: ENV === 'development'
+    ? 'development'
+    : 'production',
 
   module: {
     rules: [
@@ -64,23 +53,48 @@ const config = {
     ]
   },
 
-  stats: { colors: true },
-
   node: {
     global: true,
-    process: false,
-    Buffer: false,
     __filename: false,
-    __dirname: false,
-    setImmediate: false
+    __dirname: false
+  },
+
+  optimization: {
+    minimize: ENV === 'production',
+    minimizer: [new TerserPlugin({
+      extractComments: true,
+      terserOptions: {
+        format: { comments: false },
+
+        // Include sources content from dependency source maps
+        sourceMap: {
+          includeSources: true
+        },
+
+        // Compatibility workarounds
+        safari10: true
+      }
+    })]
+  },
+
+  output: {
+    path: join(cwd(), 'dist'),
+    publicPath: '/dist'
   },
 
-  mode: ENV === 'production' ? 'production' : 'development',
-  devtool: ENV === 'production' ? 'source-map' : 'cheap-module-eval-source-map'
+  stats: {
+    colors: true
+  }
 }
 
+/**
+ * Bundle standalone 'accessible-autocomplete'
+ *
+ * @satisfies {WebpackConfiguration}
+ */
 const bundleStandalone = {
   ...config,
+
   devServer: {
     allowedHosts: 'all',
     host: '0.0.0.0',
@@ -105,62 +119,83 @@ const bundleStandalone = {
       }
     ]
   },
+
   entry: {
-    'accessible-autocomplete.min': './wrapper.js'
-  },
-  output: {
-    path: join(cwd(), 'dist'),
-    publicPath: '/dist',
-    filename: '[name].js',
-    library: 'accessibleAutocomplete',
-    libraryExport: 'default',
-    libraryTarget: 'umd'
+    'accessible-autocomplete': {
+      import: join(cwd(), 'src/wrapper.js'),
+      filename: '[name].min.js',
+      library: {
+        export: 'default',
+        name: 'accessibleAutocomplete',
+        type: 'umd'
+      }
+    }
   },
+
   plugins: plugins
     .concat([new webpack.DefinePlugin({
       'process.env.COMPONENT_LIBRARY': '"PREACT"'
     })])
 }
 
+/**
+ * Bundle for Preact 'accessible-autocomplete/preact.js'
+ *
+ * @satisfies {WebpackConfiguration}
+ */
 const bundlePreact = {
   ...config,
+
   entry: {
-    'lib/accessible-autocomplete.preact.min': './autocomplete.js'
-  },
-  output: {
-    path: join(cwd(), 'dist'),
-    publicPath: '/',
-    filename: '[name].js',
-    library: 'Autocomplete',
-    libraryTarget: 'umd'
+    'accessible-autocomplete.preact': {
+      import: join(cwd(), 'src/autocomplete.js'),
+      filename: 'lib/[name].min.js',
+      library: {
+        name: 'Autocomplete',
+        type: 'umd',
+        umdNamedDefine: true
+      }
+    }
   },
+
   externals: {
-    preact: {
-      amd: 'preact',
-      commonjs: 'preact',
-      commonjs2: 'preact',
-      root: 'preact'
-    }
+    preact: 'preact'
+  },
+
+  output: {
+    ...config.output,
+
+    // Support `window.preact` when not bundled
+    // e.g. with all dependencies included via unpkg.com
+    globalObject: 'this'
   },
+
   plugins: plugins
     .concat([new webpack.DefinePlugin({
       'process.env.COMPONENT_LIBRARY': '"PREACT"'
     })])
 }
 
+/**
+ * Bundle for React 'accessible-autocomplete/react.js'
+ *
+ * @satisfies {WebpackConfiguration}
+ */
 const bundleReact = {
   ...config,
+
   entry: {
-    'lib/accessible-autocomplete.react.min': './autocomplete.js'
-  },
-  output: {
-    path: join(cwd(), 'dist'),
-    publicPath: '/',
-    filename: '[name].js',
-    library: 'Autocomplete',
-    libraryTarget: 'umd',
-    globalObject: 'this'
+    'accessible-autocomplete.react': {
+      import: join(cwd(), 'src/autocomplete.js'),
+      filename: 'lib/[name].min.js',
+      library: {
+        name: 'Autocomplete',
+        type: 'umd',
+        umdNamedDefine: true
+      }
+    }
   },
+
   externals: {
     preact: {
       amd: 'react',
@@ -169,14 +204,30 @@ const bundleReact = {
       root: 'React'
     }
   },
+
+  output: {
+    ...config.output,
+
+    // Support extending `window.React` when not bundled
+    // e.g. with all dependencies included via unpkg.com
+    globalObject: 'this'
+  },
+
   plugins: plugins
     .concat([new webpack.DefinePlugin({
       'process.env.COMPONENT_LIBRARY': '"REACT"'
     })])
 }
 
+/**
+ * Multiple webpack config export
+ */
 export default [
   bundleStandalone,
   bundlePreact,
   bundleReact
 ]
+
+/**
+ * @typedef {import('webpack-dev-server').WebpackConfiguration} WebpackConfiguration
+ */