node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

rust-wasm-loader

Rust WebAssembly loader

npm

Usage

This is a simple Webpack loader that shells out to cargo to build a Rust project targeting WebAssembly. See this post for more details on using Rust to target the web.

To use it, first install the package:

$ npm install rust-wasm-loader

Configure the loader in your Webpack config:

module.exports = {
  // ... 
  module: {
    rules: [
      {
        test: /\.rs$/,
        use: {
          loader: 'rust-wasm-loader',
          options: {
            // Path to your 'build' or 'dist' directory relative to project root 
            path: 'build/',
          }
        }
      },
      // ... 
    ]
  }
}

Make sure you have the cargo, rustc, and emsdk binaries somewhere in your PATH. Require and initialize the wasm module:

const wasm = require('./main.rs')
wasm.initialize().then(module => {
  // Use your module here 
  const doub = module.cwrap('doub', 'number', ['number'])
  console.log(doub(21))
})

or with async/await:

async function loadAndUseWasm() {
  const wasm = require('./main.rs')
  const module = await wasm.initialize()
  const doub = module.cwrap('doub', 'number', ['number'])
  console.log(doub(21))
}
loadAndUseWasm()

Configuration

The following options can be added to the Webpack loader query:

Name Description Required Default
release Whether or not to pass the --release flag to cargo false false
path Path to your webpack output folder relative to project root true ''

Example

Check out the example directory for a simple Hello World example.

This project is based off of rust-emscripten-loader by mrdziuban.