From 629c15941bccbb7be731a3f7c563b78149b10e95 Mon Sep 17 00:00:00 2001
From: Rizwan Mustafa <rizwanmustafa0000@gmail.com>
Date: Mon, 20 Jun 2022 15:43:27 +0500
Subject: [PATCH] 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 | 15 ---------------
 frontend/webpack/config.dev.js  | 21 +++++++++++++++++++++
 frontend/webpack/config.prod.js | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/frontend/webpack/config.base.js b/frontend/webpack/config.base.js
index 9110d05eb..4e028f9c0 100644
--- a/frontend/webpack/config.base.js
+++ b/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",
     }),
diff --git a/frontend/webpack/config.dev.js b/frontend/webpack/config.dev.js
index b947666b9..94a272ccd 100644
--- a/frontend/webpack/config.dev.js
+++ b/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);
diff --git a/frontend/webpack/config.prod.js b/frontend/webpack/config.prod.js
index 7f2dbca22..6795dfbaa 100644
--- a/frontend/webpack/config.prod.js
+++ b/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);