Parcel is a super fast and easy to use bundler for your javascript web application projects. If you’re coming from Webpack and are frustrated with some of the setup that’s required, you might find that Parcel is easier to work with.

Installation

npm:

npm install -g parcel-bundler

Yarn:

yarn global add parcel-bundler

Create a package.json file in your project directory using:

npm:

npm init -y

Yarn:

yarn init -y

See also: Managing Node.js dependencies version in the package.json file

Structure

parcel-demo
 |- package.json
+ |- index.html
+ |- /src
+   |- index.js
+ |- dist/

Running a command npx parcel build src/index.js, do our job bundling our assets in dist/ folder and if you check out the newly created bundle.js, you will see that Parcel has created some wrapper around our own code.

Usage

The beauty of Parcel is that you don’t need to install or config any plugins — Parcel (itself advertise as a zero configuration bundler) recognise and install dependencies according to its need; and automatically compile, minify, bundle,.. your assets.

So, if you add these tasks scripts to your project, by modifying your package.json:

{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

Then, you will be able to run it:

# To run in development mode

npm run dev

# To run in production mode

npm run build

or, on Yarn:

# To run in development mode

yarn dev

# To run in production mode

yarn build

Additional resources

• Parcel examples: Parcel examples using various tools and frameworks.
• Awesome Parcel: A curated list of awesome Parcel resources, libraries, tools and boilerplates.
• Getting Started: Parcel Official documentation
• Parcel CLI: Parcel Official documentation using CLI
• The Parcel Bundler: Tutorial on YouTube by Gary Simon