@nx/webpack 19.4.0-beta.0 → 19.4.0-beta.2

package/generators.json

@@ -5,7 +5,7 @@
     "init": {
       "factory": "./src/generators/init/init#webpackInitGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
-      "description": "Initialize the `@nrwl/webpack` plugin.",
+      "description": "Initialize the `@nx/webpack` plugin.",
       "aliases": ["ng-add"],
       "hidden": true
     },
@@ -15,6 +15,16 @@
       "schema": "./src/generators/configuration/schema.json",
       "description": "Add webpack configuration to a project.",
       "hidden": true
+    },
+    "convert-config-to-webpack-plugin": {
+      "factory": "./src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin",
+      "schema": "./src/generators/convert-config-to-webpack-plugin/schema.json",
+      "description": "Convert the project to use the `NxAppWebpackPlugin` and `NxReactWebpackPlugin`."
+    },
+    "convert-to-inferred": {
+      "factory": "./src/generators/convert-to-inferred/convert-to-inferred#convertToInferred",
+      "schema": "./src/generators/convert-to-inferred/schema.json",
+      "description": "Convert existing Webpack project(s) using `@nx/webpack:wepack` executor to use `@nx/webpack/plugin`."
     }
   }
 }

package/index.d.ts

@@ -1,7 +1,9 @@
 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 };
+import { convertConfigToWebpackPluginGenerator } from './src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin';
+import { useLegacyNxPlugin } from './src/plugins/use-legacy-nx-plugin/use-legacy-nx-plugin';
+export { configurationGenerator, convertConfigToWebpackPluginGenerator, useLegacyNxPlugin, };
 /** @deprecated Use `configurationGenerator` instead. */
 export declare const webpackProjectGenerator: typeof configurationGenerator;
 /** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */

package/index.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.webpackInitGenerator = exports.NxTsconfigPathsWebpackPlugin = exports.NxWebpackPlugin = exports.webpackProjectGenerator = exports.configurationGenerator = void 0;
+exports.webpackInitGenerator = exports.NxTsconfigPathsWebpackPlugin = exports.NxWebpackPlugin = exports.webpackProjectGenerator = exports.useLegacyNxPlugin = exports.convertConfigToWebpackPluginGenerator = exports.configurationGenerator = void 0;
 const tslib_1 = require("tslib");
 const configuration_1 = require("./src/generators/configuration/configuration");
 Object.defineProperty(exports, "configurationGenerator", { enumerable: true, get: function () { return configuration_1.configurationGenerator; } });
 const nx_app_webpack_plugin_1 = require("./src/plugins/nx-webpack-plugin/nx-app-webpack-plugin");
 const nx_tsconfig_paths_webpack_plugin_1 = require("./src/plugins/nx-typescript-webpack-plugin/nx-tsconfig-paths-webpack-plugin");
+const convert_config_to_webpack_plugin_1 = require("./src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin");
+Object.defineProperty(exports, "convertConfigToWebpackPluginGenerator", { enumerable: true, get: function () { return convert_config_to_webpack_plugin_1.convertConfigToWebpackPluginGenerator; } });
+const use_legacy_nx_plugin_1 = require("./src/plugins/use-legacy-nx-plugin/use-legacy-nx-plugin");
+Object.defineProperty(exports, "useLegacyNxPlugin", { enumerable: true, get: function () { return use_legacy_nx_plugin_1.useLegacyNxPlugin; } });
 // Exported for backwards compatibility in case a plugin is using the old name.
 /** @deprecated Use `configurationGenerator` instead. */
 exports.webpackProjectGenerator = configuration_1.configurationGenerator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "19.4.0-beta.0",
+  "version": "19.4.0-beta.2",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.2",
+    "@phenomnomnominal/tsquery": "~5.0.1",
     "ajv": "^8.12.0",
     "autoprefixer": "^10.4.9",
     "babel-loader": "^9.1.2",
@@ -64,9 +65,9 @@
     "webpack-dev-server": "^4.9.3",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "19.4.0-beta.0",
