Merge pull request #345 from UniversityofWarwick/feature/webpack5

ID-474 Webpack 5.

Author: halfninja

.gitignore

@@ -79,3 +79,26 @@ node_modules
 
 # Don't ignore /dist because it needs to be in Git for npm
 dist/fonts/fa-light-*
+
+# ── GSD baseline (auto-generated) ──
+.gsd
+.gsd-id
+.bg-shell/
+.vscode/
+*.code-workspace
+.env
+.env.*
+!.env.example
+node_modules/
+.next/
+dist/
+build/
+__pycache__/
+*.pyc
+.venv/
+venv/
+target/
+vendor/
+coverage/
+.cache/
+tmp/

babel.config.js babel.config.cjsbabel.config.js renamed to babel.config.cjs

@@ -0,0 +1,89 @@
+import path from 'path';
+import { createHash } from 'crypto';
+
+/**
+ * Webpack plugin that generates some extra files for Play! Framework
+ * to use to generate versioned assets.
+ *
+ * It calculates the MD5 hash of each source and then:
+ * Adds a .md5 file containing that hash
+ * Adds a HASH-FILENAME copy of the original file.
+ *
+ * Logic based on the gulp-play-assets module.
+ */
+export default class PlayFingerprintsPlugin {
+  constructor(options) {
+    this.options = options || {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('PlayFingerprintsPlugin', (compilation) => {
+      compilation.hooks.processAssets.tapAsync(
+        {
+          name: 'PlayFingerprintsPlugin',
+          stage: compilation.compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        (assets, done) => {
+          // const versionedFilenames = {};
+
+          // Get list of asset names to process (avoid mutating during iteration)
+          const assetNames = Object.keys(assets);
+
+          for (const fullPath of assetNames) {
+            const dir = path.dirname(fullPath);
+            const filename = path.basename(fullPath);
+
+            // Skip zip files - they don't need fingerprinting
+            if (filename.endsWith('.zip')) {
+              continue;
+            }
+
+            const dynamicChunk = filename.match(/^([a-z0-9]+)-([0-9]+.js(\.map)?)$/);
+            if (dynamicChunk) {
+              // This is a dynamic chunk that uses [chunkhash]
+              // in its filename already - so reverse engineer the .md5 file
+              // to allow the Gulp script to find the fingerprinted version.
+              const hash = dynamicChunk[1];
+              const name = dynamicChunk[2];
+              
+              const RawSource = compilation.compiler.webpack.sources.RawSource;
+              compilation.emitAsset(`${dir}/${name}.md5`, new RawSource(hash));
+
+              // don't really need this, but Play seems not to serve the file
+              // unless the non-fingerprinted version exists.
+              compilation.emitAsset(`${dir}/${name}`, compilation.getAsset(fullPath).source);
+            } else {
+              const asset = compilation.getAsset(fullPath);
+              if (!asset) continue;
+              
+              const hash = createHash('md5');
+              hash.update(asset.source.source());
+              const md5 = hash.digest('hex');
+
+              // Identical to original file but with hash prepended.
+              compilation.emitAsset(`${dir}/${md5}-${filename}`, asset.source);
+
+              // Fingerprint .md5 file
+              const RawSource = compilation.compiler.webpack.sources.RawSource;
+              compilation.emitAsset(`${dir}/${filename}.md5`, new RawSource(md5));
+
+              // versionedFilenames[filename] = `${md5}-${filename}`;
+            }
+          }
+
+          // for (const chunkId in compilation.chunks) {
+          //   if (compilation.chunks.hasOwnProperty(chunkId)) {
+          //     const chunk = compilation.chunks[chunkId];
+          //     chunk.files = chunk.files.map( file => {
+          //       console.log(`Replacing ${file} with ${versionedFilenames[file]}`);
+          //       return versionedFilenames[file];
+          //     });
+          //   }
+          // }
+
+          done();
+        }
+      );
+    });
+  }
+}

build-tooling/PlayFingerprintsPlugin.js

@@ -1,13 +1,13 @@
-module.exports = class WatchEventsPlugin {
+export default class WatchEventsPlugin {
   constructor(options) {
     this.options = options || {};
   }
 
   apply(compiler) {
     const { emitter } = this.options;
-    compiler.plugin('after-emit', (compilation, done) => {
+    compiler.hooks.afterEmit.tapAsync('WatchEventsPlugin', (compilation, done) => {
       emitter.emit('assets-updated');
       done();
     });
   }
-};
+}

build-tooling/PlayFingerprintsPlugin.mjs

@@ -2,20 +2,20 @@ import path from 'path';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import Autoprefixer from 'autoprefixer';
-import CssNano from 'cssnano';
-import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
-import PostCssSafeParser from 'postcss-safe-parser';
 
 const autoprefix = () => ({
   loader: 'postcss-loader',
   options: {
-    plugins: () => [Autoprefixer()],
+    postcssOptions: {
+      plugins: [Autoprefixer()],
+    },
     sourceMap: true,
   },
 });
 
-const lintJS = () => ({
+export const lintJS = () => ({
 
   module: {
     rules: [
@@ -28,7 +28,7 @@ const lintJS = () => ({
   },
 });
 
-const transpileJS = () => ({
+export const transpileJS = () => ({
   output: {
     chunkFilename: '[name].js',
     filename: '[name].js',
@@ -47,7 +47,7 @@ const transpileJS = () => ({
   },
 });
 
-const copyNpmDistAssets = ({ modules, dest } = {}) => {
+export const copyNpmDistAssets = ({ modules, dest } = {}) => {
   const pairs = modules.map(m => ({
     from: `node_modules/${m}/dist`,
     to: `${dest}/${m}/[1]`,
@@ -56,22 +56,26 @@ const copyNpmDistAssets = ({ modules, dest } = {}) => {
 
   return {
     plugins: [
-      new CopyWebpackPlugin(pairs),
+      new CopyWebpackPlugin({ patterns: pairs }),
     ],
   };
 };
 
-const copyLocalImages = ({ dest } = {}) => ({
+export const copyLocalImages = ({ dest } = {}) => ({
   plugins: [
-    new CopyWebpackPlugin([{
-      from: 'images',
-      ignore: ['*.sh', 'src', 'src/**/*'],
-      to: dest,
-    }]),
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: 'images',
+        globOptions: {
+          ignore: ['**/*.sh', '**/src', '**/src/**/*'],
+        },
+        to: dest,
+      }],
+    }),
   ],
 });
 
-const extractCSS = ({ resolverPaths } = {}) => ({
+export const extractCSS = ({ resolverPaths } = {}) => ({
   module: {
     rules: [
       {
@@ -103,10 +107,12 @@ const extractCSS = ({ resolverPaths } = {}) => ({
           {
             loader: 'less-loader',
             options: {
-              paths: resolverPaths,
-              relativeUrls: false,
+              lessOptions: {
+                paths: resolverPaths,
+                relativeUrls: false,
+                math: 'parens-division',
+              },
               sourceMap: true,
-              math: 'parens-division',
             },
           },
         ],
@@ -121,12 +127,10 @@ const extractCSS = ({ resolverPaths } = {}) => ({
 });
 
 
-const minify = () => ({
+export const minify = () => ({
   optimization: {
     minimizer: [
       new TerserPlugin({
-        sourceMap: true,
-        cache: true,
         terserOptions: {
           compress: {
             drop_console: true,
@@ -136,31 +140,20 @@ const minify = () => ({
           },
         },
       }),
-      new OptimizeCssAssetsPlugin({
-        cssProcessor: CssNano,
-        cssProcessorOptions: {
-          parser: PostCssSafeParser,
-          discardComments: {
-            removeAll: true,
-          },
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: ['default', {
+            discardComments: {
+              removeAll: true,
+            },
+          }],
         },
-        canPrint: true,
       }),
     ],
   },
 });
 
 
-const generateSourceMaps = (devtool) => ({
+export const generateSourceMaps = (devtool) => ({
   devtool,
 });
-
-export {
-  copyNpmDistAssets,
-  copyLocalImages,
-  lintJS,
-  transpileJS,
-  extractCSS,
-  minify,
-  generateSourceMaps,
-};

build-tooling/WatchEventsPlugin.js build-tooling/WatchEventsPlugin.mjsbuild-tooling/WatchEventsPlugin.js renamed to build-tooling/WatchEventsPlugin.mjs

@@ -11,7 +11,7 @@ import { existsSync } from 'node:fs';
 
 import pngToIco from 'png-to-ico';
 
-import { COLOURS, generateIcon as generateIconInternal } from "./tools/icon-generator.js";
+import { COLOURS, generateIcon as generateIconInternal } from "./tools/icon-generator.mjs";
 
 const __dirname = import.meta.dirname;
 

build-tooling/webpack.tooling.js build-tooling/webpack.tooling.mjsbuild-tooling/webpack.tooling.js renamed to build-tooling/webpack.tooling.mjs

@@ -0,0 +1,6 @@
+[tools]
+node = "22"
+ruby = "3.3"
+
+[settings]
+idiomatic_version_file_enable_tools = []