Create-react-app: Webpack 5 support overview

[raix]

Suggestion to break up the upgrade to Webpack 5 into smaller pull-requests

Loaders / plugins [multiple pull-requests]

• [X] #9751 Use the ESLintPlugin instead of eslint-loader
• [X] #9205 Update GenerateSW changed signature (Fixed in PR #9205 using InjectManifest instead?)
• [X] #9805 Fix ModuleScopePlugin.js (might have been fixed?)
• [x] ~Update PnpWebpackPlugin (supported as default in WP5 - is this plugin still required? - also seems like tests PnP are broken)~
• [ ] #10003 Update postcss-loader (QA done - ready for review)
• [ ] #10004 ForkTsCheckerWebpackPlugin
• [ ] #10005 use css-minimizer-webpack-plugin instead of OptimizeCSSAssetsPlugin
• [ ] #10006 Update IgnorePlugin changed signature
• [ ] #10121 Update / support both WP4 and WP5 message format in formatWebpackMessages.js (message is an object in WP5)
• [ ] Update ModuleNotFoundPlugin.js adding support for SingleEntryPlugin -> EntryPlugin
• [ ] The ManifestPlugin plugin is slowly getting up to speed / maintained again (current version use 3.0.0-rc.0 eta early December?)
• [ ] Update html-webpack-plugin - (Currently 5.0.0-alpha.14 is working waiting for v5.0.0)

Webpack 5 specific [single pull-request]

• [ ] Update terser-webpack-plugin (no apparent changes needed, remove usage of cache/cacheKeys/sourceMap Read changelog)
• [ ] formatWebpackMessages.js remove usage of chalk in client code
• [ ] 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

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

Notes:

• 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

References:

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

[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

[jasonwilliams]

@iansu can we pin this issue?

[jasonwilliams]

@raix https://github.com/facebook/create-react-app/pull/10121 for the formatting