A webpack plugin that reads all the html files in a given directory and adds an HtmlWebpackPlugin for each one of them automatically.
npm install dynamic-html-webpack-plugin.html files in a directory and adds an HtmlWebpackPlugin for each one of them automatically.
.html file used for the project, which makes development and code maintenance easier.
npm i -D dynamic-html-webpack-plugin
`
Usage
$3
#### Webpack Config
`js
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
$3
| Name | Type | Default | Description |
|-----------------------------|-------------------------------------|-------------|-------------------------------------------------------------------------------------|
| dir | String | "" | Directory where the .html files are located |
| additionalChunks | Object. | {} | 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`)