webpack 4 - 分割多个条目的块插件

Question

Using split chunks plugin with the following config : 使用具有以下配置的split chunks插件：

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

The code would get perfectly split into: 代码将完美地分为：

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

Question is, how do i now use the specific vendors per entry in my html (or ejs in my specific case) ? 问题是， 我现在如何在我的html中使用每个条目的特定供应商（或者在我的特定情况下使用ejs） ？

Using HtmlWebpackPlugin as recommended would simply create an index.html which loads all of the above, although the use case is clearly: 使用HtmlWebpackPlugin建议只需创建一个index.html来加载上述所有内容，尽管用例很明显：

When rendering entry1 page - load: 渲染entry1页面时 - 加载：

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

When rendering entry2 page - load: 渲染entry2页面时 - 加载：

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

etc.. 等等..

Answer 1

Version 4 of HtmlWebpackPlugin (which is alpha as of now) includes all entry's generated chunks automatically. HtmlWebpackPlugin的第4版（现在是alpha）包括所有条目自动生成的块。 So just setting chunks: 'entry1' should work: 所以只需设置chunks: 'entry1'应该工作：

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

... and leads to injecting of all dependent chunks in html file: ...并导致在html文件中注入所有依赖的块：

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

You can install it with 你可以安装它

npm install --save-dev html-webpack-plugin@next

Answer 2

I am having a similar problem and have had some minor success using a config setup I found here . 我遇到了类似的问题，使用我在这里找到的配置设置取得了一些小小的成功。 Not sure if it will apply to your specific use case, but I thought I'd share. 不确定它是否适用于您的特定用例，但我想我会分享。

The optimization hash in webpack config looks like: webpack配置中的优化哈希看起来像：

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

So using these entrypoints: 所以使用这些入口点：

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

And this as my HtmlWebpackPlugin setup: 这是我的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']
    }),

I am successfully getting the "commons" and "app" chunks added to all pages, and on the homepage the "home" chunk (only) is added, and on the product page the "product" chunk (only) is added. 我成功地将“commons”和“app”块添加到所有页面，并在主页上添加“home”块（仅），并在产品页面上添加“product”块（仅）。 Here's an example of the source of the "home" page: 以下是“主页”源代码的示例：

    <body>
        ...
        <script type="text/javascript" src="/static/commons.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/app.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/home.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
    </body>

I don't know if/how vendor modules can be split out using this setup. 我不知道是否/如何使用此设置拆分供应商模块。 I assume it's possible, but if so a secret cabal of webpack elites is keeping this information well-guarded :P 我认为这是可能的，但如果是这样，一个秘密的网络精英集团正在保持这些信息的保护：P

But given it's already splitting the code into several very small chunks I am not sure it's necessary (for me, anyway). 但鉴于它已经将代码分成几个非常小的块，我不确定它是否必要（对我来说，无论如何）。

webpack 4 - 分割多个条目的块插件

问题描述

2 个解决方案

解决方案1
8 2018-07-22 09:11:03

解决方案2
0 2018-06-19 17:38:00

webpack 4 - 分割多个条目的块插件

问题描述

2 个解决方案

解决方案1 8 2018-07-22 09:11:03

解决方案2 0 2018-06-19 17:38:00

解决方案1
8 2018-07-22 09:11:03

解决方案2
0 2018-06-19 17:38:00