Minify JS, CSS, and HTML in production

- Extracted CSS into own file in production
- Minified CSS in production
- Added TerserJS back in to minify JS in production
- Minified HTML in production as well

webpack.prod.js

@@ -2,6 +2,10 @@ const path = require("path");
 const common = require("./webpack.common");
 const merge = require("webpack-merge");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = merge(common, {
   mode: "production",
@@ -9,5 +13,34 @@ module.exports = merge(common, {
     filename: "[name].[contentHash].bundle.js",
     path: path.resolve(__dirname, "dist")
   },
-  plugins: [new CleanWebpackPlugin()]
+  optimization: {
+    minimizer: [
+      new OptimizeCssAssetsPlugin(),
+      new TerserPlugin(),
+      new HtmlWebpackPlugin({
+        template: "./src/template.html",
+        minify: {
+          removeAttributeQuotes: true,
+          collapseWhitespace: true,
+          removeComments: true
+        }
+      })
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
+    new CleanWebpackPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader, //3. Extract css into files
+          "css-loader", //2. Turns css into commonjs
+          "sass-loader" //1. Turns sass into css
+        ]
+      }
+    ]
+  }
 });