@nx/webpack 24.0.0-beta.2 → 24.0.0-beta.3

package/dist/index.d.ts

@@ -14,7 +14,6 @@ export type { WebDevServerOptions } from './src/executors/dev-server/schema';
 export * from './src/executors/dev-server/dev-server.impl';
 export * from './src/executors/webpack/lib/normalize-options';
 export type { WebpackExecutorOptions, NormalizedWebpackExecutorOptions, AssetGlobPattern, FileReplacement, } from './src/executors/webpack/schema';
-export * from './src/executors/webpack/webpack.impl';
 export * from './src/utils/get-css-module-local-ident';
 export * from './src/utils/with-nx';
 export * from './src/utils/with-web';

package/dist/index.js

@@ -26,7 +26,6 @@ var init_1 = require("./src/generators/init/init");
 Object.defineProperty(exports, "webpackInitGenerator", { enumerable: true, get: function () { return init_1.webpackInitGenerator; } });
 tslib_1.__exportStar(require("./src/executors/dev-server/dev-server.impl"), exports);
 tslib_1.__exportStar(require("./src/executors/webpack/lib/normalize-options"), exports);
-tslib_1.__exportStar(require("./src/executors/webpack/webpack.impl"), exports);
 tslib_1.__exportStar(require("./src/utils/get-css-module-local-ident"), exports);
 tslib_1.__exportStar(require("./src/utils/with-nx"), exports);
 tslib_1.__exportStar(require("./src/utils/with-web"), exports);

package/dist/internal.d.ts

@@ -6,3 +6,6 @@ export { suppressWebpackComposeHelperWarnings } from './src/utils/deprecation';
 export { WebpackNxBuildCoordinationPlugin } from './src/plugins/webpack-nx-build-coordination-plugin';
 export type { WebSsrDevServerOptions } from './src/executors/ssr-dev-server/schema';
 export { default as ssrDevServerExecutor } from './src/executors/ssr-dev-server/ssr-dev-server.impl';
+export { applyBaseConfig } from './src/plugins/nx-webpack-plugin/lib/apply-base-config';
+export { applyWebConfig } from './src/plugins/nx-webpack-plugin/lib/apply-web-config';
+export { webpackExecutorContext } from './src/plugins/nx-webpack-plugin/lib/normalize-options';

package/dist/internal.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ssrDevServerExecutor = exports.WebpackNxBuildCoordinationPlugin = exports.suppressWebpackComposeHelperWarnings = exports.resolveUserDefinedWebpackConfig = exports.ensureDependencies = exports.deleteOutputDir = exports.findAllNodeModules = exports.findUp = void 0;
+exports.webpackExecutorContext = exports.applyWebConfig = exports.applyBaseConfig = exports.ssrDevServerExecutor = exports.WebpackNxBuildCoordinationPlugin = exports.suppressWebpackComposeHelperWarnings = exports.resolveUserDefinedWebpackConfig = exports.ensureDependencies = exports.deleteOutputDir = exports.findAllNodeModules = exports.findUp = void 0;
 const tslib_1 = require("tslib");
 // Curated internal API surface for other first-party Nx plugins (e.g. @nx/react,
 // @nx/angular, @nx/web, @nx/node, @nx/next, @nx/react-native). Prefer this over
