何番煎じかわかりませんが、表題のとおりです。

ディレクトリ構成

今回のディレクトリ構成は以下になります。
RustのコードとJavaScript(Web)のコードでディレクトリ分けました。
Rust側のプロジェクトがwasmディレクトリ、
JavaScript側のプロジェクトがwwwディレクトリです。

wasm_from_rust
  +-- wasm
        +-- Cargo.toml
        +-- pkg
        +-- src
              +-- lib.rs
  +-- www
        +-- pkg
        +-- dist
        +-- node_modules
        +-- package.json
        +-- src
              +-- index.html
              +-- index.js
        +-- webpack.config.js

手順

1. ルートディレクトリを作成する

$ mkdir wasm_from_rust
$ cd wasm_from_rust

2. Rust側

2.1 Rustプロジェクトを作成する

$ cargo new --lib wasm
$ cd wasm

2.2 WebAssemblyを使用するための参照を追加する

WebAssemblyを使用するため、Cargo.tomlに記述していきます。
libにcdylib、dependenciesにwasm-bindgenです。

[package]
name = "wasm"
version = "0.1.0"
authors = ["nabezokodaikon <nabezoko.daikon@gmail.com>"]
edition = "2018"

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

[dependencies]
wasm-bindgen = "0.2.40"

参照解決のため、ビルドしておきましょう。

$ cd wasm
$ cargo build

2.3 Rustでコードを書く

では、Rustでコードを書いていきましょう。
引数で受け取った文字列を少し加工して、アラートを表示するだけのものです。

extern crate wasm_bindgen;

use wasm_bindgen::prelude::wasm_bindgen;

#[wasm_bindgen]
extern "C" {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

2.4 Rustのnpmパッケージを作成する

npmのパッケージを生成するwasm-packをインストールします。

$ cargo install wasm-pack

作成したRustのコードで、npmのパッケージを作成するコマンドを実行します。

$ wasm-pack build

コマンドが成功すると、pkgディレクトリが作成されます。

wasm_from_rust
  +-- wasm
        +-- Cargo.toml
        +-- pkg    <--- 作成したnpmパッケージディレクトリ
        +-- src
              +-- lib.rs

3. JavaScript側

ここで一度プロジェクトのルートディレクトリに戻っておきましょう。

cd ../

3.1 npmコマンドで初期化する

$ mkdir www
$ cd www
$ npm init

3.2 必要なnpmパッケージをインストールする

先程作成したRustのnpmパッケージ。

$ npm install ../wasm/pkg

Rustで生成したパッケージを読み込むためのパッケージ。

$ npm install --save-dev @wasm-tool/wasm-pack-plugin

webpack関連のパッケージ。

$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli
$ npm install --save-dev html-webpack-plugin

開発用サーバのパッケージ。

$ npm install --save-dev webpack-dev-server

3.3 webpackの設定ファイルを作成する

以下になります。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new WasmPackPlugin({
      crateDirectory: path.resolve(__dirname, "../wasm")
    })
  ]
};

3.4 JavaScriptのコードを書く

準備が整ったので、JavaScript側のコードを書きます。

$ mkdir src
$ touch src/index.html
$ touch src/index.js
3.4.1 index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>wasm from Rust</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
3.4.2 index.js

一つポイントなんですが、wasmをインポートする場合、Dynamic importでなければなりません。

const js = import("../node_modules/wasm/wasm.js");

js.then(js => {
  js.greet("WebAssembly");
});

以上です

後はwebpackでビルドして、開発用サーバを起動すれば実行できます。

$ ./node_modules/.bin/webpack --config webpack.config.js
$ ./node_modules/.bin/webpack-dev-server