Webpack 5 support overview

[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

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

Loaders / plugins [multiple pull-requests]

• Replace deprecated eslint-loader by eslint-webpack-plugin #9751 Use the ESLintPlugin instead of eslint-loader
• Switch to the Workbox InjectManifest plugin #9205 Update GenerateSW changed signature (Fixed in PR Switch to the Workbox InjectManifest plugin #9205 using InjectManifest instead?)
• Fix refreshOverlayInterop module scope error #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)
• Move node polyfills in webpack to prepare for webpack 5 #7914react-error-overlay Move node polyfills in webpack to prepare for webpack 5 closed for now
• remove chalk from formatWebpackMessages #10198 formatWebpackMessages.js remove usage of chalk in client code
• Update PostCSS packages #10456 Update postcss-loader postcss8
• Update WebpackManifestPlugin #10204 The ManifestPlugin plugin is slowly getting up to speed / maintained again (use 3.0.x check for updates)
• Update ModuleNotFoundPlugin to support Webpack 5 #10205 Update ModuleNotFoundPlugin.js adding support for SingleEntryPlugin -> EntryPlugin

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

• WP5 - Update IgnorePlugin signature #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
• WP5 - Update fork-ts-checker-webpack-plugin [DRAFT] #10004 ForkTsCheckerWebpackPlugin
• WP5 - Replace OptimizeCssAssetsWebpackPlugin with CssMinimizerWebpackPlugin #10005 use css-minimizer-webpack-plugin instead of OptimizeCSSAssetsPlugin
• Add support for Webpack 5 message objects #10121 or fix: Patched 'formatWebpackMessage' for webpack 5 #10098 or Fix #9880 #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 (Webpack 5 support overview #9994 (comment) could indicate an issue)
• Wp5 update webpack dependencies and fix minor issues #11170
• Compilation hook causes the CLI screen to rerender causing bad DX (fixed in Wp5 update webpack dependencies and fix minor issues #11170)
• Webpack 5 dependency resolution, some packages seem to depend on v4 breaking npm resolution (need to investigate, ref: Webpack 5 support overview #9994 (comment) - 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

[jasonwilliams]

pnp plugin won't be needed once you upgrade to Webpack 5, so maybe you can remove it as part of the single PR
https://webpack.js.org/migrate/5/#clean-up-configuration

What pnp tests are broken?

[raix]

@jasonwilliams cool, I'll strike out the PnP task - regarding tests it's the yarn docker:e2e --test-suite I think it was e2e-installs (one of them ends with a PnP test that breaks when testing locally, but more tests are actually breaking atm. I have a stash for fixing the simple test when I need it)

[jasonwilliams]

@raix do you need help on anything? Looks like its just PRs waiting to be reviewed

[raix]

@jasonwilliams I think if the simple e2e test passes it should be good to complete (unfortunately for the tests to run there is missing support for the new JSX babel transformation when testing + .eslintcache needs to be git ignored in each of the templates)

[raix]

@jasonwilliams I need to QA 3 of the pr's and address review comments in 10005 / I'll likely only get to those comments in the weekend, if you have time feel free to jump in to QA/resolve comments or make pr's the other updates.

[jasonwilliams]

@raix theres some I looked at, how are you testing? Are you linking the repo then launching with npx? I know nothing about tap so couldn’t do much on the forkTsChecker one