Parcel is a web application bundler that falls into the same category as webpack, but with a different approach. Its main selling point is that it can do many things without any configuration and is also fast.

Key Features

Parcel offers a range of features, including:

  • Bundling of assets such as JavaScript, CSS, HTML, and images
  • Zero configuration code splitting
  • Automatic transforms using Babel, PostCSS, and PostHTML
  • Hot module replacement
  • Caching and parallel processing for faster builds

All of these features can be used without the need for any manual configuration and are designed to ensure speedy development.

Installation

Parcel can be installed using either Yarn or npm. To install with Yarn, use the following command:

yarn global add parcel-bundler

For npm, use the following command:

npm install -g parcel-bundler

Getting Started with Parcel

To start using Parcel, you can point it to an HTML file or a JavaScript file. For example, to watch for changes in an HTML file:

parcel watch index.html

Alternatively, you can specify a JavaScript file:

parcel watch entry.js

Development Server

Parcel comes with a built-in development server, eliminating the need for additional setup. To start the development server, simply run:

parcel index.html

Creating a Production-ready Bundle

When you’re ready to create a production-ready bundle of your application, use the following command:

parcel build index.html

The production bundle will disable hot module replacement and will not watch for changes. It also triggers the NODE_ENV variable to production and uses a minifier to optimize the bundle.

Assets

JavaScript

Parcel supports both ES Modules (import...) and CommonJS (require...). It also provides automatic code splitting using dynamic imports. This allows you to load dependencies on-demand, improving performance and reducing initial load times.

CSS

Parcel supports plain CSS, Sass, Less, and Stylus. You can also utilize CSS Modules to organize and modularize your CSS code.

Transforms

Parcel automatically detects and uses any configurations you have for Babel, PostCSS, and PostHTML. This means you can leverage these tools without the need for additional setup.

Hot Module Replacement

Hot module replacement (HMR) is a valuable feature when developing applications. With HMR, changes to CSS or JavaScript will be updated in the browser without requiring a page refresh. This provides a smoother development experience, particularly when testing specific functionality.

Parcel vs Webpack

While webpack allows for extensive customization, it often requires complex configuration and can be overwhelming for smaller projects. Parcel, on the other hand, aims to simplify the development process by relying on conventions rather than explicit configuration. It offers many of the same capabilities as webpack but without the need for manual setup.

Webpack 4 introduced a zero-config mode in response to Parcel’s success, but Parcel remains a popular choice for smaller projects where simplicity and ease of use are prioritized. For larger and more complex projects, webpack provides greater flexibility and control.

Tags: web application bundler, development server, production-ready bundle, assets, JavaScript, CSS, transforms, hot module replacement