Script bundler med hash i layout i Webpack

Som regel, når vi bygger et projekt, ønsker vi, at bundlernes navne skal indeholde hashes. Dette har vi brug for for at løse problemet med browserens caching af filer.

Derfor er det praktisk, at Webpack automatisk vil tilføje bundler med navne, der indeholder hashes. Lad os tjekke det. Lad os antage, at vi har følgende indstillinger:

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(),
	],
};

Efter bygningen vil vores bundler med hashes blive tilføjet til layoutfilen:

<!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>

Samtidig, når projektfilerne ændres og der genbygges, vil Webpack automatisk ændre hashes og foretage ændringer i layoutfilen. Hvis projektfilerne derimod ikke er ændret, vil hashen heller ikke ændre sig.

Opret tre entry points. Sørg for, at de bliver bygget til separate bundler med navne, der indeholder hashes.

Udfør projektbyggeri. Vær sikker på, at alle bundler er tilføjet i layoutfilen.

Ændr teksten i en af entry points' kildefiler. Udfør byggeri. Tjek, at bundlens hash for denne entry point ændrer sig, mens hashes for de andre bundler forbliver uændrede.