Webpack-daky maketde hash-li skript bändlleri

Adatça taslamany ýygnalygynda biz bändlleriň adlarynyň hash goşantlaryny bolmagyny isleýäris. Bu, brauzeriň faýllary keşirýän ýagdaýynda maselany çözmek üçin gerek.

Şonuň üçin Webpack-iň hash goşantly atlary bolan bändlleri awtomatiki ulanyşy amatylydyr. Geliň synaýaly. Bizde aşakdaky sazlamalar bolsun:

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

Ýygnalandan soň maket faýlyna hash goşantly bändllerimiz birikdiriler:

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

Şol bir wagtyň özünde taslama faýllary üýtgedilende we gaýtadan ýygnalanda Webpack awtomatiki hash-lary üýtgeder we maket faýlyna üýtgeşmeler girer. Eger taslama faýllary üýtgemeýän bolsa, onda hash hem üýtgemeýär.

Üç girýän nokady düzüň. Olaryň özleşdirilen bändllerde hash goşantly atlary bolşy ýaly ediň.

Taslamany ýygnaň. Maket faýlynda ähli bändlleriň birikdirilendigine göz ýetiriň.

Girýän nokatlaryň biriniň başdaky faýlyndaky teksti üýtgediň. Ýygnalygy ýerine ýetiriň. Şol nokadyň bändliniň hash-y üýtgeýändigine, galan bändlleriňkiniň bolsa üýtgemeýändigine göz ýetiriň.