Using Parcel to bundle your Web app assets

webpack is a very popular Web asset bundler (GitHub shows it being used by 3.9m repos). First introduced in 2012, the current version is webpack 4 (with version 5.0 in the works).

webpack is extremely capable but it is also quite complex to configure correctly. Out of the box it does offer a zero-configuration mode, but to do anything worthwhile with webpack 4 you need to create a configuration file.

Some of the things you'd expect a bundler to do for you include:

  • Bundle and minify Javascript
  • Bundle and minify CSS
  • Minimize images
  • Cache bust assets
  • Compile SASS/LESS
  • Compile TypeScript/CoffeeScript
  • Build for dev or production
  • Work with multiple entry points
  • Code splitting
  • Hot module replacement

The last two tasks above are probably not "basic" things; they would probably be used more in very large applications. However, most of the other tasks above are usually used in apps of any size.

To perform the basic tasks above webpack needs several (at least 6 or 8) plugins and at least a 100+ line configuration file. webpack configuration gets more even more complex when you throw code splitting and hot module replacement into the mix. Once you understand webpack's general concepts, configuring it isn't as hard as it first looks--but it is fiddly and requires some dedicated study and a solid knowledge of the most-frequently used webpack plugins.

If you need help learning webpack, Colt Steele's 10-part YouTube series is highly recommended. He covers all but the last two items in the list above. This Smashing Magazine article is also very helpful.

Introducing Parcel

webpack is infinitely configurable and may be needed for very large apps with complex needs. However, for many applications webpack is JustTooMuch™. One superb alternative to webpack is Parcel. Parcel's first GA was released in September, 2018. While 3.9m GitHub repos use webpack, Parcel is only used by 6.7K repos. Despite its relative youth, though, Parcel is a mature and quite capable bundler and substantially easier to get up and running than webpack is.

Using Parcel with SASS

Use the --public-url ./ option when you're using a build server like VS Code's LiveServer or displaying the HTML from your local file system with the file:// protocol.

A way to do a hot reload is to start parcel like this:

and use VS Code's Live Server to view pages.

Using Parcel's watch mode with VS Code's LiveServer

By default, Parcel sets the public URL to / which produces asset URLs preceded by a single slash as shown below. When using VS Code's Live Server that single slash causes assets to not be found with Parcel's watch mode.

To fix this, set Parcel's --public-url option to ./ when using Parcel's watch command.

This produces asset URLs without the preceding slash as shown below.

Note: Use the --public-url option for Parcel's watch mode specifically when using VS Code's LiveServer.

TypeScript stuff

You should do this!

A starter tsconfig.json file for TypeScript

Example folder structure

Without any configuration, use this command line (where the only argument is the app's entry point):

to produce a dist folder with the packaged application in dev mode (that is, nothing is yet minimized).

Plugins

Automatically clearing Parcel's dist directory

Parcel doesn't implicitly provide for automatically clearing the dist directory. However, there is a Parcel plugin, parcel-plugin-clean-dist, that does that:

Compressing images

Parcel doesn't implicitly provide for compressing images. However there is a Parcel plugin, parcel-plugin-imagemin, that does that:

Leave a Comment

Your email address will not be published. Required fields are marked *