Skip to main content

MIT License View this project on NPM View this project on NPM Quality Gate Status Known Vulnerabilities

rust-wasmpack-loader

rust-wasmpack-loader compiles .rs (Rust) files to WebAssembly at build time and gives you back JavaScript that exposes the Rust exports. You import a .rs file the way you would import any module, and the loader handles the wasm-pack compilation and the glue code.

Supported build tools​

  • Webpack ^5.0.0 (web and node/node-async targets)
  • Rspack >=1.0.0 (the same Webpack-compatible loader, web and node targets)
  • Bun runtime (node target only)
  • esbuild plugin (node and web targets, WASM inlined)
  • Rollup plugin (node and web targets, WASM inlined)
  • Vite plugin (SSR uses the node strategy, the client uses web, with an emitted .wasm asset on production builds)
  • Next.js App Router through the withRustWasm helper (one .rs works from Server Components, Client Components, and Edge routes; node on the server and web on the client with bytes inlined, and a pre-compiled module on Edge)
  • Electron apps with Webpack (electron-main/electron-preload use the node strategy, electron-renderer uses web, bytes inlined)

What it does​

  • Import .rs files directly in your JavaScript or TypeScript. There is no separate build step to wire up.
  • Works with wasm_bindgen exports and with plain functions.
  • Finds the nearest Cargo.toml by walking up from the .rs file, so you do not configure the crate path by hand.
  • Builds for web and node targets, and across the bundlers listed above.
  • Types .rs imports in TypeScript: an ambient floor keeps imports valid, and generated .d.rs.ts sidecars (plus an editor Language Service plugin) give the exact #[wasm_bindgen] signatures.

You write computation-heavy code in Rust, pull in crates from the Rust ecosystem, and call the result from JavaScript without managing a separate compile-and-link pipeline.

Quick example​

// Import Rust code directly
import wasmModule from './fibonacci.rs';

// Use the compiled WASM module
const result = wasmModule.fibonacci(10);
console.log(result); // Output: 55
// fibonacci.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

Getting started​

Examples​

View the examples documentation.

The example folder in the repository shows how the loader works across different setups:

  • Web Webpack - browser applications
  • Node.js Webpack - server-side applications
  • Rspack - the Webpack-compatible loader on Rspack
  • Bun Node.js - the Bun runtime
  • esbuild - bundling for Node.js or the browser
  • Rollup - bundling for Node.js or the browser with the Rollup plugin
  • Vite - SSR and client builds with the Vite plugin
  • Next.js - App Router with Server and Client Components using the withRustWasm helper
  • Electron - main and renderer processes with Webpack

Contributing​

Contributions are welcome. See CONTRIBUTING.md for how to get started. Bug reports, feature suggestions, documentation fixes, and pull requests all help.

Acknowledgements​

Thanks to the projects this one builds on:

License​

This project is licensed under the MIT License.

See the LICENSE file for details.

Community and support​