-    "@nx/js": "19.4.0-beta.0",
-    "@nrwl/webpack": "19.4.0-beta.0"
+    "@nx/devkit": "19.4.0-beta.2",
+    "@nx/js": "19.4.0-beta.2",
+    "@nrwl/webpack": "19.4.0-beta.2"
   },
   "publishConfig": {
     "access": "public"

package/plugin.d.ts

@@ -1 +1 @@
-export { createNodes } from './src/plugins/plugin';
+export { createNodes, createNodesV2, type WebpackPluginOptions, } from './src/plugins/plugin';

package/plugin.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNodes = void 0;
+exports.createNodesV2 = exports.createNodes = void 0;
 var plugin_1 = require("./src/plugins/plugin");
 Object.defineProperty(exports, "createNodes", { enumerable: true, get: function () { return plugin_1.createNodes; } });
+Object.defineProperty(exports, "createNodesV2", { enumerable: true, get: function () { return plugin_1.createNodesV2; } });

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

@@ -50,7 +50,13 @@ async function* devServerExecutor(serveOptions, context) {
         }
         else if (userDefinedWebpackConfig) {
             // New behavior, we want the webpack config to export object
-            config = userDefinedWebpackConfig;
+            // 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;
+            }
             config.devServer ??= devServer;
         }
     }

package/src/executors/webpack/webpack.impl.js

@@ -41,6 +41,11 @@ async function getWebpackConfigs(options, context) {
         });
     }
     else if (userDefinedWebpackConfig) {
+        if (typeof userDefinedWebpackConfig === 'function') {
+            // assume it's an async standard webpack config function
+            // https://webpack.js.org/configuration/configuration-types/#exporting-a-promise
+            return await userDefinedWebpackConfig(process.env.NODE_ENV, {});
+        }
         // New behavior, we want the webpack config to export object
         return userDefinedWebpackConfig;
     }

package/src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin.d.ts

