Minimize CSS in production builds

1 files changed, 10 insertions, 4 deletions

diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index 810a63bd..0ce5d9a4 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -1,13 +1,12 @@
 const ESLintPlugin = require('eslint-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
-module.exports = () => {
-  const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'development'
-  const dev = node_env !== 'production'
+module.exports = (env, argv) => {
+  const dev = argv.mode !== 'production'
   const config = {
-    mode: node_env,
     devtool: dev ? 'source-map' : false,
     entry: {
       'index': [
@@ -90,6 +89,12 @@ module.exports = () => {
         overlay: true
       }
     }
+  } else {
+    config.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: 'Juick.[contenthash].css'
+      })
+    )
   }
   config.optimization = {
     minimize: !dev,
@@ -100,6 +105,7 @@ module.exports = () => {
         // Link to options - https://swc.rs/docs/config-js-minify
         terserOptions: {},
       }),
+      new CssMinimizerPlugin()
     ]
   }
   return config