Optimizing front-end delivery with Webpack 4

Jesal Gadhia on May 07, 2018

With the latest major Webpack release (version 4.x), we are at a point where you don't need a config to get started. It is optimized by default (... [Read Full]
markdown guide

I'd remove the exclude: node_modules from the babel config that way we can use the "module" field from the package.json of each dependency and get better treeshaking.


Interesting, I didn't think of that. In my production app, I actually had to put all node_modules through babel for better browser compatibility but I've always considered it big no no since it increases build time.


yeah that's why for example create-react-app sets cache to true for stuff coming from node_modules and no cache for stuff coming from our includes :)


Thanks, we don't always have the time to "diff" a build configuration for a major upgrade of webpack. Nice summary. :)
BTW, using module lazy loading, it used to need a well configured serie of plugins to avoid hash changing all the time for each chunk, even without code changes. Have you checked that hashes are constant?


Interesting, I just verified, the hashes do stay consistent through multiple builds as long as the contents don't change.

Might be some other that plugin may be constantly changing something in your build or just a bug in Webpack that probably got fixed in later versions.


That's a very good point although I think using last 2 major versions, not dead vs a % might be a more robust alternative. That will remove older browsers that aren't supported any longer as well as include the latest versions regardless of market share.


Thanks! I keep getting invalid sourcemap errors, any idea what that could be?


Exactly what I’m looking for! Thanks, Jesal.


I understand the importance of Babel pretty easily. I don't see the importance of Webpack and when it would be best used. Can someone help me out?

code of conduct - report abuse