webpack-html-template
v1.0.10
Published
Webpack
Downloads
15
Maintainers
glebfeklistovReadme
HTML Webpack Template
This is a clear and powerful template for the webpack plugin html-webpack-plugin. It has a many extra features than the default template. You have full control of generated template with few line config. No provided default tags or attributes without your needs. Compatible with other html-webpack-plugins.
Installation
Install the template in your project with npm:
$ npm i html-webpack-templateBasic Usage
To make it work, you need to provide these required parameters:
inject: falsetemplate: require('html-webpack-template')
And you can provide some optional parameters:
lang: Thelangattribute for html tag.manifest: Themanifestattribute for html tag.dir: Thedirattribute for html tag.head: The<head>tag configuration.body: The<body>tag configuration.window: The custom<script>tag to pass initial values for application.
Example
Here's an example webpack config illustrating how to use these options in your webpack.config.js:
{
// ...
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: require('webpack-html-template'),
head: {
title: 'App title',
meta: [{
charset: 'utf-8'
}, {
content: 'ie=edge',
'http-equiv': 'x-ua-compatible'
}, {
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}, {
name: 'description',
content: 'A better default template for html-webpack-plugin'
}]
},
body: {
script: [{
src: '/bootstrap.js'
}],
div: [{
id: 'canvas'
}, {
id: 'root'
}],
span: {
innerHTML: '<div>Hello world</div>'
},
img: {
src: '/logo.png'
},
window: {
__INITIAL_STATE__: JSON.stringify({a: true, b: 'John Doe'})
}
}
}),
new FaviconsWebpackPlugin({
inject: true,
logo: './src/logo.png'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.HotModuleReplacementPlugin()
]
}Another example with different body tags configuration concept and identical output
{
// ...
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: require('webpack-html-template'),
head: {
title: 'App title',
meta: [{
charset: 'utf-8'
}, {
content: 'ie=edge',
'http-equiv': 'x-ua-compatible'
}, {
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}, {
name: 'description',
content: 'A better default template for html-webpack-plugin'
}]
},
body: [{
script: {
src: '/bootstrap.js'
}
}, {
div: {
id: 'canvas'
}
}, {
div: {
id: 'root'
}
}, {
span: {
innerHTML: '<div>Hello world</div>'
}
}, {
img: {
src: '/logo.png'
}
}, {
window: {
__INITIAL_STATE__: JSON.stringify({a: true, b: 'John Doe'})
}
}]
}),
new FaviconsWebpackPlugin({
inject: true,
logo: './src/logo.png'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.HotModuleReplacementPlugin()
]
}