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

• Installation guide
• Quick start tutorial

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:

• @wasm-tool/wasm-pack-plugin - the original inspiration for the WebAssembly integration
• wasm-pack - the tool that handles the Rust-to-WASM compilation

License

This project is licensed under the MIT License.

See the LICENSE file for details.

Community and support

• Documentation
• Report issues
• GitHub Discussions
• NPM package