feat(webpack): remove support for legacy browsers (#14190)

[jaysoo]

This PR is a preparatory refactoring / cleanup of the webpack setup.

Previously, the config is overly convoluted, where common vs web vs node concerns were mixed, and multiple options were configured then reconfigured or deleted later on.

The main change is to provide two new Nx plugins for webpack:

• withNx - Adds base webpack configuration for things like tsconfig paths, tsc/babel/swc, and type checking.
• withWeb - Adds web-only concerns, such as stylesheets, images, etc.

There is also a composePlugins function from @nrwl/webpack that helps combine more than one configuration together. All three functions need to be documented later.

Note: Behaviorally there is no change from current stable release. Both build, serve, storybook, componen-test targets should work exactly as they do currently.

What's Next

In a follow-up PR, the plugins will be manually be configured for Node, Web, and React plugins inside webpack.config.ts.

// node
const { withNx } = require('@nrwl/webpack');
module.exports = withNx();

// web
const { composePlugins, withNx, withWeb } = require('@nrwl/webpack');
module.exports = composePlugins(withNx(), withWeb());

// react
const { composePlugins } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
module.exports = composePlugins(withNx(), withReact());

React-only and Web-only options can be deprecated from the @nrwl/webpack:webpack executor and be options on either withWeb or withReact plugins. We may also want to update Module Federation support to compose MF with React as follows:

const { composePlugins } = require('@nrwl/webpack');
const { withReact, withModuleFederation } = require('@nrwl/react');
module.exports = composePlugins(withNx(), withReact(), withModuleFederation({...}));

We can also cleanup Cypress and Storybook integration by invoking the correct plugin (through webpack.config.ts), and not have to rely on the current workarounds.

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Updated
nx-dev	⬜️ Ignored (Inspect)		Jan 11, 2023 at 5:03AM (UTC)

[nx-cloud]

☁️ Nx Cloud Report

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

📂 See all runs for this branch

---

✅ Successfully ran 5 targets

• nx affected --target=e2e --base=0bc93ee83d710fc15d705cbdc5dae71abe321452 --head=5f478046254ebeb54c2579f95fdcd2c955308f9d --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox --parallel=1
• nx affected -t test lint --base=0bc93ee83d710fc15d705cbdc5dae71abe321452 --head=5f478046254ebeb54c2579f95fdcd2c955308f9d --parallel=1
• nx affected --target=build --base=0bc93ee83d710fc15d705cbdc5dae71abe321452 --head=5f478046254ebeb54c2579f95fdcd2c955308f9d --parallel=3
• nx run-many -t check-imports check-commit check-lock-files root-lint depcheck documentation --parallel=3 --no-dte
• nx-cloud record -- nx format:check --base=0bc93ee83d710fc15d705cbdc5dae71abe321452 --head=5f478046254ebeb54c2579f95fdcd2c955308f9d

---

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.