feat(webpack): Support incremental builds via buildLibsFromSource (#2…

…5060)

This PR adds the ability for incremental builds when using the Webpack
Plugin.

Instead of using the source library directly, you can now utilize the
output folder by utilizing the `buildLibsFromSource` option within your
webpack.config file, through `NxAppWebpackPlugin`. This means that
instead of accessing `mylib/src/index.ts`, it will access
`dist/mylib/index.js`.

This directly aligns with incremental builds as it ensures that the
build process only recompiles the source doe that has been modified
since the last build.

(cherry picked from commit 6292055)

e2e/webpack/src/webpack.test.ts

@@ -286,6 +286,56 @@ describe('Webpack Plugin', () => {
 
     checkFilesExist(`dist/apps/${appName}/TEST.md`);
   });
+
+  it('it should support building libraries and apps when buildLibsFromSource is false', () => {
+    const appName = uniq('app');
+    const myPkg = uniq('my-pkg');
+
+    runCLI(`generate @nx/web:application ${appName}`);
+
+    runCLI(`generate @nx/js:lib ${myPkg} --importPath=@${appName}/${myPkg}`);
+
+    updateFile(`libs/${myPkg}/src/index.ts`, `export const foo = 'bar';\n`);
+
+    updateFile(
+      `apps/${appName}/src/main.ts`,
+      `import { foo } from '@${appName}/${myPkg}';\nconsole.log(foo);\n`
+    );
+
+    updateFile(
+      `apps/${appName}/webpack.config.js`,
+      `
+      const path  = require('path');
+      const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+
+      module.exports = {
+        target: 'node',
+        output: {
+          path: path.join(__dirname, '../../dist/${appName}')
+        },
+        plugins: [
+          new NxAppWebpackPlugin({
+            compiler: 'tsc',
+            main: 'apps/${appName}/src/main.ts',
+            tsConfig: 'apps/${appName}/tsconfig.app.json',
+            outputHashing: 'none',
+            optimization: false,
+            buildLibsFromSource: false,
+          })
+        ]
+      };`
+    );
+
+    const result = runCLI(`build ${appName}`);
+
+    expect(result).toContain(
+      `Running target build for project ${appName} and 1 task it depends on`
+    );
+    expect(result).toContain(`nx run ${myPkg}:build`);
+    expect(result).toContain(
+      `Successfully ran target build for project ${appName} and 1 task it depends on`
+    );
+  });
 });
 
 function readMainFile(dir: string): string {

packages/js/src/utils/buildable-libs-utils.ts

@@ -9,13 +9,14 @@ import {
   parseTargetString,
   readJsonFile,
   stripIndents,
+  workspaceRoot,
   writeJsonFile,
 } from '@nx/devkit';
 import { unlinkSync } from 'fs';
 import { isNpmProject } from 'nx/src/project-graph/operators';
 import { directoryExists, fileExists } from 'nx/src/utils/fileutils';
 import { output } from 'nx/src/utils/output';
-import { dirname, join, relative } from 'path';
+import { dirname, join, relative, isAbsolute } from 'path';
 import type * as ts from 'typescript';
 import { readTsConfigPaths } from './typescript/ts-config';
 
@@ -198,10 +199,11 @@ function readTsConfigWithRemappedPaths(
   dependencies: DependentBuildableProjectNode[]
 ) {
   const generatedTsConfig: any = { compilerOptions: {} };
-  generatedTsConfig.extends = relative(
-    dirname(generatedTsConfigPath),
-    tsConfig
-  );
+  const dirnameTsConfig = dirname(generatedTsConfigPath);
+  const relativeTsconfig = isAbsolute(dirnameTsConfig)
+    ? relative(workspaceRoot, dirnameTsConfig)
+    : dirnameTsConfig;
+  generatedTsConfig.extends = relative(relativeTsconfig, tsConfig);
   generatedTsConfig.compilerOptions.paths = computeCompilerOptionsPaths(
     tsConfig,
     dependencies

packages/webpack/src/executors/webpack/webpack.impl.ts

@@ -143,24 +143,6 @@ export async function* webpackExecutor(
     }
   }
 
-  if (!options.buildLibsFromSource && context.targetName) {
-    const { dependencies } = calculateProjectBuildableDependencies(
-      context.taskGraph,
-      context.projectGraph,
-      context.root,
-      context.projectName,
-      context.targetName,
-      context.configurationName
-    );
-    options.tsConfig = createTmpTsConfig(
-      options.tsConfig,
-      context.root,
-      metadata.root,
-      dependencies
-    );
-    process.env.NX_TSCONFIG_PATH = options.tsConfig;
-  }
-
   // Delete output path before bundling
   if (options.deleteOutputPath && options.outputPath) {
     deleteOutputDir(context.root, options.outputPath);

packages/webpack/src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin.ts

@@ -1,21 +1,30 @@
 import * as path from 'path';
-import { Compiler } from 'webpack';
+import {
+  Compiler,
+  type Configuration,
+  type WebpackOptionsNormalized,
+} from 'webpack';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { workspaceRoot } from '@nx/devkit';
+import {
+  calculateProjectBuildableDependencies,
+  createTmpTsConfig,
+} from '@nx/js/src/utils/buildable-libs-utils';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-webpack-plugin/nx-app-webpack-plugin-options';
+import { WebpackNxBuildCoordinationPlugin } from '../webpack-nx-build-coordination-plugin';
 
 export class NxTsconfigPathsWebpackPlugin {
-  constructor(
-    private options: {
-      tsConfig: string;
-    }
-  ) {
+  constructor(private options: NormalizedNxAppWebpackPluginOptions) {
     if (!this.options.tsConfig)
       throw new Error(
         `Missing "tsConfig" option. Set this option in your Nx webpack plugin.`
       );
   }
 
   apply(compiler: Compiler): void {
+    // If we are not building libs from source, we need to remap paths so tsconfig may be updated.
+    this.handleBuildLibsFromSource(compiler.options, this.options);
+
     const extensions = new Set([
       ...['.ts', '.tsx', '.mjs', '.js', '.jsx'],
       ...(compiler.options?.resolve?.extensions ?? []),
@@ -34,4 +43,40 @@ export class NxTsconfigPathsWebpackPlugin {
       })
     );
   }
+
+  handleBuildLibsFromSource(
+    config: Partial<WebpackOptionsNormalized | Configuration>,
+    options
+  ): void {
+    if (!options.buildLibsFromSource && options.targetName) {
+      const remappedTarget =
+        options.targetName === 'serve' ? 'build' : options.targetName;
+
+      const { target, dependencies } = calculateProjectBuildableDependencies(
+        undefined,
+        options.projectGraph,
+        options.root,
+        options.projectName,
+        remappedTarget,
+        options.configurationName
+      );
+      options.tsConfig = createTmpTsConfig(
+        options.tsConfig,
+        options.root,
+        target.data.root,
+        dependencies
+      );
+
+      if (options.targetName === 'serve') {
+        const buildableDependencies = dependencies
+          .filter((dependency) => dependency.node.type === 'lib')
+          .map((dependency) => dependency.node.name)
+          .join(',');
+
+        const buildCommand = `nx run-many --target=build --projects=${buildableDependencies}`;
+
+        config.plugins.push(new WebpackNxBuildCoordinationPlugin(buildCommand));
+      }
+    }
+  }
 }

packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-base-config.ts

@@ -219,9 +219,8 @@ function applyNxDependentConfig(
   { useNormalizedEntry }: { useNormalizedEntry?: boolean } = {}
 ): void {
   const tsConfig = options.tsConfig ?? getRootTsConfigPath();
-  const plugins: WebpackPluginInstance[] = [
-    new NxTsconfigPathsWebpackPlugin({ tsConfig }),
-  ];
+  const plugins: WebpackPluginInstance[] = [];
+
   const executorContext: Partial<ExecutorContext> = {
     projectName: options.projectName,
     targetName: options.targetName,
@@ -230,6 +229,8 @@ function applyNxDependentConfig(
     root: options.root,
   };
 
+  plugins.push(new NxTsconfigPathsWebpackPlugin({ ...options, tsConfig }));
+
   if (!options?.skipTypeChecking) {
     const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
     plugins.push(

packages/webpack/src/plugins/nx-webpack-plugin/lib/normalize-options.ts

@@ -93,6 +93,8 @@ export function normalizeOptions(
         )
       : [],
     baseHref: combinedPluginAndMaybeExecutorOptions.baseHref ?? '/',
+    buildLibsFromSource:
+      combinedPluginAndMaybeExecutorOptions.buildLibsFromSource ?? true,
     commonChunk: combinedPluginAndMaybeExecutorOptions.commonChunk ?? true,
     compiler: combinedPluginAndMaybeExecutorOptions.compiler ?? 'babel',
     configurationName,

packages/webpack/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options.ts

@@ -66,6 +66,11 @@ export interface NxAppWebpackPluginOptions {
    * Set <base href> for the resulting index.html.
    */
   baseHref?: string;
+  /**
+   * Build the libraries from source. Default is `true`.
+   */
+  buildLibsFromSource?: boolean;
+
   commonChunk?: boolean;
   /**
    * The compiler to use. Default is `babel` and requires a `.babelrc` file.