Rust Webpack 範本專為使用 Rust 生成的 WebAssembly 和 Webpack 建立 monorepo 風格的 Web 應用程式而設計，無需將您的 wasm 發布到 NPM。本教學將說明如何建置一個將在瀏覽器中執行您的 WebAssembly 程式碼的 Webpack JavaScript 專案。

為了產生新的 Rust Webpack 專案，我們使用了 rust-webpack npm 範本。

npm init rust-webpack your-package-name

將使用您提供的名稱建立新的專案資料夾。

如果我們查看專案，我們會看到以下內容

• .gitignore：忽略 node_modules
• LICENSE-APACHE 和 LICENSE-MIT：大多數 Rust 專案都以這種方式授權，因此已為您包含這些檔案
• README.md：您現在正在閱讀的檔案！
• index.html：包含 webpack 套件的基本 html 文件
• js/index.js：範例 JS 檔案，其中包含顯示如何匯入和使用 wasm 套件的註解
• package.json 和 package-lock.json
  • 引入用於使用 webpack 的 devDependencies
    • webpack
    • webpack-cli
    • webpack-dev-server
  • 定義一個 start 腳本來執行 webpack-dev-server
• webpack.config.js：使用 webpack 捆綁您的 JS 的設定檔案
• crate/src/lib.rs：您的 Rust crate 程式碼！

搭建的專案包含一個範例 Rust WebAssembly webpack crate。

在 crate/src/lib.rs 檔案中，我們看到一個可以從我們的 JS 檔案呼叫的 run 函式

# #![allow(unused_variables)]
#fn main() {
// Called by our JS entry point to run the example.
#[wasm_bindgen]
pub fn run() -> Result<(), JsValue> {
    set_panic_hook();

    // ...
    let p: web_sys::Node = document.create_element("p")?.into();
    p.set_text_content(Some("Hello from Rust, WebAssembly, and Webpack!"));
    // ...

    Ok(())
}
#}

現在，打開 js/index.js 檔案。我們看到我們的 Rust 生成的 wasm run 函式在我們的 JS 檔案中被呼叫。

import("../crate/pkg").then(module => {
  module.run();
});

為了產生我們編譯成 wasm 的 Rust 程式碼，我們在根目錄中執行

npm run build

這將在新的 dist 目錄中建立我們捆綁的 JavaScript 模組。

我們現在應該可以執行我們的專案了！在根目錄中，我們將執行

npm start

然後在網路瀏覽器中導航到 https://127.0.0.1:8080，您應該會在頁面的主體中看到「來自 Rust、WebAssembly 和 Webpack 的問候！」的文字。

如果您做到了，恭喜！您已成功使用 rust-webpack 範本！