html-webpack-entrypoints-plugin

1.0.1 • Public • Published

html-webpack-entrypoints-plugin npm version build status

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 } for html-webpack-plugin because 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-plugin

And 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>

Package Sidebar

Install

npm i html-webpack-entrypoints-plugin

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

9.06 kB

Total Files

4

Last publish

Collaborators

  • lukehorvat