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个请求。我不想要那个

问题：

如何将前两个捆绑包合并为一个捆绑包，只有一个请求？换句话说，我想合并a.entry.js＆amp; 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提供现有块的名称，它会将其添加到该块而不是创建新文件。因此，在您的情况下，它将获得名称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

Answer 2

最近，我遇到了同样的问题，但是时间已经过去，为了支持SplitChunksPlugin，不赞成使用CommonsChunkPlugin。

目前，仅通过使用Webpack包含的功能无法实现预期的行为，所以我写了一个插件来解决此问题，很高兴与可能需要它的人分享！

您可以找到它HERE。

Webpack - 合并分割捆绑包

2 个答案: