Upgrade to webpack@5

package.json

@@ -269,7 +269,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@sentry/types": "^6.14.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
@@ -292,12 +292,11 @@
     "@types/lodash": "^4.14.177",
     "@types/marked": "^4.0.1",
     "@types/md5-file": "^4.0.2",
-    "@types/mini-css-extract-plugin": "^0.9.1",
+    "@types/mini-css-extract-plugin": "^2.4.0",
     "@types/mock-fs": "^4.13.1",
     "@types/node": "14.17.33",
     "@types/node-fetch": "^2.5.12",
     "@types/npm": "^2.0.32",
-    "@types/progress-bar-webpack-plugin": "^2.1.2",
     "@types/proper-lockfile": "^4.1.2",
     "@types/randomcolor": "^0.5.6",
     "@types/react": "^17.0.34",
@@ -320,10 +319,10 @@
     "@types/triple-beam": "^1.3.2",
     "@types/url-parse": "^1.4.5",
     "@types/uuid": "^8.3.3",
-    "@types/webpack": "^4.41.32",
-    "@types/webpack-dev-server": "^3.11.6",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.16.3",
-    "@types/webpack-node-externals": "^1.7.1",
+    "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "ansi_up": "^5.1.0",
@@ -348,23 +347,22 @@
     "eslint-plugin-unused-imports": "^1.1.5",
     "file-loader": "^6.2.0",
     "flex.box": "^3.4.4",
-    "fork-ts-checker-webpack-plugin": "^5.2.1",
+    "fork-ts-checker-webpack-plugin": "^6.5.0",
     "hoist-non-react-statics": "^3.3.2",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "include-media": "^1.4.9",
     "jest": "26.6.3",
     "jest-canvas-mock": "^2.3.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-extended": "^1.0.18",
     "make-plural": "^6.2.2",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.5.2",
     "node-gyp": "7.1.2",
     "node-loader": "^1.0.3",
     "nodemon": "^2.0.14",
     "playwright": "^1.17.1",
     "postcss": "^8.4.5",
     "postcss-loader": "^4.3.0",
-    "progress-bar-webpack-plugin": "^2.1.0",
     "randomcolor": "^0.6.2",
     "raw-loader": "^4.0.2",
     "react-beautiful-dnd": "^13.1.0",
@@ -385,15 +383,15 @@
     "type-fest": "^1.0.2",
     "typed-emitter": "^1.4.0",
     "typedoc": "0.22.10",
-    "typedoc-plugin-markdown": "^3.11.3",
+    "typedoc-plugin-markdown": "^3.11.12",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.5.2",
     "typescript-plugin-css-modules": "^3.4.0",
     "url-loader": "^4.1.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
-    "webpack-node-externals": "^1.7.2",
+    "webpack": "^5.66.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/main/router.ts

@@ -9,7 +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, publicPath, isDevelopment, webpackDevServerPort } from "../common/vars";
+import { apiPrefix, appName, publicPath } from "../common/vars";
 import { HelmApiRoute, KubeconfigRoute, MetricsRoute, PortForwardRoute, ResourceApplierApiRoute, VersionRoute } from "./routes";
 import logger from "./logger";
 
@@ -110,7 +110,7 @@ export class Router {
     };
   }
 
