Webpack-da Xeshli Script Bundl-larini Layout-ga Ulash

Odatda, loyihani yig'ish jarayonida biz bundl nomlarida xeshlar bo'lishini xohlaymiz. Bunga brauzer tomonidan fayllarni keshlash muammosini hal qilish uchun muhtojmiz.

Shuning uchun Webpack-ning xeshli nomlar bilan bundl-larni avtomatik ulashi qulay. Keling tekshiramiz. Quyidagi sozlamalarimiz bor deb faraz qilaylik:

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

Yig'ish tugagandan so'ng, layout fayliga xeshlari bilan bizning bundl-larimiz ulanadi:

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

Bunda, loyiha fayllari o'zgarganda va qayta yig'ilganda, Webpack avtomatik ravishda xeshlarni o'zgartiradi va layout faylida o'zgartirishlar kiritadi. Agar loyiha fayllari o'zgarmagan bo'lsa, xesh ham o'zgarmaydi.

Uchta kirish nuqtasi yarating. Ular alohida bundl-larga, nomlarida xeshlar bo'lgan holda yig'ilishini ta'minlang.

Loyihani yig'ishni bajaring. Layout faylida barcha bundl-lar ulanganligiga ishonch hosil qiling.

Kirish nuqtalaridan birining manba faylidagi matnni o'zgartiring. Yig'ishni bajaring. Ushbu nuqta bundlining xeshi o'zgarganini, qolgan bundl-larniki esa o'zgarmaganligini tekshiring.