allow to customize both main & renderer

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

webpack/library-bundle.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 nodeExternals from "webpack-node-externals";
+import { platform } from "os";
+import path from "path";
+import { DefinePlugin, optimize } from "webpack";
+import { main, renderer } from "./library";
+import { buildDir } from "./vars";
+
+const config = [
+  {
+    ...main,
+    entry: {
+      main: path.resolve(__dirname, "..", "src", "library.ts"),
+    },
+    output: {
+      libraryTarget: "commonjs",
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [
+      new DefinePlugin({
+        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
+        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
+      }),
+    ],
+  },
+  {
+    ...renderer,
+    entry: {
+      renderer: path.resolve(__dirname, "..", "src", "renderer", "library.ts"),
+    },
+    output: {
+      libraryTarget: "commonjs",
+      path: path.resolve(buildDir, "library"),
+    },
+    optimization: {
+      minimize: false,
+    },
+    externals: [
+      nodeExternals(),
+    ],
+    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: false,
+      }),
+      new optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
+  },
+];
+
+export default config;

webpack/library.ts

@@ -5,112 +5,89 @@
 
 import path from "path";
 import type webpack from "webpack";
+import type { WebpackPluginInstance } from "webpack";
 import { DefinePlugin } from "webpack";
 import nodeExternals from "webpack-node-externals";
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import CircularDependencyPlugin from "circular-dependency-plugin";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import getTypeScriptLoader from "./get-typescript-loader";
 import rendererConfig, { iconsAndImagesWebpackRules } from "./renderer";
-import { buildDir, isDevelopment, mainDir } from "./vars";
+import { appName, assetsFolderName, buildDir, htmlTemplate, isDevelopment, mainDir, publicPath } from "./vars";
 import { platform } from "process";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
-const configs: { (): webpack.Configuration }[] = [
-  rendererConfig,
-];
-
-configs.push((): webpack.Configuration => {
-  console.info("WEBPACK:library", {
-    isDevelopment,
-    buildDir,
-  });
-
-  return {
-    name: "lens-app-library",
-    context: __dirname,
-    target: "electron-main",
-    mode: isDevelopment ? "development" : "production",
-    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
-    cache: isDevelopment ? { type: "filesystem" } : false,
-    entry: {
-      library: path.resolve(mainDir, "..", "library.ts"),
-    },
-    output: {
-      path: path.join(buildDir, "library"),
-      library: {
-        type: "commonjs",
+const renderer: webpack.Configuration = ({
+  ...rendererConfig({ showVars: false }),
+  plugins: [
+    // 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,
+      templateParameters: {
+        assetPath: `${publicPath}${assetsFolderName}`,
       },
-    },
-    resolve: {
-      extensions: [".json", ".js", ".ts"],
-    },
-    externals: [
-      nodeExternals(),
-    ],
-    module: {
-      rules: [
-        {
-          test: /\.node$/,
-          use: "node-loader",
-        },
-        {
-          test: /\.tsx?$/,
-          loader: "ts-loader",
-          options: {
-            compilerOptions: {
-              declaration: true, // output .d.ts
-              sourceMap: false, // to override sourceMap: true in tsconfig.json
-              outDir: path.join(buildDir, "library"),
-            },
-          },
-        },
-        ...iconsAndImagesWebpackRules(),
-      ],
-    },
-    plugins: [
-      new DefinePlugin({
-        CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
-        CONTEXT_MATCHER_FOR_FEATURES: `/\\/(main|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
-      }),
-    ],
-  };
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
+  ],
 });
 
-configs.push((): webpack.Configuration => {
-  console.info("WEBPACK:library:download-binaries", {
-    isDevelopment,
-    buildDir,
-  });
-
-  return {
-    name: "lens-app-library-download-binaries",
-    context: __dirname,
-    target: "electron-main",
-    mode: isDevelopment ? "development" : "production",
-    devtool: false,
-    cache: isDevelopment ? { type: "filesystem" } : false,
-    entry: {
-      download_binaries: path.resolve(process.cwd(), "build", "download_binaries.ts"),
-    },
-    output: {
-      path: path.join(buildDir, "library"),
-    },
-    resolve: {
-      extensions: [".json", ".js", ".ts"],
-    },
-    externals: [
-      nodeExternals(),
+const main: webpack.Configuration = ({
+  name: "lens-app-main",
+  context: __dirname,
+  target: "electron-main",
+  mode: isDevelopment ? "development" : "production",
+  devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
+  cache: isDevelopment ? { type: "filesystem" } : false,
+  entry: {
+    main: path.resolve(mainDir, "index.ts"),
+  },
+  output: {
+    libraryTarget: "global",
+    path: buildDir,
+  },
+  resolve: {
+    extensions: [".json", ".js", ".ts"],
+  },
+  externals: [
+    nodeExternals(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.node$/,
+        use: "node-loader",
+      },
+      getTypeScriptLoader({}, /\.ts$/),
+      ...iconsAndImagesWebpackRules(),
     ],
-    module: {
-      rules: [
-        {
-          test: /\.node$/,
-          use: "node-loader",
-        },
-        getTypeScriptLoader({}, /\.ts$/),
-        ...iconsAndImagesWebpackRules(),
-      ],
-    },
-    plugins: [
-    ],
-  };
+  },
+  plugins: [
+    new DefinePlugin({
+      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,
+  ],
 });
 
-export default configs;
+export {
+  main,
+  renderer,
+};

webpack/renderer.ts

@@ -38,7 +38,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment ? { type: "filesystem" } : false,
     entry: {
-      [appName]: path.resolve(rendererDir, "bootstrap.tsx"),
+      [appName]: path.resolve(rendererDir, "index.ts"),
     },
     output: {
       libraryTarget: "global",
@@ -65,6 +65,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     },
     externals: {
       "node-fetch": "commonjs node-fetch",
+      "npm": "commonjs npm",
     },
     optimization: {
       minimize: false,
@@ -192,7 +193,7 @@ export function cssModulesWebpackRule({ styleLoader }: CssModulesWebpackRuleOpti
           sourceMap: isDevelopment,
           postcssOptions: {
             plugins: [
-              "tailwindcss",
+              ["tailwindcss", { config: path.resolve(__dirname, "..", "tailwind.config.js") }],
             ],
           },
         },

webpack/vars.ts

@@ -10,16 +10,16 @@ import packageInfo from "../package.json";
 export const isDevelopment = process.env.NODE_ENV !== "production";
 export const mainDir = path.join(process.cwd(), "src", "main");
 export const buildDir = path.join(process.cwd(), "static", "build");
-export const extensionEntry = path.join(process.cwd(), "src", "extensions", "extension-api.ts");
-export const extensionOutDir = path.join(process.cwd(), "src", "extensions", "npm", "extensions", "dist");
+export const extensionEntry = path.join(__dirname, "..", "src", "extensions", "extension-api.ts");
+export const extensionOutDir = path.join(__dirname, "..", "src", "extensions", "npm", "extensions", "dist");
 export const assetsFolderName = "assets";
 export const rendererDir = path.join(process.cwd(), "src", "renderer");
 export const appName = isDevelopment
   ? `${packageInfo.productName}Dev`
   : packageInfo.productName;
-export const htmlTemplate = path.resolve(rendererDir, "template.html");
+export const htmlTemplate = path.resolve(__dirname, "..", "src/renderer", "template.html");
 export const publicPath = "/build/";
-export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
+export const sassCommonVars = path.resolve(__dirname, "..", "src", "renderer", "components/vars.scss");
 export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
 
 assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");