removing webpack-dev-server, clean up

Signed-off-by: Roman <ixrock@gmail.com>

package.json

@@ -17,7 +17,7 @@
     "debug-build": "concurrently yarn:compile:main yarn:compile:extension-types",
     "dev-run": "nodemon --watch static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
     "dev:main": "yarn run compile:main --watch --progress",
-    "dev:renderer": "yarn run webpack-dev-server --config webpack.renderer.ts --progress",
+    "dev:renderer": "yarn run compile:renderer --watch --progress",
     "dev:extension-types": "yarn run compile:extension-types --watch --progress",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "yarn run webpack --config webpack.main.ts",
@@ -318,7 +318,6 @@
     "@types/url-parse": "^1.4.5",
     "@types/uuid": "^8.3.3",
     "@types/webpack": "^5.28.0",
-    "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.16.3",
     "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
@@ -384,7 +383,6 @@
     "typescript-plugin-css-modules": "^3.4.0",
     "webpack": "^5.67.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3",
     "webpack-node-externals": "^3.0.0",
     "xterm": "^4.15.0",
     "xterm-addon-fit": "^0.5.0"

src/common/getTSLoader.ts

@@ -13,7 +13,7 @@ import type { Options as TSLoaderOptions } from "ts-loader";
  */
 const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) => {
   testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
-  options.transpileOnly ??= true; // requirement for "react-refresh-typescript"
+  options.transpileOnly ??= true;
 
   if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
     console.info(`\n🚀 using esbuild-loader for ts(x)`);

src/common/vars.ts

@@ -38,7 +38,6 @@ export const mainDir = path.join(contextDir, "src/main");
 export const rendererDir = path.join(contextDir, "src/renderer");
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
-export const webpackDevServerPort = 9009;
 
 // Special runtime paths
 defineGlobal("__static", {

src/main/router.ts

@@ -9,13 +9,7 @@ import type http from "http";
 import path from "path";
 import { readFile } from "fs-extra";
 import type { Cluster } from "../common/cluster/cluster";
-import {
-  apiPrefix,
-  appName,
-  isDevelopment,
-  publicPath,
-  webpackDevServerPort,
-} from "../common/vars";
+import { apiPrefix, appName, publicPath } from "../common/vars";
 import {
   HelmApiRoute,
   KubeconfigRoute,
@@ -147,26 +141,6 @@ export class Router {
       }
 
       try {
-        // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
-        const filename = path.basename(req.url);
-        const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
-
-        if (isDevelopment) {
-          logger.info(`[ROUTER]: handling request`, {
-            url: req.url,
-            toWebpackDevServer,
-          });
-
-          if (toWebpackDevServer) {
-            const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
-
-            response.statusCode = 307;
-            response.setHeader("Location", redirectLocation);
-
-            return response.end();
-          }
-        }
-
         const data = await readFile(asset);
 
         response.setHeader("Content-Type", getMimeType(asset));

webpack.main.ts

@@ -15,13 +15,13 @@ const configs: { (): webpack.Configuration }[] = [];
 
 configs.push((): webpack.Configuration => {
   console.info("WEBPACK:main", vars);
-  const { isProduction, mainDir, buildDir, isDevelopment } = vars;
+  const { mainDir, buildDir, isDevelopment } = vars;
 
   return {
     context: __dirname,
     target: "electron-main",
-    mode: isProduction ? "production" : "development",
-    devtool: isDevelopment ? "eval-cheap-module-source-map" : "source-map",
+    mode: isDevelopment ? "development" : "production",
+    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment,
     entry: {
       main: path.resolve(mainDir, "index.ts"),

webpack.renderer.ts

@@ -21,34 +21,16 @@ export function webpackLensRenderer(): webpack.Configuration {
     buildDir,
     htmlTemplate,
     isDevelopment,
-    isProduction,
     publicPath,
     rendererDir,
-    webpackDevServerPort,
   } = vars;
 
   return {
     context: __dirname,
     target: "electron-renderer",
-    devtool: isDevelopment ? "eval-cheap-module-source-map" : "source-map",
-    // @ts-ignore: seems like types from "webpack-dev-server@4.7" not properly merged with "webpack@5"
-    // API: https://webpack.js.org/configuration/dev-server/#usage-via-api
-    devServer: {
-      headers: {
-        "Access-Control-Allow-Origin": "*",
-      },
-      allowedHosts: "all",
-      host: "localhost",
-      port: webpackDevServerPort,
-      static: buildDir, // aka `devServer.contentBase` in webpack@4
-      hot: true,
-      client: {
-        overlay: false, // don't show warnings and errors on top of rendered app view
-        logging: isDevelopment ? "verbose" : "error",
-      },
-    },
     name: "lens-app",
-    mode: isProduction ? "production" : "development",
+    mode: isDevelopment ? "development" : "production",
+    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment,
     entry: {
       [appName]: path.resolve(rendererDir, "bootstrap.tsx"),
@@ -62,12 +44,10 @@ export function webpackLensRenderer(): webpack.Configuration {
       chunkFilename: "chunks/[name].js",
       assetModuleFilename: "assets/[name][ext][query]",
     },
-    stats: {
-      warningsFilter: [
-        /Critical dependency: the request of a dependency is an expression/,
-        /export '.*' was not found in/,
-      ],
-    },
+    ignoreWarnings: [
+      /Critical dependency: the request of a dependency is an expression/,
+      /export '.*' was not found in/,
+    ],
     resolve: {
       extensions: [
         ".js", ".jsx", ".json",
@@ -114,6 +94,7 @@ export function webpackLensRenderer(): webpack.Configuration {
         filename: `${appName}.html`,
         template: htmlTemplate,
         inject: true,
+        hash: true,
       }),
 
       new CircularDependencyPlugin({
@@ -157,7 +138,7 @@ export function cssModulesWebpackRule(
   {
     styleLoader = vars.isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
   } = {}): webpack.RuleSetRule {
-  const { isDevelopment, sassCommonVars } = vars;
+  const { /*isDevelopment,*/ sassCommonVars } = vars;
 
   return {
     test: /\.s?css$/,
@@ -166,7 +147,7 @@ export function cssModulesWebpackRule(
       {
         loader: "css-loader",
         options: {
-          sourceMap: isDevelopment,
+          // sourceMap: isDevelopment,
           modules: {
             auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
             mode: "local", // :local(.selector) by default
@@ -177,7 +158,7 @@ export function cssModulesWebpackRule(
       {
         loader: "postcss-loader",
         options: {
-          sourceMap: isDevelopment,
+          // sourceMap: isDevelopment,
           postcssOptions: {
             plugins: [
               "tailwindcss",
@@ -188,7 +169,7 @@ export function cssModulesWebpackRule(
       {
         loader: "sass-loader",
         options: {
-          sourceMap: isDevelopment,
+          // sourceMap: isDevelopment,
           additionalData: `@import "${path.basename(sassCommonVars)}";`,
           sassOptions: {
             includePaths: [