Webpack 5配置自定义入口仍加载默认入口报错排查

问题根源 #

你遇到的问题是因为配置文件导出了多个配置对象，其中至少有一个配置没有显式指定entry，触发了Webpack 5的默认入口规则（自动寻找./src/index.js），而这个文件不存在，所以报错；同时每个配置会生成对应输出文件，没指定entry的配置用默认输出名main.js，导致dist目录同时出现bundle.js和main.js。

解决步骤 #

1. 检查并修正配置导出结构 #

如果只需要单份构建配置，不要导出数组，直接导出单个配置对象：

const path = require('path');

module.exports = {
  // 明确指定自定义入口
  entry: './你的自定义入口文件路径',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 可选，Webpack 5新增，构建前清空dist目录
  },
  // 其他loader、plugin配置...
};

2. 若确实需要多配置，确保每个配置都显式声明entry和output #

如果你的业务场景需要同时构建多份代码，必须保证数组里的每个配置对象都有独立的entry和output：

const path = require('path');

module.exports = [
  {
    entry: './入口文件A.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
    // 对应A的其他配置
  },
  {
    entry: './入口文件B.js', // 必须显式指定，不能省略
    output: {
      filename: '其他输出文件名.js', // 避免和第一个配置的输出名冲突
      path: path.resolve(__dirname, 'dist')
    }
    // 对应B的其他配置
  }
];

3. 验证配置有效性 #

运行构建命令时，观察终端输出的entry字段，确认是你指定的路径，而非默认的./src/index.js：

webpack --config webpack.config.js

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