I saw a project yesterday that was built using webpack, and I started to wonder what makes webpack better than Browserify? The website didn’t really explain to me, so I asked in Twitter because I was sure there would be a bunch of webpack experts ready to tell me—and I wasn’t wrong! 😉
Webpack comes with “batteries included” and preconfigured, so you get more “out of the box”, it’s easier to get started, and the default outputs are really decent. Whereas with browserify you need to choose the modules you want to use, and essentially assemble the whole thing together: it’s slower to learn, but way more configurable.
Some of the most insightful replies:
— James Long (@jlongster) February 19, 2015
@supersole webpack is more opinionated, has more features in core (bullet point engineering). great if you dont like using npm search
— maxwell ogden (@denormalize) February 19, 2015
@supersole It's much faster. Generates slightly smaller output by default. Custom loaders are easier to write.
— Kornel (@kornelski) February 20, 2015
Show me the data!
It really irks me when I get vague answers like “performance was better” but no numbers are provided. So I’m glad that the very awesome Kate Hudson indeed did some research for Mozilla’s Webmaker App, and so she could provide us with some numbers:
Webpack’s output can be from 8% to 16% leaner than Browserify’s (using uglify, which is pretty much the standard combination).
Of course this comes at a cost; Kate told me that generating the bundle takes longer with webpack, as it has to do more work than uglify does to get rid of dead code, etc. Also combining React with es6to5 and gulp and browserify didn’t really work well for them whereas webpack could take it easily.
I insist: this was a very specific use case. Your case might be totally different; don’t take this as a dogma.
I’m really used to Browserify even though I haven’t used probably 80% of its features. Maybe I’m missing out! But I don’t really need to change my tooling yet, I think.
On the other hand there are also some interesting features in Webpack like its ability to consume both AMD and UMD modules, and seems like it can also package static text easily whereas Browserify transforms are still a bit esoteric to me (yeeeah, I need to do my homework).
I always feel a bit unsure about introducing new tools, until there’s a certain mass of users (and they iron out the most terrible bugs too), but I will be keeping webpack on my radar.
Thanks to everyone that sent info! 🙂