#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:8].module.wasm"

#Output directory

When a .wasm asset is imported, it will be output by Rsbuild 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;