[hold] upgrade: Webpack 5 #6496
Conversation
|
@icirellik What does |
|
Reminders of follow-up work. |
icirellik
force-pushed
the
upgrade-webpack-5
branch
from
07db8a8
to
c4995b8
Compare
icirellik
requested review from
joeyAghion and
dzucconi
and removed request for
eessex
| // TODO: Why would these end up in the client bundle? | ||
| new webpack.IgnorePlugin({ | ||
| resourceRegExp: /^react-relay-network-modern-ssr\/node8\/server/, | ||
| }), |
There was a problem hiding this comment.
I think this was added due to how Artsy/Router/buildServer|ClientApp used to be exported from reaction, but we import these things directly everywhere now so i think this is safe to remove.
webpack/envs/clientCommonConfig.js
Outdated
| fallback: { | ||
| "path": false, | ||
| "os": require.resolve("os-browserify/browser"), | ||
| "buffer": require.resolve("buffer/"), |
There was a problem hiding this comment.
What does this section + individual keys do?
There was a problem hiding this comment.
Webpack 5 no longer provides automatic browser polyfills. This section specifies the recommended polyfill to use for each node api we access in the browser.
| @@ -56,29 +52,13 @@ export const clientDevelopmentConfig = { | |||
| ], | |||
| }, | |||
| plugins: [ | |||
| new CaseSensitivePathsPlugin(), | |||
There was a problem hiding this comment.
This was recently added because it helped us track down a very pesky case sensitive bug. Why remove?
There was a problem hiding this comment.
If all of the following removals are due to plugin compat, we should comment them out with a
TODO: Reenable once webpack 5 is supported
unless there are comparable built-in webpack features we can leverage.
There was a problem hiding this comment.
Would you explain the particular bug in more detail or provide a link to it? I am intimately familiar with Apples case-insensitive file system and the many issues that it creates in particular when renaming files in git. However git has options to address this already and wonder if we could instead leverage those.
There was a problem hiding this comment.
#6462 was the issue that prompted this — I had downcased a folder name accidentally against convention, but imports would work locally with alternate casing. I'd very much like to be warned about this, regardless of where it happens.
There was a problem hiding this comment.
(Er, that's not the issue but rather the fix)
There was a problem hiding this comment.
Thanks for taking this on @icirellik 👍
A couple nonblocking q's / requests around commenting out incompatable webpack plugins so that we can remember to check up and reenable when ready for webpack 5 (versus deleting outright), but this pushes things forward nicely in the meantime.
This is a work in progress to try upgrading to webpack 5.
icirellik
force-pushed
the
upgrade-webpack-5
branch
from
c4995b8
to
2853f3c
Compare
| "@babel/preset-typescript": "7.10.4", | ||
| "@babel/register": "7.10.5", | ||
| "@babel/runtime": "7.11.2", | ||
| "@babel/cli": "^7.12.1", |
There was a problem hiding this comment.
Might be a good idea to extract these babel updates into their own PR if we can easily isolate.
|
Waiting on: gregberge/loadable-components#636 |
|
Will create a new PR when |
A quick upgrade to Webpack 5 brings with it a savings of ~100 KB gzipped. Along with all the other features of Webpack 5:
Before:
After: