Add mini css plugin for production builds

package-lock.json

@@ -88,6 +88,7 @@
         "expose-loader": "4.0.0",
         "html-loader": "4.1.0",
         "html-webpack-plugin": "5.5.0",
+        "mini-css-extract-plugin": "2.6.1",
         "postcss": "8.4.16",
         "postcss-loader": "7.0.1",
         "postcss-preset-env": "7.8.2",
@@ -9785,6 +9786,44 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
+      "integrity": "sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -25551,6 +25590,29 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz",
+      "integrity": "sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==",
+      "dev": true,
+      "requires": {
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -40,6 +40,7 @@
     "expose-loader": "4.0.0",
     "html-loader": "4.1.0",
     "html-webpack-plugin": "5.5.0",
+    "mini-css-extract-plugin": "2.6.1",
     "postcss": "8.4.16",
     "postcss-loader": "7.0.1",
     "postcss-preset-env": "7.8.2",
@@ -127,7 +128,7 @@
     "serve": "webpack serve --config webpack.dev.js",
     "prepare": "node ./scripts/prepare.js",
     "build:development": "webpack --config webpack.dev.js",
-    "build:production": "webpack --config webpack.prod.js",
+    "build:production": "NODE_ENV=\"production\" webpack --config webpack.prod.js",
     "lint": "eslint \"./\"",
     "stylelint": "npm run stylelint:css && npm run stylelint:scss",
     "stylelint:css": "stylelint \"src/**/*.css\"",

webpack.common.js

@@ -2,6 +2,7 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { DefinePlugin } = require('webpack');
 
 const Assets = [
@@ -21,7 +22,11 @@ const LibarchiveWasm = [
     'libarchive.js/dist/wasm-gen/libarchive.wasm'
 ];
 
-module.exports = {
+const DEV_MODE = process.env.NODE_ENV !== 'production';
+
+const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/;
+
+const config = {
     context: path.resolve(__dirname, 'src'),
     target: 'browserslist',
     resolve: {
@@ -92,8 +97,10 @@ module.exports = {
             chunks: 'all',
             maxInitialRequests: Infinity,
             cacheGroups: {
-                vendor: {
+                node_modules: {
-                    test: /[\\/]node_modules[\\/]/,
+                    test(module) {
+                        return NODE_MODULES_REGEX.test(module.context);
+                    },
                     name(module) {
                         // get the name. E.g. node_modules/packageName/not/this/part.js
                         // or node_modules/packageName
@@ -155,7 +162,7 @@ module.exports = {
             {
                 test: /\.s[ac]ss$/i,
                 use: [
-                    'style-loader',
+                    DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
                     'css-loader',
                     {
                         loader: 'postcss-loader',
@@ -171,7 +178,7 @@ module.exports = {
             {
                 test: /\.css$/i,
                 use: [
-                    'style-loader',
+                    DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
                     'css-loader',
                     {
                         loader: 'postcss-loader',
@@ -205,3 +212,9 @@ module.exports = {
         ]
     }
 };
+
+if (!DEV_MODE) {
+    config.plugins.push(new MiniCssExtractPlugin());
+}
+
+module.exports = config;