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

Question

我想从我的模块中创建vendor.bundle.js。 我配置了webpack：

...
  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-virtualized或lodash vendor.bundle.js，bundle.js中有相同的包，我希望只在这里。

Answer 1

您使用的是哪个版本的网络包？ 要执行您正在寻找的内容，您可以使用commonsChunkPluggin

配置在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);
    },
  }),
]

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