parcel

What is parcel?

Parcel is a web application bundler, differentiated by its zero configuration setup and fast performance. It supports a wide range of file types out of the box and provides features like hot module replacement, code splitting, and tree shaking.

What are parcel's main functionalities?

Zero Configuration

Parcel requires no configuration to get started. You can simply point it to your entry file, and it will automatically detect and bundle all dependencies.

npx parcel index.html

Hot Module Replacement

Parcel supports Hot Module Replacement (HMR), which allows you to see changes in your application without a full reload. This is particularly useful for development as it speeds up the feedback loop.

npx parcel index.html --hmr

Code Splitting

Parcel supports code splitting, which allows you to split your code into smaller chunks that can be loaded on demand. This can improve the performance of your application by reducing the initial load time.

import('module').then(module => { /* use module */ });

Tree Shaking

Parcel automatically removes unused code from your final bundle through a process called tree shaking. This helps to reduce the size of your final bundle.

import { usedFunction } from 'module';

Other packages similar to parcel

webpack

Webpack is a highly configurable module bundler for JavaScript applications. Unlike Parcel, Webpack requires a configuration file to get started, but it offers more flexibility and a larger ecosystem of plugins and loaders.

rollup

Rollup is a module bundler for JavaScript that focuses on ES6 modules. It is known for its smaller bundle sizes and tree-shaking capabilities. Rollup is often used for library development, whereas Parcel is more commonly used for web applications.

esbuild

Esbuild is an extremely fast JavaScript bundler and minifier. It is written in Go and is designed to be much faster than other bundlers like Webpack and Parcel. However, it is less mature and has fewer features compared to Parcel.

README

Parcel is a zero configuration build tool for the web. It combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

Features

• 😍 Zero config – Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. It has a built-in dev server with hot reloading, beautiful error diagnostics, and much more. No configuration needed!
• ⚡️ Lighting fast – Parcel's JavaScript compiler is written in Rust for native performance. Your code is built in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!
• 🚀 Automatic production optimization – Parcel optimizes your whole app for production automatically. This includes tree-shaking and minifying your JavaScript, CSS, and HTML, resizing and optimizing images, content hashing, automatic code splitting, and much more.
• 🎯 Ship for any target – Parcel automatically transforms your code for your target environments. From modern and legacy browser support, to zero config JSX and TypeScript compilation, Parcel makes it easy to build for any target – or many!
• 🌍 Scalable – Parcel requires zero configuration to get started. But as your application grows and your build requirements become more complex, it's possible to extend Parcel in just about every way. A simple configuration format and powerful plugin system that's designed from the ground up for performance means Parcel can support projects of any size.

Getting Started

See the following guides in our documentation on how to get started with Parcel.

• Building a webapp with Parcel
• Building a library with Parcel
• Migrating from Parcel v1

Documentation

Read the docs at https://parceljs.org/docs/.

Community

• ❓ Ask questions on GitHub Discussions.
• 💬 Join the community on Discord.
• 📣 Stay up to date on new features and announcements on Twitter.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Changelog

[2.9.2] - 2023-06-08

Fixed

• Core

  • Fix infinite loop when entries look like globs – Details
  • Fix proxyrc require from path – Details

• JavaScript

  • Treat re-exports of * from empty files with sideEffects: false as ESM – Details

• CSS

  • Fix self references error in CSS module JS assets causing "Bundle group cannot have more than one entry bundle of the same type" – Details

• Dev server

  • Serve folder's index when requesting folder without slash – Details

• Web extensions

  • Allow source maps files in webextension – Details

• Image

  • Add core as peerdep to image optimizer – Details