Generating HTML Layout in Webpack

In the previous lesson, we installed and connected HtmlWebpackPlugin. Now, when building, we will automatically generate an HTML layout file and scripts and styles will be automatically connected in this layout.

Let's try the simplest case. Let's say we have one entry point:

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

As a result, after the build, our JavaScript will be collected into a bundle named main.js and this bundle will be connected to the automatically created site layout:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Webpack App</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

Build with HtmlWebpackPlugin enabled. Verify that you get a layout file. Inspect its source code. Open the file in a browser.