Бандлови скриптова са хешем у макету у Вебпаку

Обично приликом грађења пројекта ми желимо да имена бандлова садрже хеш. То нам је потребно да бисмо решили проблем са кеширањем фајлова прегледачем.

Стога је погодно што ће Вебпак аутоматски повезивати бандлове са именима који садрже хеш. Хајде да проверимо. Претпоставимо да имамо следећа подешавања:

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>

Притом, при промени фајлова пројекта и поновној грађњи, Вебпак ће аутоматски мењати хешеве и уносити измене у фајл макета. Ако се фајлови пројекта нису мењали, онда се ни хеш неће мењати.

Направите три улазне тачке. Направите тако да се граде у одвојене бандлове са именима који садрже хеш.

Извршите грађење пројекта. Уверите се да су у фајлу макета повезани сви бандлови.

Измените текст у изворном фајлу једне од улазних тачака. Извршите грађење. Проверите да ће се хеш бандла те тачке променити, а осталих бандлова - не.