Rust-wasmpack-loader NPM

rust-wasmpack-loader

Native wasm Webpack/Bun loader for .rs (Rust) resources

Works with webpack ^5.0.0
Works fine with web and node (node-async) targets
NEW! Bun support (node target only)

Dynamically finds the Cargo.toml file for building the wasm source. Provides the ability to use both wasm_bindgen and regular functions. Allows you to use the standard import of a .rs file in a .js or .ts file without any headache

Installation

Please be sure that rust is installed on your machine. If not, please install it from the official site

Install rust-wasmpack-loader with npm

  npm i rust-wasmpack-loader

Or install into Dev dependencies

  npm i --save-dev rust-wasmpack-loader

Usage

Create Cargo.toml file (in root or in a folder, where you want to create .rs file)

# Cargo.toml

[package]
name = "wasm-fibonacci-test"
version = "0.1.0"
authors = ["Yehor Brodskiy"]

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.95"

Webpack Configuration

Add .rs rule to webpack config

// webpack.config.js

module.exports = {
    // ...
    module: {
        // ...
        rules: [
            // ...
            {
                test: /\.rs$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "rust-wasmpack-loader",
                    },
                ],
            },
        ]
    }
}

Bun Configuration

Basic Configuration

Add preload.js into bun configuration file

# bunfig.toml
preload = [
    #    ...
    "./node_modules/rust-wasmpack-loader/bun/preload.js"
    #    ...
]

This preload file will load default rust-wasmpack-loader configuration

Advanced Configuration

If you want to override default configuration, you can create your own init.js file

// init.js | init.ts
import { plugin } from "bun";
import loader from "rust-wasmpack-loader";
// ...

plugin(loader.bun({
    // here you can override default configuration
}));

// ...

And then add it to preload

# bunfig.toml
preload = [
    #    ...
    "./path/to/init.js"
    #    ...
]

Webpack Options

parameter	type	default	description
`web`	`object`		options, which used for `web` target
`node`	`object`		options, which used for `node` target
`web.asyncLoading`	`boolean`	`false`	enables load `.wasm` file asynchronously, instead of bundling in .js file
`web.wasmPathModifier`	`array<string>`	`["/"]`	rewrite wasm requestPath, if wrong publicPath used
`web.publicPath`	`boolean`	`true`	use webpack PublicPath
`node.bundle`	`boolean`	`false`	Bundle `.wasm` file in `.js` file (additional `.wasm` file will not create)
`logLevel`	`string`	`info`	Log Level (`verbose`, `info`, `warn`, `error`, `quiet`)