Webpack多配置构建顺序控制及构建完成后执行shell命令问询

当然可以搞定这个需求！针对你要让electron-main构建等待web产物完成，或者所有Webpack构建结束后自动启动electron-builder的场景，这里有几个实用的方案：

方案1：用npm脚本串行串联构建命令 #

这是最直接省心的方式，利用npm脚本的命令串行特性，强制按顺序执行构建步骤，最后触发electron-builder。

假设你可以通过命令行参数区分两个Webpack配置（或者拆分到不同配置文件），在package.json里这么写：

{
  "scripts": {
    "build:web": "webpack --config webpack.config.js --env target=web",
    "build:electron-main": "webpack --config webpack.config.js --env target=electron-main",
    "build:all": "npm run build:web && npm run build:electron-main && electron-builder"
  }
}

执行npm run build:all时，会严格按照web构建 → electron-main构建 → electron-builder打包的顺序走，前一步失败的话后面的步骤会自动终止，避免无效操作。

如果你的Webpack配置是一个多对象数组（比如module.exports = [webConfig, electronMainConfig]），默认Webpack会并行构建这两个配置。这种情况下，建议把两个配置拆成独立文件（比如webpack.web.js和webpack.electron-main.js），再用上面的脚本方式串联。

方案2：在Webpack中用钩子实现串行构建 #

要是不想拆分配置文件，也可以通过Webpack的API手动控制构建顺序，甚至在所有构建完成后直接调用electron-builder。

写一个单独的构建入口文件（比如build.js），逻辑如下：

const webpack = require('webpack');
const { execSync } = require('child_process');

// 你的web配置
const webConfig = {
  target: 'web',
  // 其他web相关配置...
};

// 你的electron-main配置
const electronMainConfig = {
  target: 'electron-main',
  // 其他electron-main相关配置...
};

// 先启动web构建
webpack(webConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error('Web构建失败:', err || stats.toString('errors-only'));
    process.exit(1);
  }
  console.log('✅ Web产物构建完成');

  // web构建成功后，启动electron-main构建
  webpack(electronMainConfig, (err, stats) => {
    if (err || stats.hasErrors()) {
      console.error('Electron Main构建失败:', err || stats.toString('errors-only'));
      process.exit(1);
    }
    console.log('✅ Electron Main产物构建完成');

    // 所有构建完成，触发electron-builder
    try {
      console.log('🚀 开始打包Electron应用...');
      execSync('electron-builder', { stdio: 'inherit' });
    } catch (e) {
      console.error('electron-builder执行失败:', e.message);
      process.exit(1);
    }
  });
});

然后在package.json里加个脚本：

{
  "scripts": {
    "build:all": "node build.js"
  }
}

执行npm run build:all就会按顺序完成所有步骤，全程自动化。

方案3：利用electron-builder的预打包钩子 #

electron-builder本身支持在打包前执行自定义命令，你可以直接在package.json的build字段里配置prepack钩子，让它先完成所有Webpack构建：

{
  "scripts": {
    "build:webpack": "npm run build:web && npm run build:electron-main"
  },
  "build": {
    "prepack": "npm run build:webpack",
    // 你的其他electron-builder配置（比如平台、输出目录等）
  }
}

这样只要你执行electron-builder，它会自动先跑prepack指定的build:webpack命令，等所有Webpack产物都 ready 了再开始打包可执行文件。

小提醒 #

记得在你的Electron主进程代码里，正确指向web构建后的产物路径哦，比如用mainWindow.loadFile('./dist-web/index.html')（路径根据你的实际打包输出目录调整）。

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