Parcel: A first look at creating your production build

Parcel Bundler is a “blazing fast, zero configuration web application bundler”. It’s an alternative to Webpack for building modern web applications with a toolchain that you control.

The video above is a live-coding screencast using Parcel to take a project from an empty folder to a fully-built production React + PostCSS + TailwindCSS web application (with a little Vue thrown in for fun), ready to be deployed to a CDN.

State of bundling in 2020

Setting up the build for your frontend assets is a chore. In a modern JavaScript heavy web application, you’ll probably need to configure Babel to transpile your JavaScript, PostCSS to process your CSS, and webpack or rollup to bundle, import, and glue all your tools together. Invariably, you end up configuring every tool twice: once directly, and once to integrate it with your bundler. And webpack’s configuration is… not the easiest. The configuration situation can be better with Rollup, but you still need to install and configure plugins and it isn’t as great an experience for building applications as it is for building libraries.

Today, most developers scaffolding new React applications start with Create React App (CRA) which is a zero configuration scaffolding tool that creates an entire project with Webpack, Babel, and PostCSS already configured for you, and a ton of other non-build-system setup like ESLint for static checks and Jest for testing.

What’s the problem? CRA does not give you any flexibility or choice with your build system. You can’t add plugins or change the configuration of any of your build tools. Your alternative is to eject, but afterwards you are left with a very complicated set of scripts and configuration covering every use case of CRA including many likely irrelevant to you.

I’ve been using React with Webpack since 2014, and I still scratch my head while reading the build setup of an ejected CRA project.

Why Parcel?

Parcel represents a truly zero configuration bundling system that uses obvious conventions and good defaults to utilize the common toolchains for building web applications, while still allowing us to add any additional configuration for those tools that are important to us.

See in the screencast how easy it is to not only setup a local dev environment, but also to have an excellent production build with zero Parcel configuration! And that’s even including React and/or Vue, asset fingerprinting, hot-module replacing dev server, JS minification, HTML + CSS white-space stripping, and more.