html-webpack-plugin
Advanced tools
The html-webpack-plugin is a plugin for webpack that simplifies the creation of HTML files to serve your webpack bundles. It is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can let the plugin generate an HTML file for you, include your webpack bundles in the file, or generate multiple HTML files with different configurations.
Generating a default HTML file
This feature automatically generates a default HTML file that includes all your webpack bundles.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [new HtmlWebpackPlugin()]
};Custom template
This feature allows you to provide a custom HTML template for the generated file.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};Injecting assets
This feature automatically injects all necessary webpack bundles into the HTML file.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
inject: true
})
]
};Generating multiple HTML files
This feature allows you to generate multiple HTML files with different names and templates.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: 'src/about.html'
})
]
};This package provides a pluggable template for the html-webpack-plugin, offering additional features like meta tags, links to CDN-hosted libraries, and more. It is more opinionated than the base html-webpack-plugin, which allows for more customization.
This is a webpack plugin that generates a 'manifest.json' for your Progressive Web Application, with auto icon resizing and fingerprinting support. It serves a different purpose than html-webpack-plugin but is often used alongside it to set up web app manifests.
This plugin for webpack uses the favicons library to automatically generate favicons for different platforms and insert them into an HTML file generated by html-webpack-plugin. It complements the html-webpack-plugin by managing favicon generation.
This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
Install the plugin with npm:
$ npm install html-webpack-plugin@2 --save-dev
The plugin will generate an HTML5 file for you that includes all your webpack
bundles in the body using script tags. Just add the plugin to your webpack
config as follows:
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
This will generate a file dist/index.html containing the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
If you have multiple webpack entry points, they will all be included with script
tags in the generated HTML.
If you have any css assets in webpack's output (for example, css extracted
with the ExtractTextPlugin)
then these will be included with <link> tags in the HTML head.
You can pass a hash of configuration options to HtmlWebpackPlugin.
Allowed values are as follows:
title: The title to use for the generated HTML document.filename: The file to write the HTML to. Defaults to index.html.
You can specify a subdirectory here too (eg: assets/admin.html).template: Path to the template. Supports loaders e.g. html!./index.html.inject: true | 'head' | 'body' | false Inject all assets into the given template or templateContent - When passing true or 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element.favicon: Adds the given favicon path to the output html.minify: {...} | false Pass a html-minifier options object to minify the output.hash: true | false if true then append a unique webpack compilation hash to all
included scripts and css files. This is useful for cache busting.chunks: Allows you to add only some chunks (e.g. only the unit-test chunk)excludeChunks: Allows you to skip some chunks (e.g. don't add the unit-test chunk)Here's an example webpack config illustrating how to use these options:
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js',
hash: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}
To generate more than one HTML file, declare the plugin more than once in your plugins array:
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(), // Generates default index.html
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
}
If the default generated HTML doesn't meet your needs you can supply
your own template. The easiest way is to use the inject option and pass a custom html file.
The html-webpack-plugin will automatically inject all necessary css, js, manifest
and favicon files into the markup.
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'my-index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]
my-index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
If you already have a template loader, you can use it to parse the template.
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs',
inject: 'body'
})
]
Alternatively, if you already have your template's content in a String, you
can pass it to the plugin using the templateContent option:
plugins: [
new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString
})
]
You can use the lodash syntax out of the box.
If the inject feature doesn't fit your needs and you want full control over the asset placement use the default template
as a starting point for writing your own.
The templateContent option can also be a function to use another template language like jade:
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation) {
// Return your template content synchronously here
return '..';
}
})
]
Or the async version:
plugins: [
new HtmlWebpackPlugin({
templateContent: function(templateParams, compilation, callback) {
// Return your template content asynchronously here
callback(null, '..');
}
})
]
Note the plugin will throw an error if you specify both template and
templateContent.
The o variable in the template is the data that is passed in when the
template is rendered. This variable has the following attributes:
htmlWebpackPlugin: data specific to this plugin
htmlWebpackPlugin.files: a massaged representation of the
assetsByChunkName attribute of webpack's stats
object. It contains a mapping from entry point name to the bundle filename, eg:
"htmlWebpackPlugin": {
"files": {
"css": [ "main.css" ],
"js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
"main": {
"entry": "assets/main_bundle.js",
"css": []
},
}
}
}
If you've set a publicPath in your webpack config this will be reflected correctly in this assets hash.
htmlWebpackPlugin.options: the options hash that was passed to
the plugin. In addition to the options actually used by this plugin,
you can use this hash to pass arbitrary data through to your template.
webpack: the webpack stats
object. Note that this is the stats object as it was at the time the HTML template
was emitted and as such may not have the full set of stats that are available
after the wepback run is complete.
webpackConfig: the webpack configuration that was used for this compilation. This
can be used, for example, to get the publicPath (webpackConfig.output.publicPath).
To include only certain chunks you can limit the chunks being used:
plugins: [
new HtmlWebpackPlugin({
chunks: ['app']
})
]
It is also possible to exclude certain chunks by setting the excludeChunks option:
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['dev-helper']
})
]
FAQs
Simplifies creation of HTML files to serve your webpack bundles
The npm package html-webpack-plugin receives a total of 9,946,484 weekly downloads. As such, html-webpack-plugin popularity was classified as popular.
We found that html-webpack-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.