#Wasm

Rsbuild provides native support for WebAssembly (WASM) modules, allowing you to import and use .wasm files directly in your project.

#Import

You can reference a WebAssembly module in a JavaScript file using named imports:

import { add } from './add.wasm';

console.log(add); // [native code]
console.log(add(1, 2)); // 3

WebAssembly modules can also be imported via dynamic import:

import('./add.wasm').then(({ add }) => {
  console.log('---- Async Wasm Module');
  console.log(add); // [native code]
  console.log(add(1, 2)); // 3
});

You can also get the path of a WebAssembly module using the new URL syntax:

const wasmURL = new URL('./add.wasm', import.meta.url);

console.log(wasmURL.pathname); // "/static/wasm/[contenthash:10].module.wasm"

#Source import

You can use Source Phase Imports to get a compiled WebAssembly.Module instead of the module exports:

import source wasmModule from './add.wasm';

const instance = await WebAssembly.instantiate(wasmModule);
const { add } = instance.exports;

console.log(add(1, 2)); // 3

This is useful when you need to instantiate a Wasm module yourself, create multiple instances with different imports, or transfer the module to a worker.

#Output directory

When you import a .wasm asset, Rsbuild outputs it to the dist/static/wasm directory by default.

You can change the output directory for .wasm files using the output.distPath configuration:

export default {
  output: {
    distPath: {
      wasm: 'resource/wasm',
    },
  },
};

#Type declaration

When you import a WebAssembly file in TypeScript code, you usually need to add the corresponding type declaration.

For example, if the add.wasm file exports an add() method, you can create an add.wasm.d.ts file in the same directory and add the corresponding type declaration:

export const add: (num1: number, num2: number) => number;