Webpack-də Hash-li Script Bundle-ləri Layout-da

Adətən layihəni yığdıqda biz bundle-lərin adlarında hash olmasını istəyirik. Bizə bu, brauzerin faylları keş etməsi ilə bağlı problemi həll etmək üçün lazımdır.

Ona görə də Webpack-in avtomatik olaraq hash daxil olan adlarla bundle-ləri əlavə etməsi rahatdır. Gəlin yoxlayaq. Aşağıdakı konfiqurasiyalarımız olduğunu güman edək:

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

Yığmadan sonra layout faylına hash-li bundle-lərimiz əlavə olunacaq:

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

Eyni zamanda, layihə faylları dəyişdikdə və yenidən yığma zamanı Webpack avtomatik olaraq hash-ləri dəyişəcək və dəyişiklikləri layout faylına daxil edəcək. Əgər layihə faylları dəyişməyibsə, onda hash də dəyişməyəcək.

Üç giriş nöqtəsi yaradın. Onların ayrı-ayrı bundle-larda, hash daxil olan adlarla yığınmasını təmin edin.

Layihəni yığın. Layout faylında bütün bundle-lərin əlavə olunduğuna əmin olun.

Giriş nöqtələrindən birinin mənbə faylındakı mətni dəyişdirin. Yığmanı yerinə yetirin. Yoxlayın ki, həmin giriş nöqtəsinin bundle hash-i dəyişsin, digər bundle-larınki isə dəyişməsin.