use ejs templates

notes.md

@@ -27,7 +27,7 @@ Requirements
 #### html
 
 * html-webpack-plugin - automatically create index.html or use a template file
-* ejs - templating
+	also takes care of templating - default templating is ejs
 
 #### js
 

package-lock.json

@@ -3412,6 +3412,38 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
       "dev": true
     },
+    "ejs": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
+      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
+      "dev": true
+    },
+    "ejs-compiled-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ejs-compiled-loader/-/ejs-compiled-loader-3.0.0.tgz",
+      "integrity": "sha512-AR2y2TB2CdBO4cxSo2ZEqClL61NKgWa1fbB+r7z0MnC6pPjcSJgNL9ylMpDI/Olt1lAGifWw3ElX/t+x69RJUg==",
+      "dev": true,
+      "requires": {
+        "ejs": "^2",
+        "html-minifier": "^4",
+        "loader-utils": "^2",
+        "merge": "^1.2.1",
+        "terser": "^4.6"
+      },
+      "dependencies": {
+        "terser": {
+          "version": "4.8.0",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+          "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+          "dev": true,
+          "requires": {
+            "commander": "^2.20.0",
+            "source-map": "~0.6.1",
+            "source-map-support": "~0.5.12"
+          }
+        }
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.633",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
@@ -4295,6 +4327,57 @@
       "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
       "dev": true
     },
+    "html-minifier": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
+      "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^3.0.0",
+        "clean-css": "^4.2.1",
+        "commander": "^2.19.0",
+        "he": "^1.2.0",
+        "param-case": "^2.1.1",
+        "relateurl": "^0.2.7",
+        "uglify-js": "^3.5.1"
+      },
+      "dependencies": {
+        "camel-case": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+          "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+          "dev": true,
+          "requires": {
+            "no-case": "^2.2.0",
+            "upper-case": "^1.1.1"
+          }
+        },
+        "lower-case": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+          "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
+          "dev": true
+        },
+        "no-case": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+          "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+          "dev": true,
+          "requires": {
+            "lower-case": "^1.1.1"
+          }
+        },
+        "param-case": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+          "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+          "dev": true,
+          "requires": {
+            "no-case": "^2.2.0"
+          }
+        }
+      }
+    },
     "html-minifier-terser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -5284,6 +5367,12 @@
         }
       }
     },
+    "merge": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
+      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==",
+      "dev": true
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -9861,6 +9950,12 @@
         "mime-types": "~2.1.24"
       }
     },
+    "uglify-js": {
+      "version": "3.12.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.4.tgz",
+      "integrity": "sha512-L5i5jg/SHkEqzN18gQMTWsZk3KelRsfD1wUVNqtq0kzqWQqcJjyL8yc1o8hJgRrWqrAl2mUFbhfznEIoi7zi2A==",
+      "dev": true
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -9971,6 +10066,12 @@
       "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "dev": true
     },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
+      "dev": true
+    },
     "uri-js": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.0.1",
     "cssnano-webpack-plugin": "^1.0.3",
+    "ejs-compiled-loader": "^3.0.0",
     "html-webpack-plugin": "^4.5.0",
     "mini-css-extract-plugin": "^1.3.3",
     "postcss": "^8.2.2",

src/templates/index.ejs

@@ -19,6 +19,7 @@
 		</header>
 
 		<main id="js-main">
+			<%- include partials/component %>
 		</main>
 
 		<footer>

src/templates/partials/component.ejs

@@ -0,0 +1,3 @@
+<div class="component">
+	<p>sdklfj</p>
+</div>

webpack.config.js

@@ -26,7 +26,7 @@ module.exports = env => {
 			}),
 			new CleanWebpackPlugin(),
 			new HtmlWebpackPlugin({
-				template: 'src/html/index.html'
+				template: '!!ejs-compiled-loader?{}!./src/templates/index.ejs'
 			}),
 		],
 		module: {