Rust WebAssembly loader
Usage
This is a simple Webpack loader that shells out to cargo to build a Rust project targeting WebAssembly. See this post for more details on using Rust to target the web.
To use it, first install the package:
$ npm install rust-wasm-loaderConfigure the loader in your Webpack config:
module.exports = {
// ...
module: {
rules: [
{
test: /\.rs$/,
use: {
loader: 'rust-wasm-loader',
options: {
// Path to your 'build' or 'dist' directory relative to project root
path: 'build/',
}
}
},
// ...
]
}
}Note: if you are using file-loader, make sure to add .wasm to the test field, otherwise the module will not be copied! (e.g. test: /\.(wasm|jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,).
Make sure you have the cargo, rustc, and (optionally) emsdk binaries somewhere in your PATH. stdweb and other Rust libraries require a nightly build, which can be installed from https://rustup.rs/ .
Require and initialize the wasm module:
const wasm = require('./lib.rs')
wasm.then(module => {
// Use your module here
console.log(module.doub(21))
})or with async/await:
async function loadwasm() {
const lib = await require('./lib.rs');
// Use your module here
console.log(lib.doub(21));
}
loadwasm();Configuration
The following options can be added to the Webpack loader query:
| Name | Description | Required | Default |
|---|---|---|---|
release |
Whether or not to pass the --release flag to cargo |
false | false |
path |
Path to your webpack output folder relative to project root | true | '' |
target |
Allows one to specify wasm32-unknown-emscripten as build target |
false | 'wasm32-unknown-unknown' |
Example
Check out the example directory for a simple Hello World example.
This project is based off of rust-emscripten-loader by mrdziuban.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent