Add webpack-dev-server (for hot module replacement) to serve statics, add HardSourceWebpackPlugin to improve re-compiling speed

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

package.json

@@ -15,7 +15,7 @@
     "dev-build": "concurrently yarn:compile:*",
     "dev-run": "nodemon --watch static/build/main.js --exec \"electron --inspect .\"",
     "dev:main": "yarn compile:main --watch",
-    "dev:renderer": "yarn compile:renderer --watch",
+    "dev:renderer": "yarn webpack-dev-server --config webpack.renderer.ts",
     "dev:extension-types": "yarn compile:extension-types --watch",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "webpack --config webpack.main.ts",
@@ -279,6 +279,7 @@
     "@types/electron-window-state": "^2.0.34",
     "@types/fs-extra": "^9.0.1",
     "@types/hapi": "^18.0.3",
+    "@types/hard-source-webpack-plugin": "^1.0.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/html-webpack-plugin": "^3.2.3",
     "@types/http-proxy": "^1.17.4",
@@ -315,6 +316,7 @@
     "@types/uuid": "^8.0.0",
     "@types/webdriverio": "^4.13.0",
     "@types/webpack": "^4.41.17",
+    "@types/webpack-dev-server": "^3.11.1",
     "@types/webpack-env": "^1.15.2",
     "@types/webpack-node-externals": "^1.7.1",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
@@ -339,6 +341,7 @@
     "file-loader": "^6.0.0",
     "flex.box": "^3.4.4",
     "fork-ts-checker-webpack-plugin": "^5.0.0",
+    "hard-source-webpack-plugin": "^0.13.1",
     "hoist-non-react-statics": "^3.3.2",
     "html-webpack-plugin": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
@@ -381,6 +384,7 @@
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0",
     "webpack-node-externals": "^1.7.2",
     "xterm": "^4.6.0",
     "xterm-addon-fit": "^0.4.0"

webpack.renderer.ts

@@ -6,6 +6,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import TerserPlugin from "terser-webpack-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin"
 import ProgressBarPlugin from "progress-bar-webpack-plugin";
+import HardSourceWebpackPlugin from 'hard-source-webpack-plugin';
 
 export default [
   webpackLensRenderer
@@ -19,6 +20,13 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     context: __dirname,
     target: "electron-renderer",
     devtool: "source-map", // todo: optimize in dev-mode with webpack.SourceMapDevToolPlugin
+    devServer: {
+      contentBase: buildDir,
+      port: 9000,
+      host: "localhost",
+      hot: true,
+      disableHostCheck: true,
+    },
     name: "lens-app",
     mode: isProduction ? "production" : "development",
     cache: isDevelopment,
@@ -172,6 +180,8 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
       new MiniCssExtractPlugin({
         filename: "[name].css",
       }),
+
+      new HardSourceWebpackPlugin()
     ],
   }
 }