webpack 中使用多配置: 导出配置对象数组

原创

除除

发布于 2026-04-21 10:11:04

1050

文章被收录于专栏：除除的专栏除除的专栏

内容声明

本文仅用于技术分享和学习交流，内容不包含任何广告、推广、引流、付费课程或外链信息。所有示例和配置均为技术实践，欢迎参考和自定义。

通过导出配置对象数组，可在 webpack 中启用多编译器模式，实现多入口与多 bundle 的统一构建与监听。该方式简化流程、降低维护成本，并支持共享配置与按需执行 (config-name)，适用于复杂项目的高效管理与扩展。

前言

在包含多个入口点或差异化构建需求的 Web 项目中，例如分别构建 BUNDLE_A、BUNDLE_B 和 BUNDLE_C，常见问题是能否仅用一套 webpack 配置管理全部构建任务。

答案是可以。webpack 原生支持导出配置对象数组，这一特性称为"多编译器模式"。该能力可用于简化复杂构建流程，并降低日常维护成本。

从多文件配置到多配置模式

早期方案通常是使用多个 webpack 配置文件管理资源:

webpack.config.BUNDLE_A.js 用于 BUNDLE_A
webpack.config.BUNDLE_B.js 用于 BUNDLE_B
webpack.config.BUNDLE_C.js 用于 BUNDLE_C

在这种方式下，每个文件都对应独立的 build/watch 命令。实际执行时，往往需要同时运行 3 个终端会话 (或在 Docker Compose 中运行 3 个服务) 以监听源码变更。该方式能够工作，但项目规模扩大后，复杂度会明显上升。

关键调整

通过在 JavaScript 配置中导出数组，可将 3 份配置整合到同一文件:

// webpack.config.all.js
const BUNDLE_A = require('./webpack.config.BUNDLE_A');
const BUNDLE_B = require('./webpack.config.BUNDLE_B');
const BUNDLE_C = require('./webpack.config.BUNDLE_C');

module.exports = [
  BUNDLE_A,
  BUNDLE_B,
  BUNDLE_C,
];

完成整合后，可一次性构建并监听全部 3 个 bundle:

npx webpack --config ./scripts/webpack.config.all.js --watch

该方式避免了多终端切换和复杂脚本编排。通过一条命令，webpack 即可处理全部构建任务。

同时，目标化构建仍然可用:

npx webpack --config ./scripts/webpack.config.all.js --config-name BUNDLE_A

若配置中声明了 name: 'BUNDLE_A'，即可按名称单独触发对应构建。

价值与收益

效率: 全部配置在同一进程中运行。webpack 可并行监听并构建所有定义的入口与输出，相关文件变更后自动重建。
可维护性: 共享插件、公共设置与 loader 规则可集中定义并复用。
灵活性: 每份配置均可独立声明 entry、output、plugins 与 loaders。可实现完全隔离，也可实现部分共享。

工作机制说明

当配置文件导出配置对象数组时，webpack 将启用"多编译器模式":

module.exports = [
  { /* BUNDLE_A 的配置 */ },
  { /* BUNDLE_B 的配置 */ },
  { /* BUNDLE_C 的配置 */ }
];

在该模式下，webpack 会在同一进程中独立处理每一份配置。因此可同时具备以下能力:

不同入口点 (entry)
不同输出文件名或输出目录 (output)
按配置定制的插件集合

实施注意事项

输出冲突: 应确保各配置输出到不同文件名或不同目录，避免相互覆盖。
插件设置: 某些插件 (例如 HtmlWebpackPlugin) 在多配置场景下需要单独指定输出文件名，否则可能发生覆盖。
性能考量: 对大多数项目，多配置模式具备较高效率。对于超大型应用，拆分为多进程在部分场景下更合适；在常见工作流中，单进程多配置通常更具综合优势。

示例: 多个 HTML 与 JS bundle

以下为采用数组模式的 webpack.config.js 示例:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [
  {
    name: 'BUNDLE_A',
    entry: './src/BUNDLE_A.js',
    output: { filename: 'BUNDLE_A.bundle.js', path: path.resolve(__dirname, 'dist') },
    plugins: [
      new HtmlWebpackPlugin({ filename: 'BUNDLE_A.html', template: './src/BUNDLE_A.html' }),
    ],
  },
  {
    name: 'BUNDLE_B',
    entry: './src/BUNDLE_B.js',
    output: { filename: 'BUNDLE_B.bundle.js', path: path.resolve(__dirname, 'dist') },
    plugins: [
      new HtmlWebpackPlugin({ filename: 'BUNDLE_B.html', template: './src/BUNDLE_B.html' }),
    ],
  },
];