Skriptide pakid räsi võtmega maketi sees Webpackis

Tavaliselt soovime projekti koostamisel, et pakkide nimed sisaldaksid räsivõtmeid. Meil on seda vaja selleks, et lahendada failide brauseri poolt vahemällu salvestamise probleem.

Seetõttu on mugav, et Webpack automaatselt ühendab pakid nimedega, mis sisaldavad räsivõtmeid. Kontrollime seda. Olgem meil järgmised seaded:

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

Pärast koostamist ühendatakse maketi failiga meie pakid räsi võtmetega:

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

Samal ajal, kui projekti failid muudetakse ja uuesti koostatakse, muudab Webpack automaatselt räsivõtmeid ja teeb muudatusi maketi faili. Kui projekti failid ei muutunud, siis räsi ei muutu ka.

Loo kolm sisendpunkti. Seadista need nii, et need koostatakse eraldi pakkidesse nimedega, mis sisaldavad räsivõtmeid.

Teosta projekti koostamine. Veendu, et maketi failis on kõik pakid ühendatud.

Muuda teksti ühes sisendpunkti lähtefailis. Teosta uuesti koostamine. Kontrolli, et selle sisendpunkti paki räsi muutub, teiste pakkide oma aga mitte.