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

…23021)
nrwl · Apr 26, 2024 · b8e6ebb · b8e6ebb
1 parent 9077ae8
commit b8e6ebb
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 91 deletions.
diff --git a/docs/shared/packages/webpack/webpack-config-setup.md b/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',

diff --git a/docs/shared/packages/webpack/webpack-plugins.md b/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 = {

diff --git a/docs/shared/recipes/ci-deployment.md b/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',

diff --git a/e2e/node/src/node.test.ts b/e2e/node/src/node.test.ts
@@ -115,15 +115,15 @@ 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 = {
   output: {
     path: join(__dirname, '../../dist/apps/${nodeapp}'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: 'node',
       compiler: 'tsc',
       main: './src/main.ts',

diff --git a/e2e/webpack/src/webpack.legacy.test.ts b/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',

diff --git a/e2e/webpack/src/webpack.test.ts b/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,15 +139,15 @@ 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',
         output: {
           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',

diff --git a/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__ b/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__
@@ -1,13 +1,13 @@
 <% if (webpackPluginOptions) { %>
-const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
 module.exports = {
   output: {
     path: join(__dirname, '<%= offset %><%= webpackPluginOptions.outputPath %>'),
   },
   plugins: [
-    new NxWebpackPlugin({
+    new NxAppWebpackPlugin({
       target: 'node',
       compiler: 'tsc',
       main: '<%= webpackPluginOptions.main %>',

diff --git a/...eact-native/src/generators/web-configuration/files/base-webpack/webpack.config.js__tmpl__ b/...eact-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 %>',

diff --git a/packages/react/index.ts b/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';
diff --git a/packages/react/src/generators/application/__snapshots__/application.spec.ts.snap b/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',

diff --git a/packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__ b/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 %>',

diff --git a/packages/react/webpack-plugin.ts b/packages/react/webpack-plugin.ts
@@ -0,0 +1 @@
+export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
diff --git a/packages/web/src/generators/application/__snapshots__/application.spec.ts.snap b/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',

diff --git a/packages/web/src/generators/application/files/app-webpack/webpack.config.js__tmpl__ b/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 %>',

diff --git a/packages/webpack/app-plugin.ts b/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';
diff --git a/packages/webpack/index.ts b/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';