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)

Bun Options

Currently, bun supports only node target. Built .wasm file will be bundled in .js file (since bun doesn't support external file watching)

parameter	type	default	description
logLevel	string	info	Log Level (verbose, info, warn, error, quiet)

Examples

Check the example folder for a better understanding of how the loader works

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Acknowledgements

• @wasm-tool/wasm-pack-plugin
• wasm-pack

License

MIT