如何定义webpack CommonsChunkPlugin的入口点？

Question

在我webpack配置我定义为这样的条目 -

entry: [ 
    'webpack-hot-middleware/client', 
    './src/app.jsx' 
    ], 

我已经意识到如何产生的面积约为8 MB我的包大小。

所以我决定分家厂商javascript文件到单独的块，即bundle.vendor.js

我知道，我必须使用使用CommonsChunkPlugin本和入门更改为类似这样

entry: { 
    app: './src/app.js', 
    vendors: './src/vendors.js' 
    } 

但无法弄清楚如何改变我现有的入口配置，目前设置为

entry: [ 
    'webpack-hot-middleware/client', 
    './src/app.jsx' 
    ], 

Answer 1

1.你需要告诉的WebPack你的入口点，在这种情况下，您可以定义厂商条目依赖的数组。就像这样：

entry: { 
    app: path.join(__dirname, 'path/to/app.jsx'), // prefer using absolute paths to avoid problems 
    vendors: ['jquery', 'lodash'] 
} 

2.你需要告诉的WebPack，您的条目应该优化： 注意，你传递的第二串在插件的配置“名称”。这是由Webpack生成的另一个文件的名称。它将负责告诉浏览器如何正确处理依赖关系，并将包含在应用程序和供应商脚本标记之前。

plugins : [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendors', 'manifest'] 
    }) 
] 

如果您需要，我有一个repo with a working example of this。 CommonsChunk部分位于prod配置中。