feat(webpack): add convertConfigToWebpackPlugin

docs/generated/manifests/menus.json

@@ -9843,6 +9843,14 @@
                 "children": [],
                 "isExternal": false,
                 "disableCollapsible": false
+              },
+              {
+                "id": "convert-config-to-webpack-plugin",
+                "path": "/nx-api/webpack/generators/convert-config-to-webpack-plugin",
+                "name": "convert-config-to-webpack-plugin",
+                "children": [],
+                "isExternal": false,
+                "disableCollapsible": false
               }
             ],
             "isExternal": false,

docs/generated/manifests/nx-api.json

@@ -3188,6 +3188,15 @@
         "originalFilePath": "/packages/webpack/src/generators/configuration/schema.json",
         "path": "/nx-api/webpack/generators/configuration",
         "type": "generator"
+      },
+      "/nx-api/webpack/generators/convert-config-to-webpack-plugin": {
+        "description": "Convert the project to use the `NxAppWebpackPlugin` and `NxReactWebpackPlugin`.",
+        "file": "generated/packages/webpack/generators/convert-config-to-webpack-plugin.json",
+        "hidden": false,
+        "name": "convert-config-to-webpack-plugin",
+        "originalFilePath": "/packages/webpack/src/generators/convert-config-to-webpack-plugin/schema.json",
+        "path": "/nx-api/webpack/generators/convert-config-to-webpack-plugin",
+        "type": "generator"
       }
     },
     "path": "/nx-api/webpack"

docs/generated/packages-metadata.json

@@ -3153,6 +3153,15 @@
         "originalFilePath": "/packages/webpack/src/generators/configuration/schema.json",
         "path": "webpack/generators/configuration",
         "type": "generator"
+      },
+      {
+        "description": "Convert the project to use the `NxAppWebpackPlugin` and `NxReactWebpackPlugin`.",
+        "file": "generated/packages/webpack/generators/convert-config-to-webpack-plugin.json",
+        "hidden": false,
+        "name": "convert-config-to-webpack-plugin",
+        "originalFilePath": "/packages/webpack/src/generators/convert-config-to-webpack-plugin/schema.json",
+        "path": "webpack/generators/convert-config-to-webpack-plugin",
+        "type": "generator"
       }
     ],
     "githubRoot": "https://github.com/nrwl/nx/blob/master",

docs/generated/packages/webpack/generators/convert-config-to-webpack-plugin.json

@@ -0,0 +1,30 @@
+{
+  "name": "convert-config-to-webpack-plugin",
+  "factory": "./src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin",
+  "schema": {
+    "$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
+      }
+    },
+    "presets": []
+  },
+  "description": "Convert the project to use the `NxAppWebpackPlugin` and `NxReactWebpackPlugin`.",
+  "implementation": "/packages/webpack/src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin.ts",
+  "aliases": [],
+  "hidden": false,
+  "path": "/packages/webpack/src/generators/convert-config-to-webpack-plugin/schema.json",
+  "type": "generator"
+}

docs/shared/reference/sitemap.md

@@ -706,6 +706,7 @@
     - [generators](/nx-api/webpack/generators)
       - [init](/nx-api/webpack/generators/init)
       - [configuration](/nx-api/webpack/generators/configuration)
+      - [convert-config-to-webpack-plugin](/nx-api/webpack/generators/convert-config-to-webpack-plugin)
   - [workspace](/nx-api/workspace)
     - [documents](/nx-api/workspace/documents)
       - [Overview](/nx-api/workspace/documents/overview)

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Webpack Plugin (legacy) should convert withNx webpack config to a standard config using NxWebpackPlugin 1`] = `
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
+
+// This file was migrated using @nx/webpack:convert-config-to-webpack-plugin
+
+module.exports = {
+  plugins: [
+    new NxAppWebpackPlugin(),
+    new NxReactWebpackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    ,
+  ],
+};
+"
+`;

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

@@ -3,6 +3,7 @@ import {
   cleanupProject,
   killProcessAndPorts,
   newProject,
+  readFile,
   runCLI,
   runCommandUntil,
   runE2ETests,
@@ -146,4 +147,37 @@ describe('Webpack Plugin (legacy)', () => {
       }).not.toThrow();
     }
   });
+
+  it('should convert withNx webpack config to a standard config using NxWebpackPlugin', () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/web:app ${appName} --bundler webpack --e2eTestRunner=playwright`
+    );
+    updateFile(
+      `${appName}/src/main.ts`,
+      `
+      const root = document.querySelector('proj-root');
+      if(root) {
+        root.innerHTML = '<h1>Welcome</h1>'
+      }
+    `
+    );
+
+    runCLI(`generate @nx/webpack:convert-config-to-webpack-plugin ${appName}`);
+
+    const webpackConfig = readFile(`apps/${appName}/webpack.config.js`);
+
+    checkFilesExist(`apps/${appName}/webpack.config.old.js`);
+    expect(webpackConfig).toMatchSnapshot();
+
+    expect(() => {
+      runCLI(`build ${appName}`);
+    }).not.toThrow();
+
+    if (runE2ETests()) {
+      expect(() => {
+        runCLI(`e2e ${appName}-e2e`);
+      }).not.toThrow();
+    }
+  });
 });

packages/webpack/generators.json

@@ -15,6 +15,11 @@
       "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`."
     }
   }
 }

packages/webpack/index.ts

@@ -1,8 +1,14 @@
 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';
+import { convertConfigToWebpackPluginGenerator } from './src/generators/convert-config-to-webpack-plugin/convert-config-to-webpack-plugin';
+import { nxUseLegacyPlugin } from './src/plugins/nx-use-legacy-plugin/nx-use-legacy-plugin';
 
-export { configurationGenerator };
+export {
+  configurationGenerator,
+  convertConfigToWebpackPluginGenerator,
+  nxUseLegacyPlugin,
+};
 
 // Exported for backwards compatibility in case a plugin is using the old name.
 /** @deprecated Use `configurationGenerator` instead. */

packages/webpack/package.json

@@ -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",