Webpack'te Hash İçeren Script Bundle'ları

Genellikle, bir projeyi derlerken bundle isimlerinin hash içermesini isteriz. Bunun nedeni, tarayıcının dosyaları önbelleğe almasından kaynaklanan sorunu çözmektir.

Bu nedenle, Webpack'ın hash içeren isimlere sahip bundle'ları otomatik olarak bağlayacak olması kullanışlıdır. Hadi kontrol edelim. Aşağıdaki ayarlara sahip olduğumuzu varsayalım:

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

Derlemeden sonra, şablon dosyasına hash'li bundle'larımız bağlanacak:

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

Ayrıca, proje dosyaları değiştirildiğinde ve yeniden derlendiğinde, Webpack hash'leri otomatik olarak değiştirecek ve şablon dosyasında değişiklikler yapacaktır. Eğer proje dosyaları değişmemişse, hash de değişmeyecektir.

Üç giriş noktası oluşturun. Bu giriş noktalarının hash içeren isimlerle ayrı bundle'lar olarak derlenmesini sağlayın.

Projeyi derleyin. Şablon dosyasında tüm bundle'ların bağlandığından emin olun.

Bir giriş noktasının kaynak dosyasındaki metni değiştirin. Derlemeyi yapın. Bu giriş noktasının bundle hash'inin değiştiğini, diğer bundle'ların hash'lerinin ise değişmediğini kontrol edin.