@vxna/mini-html-webpack-template

 

Template for mini-html-webpack-plugin that extends default features with useful subset of options

Warning

It does not work with html-webpack-plugin

Common usage

webpack.config.js

``js
const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin')

module.exports = {
plugins: [
new MiniHtmlWebpackPlugin({
context: {
title: 'common-usage',
favicon: 'https://assets-cdn.github.com/favicon.ico',
container: 'root',
trimWhitespace: true
},
template: require('@vxna/mini-html-webpack-template')
})
]
}
`

Common options

| Name | Type | Default | Description |
| -------------------- | ----------- | -------------- | ---------------------------------- |
| lang | {String} | undefined | Set document language |
| title | {String} | 'sample-app' | Set document title |
| favicon | {String} | undefined | Set document favicon |
| container | {String} | undefined | Set application mount point |
| trimWhitespace | {Boolean} | undefined | Safe document whitespace reduction |

Extended usage

webpack.config.js

`js
const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin')

module.exports = {
plugins: [
new MiniHtmlWebpackPlugin({
context: {
title: 'extended-usage',
head: {
meta: [
{
name: 'description',
content: 'mini-html-webpack-template'
}
]
},
body: {
raw: '

'
},
attrs: {
js: {
async: '',
type: 'text/javascript'
}
}
},
template: require('@vxna/mini-html-webpack-template')
})
]
}
`

Extended options

| Name | Type | Default | Description |
| ------------------ | ----------------- | ----------- | ----------------------------------------- |
| head.meta | {Array} | undefined | Array of objects with key + value pairs |
| head.links | {Array} | undefined | Array of objects with key + value pairs |
| head.scripts | {Array} | undefined | Array of objects with key + value pairs |
| head.raw | {Array\|String} | undefined | Generates raw document markup |
| body.scripts | {Array} | undefined | Array of objects with key + value pairs |
| body.raw | {Array\|String} | undefined | Generates raw document markup |
| attrs.js | {Object} | undefined | Applies html attributes to webpack output |
| attrs.css | {Object} | undefined | Applies html attributes to webpack output |

Advanced minification

For custom needs html-minifier middleware and all of it's options could be used

webpack.config.js

`js
const { minify } = require('html-minifier')
const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin')

module.exports = {
plugins: [
new MiniHtmlWebpackPlugin({
context: {
title: 'advanced-minification'
},
template: ctx =>
minify(require('@vxna/mini-html-webpack-template')(ctx), {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true
})
})
]
}
``

Complex security features

SRI is out of scope of this project and it's recommended to use html-webpack-plugin with it's ecosystem tools.

Inspired by

html-webpack-template

License

MIT (http://www.opensource.org/licenses/mit-license.php)