Revert "Upgrade to webpack@5 (#4725)" (#4872)

__mocks__/imageMock.ts

@@ -3,4 +3,4 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export default ""; // mostly path to bundled file or data-url (webpack)
+export default {};

extensions/kube-object-event-status/package.json

@@ -18,8 +18,8 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "ts-loader": "latest",
+    "ts-loader": "^8.0.4",
-    "typescript": "latest",
+    "typescript": "^4.3.2",
-    "webpack": "latest"
+    "webpack": "^4.46.0"
   }
 }

extensions/metrics-cluster-feature/package.json

@@ -19,10 +19,10 @@
   ],
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "jest": "^26.6.3",
     "semver": "^7.3.2",
-    "jest": "latest",
+    "ts-loader": "^8.0.4",
-    "ts-loader": "latest",
+    "typescript": "^4.3.2",
-    "typescript": "latest",
+    "webpack": "^4.44.2"
-    "webpack": "latest"
   }
 }

extensions/node-menu/package.json

@@ -18,9 +18,9 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "latest",
+    "jest": "^26.6.3",
-    "ts-loader": "latest",
+    "ts-loader": "^8.0.4",
-    "typescript": "latest",
+    "typescript": "^4.3.2",
-    "webpack": "latest"
+    "webpack": "^4.46.0"
   }
 }

extensions/pod-menu/package.json

@@ -18,9 +18,9 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "latest",
+    "jest": "^26.6.3",
-    "ts-loader": "latest",
+    "ts-loader": "^8.0.4",
-    "typescript": "latest",
+    "typescript": "^4.3.2",
-    "webpack": "latest"
+    "webpack": "^4.46.0"
   }
 }

package.json

@@ -16,9 +16,9 @@
     "dev-build": "concurrently yarn:compile:*",
     "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:main": "yarn run compile:main --watch",
-    "dev:renderer": "yarn run compile:renderer --watch --progress",
+    "dev:renderer": "yarn run webpack-dev-server --config webpack.renderer.ts",
-    "dev:extension-types": "yarn run compile:extension-types --watch --progress",
+    "dev:extension-types": "yarn run compile:extension-types --watch",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "yarn run webpack --config webpack.main.ts",
     "compile:renderer": "yarn run webpack --config webpack.renderer.ts",
