Webpack 5 support overview

Created by: raix

Overview of tasks needed for updating CRA to Webpack 5 - Some of the work will support both Webpack 4 + 5 but some plugins only support Webpack 5 + the webpack config itself has breaking changes.

Prerequisites

#9977 Move .eslintcache into .cache (part of fixing test suite)
#10217 Fix CRA test suite to validate the pull-requests for Webpack 5 changes

Loaders / plugins [multiple pull-requests]

#9751 Use the ESLintPlugin instead of eslint-loader
#9205 Update GenerateSW changed signature (Fixed in PR #9205 using InjectManifest instead?)
#9805 Fix ModuleScopePlugin.js (might have been fixed?)
Update PnpWebpackPlugin (supported as default in WP5 - is this plugin still required? - also seems like tests PnP are broken)
~~#7914react-error-overlay Move node polyfills in webpack to prepare for webpack 5 closed for now~~
#10198 formatWebpackMessages.js remove usage of chalk in client code
#10456 Update postcss-loader postcss8
#10204 The ManifestPlugin plugin is slowly getting up to speed / maintained again (use 3.0.x check for updates)
#10205 Update ModuleNotFoundPlugin.js adding support for SingleEntryPlugin -> EntryPlugin

Webpack 5 specific [single pull-request #10961 to wp5 branch]

#10006 Update IgnorePlugin changed signature
Use terser-webpack-plugin from webpack 5 (no apparent changes needed, remove usage of cache/cacheKeys/sourceMap Read changelog)
Update html-webpack-plugin to 5.0.0
Webpack 5 dropped nodejs builtin package shims - not sure if we need to still support this. (packages like axios still need this afaik, maybe just drop support?, POC)
The webpack config it self has minor changes, a filename to be updated etc. Read about more findings here and Branch
#10004 ForkTsCheckerWebpackPlugin
#10005 use css-minimizer-webpack-plugin instead of OptimizeCSSAssetsPlugin
#10121 or #10098 or #9943 ? Update / support both WP4 and WP5 message format in formatWebpackMessages.js (message is an object in WP5)
Update react-dev-utils see description and solution in this comment

Remaining work on the wp5 branch

Investigate if transpilation of node modules is still working (https://github.com/facebook/create-react-app/issues/9994#issuecomment-871499779 could indicate an issue)
#11170
Compilation hook causes the CLI screen to rerender causing bad DX (fixed in #11170)
Webpack 5 dependency resolution, some packages seem to depend on v4 breaking npm resolution (need to investigate, ref: https://github.com/facebook/create-react-app/issues/9994#issuecomment-871510627 - could not reproduce on latest version of webpack 5)

Webpack 5 maybe later?

webpack-dev-server is currently in v4.0.0-beta.3 for webpack 5 support (v3.x also seem to work?)

Regarding federated modules: * [ ] The Webpack dev server doesn't yet support federated modules so we'll likely have to wait a bit on that. Out of scope - read more in #9510

References:

Notes:

We are currently trying to not include node js builtin shims, it's potentially a breaking change if using packages meant for backend usage or mixed frontend/backend packages. (it happens that newcommers to Npm include backend packages in their frontend code, would be great to prevent this)
PnP is supported as default in Webpack 5 and fork-ts-checker-webpack-plugin as I read it - but it would be great to QA / fix the tests