maint(Build): Directly build the modernizr bundle.

Do not use an webpack entry to build the modernizr bundle with an
webpack runtime overhead. Instead, build it directly but abusing the
webpack CopyPlugin transform mechanism. We could also build the
modernizr bundle from the Makefile but that wouldn't provide the file
when watching or when running webpack-dev-server.

Author: thet

package.json

@@ -44,8 +44,8 @@
         "@patternslib/pat-tiptap": "^4.7.2",
         "@patternslib/pat-upload": "^3.1.1",
         "copy-webpack-plugin": "^11.0.0",
-        "pegjs": "0.11.0-master.b7b87ea",
-        "webpack-modernizr-loader": "^5.0.0"
+        "modernizr": "^3.12.0",
+        "pegjs": "0.11.0-master.b7b87ea"
     },
     "resolutions": {
         "jquery": "3.6.2"

src/modernizr.js

@@ -5,12 +5,13 @@ const mf_config = require("@patternslib/dev/webpack/webpack.mf");
 const package_json = require("../package.json");
 const path = require("path");
 const webpack_config = require("@patternslib/dev/webpack/webpack.config").config;
+const modernizr_config = require("../.modernizrrc.js");
+const modernizr = require("modernizr");
 
 module.exports = () => {
     let config = {
         entry: {
             "bundle.min": path.resolve(__dirname, "../src/index.js"),
-            "modernizr.min": path.resolve(__dirname, "../src/modernizr.js"),
         },
     };
 
@@ -21,15 +22,6 @@ module.exports = () => {
 
     config.output.path = path.resolve(__dirname, "../dist/");
 
-    // Modernizr
-    config.module.rules.push({
-        test: /\.modernizrrc\.js$/,
-        loader: "webpack-modernizr-loader",
-    });
-    config.resolve.alias = {
-        modernizr$: path.resolve(__dirname, "../.modernizrrc.js"),
-    };
-
     // Module federation
     config.plugins.push(
         mf_config({
@@ -50,14 +42,41 @@ module.exports = () => {
         })
     );
 
-    // BBB polyfills not used anymore.
-    // TODO: Remove for next major version.
-    // Polyfills
+    // Copy static files
     config.plugins.push(
-        // Copy polyfills loader to the output path.
         new CopyPlugin({
             patterns: [
-                { from: path.resolve(__dirname, "../src/polyfills-loader.js"), }, // prettier-ignore
+                // Copy polyfills loader to the output path.
+                // TODO: Polyfills not used anymore, remove for next major version.
+                { from: path.resolve(__dirname, "../src/polyfills-loader.js") },
+
+                // Build and copy Modernizr.
+                // We're abusing the CopyPlugin transform method here to build
+                // a Modernizr bundle using the modernizr config. The input
+                // file does not matter and could be anything - we're using the
+                // modernizr config itself.
+                // Why building modernizr here and not in the Makefile?
+                // Because we want webpack-dev-server also to serve it.
+                {
+                    from: path.resolve(__dirname, "../.modernizrrc.js"),
+                    to: "[path]modernizr.min.js",
+                    transform: {
+                        transformer: () => {
+                            return new Promise((resolve) => {
+                                modernizr.build(
+                                    {
+                                        ...modernizr_config,
+                                        minify: process.env.NODE_ENV === "production",
+                                    },
+                                    (result) => {
+                                        resolve(result);
+                                    }
+                                );
+                            });
+                        },
+                        cache: true,
+                    },
+                },
             ],
         })
     );