-  protected static async handleStaticFile({ params, response, raw: { req }}: LensApiRequest): Promise<void> {
+  protected static async handleStaticFile({ params, response }: LensApiRequest): Promise<void> {
     let filePath = params.path;
 
     for (let retryCount = 0; retryCount < 5; retryCount += 1) {
@@ -124,18 +124,20 @@ export class Router {
       }
 
       try {
-        const filename = path.basename(req.url);
+        // const filename = path.basename(req.url);
         // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
-        const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
-
-        if (isDevelopment && toWebpackDevServer) {
-          const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
-
-          response.statusCode = 307;
-          response.setHeader("Location", redirectLocation);
-
-          return response.end();
-        }
+        // const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
+        //
+        // if (isDevelopment /*&& toWebpackDevServer*/) {
+        //   const redirectLocation = `http://0.0.0.0:${webpackDevServerPort}${req.url}`;
+        //
+        //   logger.info(`[ROUTER]: redirecting to dev-server url: ${redirectLocation}`);
+        //
+        //   response.statusCode = 307;
+        //   response.setHeader("Location", redirectLocation);
+        //
+        //   return response.end();
+        // }
 
         const data = await readFile(asset);
 

webpack.extensions.ts

@@ -6,9 +6,15 @@
 
 import path from "path";
 import type webpack from "webpack";
-import { sassCommonVars, isDevelopment, isProduction } from "./src/common/vars";
+import * as vars from "./src/common/vars";
+import {
+  cssModulesWebpackRule,
+  filesAndIconsWebpackRule,
+  fontsLoaderWebpackRule,
+} from "./webpack.renderer";
 
 export default function generateExtensionTypes(): webpack.Configuration {
+  const { isDevelopment, isProduction } = vars;
   const entry = "./src/extensions/extension-api.ts";
   const outDir = "./src/extensions/npm/extensions/dist";
 
@@ -48,47 +54,9 @@ export default function generateExtensionTypes(): webpack.Configuration {
             },
           },
         },
-        // for src/renderer/components/fonts/roboto-mono-nerd.ttf
-        // in src/renderer/components/dock/terminal.ts 95:25-65
-        {
-          test: /\.(ttf|eot|woff2?)$/,
-          use: {
-            loader: "url-loader",
-            options: {
-              name: "fonts/[name].[ext]",
-            },
-          },
-        },
-        {
-          test: /\.(jpg|png|svg|map|ico)$/,
-          use: {
-            loader: "file-loader",
-            options: {
-              name: "images/[name]-[hash:6].[ext]",
-              esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (react)
-            },
-          },
-        },
-        // for import scss files
-        {
-          test: /\.s?css$/,
-          use: [
-            "style-loader",
-            "css-loader",
-            "postcss-loader",
-            {
-              loader: "sass-loader",
-              options: {
-                additionalData: `@import "${path.basename(sassCommonVars)}";`,
-                sassOptions: {
-                  includePaths: [
-                    path.dirname(sassCommonVars),
-                  ],
-                },
-              },
-            },
-          ],
-        },
+        fontsLoaderWebpackRule(),
+        filesAndIconsWebpackRule(),
+        cssModulesWebpackRule({ styleLoader: "style-loader" }),
       ],
     },
     resolve: {

webpack.main.ts

@@ -6,9 +6,7 @@
 import path from "path";
 import type webpack from "webpack";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
-import { isProduction, mainDir, buildDir, isDevelopment } from "./src/common/vars";
 import nodeExternals from "webpack-node-externals";
-import ProgressBarPlugin from "progress-bar-webpack-plugin";
 import * as vars from "./src/common/vars";
 import getTSLoader from "./src/common/getTSLoader";
 import CircularDependencyPlugin from "circular-dependency-plugin";
@@ -17,12 +15,13 @@ const configs: { (): webpack.Configuration }[] = [];
 
 configs.push((): webpack.Configuration => {
   console.info("WEBPACK:main", vars);
+  const { isProduction, mainDir, buildDir, isDevelopment } = vars;
 
   return {
     context: __dirname,
     target: "electron-main",
     mode: isProduction ? "production" : "development",
-    devtool: isProduction ? "source-map" : "cheap-eval-source-map",
+    devtool: isDevelopment ? "hidden-source-map" : "source-map",
     cache: isDevelopment,
     entry: {
       main: path.resolve(mainDir, "index.ts"),
@@ -47,7 +46,6 @@ configs.push((): webpack.Configuration => {
       ],
     },
     plugins: [
-      new ProgressBarPlugin(),
       new ForkTsCheckerPlugin(),
 
       new CircularDependencyPlugin({