在webpack中，我只能在一个入口包中使用commonchunks插件

Question

我有一个包含2个包的应用程序，以及常见模块，例如react被提取到供应商包中。我添加了第三个包，我不想从中提取常见的依赖关系。这可能吗。

此问题与this one有关，但这是关于为每个入口点创建多个供应商捆绑包，而我希望其中一个捆绑包不需要供应商。在我的情况下，这是因为脚本是一个简单的站点验证脚本，正在设置在头部，所以将在vendor bundlde之前。但是我仍然希望能够使用这个head包中的模块。

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

const config = { 
    entry: { 
    vendor: [ 
     'jquery', 
     'react', 
     'react-dom' 
    ], 
    main: [ 
     './bundles/main/App', 
    ], 
    cms: [ 
     './bundles/cms/App' 
    ], 
    head: [ 
     './bundles/head/App' 
    ], 
    }, 
    output: { 
    filename: '[name]-bundle.js', 
    path: '../app/assets/webpack', 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor-bundle.js', 
     minChunks: Infinity, 
    }) 
    ], 
    module: { 
    loaders: [ 
     {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/}, 
    ], 
    }, 
}; 

module.exports = config; 

Answer 1

看起来代码分裂多个捆绑的类似问题确实有助于回答我的问题。特别是Michael Margiel的答案是有多个供应商捆绑包，并指定多个CommonsChunkPlugins，我认为这是最干净的方法。

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity), 
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity) 

然后针对不同的文件申报不同extenral库：

entry: { 
    page1: ['entry.js'], 
    page2: ['entry2.js'], 
    "vendor-page1": [ 
     'lodash' 
    ], 
    "vendor-page2": [ 
     'jquery', 
     'react' 
    ] 
}, 

这使我有包，没有任何供应商包括但

使用CommonsChunkPlugins多次有进入供应商特定块需要任何额外的步骤，但是如果我愿意的话，我可以为第三个捆绑包提供一个供应商。

我最终的配置是这样的：

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

const config = { 
    entry: { 
    head: ['./bundles/head/App'], 
    main: ['./bundles/main/App'], 
    cms: ['./bundles/cms/App'], 
    'vendor': [ 
     'babel-polyfill', 
     'jquery', 
     'react' 
    ], 
    'vendor-cms': [ 
     'jquery' 
    ] 
    }, 
    output: { 
    filename: '[name]-bundle.js', 
    path: '../app/assets/webpack', 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor-bundle.js', 
     chunks: ['main'], 
     minChunks: Infinity, 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor-cms', 
     filename: 'vendor-cms-bundle.js', 
     chunks: ['cms'], 
     minChunks: Infinity, 
    }), 
    new webpack.DefinePlugin({ 
     'process.env': { NODE_ENV: JSON.stringify(nodeEnv)}, 
    }), 
    ], 
    module: { 
    loaders: [ 
     {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/}, 
    ], 
    }, 
}; 

module.exports = config;