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 автоматты түрде хештерді өзгертеді және өзгерістер енгізеді макет файлына. Егер жоба файлдары өзгермеген болса, онда хеш те өзгермейді.

Үш кіру нүктесін жасаңыз. Олардың бөлек бандлдарға жинақталуын және хеші бар атауларға ие болуын қамтамасыз етіңіз.

Жобаны жинақтауды орындаңыз. Макет файлына барлық бандлдардың қосылғанына көз жеткізіңіз.

Кіру нүктелерінің бірінің бастапқы файлындағы мәтінді өзгертіңіз. Жинақтауді орындаңыз. Осы нүктенің бандл хеші өзгеретініне, ал қалған бандлдардың хештері өзгермейтініне көз жеткізіңіз.