Il tuo file di layout in Webpack

Nella pratica di solito abbiamo già il nostro layout HTML del sito. In questo caso abbiamo bisogno che Webpack prenda il nostro layout, e non ne generi uno proprio. Vediamo come si fa.

Supponiamo di avere il seguente layout:

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

Forziamo Webpack a prendere il nostro layout. Per fare questo, specifichiamolo nella seguente impostazione:

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

Di conseguenza, dopo la build, nella cartella dist ci sarà il nostro layout e in esso saranno automaticamente inclusi tutti i bundle:

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

Crea il tuo layout. Configura Webpack in modo che prenda il tuo layout.