本文介绍如何在 Webpack 5 中通过 JavaScript 数组动态生成多个 entry 入口，避免 map() 返回数组导致对象结构错误的问题，推荐使用 reduce() 构建扁平化的 entry 对象。
本文介绍如何在 webpack 5 中通过 javascript 数组动态生成多个 entry 入口，避免 `map()` 返回数组导致对象结构错误的问题，推荐使用 `reduce()` 构建扁平化的 entry 对象。
在 Webpack 5 中，entry 配置项需为一个纯对象（plain object），其键为 chunk 名称，值为对应的模块路径数组。当尝试用 map() 处理入口数组时，会返回一个对象数组（如 [{}, {}]），解构后被误当作带数字索引的属性（'0', '1'）注入，从而破坏 Webpack 所需的 entry 结构。
正确做法是使用 Array.prototype.reduce() 将入口数组归约（reduce）为单个对象，逐个将 { name } 映射为 entryKey: [entryPath] 形式：
const unitTests = [
{ name: 'bootloader' },
{ name: 'levenshtein' }
];
// ✅ 正确：reduce 构建扁平 entry 对象
const dynamicEntries = unitTests.reduce((acc, test) => {
acc[test.name] = [`./src/unit-test/${test.name}/index.js`];
return acc;
}, {});
module.exports = {
entry: {
main: ['./src/js/index.js'],
...dynamicEntries // → { main: [...], bootloader: [...], levenshtein: [...] }
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
// 其他配置（mode、module、plugins 等）
};⚠️ 注意事项：
- reduce() 的初始值必须为 {}（空对象），否则累加失败；
- test.name 应确保唯一且符合 Webpack 对 chunk name 的要求（建议仅含字母、数字、下划线、短横线）；
- 若需支持异步入口或高级配置（如 dependOn、runtime），可扩展 test 对象并映射到完整 entry 对象（如 { import: [...], dependOn: 'main' }）；
- 建议对路径做存在性校验（如 fs.existsSync()）或配合 glob 动态扫描目录，提升健壮性。
最终生成的 entry 结构清晰、符合 Webpack 规范，可直接触发多 bundle 构建，并支持独立 HTML 输出（搭配 HtmlWebpackPlugin 多实例）。
