Parcel

What it is

Parcel is a fast, zero-configuration web application bundler. It supports JavaScript, TypeScript, CSS, HTML, images, and more out of the box without requiring a complex configuration.

Parcel automatically detects the entry point of your project and builds an optimized bundle. It supports hot module replacement, code splitting, tree-shaking, and integrates well with modern frontend frameworks like React, Vue, and Svelte.

Installation

npm install --save-dev parcel

Getting started

The smallest useful thing you can do with it, and what each part means.

Simple build and dev server

javascript

12345678910# package.json scripts
"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
}

# Run dev server
npm run start
# Build for production
npm run build

Starts a development server with HMR and builds a production bundle for deployment.

Using with JavaScript modules

javascript

123456// src/index.js
import { greet } from './greet.js';
greet();

// src/greet.js
export function greet() { console.log('Hello, Parcel!'); }

Parcel automatically bundles JavaScript modules without requiring configuration.

Advanced usage

Where the library earns its place over a simpler alternative.

React setup

javascript

12345# src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));

Parcel supports JSX out of the box and can bundle React applications with zero configuration.

CSS and asset handling

javascript

1234// index.js
import './style.css';
import logo from './logo.png';
document.body.appendChild(Object.assign(new Image(), { src: logo }));

Parcel processes CSS, images, and other assets automatically during bundling.

Environment variables

javascript

process.env.NODE_ENV // Access environment variables defined in .env files

Parcel automatically loads `.env` files and exposes variables to your code.

Code splitting

javascript

// Dynamic import
import('./module.js').then(module => { module.doSomething(); });

Parcel automatically splits dynamically imported modules into separate bundles.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Cannot find module: Ensure all dependencies are installed and paths are correct.
Unexpected token: Check that file types are supported or install required Parcel plugins (e.g., for TypeScript or JSX).
Port already in use: Change the development server port using `parcel index.html --port 3001`.

Best practices

Use `.env` files to manage environment-specific settings.
Organize source files in a clear folder structure for maintainability.
Leverage Parcel plugins if you need additional functionality like TypeScript or PostCSS.
Use dynamic imports for code splitting and faster page load.
Monitor build output to ensure bundle size is optimized.

Background

Why it exists, and what it was reacting to.

Parcel was created by Devon Govett to provide an easier and faster alternative to Webpack. It focuses on simplicity and speed, using worker processes for parallel compilation, automatic dependency resolution, and built-in support for modern web standards.

Related libraries

Others in Build & Packaging for JavaScript.

Vite

Webpack

Rollup