Webpack 5 support overview

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:

• Webpack 5 Draft pull-request
• Experimental branch
• More findings

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

[raix]

I hope to get the wp5 branch into a workable state this weekend - would also be nice to do prereleases to test things out - from then on wp5 prs should target the wp5 branch (for now irs going to be a 4.x release, the missing node js builtin shims might be a breaking change though)

[raix]

The webpack 5 update branch is passing tests, feel free to help review and QA #10961