Parcel Bundler Setup for Web Project

Parcel Bundler Configuration for Web Project

Parcel is a bundler with zero configuration. You point to entry file, rest it determines itself: finds dependencies, selects transformers, sets up tree-shaking. This makes it excellent choice for quick start of project or prototype where you don't want to spend day on Webpack config.

Installation and run

npm install --save-dev parcel

# Run dev server — just specify HTML
npx parcel index.html

# Production build
npx parcel build index.html

Parcel reads index.html, finds all <script>, <link>, images, processes them automatically. TypeScript, JSX, CSS Modules, PostCSS — everything is picked up without explicit setup, if needed package is installed.

package.json configuration

{
  "scripts": {
    "dev": "parcel src/index.html --port 3000",
    "build": "parcel build src/index.html --no-source-maps",
    "clean": "rm -rf dist .parcel-cache"
  },
  "targets": {
    "default": {
      "browsers": "> 0.5%, last 2 versions, not dead",
      "outputFormat": "esmodule",
      "isLibrary": false
    }
  }
}

TypeScript and React

Install dependencies — Parcel picks them up automatically:

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

Minimal tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true
  }
}

After that parcel src/index.html — and TypeScript works without additional configuration.

CSS Modules

/* Button.module.css */
.root {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 4px;
}

import styles from './Button.module.css';

export const Button = ({ children }: { children: React.ReactNode }) => (
  <button className={styles.root}>{children}</button>
);

Parcel automatically handles .module.css as CSS Modules — hashes class names, types them.

SCSS and PostCSS

npm install --save-dev sass

Enough to rename .css to .scss. For PostCSS:

npm install --save-dev postcss autoprefixer

.postcssrc:

{
  "plugins": {
    "autoprefixer": {}
  }
}

Building library

Parcel can build npm packages, reading main, module, types from package.json:

{
  "source": "src/index.ts",
  "main": "dist/index.cjs",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "parcel build"
  }
}

Path aliases

{
  "alias": {
    "@components": "./src/components",
    "@utils": "./src/utils"
  }
}

alias section in package.json — and imports like import { Button } from '@components/Button' work.

When Parcel doesn't fit

• Need detailed control over chunk-splitting and filenames
• Complex custom build logic (Parcel doesn't assume extensive config)
• Team already knows Webpack/Vite well and migration creates more questions than solves

Timeline

Setting up Parcel for new React/TypeScript project from scratch: 30–60 minutes. Migrating existing project from Webpack to Parcel: 2–8 hours depending on amount of Webpack custom settings.