@@ -0,0 +1,7 @@
+import { Tree } from '@nx/devkit';
+interface Schema {
+    project?: string;
+    skipFormat?: boolean;
+}
+export declare function convertConfigToWebpackPluginGenerator(tree: Tree, options: Schema): Promise<void>;
+export default convertConfigToWebpackPluginGenerator;

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertConfigToWebpackPluginGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const extract_webpack_options_1 = require("./lib/extract-webpack-options");
+const normalize_path_options_1 = require("./lib/normalize-path-options");
+const path_1 = require("path");
+const validate_project_1 = require("./lib/validate-project");
+// Make text JSON compatible
+const preprocessText = (text) => {
+    return text
+        .replace(/(\w+):/g, '"$1":') // Quote property names
+        .replace(/'/g, '"') // Convert single quotes to double quotes
+        .replace(/,(\s*[}\]])/g, '$1') // Remove trailing commas
+        .replace(/(\r\n|\n|\r|\t)/gm, ''); // Remove newlines and tabs
+};
+async function convertConfigToWebpackPluginGenerator(tree, options) {
+    let migrated = 0;
+    const projects = (0, devkit_1.getProjects)(tree);
+    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (currentTargetOptions, projectName, targetName, configurationName) => {
+        if (options.project && projectName !== options.project) {
+            return;
+        }
+        if (!configurationName) {
+            const project = projects.get(projectName);
+            const target = project.targets[targetName];
+            const hasError = (0, validate_project_1.validateProject)(tree, project);
+            if (hasError) {
+                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'), options),
+              ],
+              });
+          `);
+                    migrated++;
+                }
+            }
+        }
+    });
+    if (migrated === 0) {
+        throw new Error('Could not find any projects to migrate.');
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+exports.convertConfigToWebpackPluginGenerator = convertConfigToWebpackPluginGenerator;
+exports.default = convertConfigToWebpackPluginGenerator;

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

@@ -0,0 +1,6 @@
+import { Tree } from '@nx/devkit';
+import * as ts from 'typescript';
+export declare function extractWebpackOptions(tree: Tree, webpackConfigPath: string): {
+    withNxConfig: "" | ts.Node;
+    withReactConfig: "" | ts.Node;
+};

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractWebpackOptions = void 0;
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const ts = require("typescript");
+function extractWebpackOptions(tree, webpackConfigPath) {
+    const source = tree.read(webpackConfigPath).toString('utf-8');
+    const ast = tsquery_1.tsquery.ast(source);
+    const withNxQuery = 'CallExpression:has(Identifier[name="withNx"])';
+    const withReactQuery = 'CallExpression:has(Identifier[name="withReact"])';
+    const withWebQuery = 'CallExpression:has(Identifier[name="withWeb"])';
+    const withNxCall = (0, tsquery_1.tsquery)(ast, withNxQuery);
+    const withReactCall = (0, tsquery_1.tsquery)(ast, withReactQuery);
+    const withWebCall = (0, tsquery_1.tsquery)(ast, 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;
+    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.
+    });
+    withNxCall.forEach((node) => {
+        const argument = node.arguments[0] || ''; // The first argument is the config object
+        withNxConfig = argument;
+    });
+    withReactCall.forEach((node) => {
+        const argument = node.arguments[0] || '';
+        withReactConfig = argument;
+    });
+    if (withNxConfig !== undefined) {
+        // Only remove the withNx and withReact calls if they exist
+        let updatedSource = removeCallExpressions(source, [
+            'withNx',
+            'withReact',
+            'withWeb',
+        ]);
+        updatedSource = removeImportDeclarations(updatedSource, 'withNx', '@nx/webpack');
+        updatedSource = removeImportDeclarations(updatedSource, 'withWeb', '@nx/webpack');
+        updatedSource = removeImportDeclarations(updatedSource, 'withReact', '@nx/react');
+        tree.write(webpackConfigPath, updatedSource);
+    }
+    return { withNxConfig, withReactConfig };
+}
+exports.extractWebpackOptions = extractWebpackOptions;
+function removeCallExpressions(source, functionNames) {
+    let modifiedSource = source;
+    functionNames.forEach((functionName) => {
+        const callExpressionQuery = `CallExpression:has(Identifier[name="composePlugins"]) > CallExpression:has(Identifier[name="${functionName}"])`;
+        modifiedSource = tsquery_1.tsquery.replace(modifiedSource, callExpressionQuery, () => {
+            return ''; // Removes the entire CallExpression
+        });
+    });
+    return modifiedSource;
+}
+function removeImportDeclarations(source, importName, moduleName) {
+    const sourceFile = tsquery_1.tsquery.ast(source);
+    const modifiedStatements = sourceFile.statements
+        .map((statement) => {
+        if (!ts.isVariableStatement(statement))
+            return statement;
+        const declarationList = statement.declarationList;
+        const newDeclarations = declarationList.declarations
+            .map((declaration) => {
+            if (!ts.isVariableDeclaration(declaration) ||
+                !declaration.initializer)
+                return declaration;
+            if (ts.isCallExpression(declaration.initializer) &&
+                ts.isIdentifier(declaration.initializer.expression)) {
+                const callExpr = declaration.initializer.expression;
+                if (callExpr.text === 'require' &&
+                    declaration.initializer.arguments[0]
+                        ?.getText()
+                        .replace(/['"]/g, '') === moduleName) {
+                    if (ts.isObjectBindingPattern(declaration.name)) {
+                        const bindingElements = declaration.name.elements.filter((element) => {
+                            const elementName = element.name.getText();
+                            return elementName !== importName;
+                        });
+                        if (bindingElements.length > 0) {
+                            const newBindingPattern = ts.factory.updateObjectBindingPattern(declaration.name, bindingElements);
+                            // Update the variable declaration with the new binding pattern without the specified import name
+                            return ts.factory.updateVariableDeclaration(declaration, newBindingPattern, declaration.exclamationToken, declaration.type, declaration.initializer);
+                        }
+                        else {
+                            return null; // Remove this declaration entirely if no bindings remain
+                        }
+                    }
+                }
+            }
+            return declaration;
+        })
+            .filter(Boolean);
+        if (newDeclarations.length > 0) {
+            const newDeclarationList = ts.factory.updateVariableDeclarationList(declarationList, newDeclarations);
+            return ts.factory.updateVariableStatement(statement, statement.modifiers, newDeclarationList);
+        }
+        else {
+            return null; // Remove the entire statement
+        }
+    })
+        .filter(Boolean);
+    // Use printer to format the source code and rewrite the modified
+    const newSourceFile = ts.factory.updateSourceFile(sourceFile, modifiedStatements);
+    const printer = ts.createPrinter();
+    const formattedSource = printer.printFile(newSourceFile);
+    return formattedSource;
+}

package/src/generators/convert-config-to-webpack-plugin/lib/normalize-path-options.d.ts

@@ -0,0 +1,2 @@
+import { WebpackExecutorOptions } from '../../../executors/webpack/schema';
+export declare function normalizePathOptions(projectRoot: string, options: Partial<WebpackExecutorOptions>): Partial<WebpackExecutorOptions>;

package/src/generators/convert-config-to-webpack-plugin/lib/normalize-path-options.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizePathOptions = void 0;
+const utils_1 = require("./utils");
+const executorFieldsToNormalize = [
+    'outputPath',
+    'index',
+    'main',
+    'assets',
+    'tsConfig',
+    'styles',
+    'babelConfig',
+    'additionalEntryPoints',
+    'scripts',
+    'fileReplacements',
+    'postcssConfig',
+    'stylePreprocessorOptions',
+    'publicPath',
+];
+function normalizePathOptions(projectRoot, options) {
+    for (const [key, value] of Object.entries(options)) {
+        if (!executorFieldsToNormalize.includes(key)) {
+            continue;
+        }
+        options[key] = normalizePath(projectRoot, key, value);
+    }
+    return options;
+}
+exports.normalizePathOptions = normalizePathOptions;
+function normalizePath(projectRoot, key, value) {
+    if (!value)
+        return value;
+    switch (key) {
+        case 'assets':
+            return value.map((asset) => {
+                if (typeof asset === 'string') {
+                    return (0, utils_1.toProjectRelativePath)(asset, projectRoot);
+                }
+                return {
+                    ...asset,
+                    input: (0, utils_1.toProjectRelativePath)(asset.input, projectRoot),
+                    output: (0, utils_1.toProjectRelativePath)(asset.output, projectRoot),
+                };
+            });
+        case 'styles':
+        case 'scripts':
+            return value.map((item) => {
+                if (typeof item === 'string') {
+                    return (0, utils_1.toProjectRelativePath)(item, projectRoot);
+                }
+                return {
+                    ...item,
+                    input: (0, utils_1.toProjectRelativePath)(item.input, projectRoot),
+                };
+            });
+        case 'additionalEntryPoints':
+            return value.map((entry) => {
+                return {
+                    ...entry,
+                    entryPath: (0, utils_1.toProjectRelativePath)(entry.entryPath, projectRoot),
+                };
+            });
+        case 'fileReplacements':
+            return value.map((replacement) => {
+                return {
+                    replace: (0, utils_1.toProjectRelativePath)(replacement.replace, projectRoot),
+                    with: (0, utils_1.toProjectRelativePath)(replacement.with, projectRoot),
+                };
+            });
+        default:
+            return Array.isArray(value)
+                ? value.map((item) => (0, utils_1.toProjectRelativePath)(item, projectRoot))
+                : (0, utils_1.toProjectRelativePath)(value, projectRoot);
+    }
+}

package/src/generators/convert-config-to-webpack-plugin/lib/utils.d.ts

@@ -0,0 +1 @@
+export declare function toProjectRelativePath(path: string, projectRoot: string): string;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toProjectRelativePath = void 0;
+const posix_1 = require("path/posix");
+const devkit_1 = require("@nx/devkit");
+function toProjectRelativePath(path, projectRoot) {
+    if (projectRoot === '.') {
+        // workspace and project root are the same, we normalize it to ensure it
+        return path.startsWith('.') ? path : `./${path}`;
+    }
+    const relativePath = (0, posix_1.relative)((0, posix_1.resolve)(devkit_1.workspaceRoot, projectRoot), (0, posix_1.resolve)(devkit_1.workspaceRoot, path));
+    return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
+}
+exports.toProjectRelativePath = toProjectRelativePath;

package/src/generators/convert-config-to-webpack-plugin/lib/validate-project.d.ts

@@ -0,0 +1,9 @@
+import { ProjectConfiguration, Tree } from '@nx/devkit';
+/**
+ * Validates the project to ensure it can be migrated
+ *
+ * @param tree The virtaul file system
+ * @param project the project configuration object for the project
+ * @returns A string if there is an error, otherwise undefined
+ */
+export declare function validateProject(tree: Tree, project: ProjectConfiguration): string;

package/src/generators/convert-config-to-webpack-plugin/lib/validate-project.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateProject = void 0;
+function hasAnotherWebpackConfig(tree, projectRoot) {
+    const files = tree.children(projectRoot);
+    const projectJsonString = tree.read(`${projectRoot}/project.json`, 'utf-8');
+    for (const file of files) {
+        if (file !== 'webpack.config.js' &&
+            file.endsWith('.js') &&
+            file.includes('webpack.config') &&
+            projectJsonString.includes(file) &&
+            tree.exists(`${projectRoot}/webpack.config.js`)) {
+            return 'Cannot convert a project with multiple webpack config files. Please consolidate them into a single webpack.config.js file.';
+        }
+    }
+}
+function isNestProject(project) {
+    for (const target in project.targets) {
+        if (project.targets[target].executor === '@nx/js:node') {
+            return `The project ${project.name} is using the '@nx/js:node' executor. At the moment, we do not support migrating such projects.`;
+        }
+    }
+}
+/**
+ * Validates the project to ensure it can be migrated
+ *
+ * @param tree The virtaul file system
+ * @param project the project configuration object for the project
+ * @returns A string if there is an error, otherwise undefined
+ */
+function validateProject(tree, project) {
+    const containsMfeExecutor = Object.keys(project.targets).some((target) => {
+        return [
+            '@nx/react:module-federation-dev-server',
+            '@nx/angular:module-federation-dev-server',
+        ].includes(project.targets[target].executor);
+    });
+    if (containsMfeExecutor) {
+        return `The project ${project.name} is using Module Federation. At the moment, we don't support migrating projects that use Module Federation.`;
+    }
+    const hasAnotherConfig = hasAnotherWebpackConfig(tree, project.root);
+    return hasAnotherConfig || isNestProject(project);
+}
+exports.validateProject = validateProject;

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

