html-webpack-loader makes server/build use same src/index.html file

Added option for dev proxy by passing env variable: proxyhost.
File definitions and paths defined by variables instead of rewriting
string

package.json

@@ -29,6 +29,7 @@
     "css-loader": "6.7.0",
     "documentation": "^11.0.0",
     "file-loader": "6.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "sass": "1.49.9",
     "sass-loader": "12.6.0",
     "terser-webpack-plugin": "5.3.1",

webpack.config.js

@@ -1,17 +1,20 @@
 const path = require("path");
 const webpack = require("webpack");
 const sass = require("sass");
-
+const HTMLWebpackPlugin = require("html-webpack-plugin");
 const { VueLoaderPlugin } = require("vue-loader");
-// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 
+const sourcePath = path.resolve(__dirname, "src");
+const indexFile = path.join(sourcePath, "index.html");
+const javascriptEntry = path.join(sourcePath, "main.js");
 const publicPath = path.resolve(__dirname, "public");
 const isProd = process.env.NODE_ENV === "production";
 
 module.exports = {
-  context: path.resolve(__dirname, "src"),
+  mode: process.env.NODE_ENV,
-  entry: "/main.js",
+  context: publicPath,
+  entry: javascriptEntry,
   output: {
     path: `${publicPath}/dist/`,
     publicPath: "/dist/",
@@ -50,7 +53,14 @@ module.exports = {
       }
     ]
   },
-  plugins: [new VueLoaderPlugin()],
+  plugins: [
+    new VueLoaderPlugin(),
+    new HTMLWebpackPlugin({
+      template: indexFile,
+      filename: "index.html",
+      minify: isProd
+    })
+  ],
   resolve: {
     extensions: [".js", ".vue", ".json", ".scss"],
     alias: {
@@ -61,14 +71,7 @@ module.exports = {
       components: path.resolve(__dirname, "src/components")
     }
   },
-  devServer: {
+  devtool: "source-map",
-    static: publicPath,
-    historyApiFallback: {
-      index: "index.html"
-    },
-    compress: true,
-    port: 8080
-  },
   performance: {
     hints: false
   },
@@ -97,21 +100,37 @@ module.exports = {
       new TerserPlugin({
         parallel: true,
         terserOptions: {
+          sourceMap: true
           // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
         }
       })
     ]
   },
-  devtool: "inline-source-map"
+  devServer: {
+    static: publicPath,
+    historyApiFallback: {
+      index: "/dist/index.html"
+    },
+    compress: true,
+    hot: true,
+    port: 8080
+  }
 };
 
 if (isProd) {
   module.exports.mode = "production";
   module.exports.devtool = false;
-  // module.exports.plugins.push(
+  module.exports.performance.hints = "warning";
-  //   new MiniCssExtractPlugin({
+}
-  //     filename: "[name].css",
+
-  //     chunkFilename: "[id].css"
+// enable proxy by running command e.g.:
-  //   })
+// proxyhost=https://request.movie yarn dev
-  // );
+const { proxyhost } = process.env;
+if (proxyhost) {
+  module.exports.devServer.proxy = {
+    "/api": {
+      target: proxyhost,
+      changeOrigin: true
+    }
+  };
 }