# mini-html-webpack-plugin
> A miniature version of html-webpack-plugin with only necessary features
Latest version **3.1.3** (published 2020-10-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install mini-html-webpack-plugin
pnpm add mini-html-webpack-plugin
yarn add mini-html-webpack-plugin
bun add mini-html-webpack-plugin
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.1.3 |
| Published | 2020-10-20 |
| First published | 2018-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 57 |
| Author | Juho Vepsalainen |
| Maintainers | bebraw, sapegin |
| Keywords | webpack, html, template |
## Links
- npm: https://www.npmjs.com/package/mini-html-webpack-plugin
- Repository: https://github.com/styleguidist/mini-html-webpack-plugin
- Issues: https://github.com/styleguidist/mini-html-webpack-plugin/issues
- npm.io page: https://npm.io/package/mini-html-webpack-plugin
## Dependencies (1)
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^2.0.1
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 3.1.3 (latest) — 2020-10-20
- 3.1.2 — 2020-10-20
- 3.1.0 — 2020-10-14
- 3.0.7 — 2020-05-12
- 3.0.6 — 2020-05-12
- 3.0.5 — 2020-04-02
- 3.0.4 — 2020-04-01
- 3.0.3 — 2020-04-01
- 3.0.2 — 2020-04-01
- 3.0.1 — 2020-04-01
- 3.0.0 — 2020-03-31
- 2.2.1 — 2020-01-29
- 2.2.0 — 2020-01-06
- 2.1.0 — 2019-12-08
- 2.0.0 — 2019-07-19
- … 10 more at https://npm.io/package/mini-html-webpack-plugin/versions
## README
# mini-html-webpack-plugin: a miniature version of html-webpack-plugin with only necessary features
[](https://www.npmjs.com/package/mini-html-webpack-plugin) [](https://travis-ci.org/styleguidist/mini-html-webpack-plugin)
The plugin writes CSS and JS asset paths for you automatically. It works with webpack 4 or higher.
**It does not work with html-webpack-plugin plugins!**
## Usage
```sh
npm install mini-html-webpack-plugin
```
```javascript
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
// Optional, defaults to `index.html`
filename: 'demo.html',
// Optional
publicPath: 'demo/',
context: {
title: 'Webpack demo',
// Optional, defaults to `{ lang: 'en' }`
htmlAttributes: {
lang: 'en'
},
// Optional, any additional HTML attached within
head: '',
// Optional, any additional HTML attached within
body: '',
// Optional
cssAttributes: {
rel: 'preload',
as: 'style'
},
// Optional
jsAttributes: {
defer: true
}
},
// Optional, use this for choosing chunks to include to your page.
// See the expanded example below.
chunks: ['app']
})
]
};
```
### Multiple pages
It's possible to use `MiniHtmlWebpackPlugin` to develop sites with multiple pages. It can be combined with webpack's bundle splitting so you can share common code across different pages.
To achieve this, you'll have to define `entry` against each the code for each page and define `MiniHtmlWebpackPlugin` to match them. In practice you might want to abstract this pairing but to give you the full idea, consider the example below.
```javascript
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
entry: {
app: './app.js',
another: './another.js'
},
plugins: [
new MiniHtmlWebpackPlugin({
filename: 'index.html',
chunks: ['app'],
}),
new MiniHtmlWebpackPlugin({
filename: 'another.html',
chunks: ['another'],
},
],
};
```
### HTML minification
```javascript
const minify = require('html-minifier').minify;
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
context: {
title: 'Minification demo'
},
template: (context) =>
minify(MiniHtmlWebpackPlugin.defaultTemplate(context))
})
]
};
```
### Custom templates
Use [@vxna/mini-html-webpack-template](https://www.npmjs.com/package/@vxna/mini-html-webpack-template) to add an app container div, a favicon, meta tags, inline JavaScript or CSS.
Or define a template function to generate your own code.
The template function may return a string or a `Promise` resolving to a string.
```js
const {
MiniHtmlWebpackPlugin,
generateAttributes,
generateCSSReferences,
generateJSReferences
} = require('mini-html-webpack-plugin');
const config = {
plugins: [
new MiniHtmlWebpackPlugin({
filename: 'demo.html',
publicPath: 'demo/',
// `context` is available in `template` below
context: {
title: 'Webpack demo',
htmlAttributes: {
lang: 'en'
},
cssAttributes: {
rel: 'preload',
as: 'style'
},
jsAttributes: {
defer: true
}
},
template: ({
css,
js,
publicPath,
title,
htmlAttributes,
cssAttributes,
jsAttributes
}) => {
const htmlAttrs = generateAttributes(htmlAttributes);
const cssTags = generateCSSReferences({
files: css,
attributes: cssAttributes,
publicPath
});
const jsTags = generateJSReferences({
files: js,
attributes: jsAttributes,
publicPath
});
return `
${title}
${cssTags}
${jsTags}
`;
}
})
]
};
```
## License
MIT.
---
_Source: https://npm.io/package/mini-html-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._