[CLEANUP chore-dependencies] Major npm dependency upgrades

package.json

@@ -29,7 +29,7 @@
     "mock:pagerduty_api": "mockserver -m test/mocks",
     "build": "webpack --config webpack.dev.js",
     "build:watch": "webpack --watch --config webpack.dev.js",
-    "build:prod": "NODE_ENV=production webpack --config webpack.prod.js --display-modules",
+    "build:prod": "NODE_ENV=production webpack --config webpack.prod.js",
     "app": "node -r esm src/pagerbeauty.js",
     "app:watch": "nodemon -r esm src/pagerbeauty.js",
     "app:prod": "NODE_ENV=production node -r esm src/pagerbeauty.js",
@@ -43,7 +43,7 @@
     "koa-mount": "^4.0.0",
     "koa-route": "^3.2.0",
     "koa-static": "^5.0.0",
-    "koa-views": "^6.2.0",
+    "koa-views": "^7.0.1",
     "luxon": "^1.26.0",
     "node-fetch": "^2.6.0",
     "nunjucks": "^3.2.3",
@@ -63,33 +63,35 @@
     "chai-as-promised": "^7.1.1",
     "codecov": "^3.8.1",
     "conventional-changelog-ember": "^2.0.9",
-    "css-loader": "^3.4.2",
+    "core-js": "3",
+    "css-loader": "^5.2.4",
+    "css-minimizer-webpack-plugin": "^2.0.0",
     "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-ava": "^10.0.0",
+    "eslint-plugin-ava": "^12.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "faucet": "^0.0.1",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.6.0",
     "mockserver": "^3.0.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^5.0.0",
     "nodemon": "^2.0.7",
     "nyc": "^15.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "prop-types": "^15.7.2",
     "puppeteer-core": "5.0.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "sass-loader": "^9.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sass-loader": "^11.0.1",
     "semantic-release": "^17.4.2",
-    "sinon": "^9.0.2",
+    "sinon": "^10.0.0",
     "sinon-chai": "^3.6.0",
-    "style-loader": "^1.1.3",
+    "style-loader": "^2.0.0",
     "tap-xunit": "^2.4.1",
-    "webpack": "^4.33.0",
-    "webpack-cli": "^3.3.3",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.6.0",
     "webpack-merge": "^5.7.3"
   },
   "nodemonConfig": {
@@ -104,7 +106,8 @@
       [
         "@babel/preset-env",
         {
-          "useBuiltIns": "usage"
+          "useBuiltIns": "usage",
+          "corejs": "3.11"
         }
       ],
       "@babel/preset-react"

webpack.prod.js

@@ -1,18 +1,29 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const { merge } = require('webpack-merge');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 /* eslint-enable */
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
   mode: 'production',
-  plugins: [
-    new OptimizeCssAssetsPlugin({
-      cssProcessorPluginOptions: {
-        preset: ['default', { discardComments: { removeAll: true } }],
-      },
-    }),
-  ],
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      }),
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: [
+            'default',
+            {
+              discardComments: { removeAll: true },
+            },
+          ],
+        },
+      }),
+    ],
+  },
   output: {
     path: `${__dirname}/assets/dist-prod`,
   },