Add support for webpack 5 in Nx 12.x

[jaysoo]

Update: PR is good to merge now that Nx 12.5 is released. This and the docs will be part of Nx 12.6.

This PR will enable webpack 5 support for web/react, and node. This will allow us to test the implementation on different workspaces to make sure we address all the edge cases. Then in Nx 13 we will remove webpack 4 support completely.

User can opt-in to webpack 5 by installing those packages in their workspace.

e.g.

yarn add -D \
copy-webpack-plugin@9.0.0 \
fork-ts-checker-webpack-plugin@6.2.10 \
mini-css-extract-plugin@1.6.0 \
source-map-loader@2.0.1 \
terser-webpack-plugin@5.1.1 \
webpack@5.39.1 \
webpack-dev-server@3.11.2 \
webpack-merge@5.7.3 \
webpack-node-externals@2.5.2 \
webpack-sources@2.2.0

User can also force webpack 4 by setting NX_FORCE_WEBPACK_4=true as an environment variable.

---

Notes

• There is no difference for users if they don't opt into webpack 5 manually.
• New src/webpack folder has been added to cypress, node, react, and web packages. This is a temporary solution that we will remove for Nx 13.
• In order to pick up webpack and plugins installed in the root node_modules, a require shim is used to check if they exist. If they exist then use the user's webpack, otherwise use package dependencies as usual.
• A lot of types will need to be fixed once we fully migrate to webpack 5 (for now I added TODO(jack) comments in all the places we need to clean up.
• fork-ts-checker-webpack-plugin no longer supports multi process and now optimizes for single process mode.

---

TODOs

Will be performing verifications manually. The e2e tests will still test with webpack 4 (default), and we'll add a few new ones for webpack 5).

• Node executors work with webpack 4
• Node executors work with webpack 5
• Web executors work with webpack 4
• Web executors work with webpack 5
• Cypress executor work with webpack 4
• Cypress executors work with webpack 5
• Next.js work with both webpack 4 and 5 (In another PR feat(nextjs): support webpack 5 #5665)
• Add documentation for React and Node on upgrading to webpack 5 (this PR is getting large, will do a follow-up PR for the docs)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nrwl/nx-dev/BQGMzBFvdQZZ8gZHAMir6w6Ha3TY
✅ Preview: https://nx-dev-git-fork-jaysoo-feat-webpack-5-nrwl.vercel.app

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 52bd8a3. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx affected --target=build --parallel --max-parallel=3
	nx affected --target=e2e
	nx affected --target=lint --parallel --max-parallel=4
	nx affected --target=test --parallel --max-parallel=2
	nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[jaysoo]

removed since it was never used

[Pkearney2021]

Is it possible to install this branch/version locally and test it out?

[jaysoo]

Is it possible to install this branch/version locally and test it out?

@Pkearney2021 You can follow the publish to local registry guide here https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#publishing-to-a-local-registry

[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.