Javascript webpack 4-多条目分割块插件

与以下配置一起使用：

{
    entry: {
        entry1: [entry1.js],
        entry2: [entry2.js],
        entry3: [entry3.js],
        ...
    }
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    } 
}

代码将完全分为以下几个部分：

vendors-entry1-entry2-entry3.js // common for all
vendors-entry1-entry3.js // vendors only required by both entry1, entry3
entry1-entry2.js // common code of entry1 and entry2
entry1.js // unique entry's code
entry2.js
entry3.js

问题是，我现在如何在我的html（或我的特定案例中的ejs）中使用每个条目的特定供应商

按照建议使用，只需创建一个index.html，加载上述所有内容，尽管用例显然是：

呈现入口1时，页面-加载：

vendors-entry1-entry2-entry3.js
vendors-entry1-entry3.js
entry1-entry2.js
entry1.js

vendors-entry1-entry2-entry3.js
entry1-entry2.js
entry2.js

呈现入口2时，页面-加载：

vendors-entry1-entry2-entry3.js
vendors-entry1-entry3.js
entry1-entry2.js
entry1.js

vendors-entry1-entry2-entry3.js
entry1-entry2.js
entry2.js

---

等等

我遇到了类似的问题，使用我找到的配置设置取得了一些小的成功。不确定它是否适用于您的特定用例，但我想我会与您分享

webpack配置中的优化哈希如下所示：

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2,
                    minSize: 0
                }
            }
        },
        occurrenceOrder: true
    },

因此，使用这些入口点：

    entry: {
        app: './src/app.js',
        home: './src/home.js',
        product: './src/product.js'
    }

这是我的HtmlWebpackPlugin设置：

    // base template common to all pages
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/base.html.j2',
        filename: `${templates}/base.html.j2`,
        chunks: ['commons', 'app']
    }),

    // JUST the homepage
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/index.html.j2',
        filename: `${templates}/index.html.j2`,
        chunks: ['home']
    }),

    // JUST the product template
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/product.html.j2',
        filename: `${templates}/product.html.j2`,
        chunks: ['product']
    }),

我正在成功地将“commons”和“app”区块添加到所有页面，在主页上添加“home”区块（仅限），在产品页面上添加“product”区块（仅限）。以下是“主页”来源的示例：

...

我不知道是否/如何使用此设置拆分供应商模块。我认为这是可能的，但如果是这样的话，一个由网页精英组成的秘密阴谋集团正在妥善保管这些信息：P

---

但考虑到它已经将代码分成了几个非常小的块，我不确定是否有必要（无论如何，对我来说）。

HtmlWebpackPlugin的第4版（目前为alpha）自动包含所有条目生成的块。所以只需设置

块：“entry1”

就可以了：

new HtmlWebpackPlugin({
    template: 'entry1.ejs',
    filename: 'entry1.html',
    chunks: ['entry1']
}),

。。。并导致在html文件中注入所有依赖块：

<script src="/vendors-entry1-entry2-entry3.js">
<script src="/vendors-entry1-entry3.js">
<script src="/entry1-entry2.js">
<script src="/entry1.js">

---

@Raviteja

CommonChunkPlugin

已在第4网页中删除

SplitChunksPlugin

是它的继任者。请解释否决票，我想知道我是否遗漏了一件非常基本的事情。我有同样的问题，我不理解否决票。丹尼尔或@a.Matías Quezada我很好奇你是否找到了解决方案。对于具有多个入口点的SplitChunk，很难获得类似的问题和信息。@EgorNepomnyaschih-并不总是针对多个入口，您希望将捆绑包拆分为多个块，以防无论入口数多少都过大。对于单个条目来说，插件工作得非常好。谢谢，我最终得到了一个非常类似的解决方案，不幸的是，它不是一个真正的解决方案，因为它不能扩展到N个条目，也不能充分利用分割块插件的可伸缩性，您可以创建一个函数，该函数将为每个条目创建

HtmlWebpackPlugin

，然后使用.concat（entryHtmlPlugins）将它们添加到

插件

数组中。我使用的是webpack 4.29.5，它不完全是这样工作的。仍然需要像这样指定要加载的块：

块：['vendors-entry1-entry2-entry3'，'vendors-entry1-entry3'，'entry1-entry2'，'entry1']

。否则（如答案中所示），它将只加载entry1.js文件。刚刚发现它仍然计划在@next发行版中使用！这不管用。它只注入一个文件，即条目文件，但不注入任何块。