Webpack 5 support overview
See original GitHub issueOverview 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 ofeslint-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)~ - ~#7914
react-error-overlay
Move node polyfills in webpack to prepare for webpack 5 closed for now~ - #10198
formatWebpackMessages.js
remove usage ofchalk
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 forSingleEntryPlugin
->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 ofcache
/cacheKeys
/sourceMap
Read changelog) - Update
html-webpack-plugin
to5.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 ofOptimizeCSSAssetsPlugin
- #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 inv4.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
Issue Analytics
- State:
- Created 3 years ago
- Reactions:387
- Comments:95 (57 by maintainers)
Top Results From Across the Web
Webpack 5 release (2020-10-10)
Webpack 5 has now native support for modules representing assets. ... General information is shown in a summary at the end now.
Read more >An Introduction to Webpack 5 - JavaScript in Plain English
Webpack is a static module bundler for modern JavaScript applications. When webpack processes your app, it recursively builds a dependency graph that includes ......
Read more >Introducing Webpack 5 - InfoQ
Version 5.0 of Webpack, the most popular JavaScript module bundler, is finally out offering a slew of improvements, including faster build ...
Read more >A mostly complete guide to webpack 5 (2020)
Loaders are third-party extensions that help webpack deal with various file extensions. For example there are loaders for CSS, for images, ...
Read more >What's New in Webpack 5 - Frontend Digest
Improvements have been made to tree shaking (also known as dead code elimination). While previous versions of webpack were able to remove unused...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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)
The webpack 5 update branch is passing tests, feel free to help review and QA #10961