FW-6217 Minify JS on prod (#679)

* Modified webpack config to reduce bundle size, split CSS into a separate file in prod

* Added conditional for css style loaders in dev vs prod

* removed CSS minimizer, and added chunkFilename

* removed extra packages

* removed unused imports

package.json

@@ -61,6 +61,7 @@
     "eslint-plugin-testcafe": "^0.2.1",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.9",
+    "mini-css-extract-plugin": "^2.9.2",
     "mochawesome": "^7.1.3",
     "prettier": "^2.8.8",
     "testcafe": "^3.6.2",

webpack/webpack.common.js

@@ -1,10 +1,13 @@
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CompressionPlugin = require('compression-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const path = require('path')
 const alias = require('./webpack.alias')
 
+const is_prod = process.env.NODE_ENV == 'production'
+
 module.exports = (env, definitions) => ({
   cache: {
     compression: 'gzip',
@@ -24,6 +27,7 @@ module.exports = (env, definitions) => ({
   },
   output: {
     filename: '[name].[contenthash].js',
+    chunkFilename: '[name].[contenthash].js',
     path: alias.dist,
   },
   module: {
@@ -41,7 +45,11 @@ module.exports = (env, definitions) => ({
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        use: [
+          is_prod ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          'postcss-loader',
+        ],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
@@ -62,6 +70,11 @@ module.exports = (env, definitions) => ({
       ),
       ...definitions,
     }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+      chunkFilename: '[id].css',
+      ignoreOrder: false,
+    }),
     new HtmlWebpackPlugin({
       template: './public/index.html',
       templateParameters: {