Awesome
<div align="center"> <a href="https://github.com/WebAssembly"> <img height="190" alt="binaryen logo" src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Web_Assembly_Logo.svg"> </a> <a href="https://github.com/webpack/webpack"> <img height="200" alt="webpack logo" src="https://webpack.js.org/assets/icon-square-big.svg"> </a> </div> <!-- [![node][node]][node-url] --> <!-- [![cover][cover]][cover-url] -->webassembly-loader
this loader can also be used as a library <sup>↙ see who use this?</sup>
<sup><sup>tl;dr -- see examples</sup></sup>
Motivation
Minimum Requirements
- Node v8
- Webpack v4
Installation
npm install webassembly-loader --save-dev
or
yarn add webassembly-loader --dev
Options
export
How wasm code would be exported. (see examples)
- Type:
string
- Default:
async
- Expected value:
buffer
will export wasm code as Buffermodule
will export wasm code as WebAssembly.Moduleinstance
will export wasm code as WebAssembly.Instanceasync
will instantiate wasm code asynchronously, return promise of both WebAssembly.Module and WebAssembly.Instanceasync-module
will compile wasm code asynchronously, return promise of WebAssembly.Moduleasync-instance
will instantiate wasm code asynchronously, return promise of WebAssembly.Instance
module.exports = {
rules: [{
test: /\.wasm$/,
type: "javascript/auto",
use: [{
loader: "webassembly-loader",
options: {
export: "async"
}
}]
}]
}
</details>
tips: you can use query parameter to change export mode on demand
Examples
See the test cases and example projects in *.test.ts and examples for more insight.
{export: 'buffer'}
import wasmCode from "./lib.wasm";
WebAssembly.compile(wasmCode).then(module => {
const instance = new WebAssembly.Instance(module);
console(instance.exports.add(1, 2)); // 3
});
{export: 'module'}
import wasmModule from "./lib.wasm";
const instance = new WebAssembly.Instance(wasmModule);
console(instance.exports.add(1, 2)); // 3
{export: 'instance'}
import wasm from "./lib.wasm";
console(wasm.exports.add(1, 2)); // 3
{export: 'async'}
import wasmInstantiate from "./lib.wasm";
wasmInstantiate(importObject | undefined).then(({ instance, module }) => {
console(instance.exports.add(1, 2)); // 3
// create different instance, extra will be called in different environment
const differentInstance = new WebAssembly.Instance(module);
console(differentInstance.exports.add(1, 2)); // 6
});
{export: 'async-instance'}
import wasmInstantiate from "./lib.wasm";
wasmInstantiate(importObject | undefined).then(instance => {
console(instance.exports.add(1, 2)); // 3
});
{export: 'async-module'}
import wasmInstantiate from "./lib.wasm";
wasmCompile(importObject | undefined).then(module => {
const differentInstance = new WebAssembly.Instance(module);
console(differentInstance.exports.add(1, 2)); // 3
});
Who use this?
- rs-jest
- rollup-plugin-rust
- [add yours 😉]
Contributing
- CONTRIBUTING.md for how you can make contribution
- HACKING.md for technical details