html: upgrade to webpack 5

html/package.json

@@ -35,28 +35,29 @@
   "devDependencies": {
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "^5.2.4",
+    "css-minimizer-webpack-plugin": "^2.0.0",
     "gts": "^1.1.2",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-gzip": "^1.4.2",
     "gulp-inline-source": "^4.0.0",
     "gulp-rename": "^2.0.0",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.3.1",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.5.1",
     "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.0.1",
     "scssfmt": "^1.0.7",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.1.1",
     "through2": "^4.0.2",
-    "ts-loader": "^8.1.0",
+    "ts-loader": "^9.1.1",
     "tslint": "^6.1.3",
     "tslint-loader": "^3.5.4",
     "typescript": "^3.9.9",
-    "webpack": "4.46.0",
+    "util": "^0.12.3",
+    "webpack": "^5.36.1",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3"

html/webpack.config.js

@@ -1,9 +1,10 @@
 const path = require('path');
+const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 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 devMode = process.env.NODE_ENV !== 'production';
@@ -15,7 +16,7 @@ const baseConfig = {
     },
     output: {
         path: path.resolve(__dirname, 'dist'),
-        filename: devMode ? '[name].js' : '[name].[hash].js',
+        filename: devMode ? '[name].js' : '[name].[contenthash].js',
     },
     module: {
         rules: [
@@ -40,17 +41,21 @@ const baseConfig = {
         ]
     },
     resolve: {
-        extensions: [ '.tsx', '.ts', '.js' ]
+        extensions: [ '.tsx', '.ts', '.js' ],
+        fallback: { "util": require.resolve("util/") }
     },
     plugins: [
+        new webpack.DefinePlugin({
+            "process.env.NODE_DEBUG": JSON.stringify(process.env.NODE_DEBUG), // used by util
+        }),
         new CopyWebpackPlugin({
             patterns:[
                 { from: './favicon.png', to: '.' }
             ],
         }),
         new MiniCssExtractPlugin({
-            filename: devMode ? '[name].css' : '[name].[hash].css',
-            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+            filename: devMode ? '[name].css' : '[name].[contenthash].css',
+            chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
         }),
         new HtmlWebpackPlugin({
             inject: false,
@@ -86,17 +91,8 @@ const prodConfig = {
     mode: 'production',
     optimization: {
         minimizer: [
-            new TerserPlugin({
-                sourceMap: true
-            }),
-            new OptimizeCSSAssetsPlugin({
-                cssProcessorOptions: {
-                    map: {
-                        inline: false,
-                        annotation: true
-                    }
-                }
-            }),
+            new TerserPlugin(),
+            new CssMinimizerPlugin(),
         ]
     },
     devtool: 'source-map',