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 or supply your own template (using blueimp templates).
Install the plugin with npm:
$ npm install html-webpack-plugin --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 http-equiv="Content-type" content="text/html; 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.
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).Here's an example webpack config illustrating how to use these options:
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
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 blueimp template. The default template is a good starting point for writing your own.
Let's say for example you wanted to put a webpack bundle into the head of your HTML as well as the body. Your template might look like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>My App</title>
<script src="{%=o.htmlWebpackPlugin.assets.head%}"></script>
</head>
<body>
<script src="{%=o.htmlWebpackPlugin.assets.main%}"></script>
</body>
</html>
To use this template, configure the plugin like this:
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/assets/my_template.html'
})
]
}
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.assets: 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": {
"assets": {
"head": "assets/head_bundle.js",
"main": "assets/main_bundle.js"
}
}
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.
FAQs
Simplifies creation of HTML files to serve your webpack bundles
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.