@@ -62,7 +62,7 @@
     },
     "moduleNameMapper": {
       "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
-      "\\.(svg|png|jpg|eot|woff2?|ttf)$": "<rootDir>/__mocks__/assetMock.ts"
+      "\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts"
     },
     "modulePathIgnorePatterns": [
       "<rootDir>/dist",
@@ -268,7 +268,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.5.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@sentry/types": "^6.14.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
@@ -291,11 +291,12 @@
     "@types/lodash": "^4.14.177",
     "@types/marked": "^4.0.1",
     "@types/md5-file": "^4.0.2",
-    "@types/mini-css-extract-plugin": "^2.4.0",
+    "@types/mini-css-extract-plugin": "^0.9.1",
     "@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",
@@ -318,10 +319,10 @@
     "@types/triple-beam": "^1.3.2",
     "@types/url-parse": "^1.4.5",
     "@types/uuid": "^8.3.3",
-    "@types/webpack": "^5.28.0",
+    "@types/webpack": "^4.41.32",
-    "@types/webpack-dev-server": "^4.7.2",
+    "@types/webpack-dev-server": "^3.11.6",
     "@types/webpack-env": "^1.16.3",
-    "@types/webpack-node-externals": "^2.5.3",
+    "@types/webpack-node-externals": "^1.7.1",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "ansi_up": "^5.1.0",
@@ -329,24 +330,25 @@
     "circular-dependency-plugin": "^5.2.2",
     "color": "^3.2.1",
     "concurrently": "^5.3.0",
-    "css-loader": "^6.5.1",
+    "css-loader": "^5.2.7",
     "deepdash": "^5.3.9",
     "dompurify": "^2.3.4",
     "electron": "^14.2.4",
     "electron-builder": "^22.14.5",
     "electron-notarize": "^0.3.0",
     "esbuild": "^0.13.15",
-    "esbuild-loader": "^2.18.0",
+    "esbuild-loader": "^2.16.0",
     "eslint": "^8.7.0",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "file-loader": "^6.2.0",
     "flex.box": "^3.4.4",
-    "fork-ts-checker-webpack-plugin": "^6.5.0",
+    "fork-ts-checker-webpack-plugin": "^5.2.1",
     "hoist-non-react-statics": "^3.3.2",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^4.5.2",
     "ignore-loader": "^0.1.2",
     "include-media": "^1.4.9",
     "jest": "26.6.3",
@@ -354,41 +356,43 @@
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-extended": "^1.0.18",
     "make-plural": "^6.2.2",
-    "mini-css-extract-plugin": "^2.5.2",
+    "mini-css-extract-plugin": "^1.6.2",
     "node-gyp": "7.1.2",
-    "node-loader": "^2.0.0",
+    "node-loader": "^1.0.3",
     "nodemon": "^2.0.15",
     "playwright": "^1.17.1",
     "postcss": "^8.4.5",
-    "postcss-loader": "^6.2.1",
+    "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",
-    "react-refresh": "^0.11.0",
+    "react-refresh": "^0.9.0",
-    "react-refresh-typescript": "^2.0.3",
     "react-router-dom": "^5.3.0",
     "react-select": "3.2.0",
     "react-select-event": "^5.1.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6",
     "sass": "^1.45.1",
-    "sass-loader": "^12.4.0",
+    "sass-loader": "^10.2.0",
     "sharp": "^0.29.3",
-    "style-loader": "^3.3.1",
+    "style-loader": "^2.0.0",
     "tailwindcss": "^3.0.7",
     "ts-jest": "26.5.6",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^7.0.5",
     "ts-node": "^10.4.0",
     "type-fest": "^1.0.2",
     "typed-emitter": "^1.4.0",
     "typedoc": "0.22.10",
-    "typedoc-plugin-markdown": "^3.11.12",
+    "typedoc-plugin-markdown": "^3.11.3",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.5.2",
     "typescript-plugin-css-modules": "^3.4.0",
-    "webpack": "^5.67.0",
+    "url-loader": "^4.1.1",
-    "webpack-cli": "^4.9.1",
+    "webpack": "^4.46.0",
-    "webpack-dev-server": "^4.7.4",
+    "webpack-cli": "^3.3.12",
-    "webpack-node-externals": "^3.0.0",
+    "webpack-dev-server": "^3.11.3",
+    "webpack-node-externals": "^1.7.2",
     "xterm": "^4.15.0",
     "xterm-addon-fit": "^0.5.0"
   }

src/common/catalog-entities/kubernetes-cluster.ts

@@ -11,7 +11,6 @@ import { app } from "electron";
 import type { CatalogEntitySpec } from "../catalog/catalog-entity";
 import { IpcRendererNavigationEvents } from "../../renderer/navigation/events";
 import { requestClusterActivation, requestClusterDisconnection } from "../../renderer/ipc";
