Update JS pipeline dependencies to Webpack 5

package.json

@@ -15,15 +15,15 @@
     "trestle": "https://github.com/TrestleAdmin/trestle.git"
   },
   "devDependencies": {
-    "autoprefixer": "^9.6.1",
-    "css-loader": "^3.2.0",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.12.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^8.0.0",
-    "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-fix-style-only-entries": "^0.4.0"
+    "autoprefixer": "^10.2.6",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "mini-css-extract-plugin": "^2.0.0",
+    "node-sass": "^6.0.1",
+    "postcss-loader": "^6.1.1",
+    "sass-loader": "^12.1.0",
+    "webpack": "^5.42.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-remove-empty-scripts": "^0.7.1"
   }
 }

webpack.config.js

@@ -1,10 +1,11 @@
 const path = require('path');
 
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 
 module.exports = {
+  mode: 'production',
   entry: {
     bundle: path.resolve(__dirname, 'frontend/index.scss'),
     userbox: path.resolve(__dirname, 'frontend/userbox.scss')
@@ -13,18 +14,8 @@ module.exports = {
     path: path.resolve(__dirname, 'app/assets/bundle/trestle/auth')
   },
   optimization: {
-    splitChunks: {
-      cacheGroups: {
-        styles: {
-          name: 'bundle',
-          test: /\.css$/,
-          chunks: 'all',
-          enforce: true
-        }
-      }
-    },
     minimizer: [
-      new OptimizeCSSAssetsPlugin({})
+      new CssMinimizerPlugin({})
     ]
   },
   module: {
@@ -34,14 +25,23 @@ module.exports = {
         use: [
           { loader: MiniCssExtractPlugin.loader },
           { loader: 'css-loader' },
-          { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  ['autoprefixer', {}]
+                ]
+              }
+            }
+          },
           { loader: 'sass-loader' }
         ]
       }
     ]
   },
   plugins: [
-    new FixStyleOnlyEntriesPlugin(),
+    new RemoveEmptyScriptsPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].css'
     })