HtmlWebpackPlugin generates the HTML file that loads your webpack bundles, so you never maintain the <script> and <link> tags by hand.
It adds a tag for every bundle automatically.
When file names carry a content hash for cache busting, the plugin writes the new names on every build.
It can start from your own HTML template with variables.
One plugin instance per page builds a multi-page app.
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['app'], // Only include specific chunks
minify: process.env.NODE_ENV === 'production'
})
Here chunks limits the page to the app bundle, and minify turns HTML minification on for production builds.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
