拆分供應商庫與的WebPack

多個塊，我想我的供應商代碼分成兩個塊，一個包含所有角圖書館，另一種包含一切。拆分供應商庫與的WebPack

我的角度應用程序有一個單一的入口點，並且設置是這樣的：

entry: { 
    app: './path_to/app.js', 
    vendor: ['jquery', 'moment', 'numeral'], 
    'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs'] 
}

我然後使用CommonsChunkPlugin來配置其它兩個包：

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    chunks: ['app'], 
    warnings: false, 
    filename: 'vendor.bundle.js' 
}) 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor.angular', 
    chunks: ['app'], 
    warnings: false, 
    filename: 'vendor.angular.bundle.js' 
})

這會生成3個文件：

Version: webpack 1.13.1 
Time: 12719ms 
        Asset  Size Chunks    Chunk Names 
      app.bundle.js 19.2 kB  0 [emitted] app 
     vendor.bundle.js 484 kB  1 [emitted] vendor 
vendor.angular.bundle.js 652 kB  2 [emitted] vendor.angular 
    [0] multi vendor.angular 124 bytes {2} [built] 
    [0] multi vendor 88 bytes {1} [built] 
    + 124 hidden modules

app.bundle.js包含我的應用程序代碼。
vendor.bundle.js及其包含的所有第三方庫不包括角的東西
vendor.angular.bundle.js包含所有角度的東西我所有的第三方庫是已經vendor.bundle.js內。

反正有剛剛在vendor.angular.bundle.js捆綁角模塊，不自動包括其他第三方庫？

來源

2016-07-22 Nick

如果你調用塊'angular_stuff'，而不是發生'vendor.angular'？ ......這只是一種預感，但也許點符號會導致webpack包含供應商的東西。 – andzep

@andzep不起作用，試過了。尺寸無差異。 – Nick

另外，看文檔。 CommonsChunkPlugin有一個選項'minChunks：Infinity'，其目的是：'用更多的條目，這確保沒有其他模塊進入供應商塊......所以也許這是缺少的選擇。 – andzep

想通了這一點：

的CommonsChunkPlugin的插件數組中的問題的順序。

以獲得所需的「分塊」，這是我不得不做出的改變：

重新排序CommonsChunkPlugins使角塊是第一。
更新「供應商」下面配置使用「vendor.angular」的「塊」陣列英寸

更新CommonsChunkPlugins現在看起來像：

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor.angular', 
    chunks: ['app'], 
    warnings: false, 
    filename: 'vendor.angular.bundle.js' 
}) 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    chunks: ['vendor.angular'], 
    warnings: false, 
    filename: 'vendor.bundle.js' 
})

以上，現在產量：

Version: webpack 1.13.1 
Time: 7451ms 
        Asset  Size Chunks    Chunk Names 
      app.bundle.js 19.2 kB  0 [emitted] app 
     vendor.bundle.js 484 kB  1 [emitted] vendor 
vendor.angular.bundle.js 221 kB  2 [emitted] vendor.angular 
    [0] multi vendor.angular 124 bytes {2} [built] 
    [0] multi vendor 88 bytes {1} [built] 
    + 124 hidden modules

運行：

webpack --progress --display-modules --display-chunks -v

我能確認所有的角相關模塊現在位於vendor.angular.bundle.js和全部無角模塊的確是vendor.bundle.js

來源

2016-07-29 18:46:19 Nick

拆分供應商庫與的WebPack

回答

相關問題