gocd · chadlwilson · Jun 4, 2026
diff --git a/assets/templates/basic-template.html.ejs b/assets/templates/basic-template.html.ejs
@@ -1,12 +1,13 @@
 <html>
 <head>
-  <title><%= htmlWebpackPlugin.options.title %></title>
+  <title><%= title %></title>
   <script defer src="gocd-server-comms.js"></script>
   <script defer src="highcharts.src.js"></script>
   <script defer src="no-data-to-display.src.js"></script>
   <script defer src="xrange.src.js"></script>
+  <script defer src="<%= entrypoint %>"></script>
 </head>
-<body id="<%= htmlWebpackPlugin.options.title %>">
+<body id="<%= title %>">
   <div id="chart-container"></div>
 </body>
-</html>
+</html>
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -16,11 +16,11 @@
 
 const webpack = require("webpack");
 const path = require("path");
-const _ = require("lodash");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
-const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+
+const rootPath = path.resolve(__dirname, "..");
+const assetsPath = path.join(rootPath, "assets");
+const outputPath = path.join(rootPath, "build", "resources", "webpack");
 
 const pages = [
   {
@@ -73,42 +73,90 @@ const pages = [
   }
 ];
 
-/* Every page outputs a corresponding HTML file (page['output_filename']). */
-function pluginsToGenerateChartHTMLFiles(env, pages) {
-  return pages.map(page => {
-    return new HtmlWebpackPlugin({
-      filename: page["output_filename"],
-      template: path.resolve(__dirname, "..", "assets", "templates", page["based_on_template"]),
-      chunks: [page["name"], "styles"], /* Connects this HTML file to the corresponding entry (and so the JS). */
-      title: page["name"],
-      inject: "head",
-      environment: (env && env["NODE_ENV"]) || "development"
-    });
-  });
+/**
+ * Generate an array of enrties with the structure, like:
+ * [
+ *     {
+ *       import: path.join(assetsPath, "templates", "basic-template.html5.ejs"),
+ *       filename: "pipeline-instances-chart.html",
+ *       data: {
+ *         title: "pipeline-instances-chart",
+ *         entrypoint: "@scripts/pages/pipeline/pipeline-instances-chart.js",
+ *       },
+ *     },
+ *     // ... next entiries
+ * ],
+ * @return {{import: string, filename: string, data: {title: string, entrypoint: string}}[]}
+ */
+function pageEntries() {
+  return pages.map(page => ({
+    filename: page.output_filename,
+    import: path.join(assetsPath, "templates", page.based_on_template),
+    data: {
+      title: page.name,
+      entrypoint: path.join("@scripts", "pages", page.entrypoint),
+    }
+  }));
 }
 
-module.exports = (env) => {
+module.exports = (env = {}, argv = {}) => {
+  const mode = argv.mode || process.env.NODE_ENV || "development";
+  const isProduction = mode === "production";
+
   return {
-    /* Every chart has a JS file (chart['entrypoint']) which will be used in the HTML file (see below). */
-    entry: _.transform(pages, function (accumulator, page) {
-      accumulator[page["name"]] = path.resolve(__dirname, "..", "assets", "js", "pages", page["entrypoint"]);
-    }, {}),
+    mode,
+    context: rootPath,
+    target: "web",
 
     output: {
-      filename: "js/[name].js",
-      path: path.resolve(__dirname, "..", "build", "resources", "webpack")
+      assetModuleFilename: isProduction ? "assets/[name].[contenthash:8][ext][query]" : "assets/[name][ext][query]",
+      path: outputPath,
+      clean: true
     },
 
-    plugins: _.flattenDeep([
-      new ScriptExtHtmlWebpackPlugin({ defaultAttribute: "defer" }),
-      pluginsToGenerateChartHTMLFiles(env, pages),
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      new LodashModuleReplacementPlugin({ "collections": true }),
-      new MiniCssExtractPlugin({
-        filename: "[name]-[contenthash].css",
-        chunkFilename: "[name]-[chunkhash].css"
-      })
-    ]),
+    plugins: [
+      new HtmlBundlerPlugin({
+        entry: pageEntries(),
+        js: {
+          filename: isProduction ? "js/[name].[contenthash:8].js" : "js/[name].js",
+          chunkFilename: isProduction ? "js/[name].[contenthash:8].chunk.js" : "js/[name].chunk.js",
+          //inline: true, // enable to inline JS into the HTML
+        },
+        css: {
+          filename: isProduction ? "css/[name].[contenthash:8].css" : "css/[name].css",
+          chunkFilename: isProduction ? "css/[name].[contenthash:8].chunk.css" : "css/[name].chunk.css",
+          //inline: true, // enable to inline CSS into the HTML
+        },
+        loaderOptions: {
+          preprocessor: 'ejs', // use EJS template engine
+          // resolving source files in templates
+          sources: [
+            {
+              tag: 'script',
+              attributes: ['src'],
+              // return false to disable resolving the static scripts in templates
+              filter: ({ tag, attribute, value, }) => {
+                 const staticFilenames = [
+                  "gocd-server-comms.js",
+                  "highcharts.src.js",
+                  "no-data-to-display.src.js",
+                  "xrange.src.js",
+                ];
+                if ('src' === attribute && staticFilenames.some(file => value.includes(file))) {
+                  // doesn't resolve the static file as a source
+                  return false;
+                }
+              },
+            },
+          ]
+        },
+      }),
+
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/
+      }),
+    ],
 
     optimization: {
       splitChunks: {
@@ -123,49 +171,51 @@ module.exports = (env) => {
       }
     },
 
-    /* Look at 'assets' directory as well for JS and CSS files when resolving in 'import' statements. */
     resolve: {
+      alias: {
+        '@scripts': path.join(rootPath, 'assets/js'),
+      },
       extensions: [".js", ".css", ".scss"],
-      modules: [path.join(__dirname, "..", "assets"), "node_modules"]
+      modules: [assetsPath, "node_modules"],
+      fallback: {
+        fs: false
+      }
     },
 
     externals: {
       "gocd-server-comms": "AnalyticsEndpoint",
-      "highcharts-shim": "Highcharts"
-    },
-
-    node: {
-      fs: "empty"
+      "highcharts-shim": "Highcharts",
     },
 
     module: {
       rules: [
         {
           test: /\.s?[ac]ss$/,
           use: [
-            MiniCssExtractPlugin.loader,
             "css-loader",
             "sass-loader"
           ]
         },
         {
           test: /\.js$/,
           exclude: /node_modules/,
-          use: [
-            {
-              loader: "babel-loader",
-              options: {
-                plugins: ["lodash"],
-                presets: [[ "@babel/preset-env", { "modules": false } ]]
-              }
+          use: {
+            loader: "babel-loader",
+            options: {
+              plugins: ["lodash"],
+              presets: [["@babel/preset-env", {modules: false}]],
+              cacheDirectory: true
             }
-          ],
+          }
         },
         {
-          test: /\.(svg|png|jpg|gif)$/,
-          use: ["file-loader"]
+          test: /\.(svg|png|jpe?g|gif)$/i,
+          type: "asset/resource",
+          //type: "asset/inline", // HtmlBundlerPlugin embedds inline assets into CSS
         }
       ]
-    }
+    },
+
+    stats: "minimal"
   };
-};
+};
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
@@ -15,19 +15,18 @@
  */
 
 const common       = require("./webpack.config.js"),
-      merge        = require("webpack-merge"),
-      TerserPlugin = require('terser-webpack-plugin');
+      { merge }    = require("webpack-merge"),
+      TerserPlugin = require("terser-webpack-plugin");
 
-module.exports = env => {
-  return merge(common(env), {
+module.exports = (env = {}, argv = {}) => {
+  return merge(common(env, argv), {
     devtool: "source-map",
     optimization: {
       minimize: true,
       minimizer: [
         new TerserPlugin({
-          sourceMap: true,
           terserOptions: {
-            output: {
+            format: {
               ascii_only: true
             }
           }
@@ -46,4 +45,4 @@ module.exports = env => {
       }
     }
   });
-};
+};