Custom Layout File in Webpack

In practice, we usually already have our own HTML layout of the site. In this case, we need Webpack to take our layout, and not generate its own. Let's see how this is done.

Let's say we have the following layout:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My layout</title>
	</head>
	<body>
		
	</body>
</html>

Let's make Webpack take our layout. To do this, we'll write it in the following setting:

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

As a result, after the build, our layout will be in the dist folder, and all bundles will be automatically connected to it:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My layout</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

Make your layout. Configure Webpack to take your layout.