如何基于数组在Webpack 5中动态创建Entry配置？

给定数组：

const unitTests = [ { name: 'bootloader' }, { name: 'levenshtein' } ]

尝试通过以下代码从数组追加Entry配置：

entry: {
    main: ['./src/js/index.js'],

    ...unitTests.map((test) => {
      let newEntry ={};
      newEntry[`${test.name}`] = [`./src/unit-test/${test.name}/index.js`];
      return newEntry;
    }),
    
  },

但map()返回的是对象数组，展开后Entry结构变成了Webpack无法识别的格式：

{
  '0': { bootloader: [ './src/unit-test/bootloader/index.js' ] },
  '1': { levenshtein: [ './src/unit-test/levenshtein/index.js' ] },
  main: [ './src/js/index.js' ],
}

请问如何正确向Entry对象追加字段？

解决方法 #

问题核心是map()返回的是对象数组，直接展开数组会把数组索引作为键名，而非我们需要的测试入口名称。需要先把数组中的多个对象合并成单个对象，再展开到Entry中。

方法1：使用reduce合并对象 #

这是最直接的方式，通过reduce遍历数组，将每个测试入口的键值对合并到累加器对象中：

const unitTests = [ { name: 'bootloader' }, { name: 'levenshtein' } ];

module.exports = {
  // ...其他Webpack配置
  entry: {
    main: ['./src/js/index.js'],
    // 用reduce将数组转为单个对象后展开
    ...unitTests.reduce((acc, test) => {
      acc[test.name] = [`./src/unit-test/${test.name}/index.js`];
      return acc;
    }, {}),
  },
};

方法2：使用Object.assign合并对象 #

也可以用Object.assign接收map()返回的对象数组，将它们合并为一个对象：

const unitTests = [ { name: 'bootloader' }, { name: 'levenshtein' } ];

module.exports = {
  // ...其他Webpack配置
  entry: {
    main: ['./src/js/index.js'],
    // 用Object.assign合并map返回的对象数组
    ...Object.assign({}, ...unitTests.map(test => ({
      [test.name]: [`./src/unit-test/${test.name}/index.js`]
    }))),
  },
};

最终正确的Entry结构 #

两种方法都会生成Webpack可识别的结构：

{
  main: [ './src/js/index.js' ],
  bootloader: [ './src/unit-test/bootloader/index.js' ],
  levenshtein: [ './src/unit-test/levenshtein/index.js' ]
}

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