如何让Webpack 3.x自动输出两个指定来源的Bundle？

当然可以做到！在Webpack 3.x中，我们可以利用内置的CommonsChunkPlugin来自动完成这种拆分，彻底摆脱手动指定第三方包的麻烦——它能自动识别/src代码里实际引入的node_modules依赖，精准拆分出两个bundle：

• app.js：仅包含/src目录下的所有项目代码
• vendors.js：仅包含/src中实际引入的node_modules内的第三方依赖

具体Webpack配置示例 #

以下是完整的配置代码，你可以直接适配到自己的项目中：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 项目入口：指向你的src主入口文件
  entry: {
    app: './src/index.js',
  },
  // 输出配置：指定打包后的文件位置和命名规则
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    // 核心：自动抽离第三方依赖到vendors bundle
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors', // 抽离后的依赖包名称
      minChunks: function (module) {
        // 自定义判断逻辑：只要模块来自node_modules目录，就抽离到vendors
        return module.context && module.context.includes('node_modules');
      },
    }),
    // 可选但推荐：抽离Webpack运行时manifest，优化缓存
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendors'],
    }),
  ],
};

配置解释 #

1. minChunks函数的作用
   这个函数是实现自动拆分的核心：它会遍历所有被打包的模块，检查模块的上下文路径（即模块所在的目录）是否包含node_modules。如果是，就把这个模块归类到vendors bundle中——不管你在src里引入了多少个第三方包，都会被自动识别并抽离，完全不用手动列举。

2. 抽离manifest的意义
   第二个CommonsChunkPlugin会把Webpack自身的运行时代码抽离到manifest.js中。这样当你的项目代码更新但第三方依赖没有变化时，vendors.js的哈希值不会改变，浏览器可以直接缓存这个文件，提升加载速度。

验证拆分效果 #

执行打包命令后，你会在dist目录下看到：

• app.js：打开文件可以看到只有你自己写的src代码
• vendors.js：里面全是你在src中引入的第三方库代码
• manifest.js（可选）：Webpack的运行时逻辑

注意事项 #

• 确保你的Webpack版本是3.x，CommonsChunkPlugin是Webpack 3的内置插件，无需额外安装
• 如果你的项目是多入口应用，这个配置同样有效，它会自动抽离所有入口共同依赖的第三方包
• 之前手动指定包的方式可以完全替换为这个自动方案，后续引入新的第三方包时，无需修改Webpack配置

内容的提问来源于stack exchange，提问作者rodrigo-silveira