Dynamic HtmlWebpackPlugin

A webpack plugin that reads all the .html files in a directory and adds an HtmlWebpackPlugin for each one of them automatically.

This removes the need to manually add an HtmlWebpackPlugin for each .html file used for the project, which makes development and code maintenance easier.

Installation

npm i -D dynamic-html-webpack-plugin

Usage

Example

Webpack Config

module.exports = {
  entry: {
    foo: "src/scripts/foo.js",
    bar: "src/scripts/bar.js",
    utils: "src/scripts/utils.js",
    utils2: "src/scripts/utils2.js",
    common: "src/scripts/common.js"
  },
  plugins: [
    new DynamicHtmlWebpackPlugin({
      dir: "src/pages",
      additionalChunks: {
        all: "common",
        foo: ["utils", "utils2"],
        bar: "utils"
      },
      commonOptions: {
        scriptLoading: "defer",
        cache: false
      }
    })
  ]
};

File Tree

src/
 ├── pages/
 │    ├── foo.html
 │    └── bar.html
 └── scripts/
      ├── foo.js
      ├── bar.js
      ├── common.js
      ├── utils.js
      └── utils2.js
webpack.config.js

When Compiled

• foo.html will reference foo.js, common.js, utils.js and utils2.js
• bar.html will reference bar.js, common.js and utils.js

Options

Name	Type	Default	Description
dir	String	""	Directory where the .html files are located
additionalChunks	Object.<String, String|String[]>	{}	Chunks each .html page will have, in addition to the one sharing their file name.
additionalChunks.all	String|String[]	undefined	Chunks all pages will share and reference.
commonOptions	Object	{}	Other HtmlWebpackPLugin options that will be applied to all pages.
addChunksMatchingPageName	Bool	true	If true, the entry chunk that shares names with an .html file will automatically be added to that file

Note: Properties inside additionalChunks should have the same name as the .html file they are gonna be added to (except for additionalChunks.all)