Webpack MultiCompiler 模式通过导出配置数组启用，为每个配置创建独立并行的 Compiler 实例，分别生成 ES/CJS/UMD 等多套产物，output.path 必须隔离，插件与 loader 各自作用于对应编译流程。
Webpack 的 MultiCompiler 模式允许你用一个配置文件同时运行多个独立的编译器实例，从而生成多套产物（比如分别输出 ES 模块、CommonJS、UMD 格式）。它不是靠数组形式的 module.exports 自动触发，而是需要显式使用 webpack 函数传入多个配置对象，再由 Webpack 内部启动多个 Compiler 并行构建。
核心用法：导出配置数组，而非单个对象
在 webpack.config.js 中，直接导出一个配置对象数组即可启用 MultiCompiler：
- 每个数组元素是一个完整、独立的 Webpack 配置对象（含
entry、output、module等） - 每个配置可指定不同
output.filename、output.libraryTarget、module.rules等，实现差异化打包 - Webpack 会为每个配置创建一个 Compiler 实例，并行执行构建
典型场景：输出 ES/CJS/UMD 三套格式
例如，构建一个通用库时，常需同时输出：
- ESM：供现代打包工具（Vite、Webpack 5+）直接 import
- CommonJS：供 Node.js require 使用
- UMD：供 CDN 直接 script 引入
对应配置示例：
const path = require('path');
// 共享基础配置（可复用）
const shared = {
entry: './src/index.js',
resolve: { extensions: ['.js', '.ts'] },
module: { rules: [{ test: /\.ts$/, use: 'ts-loader' }] }
};
module.exports = [
// ES Module 输出
{
...shared,
output: {
path: path.resolve(__dirname, 'dist/es'),
filename: 'index.js',
library: { type: 'module' },
// 必须设为 'module'，且 package.json 中需有 "type": "module"
},
experiments: { outputModule: true } // Webpack 5+ 启用 ESM 输出支持
},
// CommonJS 输出
{
...shared,
output: {
path: path.resolve(__dirname, 'dist/cjs'),
filename: 'index.js',
library: { type: 'commonjs2' }
}
},
// UMD 输出（兼容浏览器和 Node）
{
...shared,
output: {
path: path.resolve(__dirname, 'dist/umd'),
filename: 'index.js',
library: 'MyLib',
libraryTarget: 'umd',
globalObject: 'this'
}
}
];
关键细节与注意事项
MultiCompiler 不是“一套配置跑多次”，而是真正并行运行多个编译流程。因此要注意：
- output.path 必须互不重叠，否则文件会相互覆盖或报错
-
插件行为独立：每个配置中的插件（如
HtmlWebpackPlugin）只作用于该编译器，不会跨配置生效 - loader 和 plugin 可复用：只要不依赖共享状态（如缓存、写文件路径），同一 loader 实例可出现在多个配置中
- watch 模式下全部监听：修改任意源文件，所有编译器都会重新构建
-
错误隔离：某一个配置构建失败，不影响其他配置继续执行（除非配置了
stats.all等全局控制）
配合 package.json 脚本使用
无需额外安装插件，直接运行 webpack 命令即可识别数组导出：
// package.json
{
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development --watch"
}
}
构建后，dist/es/、dist/cjs/、dist/umd/ 下将各自生成对应格式的产物，结构清晰、职责分明。
