Bundle di script con hash nel layout in Webpack

Di solito, quando costruiamo un progetto, vogliamo che i nomi dei bundle contengano hash. Ne abbiamo bisogno per risolvere il problema della cache dei file da parte del browser.

Quindi è conveniente che Webpack colleghi automaticamente i bundle con nomi che contengono hash. Verifichiamolo. Supponiamo di avere le seguenti impostazioni:

export default {
	context: path.resolve( 'src'),
	entry: {
		test1: './test1.js',
		test2: './test2.js'
	},
	output: {
		filename: '[name].[contenthash].js',
		path: path.resolve('dist'),
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Dopo la build, i nostri bundle con hash saranno collegati al file di layout:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Webpack App</title>
		<script defer src="test1.4173b379c6d6ff439604.js"></script>
		<script defer src="test2.72be8754d7c4cb0ece00.js"></script>
	</head>
	<body>
		
	</body>
</html>

Inoltre, quando i file del progetto vengono modificati e ricostruiti, Webpack cambierà automaticamente gli hash e apporterà modifiche al file di layout. Se invece i file del progetto non sono cambiati, nemmeno l'hash cambierà.

Crea tre entry point. Configurali in modo che vengano compilati in bundle separati con nomi contenenti hash.

Esegui la build del progetto. Assicurati che nel file di layout siano collegati tutti i bundle.

Modifica il testo nel file sorgente di uno degli entry point. Esegui la build. Verifica che l'hash del bundle di quell'entry point sia cambiato, mentre quello degli altri bundle no.