build: Switch to webpack-plugin-serve

package.json

@@ -6,9 +6,9 @@
   "license": "MIT",
   "main": "./dist/main.js",
   "scripts": {
-    "start-main-dev": "webpack --watch --config=webpack.config.main.ts",
-    "start-renderer-dev": "webpack-dev-server --config=webpack.config.renderer.ts",
-    "start-website-dev": "webpack-dev-server --config=webpack.config.website.ts",
+    "start-main-dev": "webpack --config=webpack.config.main.ts",
+    "start-renderer-dev": "webpack --config=webpack.config.renderer.ts",
+    "start-website-dev": "webpack --config=webpack.config.website.ts",
     "start": "electron dist/main.js",
     "build-main": "cross-env NODE_ENV=production webpack --config=webpack.config.main.ts",
     "build-renderer": "cross-env NODE_ENV=production webpack --config=webpack.config.renderer.ts",
@@ -44,7 +44,8 @@
   },
   "devDependencies": {
     "@evanpurkhiser/eslint-config": "^0.9.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "https://github.com/pmmmwh/react-refresh-webpack-plugin#main",
+    "@types/webpack-plugin-serve": "^1.2.0",
     "electron": "^11.1.1",
     "electron-builder": "^22.3.2",
     "eslint": "^7.14.0",
@@ -55,7 +56,7 @@
     "prettier": "^2.0.5",
     "typescript-styled-plugin": "^0.15.0",
     "webpack-cli": "^4.3.0",
-    "webpack-dev-server": "4.0.0-beta.0"
+    "webpack-plugin-serve": "^1.2.1"
   },
   "dependencies": {
     "@babel/core": "^7.12.9",
@@ -100,7 +101,6 @@
     "@types/socket.io-client": "^1.4.33",
     "@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",
     "@types/webpack-merge": "^4.1.5",
     "@vercel/node": "^1.8.4",
@@ -117,7 +117,7 @@
     "fork-ts-checker-webpack-plugin": "^6.0.3",
     "form-data": "^3.0.0",
     "framer-motion": "^3.1.1",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.0.0-beta.1",
     "http-proxy": "^1.18.1",
     "image-webpack-loader": "^7.0.1",
     "ip-address": "^7.0.1",

webpack.config.base.ts

@@ -16,6 +16,7 @@ const envConfig = {
 
 export const baseConfig: webpack.Configuration = {
   mode: IS_PROD ? 'production' : 'development',
+  watch: process.env.NODE_ENV !== 'production',
 
   output: {
     path: path.resolve(__dirname, 'dist'),

webpack.config.renderer.ts

@@ -3,15 +3,26 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 import merge from 'webpack-merge';
+import {WebpackPluginServe} from 'webpack-plugin-serve';
 
 import path from 'path';
 
 import {baseConfig} from './webpack.config.base';
 
+const serve = new WebpackPluginServe({
+  port: 2003,
+  static: path.join(__dirname, 'dist'),
+  historyFallback: {
+    verbose: true,
+    rewrites: [{from: /^\/overlay\/[^.]+$/, to: '/overlay/index.html'}],
+  },
+  progress: 'minimal',
+});
+
 const rendererConfig: webpack.Configuration = merge(baseConfig, {
   target: 'electron-renderer',
   entry: {
-    app: './src/renderer/app.tsx',
+    app: ['./src/renderer/app.tsx', 'webpack-plugin-serve/client'],
   },
   optimization: {minimize: false},
   module: {
@@ -35,30 +46,18 @@ const rendererConfig: webpack.Configuration = merge(baseConfig, {
     ],
   },
   plugins: [
-    new HtmlWebpackPlugin({title: 'Prolink Tools', filename: 'app.html'}),
+    new HtmlWebpackPlugin({title: 'Prolink Tools'}),
     new ReactRefreshWebpackPlugin(),
     new ForkTsCheckerWebpackPlugin({
       issue: {include: [{file: 'src/renderer/**/*'}, {file: 'src/shared/**/*'}]},
     }),
+    serve,
   ],
-  devServer: {
-    port: 2003,
-    // 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,
-      verbose: true,
-      rewrites: [{from: /^\/overlay\//, to: '/overlay/index.html'}],
-    },
-  },
 });
 
 const overlayConfig: webpack.Configuration = merge(baseConfig, {
   entry: {
-    overlay: './src/overlay/app.tsx',
+    overlay: ['./src/overlay/app.tsx', 'webpack-plugin-serve/client'],
   },
   output: {
     path: path.resolve(__dirname, 'dist/overlay'),
@@ -90,6 +89,7 @@ const overlayConfig: webpack.Configuration = merge(baseConfig, {
     new ForkTsCheckerWebpackPlugin({
       issue: {include: [{file: 'src/overlay/**/*'}, {file: 'src/shared/**/*'}]},
     }),
+    serve.attach(),
   ],
 });
 

webpack.config.website.ts

@@ -3,14 +3,15 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 import merge from 'webpack-merge';
+import {WebpackPluginServe} from 'webpack-plugin-serve';
 
 import path from 'path';
 
 import {baseConfig} from './webpack.config.base';
 
 const websiteConfig: webpack.Configuration = merge(baseConfig, {
   entry: {
-    app: './src/website/app.tsx',
+    app: ['./src/website/app.tsx', 'webpack-plugin-serve/client'],
   },
   output: {
     path: path.resolve(__dirname, 'dist/website'),
@@ -45,12 +46,14 @@ const websiteConfig: webpack.Configuration = merge(baseConfig, {
     new ForkTsCheckerWebpackPlugin({
       issue: {include: [{file: 'src/website/**/*'}, {file: 'src/shared/**/*'}]},
     }),
+    new WebpackPluginServe({
+      port: 2004,
+      static: path.join(__dirname, 'dist/website'),
+      historyFallback: {
+        verbose: true,
+      },
+    }),
   ],
-  devServer: {
-    port: 2004,
-    hot: true,
-    headers: {'Access-Control-Allow-Origin': '*'},
-  },
 });
 
 export default websiteConfig;