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

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 = {
@@ -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 = {

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 = {
@@ -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 = {

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 = {

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) {
@@ -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',
@@ -239,7 +239,7 @@ 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: {

graph/client/webpack.config.js

@@ -1,6 +1,6 @@
 const { join } = require('node:path');
 // nx-ignore-next-line
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack');
 // nx-ignore-next-line
 const { NxReactWebpackPlugin } = require('@nx/react');
 
@@ -23,7 +23,7 @@ module.exports = {
     },
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       index: './src/index.html',
       compiler: 'babel',
       main: './src/main.tsx',

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 = {

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: {

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 = {
@@ -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 = {
@@ -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 = {
@@ -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 = {

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 = {

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 = {
@@ -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 = {

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 = {

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,11 +1,19 @@
 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 };
 
 // Exported for backwards compatibility in case a plugin is using the old name.
 /** @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 = {
@@ -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 = {

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

@@ -8,14 +8,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';
   const projectName = process.env.NX_TASK_TARGET_PROJECT;
@@ -187,7 +187,7 @@ export function normalizeFileReplacements(
 
 function normalizeRelativePaths(
   projectRoot: string,
-  options: NxWebpackPluginOptions
+  options: NxAppWebpackPluginOptions
 ): void {
   for (const [fieldName, fieldValue] of Object.entries(options)) {
     if (isRelativePath(fieldValue)) {