Make builds of TS-declarations more deterministic (#7248)

The cause for this was unknown, and was fixed by using "fork-ts-checker-webpack-plugin" instead of
"ts-loader".

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
Co-authored-by: Iku-turso <mikko.aspiala@gmail.com>

package-lock.json

@@ -6070,8 +6070,7 @@
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
-      "dev": true
     },
     "node_modules/@types/parse5": {
       "version": "6.0.3",
@@ -9990,7 +9989,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
       "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "dev": true,
       "dependencies": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -13746,7 +13744,6 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.3.0.tgz",
       "integrity": "sha512-IN+XTzusCjR5VgntYFgxbxVx3WraPRnKehBFrf00cMSrtUuW9MsG9dhL6MWpY6MkjC3wVwoujfCDgZZCQwbswA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "chalk": "^4.1.2",
@@ -13780,7 +13777,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -13894,8 +13890,7 @@
     "node_modules/fs-monkey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
-      "dev": true
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
@@ -15203,7 +15198,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -15219,7 +15213,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -20784,7 +20777,6 @@
       "version": "3.4.13",
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.13.tgz",
       "integrity": "sha512-omTM41g3Skpvx5dSYeZIbXKcXoAVc/AoMNwn9TKx++L/gaen/+4TTttmu8ZSch5vfVJ8uJvGbroTsIlslRg6lg==",
-      "dev": true,
       "dependencies": {
         "fs-monkey": "^1.0.3"
       },
@@ -21762,8 +21754,7 @@
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
-      "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==",
+      "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="
-      "dev": true
     },
     "node_modules/node-addon-api": {
       "version": "1.7.2",
@@ -25703,7 +25694,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -34110,6 +34100,7 @@
       "dependencies": {
         "@types/webpack-env": "^1.18.0",
         "css-loader": "^6.7.2",
+        "fork-ts-checker-webpack-plugin": "^7.3.0",
         "mini-css-extract-plugin": "^2.7.0",
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
@@ -34817,6 +34808,7 @@
       }
     },
     "packages/technical-features/feature-core": {
+      "name": "@k8slens/feature-core",
       "version": "0.0.1",
       "license": "MIT",
       "peerDependencies": {

packages/infrastructure/webpack/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@types/webpack-env": "^1.18.0",
     "css-loader": "^6.7.2",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
     "mini-css-extract-plugin": "^2.7.0",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",

packages/infrastructure/webpack/src/__snapshots__/get-multi-export-config.test.js.snap

@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`get-multi-export-config given maximal package.json, when creating configuration works 1`] = `
+Array [
+  Object {
+    "entry": Object {
+      "index": "./index.ts",
+    },
+    "externals": Array [
+      [Function],
+      [Function],
+    ],
+    "externalsPresets": Object {
+      "node": true,
+    },
+    "mode": "production",
+    "module": Object {
+      "rules": Array [
+        Object {
+          "loader": "ts-loader",
+          "test": /\\\\\\.ts\\(x\\)\\?\\$/,
+        },
+      ],
+    },
+    "name": "./index.ts",
+    "node": Object {
+      "__dirname": true,
+      "__filename": true,
+    },
+    "output": Object {
+      "filename": [Function],
+      "libraryTarget": "commonjs2",
+      "path": "/some-working-directory/dist",
+    },
+    "performance": Object {
+      "hints": "error",
+      "maxEntrypointSize": 100000,
+    },
+    "plugins": Array [
+      ForkTsCheckerWebpackPlugin {
+        "options": Object {
+          "typescript": Object {
+            "configOverwrite": Object {
+              "compilerOptions": Object {
+                "declaration": true,
+                "declarationDir": "/some-working-directory/dist",
+              },
+              "include": Array [
+                "./index.ts",
+              ],
+            },
+            "mode": "write-dts",
+          },
+        },
+      },
+    ],
+    "resolve": Object {
+      "extensions": Array [
+        ".ts",
+        ".tsx",
+      ],
+    },
+    "target": "node",
+  },
+  Object {
+    "entry": Object {
+      "index": "./some-entrypoint/index.ts",
+    },
+    "externals": Array [
+      [Function],
+      [Function],
+    ],
+    "externalsPresets": Object {
+      "node": true,
+    },
+    "mode": "production",
+    "module": Object {
+      "rules": Array [
+        Object {
+          "loader": "ts-loader",
+          "test": /\\\\\\.ts\\(x\\)\\?\\$/,
+        },
+      ],
+    },
+    "name": "./some-entrypoint/index.ts",
+    "node": Object {
+      "__dirname": true,
+      "__filename": true,
+    },
+    "output": Object {
+      "filename": [Function],
+      "libraryTarget": "commonjs2",
+      "path": "/some-working-directory/dist/some-entrypoint",
+    },
+    "performance": Object {
+      "hints": "error",
+      "maxEntrypointSize": 100000,
+    },
+    "plugins": Array [
+      ForkTsCheckerWebpackPlugin {
+        "options": Object {
+          "typescript": Object {
+            "configOverwrite": Object {
+              "compilerOptions": Object {
+                "declaration": true,
+                "declarationDir": "/some-working-directory/dist/some-entrypoint",
+              },
+              "include": Array [
+                "./some-entrypoint/index.ts",
+              ],
+            },
+            "mode": "write-dts",
+          },
+        },
+      },
+    ],
+    "resolve": Object {
+      "extensions": Array [
+        ".ts",
+        ".tsx",
+      ],
+    },
+    "target": "node",
+  },
+  Object {
+    "entry": Object {
+      "index": "./some-other-entrypoint/index.ts",
+    },
+    "externals": Array [
+      [Function],
+      [Function],
+    ],
+    "externalsPresets": Object {
+      "node": true,
+    },
+    "mode": "production",
+    "module": Object {
+      "rules": Array [
+        Object {
+          "loader": "ts-loader",
+          "test": /\\\\\\.ts\\(x\\)\\?\\$/,
+        },
+        Object {
+          "test": /\\\\\\.s\\?css\\$/,
+          "use": Array [
+            Object {
+              "some": "miniCssExtractPluginLoader",
+            },
+            Object {
+              "loader": "css-loader",
+              "options": Object {
+                "modules": Object {
+                  "auto": /\\\\\\.module\\\\\\./i,
+                  "localIdentName": "[name]__[local]--[hash:base64:5]",
+                  "mode": "local",
+                },
+                "sourceMap": false,
+              },
+            },
+            Object {
+              "loader": "sass-loader",
+              "options": Object {
+                "sourceMap": false,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    "name": "./some-other-entrypoint/index.ts",
+    "node": Object {
+      "__dirname": true,
+      "__filename": true,
+    },
+    "output": Object {
+      "filename": [Function],
+      "libraryTarget": "commonjs2",
+      "path": "/some-working-directory/dist/some-other-entrypoint",
+    },
+    "performance": Object {
+      "hints": "error",
+      "maxEntrypointSize": 100000,
+    },
+    "plugins": Array [
+      ForkTsCheckerWebpackPlugin {
+        "options": Object {
+          "typescript": Object {
+            "configOverwrite": Object {
+              "compilerOptions": Object {
+                "declaration": true,
+                "declarationDir": "/some-working-directory/dist/some-other-entrypoint",
+              },
+              "include": Array [
+                "./some-other-entrypoint/index.ts",
+              ],
+            },
+            "mode": "write-dts",
+          },
+        },
+      },
+      MiniCssExtractPlugin {
+        "_sortedModulesCache": WeakMap {},
+        "options": Object {
+          "chunkFilename": "[name].css",
+          "experimentalUseImportModule": undefined,
+          "filename": "[name].css",
+          "ignoreOrder": false,
+          "runtime": true,
+        },
+        "runtimeOptions": Object {
+          "attributes": undefined,
+          "insert": undefined,
+          "linkType": "text/css",
+        },
+      },
+    ],
+    "resolve": Object {
+      "extensions": Array [
+        ".ts",
+        ".tsx",
+      ],
+    },
+    "target": "node",
+  },
+]
+`;

packages/infrastructure/webpack/src/get-multi-export-config.js

@@ -1,5 +1,5 @@
-const nodeConfig = require("./node-config");
+const getNodeConfig = require("./get-node-config");
-const reactConfig = require("./react-config");
+const getReactConfigFor = require("./get-react-config");
 const path = require("path");
 const {
   map,
@@ -14,7 +14,15 @@ const {
 } = require("lodash/fp");
 const { pipeline } = require("@ogre-tools/fp");
 
-module.exports = (packageJson, dependencies = { nodeConfig, reactConfig, joinPath: path.join }) => {
+module.exports = (
+  packageJson,
+
+  dependencies = {
+    resolvePath: path.resolve,
+    workingDirectory: process.cwd(),
+    getReactConfig: getReactConfigFor()
+  }
+) => {
   if (!packageJson.lensMultiExportConfig) {
     throw new Error(
       `Tried to get multi export config for package "${packageJson.name}" but configuration is missing.`
@@ -72,10 +80,13 @@ module.exports = (packageJson, dependencies = { nodeConfig, reactConfig, joinPat
     );
   }
 
+  const toExportSpecificWebpackConfig =
+    toExportSpecificWebpackConfigFor(dependencies);
+
   return pipeline(
     packageJson.lensMultiExportConfig,
     toPairs,
-    map(toExportSpecificWebpackConfigFor(dependencies))
+    map(toExportSpecificWebpackConfig)
   );
 };
 
@@ -91,7 +102,11 @@ const toExpectedExport = (externalImportPath) => {
   return [
     externalImportPath,
     {
-      types: `./${posixJoinForPackageJson("./dist", externalImportPath, "index.d.ts")}`,
+      types: `./${posixJoinForPackageJson(
+        "./dist",
+        externalImportPath,
+        "index.d.ts"
+      )}`,
 
       default: entrypointPath,
       import: entrypointPath,
@@ -103,20 +118,19 @@ const toExpectedExport = (externalImportPath) => {
 const toExportSpecificWebpackConfigFor =
   (dependencies) =>
   ([externalImportPath, { buildType, entrypoint }]) => {
-    const baseConfig =
+    const outputDirectory = dependencies.resolvePath(
-      buildType === "node" ? dependencies.nodeConfig : dependencies.reactConfig;
+      dependencies.workingDirectory,
+      "dist",
+      externalImportPath
+    );
 
-    return {
+    return buildType === "node"
-      ...baseConfig,
+      ? getNodeConfig({
-      name: entrypoint,
+          entrypointFilePath: entrypoint,
-
+          outputDirectory,
-      entry: {
+        })
-        index: entrypoint,
+      : dependencies.getReactConfig({
-      },
+          entrypointFilePath: entrypoint,
-
+          outputDirectory,
-      output: {
+        });
-        ...baseConfig.output,
-        path: dependencies.joinPath(baseConfig.output.path, externalImportPath),
-      },
-    };
   };

packages/infrastructure/webpack/src/get-multi-export-config.test.js

@@ -1,10 +1,12 @@
+import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
 import getMultiExportConfig from "./get-multi-export-config";
-import path from 'path';
+import path from "path";
+const getReactConfigFor = require("./get-react-config");
 
-const joinPathFake = path.posix.join;
+const resolvePathFake = path.posix.resolve;
 
 describe("get-multi-export-config", () => {
-  let actual;
+  let configs;
   let maximalPackageJson;
 
   beforeEach(() => {
@@ -51,43 +53,69 @@ describe("get-multi-export-config", () => {
     };
   });
 
-  it("given maximal package.json, when creating configuration, works", () => {
+  describe("given maximal package.json, when creating configuration", () => {
-    actual = getMultiExportConfig(maximalPackageJson, {
+    beforeEach(() => {
-      nodeConfig: nodeConfigStub,
+      configs = getMultiExportConfig(maximalPackageJson, {
-      reactConfig: reactConfigStub,
+        resolvePath: resolvePathFake,
-      joinPath: joinPathFake,
+        workingDirectory: "/some-working-directory",
+
+        getReactConfig: getReactConfigFor({
+          miniCssExtractPluginLoader: { some: "miniCssExtractPluginLoader" },
+        }),
+      });
     });
 
-    expect(actual).toEqual([
+    it("works", () => {
+      expect(configs).toMatchSnapshot();
+    });
+
+    [
       {
-        name: "./index.ts",
+        name: "config for node export in default entrypoint",
-        stub: "node",
+        entrypoint: "./index.ts",
-        entry: { index: "./index.ts" },
+        outputDirectory: "/some-working-directory/dist",
-        output: { some: "value", path: "/some-build-directory" },
       },
-
       {
-        name: "./some-entrypoint/index.ts",
+        name: "config for node export in a non-default entrypoint",
-        stub: "node",
+        entrypoint: "./some-entrypoint/index.ts",
-        entry: { index: "./some-entrypoint/index.ts" },
+        outputDirectory: "/some-working-directory/dist/some-entrypoint",
-
-        output: {
-          some: "value",
-          path: "/some-build-directory/some-entrypoint",
-        },
       },
-
       {
-        name: "./some-other-entrypoint/index.ts",
+        name: "config for react export in a non-default entrypoint",
-        stub: "react",
+        entrypoint: "./some-other-entrypoint/index.ts",
-        entry: { index: "./some-other-entrypoint/index.ts" },
+        outputDirectory: "/some-working-directory/dist/some-other-entrypoint",
-
-        output: {
-          some: "other-value",
-          path: "/some-build-directory/some-other-entrypoint",
-        },
       },
-    ]);
+    ].forEach((scenario) => {
+      describe(scenario.name, () => {
+        let config;
+
+        beforeEach(() => {
+          config = configs.find(({ name }) => name === scenario.entrypoint);
+        });
+
+        it("has correct entrypoint", () => {
+          expect(config).toHaveProperty("entry.index", scenario.entrypoint);
+        });
+
+        it("has correct output directory", () => {
+          expect(config).toHaveProperty(
+            "output.path",
+            scenario.outputDirectory
+          );
+        });
+
+        it("has correct declaration directory", () => {
+          expect(
+            config.plugins.find(
+              ({ constructor }) => constructor === ForkTsCheckerPlugin
+            )
+          ).toHaveProperty(
+            "options.typescript.configOverwrite.compilerOptions.declarationDir",
+            scenario.outputDirectory
+          );
+        });
+      });
+    });
   });
 
   it("given maximal package.json but path for entrypoint in exports do not match output, when creating configuration, throws", () => {
@@ -95,9 +123,9 @@ describe("get-multi-export-config", () => {
 
     expect(() => {
       getMultiExportConfig(maximalPackageJson, {
-        nodeConfig: nodeConfigStub,
+        getNodeConfig: () => nodeConfigStub,
-        reactConfig: reactConfigStub,
+        getReactConfig: () => reactConfigStub,
-        joinPath: joinPathFake,
+        joinPath: resolvePathFake,
       });
     }).toThrow(
       'Tried to get multi export config but exports of package.json for "some-name" did not match exactly:'
@@ -109,9 +137,9 @@ describe("get-multi-export-config", () => {
 
     expect(() => {
       getMultiExportConfig(maximalPackageJson, {
-        nodeConfig: nodeConfigStub,
+        getNodeConfig: () => nodeConfigStub,
-        reactConfig: reactConfigStub,
+        getReactConfig: () => reactConfigStub,
-        joinPath: joinPathFake,
+        joinPath: resolvePathFake,
       });
     }).toThrow(
       'Tried to get multi export config but exports of package.json for "some-name" did not match exactly:'
@@ -123,9 +151,9 @@ describe("get-multi-export-config", () => {
 
     expect(() => {
       getMultiExportConfig(maximalPackageJson, {
-        nodeConfig: nodeConfigStub,
+        getNodeConfig: () => nodeConfigStub,
-        reactConfig: reactConfigStub,
+        getReactConfig: () => reactConfigStub,
-        joinPath: joinPathFake,
+        joinPath: resolvePathFake,
       });
     }).toThrow(
       'Tried to get multi export config but exports of package.json for "some-name" did not match exactly:'
@@ -137,9 +165,9 @@ describe("get-multi-export-config", () => {
 
     expect(() => {
       getMultiExportConfig(maximalPackageJson, {
-        nodeConfig: nodeConfigStub,
+        getNodeConfig: () => nodeConfigStub,
-        reactConfig: reactConfigStub,
+        getReactConfig: () => reactConfigStub,
-        joinPath: joinPathFake,
+        joinPath: resolvePathFake,
       });
     }).toThrow(
       'Tried to get multi export config for package "some-name" but configuration is missing.'
@@ -151,9 +179,9 @@ describe("get-multi-export-config", () => {
 
     expect(() => {
       getMultiExportConfig(maximalPackageJson, {
-        nodeConfig: nodeConfigStub,
+        getNodeConfig: () => nodeConfigStub,
-        reactConfig: reactConfigStub,
+        getReactConfig: () => reactConfigStub,
-        joinPath: joinPathFake,
+        joinPath: resolvePathFake,
       });
     }).toThrow(
       'Tried to get multi export config for package "some-name" but build types "some-invalid" were not any of "node", "react".'
@@ -166,9 +194,9 @@ describe("get-multi-export-config", () => {
 
     expect(() => {
       getMultiExportConfig(maximalPackageJson, {
-        nodeConfig: nodeConfigStub,
+        getNodeConfig: () => nodeConfigStub,
-        reactConfig: reactConfigStub,
+        getReactConfig: () => reactConfigStub,
-        joinPath: joinPathFake,
+        joinPath: resolvePathFake,
       });
     }).toThrow(
       'Tried to get multi export config for package "some-name" but entrypoint was missing for "./some-entrypoint".'

packages/infrastructure/webpack/src/get-node-config.js

@@ -0,0 +1,78 @@
+const ForkTsCheckerPlugin = require("fork-ts-checker-webpack-plugin");
+const nodeExternals = require("webpack-node-externals");
+const path = require("path");
+
+module.exports = ({ entrypointFilePath, outputDirectory }) => ({
+  name: entrypointFilePath,
+  entry: { index: entrypointFilePath },
+  target: "node",
+  mode: "production",
+
+  performance: {
+    maxEntrypointSize: 100000,
+    hints: "error",
+  },
+
+  resolve: {
+    extensions: [".ts", ".tsx"],
+  },
+
+  plugins: [
+    new ForkTsCheckerPlugin({
+      typescript: {
+        mode: "write-dts",
+
+        configOverwrite: {
+          include: [entrypointFilePath],
+
+          compilerOptions: {
+            declaration: true,
+            declarationDir: outputDirectory,
+          },
+        },
+      },
+    }),
+  ],
+
+  output: {
+    path: outputDirectory,
+
+    filename: (pathData) =>
+      pathData.chunk.name === "index"
+        ? "index.js"
+        : `${pathData.chunk.name}/index.js`,
+
+    libraryTarget: "commonjs2",
+  },
+
+  externals: [
+    nodeExternals({ modulesFromFile: true }),
+
+    nodeExternals({
+      modulesDir: path.resolve(
+        __dirname,
+        "..",
+        "..",
+        "..",
+        "..",
+        "node_modules"
+      ),
+    }),
+  ],
+
+  externalsPresets: { node: true },
+
+  node: {
+    __dirname: true,
+    __filename: true,
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.ts(x)?$/,
+        loader: "ts-loader",
+      },
+    ],
+  },
+});

packages/infrastructure/webpack/src/get-react-config.js

@@ -0,0 +1,60 @@
+const getNodeConfig = require("./get-node-config");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports =
+  ({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
+  ({ entrypointFilePath, outputDirectory }) => {
+    const nodeConfig = getNodeConfig({
+      entrypointFilePath,
+      outputDirectory,
+    });
+
+    return {
+      ...nodeConfig,
+
+      plugins: [
+        ...nodeConfig.plugins,
+
+        new MiniCssExtractPlugin({
+          filename: "[name].css",
+        }),
+      ],
+
+      module: {
+        ...nodeConfig.module,
+
+        rules: [
+          ...nodeConfig.module.rules,
+
+          {
+            test: /\.s?css$/,
+
+            use: [
+              miniCssExtractPluginLoader,
+
+              {
+                loader: "css-loader",
+
+                options: {
+                  sourceMap: false,
+
+                  modules: {
+                    auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
+                    mode: "local", // :local(.selector) by default
+                    localIdentName: "[name]__[local]--[hash:base64:5]",
+                  },
+                },
+              },
+
+              {
+                loader: "sass-loader",
+                options: {
+                  sourceMap: false,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  };

packages/infrastructure/webpack/src/node-config.js

@@ -1,68 +1,7 @@
-const nodeExternals = require("webpack-node-externals");
 const path = require("path");
+const getNodeConfig = require("./get-node-config");
 
-const buildDirectory = path.resolve(process.cwd(), "dist");
+module.exports = getNodeConfig({
-
+  entrypointFilePath: "./index.ts",
-module.exports = {
+  outputDirectory: path.resolve(process.cwd(), "dist"),
-  entry: { index: "./index.ts" },
+});
-  target: "node",
-  mode: "production",
-
-  performance: {
-    maxEntrypointSize: 100000,
-    hints: "error",
-  },
-
-  resolve: {
-    extensions: [".ts", ".tsx"],
-  },
-
-  output: {
-    path: buildDirectory,
-
-    filename: (pathData) =>
-      pathData.chunk.name === "index"
-        ? "index.js"
-        : `${pathData.chunk.name}/index.js`,
-
-    libraryTarget: "commonjs2",
-  },
-
-  externals: [
-    nodeExternals({ modulesFromFile: true }),
-
-    nodeExternals({
-      modulesDir: path.resolve(
-        __dirname,
-        "..",
-        "..",
-        "..",
-        "..",
-        "node_modules"
-      ),
-    }),
-  ],
-
-  externalsPresets: { node: true },
-
-  node: {
-    __dirname: true,
-    __filename: true,
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.ts(x)?$/,
-        loader: "ts-loader",
-
-        options: {
-          compilerOptions: {
-            declaration: true,
-            declarationDir: "./dist",
-          },
-        },
-      },
-    ],
-  },
-};

packages/infrastructure/webpack/src/react-config.js

@@ -1,44 +1,7 @@
-const nodeConfig = require("./node-config");
+const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const getReactConfig = require("./get-react-config");
 
-module.exports = {
+module.exports = getReactConfig({
-  ...nodeConfig,
+  entrypointFilePath: "./index.ts",
-
+  outputDirectory: path.resolve(process.cwd(), "dist"),
-  plugins: [
+});
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    }),
-  ],
-
-  module: {
-    ...nodeConfig.module,
-    rules: [
-      ...nodeConfig.module.rules,
-
-      {
-        test: /\.s?css$/,
-
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: false,
-              modules: {
-                auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
-                mode: "local", // :local(.selector) by default
-                localIdentName: "[name]__[local]--[hash:base64:5]",
-              },
-            },
-          },
-          {
-            loader: "sass-loader",
-            options: {
-              sourceMap: false,
-            },
-          },
-        ],
-      },
-    ],
-  },
-};