migrate to webpack 5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

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.2",
+    "css-minimizer-webpack-plugin": "^2.0.0",
     "file-loader": "^6.1.0",
-    "less": "^3.12.2",
+    "less": "^4.0.0",
-    "less-loader": "^7.0.0",
+    "less-loader": "^8.1.1",
-    "mini-css-extract-plugin": "^0.11.0",
+    "mini-css-extract-plugin": "^1.4.1",
     "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-loader": "^5.2.0",
     "postcss-preset-env": "^6.7.0",
     "rimraf": "^3.0.2",
-    "style-loader": "^1.2.1",
+    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.1.0",
+    "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^4.44.1",
+    "webpack": "^5.33.2",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^4.6.0"
   }
 }

webpack.config.js

@@ -1,14 +1,14 @@
 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();
 
 // eslint-disable-next-line
 const __DEV__ = nodeEnv !== 'production';
 
-const devtool = __DEV__ ? '#source-map' : '';
+const devtool = __DEV__ ? 'source-map' : '';
 
 const plugins = [
   new webpack.DefinePlugin({
@@ -44,7 +44,7 @@ module.exports = {
     publicPath: '',
   },
   optimization: {
-    minimizer: __DEV__ ? [] : [new OptimizeCSSAssetsPlugin({}), new TerserPlugin()],
+    minimizer: __DEV__ ? [] : [new CssMinimizerPlugin(), new TerserPlugin()],
   },
   module: {
     rules: [
@@ -52,7 +52,6 @@ module.exports = {
         test: /\.jsx?$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
-        query: { cacheDirectory: true },
       },
       { test: /\.(jpg|eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
       { test: /\.json$/, loader: 'json-loader' },