fix(web): support custom webpack config written in TypeScript for web…

…:build (#8939)
nrwl · Feb 11, 2022 · 3c25a1c · 3c25a1c
1 parent 48117ac
commit 3c25a1c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/packages/web/src/executors/dev-server/dev-server.impl.ts b/packages/web/src/executors/dev-server/dev-server.impl.ts
@@ -19,7 +19,7 @@ import {
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
 import { readCachedProjectGraph } from '@nrwl/workspace/src/core/project-graph';
 import { getEmittedFiles, runWebpackDevServer } from '../../utils/run-webpack';
-import { tsNodeRegister } from '../../utils/webpack/tsNodeRegister';
+import { resolveCustomWebpackConfig } from '../../utils/webpack/custom-webpack';
 
 export interface WebDevServerOptions {
   host: string;
@@ -128,15 +128,3 @@ function getBuildOptions(
     ...overrides,
   };
 }
-
-function resolveCustomWebpackConfig(path: string, tsConfig: string) {
-  tsNodeRegister(path, tsConfig);
-
-  const customWebpackConfig = require(path);
-  // If the user provides a configuration in TS file
-  // then there are 2 cases for exporing an object. The first one is:
-  // `module.exports = { ... }`. And the second one is:
-  // `export default { ... }`. The ESM format is compiled into:
-  // `{ default: { ... } }`
-  return customWebpackConfig.default || customWebpackConfig;
-}
diff --git a/packages/web/src/executors/webpack/webpack.impl.ts b/packages/web/src/executors/webpack/webpack.impl.ts
@@ -26,6 +26,7 @@ import {
   CrossOriginValue,
   writeIndexHtml,
 } from '../../utils/webpack/write-index-html';
+import { resolveCustomWebpackConfig } from '../../utils/webpack/custom-webpack';
 
 export interface WebWebpackExecutorOptions extends BuildBuilderOptions {
   index: string;
@@ -106,14 +107,20 @@ function getWebpackConfigs(
       : undefined,
   ]
     .filter(Boolean)
-    .map((config) =>
-      options.webpackConfig
-        ? require(options.webpackConfig)(config, {
-            options,
-            configuration: context.configurationName,
-          })
-        : config
-    );
+    .map((config) => {
+      if (options.webpackConfig) {
+        const customWebpack = resolveCustomWebpackConfig(
+          options.webpackConfig,
+          options.tsConfig
+        );
+        return customWebpack(config, {
+          options,
+          configuration: context.configurationName,
+        });
+      } else {
+        return config;
+      }
+    });
 }
 
 export async function* run(

diff --git a/...s/web/src/utils/webpack/tsNodeRegister.ts → ...s/web/src/utils/webpack/custom-webpack.ts b/...s/web/src/utils/webpack/tsNodeRegister.ts → ...s/web/src/utils/webpack/custom-webpack.ts
@@ -17,3 +17,15 @@ export function tsNodeRegister(file: string = '', tsConfig?: string) {
     tsconfigPaths.register({ baseUrl, paths });
   }
 }
+
+export function resolveCustomWebpackConfig(path: string, tsConfig: string) {
+  tsNodeRegister(path, tsConfig);
+
+  const customWebpackConfig = require(path);
+  // If the user provides a configuration in TS file
+  // then there are 2 cases for exporing an object. The first one is:
+  // `module.exports = { ... }`. And the second one is:
+  // `export default { ... }`. The ESM format is compiled into:
+  // `{ default: { ... } }`
+  return customWebpackConfig.default || customWebpackConfig;
+}