Webpack 4如何为拆分代码块设置静态名称？避免含入口名

我来帮你搞定这个Webpack 4.1.0的代码拆分命名问题！你遇到的核心矛盾是Webpack 4的splitChunks默认命名规则和Webpack 3不同，会自动把入口名称拼接在拆分出的chunk名称后面，下面给你具体的分析和解决方案：

问题原因拆解 #

你当前的两个配置之所以会带上入口名app，是因为Webpack 4的默认行为：

• 当你在顶层设置splitChunks.name时，这个值会作为所有cacheGroups chunk的默认命名模板；
• 无论你是在cacheGroups里指定name还是用顶层的默认值，Webpack都会自动把入口chunk的名称拼接在最终的bundle名称后面，这就是vendor.app.bundle.js和wtf.app.bundle.js出现的原因。

正确配置方案 #

要生成纯净的vendors.bundle.js，你需要调整splitChunks的cacheGroups配置，明确指定命名规则并关闭自动拼接入口名的行为：

splitChunks: {
  // 移除顶层的name配置，避免干扰cacheGroups的独立命名
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/, // 精准匹配第三方依赖（node_modules下的代码）
      name: 'vendors', // 直接指定拆分后的chunk名称
      chunks: 'all', // 拆分所有类型的chunk（同步/异步加载的第三方依赖都包含）
      enforce: true, // 强制生成该chunk，忽略Webpack默认的大小、数量限制
      filename: 'vendors.bundle.js' // 直接锁定输出文件名，彻底避免命名意外
    }
  }
}

关键配置说明 #

• test: /[\\/]node_modules[\\/]/：确保只拆分第三方依赖代码，这是分离vendor包的常规做法；
• name: 'vendors'：明确指定chunk名称，关闭Webpack自动拼接入口名的逻辑；
• filename: 'vendors.bundle.js'：直接定义输出文件的完整名称，从根源上杜绝命名偏差；
• enforce: true：强制Webpack生成这个chunk，即使它不符合默认的大小（比如小于30kb）或数量限制。

验证效果 #

用这个配置打包后，第三方依赖会被单独打包到vendors.bundle.js，你的入口代码app.ts会生成app.bundle.js，完全不会出现入口名拼接在vendor文件名里的情况。

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