如何以编程方式运行Webpack Dev Server并等待打包完成？

你可以通过监听Webpack Compiler的钩子事件，实现等待首次打包完成后再启动Dev Server的逻辑，以下是具体实现：

1. 封装等待首次打包的Promise函数 #

先写一个函数，监听打包成功/失败的钩子，直到首次打包结束：

const waitForFirstCompile = (compiler) => {
  return new Promise((resolve, reject) => {
    // 处理打包完成的回调
    const doneHandler = (stats) => {
      if (stats.hasErrors()) {
        reject(new Error('首次打包失败'));
      } else {
        resolve(stats);
      }
      // 仅监听一次，完成后移除钩子
      compiler.hooks.done.tapOff('waitForFirstCompile', doneHandler);
      compiler.hooks.failed.tapOff('waitForFirstCompile', failedHandler);
    };

    // 处理打包失败的回调
    const failedHandler = (err) => {
      reject(err);
      // 移除钩子避免重复触发
      compiler.hooks.done.tapOff('waitForFirstCompile', doneHandler);
      compiler.hooks.failed.tapOff('waitForFirstCompile', failedHandler);
    };

    // 注册钩子
    compiler.hooks.done.tap('waitForFirstCompile', doneHandler);
    compiler.hooks.failed.tap('waitForFirstCompile', failedHandler);

    // 手动触发首次打包
    compiler.run();
  });
};

2. 修改启动逻辑 #

在创建Dev Server实例后，先等待打包完成，再调用listen：

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

const compiler = webpack(config);
const server = new WebpackDevServer(options, compiler);

// 插入上面的waitForFirstCompile函数

return {
  start: async () => {
    try {
      // 等待首次打包完成
      await waitForFirstCompile(compiler);
      // 打包成功后启动Dev Server
      return new Promise((resolve, reject) => {
        server.listen(port, 'localhost', (err) => {
          if (err) {
            reject(err);
            return;
          }
          resolve();
        });
      });
    } catch (err) {
      console.error('打包失败，无法启动Dev Server:', err);
      throw err;
    }
  }
};

关于tap钩子的原理 #

Webpack的插件系统基于Tapable库，Compiler、Compilation等核心对象都是Tapable实例，它们暴露不同阶段的钩子（hooks），允许你在构建流程中注入自定义逻辑：

• tap：注册同步钩子回调，适用于不需要异步操作的场景（比如监听打包完成后的同步处理）。
• tapAsync：注册异步回调，需要手动调用回调函数告知Webpack继续执行。
• tapPromise：注册返回Promise的异步回调，Webpack会等待Promise完成后再继续。
• tapOff：移除已注册的钩子回调，避免重复触发（比如上面只需要监听首次打包，完成后就移除钩子）。

每个钩子注册时的名称（比如waitForFirstCompile）用于标识你的回调，方便后续移除或调试。

补充：编程式运行的官方参考 #

Webpack官方文档有相关内容，只是分散在不同章节：

• 编程式使用Webpack：查看Compiler API章节，里面介绍了compiler.run()、compiler.watch()等核心方法。
• 编程式使用Webpack Dev Server：查看Webpack Dev Server API章节，里面包含WebpackDevServer类的构造与使用说明。

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