Webpack with WebAssembly: GSoC 2018 — First Step (1)

Jevan Chan
Jul 12, 2018 · 4 min read

After a month of GSoC work, we release our first WebAssembly version of webpack-sources , the core package to manipulate and create source maps for your codes. We use Rust to develop our project and bundle the WebAssembly binary with a JavaScript interface, so you can easily load it as a Node.js module. We are going to share our work with you in this and following posts.

The project repository and npm package:

Early adopter: webpack-sources in WebAssembly

The APIs of our package are 100% compatible with currently used weback-sources , means that you can plug and play our npm package without changing any piece of code in Webpack!

To replace webpack-sources with our package, you can get it via yarn using:

$> yarn add webpack-sources@npm:wasm-webpack-sources

Make sure you are using Node.js version 8 or above to support WebAssembly module. The backward compatibility, falling back to pure JavaScript implementation when using earlier Node.js, has not been completed in this release (^0.1.2).

Important notice: This package is still under development and do not use it in production.

Why webpack-sources?

As a module bundler, Webpack manipulates your codes from different files in an efficient way. When processing your codes, Webpack stores them as strings in different “sources”. The source in Webpack can represent a code snippet, content and associated file name from a file, or even a manipulation on codes, like concatenation of codes or replacement in certain positions.

The sources are implemented as classes according to different purposes, you can find sources like RawSource , OriginalSource , ConcatSource , and ReplaceSource in the package. Moreover, webpack-sources creates source maps for your files with its two major dependencies: source-map and source-list-map . When you specify devtool in your Webpack configuration, webpack-sources creates useful mapping information for enhancing the debugging process.

If you forget about source map, here is a small reminder.

There are several reasons we choose webpack-sources as our first step:

WebAssembly with Rust

We choose Rust to rewrite the package and its dependencies and compile to WebAssembly binaries. You may ask why we prefer Rust instead of C++? There are some reasons for us to come to the decision:

There is a speech by Lin in JSConf EU 2018 talking about Rust with WebAssembly. You can refer to his post “Baby’s First Rust+WebAssembly module: Say hi to JSConf EU!”.

What’s next?

If you have given our project try, you may find out that the performance is worse than the original JavaScript implementation. As our first step in introducing WebAssembly binaries to Webpack, we focused on “making it work” in our first month. Indeed, we agree that performance is a principal objective. We have found some possible issues, and we will address the problem in future works.

In this series of posts, we will introduce our conversion work with Rust and wasm-bindgen . We put efforts on solutions of JavaScript interface for API compatibility. At the same time, the “boundary crossing issue” due to transferring values between WebAssembly and JavaScript is targeted out in this step. We will elaborate the details for you in later posts.

References

webpack

The official Medium publication for the webpack open source project!

Jevan Chan

Written by

webpack

webpack

The official Medium publication for the webpack open source project!