なぜwebpack commonChunkは私のバンドル間でパッケージを複製しますか？

Question

私のモジュールからvendor.bundle.jsを作成します。 私はWebPACKの構成された：私はvendor.bundle.jsで終了するentry.vendorに記載されているすべてのパッケージを見ることを期待

... 
    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 
    }), 
... 
    ] 
} 

を、そしてそれらのほとんどのためにそれは起こるが、私の中でそれらのいくつかは両方bundle.jsとvendor.bundle.jsファイルに表示します。

なぜですか？

bundle.js私はbundle.jsにあり、私はここでしかあることを期待し、同じパッケージがあり、tippy.jsまたはreact-virtualizedまたはlodash vendor.bundle.jsを見つけるために期待していませんでした。

Answer 1

どのウェブパックのバージョンを使用していますか？これは、すべてのノードモジュールでチャンクを作成し、取り出し

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

： あなたが設定はWebPACKの2にこのような何かのようになります。commonsChunkPluggin

使用することができ、あなたが探しているものを行うにはそのうちのいくつか（名前を付ける必要があります）を売り手に入れるには