Latest Code Tutorials

Parcel Web Application Bundler Example From Scratch

The parcel is the web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration. With Parcel, you can quickly load modules with either CommonJS and ES6 module syntax.

Working with a webpack was not an easy task because it requires lots of configuration. Although today’s all CLI build tools are built on a webpack, but Parcel is created to get rid of tons of settings and gives us a clean application structure. The parcel is super fast as compared to the webpack.

Parcel Web Application Bundler

You can get more information on its official website. It provides the following features.

  1. Blazing fast bundle times.
  2. The parcel has out of the box support for JS, CSS, HTML, file assets, and more – no plugins needed.
  3. Code is automatically transformed using Babel, PostCSS, and PostHTML when needed – even node_modules
  4. Using the dynamic import() syntax, Parcel splits your output bundles, so you only load what is needed on the initial load.
  5. Parcel automatically updates modules in the browser as you make changes during development, no configuration needed.
  6. Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.

Now, we will see how we can use parcel in our web application step by step.

Step 1: Install Parcel.

First, install Parcel using Yarn or npm:


yarn global add parcel-bundler


npm install -g parcel-bundler

Now, create a new project folder.

Step 2: Create three files inside a new project.

We need to create three files.

  1. index.html
  2. index.js
  3. main.js
// main.js

export const add_fn = (x,y) => {
  return parseInt(x) + parseInt(y);

Now, import this file in the index.js.

// index.js

import { add_fn } from './main';


Finally, include this file in the index.html file.

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>ParcelJS Practice</title>
   <script src="index.js"></script>

Step 3: Just run parcel index.html.

Just run parcel index.html to start a dev server.

Parceljs Tutorial 2018

Now, go to the browser and hit http://localhost:1234/. You can see the alert box that was saying nine as a sum. That is it. You do not need any other config.js related configuration file. You can override that default port no by the following command.

parcel index.html -p 3000

Parcel generates a dist folder and that creates one JS file. It adds dynamically in our HTML file and runs that bundled code. If you see your index.html file’s page source. You can see something like this.

<script src="/dist/e2a6da8197450e2f85f2294413f78d41.js"></script>

So Parcel handles all the stuff. We can use Preprocessors like Sass, Less. We can use Parcel with React.js or Parcel with Vue.js or Parcel with Typescript. In that case, some babel configurations are required, but that is another day’s topic. So, the Parcel Web Application Bundler example is over.

  1. Shillongtitude says

    Nice. Parcel’s zero-config quick setup makes it a really good alternative to webpack for smaller projects (or even mid-large scale projects too). Will definitely give Parcel a go with my next project. Thanks for the post.

    1. Krunal says

      Thanks, Keep Sharing!!

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.