Mfuko wa Skripti zenye Hashi kwenye Mtindo wa Webpack

Kwa ujumla wakati wa kukusanya mradi, sisi tunataka majina ya mifuko iwe na hashi. Tunahitaji hii ili kutatua tatizo la kuhifadhi faili za kuvinjari katika kache.

Kwa hivyo ni rahisi kwamba Webpack kiotomatiki itaunganisha mifuko yenye majina yaliyo na hashi. Hebu tuangalie. Tuchukulie tuna mipangilio ifuatayo:

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

Baada ya kukusanya, faili za mtango zitakuwa zimeunganishwa na mifuko yetu yenye hashi:

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

Wakati huo huo, ikiwa faili za mradi zimebadilika na kukusanywa tena, Webpack kiotomatiki itabadilisha hashi na kuingiza mabadiliko kwenye faili ya mtindo. Ikiwa faili za mradi hazijabadilika, basi hashi haitabadilika.

Tengeneza vingingo vitatu vya kuingia. Fanya ivikusanywe kwenye mifuko tofauti yenye majina yaliyo na hashi.

Timiza kukusanya mradi. Hakikisha kwamba kwenye faili ya mtango mifuko yote imeunganishwa.

Badilisha maandishi kwenye faili asilia ya moja ya vingingo vya kuingia. Timiza kukusanya. Angalia kwamba hashi ya mfuko wa kuingia huko imebadilika, lakini ya mifuko mingine - haijabadilika.