-import KubeClusterCategoryIcon from "./icons/kubernetes.svg";
 
 export interface KubernetesClusterPrometheusMetrics {
   address?: {
@@ -139,7 +138,7 @@ class KubernetesClusterCategory extends CatalogCategory {
   public readonly kind = "CatalogCategory";
   public metadata = {
     name: "Clusters",
-    icon: KubeClusterCategoryIcon,
+    icon: require(`!!raw-loader!./icons/kubernetes.svg`).default, // eslint-disable-line
   };
   public spec: CatalogCategorySpec = {
     group: "entity.k8slens.dev",

src/common/catalog/catalog-category-registry.ts

@@ -3,10 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { once } from "lodash";
+import { action, computed, observable, makeObservable } from "mobx";
-import { action, computed, makeObservable, observable } from "mobx";
+import { Disposer, ExtendedMap, iter } from "../utils";
 import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
-import { ExtendedMap, iter, type Disposer } from "../utils";
+import { once } from "lodash";
 
 export type CategoryFilter = (category: CatalogCategory) => any;
 

src/common/getTSLoader.ts

@@ -4,17 +4,18 @@
  */
 
 import esbuild from "esbuild";
-import type { Options as TSLoaderOptions } from "ts-loader";
 
 /**
  * A function returning webpack ts/tsx loader
+ *
  * depends on env LENS_DEV_USE_ESBUILD_LOADER to use esbuild-loader (faster) or good-old ts-loader
+ *
+ * @param testRegExp - the regex for webpack to conditional find the files
  * @returns ts/tsx webpack loader configuration object
  */
-const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) => {
+const getTSLoader = (
-  testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
+  testRegExp: RegExp, transpileOnly = true,
-  options.transpileOnly ??= true;
+) => {
-
   if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
     console.info(`\n🚀 using esbuild-loader for ts(x)`);
 
@@ -34,7 +35,9 @@ const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp
     exclude: /node_modules/,
     use: {
       loader: "ts-loader",
-      options,
+      options: {
+        transpileOnly,
+      },
     },
   };
 };

src/common/user-store/user-store.ts

@@ -12,8 +12,7 @@ import { getAppVersion } from "../utils/app-version";
 import { kubeConfigDefaultPath } from "../kube-helpers";
 import { appEventBus } from "../app-event-bus/event-bus";
 import { getOrInsertSet, toggle, toJS } from "../../renderer/utils";
-import { DESCRIPTORS } from "./preferences-helpers";
+import { DESCRIPTORS, EditorConfiguration, ExtensionRegistry, KubeconfigSyncValue, UserPreferencesModel, TerminalConfig } from "./preferences-helpers";
-import type { EditorConfiguration, ExtensionRegistry, KubeconfigSyncValue, UserPreferencesModel, TerminalConfig } from "./preferences-helpers";
 import logger from "../../main/logger";
 
 export interface UserStoreModel {

src/main/catalog/catalog-entity-registry.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, computed, type IComputedValue, type IObservableArray, makeObservable, observable } from "mobx";
+import { action, computed, IComputedValue, IObservableArray, makeObservable, observable } from "mobx";
 import { CatalogCategoryRegistry, catalogCategoryRegistry, CatalogEntity, CatalogEntityConstructor } from "../../common/catalog";
 import { iter } from "../../common/utils";
 

src/main/index.ts

@@ -10,7 +10,7 @@ import * as Mobx from "mobx";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, dialog, powerMonitor } from "electron";
-import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -176,7 +176,7 @@ di.runSetups().then(() => {
 
     try {
       logger.info("🔌 Starting LensProxy");
-      await lensProxy.listen(); // lensProxy.port available
+      await lensProxy.listen();
     } catch (error) {
       dialog.showErrorBox("Lens Error", `Could not start proxy: ${error?.message || "unknown error"}`);
 
@@ -228,16 +228,6 @@ di.runSetups().then(() => {
     logger.info("🖥️  Starting WindowManager");
     const windowManager = WindowManager.createInstance();
 
-    // Override main content view url to local webpack-dev-server to support HMR / live-reload
-    if (isDevelopment) {
-      const { createDevServer } = await import("../../webpack.dev-server");
-      const devServer = createDevServer(lensProxy.port);
-
-      windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
-
-      await devServer.start();
-    }
-
     const menuItems = di.inject(electronMenuItemsInjectable);
     const trayMenuItems = di.inject(trayMenuItemsInjectable);
 

src/main/menu/menu.ts

@@ -9,7 +9,7 @@ import { appName, isMac, isWindows, docsUrl, supportUrl, productName } from "../
 import logger from "../logger";
 import { exitApp } from "../exit-app";
 import { broadcastMessage } from "../../common/ipc";
-import packageJson from "../../../package.json";
+import * as packageJson from "../../../package.json";
 import { preferencesURL, extensionsURL, addClusterURL, catalogURL, welcomeURL } from "../../common/routes";
 import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
 import type { MenuRegistration } from "./menu-registration";

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 } from "../common/vars";
+import { apiPrefix, appName, publicPath, isDevelopment, webpackDevServerPort } 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 }: LensApiRequest): Promise<void> {
+  protected static async handleStaticFile({ params, response, raw: { req }}: LensApiRequest): Promise<void> {
     let filePath = params.path;
 
     for (let retryCount = 0; retryCount < 5; retryCount += 1) {
@@ -124,6 +124,19 @@ export class Router {
       }
 
       try {
+        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 data = await readFile(asset);
 
         response.setHeader("Content-Type", getMimeType(asset));

src/main/window-manager.ts

@@ -28,8 +28,6 @@ export interface SendToViewArgs {
 }
 
 export class WindowManager extends Singleton {
-  public mainContentUrl = `http://localhost:${LensProxy.getInstance().port}`;
-
   protected mainWindow: BrowserWindow;
   protected splashWindow: BrowserWindow;
   protected windowState: windowStateKeeper.State;
@@ -43,6 +41,10 @@ export class WindowManager extends Singleton {
     this.bindEvents();
   }
 
+  get mainUrl() {
+    return `http://localhost:${LensProxy.getInstance().port}`;
+  }
+
   private async initMainWindow(showSplash: boolean) {
     // Manage main window size and position with state persistence
     if (!this.windowState) {
@@ -140,8 +142,8 @@ export class WindowManager extends Singleton {
 
     try {
       if (showSplash) await this.showSplash();
-      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainContentUrl} ...`);
+      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainUrl} ...`);
-      await this.mainWindow.loadURL(this.mainContentUrl);
+      await this.mainWindow.loadURL(this.mainUrl);
     } catch (error) {
       logger.error("Loading main window failed", { error });
       dialog.showErrorBox("ERROR!", error.toString());

src/renderer/api/catalog-entity-registry.ts

@@ -9,7 +9,7 @@ import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegis
 import "../../common/catalog-entities";
 import type { Cluster } from "../../common/cluster/cluster";
 import { ClusterStore } from "../../common/cluster-store/cluster-store";
-import { type Disposer, iter } from "../utils";
+import { Disposer, iter } from "../utils";
 import { once } from "lodash";
 import logger from "../../common/logger";
 import { CatalogRunEvent } from "../../common/catalog/catalog-run-event";

src/renderer/bootstrap.tsx

@@ -136,14 +136,7 @@ export async function bootstrap(di: DependencyInjectionContainer) {
     App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
   }
 
-  try {
   await initializeApp(rootElem);
-  } catch (error) {
-    console.error(`[BOOTSTRAP]: view initialization error: ${error}`, {
-      origin: location.href,
-      isTopFrameView: process.isMainFrame,
-    });
-  }
 
   render(
     <DiContextProvider value={{ di }}>

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -25,7 +25,7 @@ interface Props<T extends CatalogEntity> {
 @observer
 export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
   categoryIcon(category: CatalogCategory) {
-    if (Icon.isSvg(category.metadata.icon)) {
+    if (category.metadata.icon.includes("<svg")) {
       return <Icon svg={category.metadata.icon} smallest />;
     } else {
       return <Icon material={category.metadata.icon} smallest />;

src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx

@@ -65,7 +65,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
         continue;
       }
 
-      const key = Icon.isSvg(menuItem.icon) ? "svg" : "material";
+      const key = menuItem.icon.includes("<svg") ? "svg" : "material";
 
       items.push(
         <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>

src/renderer/components/+catalog/catalog-menu.tsx

@@ -28,7 +28,7 @@ function getCategoryIcon(category: CatalogCategory) {
   const { icon } = category.metadata ?? {};
 
   if (typeof icon === "string") {
-    return Icon.isSvg(icon)
+    return icon.includes("<svg")
       ? <Icon small svg={icon}/>
       : <Icon small material={icon}/>;
   }

src/renderer/components/+cluster/cluster-overview-store/cluster-overview-store.ts

@@ -5,9 +5,9 @@
 
 import { action, observable, reaction, when, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
-import { Cluster, clusterApi, getMetricsByNodeNames, type IClusterMetrics } from "../../../../common/k8s-api/endpoints";
+import { Cluster, clusterApi, getMetricsByNodeNames, IClusterMetrics } from "../../../../common/k8s-api/endpoints";
 import { autoBind, StorageHelper } from "../../../utils";
-import { type IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
+import { IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
 import { nodesStore } from "../../+nodes/nodes.store";
 
 export enum MetricType {

src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -14,7 +14,7 @@ import { boundMethod, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
-import { Select, type SelectOption } from "../select";
+import { Select, SelectOption } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";
 import { withInjectables } from "@ogre-tools/injectable-react";

src/renderer/components/+helm-releases/release-rollback-dialog.tsx

@@ -10,7 +10,7 @@ import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
-import { getReleaseHistory, HelmRelease, type IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { getReleaseHistory, HelmRelease, IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../select";
 import { Notifications } from "../notifications";
 import orderBy from "lodash/orderBy";

src/renderer/components/+namespaces/namespace-details.tsx

@@ -10,7 +10,7 @@ import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { boundMethod, cssNames, Disposer } from "../../utils";
-import { getMetricsForNamespace, type IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
+import { getMetricsForNamespace, IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Link } from "react-router-dom";
 import { Spinner } from "../spinner";

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -15,7 +15,7 @@ import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object-meta";
-import { getBackendServiceNamePort, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
+import { getBackendServiceNamePort, getMetricsForIngress, IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { boundMethod } from "../../utils";

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -18,7 +18,7 @@ import { systemName, isUrl, isPath } from "../input/input_validators";
 import { SubTitle } from "../layout/sub-title";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
-import { type HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
+import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
 import { requestOpenFilePickingDialog } from "../../ipc";
 
 interface Props extends Partial<DialogProps> {

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -15,7 +15,7 @@ import { Link } from "react-router-dom";
 import { ResourceMetrics } from "../resource-metrics";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForPvc, type IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
+import { getMetricsForPvc, IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { KubeObjectMeta } from "../kube-object-meta";

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { daemonSetStore } from "./daemonsets.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { DaemonSet, getMetricsForDaemonSets, type IPodMetrics } from "../../../common/k8s-api/endpoints";
+import { DaemonSet, getMetricsForDaemonSets, IPodMetrics } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { makeObservable, observable, reaction } from "mobx";

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
-import { Deployment, getMetricsForDeployments, type IPodMetrics } from "../../../common/k8s-api/endpoints";
+import { Deployment, getMetricsForDeployments, IPodMetrics } from "../../../common/k8s-api/endpoints";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -17,7 +17,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { jobStore } from "./job.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForJobs, type IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
+import { getMetricsForJobs, IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { makeObservable, observable, reaction } from "mobx";

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { observable, reaction, makeObservable } from "mobx";
-import { type IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
+import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { boundMethod, cssNames, toJS } from "../../utils";

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForReplicaSets, type IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
+import { getMetricsForReplicaSets, IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -16,7 +16,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { statefulSetStore } from "./statefulset.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForStatefulSets, type IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
+import { getMetricsForStatefulSets, IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";

src/renderer/components/dock/terminal/terminal.ts

@@ -11,7 +11,7 @@ import type { TabId } from "../dock/store";
 import { TerminalApi, TerminalChannels } from "../../../api/terminal-api";
 import { ThemeStore } from "../../../theme.store";
 import { disposer } from "../../../utils";
-import { isMac } from "../../../../common/vars";
+import { isMac, defaultTerminalFontFamily } from "../../../../common/vars";
 import { once } from "lodash";
 import { UserStore } from "../../../../common/user-store";
 import { clipboard } from "electron";
@@ -25,6 +25,14 @@ export class Terminal {
     return document.getElementById("terminal-init");
   }
 
+  static async preloadFonts() {
+    const fontPath = require("../../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
+    const fontFace = new FontFace(defaultTerminalFontFamily, `url(${fontPath})`);
+
+    await fontFace.load();
+    document.fonts.add(fontFace);
+  }
+
   private xterm: XTerm | null = new XTerm({
     cursorBlink: true,
     cursorStyle: "bar",

src/renderer/components/dock/upgrade-chart/view.tsx

@@ -15,7 +15,7 @@ import type { UpgradeChartTabStore } from "./store";
 import { Spinner } from "../../spinner";
 import { Badge } from "../../badge";
 import { EditorPanel } from "../editor-panel";
-import { helmChartStore, type IChartVersion } from "../../+helm-charts/helm-chart.store";
+import { helmChartStore, IChartVersion } from "../../+helm-charts/helm-chart.store";
 import type { HelmRelease, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../../select";
 import { IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";

src/renderer/components/fonts.scss

@@ -13,8 +13,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./fonts/MaterialIcons-Regular.woff2") format("woff");
+  src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
-  src: url("./fonts/MaterialIcons-Regular.ttf") format("truetype");
 }
 
 // Patched RobotoMono font with icons
@@ -22,5 +21,6 @@
 // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
 @font-face {
   font-family: 'RobotoMono';
-  src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
+  src: local('RobotoMono'),
+  url('fonts/roboto-mono-nerd.ttf') format('truetype');
 }

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -47,7 +47,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
       return <Icon material="bug_report" className={className} />;
     }
 
-    if (Icon.isSvg(category.metadata.icon)) {
+    if (category.metadata.icon.includes("<svg")) {
       return <Icon svg={category.metadata.icon} className={className} />;
     } else {
       return <Icon material={category.metadata.icon} className={className} />;

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -12,7 +12,7 @@ import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarStore } from "../../../common/hotbar-store";
 import type { CatalogEntity } from "../../api/catalog-entity";
-import { DragDropContext, Draggable, Droppable, type DropResult } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { HotbarSelector } from "./hotbar-selector";
 import { HotbarCell } from "./hotbar-cell";
 import { HotbarIcon } from "./hotbar-icon";

src/renderer/components/icon/icon.tsx

@@ -11,7 +11,6 @@ import type { LocationDescriptor } from "history";
 import { boundMethod, cssNames } from "../../utils";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
-import { decode } from "../../../common/utils/base64";
 
 export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   material?: string;          // material-icon, see available names at https://material.io/icons/
@@ -37,10 +36,6 @@ export class Icon extends React.PureComponent<IconProps> {
     focusable: true,
   };
 
-  static isSvg(content: string) {
-    return String(content).includes("svg+xml"); // data-url for raw svg-icon
-  }
-
   get isInteractive() {
     const { interactive, onClick, href, link } = this.props;
 
@@ -103,12 +98,9 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (typeof svg === "string") {
-      const dataUrlPrefix = "data:image/svg+xml;base64,";
+      const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
-      const svgIconDataUrl = svg.startsWith(dataUrlPrefix) ? svg : require(`./${svg}.svg`);
-      const svgIconText = typeof svgIconDataUrl == "string" // decode xml from data-url
-        ? decode(svgIconDataUrl.replace(dataUrlPrefix, "")) : "";
 
-      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }} />;
+      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }
 
     // render as material-icon
@@ -136,7 +128,7 @@ export class Icon extends React.PureComponent<IconProps> {
     }
 
     if (href) {
-      return <a {...iconProps} href={href} ref={this.ref} />;
+      return <a {...iconProps} href={href} ref={this.ref}/>;
     }
 
     return <i {...iconProps} ref={this.ref} />;

src/renderer/components/select/select.tsx

@@ -10,9 +10,8 @@ import "./select.scss";
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import ReactSelect, { components } from "react-select";
+import ReactSelect, { ActionMeta, components, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
-import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
+import Creatable, { CreatableProps } from "react-select/creatable";
-import Creatable, { type CreatableProps } from "react-select/creatable";
 
 import { ThemeStore } from "../../theme.store";
 import { boundMethod, cssNames } from "../../utils";

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -5,6 +5,7 @@
 import type { Cluster } from "../../../../common/cluster/cluster";
 import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry";
 import logger from "../../../../main/logger";
+import { Terminal } from "../../../components/dock/terminal/terminal";
 import type { KubernetesCluster } from "../../../../common/catalog-entities";
 import { Notifications } from "../../../components/notifications";
 import type { AppEvent } from "../../../../common/app-event-bus/event-bus";
@@ -39,6 +40,7 @@ export const initClusterFrame =
         `${logPrefix} Init dashboard, clusterId=${hostedCluster.id}, frameId=${frameRoutingId}`,
       );
 
+      await Terminal.preloadFonts();
       await requestSetClusterFrameId(hostedCluster.id);
       await hostedCluster.whenReady; // cluster.activate() is done at this point
 

types/mocks.d.ts

@@ -25,13 +25,7 @@ declare module "*.scss" {
   const content: string;
   export = content;
 }
-
+declare module "*.ttf" {
-// Declare everything what's bundled as webpack's type="asset/resource"
+  const content: string;
-// Should be mocked for tests support in jestConfig.moduleNameMapper (currently in "/package.json")
+  export = content;
-declare module "*.svg";
+}
-declare module "*.jpg";
-declare module "*.png";
-declare module "*.eot";
-declare module "*.woff";
-declare module "*.woff2";
-declare module "*.ttf";

webpack.dev-server.ts

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import Webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
-import { webpackLensRenderer } from "./webpack.renderer";
-import { buildDir, webpackDevServerPort } from "./src/common/vars";
-import logger from "./src/common/logger";
-
-export interface DevServer extends WebpackDevServer {
-}
-
-/**
- * Creates `webpack-dev-server`
- * API docs:
- * @url https://webpack.js.org/configuration/dev-server/
- * @url https://github.com/chimurai/http-proxy-middleware
- */
-export function createDevServer(lensProxyPort: number): DevServer {
-  const config = webpackLensRenderer();
-  const compiler = Webpack(config);
-
-  const server = new WebpackDevServer({
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-    allowedHosts: "all",
-    host: "localhost",
-    port: webpackDevServerPort,
-    static: buildDir, // aka `devServer.contentBase` in webpack@4
-    hot: "only", // use HMR only without errors
-    liveReload: false,
-    proxy: {
-      "*": {
-        router(req) {
-          logger.silly(`[WEBPACK-DEV-SERVER]: proxy path ${req.path}`, req.headers);
-
-          return `http://localhost:${lensProxyPort}`;
-        },
-        secure: false, // allow http connections
-        ws: true, // proxy websockets, e.g. terminal
-        logLevel: "error",
-      },
-    },
-    client: {
-      overlay: false, // don't show warnings and errors on top of rendered app view
-      logging: "error",
-    },
-  }, compiler);
-
-  logger.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
-
-  return server;
-}

webpack.extensions.ts

@@ -6,11 +6,9 @@
 
 import path from "path";
 import type webpack from "webpack";
-import * as vars from "./src/common/vars";
+import { sassCommonVars, isDevelopment, isProduction } from "./src/common/vars";
-import { cssModulesWebpackRule, fontsLoaderWebpackRules, iconsAndImagesWebpackRules } from "./webpack.renderer";
 
 export default function generateExtensionTypes(): webpack.Configuration {
-  const { isDevelopment } = vars;
   const entry = "./src/extensions/extension-api.ts";
   const outDir = "./src/extensions/npm/extensions/dist";
 
@@ -20,7 +18,7 @@ export default function generateExtensionTypes(): webpack.Configuration {
     target: "electron-renderer",
     entry,
     // this is the default mode, so we should make it explicit to silence the warning
-    mode: isDevelopment ? "development" : "production",
+    mode: isProduction ? "production" : "development",
     output: {
       filename: "extension-api.js",
       // need to be an absolute path
@@ -54,9 +52,47 @@ export default function generateExtensionTypes(): webpack.Configuration {
             },
           },
         },
-        cssModulesWebpackRule({ styleLoader: "style-loader" }),
+        // for src/renderer/components/fonts/roboto-mono-nerd.ttf
-        ...fontsLoaderWebpackRules(),
+        // in src/renderer/components/dock/terminal.ts 95:25-65
-        ...iconsAndImagesWebpackRules(),
+        {
+          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),
+                  ],
+                },
+              },
+            },
+          ],
+        },
       ],
     },
     resolve: {

webpack.main.ts

@@ -6,23 +6,23 @@
 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";
-import { iconsAndImagesWebpackRules } from "./webpack.renderer";
 
 const configs: { (): webpack.Configuration }[] = [];
 
 configs.push((): webpack.Configuration => {
   console.info("WEBPACK:main", vars);
-  const { mainDir, buildDir, isDevelopment } = vars;
 
   return {
     context: __dirname,
     target: "electron-main",
-    mode: isDevelopment ? "development" : "production",
+    mode: isProduction ? "production" : "development",
-    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+    devtool: isProduction ? "source-map" : "cheap-eval-source-map",
     cache: isDevelopment,
     entry: {
       main: path.resolve(mainDir, "index.ts"),
@@ -43,11 +43,11 @@ configs.push((): webpack.Configuration => {
           test: /\.node$/,
           use: "node-loader",
         },
-        getTSLoader({}, /\.ts$/),
+        getTSLoader(/\.ts$/),
-        ...iconsAndImagesWebpackRules(),
       ],
     },
     plugins: [
+      new ProgressBarPlugin(),
       new ForkTsCheckerPlugin(),
 
       new CircularDependencyPlugin({

webpack.renderer.ts

@@ -4,54 +4,61 @@
  */
 
 import * as vars from "./src/common/vars";
+import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars, webpackDevServerPort } from "./src/common/vars";
 import path from "path";
-import type webpack from "webpack";
+import webpack from "webpack";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import ProgressBarPlugin from "progress-bar-webpack-plugin";
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import getTSLoader from "./src/common/getTSLoader";
 import CircularDependencyPlugin from "circular-dependency-plugin";
-import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 
-export function webpackLensRenderer(): webpack.Configuration {
+export default [
+  webpackLensRenderer,
+];
+
+export function webpackLensRenderer({ showVars = true } = {}): webpack.Configuration {
+  if (showVars) {
     console.info("WEBPACK:renderer", vars);
-
+  }
-  const {
-    appName,
-    buildDir,
-    htmlTemplate,
-    isDevelopment,
-    publicPath,
-    rendererDir,
-  } = vars;
 
   return {
+    context: __dirname,
     target: "electron-renderer",
+    devtool: isDevelopment ? "cheap-source-map" : "source-map",
+    devServer: {
+      contentBase: buildDir,
+      port: webpackDevServerPort,
+      host: "localhost",
+      hot: true,
+      // to avoid cors errors when requests is from iframes
+      disableHostCheck: true,
+      headers: { "Access-Control-Allow-Origin": "*" },
+    },
     name: "lens-app",
-    mode: isDevelopment ? "development" : "production",
+    mode: isProduction ? "production" : "development",
-    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment,
     entry: {
       [appName]: path.resolve(rendererDir, "bootstrap.tsx"),
     },
     output: {
       libraryTarget: "global",
+      library: "",
       globalObject: "this",
       publicPath,
       path: buildDir,
       filename: "[name].js",
       chunkFilename: "chunks/[name].js",
-      assetModuleFilename: "assets/[name][ext][query]",
     },
-    watchOptions: {
+    stats: {
-      ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
+      warningsFilter: [
-    },
-    ignoreWarnings: [
         /Critical dependency: the request of a dependency is an expression/,
         /export '.*' was not found in/,
-      /require.extensions is not supported by webpack./, // handlebars
       ],
+    },
     resolve: {
       extensions: [
         ".js", ".jsx", ".json",
@@ -70,93 +77,30 @@ export function webpackLensRenderer(): webpack.Configuration {
           test: /\.node$/,
           use: "node-loader",
         },
-        getTSLoader({
+        getTSLoader(/\.tsx?$/),
-          getCustomTransformers: () => ({
-            before: isDevelopment ? [require("react-refresh-typescript")()] : [],
-          }),
-        }),
-        cssModulesWebpackRule(),
-        ...iconsAndImagesWebpackRules(),
-        ...fontsLoaderWebpackRules(),
-      ],
-    },
-
-    plugins: [
-      new ForkTsCheckerPlugin(),
-
-      // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-      new MonacoWebpackPlugin({
-        // publicPath: "/",
-        // filename: "[name].worker.js",
-        languages: ["json", "yaml"],
-        globalAPI: isDevelopment,
-      }),
-
-      new HtmlWebpackPlugin({
-        filename: `${appName}.html`,
-        template: htmlTemplate,
-        inject: true,
-        hash: true,
-      }),
-
-      new CircularDependencyPlugin({
-        cwd: __dirname,
-        exclude: /node_modules/,
-        failOnError: true,
-      }),
-
-      new MiniCssExtractPlugin({
-        filename: "[name].css",
-      }),
-
-      isDevelopment && new ReactRefreshWebpackPlugin(),
-    ].filter(Boolean),
-  };
-}
-
-/**
- * Import icons and image files.
- * Read more about asset types: https://webpack.js.org/guides/asset-modules/
- */
-export function iconsAndImagesWebpackRules(): webpack.RuleSetRule[] {
-  return [
         {
-      test: /\.svg$/,
+          test: /\.(jpg|png|svg|map|ico)$/,
-      type: "asset/inline", // data:image/svg+xml;base64,...
+          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"> (vue/react?)
+            },
           },
-    {
-      test: /\.(jpg|png|ico)$/,
-      type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
         },
-  ];
-}
-
-/**
- * Import custom fonts as URL.
- */
-export function fontsLoaderWebpackRules(): webpack.RuleSetRule[] {
-  return [
         {
           test: /\.(ttf|eot|woff2?)$/,
-      type: "asset/resource",
+          use: {
+            loader: "url-loader",
+            options: {
+              name: "fonts/[name].[ext]",
+            },
+          },
         },
-  ];
-}
-
-/**
- * Import CSS or SASS styles with modules support (*.module.scss)
- * @param {string} styleLoader
- */
-export function cssModulesWebpackRule(
         {
-    styleLoader = vars.isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
-  } = {}): webpack.RuleSetRule {
-  const { isDevelopment, sassCommonVars } = vars;
-
-  return {
           test: /\.s?css$/,
           use: [
-      styleLoader,
+            isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
             {
               loader: "css-loader",
               options: {
@@ -192,7 +136,40 @@ export function cssModulesWebpackRule(
               },
             },
           ],
+        },
+      ],
+    },
+
+    plugins: [
+      new ProgressBarPlugin(),
+      new ForkTsCheckerPlugin(),
+
+      // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+      new MonacoWebpackPlugin({
+        // publicPath: "/",
+        // filename: "[name].worker.js",
+        languages: ["json", "yaml"],
+        globalAPI: isDevelopment,
+      }),
+
+      new HtmlWebpackPlugin({
+        filename: `${appName}.html`,
+        template: htmlTemplate,
+        inject: true,
+      }),
+
+      new CircularDependencyPlugin({
+        cwd: __dirname,
+        exclude: /node_modules/,
+        failOnError: true,
+      }),
+
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+      }),
+
+      isDevelopment && new webpack.HotModuleReplacementPlugin(),
+      isDevelopment && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
   };
 }
-
-export default webpackLensRenderer;