Code Self Study Forum

Webpack vs. Rollup vs. Parcel

I used to use tools like Browserify and Gulp to bundle my JavaScript, but then started using Webpack. Now there are Rollup and Parcel. I’ve used Parcel but not Rollup yet.

Here are some articles I found while reading about the differences. If anyone has thoughts on them post a comment below.

Webpack was designed to solve the problem of asset management (i.e. it can include any type of file ,other than javascript, for which loader is available) and code splitting. It’s very flexible and has a huge amount of plugins for every use-case you could imagine.

Rollup, on the other hand, came up with the idea of using standardise format (i.e. ES2015 module format) to write your code and tries to get really small builds with the help of dead code elimination.

Parcel tries to give you “blazing fast” bundling as it uses multiple worker processes to ensure that the compilation process is executed in parallel on multiple cores without the need of any configuration.

Another comparison:

By now, hopefully it’s clear why both tools coexist and support each other — they serve different purposes. The tl;dr is this:

Use webpack for apps, and Rollup for libraries

That’s not a hard and fast rule — lots of sites and apps are built with Rollup, and lots of libraries are built with webpack. But it’s a good rule of thumb.

If you need code-splitting, or you have lots of static assets, or you’re building something with lots of CommonJS dependencies, Webpack is a better choice. If your codebase is ES2015 modules and you’re making something to be used by other people, you probably want Rollup.