Bundling WebAssembly Modules with Parcel

Parcel is a blazing-fast, zero-configuration web application bundler. It’s the new kid in the web application bundler space, and it’s built from scratch to be fast, needing zero configuration. The main pain point of webpack is its configuration. Although it looks simpler to start with, it gradually becomes more complex and unmanageable when the application grows. But the configuration will give a complete overview of what’s happening and how it’s bundling. With zero configuration, Parcel will infer the bundle from the initial point (that is, index.html) and then build the entire graph from there.

While webpack has a plugin-based architecture, Parcel has a worker-based architecture. This enables Parcel to be faster than webpack, as it uses multicore compilation and cache. Parcel also features inbuilt configuration to support JavaScript, CSS, and HTML files. Just like webpack, it also has various plugins that we can use to configure the bundler to produce the required output. Moreover, it has inbuilt transformation support using standard Babel, PostCSS, and PostHTML when it’s required. And we can extend them and change them via plugins if needed.

Parcel also has automatic, out-of-the-box Hot Module Replacement to track and record changes to files (that are recorded by the dependency graph). Let’s build WebAssembly modules using Parcel as a bundler.

Getting started with a project

1. We’ll start by creating a new Rust project: