Cleanup webpack configs (#7017)

- Deduplicate printing to console

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/webpack/get-typescript-loader.ts

@@ -5,36 +5,47 @@
 
 import esbuild from "esbuild";
 import type { Options as TSLoaderOptions } from "ts-loader";
+import { once } from "lodash";
+
+const getTsLoader = (options: Partial<TSLoaderOptions>, testRegExp: RegExp) => ({
+  test: testRegExp,
+  exclude: /node_modules/,
+  use: {
+    loader: "ts-loader",
+    options,
+  },
+});
+
+const printUsingEsbuildLoader = once(() => {
+  console.info(`\n🚀 using esbuild-loader for ts(x)`);
+});
+
+const getEsbuildLoader = (options: Partial<TSLoaderOptions>, testRegExp: RegExp) => (printUsingEsbuildLoader(), {
+  test: testRegExp,
+  loader: "esbuild-loader",
+  options: {
+    loader: "tsx",
+    target: "ES2019",
+    implementation: esbuild,
+  },
+});
+
+const getTypescriptLoaderImpl = process.env.LENS_DEV_USE_ESBUILD_LOADER === "true"
+  ? getEsbuildLoader
+  : getTsLoader;
+
+// by default covers react/jsx-stuff
+const defaultTestRegExp = /\.tsx?$/;
 
 /**
  * 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
  * @returns ts/tsx webpack loader configuration object
  */
-export default function getTypescriptLoader(options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) {
-  testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
+export const getTypescriptLoader = (options?: Partial<TSLoaderOptions>, testRegExp?: RegExp) => {
+  options ??= {};
   options.transpileOnly ??= true;
+  testRegExp ??= defaultTestRegExp;
 
-  if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
-    console.info(`\n🚀 using esbuild-loader for ts(x)`);
-
-    return {
-      test: testRegExp,
-      loader: "esbuild-loader",
-      options: {
-        loader: "tsx",
-        target: "ES2019", // supported by >= electron@14
-        implementation: esbuild,
-      },
-    };
-  }
-
-  return {
-    test: testRegExp,
-    exclude: /node_modules/,
-    use: {
-      loader: "ts-loader",
-      options,
-    },
-  };
-}
+  return getTypescriptLoaderImpl(options, testRegExp);
+};

packages/core/webpack/library-bundle.ts

@@ -8,13 +8,14 @@ import path from "path";
 import { DefinePlugin, optimize } from "webpack";
 import main from "./main";
 import renderer, { iconsAndImagesWebpackRules } from "./renderer";
-import { buildDir } from "./vars";
+import { buildDir, isDevelopment } from "./vars";
 
 const rendererConfig = renderer({ showVars: false });
+const mainConfig = main();
 
 const config = [
   {
-    ...main(),
+    ...mainConfig,
     entry: {
       main: path.resolve(__dirname, "..", "src", "main", "library.ts"),
     },
@@ -62,7 +63,7 @@ const config = [
     ],
   },
   {
-    ...main(),
+    ...mainConfig,
     name: "lens-app-common",
     entry: {
       common: path.resolve(__dirname, "..", "src", "common", "library.ts"),
@@ -106,7 +107,7 @@ const config = [
       }),
       new MiniCssExtractPlugin({
         filename: "[name].css",
-        runtime: false,
+        runtime: isDevelopment,
       }),
       new optimize.LimitChunkCountPlugin({
         maxChunks: 1,

packages/core/webpack/main.ts

@@ -7,7 +7,7 @@ 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 { getTypescriptLoader } from "./get-typescript-loader";
 import CircularDependencyPlugin from "circular-dependency-plugin";
 import { iconsAndImagesWebpackRules } from "./renderer";
 import type { WebpackPluginInstance } from "webpack";
@@ -56,7 +56,7 @@ const main = ({ showVars = true } = {}): webpack.Configuration => {
           test: /\.node$/,
           use: "node-loader",
         },
-        getTypeScriptLoader({}, /\.ts$/),
+        getTypescriptLoader({}, /\.ts$/),
         ...iconsAndImagesWebpackRules(),
       ],
     },

packages/core/webpack/renderer.ts

@@ -13,7 +13,7 @@ import CircularDependencyPlugin from "circular-dependency-plugin";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import type { WebpackPluginInstance } from "webpack";
 import { DefinePlugin } from "webpack";
-import getTypescriptLoader from "./get-typescript-loader";
+import { getTypescriptLoader } from "./get-typescript-loader";
 import { assetsFolderName, isDevelopment, rendererDir, buildDir, appName, htmlTemplate, publicPath, sassCommonVars, additionalExternals } from "./vars";
 import { platform } from "process";