Webpack生成多个bundle.js文件，为何无法获取单一输出文件？

这个问题其实挺常见的，Webpack生成多个.bundle.js文件（比如你提到的0、1、2.bundle.js），大概率是**代码分割（Code Splitting）**在起作用——这是Webpack默认或你主动配置的一种优化机制，我来拆解下常见原因和对应的解决办法：

1. 主动使用了动态import()语法 #

如果你在代码里用了动态导入（比如import('./some-module.js')），Webpack会自动把这些被动态导入的模块拆分成单独的chunk文件。这种写法通常是为了实现懒加载、优化首屏加载速度，但如果你不需要这个功能，把动态导入改成静态的import someModule from './some-module.js'就可以避免生成额外bundle。

2. Webpack默认的SplitChunksPlugin配置 #

Webpack从4.x版本开始，默认启用了SplitChunksPlugin，它会自动拆分以下类型的代码：

• 被多个入口共享的公共代码
• 体积较大的第三方依赖（比如React、Vue这类库）
• 超过特定体积阈值的代码块

如果想关闭这个默认拆分，可以在webpack.config.js里修改optimization配置：

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: false, // 完全关闭代码分割
    runtimeChunk: false // 同时关闭单独提取runtime代码的功能（如果有的话）
  }
};

3. 配置了多入口文件 #

如果你在webpack.config.js里设置了多个入口点，比如：

module.exports = {
  entry: {
    main: './index.js',
    admin: './admin.js'
  }
};

Webpack会为每个入口生成对应的bundle文件。这种情况下，只要把入口改成单一文件即可：

module.exports = {
  entry: './index.js'
};

4. 第三方插件/Loader触发的代码分割 #

有些第三方插件或loader也会自动触发代码分割，比如某些UI组件库的loader、或者用于处理国际化的插件。你可以检查下webpack.config.js里的plugins和module.rules配置，看看有没有这类会自动拆分chunk的工具，调整它们的配置来禁用拆分功能。

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