Parcel: A first look at creating your production build
- Publish Date
- Tommy Groshong
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
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.
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.