Бандлҳои скриптҳо бо хеш дар макети 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 худкор хешҳоро тағйир дода ва тағйиротро ба файли макет ворид мекунад. Агар файлҳои лоиҳа тағйир наёфта бошанд, пас хеш низ тағйир намеёбад.

Се нуқтаи дохилшавиро созед. Ҳамин тавр созед, ки онҳо ба бандлҳои ҷудогона бо номҳои дорои хеш сохта шаванд.

Сохтани лоиҳаро иҷро кунед. Боварӣ ҳосил кунед, ки дар файли макет ҳамаи бандлҳо пайваст шудаанд.

Матнро дар файли манбаъи яке аз нуқтаҳои дохилшавӣ тағйир диҳед. Сохтанро иҷро кунед. Санҷед, ки хеши бандли он нуқта тағйир меёбад, ва бандлҳои дигар - на.