Din egen layoutfil i Webpack

I praktiken har vi vanligtvis redan en egen HTML-layout för webbplatsen. I det här fallet behöver vi att Webpack tar vår layout, istället för att generera en egen. Låt oss se hur det går till.

Låt oss säga att vi har följande layout:

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

Låt oss få Webpack att ta vår layout. För att göra detta konfigurerar vi det i följande inställning:

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

Som ett resultat, efter bygget, i mappen dist kommer vår layout att finnas och i den kommer alla bundles automatiskt att vara inkluderade:

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

Skapa din egen layout. Konfigurera Webpack så att den använder din layout.