Blazing fast, zero configuration web application bundler
Parcel is a zero-configuration web application bundler designed to eliminate the complexity of traditional build tooling. It handles JavaScript, TypeScript, CSS, HTML, images, and other assets out-of-the-box without requiring plugins, loaders, or configuration files. Simply point Parcel at your entry file and it automatically detects dependencies, transforms modern syntax, and produces optimized bundles.
The bundler achieves exceptional build speeds through multicore compilation using worker processes, persistent filesystem caching for instant rebuilds, and SWC—a Rust-based compiler for JavaScript and TypeScript. This architecture makes Parcel particularly attractive for developers who want to focus on writing code rather than maintaining build configurations.
Parcel targets the gap between simple projects that outgrow basic tooling and complex applications that don't justify Webpack's configuration overhead. It's used by teams building SPAs, static sites, and web applications where development velocity matters. The bundler's automatic code splitting, Hot Module Replacement, and production optimizations (minification, tree shaking, scope hoisting) work without explicit configuration.
Version 2.x introduced a modular plugin architecture with transformers, resolvers, and packagers, plus differential bundling that outputs both ES modules and legacy bundles automatically. The package supports advanced dependency resolution including tilde specifiers for monorepos, package exports, and browser-specific shimming for Node.js APIs.
// src/index.js - Entry point with dynamic imports and CSS
import './styles.css';
const button = document.getElementById('load-chart');
button.addEventListener('click', async () => {
// Automatic code splitting - chart library loads on demand
const { Chart } = await import('chart.js/auto');
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Sales',
data: [12, 19, 3]
}]
}
});
});
// TypeScript works without tsconfig setup
const greet = (name: string): void => {
console.log(`Hello, ${name}`);
};
greet('Parcel');
/* package.json:
{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html --public-url ./"
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"devDependencies": {
"parcel": "^2.16.4"
}
}
Run: npm run dev (starts server at localhost:1234 with HMR)
npm run build (outputs optimized bundle to dist/ with content hashing)
*/Rapid prototyping and MVPs: Start with npx parcel index.html and immediately get a dev server with HMR, TypeScript support, and CSS preprocessing without writing config files—ideal for hackathons or proof-of-concepts.
Migration from Create React App: Teams ejecting from CRA can adopt Parcel for React projects with less configuration surface area while maintaining features like JSX transforms, environment variables, and production optimizations.
Monorepo workspace builds: Use tilde specifiers (~) to resolve dependencies relative to package roots, enabling cleaner cross-package imports in Yarn/npm workspaces without complex Webpack alias configuration.
Static site generation: Bundle HTML entry points with automatic asset discovery—Parcel follows <script>, <link>, and <img> tags to build dependency graphs without manifest files, simplifying multi-page sites.
Library development with differential bundling: Target both modern and legacy browsers by specifying browserslist in package.json; Parcel automatically outputs ES module builds with <script type="module"> and nomodule fallbacks for older browsers.
An extremely fast JavaScript and CSS bundler and minifier.
Native-ESM powered web dev build tool
Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
npm install parcelpnpm add parcelbun add parcel