Html-webpack-plugin: Support multiple Webpack entries

[mathoglu]

Working in a project with multiple entries which are placed in multiple folders:

entries: {
    entry1: "src/entry1/index.js",
    entry2: "src/entry2/index.js"
},
output: {
    path: "dist",
    filename: "[name]/[name].bundle.js"
}

It would be neat to be able to generate multiple .html files, utilising the [name] substitution to support multiple names. What say you?

Like:

new HtmlWebpackPlugin({
   filename: "[name]/index.html"
})

[jantimon]

sorry this wouldn't work for all the users who are already using the plugin - please add a loop to your configuration file

[iwano]

@jantimon whats the loop for? I think it can be done by defining n number of HtmlWebpackPlugin instances and excluding the chunks from other entries like:

    new HtmlWebpackPlugin({
        filename: 'entry1.html',
        excludeChunks: ['entry2']
    }),
    new HtmlWebpackPlugin({
        filename: 'entry2.html',
        excludeChunks: ['entry1']
    })

[jantimon]

@iwano Yes exactly - but if you have a lot of those you could also use a loop to keep them connected:

var entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
};

var entryHtmlPlugins = Object.keys(entry).map(function(entryName) {
   return new HtmlWebpackPlugin({
      filename: entryName + '.html',
      chunks: [entryName]
  })
});

module.export = {
   entry: entry,
   //....
  plugins: [
      // ..
  ].concat(entryHtmlPlugins)
}

[iwano]

@jantimon oh nice, thanks!

[lwr]

@jantimon seems that we still are missing the important part

for instance, multiple entries have some non-async common chunks,

we have to configure like this

var entry: {
    a : ['./a', 'common-a-b'],
    b : ['./b', 'common-a-b'], 
};

It is difficult to maintain such dependencies manually.

Is there any options like this?

 new HtmlWebpackPlugin({
      filename: entryName + '.html',
      chunks: [entryName],
      includeParentChunks: true
  })

so we needn't to apply non-entry chunks manually.

[jantimon]

@lwr this requires a complex parent resolution which would be very specific for your problem - could we find a way to isolate it into a new npm package?

[lwr]

@jantimon thx

Maybe "only use async common chunks" would be the better option.

I have tried config webpack 4 like this (a,b have no any common with c,d)

splitChunks  : {
    cacheGroups : {
        'common-a-b' : { name : 'common-a-b', chunks : 'initial', test : /^(a|b)$/ },
        'common-c-d' : { name : 'common-c-d', chunks : 'initial', test : /^(c|d)$/ },
    }
}

and found that this is not worked

a.html

<script src='common-a-b.js'></script>
<script src='a.js'></script>

because a.js is still requiring chunk common-b-c (only because it is marked 'initial') before it start

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.