feat(webpack): add plugin to automatically configure build and serve targets

[jaysoo]

This PR adds support for projects using webpack.config.js files to have their build, serve, and preview targets automatically configured by @nx/webpack/plugin.

Just need to add to your nx.json file:

{
  //...
  plugins: ['@nx/webpack/plugin']
}

The plugin will support both composePlugins and NxWebpackPlugin usages. The former requires a new isNxWebpackComposablePlugin function that checks if a nxWebpackComposablePlugin exists on the exported function. Otherwise, the function could be a normal webpack config function.

When NX_PCV3=true, Wwe'll also generate projects with options set in webpack config files using NxWebpackPlugin, rather than in project.json.

e.g.

const { NxWebpackPlugin } = require('@nx/webpack');
const { NxReactWebpackPlugin } = require('@nx/react');

// Standard webpack config format, no Nx-specific logic
module.exports =  {
  plugins: [
    new NxWebpackPlugin({
      compiler: 'babel',
      index: './src/index.html',
      main: './src/main.tsx',
      tsConfig: './tsconfig.app.json',
      baseHref: '/',
      assets: ['./src/favicon.ico', './src/assets'],
      styles: ['./src/styles.css'],
    }),
    NxReactWebpackPlugin({
      // Uncomment this line if you don't want to use SVGR
      // See: https://react-svgr.com/
      // svgr: false
    }),
  ],
};

If NX_PCV3=true is not set, then everything behaves as normal.

Note: We use relative paths (e.g. main: './src/main.tsx'), or absolute paths (e.g. output: { path: join(__dirname, '...') }). Previously inside targets, we used paths relative to workspace root, which doesn't make sense in the new setup. You can still use paths from the workspace root to make migration easier.

Summary of changes

• Add @nx/webpack/plugin that uses CreateNodes to infer build, serve, and preview targets
• Support standard webpack configuration, even the functional format that exports a (env, args) -> config function
• Option defaults are moved from schema.json of webpack build executor to plugins (e.g. withNx and NxWebpackPlugin)
• Our webpack plugins can load in both the "reading" phase of Nx (e.g. during CreateNodes), and during actual task run (e.g. webpack build) -- need to read out options like config.output.path to determine what's cached
• Our composable webpack plugins (e.g. withNx) works with normal webpack CLI
• Add webpack-cli as a workspace dep in @nx/webpack:init generator
• withWeb is merged into withNx, and a deprecation message is show to user when used -- this should not impact most users, since withWeb is not used for React
• Generated apps will have options, such as main and tsConfig, configured in webpack.config.js rather than project.json -- existing apps will continue to function as before

TODO

• Cache targets so we don't slow down project graph generation
• e2e tests to cover PCv3 cases

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nx-dev	✅ Ready (Inspect)	Visit Preview	Nov 28, 2023 3:36pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 08ddd37. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx affected --target=e2e --base=02ee93f6adc3ec9f723ca3fabfb9886c46f6a8d8 --head=08ddd37bd0a87f1aeba15c102810de48e788a699 --parallel=1

✅ Successfully ran 5 targets

• nx affected --targets=lint,test,build --base=02ee93f6adc3ec9f723ca3fabfb9886c46f6a8d8 --head=08ddd37bd0a87f1aeba15c102810de48e788a699 --parallel=3
• nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte
• nx-cloud record -- nx format:check --base=02ee93f6adc3ec9f723ca3fabfb9886c46f6a8d8 --head=08ddd37bd0a87f1aeba15c102810de48e788a699
• nx documentation --no-dte
• nx affected -t e2e-macos --parallel=1 --base=02ee93f6adc3ec9f723ca3fabfb9886c46f6a8d8 --head=08ddd37bd0a87f1aeba15c102810de48e788a699

---

Sent with 💌 from NxCloud.

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.