MENU


Parcel

Alexa's Ranking: 143,033

In some ways, Parcel is more advanced than Webpack. Parcel supports many different languages and file types out of the boxout of the box out of the box , from web technologies like HTML, CSS, and JavaScript, to lower-level languages like Rust, and anything that compiles to WebAssembly (WASM), to assets like images, fonts, videos, and more. You can build multiple targets at once and live-update them as you make changes. Parcel compiles all of your files in isolation in parallel inside workersworkers workers , cachingcaching caching all of them as it goes along. No explicit configuration is needed for code splitting using dynamic import()dynamic import() dynamic import() statements.

Unlike Webpack, the entry point of Parcel is an HTML file instead of a JS file. You should not declare type=”module” within the <script> tags.

To start, install the necessary dependencies:


> npm i -g parcel-bundler> npm init -y> npm i react react-dom

Prepare the following files:

1) [project]/package.json


{
  "name": "parcel-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel serve ./src/index.html",
    "build": "parcel build ./src/index.html --public-url=./"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }}

2) [project]/src/index.html


<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>My Parcel Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.tsx"></script>
  </body></html>

3) [project/src/index.tsx


import * as React from 'react';
  import { render } from "react-dom";import "./style.css";    // @import syntax also recognizedimport "./style2.css";  //
  merges 2 CSS files into 1render(<h1>Hello World!!</h1>, document.getElementById("root"));

4) [project]/src/style.css


body { background:yellow; }

5) [project]/src/style2.css


body { color: red; }

To test the site on a browser:


> npm run start

This watches the source files with hot module replacement. You will notice an instant change on the browser as you change the source files. The built-in source mapping will allow you to trace line numbers back to the source files when doing a console.log() for instance.

To build the files for production:


> npm run build

This minimizes the files.

Here is what the built file [project]/dist/index.html looks like internally:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>My Parcel Project</title><link rel="stylesheet" href="src.7d22030d.css"></head><body> <div id="root"></div> <script src="src.faaa7f00.js"></script> </body></html>