The html-webpack-plugin is a plugin in the webpack JavaScript module bundler that simplifies the creation of HTML files to serve your webpack bundles. This can be exceptionally useful, especially when it comes to webpack bundles that include a hash in the filename, which changes upon every compilation. The plugin allows you to either generate an HTML file, supply your own template using lodash templates, or use your own loader.
To use the html-webpack-plugin, you must first add and install it to your project's dependencies. Depending on your webpack version, you can use either npm or yarn to install the plugin. After installation, you may use the plugin in your webpack configuration (webpack.config.js) file as follows:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
Upon execution, this will generate an HTML5 file that includes all your webpack bundles in the head using script tags.
If you need to generate more than one HTML file, you can declare the plugin more than once in your plugins array.
plugins: [
new HtmlWebpackPlugin(), //Generates default index.html
new HtmlWebpackPlugin({ // Generates a test.html
filename: 'test.html',
template: 'src/assets/test.html'
})
]
The plugin also offers options for customization such as defining a title, filename, and template for the HTML document.
The documentation for the html-webpack-plugin can be found at https://github.com/jantimon/html-webpack-plugin#readme. The documentation comprises of a detailed guide on how to install and use the plugin, options available for customization, how to write your templates, and plugin events.
