webpack awarded $125,000 from MOSS Program
Implementing first-class support for WebAssembly
One of the signature features of webpack is its use of the “dependency graph” to manage and bundle assets.
However, every resource that is loaded into webpack must be treated as JavaScript (this includes css, images, svgs, html, etc.). Because of this, only JavaScript is a first-class module type in webpack. The downsides of this are that assets like CSS, HTML, cannot be lazy-loaded with their own special runtimes. Rather, we have had to make hackier-than-not solutions (like extract-text-webpack-plugin) to support these kinds of limitations.
WebAssembly
At webpack, we would like to shift our focus to supporting more module types. One of these module types we would like to treat as a first-class citizen is WebAssembly. WebAssembly is described by Mozilla as:
…an emerging standard whose goal is to define a safe, portable, size- and load-time efficient binary compiler target which offers near-native performance — a virtual CPU for the Web.
Although WebAssembly API’s are usable right now (in FireFox, Chrome, Opera, and more), the lack of published modules suggest that there is a high barrier of entry for developers using, compiling to, and publishing WebAssembly modules.
WebAssembly cannot progress, thrive, or evolve, unless developers, businesses, and companies can adopt it seamlessly into their production environments. We felt that webpack could be that vessel to help make it more accessible and ignite widespread adoption. But this is a considerable amount of work and time.
Therefore we looked to the Mozilla Open Source Support (MOSS) Program to help us support this work. WebAssembly is a very important technology to Mozilla and their Web Platform, so submitting this grant was a perfect win-win scenario.
WebAssembly and webpack
Today I’m happy to announce, that we have been awarded $125,000 from the MOSS Program to implement WebAssembly as a first-class module type. By pursuing this work, WebAssembly will become more accessible and easier to use for all developers.
The win-win
To pursue this work, we have to rewrite, abstract, and decouple some of the most important pieces of the webpack architecture. By doing this, we open up the ability for any asset type to have the potential of being a first-class citizen down the road.
This means runtimes, parsers, dependency analysis, can all be tailored the right way per module type. This would let us do away with extract-text-webpack-plugin and let CSS bundling be a native feature. We could even have native support for lazy-loading bundles of CSS — a feature which doesn’t exist with webpack currently.
The vision
We want anyone to drop a .wasm or .wat file in their project, import it into the file(s) they need, and then webpack will handle the rest:
The power of webpack loaders and WebAssembly
To take it a step further we want you to be able to just drop in any Rust, C++, C file into your project, and then use it like a JavaScript module.
Once we have a basic implementation completed (as part of our fulfilled milestones) we will then focus on working with experts in the LLVM, and language communities to create loaders that will take raw language files and return WebAssembly modules!
This is what we expect you to be able to write:
On top of this, expect for use to also be researching with other Module Loader authors like Guy Bedford to approach Shared Memory modules and other ways we can abstract as much overhead from your experience as possible. We even believe that based on the specification, you can code-split, and scope hoist or concatenate WebAssembly modules as well.
How can I help?
This work is not going to be completed overnight! We have already created issues on our GitHub to track the milestones that we have created for the Grant. We would love your help, support, and insight while we work on this. So feel free to comment away while we get ready to undergo this work.
Additionally, Tobias will continue to log our progress tracking this work in our Freelance Log Book!
Language authors, do you have a language which can be a host to target to WebAssembly? Then reach out to myself or submit a GitHub issue! We would love to help make your language more accessible to the Web and WebAssembly by helping create a webpack loader that can emit WebAssembly modules. We are anxious to collaborate with you!
WebAssembly module authors, we’d love to have examples of modules that we can work with. No module is too large or too small.
More to come!
There is much more down the road that we want to share. But this is a huge win for not only WebAssembly, but also the webpack and web ecosystem. We thank the MOSS Program for their support, as we celebrate yet another win for Open Source Sustainability.