Javascript 为什么webpack commonChunk会在我的包之间复制包？

我想从我的模块中创建一个

vendor.bundle.js

。 我已配置网页包：

...
  entry: {
    app: ['./src/index.js'],
    vendor: [
      'axios',
      'lodash',
      'recharts',
      'moment',
      ......
      'react-select',
      'react-tooltip',
      'react-toggle',
      'buffer',
      'jstz',
      'pikaday',
      'qrcode-js',
      'notie',
      'tippy.js',
      'react-dropzone',
      'react-dd-menu',
      'html-to-draftjs',
      'react-virtualized',
      'react-draft-wysiwyg',
      'js-search',
      'qr.js'
    ]
  },
  ...
  output: {
    path: '/Users/ben/pro/qbpanel2.0/qbpanel-2.0/qbpanel/app/assets/javascripts',
    publicPath: '/',
    filename: 'bundle.js'
  },
  ...
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerPort: 9998
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js',
      path: '/Users/ben/pro/qbpanel2.0/qbpanel-2.0/qbpanel/app/assets/javascripts',
      publicPath: '/',
      minChunks: Infinity
    }),
...
  ]
}

我希望看到

entry.vendor

中列出的所有包都以

vendor.bundle.js

结尾，对于大多数包来说，这都会发生，但在我看来，其中一些包同时出现在

bundle.js

和

vendor.bundle.js

文件中

为什么?

bundle.js

我没想到会找到

tippy.js

或

react虚拟化

或

lodash

vendor.bundle.js

，在

bundle.js

中有相同的包，我希望只在这里。

---

您使用的是哪个版本的网页包？ 要做你想做的事，你可以使用

在webpack 2中，配置可能类似于以下内容：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: ['node-modules'],
    minChunks(module) {
      const context = module.context;
      return context && context.indexOf('node_modules') >= 0;
    },
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor'],
    chunks: ['node-modules'],
    minChunks(module) {
      return module.context && /.*\/axios|losash|allTheModulesYouWant.*/.test(module.context);
    },
  }),
]

这将创建一个包含所有节点模块的块，并从中取出一些模块（您需要命名）以将其放入供应商