html-webpack-entrypoints-plugin 
An extension to html-webpack-plugin that groups JS/CSS assets by entry point.
This is a niche plugin that you should only think about using if you meet the following criteria:
- You've configured multiple entry points in your Webpack config.
- You've specified
{ inject: false }forhtml-webpack-pluginbecause you want control over asset placement in the template. - You want even greater control over asset placement – the ability to place the assets for each entry point at different locations in the template.
See the usage section below for examples.
Installation
Install the package via npm:
$ npm install html-webpack-entrypoints-pluginAnd then add it to the plugins in your Webpack config:
const HtmlWebpackEntrypointsPlugin = require('html-webpack-entrypoints-plugin');new HtmlWebpackEntrypointsPlugin()Usage
I hope the following usage examples illustrate how the plugin provides more fine-grained control over asset placement in the template (compared to what html-webpack-plugin offers).
Multiple entrypoints + no runtime chunks
Webpack config:
{
entry: {
one: './one.js',
two: './two.js',
three: './three.js',
},
optimization: {
runtimeChunk: false,
},
}Template:
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.one.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.two.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.three.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>Output HTML:
<script src="one.js"></script>
<script src="two.js"></script>
<script src="three.js"></script>Multiple entrypoints + multiple runtime chunks
Webpack config:
{
entry: {
one: './one.js',
two: './two.js',
three: './three.js',
},
optimization: {
runtimeChunk: 'multiple', // or `runtimeChunk: true`
},
}Template:
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.one.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.two.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.three.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>Output HTML:
<script src="runtime~one.js"></script>
<script src="one.js"></script>
<script src="runtime~two.js"></script>
<script src="two.js"></script>
<script src="runtime~three.js"></script>
<script src="three.js"></script>Multiple entrypoints + single runtime chunk
Webpack config:
{
entry: {
one: './one.js',
two: './two.js',
three: './three.js',
},
optimization: {
runtimeChunk: 'single',
},
}Template:
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints._runtime.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.one.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.two.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>
<% for (var scriptUrl of htmlWebpackPlugin.files.entrypoints.three.js) { %>
<script src="<%= scriptUrl %>"></script>
<% } %>Output HTML:
<script src="runtime.js"></script>
<script src="one.js"></script>
<script src="two.js"></script>
<script src="three.js"></script>