Webpack'те хеши бар скрипт бандлдарын макетке кошуу

Адатта, долбоорду чогултканда, биз бандлдардын аталыштары хешти камтышын каалайбыз. Бизге мулк браузер тарабынан файлдарды кэштоо маселесин чечүү үчүн бул керек.

Ошондуктан, Webpack'тин автоматтык түрдө хешти камтыган аталыштар менен бандлдарды кошкону ыңгайлуу. Келгиле текшерип көрөлү. Бизде төмөнкү жөндөөлөр болсун:

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

Чогулткандан кийин, биздин хеши бар бандлдар макет файлына кошулат:

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

Долбоор файлдары өзгөргөндө жана кайра чогултулганда, Webpack автоматтык түрдө хештерди өзгөртөт жана макет файлына өзгөртүүлөрдү киргизет. Эгерде долбоор файлдары өзгөрүлбөсө, анда хеш дагы өзгөрбөйт.

Үч кириш чекитин жасагыла. Алардын өз алдынча хешти камтыган аталыштары менен бандлдарга чогултулушу үчүн кепилдик бергиле.

Долбоорду чогулткула. Макет файлында бардык бандлдардын кошулганына ишенип чыккыла.

Кириш чекиттеринин биринин баштапкы файлындагы текстти өзгөрткүлө. Чогултууну аткаргыла. Ушул кириш чекитинин бандлынын хеши өзгөрөрүн, ал эми калган бандлдардыкы өзгөрбөөрүн текшергиле.