本教學的這一部分將幫助您建立一個 Webpack JavaScript 專案，以便在瀏覽器中執行您的 WebAssembly 程式碼。

為了建立一個可以使用我們新套件的專案框架，我們將使用一個名為 create-wasm-app 的 npm 範本。要在一個與您的 Rust 專案不同的目錄中使用它，請執行以下指令：

npm init wasm-app my-new-wasm-app

您可以選擇一個不同於 my-new-wasm-app 的專案名稱。該工具將會建立一個具有該名稱的目錄。

如果我們查看該目錄，我們將會看到以下內容：

• .gitignore：忽略 node_modules
• LICENSE-APACHE 和 LICENSE-MIT：大多數 Rust 專案都以這種方式獲得授權，因此這些檔案已包含在內
• README.md：您現在正在閱讀的檔案！
• index.html：一個包含 webpack 捆綁包的基本 html 文件
• index.js：範例 js 檔案，其中包含一個註釋，說明如何匯入和使用 wasm 套件
• package.json 和 package-lock.json
  • 提取用於 webpack 的開發依賴項
    • webpack
    • webpack-cli
    • webpack-dev-server
  • 定義一個 start 腳本來執行 webpack-dev-server
• webpack.config.js：使用 webpack 捆綁 js 的設定檔

建立的專案框架在您的 package.json 中包含一個範例 WebAssembly 套件 hello-wasm-pack。進入 package.json 檔案，新增您的套件，並從 "dependencies" 部分移除 hello-wasm-pack 依賴項。

現在，開啟 index.js 檔案。將第一行中的 hello-wasm-pack 替換為您的套件名稱

import * as wasm from "<your package name>";

wasm.greet();

在我們執行專案之前，我們需要確保我們已安裝依賴項

npm install

我們現在應該可以執行我們的專案了！要執行我們的專案，我們將執行

npm start

然後在網路瀏覽器中導覽至 https://127.0.0.1:8080，您應該會看到一個顯示「Hello World!」的警告框。

如果您成功了，恭喜您已成功將您的第一個 wasm 程式碼上傳到 npm 並正確使用它！