Set core webpack dependencies as externals

packages/core/package.json

@@ -200,7 +200,6 @@
     "@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.10",
     "@sentry/types": "^6.19.7",
     "@swc/cli": "^0.1.60",
     "@swc/core": "^1.3.31",
@@ -221,7 +220,6 @@
     "@types/glob-to-regexp": "^0.4.1",
     "@types/hapi__call": "^9.0.0",
     "@types/hapi__subtext": "^7.0.0",
-    "@types/html-webpack-plugin": "^3.2.6",
     "@types/http-proxy": "^1.17.9",
     "@types/jest": "^28.1.6",
     "@types/js-yaml": "^4.0.5",
@@ -281,7 +279,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
-    "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "ignore-loader": "^0.1.2",
     "include-media": "^1.4.9",

packages/core/webpack/common.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type webpack from "webpack";
+import path from "path";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import webpackLensMain from "./main";
+import { buildDir } from "./vars";
+
+const webpackLensCommon = (): webpack.Configuration => {
+  const mainConfig = webpackLensMain();
+
+  return {
+    ...mainConfig,
+    name: "lens-app-common",
+    entry: {
+      common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
+    },
+    output: {
+      publicPath: "",
+      library: {
+        type: "commonjs2",
+      },
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [
+      new ForkTsCheckerPlugin({}),
+    ],
+  };
+};
+
+export default webpackLensCommon;

packages/core/webpack/library-bundle.ts

@@ -2,118 +2,15 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import { platform } from "os";
-import path from "path";
-import { DefinePlugin, optimize } from "webpack";
-import main from "./main";
-import renderer, { iconsAndImagesWebpackRules } from "./renderer";
-import { buildDir, isDevelopment } from "./vars";
 
-const rendererConfig = renderer({ showVars: false });
-const mainConfig = main();
+import webpackLensCommon from "./common";
+import webpackLensMain from "./main";
+import { webpackLensRenderer } from "./renderer";
 
 const config = [
-  {
-    ...mainConfig,
-    entry: {
-      main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
-    },
-    output: {
-      library: {
-        type: "commonjs2",
-      },
-      path: path.resolve(buildDir, "library"),
-    },
-    optimization: {
-      minimize: false,
-    },
-    module: {
-      parser: {
-        javascript: {
-          commonjsMagicComments: true,
-        },
-      },
-      rules: [
-        {
-          test: /\.node$/,
-          use: "node-loader",
-        },
-        {
-          test: /\.ts$/,
-          exclude: /node_modules/,
-          use: {
-            loader: "ts-loader",
-            options: {
-              compilerOptions: {
-                declaration: true,
-                sourceMap: false,
-              },
-            },
-          },
-        },
-        ...iconsAndImagesWebpackRules(),
-      ],
-    },
-    plugins: [
-      new DefinePlugin({
-        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-      }),
-    ],
-  },
-  {
-    ...mainConfig,
-    name: "lens-app-common",
-    entry: {
-      common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
-    },
-    output: {
-      publicPath: "",
-      library: {
-        type: "commonjs2",
-      },
-      path: path.resolve(buildDir, "library"),
-    },
-    optimization: {
-      minimize: false,
-    },
-    plugins: [],
-  },
-  {
-    ...rendererConfig,
-    entry: {
-      renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
-    },
-    output: {
-      library: {
-        type: "commonjs2",
-      },
-      path: path.resolve(buildDir, "library"),
-    },
-    optimization: {
-      minimize: false,
-    },
-    externals: [
-      ...(rendererConfig.externals as any).filter(Boolean),
-      {
-        "monaco-editor": "commonjs monaco-editor",
-      },
-    ],
-    plugins: [
-      new DefinePlugin({
-        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-      }),
-      new MiniCssExtractPlugin({
-        filename: "[name].css",
-        runtime: isDevelopment,
-      }),
-      new optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
-    ],
-  },
+  webpackLensMain(),
+  webpackLensRenderer(),
+  webpackLensCommon(),
 ];
 
 export default config;

packages/core/webpack/main.ts

@@ -5,25 +5,14 @@
 
 import path from "path";
 import type webpack from "webpack";
-import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
 import nodeExternals from "webpack-node-externals";
-import { getTypescriptLoader } from "./get-typescript-loader";
-import CircularDependencyPlugin from "circular-dependency-plugin";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
 import { iconsAndImagesWebpackRules } from "./renderer";
-import type { WebpackPluginInstance } from "webpack";
 import { DefinePlugin } from "webpack";
-import { additionalExternals, buildDir, isDevelopment, mainDir } from "./vars";
+import { buildDir, isDevelopment } from "./vars";
 import { platform } from "process";
 
-const main = ({ showVars = true } = {}): webpack.Configuration => {
-  if (showVars) {
-    console.info("WEBPACK:main", {
-      isDevelopment,
-      mainDir,
-      buildDir,
-    });
-  }
-
+const webpackLensMain = (): webpack.Configuration => {
   return {
     name: "lens-app-main",
     context: __dirname,
@@ -32,18 +21,22 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
     devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment ? { type: "filesystem" } : false,
     entry: {
-      main: path.resolve(mainDir, "index.ts"),
+      main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
     },
     output: {
-      libraryTarget: "global",
-      path: buildDir,
+      library: {
+        type: "commonjs2",
+      },
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
     },
     resolve: {
       extensions: [".json", ".js", ".ts"],
     },
     externals: [
       nodeExternals(),
-      ...additionalExternals,
     ],
     module: {
       parser: {
@@ -56,7 +49,19 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
           test: /\.node$/,
           use: "node-loader",
         },
-        getTypescriptLoader({}, /\.ts$/),
+        {
+          test: /\.ts$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              compilerOptions: {
+                sourceMap: false,
+              },
+            },
+          },
+        },
         ...iconsAndImagesWebpackRules(),
       ],
     },
@@ -65,14 +70,18 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
         CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
         CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
       }),
-      new ForkTsCheckerPlugin(),
-      new CircularDependencyPlugin({
-        cwd: __dirname,
-        exclude: /node_modules/,
-        failOnError: true,
-      }) as unknown as WebpackPluginInstance,
+      new ForkTsCheckerPlugin({
+        typescript: {
+          mode: "write-dts",
+          configOverwrite: {
+            compilerOptions: {
+              declaration: true,
+            },
+          },
+        },
+      }),
     ],
   };
 };
 
-export default main;
+export default webpackLensMain;