Webpack多配置文件存在依赖关系的编译顺序问题咨询

好问题！直接把两个配置放进数组里传给webpack([clientConfig, serverConfig])确实不能保证严格的执行顺序——Webpack默认会并行处理多配置，哪怕你把clientConfig放在首位，它也可能和serverConfig同时编译，甚至server先完成，这就会导致server编译时找不到client生成的产物。

下面是两种可靠的实现方案，能确保client编译完成后再启动server的编译：

方案1：使用回调链式调用 #

最直接的方式是先单独编译client，在它的回调里再启动server的编译：

const webpack = require('webpack');
const clientConfig = require('./webpack.client.config');
const serverConfig = require('./webpack.server.config');

// 先执行client编译
webpack(clientConfig).run((err, clientStats) => {
  if (err || clientStats.hasErrors()) {
    console.error('Client编译失败:', err || clientStats.toString({ colors: true }));
    process.exit(1);
  }
  console.log('✅ Client编译完成');

  // Client成功后，再执行server编译
  webpack(serverConfig).run((serverErr, serverStats) => {
    if (serverErr || serverStats.hasErrors()) {
      console.error('Server编译失败:', serverErr || serverStats.toString({ colors: true }));
      process.exit(1);
    }
    console.log('✅ Server编译完成');
  });
});

方案2：用Promise + async/await优化代码 #

如果觉得嵌套回调不够优雅，可以用Promise封装编译逻辑，再通过async/await实现顺序执行：

const webpack = require('webpack');
const clientConfig = require('./webpack.client.config');
const serverConfig = require('./webpack.server.config');

// 封装Webpack编译为Promise
const compileConfig = (config) => {
  return new Promise((resolve, reject) => {
    webpack(config).run((err, stats) => {
      if (err || stats.hasErrors()) {
        reject(err || stats.toString({ colors: true }));
      } else {
        resolve(stats);
      }
    });
  });
};

// 按顺序执行编译
async function runBuild() {
  try {
    console.log('🔧 开始编译Client...');
    await compileConfig(clientConfig);
    console.log('✅ Client编译完成');

    console.log('🔧 开始编译Server...');
    await compileConfig(serverConfig);
    console.log('🎉 所有编译任务完成！');
  } catch (error) {
    console.error('❌ 编译失败:', error);
    process.exit(1);
  }
}

runBuild();

为什么数组方式不可靠？ #

Webpack设计多配置数组的初衷是并行编译，以此提升整体构建速度，它不会等待前一个配置编译完成才启动下一个。所以当存在依赖关系时，必须手动控制执行顺序，而不能依赖数组的顺序。

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