Parcel, is a Zero configuration bundler, works really fast, supports code splitting and hot module replacement. It’s very easy to use: you just choose the main starting file of the application and Parcel bundles everything! Let’s take a look at an example project using React.js.
First install parcel globally:
Then, configure your package.json:
"name": "Parcel React",
"description": "Quick test using parcel",
"build:dev": "parcel serve ./src/index.html --port 60000 --hmr-port 60080 --log-level 4 --target browser"
The command parcel serve/watch allows testing with hot module replacement. We tell parcel what is the starting point of the app and it takes care of the rest. With log level 4 I instruct parcel to have a verbose log level to show more information. We can also configure the port we use to serve the page, or the hot module replacement port.
And get to work.
You may wonder: If Parcel is so easy and fast why isn’t everyone using it? Sure, Parcel is pretty good and sometimes it’s even faster than Webpack. But, it has a few quirks:
– Sometimes you can find weird errors using hot module replacement feature. This can become pretty annoying but it can be fixed most of the time. It just takes time, either you have to configure Babel or your IDE. This takes away the whole zero config advantage.
– Doesn’t work that well with other automagical tools like Jest. It can be worked out by configuring Babel.
I have replaced Webpack with Parcel in my latest projects and I’m pretty satisfied. I’m not saying I won’t use Webpack again, but Parcel is a pretty good alternative.