Stop 17 · Build ToolsTopics · 3/9

Parcel

In short

Want a bundler that just works without a config file? Point Parcel at your index.html and it figures out the rest, which makes it lovely for small projects and hackathons.

A zero-configuration bundler that works out of the box for most projects, trading some of Webpack's flexibility for a much simpler setup experience.

The jaadu relaxes in the back of an auto-rickshaw, pointing ahead while the driver steers.

Think of it like this

Auto-rickshaw vs driving yourself

With Webpack you hold the steering, choose the route and handle the gears. With Parcel you just tell the auto bhaiya the address. You get less control over the route, but for most rides you reach faster and with less stress.

Watch it happen

What Parcel does by itself

index.html

Detect

Transform

Cache

dist

1/5Parcel starts from src/index.html, the source field in package.json.

The big ideas

What you need to know

Zero config to start

Parcel reads your HTML, finds the scripts and styles it links to, and handles them automatically.

Detects file types

TypeScript, JSX, SCSS and images work out of the box. Parcel installs some extra plugins for you when needed.

Caches between runs

Parcel saves its work in a .parcel-cache folder, so later builds are faster.

Config only when you need it

If the defaults don't suit you, a .parcelrc file lets you change the pipeline.

See it in code

Walk through the code

json

1{2  "name": "my-parcel-app",3  "source": "src/index.html",4  "scripts": {5    "dev": "parcel",6    "build": "parcel build"7  },8  "devDependencies": {9    "parcel": "^2.0.0"10  }11}

1/3source tells Parcel where to begin, so commands need no file path.

The source field tells Parcel where to begin, so plain parcel and parcel build need no file path. Production output goes to dist by default.

Save yourself the pain

Common mistakes

Oops

Committing the .parcel-cache and dist folders to Git.

Do this instead

Add both to .gitignore. They're generated on every machine and only make your repo heavy.

Oops

Picking Parcel for a big app that needs very custom build steps, then fighting the defaults.

Do this instead

Parcel shines for small to medium apps. If you need heavy customisation, compare it with Vite or Webpack first.

Your mission

Zero-config in ten minutes

~15 min

Quick check

What's the main trade-off when you choose Parcel over Webpack?

Go deeper

1Bundle a small project with Parcel and note how little config was needed.
2Compare its build output and speed to Vite for the same project.
3Understand why 'zero-config' tools trade some control for simplicity.