如何用单命令启动Webpack与Nodemon并让后者等待打包完成？

这个场景我太熟悉了——Webpack在监听模式下会一直保持运行状态不退出，而Nodemon启动速度快，经常会在dist/server.js还没生成的时候就尝试启动，直接报错崩溃。下面给你几个实用的解决方案，按易用性排序：

方法1：用wait-on配合并行脚本（最推荐） #

wait-on是专门用来等待文件、端口或资源就绪的工具，完美适配这个场景。

1. 首先安装依赖：

npm install wait-on npm-run-all --save-dev

（npm-run-all用来并行/串行执行多个npm脚本）

2. 修改package.json里的脚本：

"scripts": {
  "webpack:watch": "webpack --watch",
  "nodemon:start": "wait-on dist/server.js && nodemon dist/server.js",
  "dev": "npm-run-all -p webpack:watch nodemon:start"
}

• -p参数表示并行启动两个脚本：webpack:watch会立刻开始监听打包，nodemon:start里的wait-on会一直等到dist/server.js生成后，才启动Nodemon。
• 后续Webpack重新打包时，Nodemon会自动检测到文件变化并重启，完全不冲突。

方法2：用Webpack插件触发Nodemon启动 #

可以借助Webpack的插件，在第一次打包完成后再启动Nodemon，不需要额外的并行脚本工具。

1. 安装webpack-shell-plugin-next插件：

npm install webpack-shell-plugin-next --save-dev

2. 在webpack.config.ts中配置插件：

import WebpackShellPluginNext from 'webpack-shell-plugin-next';

export default {
  // 你的Webpack配置入口、输出、loader等...
  plugins: [
    new WebpackShellPluginNext({
      // 第一次构建完成后执行的脚本
      onBuildEnd: {
        scripts: ['nodemon dist/server.js'],
        blocking: false, // 不阻塞Webpack的监听进程
        parallel: true // 并行启动Nodemon
      }
    })
  ]
};

3. 然后修改npm脚本：

"scripts": {
  "dev": "webpack --watch"
}

这样启动npm run dev后，Webpack会先完成第一次打包，之后自动启动Nodemon，后续打包更新时Nodemon也会正常重启。

方法3：自定义Node脚本（最灵活） #

如果需要更精细的控制（比如根据Webpack的特定日志判断打包完成），可以写一个简单的Node脚本串联两个进程：

1. 在项目根目录创建dev-start.js：

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

// 启动Webpack监听进程
const webpackProcess = spawn('npx', ['webpack', '--watch'], { stdio: ['inherit', 'pipe', 'inherit'] });

// 监听Webpack的输出日志
webpackProcess.stdout.on('data', (chunk) => {
  const log = chunk.toString();
  process.stdout.write(log); // 把Webpack的日志输出到控制台

  // 检测是否完成第一次打包（根据你的Webpack日志调整关键词，比如"compiled successfully"）
  if (log.includes('compiled successfully')) {
    console.log('\n✅ Webpack第一次打包完成，启动Nodemon...');
    // 启动Nodemon，继承控制台输入输出
    const nodemonProcess = spawn('npx', ['nodemon', 'dist/server.js'], { stdio: 'inherit' });

    // 监听Nodemon退出事件
    nodemonProcess.on('exit', (code) => {
      console.log(`Nodemon退出，退出码：${code}`);
      webpackProcess.kill(); // 同时终止Webpack进程
      process.exit(code);
    });

    // 只监听一次打包完成事件，避免后续重新打包重复启动Nodemon
    webpackProcess.stdout.removeAllListeners('data');
  }
});

// 监听Webpack错误输出
webpackProcess.on('error', (err) => {
  console.error('Webpack启动失败：', err);
  process.exit(1);
});

2. 修改npm脚本：

"scripts": {
  "dev": "node dev-start.js"
}

这个方法可以根据你Webpack的实际输出日志自定义判断逻辑，适合有特殊需求的场景。

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