如何让Webpack按串行而非并行方式构建多配置导出项？

module.exports.parallelism 配置的是单个编译任务内部的模块并行处理数量，不作用于多配置的执行顺序，所以设置后不生效是正常情况。

方案1：使用Webpack原生多配置依赖声明（推荐，Webpack 4.30.0+支持） #

给每个配置添加唯一name字段，给依赖其他配置的项添加dependencies字段，声明它依赖的配置名，Webpack会自动按依赖顺序串行执行。

const { merge } = require('webpack-merge');
const bundleProcessor = require("./webpack.bundleProcessor.config.js")
const serviceWorkerConfig = require("./webpack.serviceWorker.config.js")

module.exports = (env, argv) => {
    return [
        merge(bundleProcessor,
            { 
                mode: "development",
                name: 'main-bundle' // 给第一个配置加唯一名称
            }
        ),
        merge(serviceWorkerConfig,
            { 
                mode: "development",
                name: 'sw-bundle',
                dependencies: ['main-bundle'] // 声明依赖第一个配置，必须等它执行完成再启动
            }
        ),
    ];
};

该方案不需要修改构建命令，watch模式下也会自动维持依赖顺序，主包重新编译后Service Worker配置会自动触发重编译。

方案2：手动调用Webpack API串行执行（兼容低版本Webpack） #

如果使用的Webpack版本不支持dependencies字段，可以不导出配置数组，而是导出函数手动按顺序触发两次编译：

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const bundleProcessor = require("./webpack.bundleProcessor.config.js")
const serviceWorkerConfig = require("./webpack.serviceWorker.config.js")

module.exports = async (env, argv) => {
    // 先执行第一个配置的编译
    await new Promise((resolve, reject) => {
        const mainConfig = merge(bundleProcessor, { mode: "development" });
        webpack(mainConfig, (err, stats) => {
            if (err || stats.hasErrors()) {
                reject(err || stats.toJson().errors);
                return;
            }
            console.log('主包编译完成');
            resolve();
        });
    });

    // 第一个编译成功后再执行第二个配置
    return merge(serviceWorkerConfig, { mode: "development" });
};

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