Webpackда макетга хеш билан скрипт бандллари

Одатда лойихани тўплашда биз бандл номлари хешни ўз ичига олишини истаймиз. Бунга биз браузер томонидан файлларни кешлаш муаммосini хал қилиш учун зарур.

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

Учта кириш нуқтаси яратинг. Улар ҳар хил хешни ўз ичига олган номлар билан алоҳида бандлларга тўпланишини таъминланг.

Лойихани тўплашни бажаринг. Макет файлида ҳамма бандллар уланганига ишонч ҳосил қилинг.

Кириш нуқталарининг биридаги манба файлидаги матнни ўзгартиринг. Тўплашни бажаринг. Шу нуқтанинг бандл хеши ўзгаради, қолган бандлларники эса ўзгармаслигини текширинг.