@@ -24,3 +24,9 @@ var webpack_nx_build_coordination_plugin_1 = require("./src/plugins/webpack-nx-b
 Object.defineProperty(exports, "WebpackNxBuildCoordinationPlugin", { enumerable: true, get: function () { return webpack_nx_build_coordination_plugin_1.WebpackNxBuildCoordinationPlugin; } });
 var ssr_dev_server_impl_1 = require("./src/executors/ssr-dev-server/ssr-dev-server.impl");
 Object.defineProperty(exports, "ssrDevServerExecutor", { enumerable: true, get: function () { return tslib_1.__importDefault(ssr_dev_server_impl_1).default; } });
+var apply_base_config_1 = require("./src/plugins/nx-webpack-plugin/lib/apply-base-config");
+Object.defineProperty(exports, "applyBaseConfig", { enumerable: true, get: function () { return apply_base_config_1.applyBaseConfig; } });
+var apply_web_config_1 = require("./src/plugins/nx-webpack-plugin/lib/apply-web-config");
+Object.defineProperty(exports, "applyWebConfig", { enumerable: true, get: function () { return apply_web_config_1.applyWebConfig; } });
+var normalize_options_1 = require("./src/plugins/nx-webpack-plugin/lib/normalize-options");
+Object.defineProperty(exports, "webpackExecutorContext", { enumerable: true, get: function () { return normalize_options_1.webpackExecutorContext; } });

package/dist/src/executors/dev-server/dev-server.impl.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.devServerExecutor = devServerExecutor;
+const normalize_options_1 = require("../../plugins/nx-webpack-plugin/lib/normalize-options");
 const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const operators_1 = require("rxjs/operators");
@@ -8,16 +9,15 @@ const get_dev_server_config_1 = require("./lib/get-dev-server-config");
 const internal_2 = require("@nx/js/internal");
 const run_webpack_1 = require("../../utils/run-webpack");
 const resolve_user_defined_webpack_config_1 = require("../../utils/webpack/resolve-user-defined-webpack-config");
-const deprecation_1 = require("../../utils/deprecation");
-const normalize_options_1 = require("../webpack/lib/normalize-options");
+const normalize_options_2 = require("../webpack/lib/normalize-options");
 const config_1 = require("../../utils/config");
 const js_1 = require("@nx/js");
 async function* devServerExecutor(serveOptions, context) {
-    (0, deprecation_1.warnWebpackDevServerExecutorDeprecation)();
     // Default to dev mode so builds are faster and HMR mode works better.
     process.env.NODE_ENV ??= 'development';
     const { root: projectRoot, sourceRoot } = context.projectsConfigurations.projects[context.projectName];
-    const buildOptions = (0, normalize_options_1.normalizeOptions)(getBuildOptions(serveOptions, context), context.root, projectRoot, sourceRoot);
+    const executorOptions = getBuildOptions(serveOptions, context);
+    const buildOptions = (0, normalize_options_2.normalizeOptions)(executorOptions, context.root, projectRoot, sourceRoot);
     process.env.NX_BUILD_LIBS_FROM_SOURCE = `${buildOptions.buildLibsFromSource}`;
     process.env.NX_BUILD_TARGET = serveOptions.buildTarget;
     // TODO(jack): Figure out a way to port this into NxWebpackPlugin
@@ -29,37 +29,45 @@ async function* devServerExecutor(serveOptions, context) {
         context.configurationName);
         buildOptions.tsConfig = (0, internal_2.createTmpTsConfig)(buildOptions.tsConfig, context.root, target.data.root, dependencies);
         process.env.NX_TSCONFIG_PATH = buildOptions.tsConfig;
+        executorOptions.tsConfig = buildOptions.tsConfig;
     }
-    let config;
     const devServer = (0, get_dev_server_config_1.getDevServerOptions)(context.root, serveOptions, buildOptions);
-    if (buildOptions.webpackConfig) {
-        let userDefinedWebpackConfig = (0, resolve_user_defined_webpack_config_1.resolveUserDefinedWebpackConfig)(buildOptions.webpackConfig, (0, js_1.getRootTsConfigPath)());
-        if (typeof userDefinedWebpackConfig.then === 'function') {
-            userDefinedWebpackConfig = await userDefinedWebpackConfig;
-        }
-        // Only add the dev server option if user is composable plugin.
-        // Otherwise, user should define `devServer` option directly in their webpack config.
-        if (typeof userDefinedWebpackConfig === 'function' &&
-            ((0, config_1.isNxWebpackComposablePlugin)(userDefinedWebpackConfig) ||
-                !buildOptions.standardWebpackConfigFunction)) {
-            config = await userDefinedWebpackConfig({ devServer }, {
-                options: buildOptions,
-                context,
-                configuration: serveOptions.buildTarget.split(':')[2],
-            });
-        }
-        else if (userDefinedWebpackConfig) {
-            // New behavior, we want the webpack config to export object
-            // If the config is a function, we assume it's a standard webpack config function and it's async
-            if (typeof userDefinedWebpackConfig === 'function') {
-                config = await userDefinedWebpackConfig(process.env.NODE_ENV, {});
+    const config = await normalize_options_1.webpackExecutorContext.run({
+        options: executorOptions,
+        target: (0, devkit_1.parseTargetString)(serveOptions.buildTarget, context.projectGraph),
+    }, async () => {
+        let config;
+        if (buildOptions.webpackConfig) {
+            let userDefinedWebpackConfig = (0, resolve_user_defined_webpack_config_1.resolveUserDefinedWebpackConfig)(buildOptions.webpackConfig, (0, js_1.getRootTsConfigPath)());
+            if (typeof userDefinedWebpackConfig.then === 'function') {
+                userDefinedWebpackConfig = await userDefinedWebpackConfig;
             }
-            else {
-                config = userDefinedWebpackConfig;
+            // Legacy config functions receive the dev server options as their input config.
+            if (typeof userDefinedWebpackConfig === 'function' &&
+                ((0, config_1.isNxWebpackComposablePlugin)(userDefinedWebpackConfig) ||
+                    !buildOptions.standardWebpackConfigFunction)) {
+                config = await userDefinedWebpackConfig({ devServer }, {
+                    options: buildOptions,
+                    context,
+                    configuration: serveOptions.buildTarget.split(':')[2],
+                });
             }
-            config.devServer ??= devServer;
+            else if (userDefinedWebpackConfig) {
+                // New behavior, we want the webpack config to export object
+                // If the config is a function, we assume it's a standard webpack config function and it's async
+                if (typeof userDefinedWebpackConfig === 'function') {
+                    config = await userDefinedWebpackConfig(process.env.NODE_ENV, {});
+                }
+                else {
+                    config = userDefinedWebpackConfig;
+                }
+            }
+            // Configs that ignore their arguments still get the target's dev server options.
+            if (config)
+                config.devServer ??= devServer;
         }
-    }
+        return config;
+    });
     // Lazy-loaded: optional peers absent during project-graph discovery.
     const webpack = require('webpack');
     const WebpackDevServer = require('webpack-dev-server');

package/dist/src/generators/configuration/configuration.js

@@ -2,24 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configurationGenerator = configurationGenerator;
 exports.configurationGeneratorInternal = configurationGeneratorInternal;
-const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
-const has_plugin_1 = require("../../utils/has-plugin");
-const deprecation_1 = require("../../utils/deprecation");
-const internal_2 = require("@nx/js/internal");
 const ensure_dependencies_1 = require("../../utils/ensure-dependencies");
 const versions_1 = require("../../utils/versions");
 function configurationGenerator(tree, options) {
-    return configurationGeneratorInternal(tree, { addPlugin: false, ...options });
+    return configurationGeneratorInternal(tree, options);
 }
 async function configurationGeneratorInternal(tree, options) {
     (0, versions_1.assertSupportedWebpackVersion)(tree);
     const tasks = [];
-    const nxJson = (0, devkit_1.readNxJson)(tree);
-    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
-        nxJson.useInferencePlugins !== false;
-    options.addPlugin ??= addPluginDefault;
     const initTask = await (0, init_1.webpackInitGenerator)(tree, {
         ...options,
         skipFormat: true,
@@ -30,13 +22,6 @@ async function configurationGeneratorInternal(tree, options) {
     });
     tasks.push(depsTask);
     checkForTargetConflicts(tree, options);
-    if (!(0, has_plugin_1.hasPlugin)(tree)) {
-        (0, deprecation_1.warnWebpackExecutorGenerating)();
-        addBuildTarget(tree, options);
-        if (options.devServer) {
-            addServeTarget(tree, options);
-        }
-    }
     createWebpackConfig(tree, options);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
@@ -64,42 +49,16 @@ function createWebpackConfig(tree, options) {
         tsConfig: options.tsConfig ?? (0, devkit_1.joinPathFragments)(project.root, 'tsconfig.app.json'),
         webpackConfig: (0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'),
     };
-    if (options.target === 'web') {
-        tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), (0, has_plugin_1.hasPlugin)(tree)
-            ? `
-const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
-const { join } = require('path');
-
-module.exports = {
-  output: {
-    path: join(__dirname, '${(0, devkit_1.offsetFromRoot)(project.root)}${buildOptions.outputPath}'),
-  },
-  plugins: [
-    new NxAppWebpackPlugin({
-      target: '${buildOptions.target}',
-      tsConfig: '${buildOptions.tsConfig}',
-      compiler: '${buildOptions.compiler}',
-      main: '${buildOptions.main}',
-      outputHashing: '${buildOptions.target !== 'web' ? 'none' : 'all'}',
-    })
-  ],
-}
-`
-            : `
-const { composePlugins, withNx, withWeb } = require('@nx/webpack');
-
-// Nx plugins for webpack.
-module.exports = composePlugins(withNx(), withWeb(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. \`config.plugins.push(new MyPlugin())\`
-  config.output.clean = true;
-  return config;
-});
-`);
+    if (options.babelConfig) {
+        buildOptions.babelConfig = options.babelConfig;
+    }
+    else if (options.compiler === 'babel') {
+        // Without a config file babel-loader looks for <projectRoot>/.babelrc and the build fails.
+        (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(project.root, '.babelrc'), {
+            presets: ['@nx/js/babel'],
+        });
     }
-    else {
-        tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), (0, has_plugin_1.hasPlugin)(tree)
-            ? `
+    tree.write((0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'), `
 const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
@@ -111,92 +70,15 @@ module.exports = {
     new NxAppWebpackPlugin({
       target: '${buildOptions.target}',
       tsConfig: '${buildOptions.tsConfig}',
-      compiler: '${buildOptions.compiler}',
+      compiler: '${buildOptions.compiler}',${buildOptions.babelConfig
+        ? `
+      babelConfig: '${buildOptions.babelConfig}',`
+        : ''}
       main: '${buildOptions.main}',
       outputHashing: '${buildOptions.target !== 'web' ? 'none' : 'all'}',
     })
   ],
 }
-`
-            : `
-const { composePlugins, withNx } = require('@nx/webpack');
-
-// Nx plugins for webpack.
-module.exports = composePlugins(withNx(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. \`config.plugins.push(new MyPlugin())\`
-  config.output.clean = true;
-  return config;
-});
 `);
-    }
-}
-function addBuildTarget(tree, options) {
-    (0, internal_1.addBuildTargetDefaults)(tree, '@nx/webpack:webpack', 'build', [
-        internal_2.TS_SOLUTION_SETUP_TSCONFIG_INPUT,
-    ]);
-    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    const buildOptions = {
-        target: options.target,
-        outputPath: (0, devkit_1.joinPathFragments)('dist', project.root),
-        compiler: options.compiler ?? 'swc',
-        main: options.main ?? (0, devkit_1.joinPathFragments)(project.root, 'src/main.ts'),
-        tsConfig: options.tsConfig ?? (0, devkit_1.joinPathFragments)(project.root, 'tsconfig.app.json'),
-        webpackConfig: (0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js'),
-    };
-    if (options.webpackConfig) {
-        buildOptions.webpackConfig = options.webpackConfig;
-    }
-    if (options.babelConfig) {
-        buildOptions.babelConfig = options.babelConfig;
-    }
-    else if (options.compiler === 'babel') {
-        // If no babel config file is provided then write a default one, otherwise build will fail.
-        (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(project.root, '.babelrc'), {
-            presets: ['@nx/js/babel'],
-        });
-    }
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, {
-        ...project,
-        targets: {
-            ...project.targets,
-            build: {
-                executor: '@nx/webpack:webpack',
-                outputs: ['{options.outputPath}'],
-                defaultConfiguration: 'production',
-                options: buildOptions,
-                configurations: {
-                    production: {
-                        optimization: true,
-                        outputHashing: options.target === 'web' ? 'all' : 'none',
-                        sourceMap: false,
-                        namedChunks: false,
-                        extractLicenses: true,
-                        vendorChunk: false,
-                    },
-                },
-            },
-        },
-    });
-}
-function addServeTarget(tree, options) {
-    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, {
-        ...project,
-        targets: {
-            ...project.targets,
-            serve: {
-                executor: '@nx/webpack:dev-server',
-                options: {
-                    buildTarget: `${options.project}:build`,
-                },
-                configurations: {
-                    production: {
-                        buildTarget: `${options.project}:build:production`,
-                    },
-                },
-            },
-        },
-    });
 }
 exports.default = configurationGenerator;

package/dist/src/generators/configuration/schema.d.ts

@@ -10,5 +10,4 @@ export interface ConfigurationGeneratorSchema {
   target?: 'node' | 'web' | 'webworker';
   webpackConfig?: string;
   babelConfig?: string;
-  addPlugin?: boolean;
 }

package/dist/src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin.js

@@ -32,58 +32,30 @@ async function convertConfigToWebpackPluginGenerator(tree, options) {
                 throw new Error(hasError);
             }
             const webpackConfigPath = currentTargetOptions?.webpackConfig || '';
-            if (webpackConfigPath && tree.exists(webpackConfigPath)) {
-                let { withNxConfig: webpackOptions, withReactConfig } = (0, extract_webpack_options_1.extractWebpackOptions)(tree, webpackConfigPath);
-                // if webpackOptions === undefined
-                // withNx was not found in the webpack.config.js file so we should skip this project
-                if (webpackOptions !== undefined) {
-                    let parsedOptions = {};
-                    if (webpackOptions) {
-                        parsedOptions = JSON.parse(preprocessText(webpackOptions.getText()));
-                        parsedOptions = (0, normalize_path_options_1.normalizePathOptions)(project.root, parsedOptions);
-                    }
-                    target.options.standardWebpackConfigFunction = true;
-                    (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
-                    const { dir, name, ext } = (0, path_1.parse)(webpackConfigPath);
-                    tree.rename(webpackConfigPath, `${(0, devkit_1.joinPathFragments)(dir, `${name}.old${ext}`)}`);
-                    tree.write(webpackConfigPath, (0, devkit_1.stripIndents) `
-            const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
-            const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
-            const { useLegacyNxPlugin } = require('@nx/webpack');
-            
-            // This file was migrated using @nx/webpack:convert-config-to-webpack-plugin from your './webpack.config.old.js'
-            // Please check that the options here are correct as they were moved from the old webpack.config.js to this file.
-            const options = ${webpackOptions ? JSON.stringify(parsedOptions, null, 2) : '{}'};
-
-            /**
-              * @type{import('webpack').WebpackOptionsNormalized}
-            */
-            module.exports = async () => ({
-              plugins: [
-                ${webpackOptions
-                        ? 'new NxAppWebpackPlugin(options)'
-                        : 'new NxAppWebpackPlugin()'},
-                ${withReactConfig
-                        ? `new NxReactWebpackPlugin(${withReactConfig.getText()})`
-                        : `new NxReactWebpackPlugin({
-                  // Uncomment this line if you don't want to use SVGR
-                  // See: https://react-svgr.com/
-                  // svgr: false
-                  })`},
-                // NOTE: useLegacyNxPlugin ensures that the non-standard Webpack configuration file previously used still works.
-                // To remove its usage, move options such as "plugins" into this file as standard Webpack configuration options.
-                // To enhance configurations after Nx plugins have applied, you can add a new plugin with the \`apply\` method.
-                // e.g. \`{ apply: (compiler) => { /* modify compiler.options */ }\`
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                await useLegacyNxPlugin(require('./webpack.config.old${ext}'), options),
-              ],
-              });
-          `);
-                    migrated++;
-                }
+            if (webpackConfigPath &&
+                tree.exists(webpackConfigPath) &&
+                convertConfigFile(tree, project.root, webpackConfigPath)) {
+                target.options.standardWebpackConfigFunction = true;
+                (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
+                migrated++;
             }
         }
     });
+    // Projects already on the inference plugin keep their options in the config,
+    // so only the config needs converting.
+    for (const [projectName, project] of projects) {
+        if (options.project && projectName !== options.project) {
+            continue;
+        }
+        if (Object.values(project.targets ?? {}).some((target) => target.executor === '@nx/webpack:webpack')) {
+            continue;
+        }
+        const webpackConfigPath = (0, devkit_1.joinPathFragments)(project.root, 'webpack.config.js');
+        if (tree.exists(webpackConfigPath) &&
+            convertConfigFile(tree, project.root, webpackConfigPath)) {
+            migrated++;
+        }
+    }
     if (migrated === 0) {
         throw new Error('Could not find any projects to migrate.');
     }
@@ -91,4 +63,65 @@ async function convertConfigToWebpackPluginGenerator(tree, options) {
         await (0, devkit_1.formatFiles)(tree);
     }
 }
+/** Returns whether the config used `withNx` and was converted. */
+function convertConfigFile(tree, projectRoot, webpackConfigPath) {
+    let { withNxConfig: webpackOptions, withReactConfig, strippedSource, } = (0, extract_webpack_options_1.extractWebpackOptions)(tree, webpackConfigPath);
+    // if webpackOptions === undefined
+    // withNx was not found in the webpack.config.js file so we should skip this project
+    if (webpackOptions !== undefined) {
+        let parsedOptions = {};
+        if (webpackOptions) {
+            // Parse before writing anything: a non-literal option value leaves the
+            // project untouched for the migration prompt instead of a config whose
+            // helper calls are gone and whose options never made it across.
+            try {
+                parsedOptions = JSON.parse(preprocessText(webpackOptions.getText()));
+            }
+            catch {
+                throw new Error(`Could not read the \`withNx\` options in ${webpackConfigPath}. They must be a plain object literal; spreads, variables and function calls are not supported.`);
+            }
+            parsedOptions = (0, normalize_path_options_1.normalizePathOptions)(projectRoot, parsedOptions);
+        }
+        if (strippedSource !== undefined) {
+            tree.write(webpackConfigPath, strippedSource);
+        }
+        const { dir, name, ext } = (0, path_1.parse)(webpackConfigPath);
+        tree.rename(webpackConfigPath, `${(0, devkit_1.joinPathFragments)(dir, `${name}.old${ext}`)}`);
+        // `@nx/webpack` does not depend on `@nx/react`, so only React configs may require it.
+        const usesReact = withReactConfig !== undefined;
+        const reactRequire = usesReact
+            ? `\nconst { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');`
+            : '';
+        const reactPlugin = usesReact
+            ? `\nnew NxReactWebpackPlugin(${withReactConfig ? withReactConfig.getText() : ''}),`
+            : '';
+        tree.write(webpackConfigPath, (0, devkit_1.stripIndents) `
+    const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');${reactRequire}
+    const { useLegacyNxPlugin } = require('@nx/webpack');
+    
+    // This file was migrated using @nx/webpack:convert-config-to-webpack-plugin from your './webpack.config.old.js'
+    // Please check that the options here are correct as they were moved from the old webpack.config.js to this file.
+    const options = ${webpackOptions ? JSON.stringify(parsedOptions, null, 2) : '{}'};
+
+    /**
+      * @type{import('webpack').WebpackOptionsNormalized}
+    */
+    module.exports = async () => ({
+      plugins: [
+        ${webpackOptions
+            ? 'new NxAppWebpackPlugin(options)'
+            : 'new NxAppWebpackPlugin()'},${reactPlugin}
+        // NOTE: useLegacyNxPlugin ensures that the non-standard Webpack configuration file previously used still works.
+        // To remove its usage, move options such as "plugins" into this file as standard Webpack configuration options.
+        // To enhance configurations after Nx plugins have applied, you can add a new plugin with the \`apply\` method.
+        // e.g. \`{ apply: (compiler) => { /* modify compiler.options */ }\`
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        await useLegacyNxPlugin(require('./webpack.config.old${ext}'), options),
+      ],
+      });
+  `);
+        return true;
+    }
+    return false;
+}
 exports.default = convertConfigToWebpackPluginGenerator;

package/dist/src/generators/convert-config-to-webpack-plugin/lib/extract-webpack-options.d.ts

@@ -3,4 +3,5 @@ import * as ts from 'typescript';
 export declare function extractWebpackOptions(tree: Tree, webpackConfigPath: string): {
     withNxConfig: "" | ts.Node;
     withReactConfig: "" | ts.Node;
+    strippedSource: string;
 };

package/dist/src/generators/convert-config-to-webpack-plugin/lib/extract-webpack-options.js

@@ -15,6 +15,9 @@ function extractWebpackOptions(tree, webpackConfigPath) {
     const withWebCall = (0, tsquery_1.query)(sourceFile, withWebQuery);
     // If the config is empty set to empty string to avoid undefined. Undefined is used to check if the withNx exists inside of the config file.
     let withNxConfig, withReactConfig;
+    // Returned rather than written here so the caller can reject configs whose
+    // options are not a plain literal before touching the file.
+    let strippedSource;
     withWebCall.forEach((node) => {
         const argument = node.arguments[0] || '';
         withNxConfig = argument; // Since withWeb and withNx use the same config object and both should not exist in the same file, we can reuse the withNxConfig variable.
@@ -37,9 +40,35 @@ function extractWebpackOptions(tree, webpackConfigPath) {
         updatedSource = removeImportDeclarations(updatedSource, 'withNx', '@nx/webpack');
         updatedSource = removeImportDeclarations(updatedSource, 'withWeb', '@nx/webpack');
         updatedSource = removeImportDeclarations(updatedSource, 'withReact', '@nx/react');
-        tree.write(webpackConfigPath, updatedSource);
+        updatedSource = inlineComposePlugins(updatedSource);
+        updatedSource = removeImportDeclarations(updatedSource, 'composePlugins', '@nx/webpack');
+        strippedSource = updatedSource;
     }
-    return { withNxConfig, withReactConfig };
+    return { withNxConfig, withReactConfig, strippedSource };
+}
+// `composePlugins` is an inert stub since Nx v24, so the old config composes its
+// remaining callbacks with a local copy.
+function inlineComposePlugins(source) {
+    let found = false;
+    const updatedSource = (0, tsquery_1.replace)(source, 'CallExpression > Identifier[name="composePlugins"]', (node) => {
+        if (node.parent.expression !== node) {
+            return node.getText();
+        }
+        found = true;
+        return 'composeLegacyPlugins';
+    });
+    if (!found)
+        return source;
+    return `${updatedSource}
+function composeLegacyPlugins(...plugins) {
+  return async (config, ctx) => {
+    for (const plugin of plugins) {
+      config = await (await plugin)(config, ctx);
+    }
+    return config;
+  };
+}
+`;
 }
 function removeCallExpressions(source, functionNames) {
     let modifiedSource = source;

package/dist/src/generators/convert-config-to-webpack-plugin/schema.json

@@ -1,13 +1,13 @@
 {
   "$schema": "https://json-schema.org/schema",
   "$id": "NxWebpackConvertConfigToWebpackPlugin",
-  "description": "Convert existing Webpack project(s) using `@nx/webpack:webpack` executor that uses `withNx` to use `NxAppWebpackPlugin`. Defaults to migrating all projects. Pass '--project' to migrate only one target.",
+  "description": "Convert existing Webpack config(s) that use `withNx` to use `NxAppWebpackPlugin`, for projects on the `@nx/webpack:webpack` executor or the `@nx/webpack/plugin` inference plugin. Defaults to migrating all projects. Pass '--project' to migrate only one target.",
   "title": "Convert Webpack project using withNx to NxAppWebpackPlugin",
   "type": "object",
   "properties": {
     "project": {
       "type": "string",
-      "description": "The project to convert from using the `@nx/webpack:webpack` executor and `withNx` plugin to use `NxAppWebpackPlugin`.",
+      "description": "The project whose webpack config to convert from the `withNx` plugin to `NxAppWebpackPlugin`.",
       "x-priority": "important"
     },
     "skipFormat": {

package/dist/src/generators/convert-to-inferred/convert-to-inferred.js

@@ -40,7 +40,7 @@ async function convertToInferred(tree, options) {
         const convertMessage = [...logger.loggedMessages.values()]
             .flat()
             .find((v) => v.includes('@nx/webpack:convert-config-to-webpack-plugin'));
-        if (convertMessage.length > 0) {
+        if (convertMessage?.length > 0) {
             logger.flushLogs((message) => !convertMessage.includes(message));
             throw new Error(convertMessage);
         }
@@ -56,9 +56,10 @@ async function convertToInferred(tree, options) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return (0, devkit_1.runTasksInSerial)(installCallback, () => {
-        migrationContext.logger.flushLogs();
-    });
+    // Flushed now rather than in the callback so remove-deprecated-executors, which
+    // skips the install callback, still prints these.
+    migrationContext.logger.flushLogs();
+    return installCallback;
 }
 function skipProjectFilterFactory(tree) {
     return function skipProjectFilter(projectConfiguration) {

package/dist/src/generators/convert-to-inferred/utils/build-post-target-transformer.js

@@ -118,9 +118,17 @@ function updateWebpackConfig(tree, webpackConfig, pluginOptions) {
 function setOptionsInWebpackConfig(tree, text, sourceFile, webpackConfig, pluginOptions) {
     const { default: defaultOptions, ...configurationOptions } = pluginOptions;
     const optionsSelector = 'VariableStatement:has(VariableDeclaration:has(Identifier[name=options]))';
-    const optionsVariable = (0, tsquery_1.query)(sourceFile, optionsSelector)[0];
-    // This is assuming the `options` variable will be available since it's what the
-    // `convert-config-to-webpack-plugin` generates
+    let optionsVariable = (0, tsquery_1.query)(sourceFile, optionsSelector)[0];
+    if (!optionsVariable) {
+        const plugin = (0, tsquery_1.query)(sourceFile, 'NewExpression:has(Identifier[name=NxAppWebpackPlugin])')[0];
+        const argument = plugin.arguments?.[0];
+        if (argument && !ts.isObjectLiteralExpression(argument)) {
+            throw new Error('Move NxAppWebpackPlugin options into an object literal before converting this config.');
+        }
+        text = `const options = ${argument?.getText(sourceFile) ?? '{}'};\n${text}`;
+        sourceFile = (0, tsquery_1.ast)(text);
+        optionsVariable = (0, tsquery_1.query)(sourceFile, optionsSelector)[0];
+    }
     let defaultOptionsObject;
     const optionsObject = (0, tsquery_1.query)(optionsVariable, 'ObjectLiteralExpression')[0];
     if (optionsObject.properties.length === 0) {
@@ -188,8 +196,8 @@ function setOptionsInNxWebpackPlugin(tree, text, sourceFile, webpackConfig) {
 function setOptionsInLegacyNxPlugin(tree, text, sourceFile, webpackConfig) {
     const legacyNxPluginSelector = 'AwaitExpression CallExpression:has(Identifier[name=useLegacyNxPlugin])';
     const legacyNxPlugin = (0, tsquery_1.query)(sourceFile, legacyNxPluginSelector)[0];
-    // we're assuming the `useLegacyNxPlugin` function is being called since it's what the `convert-config-to-webpack-plugin` generates
-    // we've already "ensured" that the `convert-config-to-webpack-plugin` was run by checking for the `NxAppWebpackPlugin` in the project validation
+    if (!legacyNxPlugin)
+        return;
     const updatedLegacyNxPlugin = ts.factory.updateCallExpression(legacyNxPlugin, legacyNxPlugin.expression, undefined, [legacyNxPlugin.arguments[0], ts.factory.createIdentifier('buildOptions')]);
     text = `${text.slice(0, legacyNxPlugin.getStart())}${ts
         .createPrinter()