fix hmr not working in template files

static-html/package.json

@@ -5,7 +5,8 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack serve",
+    "serve": "webpack serve",
+    "watch": "webpack --watch --progress",
     "build": "webpack --env production"
   },
   "author": "",

static-html/src/templates/index.ejs

@@ -19,8 +19,8 @@
 		</header>
 
 		<main id="js-main">
-			<% let data = {text: 'text is text'} %>
-			<%- include partials/component data %>
+			<%# weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46 %>
+			<%- require('!!ejs-compiled-loader?{}!./partials/component.ejs')({ text: 'text is text yahh!!!' }) %>
 		</main>
 
 		<footer>

static-html/src/templates/partials/component.ejs

@@ -1,3 +1,4 @@
 <div class="component">
-	<p><%= data.text %></p>
+	<p><%= text %></p>
+	<p>woot!</p>
 </div>

static-html/webpack.config.js

@@ -25,7 +25,8 @@ module.exports = (env) => ({
     }),
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-      template: './src/templates/index.ejs',
+      // weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
+      template: '!!ejs-compiled-loader?{}!./src/templates/index.ejs',
     }),
     new EsLintPlugin(),
     new StylelintPlugin(),
@@ -35,8 +36,11 @@ module.exports = (env) => ({
       {
         test: /\.ejs$/,
         use: {
-          loader: 'ejs-compiled-loader',
-          options: {}, // supply empty options object because of https://github.com/bazilio91/ejs-compiled-loader/issues/46
+          // weird loader string syntax because https://github.com/bazilio91/ejs-compiled-loader/issues/46
+          // NOTE - talso an alternative workaround that involves passing
+          // the usual 'ejs-compiled-loader' as the loader and passing
+          // an empty options object, however hmr did not work with that fix.
+          loader: '!!ejs-compiled-loader?{}!',
         },
       },
       {