Jou eie leërbêrandlêer in Webpack

In die praktyk het ons gewoonlik reeds ons eie HTML-leërbêrand vir die webwerf. In hierdie geval benodig ons dat Webpack ons leërbêrand neem, en nie sy eie genereer nie. Kom ons kyk hoe dit gedoen word.

Kom ons neem aan ons het die volgende leërbêrand:

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

Laat ons Webpack dwing om ons leërbêrand te neem. Om dit te doen, spesifiseer dit in die volgende instelling:

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

As gevolg hiervan sal na bundeling in die gids dist ons leërbêrand wees en daarin sal al die bondels outomaties gekoppel wees:

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

Maak jou eie leërbêrand. Stel Webpack so in dat dit jou leërbêrand neem.