Fix webpack hot reload not working on html file changes. (#3167) rizwanmustafa devkennyy

* Modify config to allow hot reload on html

* Now inject monkeytype.js bundle only in development mode

* Remove asset injunction in production

frontend/webpack/config.base.js

@@ -8,20 +8,6 @@ const ExtraWatchWebpackPlugin = require("extra-watch-webpack-plugin");
 
 let circularImports = 0;
 
-const htmlWebpackPlugins = [
-  "terms-of-service",
-  "security-policy",
-  "privacy-policy",
-  "email-handler",
-  "das",
-].map((name) => {
-  return new HtmlWebpackPlugin({
-    filename: `${name}.html`,
-    template: resolve(__dirname, `../static/${name}.html`),
-    inject: false,
-  });
-});
-
 /** @type { import('webpack').Configuration } */
 const BASE_CONFIG = {
   entry: {
@@ -110,7 +96,6 @@ const BASE_CONFIG = {
       template: resolve(__dirname, "../static/main.html"),
       inject: "body",
     }),
-    ...htmlWebpackPlugins,
     new MiniCssExtractPlugin({
       filename: "./css/style.[chunkhash:8].css",
     }),

frontend/webpack/config.dev.js

@@ -1,5 +1,22 @@
+const { resolve } = require("path");
 const { merge } = require("webpack-merge");
 const BASE_CONFIG = require("./config.base");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const htmlWebpackPlugins = [
+  "terms-of-service",
+  "security-policy",
+  "privacy-policy",
+  "email-handler",
+  "das",
+].map((name) => {
+  return new HtmlWebpackPlugin({
+    filename: `${name}.html`,
+    template: resolve(__dirname, `../static/${name}.html`),
+    inject: "body",
+    cache: false,
+  });
+});
 
 /** @type { import('webpack').Configuration } */
 const DEV_CONFIG = {
@@ -9,11 +26,15 @@ const DEV_CONFIG = {
     compress: true,
     port: 3000,
     open: true,
+    hot: false,
+    liveReload: true,
     historyApiFallback: true,
     client: {
       overlay: false,
     },
   },
+
+  plugins: htmlWebpackPlugins,
 };
 
 module.exports = merge(BASE_CONFIG, DEV_CONFIG);

frontend/webpack/config.prod.js

@@ -1,10 +1,26 @@
+const { resolve } = require("path");
 const { merge } = require("webpack-merge");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
 const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const BASE_CONFIG = require("./config.base");
 
+const htmlWebpackPlugins = [
+  "terms-of-service",
+  "security-policy",
+  "privacy-policy",
+  "email-handler",
+  "das",
+].map((name) => {
+  return new HtmlWebpackPlugin({
+    filename: `${name}.html`,
+    template: resolve(__dirname, `../static/${name}.html`),
+    inject: false,
+  });
+});
+
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
     number.toString().padStart(maxLength, fillString)
@@ -63,6 +79,7 @@ const PRODUCTION_CONFIG = {
       new CssMinimizerPlugin(),
     ],
   },
+  plugins: htmlWebpackPlugins,
 };
 
 module.exports = merge(BASE_CONFIG, PRODUCTION_CONFIG);