Working with HTML Layouts in Webpack

Webpack can work with HTML layouts. It allows you to automatically connect collected bundles to the layout file. This is especially convenient when the bundle name contains a hash.

To work with HTML layouts, html-webpack-plugin is used. Let's install it:

npm install html-webpack-plugin --save-dev

Let's import it:

import HtmlWebpackPlugin from 'html-webpack-plugin';

Let's turn it on:

export default {
	entry: './src/index.js',
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Install and import the described plugin.