Webpack - 合併拆分包

我有一個大的捆綁JS文件，其中包含可以在頁面加載結束時運行的腳本。Webpack - 合併拆分包

換句話說 - 我希望通過多個入口點

所以我創建了兩個入口點，以減少一次下載JS文件的大小：

module.exports = { 
    entry: { 
     a: "./scripts/entry.js", 
     b: "./scripts/windowEvents.js" 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin("common.js") 
    ], 


    output: { 
     path: path.join(__dirname, '/scripts/bundle'), 
     filename: "[name].entry.js" 
    }, 

    module: { 
     loaders: [ 
     ] 
    } 
};

所以現在我有：

a.entry.js
b.entry.js
common.js .entry.js

而我的HTML文件看起來像：

<script src="/scripts/bundle/common.js.entry.js"></script> 
<script src="/scripts/bundle/a.entry.js"></script> 

//Html renders fast 

//bottom page script 
<script src="/scripts/bundle/b.entry.js"></script>

但這裏的問題是：

前兩個腳本部分，使2個服務器的請求。我不希望

問：

我如何能在第一兩束合併成一個包會出現只有一個要求嗎？換句話說，我想合併a.entry.js & common.js。

類似的東西：

<script src="/scripts/bundle/Common_AND_Entry_a.js"></script> 

//Html renders fast 

//bottom page script 
<script src="/scripts/bundle/b.entry.js"></script>

來源

2017-03-22 Royi Namir

你可以給現有的塊的CommonsChunkPlugin的名稱，它將其添加到而不是創建一個新的文件。所以你的情況會得到名字a（如Explicit vendor chunk所示）：

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "a" 
    }) 
],

如果你想改變輸出文件名，以及，你可以做到這一點的filename選項，接受相同的佔位符output.filename。下面產生common_and_a.js和b.entry.js：

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "a", 
     filename: "common_and_[name].js" 

    }) 
],

對於所有可用的選項看CommonsChunkPlugin - Options

來源

2017-03-22 10:58:17

Webpack - 合併拆分包

回答

相關問題