Eigene Layout-Datei in Webpack

In der Praxis haben wir normalerweise bereits unser eigenes HTML-Layout für die Website. In diesem Fall müssen wir, dass Webpack unser Layout verwendet und nicht ein eigenes generiert. Lassen Sie uns ansehen, wie das gemacht wird.

Angenommen, wir haben das folgende Layout:

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

Lassen Sie uns Webpack zwingen, unser Layout zu übernehmen. Dazu konfigurieren wir es in der folgenden Einstellung:

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

Als Ergebnis wird nach dem Build im Ordner dist unser Layout sein und darin werden automatisch alle Bundles eingebunden:

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

Erstellen Sie Ihr eigenes Layout. Konfigurieren Sie Webpack so, dass es Ihr Layout verwendet.