Webpack打包工具：如何注入多源文件？为何仅首个文件被打包？

问题原因 #

你当前的entry数组配置中，Webpack会将数组内的文件视为入口，但如果其他文件未被入口文件引用、文件内无顶层可执行代码，或是文件路径配置错误，都会导致Webpack忽略这些文件。

解决方案 #

方案1：在入口文件中显式引入其他文件 #

如果希望chat.js和ui.js的代码与index.js合并到同一个bundle里，直接在index.js顶部引入这两个文件即可：

// index.js
import './chat.js';
import './ui.js';

// 你的index.js原有代码

Webpack会自动将这两个文件的代码打包进bundle.js。

方案2：检查文件路径是否正确 #

确认chat.js和ui.js的实际位置与配置中的路径一致，比如它们是否和webpack.config.js在同一个目录下。如果文件在子目录（比如src），需要修正entry路径：

entry: ['./src/index.js','./src/chat.js', './src/ui.js'],

方案3：使用多入口对象（便于后续扩展） #

如果需要更灵活地控制入口配置，或是确保所有入口都被打包，可以将entry改为对象形式：

const path = require('path')

module.exports = {
  mode: 'development',
  entry: {
    main: ['./index.js','./chat.js', './ui.js']
  },
  output: {
    path: path.resolve(__dirname, ''),
    filename: 'bundle.js'
  },
  watch: true
}

这种方式和数组形式效果一致，但更便于后续拆分多个bundle或配置不同入口的输出规则。

验证方法 #

修改配置后重新运行Webpack，打开生成的bundle.js，搜索chat.js或ui.js中的特征代码（比如特定函数、console语句），确认是否被包含。

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