Upgrade webpack

package.json

@@ -54,8 +54,8 @@
     "null-loader": "^4.0.0",
     "prettier": "^2.0.5",
     "typescript-styled-plugin": "^0.15.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.4.1"
+    "webpack-cli": "^4.3.0",
+    "webpack-dev-server": "4.0.0-beta.0"
   },
   "dependencies": {
     "@babel/core": "^7.12.9",
@@ -96,7 +96,7 @@
     "@types/semver": "^7.3.3",
     "@types/socket.io": "^2.1.11",
     "@types/socket.io-client": "^1.4.33",
-    "@types/terser-webpack-plugin": "^4.1.0",
+    "@types/terser-webpack-plugin": "^5.0.2",
     "@types/webdriverio": "^5.0.0",
     "@types/webpack-dev-server": "^3.10.1",
     "@types/webpack-env": "^1.13.3",
@@ -147,12 +147,12 @@
     "short-uuid": "^4.1.0",
     "socket.io": "^2.3.0",
     "socket.io-client": "^2.3.0",
-    "source-map-loader": "^1.0.0",
-    "terser-webpack-plugin": "^4.1.0",
+    "source-map-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.0.3",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.2",
-    "webpack": "^4.44.1",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.11.1",
+    "webpack-merge": "^5.7.3"
   },
   "volta": {
     "node": "14.3.0",

webpack.config.base.ts

@@ -48,10 +48,6 @@ export const baseConfig: webpack.Configuration = {
 
   plugins: [new webpack.EnvironmentPlugin(envConfig)],
 
-  devServer: {
-    hotOnly: true,
-  },
-
   module: {
     rules: [
       {

webpack.config.main.ts

@@ -1,10 +1,10 @@
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import webpack from 'webpack';
-import webpackMerge from 'webpack-merge';
+import merge from 'webpack-merge';
 
 import {baseConfig} from './webpack.config.base';
 
-const config: webpack.Configuration = webpackMerge.smart(baseConfig, {
+const config: webpack.Configuration = merge(baseConfig, {
   target: 'electron-main',
   entry: {
     main: './src/main/main.ts',

webpack.config.renderer.ts

@@ -2,13 +2,13 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
-import webpackMerge from 'webpack-merge';
+import merge from 'webpack-merge';
 
 import path from 'path';
 
 import {baseConfig} from './webpack.config.base';
 
-const rendererConfig: webpack.Configuration = webpackMerge.smart(baseConfig, {
+const rendererConfig: webpack.Configuration = merge(baseConfig, {
   target: 'electron-renderer',
   entry: {
     app: './src/renderer/app.tsx',
@@ -43,10 +43,10 @@ const rendererConfig: webpack.Configuration = webpackMerge.smart(baseConfig, {
   ],
   devServer: {
     port: 2003,
-    compress: true,
-    stats: 'errors-only',
-    inline: true,
-    hot: true,
+    // This can be removed once the types are released for webpack-dev-server 4.0
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    hot: 'only',
     headers: {'Access-Control-Allow-Origin': '*'},
     historyApiFallback: {
       disableDotRule: true,
@@ -56,21 +56,22 @@ const rendererConfig: webpack.Configuration = webpackMerge.smart(baseConfig, {
   },
 });
 
-const overlayConfig: webpack.Configuration = webpackMerge.smart(baseConfig, {
+const overlayConfig: webpack.Configuration = merge(baseConfig, {
   entry: {
     overlay: './src/overlay/app.tsx',
   },
   output: {
     path: path.resolve(__dirname, 'dist/overlay'),
   },
-  optimization: {minimize: false},
-  node: {
-    fs: 'empty',
-    dgram: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    console: true,
+  resolve: {
+    fallback: {
+      fs: 'empty',
+      dgram: 'empty',
+      net: 'empty',
+      tls: 'empty',
+    },
   },
+  optimization: {minimize: false},
   module: {
     rules: [
       {

webpack.config.website.ts

@@ -2,13 +2,13 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
-import webpackMerge from 'webpack-merge';
+import merge from 'webpack-merge';
 
 import path from 'path';
 
 import {baseConfig} from './webpack.config.base';
 
-const websiteConfig: webpack.Configuration = webpackMerge.smart(baseConfig, {
+const websiteConfig: webpack.Configuration = merge(baseConfig, {
   entry: {
     app: './src/website/app.tsx',
   },
@@ -48,9 +48,6 @@ const websiteConfig: webpack.Configuration = webpackMerge.smart(baseConfig, {
   ],
   devServer: {
     port: 2004,
-    compress: true,
-    stats: 'errors-only',
-    inline: true,
     hot: true,
     headers: {'Access-Control-Allow-Origin': '*'},
   },