Angular自定义Webpack插件编译WASM触发循环重编译问题求解

你遇到的无限重构建问题和你的推测完全一致：WASM编译后写入assets目录的文件操作，被Angular/Webpack的文件监听机制捕获，被判定为业务代码变更触发新一轮构建，新一轮构建又会重新生成WASM文件写入，最终形成死循环。
另外你当前的代码还有一个隐性问题：beforeCompile钩子用了同步注册方式，但内部执行的exec是异步操作，Webpack不会等待WASM编译完成就继续后续打包流程，大概率会导致打包时引用旧版本WASM，甚至读取到写入一半的损坏文件。

方案1：配置监听忽略规则+修正异步编译逻辑 #

这是改动最小的方案，核心是把WASM产物的存放路径加入Webpack的监听忽略列表，让监听机制跳过该目录的文件变更事件，同时修正钩子的异步注册逻辑，保证WASM编译完成后再走Angular构建流程。

• 修改watchOptions.ignored配置，在原有忽略node_modules的基础上，新增WASM产物目录的忽略规则
• 将同步的tap注册改为异步的tapAsync，等待WASM编译执行完成后再调用回调通知Webpack继续构建
• 可选增加变更文件判断，只有当AssemblyScript源码发生变更时才执行WASM编译，减少不必要的编译耗时

修正后的自定义Webpack配置代码如下：

const { exec } = require("child_process");
const path = require("path");

// 替换为你项目中实际存放编译后WASM文件的绝对路径
const WASM_OUTPUT_DIR = path.resolve(__dirname, "src/assets/wasm");
// 替换为你项目中存放AssemblyScript源码的绝对路径
const ASM_SOURCE_DIR = path.resolve(__dirname, "src/assembly");

module.exports = {
  watchOptions: {
    ignored: [
      /node_modules/,
      WASM_OUTPUT_DIR
    ],
  },
  plugins: [
    {
      apply: (compiler) => {
        compiler.hooks.beforeCompile.tapAsync('WasmBuildPlugin', (params, callback) => {
          // 非首次构建时，判断本次变更是否包含AssemblyScript源码，没有则跳过WASM编译
          if (compiler.modifiedFiles) {
            const hasAsmChange = Array.from(compiler.modifiedFiles).some(filePath => {
              return filePath.startsWith(ASM_SOURCE_DIR) && filePath.endsWith('.ts');
            });
            if (!hasAsmChange) return callback();
          }

          exec('npm run asbuild', (err, stdout, stderr) => {
            if (stderr) console.error('WASM编译异常:', stderr);
            if (stdout) console.log('WASM编译完成:', stdout);
            callback(err);
          });
        });
      },
    }
  ]
};

方案2：将WASM产物移出Angular监听目录（最稳定） #

Angular默认只会监听src目录以及angular.json中配置的资源入口目录的变更，从根源上避免触发死循环的方式就是不要把编译生成的WASM文件放到src目录内：

1. 修改AssemblyScript编译配置，将产物直接输出到项目根目录下的独立文件夹，比如./wasm-dist，不要输出到src下的任何目录
2. 修改angular.json中项目构建配置的assets数组，添加目录映射规则，把根目录下的wasm-dist映射为构建产物中的assets/wasm路径，配置示例：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*.wasm",
    "input": "./wasm-dist",
    "output": "/assets/wasm"
  }
]

3. 开发模式下可以并行启动两个watch进程：一个是带--watch参数的asbuild进程，监听AssemblyScript源码变更自动编译到wasm-dist；另一个是正常的ng serve进程。由于wasm-dist不在Angular的默认监听范围内，WASM文件写入不会触发Angular重构建，dev server也能正常返回最新的WASM文件给前端。

方案3：增加防抖拦截（兜底方案） #

如果前两个方案因为自定义builder的封装问题无法生效，可以在自定义插件中增加时间戳拦截：记录上一次WASM编译完成的时间，每次触发beforeCompile时判断当前时间和上次编译完成的时间差，如果小于你项目WASM编译的最大耗时（比如设为2秒），就直接跳过本次WASM编译，避免短时间内重复触发。这个方案需要根据你自己的项目编译耗时调整阈值，不推荐优先使用。

内容的提问来源于stack exchange，提问作者Ricardo Machado