Votre propre fichier de mise en page dans Webpack

En pratique, nous avons généralement déjà notre propre mise en page HTML du site. Dans ce cas, nous avons besoin que Webpack prenne notre mise en page, et non qu'il génère la sienne. Voyons comment procéder.

Supposons que nous ayons la mise en page suivante :

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

Forçons Webpack à utiliser notre mise en page. Pour cela, spécifions-la dans le paramètre suivant :

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

En conséquence, après la construction, dans le dossier dist se trouvera notre mise en page et dans celle-ci tous les bundles seront automatiquement inclus :

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

Créez votre propre mise en page. Configurez Webpack de manière à ce qu'il utilise votre mise en page.