Windows环境下Angular构建后步骤：如何在ng build --watch后执行批处理文件

嘿，这个需求我碰到过好多次了，给你几个实用的实现方案，你可以根据自己的习惯选：

这个方法不需要改Angular的配置，靠npm脚本就能搞定，适合快速实现：

1. 先安装监听文件变化的工具onchange：

npm install onchange --save-dev

2. 打开项目根目录的package.json，修改scripts部分，添加一个新的命令：

"scripts": {
  "build:watch": "ng build --watch & onchange 'dist/**/*' -- call your-batch-file.bat"
}

这里的your-batch-file.bat要换成你实际的批处理文件路径，如果是在项目根目录下，直接写文件名就行；如果在子目录里，比如scripts/post-build.bat，就写完整路径。

3. 运行这个新脚本：

npm run build:watch

这样每次Angular构建完成、dist目录里的文件更新时，onchange就会自动触发你的批处理文件啦。

如果需要对构建结果做判断（比如只在构建成功时运行批处理），可以用Angular的自定义Webpack配置来添加构建完成的钩子：

1. 先安装必要的依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建webpack.config.js文件，内容如下：

const { exec } = require('child_process');

module.exports = {
  plugins: [
    {
      apply: (compiler) => {
        // 监听构建完成的钩子
        compiler.hooks.done.tap('RunBatchAfterBuild', (stats) => {
          // 先检查构建是否成功，避免失败时也跑批处理
          if (stats.hasErrors()) {
            console.log('⚠️ 构建失败，跳过批处理执行');
            return;
          }
          // 执行你的批处理文件
          exec('call your-batch-file.bat', (error, stdout, stderr) => {
            if (error) {
              console.error('❌ 批处理执行出错:', error.message);
              return;
            }
            if (stderr) {
              console.error('批处理输出错误:', stderr);
              return;
            }
            console.log('✅ 批处理执行完成:', stdout);
          });
        });
      }
    }
  ]
};

3. 修改angular.json里的构建配置，让Angular使用这个自定义Webpack文件：
   找到projects -> 你的项目名 -> architect -> build，把builder改成@angular-builders/custom-webpack:browser，然后在options里添加：

"customWebpackConfig": {
  "path": "./webpack.config.js"
}

如果你的watch模式是单独配置的，也要把architect -> build -> configurations -> development（或者watch对应的配置）里的builder也改一下，或者直接修改默认的build配置。

4. 正常运行ng build --watch就可以了，每次构建成功后，批处理文件会自动执行。

如果不想用npm包，也可以写一个批处理脚本来实现，不过这个方案的触发逻辑比较简单，可能会有重复执行的情况，仅供参考：

创建start-build-with-batch.bat，内容如下：

@echo off
echo 🚀 启动Angular构建监听...
start /B ng build --watch

echo ⏳ 等待构建输出更新...
set "lastTime="
:loop
:: 等待5秒再检测，避免频繁触发
timeout /t 5 /nobreak >nul

:: 获取dist目录下最新文件的修改时间
for /f "delims=" %%f in ('dir dist\*.* /b /s /o:d') do set "lastModified=%%~tf"

:: 如果修改时间和上次不一样，说明构建完成了
if not "%lastModified%"=="%lastTime%" (
  set "lastTime=%lastModified%"
  echo 🎉 检测到构建完成，执行批处理...
  call your-batch-file.bat
)

goto loop

双击运行这个批处理文件就行，不过要注意：如果dist目录在构建过程中多次修改，可能会触发多次批处理，所以不如前两个方案精准。

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