Webpack 的 optimization.splitChunks 配置为什么没生效？

Newb.梓玥提问于 2026-03-14 18:28:21 阅读 50

前端

我项目里用了 Webpack 5，想把 node_modules 里的第三方库单独打包成 vendor.js，但配置了 splitChunks 后发现输出文件还是只有 main.js，没生成 vendor 文件。

我试过照着官网文档写，也加了 cacheGroups，但就是不拆包。是不是哪里写错了？

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendor',
        chunks: 'all',
      }
    }
  }
}

Webpack 打包优化

我来解答赞 8 收藏

反馈

1 条解答

一明艳 Lv1

问题很可能是你只有一个入口文件。Webpack 5 的 splitChunks 在单入口且没有动态 import() 的情况下，即使配置了也不会生成独立的 vendor chunk，所有代码还是堆在 main.js 里。

两种解决办法：

1. 强制分割，在 cacheGroups 里加个 force: true：

cacheGroups: {

  vendor: {

    test: /[/]node_modules[/]/,

    name: 'vendor',

    chunks: 'all',

    force: true,

  }

}

2. 或者用动态导入，让 Webpack 知道这里需要拆包：

// 改成这样引入

import('lodash').then(_ => { ... })

第一种最省事，改完重新 build 就能看到 vendor.js 了。

2026-03-16 19:19