feat(webpack): change plugin import paths to speed up config loading (#23021)

docs/shared/packages/webpack/webpack-config-setup.md

@@ -57,7 +57,7 @@ Currently, Nx module federation requires an enhanced Webpack configuration file
 A basic Webpack configuration was introduced in Nx 18, and it looks like this:
 
 ```js {% fileName="apps/demo/webpack.config.js" %}
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -68,7 +68,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       main: './src/main.ts',
       tsConfig: './tsconfig.app.json',
       index: './src/index.html',
@@ -132,8 +132,8 @@ React projects use the `@nx/react` package to build their apps. This package pro
 {% tab label="Basic Webpack configuration" %}
 
 ```js {% fileName="apps/demo/app/webpack.config.js" %}
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -144,7 +144,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'swc',
       main: './src/main.tsx',

docs/shared/packages/webpack/webpack-plugins.md

@@ -286,7 +286,7 @@ Watch for file changes.
 #### Example
 
 ```js
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -297,7 +297,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       main: './src/main.ts',
       tsConfig: './tsconfig.app.json',
       index: './src/index.html',
@@ -322,7 +322,7 @@ Enables or disables [React SVGR](https://react-svgr.com/). Default is `true`.
 #### Example
 
 ```js
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {

docs/shared/recipes/ci-deployment.md

@@ -42,7 +42,7 @@ The [`NxWebpackPlugin`](/recipes/webpack/webpack-plugins#nxwebpackplugin) plugin
 To generate a `package.json` we would declare it in the plugin options.
 
 ```js {% fileName="apps/acme/app/webpack.config.js" %}
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -53,7 +53,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'swc',
       main: './src/main.tsx',

e2e/node/src/node.test.ts

@@ -115,7 +115,7 @@ describe('Node Applications', () => {
     updateFile(
       `apps/${nodeapp}/webpack.config.js`,
       `
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -123,7 +123,7 @@ module.exports = {
     path: join(__dirname, '../../dist/apps/${nodeapp}'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: 'node',
       compiler: 'tsc',
       main: './src/main.ts',

e2e/webpack/src/webpack.legacy.test.ts

@@ -125,7 +125,7 @@ describe('Webpack Plugin (legacy)', () => {
             path: join(__dirname, '../dist/app9524918'),
           },
           plugins: [
-            new NxWebpackPlugin({
+            new NxAppWebpackPlugin({
               main: './src/main.ts',
               compiler: 'tsc',
               index: './src/index.html',

e2e/webpack/src/webpack.test.ts

@@ -33,7 +33,7 @@ describe('Webpack Plugin', () => {
       `libs/${myPkg}/webpack.config.js`,
       `
       const path  = require('path');
-      const { NxWebpackPlugin } = require('@nx/webpack');
+      const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
       
       class DebugPlugin {
         apply(compiler) {
@@ -47,7 +47,7 @@ describe('Webpack Plugin', () => {
           path: path.join(__dirname, '../../dist/libs/${myPkg}')
         },
         plugins: [
-          new NxWebpackPlugin({
+          new NxAppWebpackPlugin({
             compiler: 'tsc',
             main: './src/index.ts',
             tsConfig: './tsconfig.lib.json',
@@ -139,7 +139,7 @@ describe('Webpack Plugin', () => {
       `apps/${appName}/webpack.config.js`,
       `
       const path  = require('path');
-      const { NxWebpackPlugin } = require('@nx/webpack');
+      const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 
       module.exports = {
         target: 'node',
@@ -147,7 +147,7 @@ describe('Webpack Plugin', () => {
           path: path.join(__dirname, '../../dist/${appName}')
         },
         plugins: [
-          new NxWebpackPlugin({
+          new NxAppWebpackPlugin({
             compiler: 'tsc',
             main: 'apps/${appName}/src/main.ts',
             tsConfig: 'apps/${appName}/tsconfig.app.json',
@@ -239,14 +239,14 @@ describe('Webpack Plugin', () => {
     updateFile(
       `apps/${appName}/webpack.config.js`,
       `
-        const { NxWebpackPlugin } = require('@nx/webpack');
+        const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
         const { join } = require('path');
         module.exports = {
           output: {
             path: join(__dirname, '../../dist/apps/demo'),
           },
           plugins: [
-            new NxWebpackPlugin({
+            new NxAppWebpackPlugin({
               // NOTE: generatePackageJson is missing here, but executor passes it.
               target: 'web',
               compiler: 'swc',

packages/node/src/generators/application/files/common/webpack.config.js__tmpl__

@@ -1,5 +1,5 @@
 <% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -7,7 +7,7 @@ module.exports = {
     path: join(__dirname, '<%= offset %><%= webpackPluginOptions.outputPath %>'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: 'node',
       compiler: 'tsc',
       main: '<%= webpackPluginOptions.main %>',

packages/react-native/src/generators/web-configuration/files/base-webpack/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 <% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 
 module.exports = {
   resolve: {
@@ -13,7 +13,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: '<%= webpackPluginOptions.tsConfig %>',
       compiler: '<%= webpackPluginOptions.compiler %>',
       main: '<%= webpackPluginOptions.main %>',

packages/react/index.ts

@@ -1,3 +1,9 @@
+import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
+
+// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+/** @deprecated Use '@nx/react/webpack-plugin' instead. */
+export const NxReactWebpackPlugin = _NxReactWebpackPlugin;
+
 export {
   extraEslintDependencies,
   extendReactEslintJson,
@@ -22,4 +28,3 @@ export { componentTestGenerator } from './src/generators/component-test/componen
 export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind';
 export type { SupportedStyles } from './typings/style';
 export * from './plugins/with-react';
-export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

packages/react/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -54,8 +54,8 @@ it('should have a greeting as the title', () => {
 
 exports[`app --style @emotion/styled should exclude styles 1`] = `
 "
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -66,7 +66,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.tsx',
@@ -145,8 +145,8 @@ nxViteTsPaths()],
 
 exports[`app --style none should exclude styles 1`] = `
 "
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -157,7 +157,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.tsx',
@@ -256,8 +256,8 @@ exports[`app setup React app with --bundler=vite should setup targets with vite
 
 exports[`app should add custom webpack config 1`] = `
 "
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -268,7 +268,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.tsx',
@@ -374,8 +374,8 @@ nxViteTsPaths()],
 
 exports[`app should setup webpack 1`] = `
 "
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -386,7 +386,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.tsx',

packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -1,6 +1,6 @@
 <% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -11,7 +11,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: '<%= webpackPluginOptions.tsConfig %>',
       compiler: '<%= webpackPluginOptions.compiler %>',
       main: '<%= webpackPluginOptions.main %>',

packages/react/webpack-plugin.ts

@@ -0,0 +1 @@
+export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

packages/web/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -25,7 +25,7 @@ exports[`app should setup eslint 1`] = `
 `;
 
 exports[`app should setup the web build builder 1`] = `
-"const { NxWebpackPlugin } = require('@nx/webpack');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -36,7 +36,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.ts',
@@ -53,7 +53,7 @@ module.exports = {
 `;
 
 exports[`app should setup the web dev server 1`] = `
-"const { NxWebpackPlugin } = require('@nx/webpack');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -64,7 +64,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.ts',

packages/web/src/generators/application/files/app-webpack/webpack.config.js__tmpl__

@@ -1,5 +1,5 @@
 <% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -10,7 +10,7 @@ module.exports = {
     port: 4200
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: '<%= webpackPluginOptions.tsConfig %>',
       compiler: '<%= webpackPluginOptions.compiler %>',
       main: '<%= webpackPluginOptions.main %>',

packages/webpack/app-plugin.ts

@@ -0,0 +1,2 @@
+export { NxAppWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin';
+export type { NxAppWebpackPluginOptions } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options';

packages/webpack/index.ts

@@ -1,4 +1,6 @@
 import { configurationGenerator } from './src/generators/configuration/configuration';
+import { NxAppWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-app-webpack-plugin';
+import { NxTsconfigPathsWebpackPlugin as _NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';
 
 export { configurationGenerator };
 
@@ -6,6 +8,12 @@ export { configurationGenerator };
 /** @deprecated Use `configurationGenerator` instead. */
 export const webpackProjectGenerator = configurationGenerator;
 
+// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+/** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
+export const NxWebpackPlugin = NxAppWebpackPlugin;
+/** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */
+export const NxTsconfigPathsWebpackPlugin = _NxTsconfigPathsWebpackPlugin;
+
 export * from './src/utils/create-copy-plugin';
 export * from './src/utils/config';
 export { webpackInitGenerator } from './src/generators/init/init';
@@ -23,5 +31,3 @@ export * from './src/utils/get-css-module-local-ident';
 export * from './src/utils/with-nx';
 export * from './src/utils/with-web';
 export * from './src/utils/module-federation/public-api';
-export { NxWebpackPlugin } from './src/plugins/nx-webpack-plugin/nx-webpack-plugin';
-export { NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';

packages/webpack/src/generators/configuration/configuration.ts

@@ -106,7 +106,7 @@ function createWebpackConfig(
       joinPathFragments(project.root, 'webpack.config.js'),
       hasPlugin(tree)
         ? `
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -116,7 +116,7 @@ module.exports = {
           }'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: '${buildOptions.target}',
       tsConfig: '${buildOptions.tsConfig}',
       compiler: '${buildOptions.compiler}',
@@ -142,7 +142,7 @@ module.exports = composePlugins(withNx(), withWeb(), (config) => {
       joinPathFragments(project.root, 'webpack.config.js'),
       hasPlugin(tree)
         ? `
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -152,7 +152,7 @@ module.exports = {
           }'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: '${buildOptions.target}',
       tsConfig: '${buildOptions.tsConfig}',
       compiler: '${buildOptions.compiler}',

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

@@ -16,7 +16,7 @@ import { getOutputHashFormat } from '../../../utils/hash-format';
 import { NxTsconfigPathsWebpackPlugin } from '../../nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';
 import { getTerserEcmaVersion } from './get-terser-ecma-version';
 import { createLoaderFromCompiler } from './compiler-loaders';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
 import TerserPlugin = require('terser-webpack-plugin');
 import nodeExternals = require('webpack-node-externals');
 
@@ -29,7 +29,7 @@ const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
 const mainFields = ['module', 'main'];
 
 export function applyBaseConfig(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   config: Partial<WebpackOptionsNormalized | Configuration> = {},
   {
     useNormalizedEntry,
@@ -57,7 +57,7 @@ export function applyBaseConfig(
 }
 
 function applyNxIndependentConfig(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   config: Partial<WebpackOptionsNormalized | Configuration>
 ): void {
   const hashFormat = getOutputHashFormat(options.outputHashing as string);
@@ -205,7 +205,7 @@ function applyNxIndependentConfig(
 }
 
 function applyNxDependentConfig(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   config: Partial<WebpackOptionsNormalized | Configuration>,
   { useNormalizedEntry }: { useNormalizedEntry?: boolean } = {}
 ): void {

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

@@ -10,7 +10,7 @@ import {
 } from 'webpack';
 
 import { WriteIndexHtmlPlugin } from '../../write-index-html-plugin';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
 import { getOutputHashFormat } from '../../../utils/hash-format';
 import { getClientEnvironment } from '../../../utils/get-client-environment';
 import { normalizeExtraEntryPoints } from '../../../utils/webpack/normalize-entry';
@@ -24,7 +24,7 @@ import CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 import MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 export function applyWebConfig(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   config: Partial<WebpackOptionsNormalized | Configuration> = {},
   {
     useNormalizedEntry,

packages/webpack/src/plugins/nx-webpack-plugin/lib/compiler-loaders.ts

@@ -1,10 +1,10 @@
 import * as path from 'path';
 import { readTsConfig } from '@nx/js';
 
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
 
 export function createLoaderFromCompiler(
-  options: NormalizedNxWebpackPluginOptions
+  options: NormalizedNxAppWebpackPluginOptions
 ) {
   switch (options.compiler) {
     case 'swc':

packages/webpack/src/plugins/nx-webpack-plugin/lib/instantiate-script-plugins.ts

@@ -4,10 +4,10 @@ import { WebpackPluginInstance } from 'webpack';
 import { getOutputHashFormat } from '../../../utils/hash-format';
 import { ScriptsWebpackPlugin } from '../../../utils/webpack/plugins/scripts-webpack-plugin';
 import { normalizeExtraEntryPoints } from '../../../utils/webpack/normalize-entry';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
 
 export function instantiateScriptPlugins(
-  options: NormalizedNxWebpackPluginOptions
+  options: NormalizedNxAppWebpackPluginOptions
 ): WebpackPluginInstance[] {
   // process global scripts
   const globalScriptsByBundleName = normalizeExtraEntryPoints(

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

@@ -9,14 +9,14 @@ import {
 import {
   AssetGlobPattern,
   FileReplacement,
-  NormalizedNxWebpackPluginOptions,
-  NxWebpackPluginOptions,
-} from '../nx-webpack-plugin-options';
+  NormalizedNxAppWebpackPluginOptions,
+  NxAppWebpackPluginOptions,
+} from '../nx-app-webpack-plugin-options';
 
 export function normalizeOptions(
-  options: NxWebpackPluginOptions
-): NormalizedNxWebpackPluginOptions {
-  const combinedPluginAndMaybeExecutorOptions: Partial<NormalizedNxWebpackPluginOptions> =
+  options: NxAppWebpackPluginOptions
+): NormalizedNxAppWebpackPluginOptions {
+  const combinedPluginAndMaybeExecutorOptions: Partial<NormalizedNxAppWebpackPluginOptions> =
     {};
   const isProd = process.env.NODE_ENV === 'production';
   // Since this is invoked by the executor, the graph has already been created and cached.
@@ -197,7 +197,7 @@ export function normalizeFileReplacements(
 
 function normalizeRelativePaths(
   projectRoot: string,
-  options: NxWebpackPluginOptions
+  options: NxAppWebpackPluginOptions
 ): void {
   for (const [fieldName, fieldValue] of Object.entries(options)) {
     if (isRelativePath(fieldValue)) {

packages/webpack/src/plugins/nx-webpack-plugin/lib/stylesheet-loaders.ts

@@ -5,7 +5,7 @@ import MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 import { getCSSModuleLocalIdent } from '../../../utils/get-css-module-local-ident';
 import { getOutputHashFormat } from '../../../utils/hash-format';
-import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+import { NormalizedNxAppWebpackPluginOptions } from '../nx-app-webpack-plugin-options';
 import { PostcssCliResources } from '../../../utils/webpack/plugins/postcss-cli-resources';
 
 interface PostcssOptions {
@@ -15,7 +15,7 @@ interface PostcssOptions {
 }
 
 export function getCommonLoadersForCssModules(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   includePaths: string[]
 ) {
   // load component css as raw strings
@@ -49,7 +49,7 @@ export function getCommonLoadersForCssModules(
 }
 
 export function getCommonLoadersForGlobalCss(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   includePaths: string[]
 ) {
   return [
@@ -72,7 +72,7 @@ export function getCommonLoadersForGlobalCss(
 }
 
 export function getCommonLoadersForGlobalStyle(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   includePaths: string[]
 ) {
   return [
@@ -96,7 +96,7 @@ export function getCommonLoadersForGlobalStyle(
 }
 
 function postcssOptionsCreator(
-  options: NormalizedNxWebpackPluginOptions,
+  options: NormalizedNxAppWebpackPluginOptions,
   {
     includePaths,
     forCssModules = false,

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

@@ -37,7 +37,7 @@ export interface OptimizationOptions {
   styles: boolean;
 }
 
-export interface NxWebpackPluginOptions {
+export interface NxAppWebpackPluginOptions {
   /**
    * The tsconfig file for the project. e.g. `tsconfig.json`
    */
@@ -212,8 +212,8 @@ export interface NxWebpackPluginOptions {
   watch?: boolean;
 }
 
-export interface NormalizedNxWebpackPluginOptions
-  extends NxWebpackPluginOptions {
+export interface NormalizedNxAppWebpackPluginOptions
+  extends NxAppWebpackPluginOptions {
   projectName: string;
   root: string;
   projectRoot: string;

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

@@ -1,8 +1,8 @@
 import { Compiler } from 'webpack';
 import {
-  NormalizedNxWebpackPluginOptions,
-  NxWebpackPluginOptions,
-} from './nx-webpack-plugin-options';
+  NormalizedNxAppWebpackPluginOptions,
+  NxAppWebpackPluginOptions,
+} from './nx-app-webpack-plugin-options';
 import { normalizeOptions } from './lib/normalize-options';
 import { deleteOutputDir } from '../../utils/fs';
 import { applyBaseConfig } from './lib/apply-base-config';
@@ -18,10 +18,10 @@ import { applyWebConfig } from './lib/apply-web-config';
  *
  * Web-only features, such as stylesheets and images, are only supported when `target` is 'web' or 'webworker'.
  */
-export class NxWebpackPlugin {
-  private readonly options: NormalizedNxWebpackPluginOptions;
+export class NxAppWebpackPlugin {
+  private readonly options: NormalizedNxAppWebpackPluginOptions;
 
-  constructor(options: NxWebpackPluginOptions = {}) {
+  constructor(options: NxAppWebpackPluginOptions = {}) {
     // If we're building inferred targets, skip normalizing build options.
     if (!global.NX_GRAPH_CREATION) {
       this.options = normalizeOptions(options);

packages/webpack/src/utils/with-nx.ts

@@ -1,12 +1,12 @@
 import { Configuration } from 'webpack';
 import { NxComposableWebpackPlugin, NxWebpackExecutionContext } from './config';
 import { applyBaseConfig } from '../plugins/nx-webpack-plugin/lib/apply-base-config';
-import { NxWebpackPluginOptions } from '../plugins/nx-webpack-plugin/nx-webpack-plugin-options';
+import { NxAppWebpackPluginOptions } from '../plugins/nx-webpack-plugin/nx-app-webpack-plugin-options';
 import { normalizeAssets } from '../plugins/nx-webpack-plugin/lib/normalize-options';
 
 const processed = new Set();
 
-export type WithNxOptions = Partial<NxWebpackPluginOptions>;
+export type WithNxOptions = Partial<NxAppWebpackPluginOptions>;
 
 /**
  * @param {WithNxOptions} pluginOptions

packages/webpack/tsconfig-paths-plugin.ts

@@ -0,0 +1 @@
+export { NxTsconfigPathsWebpackPlugin } from './src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin';

packages/workspace/src/generators/preset/__snapshots__/preset.spec.ts.snap

@@ -37,8 +37,8 @@ exports[`preset should create files (preset = angular-monorepo) 3`] = `
 `;
 
 exports[`preset should create files (preset = react-monorepo) 1`] = `
-"const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -49,7 +49,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.tsx',
@@ -124,8 +124,8 @@ export default defineConfig({
 `;
 
 exports[`preset should create files (preset = react-standalone bundler = webpack) 1`] = `
-"const { NxWebpackPlugin } = require('@nx/webpack');
-const { NxReactWebpackPlugin } = require('@nx/react');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
@@ -136,7 +136,7 @@ module.exports = {
     port: 4200,
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',
       main: './src/main.tsx',