chore: update webpack to v5 (and related deps)

.editorconfig

@@ -26,6 +26,9 @@ max_line_length = unset
 [*.{js,css,less,sass,scss}]
 indent_size = 2
 
+[*.js]
+quote_type = single
+
 [{LICENSE,db/*.sql}]
 indent_size = unset
 

package.json

@@ -28,21 +28,21 @@
     "@babel/preset-env": "^7.11.5",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.1.0",
-    "css-loader": "^4.2.2",
+    "css-loader": "^5.2.5",
+    "css-minimizer-webpack-plugin": "^3.0.0",
     "file-loader": "^6.1.0",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.0",
-    "mini-css-extract-plugin": "^0.11.0",
+    "less": "^4.1.1",
+    "less-loader": "^9.0.0",
+    "mini-css-extract-plugin": "^1.6.0",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.3",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss": "^8.2.8",
     "postcss-loader": "^4.0.0",
     "postcss-preset-env": "^6.7.0",
     "rimraf": "^3.0.2",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.2",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0"
   }
 }

webpack.config.js

@@ -1,14 +1,15 @@
 const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const nodeEnv = (process.env.NODE_ENV || 'development').trim();
+const fs = require('fs');
 
 // eslint-disable-next-line
 const __DEV__ = nodeEnv !== 'production';
 
-const devtool = __DEV__ ? '#source-map' : '';
+const devtool = __DEV__ ? 'eval-cheap-module-source-map' : undefined;
 
 const plugins = [
   new webpack.DefinePlugin({
@@ -22,11 +23,15 @@ const plugins = [
   }),
 ];
 
-
-const themeEntries = {};
-for (let i = 0; i < 16; i++) {
-  themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.less`;
-}
+const themeFileNameRegex = /theme\d+/;
+const themePath = path.resolve('resources/assets/themes');
+const themeEntries = fs
+  .readdirSync(themePath)
+  .filter((fileName) => fileName.match(themeFileNameRegex))
+  .reduce((entries, themeFileName) => {
+    entries[path.parse(themeFileName).name] = `${themePath}/${themeFileName}`;
+    return entries;
+  }, {});
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
@@ -44,7 +49,7 @@ module.exports = {
     publicPath: '',
   },
   optimization: {
-    minimizer: __DEV__ ? [] : [new OptimizeCSSAssetsPlugin({}), new TerserPlugin()],
+    minimizer: __DEV__ ? [] : [new CssMinimizerPlugin(), new TerserPlugin()],
   },
   module: {
     rules: [
@@ -52,7 +57,7 @@ module.exports = {
         test: /\.jsx?$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
-        query: { cacheDirectory: true },
+        options: { cacheDirectory: true },
       },
       { test: /\.(jpg|eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
       { test: /\.json$/, loader: 'json-loader' },
@@ -70,8 +75,8 @@ module.exports = {
             },
           },
           { loader: 'less-loader' },
-        ]
-      }
+        ],
+      },
     ],
   },
   plugins,