Webpack配置多入口报错：TypeError: entryPoints.push is not a function

首先得说清楚你为啥会碰到这个错误：你用reduce生成的entryPoints是个普通对象（键是TS文件名，值是文件路径），但push是数组才有的方法，对象根本没有这个方法，所以才会抛出TypeError。

接下来直接给你可行的优化方案，Webpack的entry配置本身就支持对象格式，咱们直接把需要的SCSS入口合并到这个对象里就行，完全不需要用push。

优化后的完整代码示例 #

const glob = require('glob');
const path = require('path');

// 先收集所有Scripts目录下的TS文件作为入口
const entryPoints = glob.sync('./Scripts/**.ts').reduce((obj, el) => {
  obj[path.parse(el).name] = el;
  return obj;
}, {});

// 手动添加你需要的SCSS入口（只加指定的那几个，不用全量引入）
entryPoints['a-style'] = path.join(__dirname, 'Content/a.scss');
entryPoints['b-style'] = path.join(__dirname, 'Content/b.scss');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: entryPoints,
  // 别忘了配置对应的loader来处理TS和SCSS
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 将编译后的CSS注入到页面的style标签中
          'css-loader',   // 解析CSS中的import和url等语法
          'sass-loader'   // 把SCSS编译成CSS
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
  // 其他Webpack配置...
};

为啥这个方案能行？ #

• Webpack的entry对象里每个属性都是独立的入口，TS和SCSS入口可以共存，只要你配置了对应的loader，Webpack会分别处理它们，生成对应的输出文件。
• 既然你只需要部分SCSS文件，手动添加比用glob全量匹配更精准，能避免打包不必要的文件，减少构建体积。

额外小技巧 #

如果之后你需要批量添加某几个SCSS文件（但不是全部），也可以用glob的匹配语法来精准筛选，比如只匹配a.scss和b.scss：

// 批量收集指定的SCSS文件
const scssEntries = glob.sync('./Content/{a,b}.scss').reduce((obj, el) => {
  obj[`${path.parse(el).name}-style`] = el;
  return obj;
}, {});

// 合并TS和SCSS入口到同一个对象
Object.assign(entryPoints, scssEntries);

这样既省事又不会引入多余的文件，灵活性更高。

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