修改Rust代码后如何重新构建WASM应用并实现自动重建

npm init wasm-app 生成的默认项目模板，是将 Rust 编译出的 wasm 包存放在pkg目录作为本地依赖引用。出现代码变更不生效，通常两个原因：一是执行wasm-pack build时输出路径没对准前端项目的pkg目录，二是默认的 webpack dev server 没有监听pkg目录或 Rust 源码目录的变化，不会自动触发刷新，加上npm本地依赖偶发缓存，就会出现改了代码看不到效果的情况。

按照以下顺序操作可以保证变更生效：

• 进入 Rust 项目根目录（存放Cargo.toml的目录），执行构建命令，指定web目标和正确的输出路径：
  wasm-pack build --target web --out-dir 你的前端项目路径/pkg
  比如前端项目是和Rust项目同级的wasm-frontend目录，就写--out-dir ../wasm-frontend/pkg
• 回到前端项目目录，停掉之前运行的dev服务，重新安装本地依赖刷新缓存：
  npm install
• 重新启动前端dev服务：
  npm run start
  打开浏览器强制刷新（Ctrl+F5）就能看到代码变更。

有两种通用方案，不用每次手动执行构建命令：

• 方案1：用cargo-watch监听Rust源码自动构建

  1. 先安装监听工具：cargo install cargo-watch
  2. 在Rust项目目录单独开一个终端，执行监听命令：
     cargo watch -i "pkg/*" -s "wasm-pack build --target web --out-dir 你的前端项目路径/pkg"
     命令会自动监听所有.rs文件的修改，保存后自动触发wasm构建。
  3. 修改前端项目的webpack.config.js，让dev server监听pkg目录变化，找到devServer配置项，添加watchFiles规则：

     devServer: {
       // 原有配置保留
       watchFiles: ["src/**/*", "pkg/**/*"]
     }
     

  配置完成后，改Rust代码保存会自动构建，前端页面会自动刷新。

• 方案2：通过webpack插件直接集成构建流程（体验最好，不用开多个终端）

  1. 在前端项目目录安装wasm构建插件：npm install @wasm-tool/wasm-pack-plugin --save-dev
  2. 修改webpack.config.js，顶部引入插件和path模块（如果没引入的话）：

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

  3. 在配置的plugins数组中添加插件配置，替换成你自己的Rust项目实际路径：

     plugins: [
       // 原有插件配置不要改动
       new WasmPackPlugin({
         crateDirectory: path.resolve(__dirname, "你的Rust项目相对路径"),
         outDir: path.resolve(__dirname, "pkg"),
         target: "web"
       })
     ]
     

  配置完直接执行npm run start启动服务即可，修改Rust代码会自动触发编译、热更新，和开发普通前端项目体验一致，不需要手动执行任何wasm-pack命令。

排错提示：如果配置完还是看不到变更，先打开浏览器开发者工具，在网络设置里勾选「禁用缓存」，再刷新页面；开发阶段不要加--release参数构建，不然编译速度慢，也不会生成sourcemap方便调试，release参数只在最终打包发版时用npm run build的时候配合使用就行。

内容的提问来源于stack exchange，提问作者Marcus Ruddick