feat: expanded webpack optimization

Author: MikhailMasny

package.json

@@ -31,8 +31,10 @@
     "csv-loader": "^3.0.2",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "papaparse": "^5.1.1",
     "style-loader": "^1.1.3",
+    "terser-webpack-plugin": "^2.3.5",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "xml-loader": "^1.2.1"

webpack.config.js

@@ -2,6 +2,26 @@ const path = require("path");
 const HTMLWebpackPlugin = require("html-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const OptimizeCSSAssetPlugin = require("optimize-css-assets-webpack-plugin");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
+
+const isDev = process.env.NODE_ENV === "development";
+const isProd = !isDev;
+
+const optimization = () => {
+    const config = {
+        splitChunks: {
+            chunks: "all"
+        }
+    }
+
+    if (isProd) {
+        config.minimizer = [
+            new OptimizeCSSAssetPlugin(),
+            new TerserWebpackPlugin()
+        ]
+    }
+}
 
 module.exports = {
     context: path.resolve(__dirname, "src"),
@@ -22,14 +42,13 @@ module.exports = {
             "@": path.resolve(__dirname, "src")
         }
     },
-    optimization: {
-        splitChunks: {
-            chunks: "all"
-        }
-    },
+    optimization: optimization(),
     plugins: [
         new HTMLWebpackPlugin({
-            template: "./index.html"
+            template: "./index.html",
+            minify: {
+                collapseWhitespace: isProd
+            }
         }),
         new CleanWebpackPlugin(),
         new CopyWebpackPlugin([