Using split chunks plugin with the following config :

{
    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)?

Using HtmlWebpackPlugin as recommended would simply create an index.html which loads all of the above, although the use case is clearly:

When rendering entry1 page - load:

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

When rendering entry2 page - load:

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

etc..

Using split chunks plugin with the following config :

{
    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)?

Using HtmlWebpackPlugin as recommended would simply create an index.html which loads all of the above, although the use case is clearly:

When rendering entry1 page - load:

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

When rendering entry2 page - load:

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

etc..

• javascript
• webpack
• bundle
• code-splitting

• 2 @Raviteja CommonsChunkPlugin has been removed in webpack 4. SplitChunksPlugin is it's successor. – Daniel Commented May 8, 2018 at 6:44
• 1 Please explain the downvotes, I'd like to know if i'm missing a very basic thing here.. – Daniel Commented May 8, 2018 at 6:50
• 13 I have the same issue, I don't understand the downvotes. – A. Matías Quezada Commented May 25, 2018 at 14:43
• 1 Daniel or @A. Matías Quezada I am curious if you ever found a solution. Having a similar issue and info on splitChunks with multiple entrypoints is very hard to come by. – tarponjargon Commented Jun 18, 2018 at 16:53
• 1 @EgorNepomnyaschih - it's not always for multiple entries, you'd wanna break your bundle into chunks in case it's too big regardless of the number of entries. and for a single entry the plugins work perfectly. – Daniel Commented Aug 5, 2018 at 7:05

2 Answers 2

Version 4 of HtmlWebpackPlugin (which is alpha as of now) includes all entries' generated chunks automatically. So just setting chunks: 'entry1' should work:

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

... and leads to injecting of all dependent chunks in html file:

<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

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:

    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:

    // 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. 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

But given it's already splitting the code into several very small chunks I am not sure it's necessary (for me, anyway).