javascript - Webpack - 合并拆分包

Question

我有一个很大的捆绑 JS 文件，其中包含可以在页面加载结束时运行的脚本。

换句话说 - 我想通过多个入口点减小第一个下载的 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 个请求。我不要那个

问题:

如果只有一个请求，如何将前两个 bundle 合并为一个 bundle ？换句话说，我想合并 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> 

Answer 1

您可以为 CommonsChunkPlugin 指定现有 block 的名称，它会将其添加到该 block 中，而不是创建新文件。因此，在您的情况下，它将获得名称 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