rOACCT/node_modules/@vxna/mini-html-webpack-template5d92ed19fb80paginated-inlines
rOACCT/node_modules/@vxna/mini-html-webpack-template
5d92ed19fb80paginated-inlines
mini-html-webpack-template
mini-html-webpack-template
README.md
README.md
@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: '<div id="root"></div>'
},
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
License
c4science · Help