Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.
First install Parcel using Yarn or npm:
yarn global add parcel-bundler
npm install -g parcel-bundler
Create a package.json file in your project directory using:
yarn init -y
npm init -y
Next, create an index.html and index.js file.
<html> <body> <script src="./index.js"></script> </body> </html>
Parcel has a development server built in, which will automatically rebuild your app as you change files and supports hot module replacement for fast development. Just point it at your entry file:
Now open http://localhost:1234/ in your browser. If hot module replacement isn't working you may need to configure your editor. You can also override the default port with the
-p <port number> option.
Use the development server when you don't have your own server, or your app is entirely client rendered. If you do have your own server, you can run Parcel in
watch mode instead. This still automatically rebuilds as files change and supports hot module replacement, but doesn't start a web server.
parcel watch index.html
In case you have more than one entry file, let's say
about.html, you have 2 ways to run the bundler:
Specifing the file names:
parcel index.html about.html
Use tokens and create a glob:
NOTE: In case you have a file structure like this:
- folder-1 -- index.html - folder-2 -- index.html
When you're ready to build for production, the
build mode turns off watching and only builds once. See the Production section for more details.