@@ -0,0 +1,19 @@
+{
+  "$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.",
+  "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`.",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Whether to format files at the end of the migration.",
+      "default": false
+    }
+  }
+}

package/src/generators/convert-to-inferred/convert-to-inferred.d.ts

@@ -0,0 +1,7 @@
+import { type Tree } from '@nx/devkit';
+interface Schema {
+    project?: string;
+    skipFormat?: boolean;
+}
+export declare function convertToInferred(tree: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export {};

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToInferred = void 0;
+const devkit_1 = require("@nx/devkit");
+const aggregate_log_util_1 = require("@nx/devkit/src/generators/plugin-migrations/aggregate-log-util");
+const executor_to_plugin_migrator_1 = require("@nx/devkit/src/generators/plugin-migrations/executor-to-plugin-migrator");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const plugin_1 = require("../../plugins/plugin");
+const versions_1 = require("../../utils/versions");
+const utils_1 = require("./utils");
+async function convertToInferred(tree, options) {
+    const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    const migrationContext = {
+        logger: new aggregate_log_util_1.AggregatedLog(),
+        projectGraph,
+        workspaceRoot: tree.root,
+    };
+    const migratedProjects = await (0, executor_to_plugin_migrator_1.migrateProjectExecutorsToPlugin)(tree, projectGraph, '@nx/webpack/plugin', plugin_1.createNodesV2, {
+        buildTargetName: 'build',
+        previewTargetName: 'preview',
+        serveStaticTargetName: 'serve-static',
+        serveTargetName: 'serve',
+    }, [
+        {
+            executors: ['@nx/webpack:webpack', '@nrwl/webpack:webpack'],
+            postTargetTransformer: (0, utils_1.buildPostTargetTransformerFactory)(migrationContext),
+            targetPluginOptionMapper: (target) => ({ buildTargetName: target }),
+            skipProjectFilter: skipProjectFilterFactory(tree),
+        },
+        {
+            executors: ['@nx/webpack:dev-server', '@nrwl/webpack:dev-server'],
+            postTargetTransformer: (0, utils_1.servePostTargetTransformerFactory)(migrationContext),
+            targetPluginOptionMapper: (target) => ({ serveTargetName: target }),
+            skipProjectFilter: skipProjectFilterFactory(tree),
+        },
+    ], options.project);
+    if (migratedProjects.size === 0) {
+        throw new Error('Could not find any targets to migrate.');
+    }
+    const installCallback = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'webpack-cli': versions_1.webpackCliVersion }, undefined, true);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(installCallback, () => {
+        migrationContext.logger.flushLogs();
+    });
+}
+exports.convertToInferred = convertToInferred;
+function skipProjectFilterFactory(tree) {
+    return function skipProjectFilter(projectConfiguration) {
+        const buildTarget = Object.values(projectConfiguration.targets).find((target) => target.executor === '@nx/webpack:webpack' ||
+            target.executor === '@nrwl/webpack:webpack');
+        // the projects for which this is called are guaranteed to have a build target
+        const webpackConfigPath = buildTarget.options.webpackConfig;
+        if (!webpackConfigPath) {
+            return `The webpack config path is missing in the project configuration (${projectConfiguration.root}).`;
+        }
+        const sourceFile = tsquery_1.tsquery.ast(tree.read(webpackConfigPath, 'utf-8'));
+        const composePluginsSelector = 'CallExpression:has(Identifier[name=composePlugins])';
+        const composePlugins = (0, tsquery_1.tsquery)(sourceFile, composePluginsSelector)[0];
+        if (composePlugins) {
+            return `The webpack config (${webpackConfigPath}) can only work with the  "@nx/webpack:webpack" executor. Run the "@nx/webpack:convert-config-to-webpack-plugin" generator first.`;
+        }
+        const nxAppWebpackPluginSelector = 'PropertyAssignment:has(Identifier[name=plugins]) NewExpression:has(Identifier[name=NxAppWebpackPlugin])';
+        const nxAppWebpackPlugin = (0, tsquery_1.tsquery)(sourceFile, nxAppWebpackPluginSelector)[0];
+        if (!nxAppWebpackPlugin) {
+            return `No "NxAppWebpackPlugin" found in the webpack config (${webpackConfigPath}). Its usage is required for the migration to work.`;
+        }
+        return false;
+    };
+}

package/src/generators/convert-to-inferred/schema.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxWebpackConvertToInferred",
+  "description": "Convert existing Webpack project(s) using `@nx/webpack:wepack` executor to use `@nx/webpack/plugin`.",
+  "title": "Convert a Webpack project from executor to plugin",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project to convert from using the `@nx/webpack:webpack` executor to use `@nx/webpack/plugin`. If not provided, all projects using the `@nx/webpack:webpack` executor will be converted.",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Whether to format files.",
+      "default": false
+    }
+  }
+}

package/src/generators/convert-to-inferred/utils/ast.d.ts

@@ -0,0 +1,3 @@
+import * as ts from 'typescript';
+export declare function toPropertyAssignment(key: string, value: unknown): ts.PropertyAssignment;
+export declare function toExpression(value: unknown): ts.Expression;