如何定義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配置中。