configure html-webpack-plugin

nicoqh · nicoqh · commit 3b333eef2010 · 2022-03-19T13:30:21.000+01:00
create an index.html template and add the plugin to the webpack config
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="referrer" content="origin" />
+    <meta name="description" content="Page description" />
+    <title>Boilerplate!</title>
+  </head>
+  <body>
+  </body>
+</html>
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,6 @@
 // webpack.config.js
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 // We'll refer to our source and dist paths frequently, so let's store them here
 const PATH_SOURCE = path.join(__dirname, "./src");
@@ -84,5 +85,13 @@ module.exports = (env) => {
         },
       ],
     },
+    plugins: [
+      // This plugin will generate an HTML5 file that imports all our Webpack
+      // bundles using <script> tags. The file will be placed in `output.path`.
+      // https://github.com/jantimon/html-webpack-plugin
+      new HtmlWebpackPlugin({
+        template: path.join(PATH_SOURCE, "./index.html"),
+      }),
+    ],
   };
 };
