Webpack 4为何生成0.js、1.js等数字命名文件？升级困惑求解

嘿，我之前升级Webpack 4的时候也碰到过一模一样的问题，给你理清楚背后的原因和应对方式：

核心原因：Webpack 4默认的Chunk拆分与命名规则变化 #

Webpack 4移除了旧的CommonsChunkPlugin，取而代之的是**splitChunks**插件（默认启用），同时对异步模块的处理也更自动化。这些数字命名的chunk，本质是Webpack自动拆分出来的模块，因为没有指定自定义命名规则，所以用数字ID作为默认名称。

具体分为几种场景：

1. 异步加载的模块触发自动拆分 #

如果你的代码里使用了动态导入（import()语法）来异步加载模块，Webpack 4会自动将这些异步模块打包成独立的chunk，默认就会用数字序列（0、1、2...）来命名。比如你写了：

// 动态导入某个组件
import('./PaymentModal').then(module => {
  // 渲染组件
});

这段代码对应的模块就会被打包成0.js（如果是第一个异步chunk的话）。

2. SplitChunks自动拆分公共依赖 #

Webpack 4的splitChunks默认配置会自动识别并拆分多个入口或模块之间共享的依赖（比如node_modules里的第三方库）。如果没有给这些拆分出来的公共chunk指定名称，Webpack就会用数字来命名它们。

默认的splitChunks配置中，name属性是undefined，这就会触发数字命名的 fallback 逻辑。

3. 多入口场景下的公共代码拆分 #

如果你的Webpack配置里有多个入口点，且这些入口依赖了相同的模块，splitChunks会自动把公共部分抽离成单独的chunk，同样在未指定命名时使用数字标识。

如何自定义Chunk名称（解决数字命名问题） #

如果你想让chunk名称更有意义，可以通过两种方式配置：

方式1：给异步模块指定命名 #

在动态导入时添加webpackChunkName注释，Webpack会根据这个注释生成对应的chunk名称：

// 给异步模块指定名称为"payment-modal"
import(/* webpackChunkName: "payment-modal" */ './PaymentModal').then(module => {
  // ...
});

这样生成的chunk就会是payment-modal.js，而不是数字命名的文件。

方式2：配置SplitChunks的命名规则 #

在webpack.config.js的optimization.splitChunks中自定义命名逻辑，比如给公共依赖指定固定名称，或者根据模块信息动态生成名称：

示例1：给第三方依赖chunk指定固定名称

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules里的模块
          name: 'vendors', // 固定命名为vendors
          chunks: 'all'
        }
      }
    }
  }
};

这样拆分出来的第三方依赖chunk就会是vendors.js。

示例2：动态生成chunk名称

如果需要更灵活的命名，可以通过函数返回自定义名称：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: (module, chunks, cacheGroupKey) => {
        // 比如用缓存组名+入口名称组合命名
        const chunkNames = chunks.map(chunk => chunk.name).join('-');
        return `${cacheGroupKey}-${chunkNames}`;
      }
    }
  }
};

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