Signup to the waiting list!
Parcel is a Web Application Bundler.
It’s in the same tool category of webpack, with a different value proposition.
Its main features set includes
- assets bundling (JS, CSS, HTML, images)
- zero config code splitting
- automatic transforms using Babel, PostCSS and PostHTML
- hot module replacement
- caching and parallel processing for faster builds
Parcel promises to do all of this without any configuration at all, and be fast too.
Parcel is installed using Yarn:
yarn global add parcel-bundler
npm install -g parcel-bundler
Parcel can be started using
parcel watch index.html
it will start scanning for assets from the HTML page source, and substitute any of the references it processes, with an output file.
You can also point Parcel to a JS file instead:
parcel watch entry.js
Conveniently Parcel comes with a built-in development server, so you don’t have to set up one. You can start it with:
When you’re happy with your app and you want to create a production-ready bundle, run
parcel build index.html
A production bundle disables hot module replacement and does not watch your changes, it exists once the bundling is done, and uses a minifier.
It also automatically trigger the
NODE_ENV variable to
production, to make libraries generate the production code (e.g. React and Vue use this convention)
Parcel supports both ES Modules (
import...) and CommonJS (
It performs automatic Code Splitting using dynamic imports.
What does this mean, and why is this useful?
A dynamic import returns a promise, and instead of loading all the dependencies at the application start, we can ask the browser to load them, but only executes some parts of the app when they are ready.
Or, we can ask the browser to load them only when we need it, for example when the user clicks a particular link.
See code splitting for more details.
Parcel supports plain CSS, Sass, Less and Stylus.
You can write your CSS using CSS Modules.
When Parcel finds you have a configuration for one of
- Babel (
- PostCSS (
- PostHTML (
it will use that automatically in its bundling process.
Hot module replacement
This is cool especially if your application has lots of states you need to trigger to test a specific functionality (e.g. “go to settings, click this, type that…”).
Parcel vs webpack
Let’s compare Parcel to webpack, because that’s so popular and you have probably heard of it or used it in a project. It’s also nice to know the differences even if you never used any of them.
webpack allows you to do tons of things, and while this is very cool, also means that we need to carefully configure it to do exactly what we want.
webpack.config.js file grows to hundreds of lines, and we copy/paste it to the next project, and it’s a pain if we need to modify it.
Parcel promises us to do a lot of what webpack does, but without any configuration at all, relying on conventions over configuration.
webpack 4, mostly in response to the Parcel success, introduced a zero-config mode, with some conventions, rather than always requiring a configuration.
While webpack has thousands of plugins, Parcel has some, but they are not advertised on the site, a sign that developers of Parcel want us to avoid using plugins until we can’t really avoid them because we can’t adapt to the conventions of Parcel, or to make Parcel support something that it does not out of the box.
Which one should you use? I would recommend Parcel for small projects, and webpack when you grow out of its capabilities and you want absolute control on everything your module bundler does.
More devtools tutorials:
- Introduction to Yeoman
- Bower, the browser package manager
- Introduction to Frontend Testing
- Using node-webkit to create a Desktop App
- VS Code: use language-specific settings
- Introduction to Webpack
- A short and simple guide to Babel
- An introduction to Yarn
- Overview of the Browser DevTools
- Format your code with Prettier
- Keep your code clean with ESLint
- A list of cool Chrome DevTools Tips and Tricks
- How to use Visual Studio Code
- Introduction to Electron
- Parcel, a simpler webpack
- An Emmet reference for HTML
- Configuring VS Code
- Configuring the macOS command line
- How to disable an ESLint rule
- How to open VS Code from the command line
- How to set up hot reload on Electron