Setting up HtmlWebpackPlugin

jantimon/html-webpack-plugin#841 (comment)
zainfathoni · Feb 27, 2018 · 6631fce · 6631fce
1 parent 852af9f
commit 6631fce
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 7 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,9 +1,9 @@
+<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
     <title>Output Management</title>
-    <script src="./print.main.js"></script>
   </head>
   <body>
-    <script src="./app.main.js"></script>
-  </body>
-</html>
+  <script type="text/javascript" src="app.main.js"></script><script type="text/javascript" src="print.main.js"></script></body>
+</html>
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "css-loader": "^0.28.10",
     "csv-loader": "^2.1.1",
     "file-loader": "^1.1.10",
+    "html-webpack-plugin": "webpack-contrib/html-webpack-plugin",
     "style-loader": "^0.20.2",
     "webpack": "^4.0.0",
     "webpack-cli": "^2.0.9",

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,11 +1,17 @@
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   mode: 'development',
   entry: {
     app: './src/index.js',
     print: './src/print.js'
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Output Management'
+    })
+  ],
   output: {
     filename: '[name].main.js',
     path: path.resolve(__dirname, 'dist')