Bundlet e skripteve me hash në layout në Webpack
Zakonisht gjatë ndërtimit të projektit ne dëshirojmë që emrat e bundle-t të përmbajnë hash. Na duhet kjo për të zgjidhur problemin me caching-un e skedarëve në shfletues.
Prandaj është e përshtatshme fakti që Webpack automatikisht do të lidhë bundle-t me emra që përmbajnë hash. Le ta kontrollojmë. Le të supozojmë se kemi konfigurimet e mëposhtme:
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(),
],
};
Pas ndërtimit, në skedarin e layout-it do të jenë të lidhura bundle-t tona me hash:
<!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>
Në këtë rast, kur ndryshohen skedarët e projektit dhe rindërtohet, Webpack automatikisht do të ndryshojë hash-et dhe do të bëjë ndryshime në skedarin e layout-it. Nëse skedarët e projektit nuk ndryshuan, atëherë hash-i nuk do të ndryshojë.
Krijoni tri pika hyrëse. Bëni që ato të mblidhen në bundle të veçantë me emra që përmbajnë hash.
Kryeni ndërtimin e projektit. Sigurohuni që në skedarin e layout-it janë të lidhur të gjitha bundle-t.
Ndryshoni tekstin në skedarin burimor të një prej pikave hyrëse. Kryeni ndërtimin. Kontrolloni që hash-i i bundle-it të asaj pike të ndryshojë, por i bundle-ve të tjerë - jo.
