A Beginner’s Guide to Parcel

Building a single-page application often involves installing client-side npm packages. These libraries can’t run in a web browser. You’ll need a tool that can convert your code into a format that’s supported by browsers. According to npm download stats, webpack is currently the most popular tool that’s used to handle this conversion for you. Unfortunately, it’s not that easy to configure.

Most people usually copy a working webpack config file from project to project. Others, like me, prefer framework tools such as create-react-app to create our projects. Webpack is actually used by these tools, but it’s hidden so that developers can focus on working on the project. The problem with framework tools is that they create new projects that are bloated with development dependencies.

A better alternative for small and medium projects is to use a bundler called Parcel. It’s a tool that requires zero to minimal configuration to build a project. In addition, it builds faster and can yield about 50% smaller disk space footprint on new projects.

In this guide, you'll learn Parcel by using it. We'll build a simple, single-page application using vanilla JavaScript. We’ll later convert into React to see how much configuration is required to build such a project.