Skriptbundlar med hash i layouten i Webpack
Vanligtvis när vi bygger ett projekt vill vi att bundlarnas namn ska innehålla hash. Vi behöver detta för att lösa problemet med webbläsarcachelagring av filer.
Så det är bekvämt att Webpack automatiskt kommer att koppla bundlar med namn som innehåller hash. Låt oss kolla. Låt oss ha följande inställningar:
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(),
],
};
Efter bygget kommer våra bundlar med hash att kopplas till layoutfilen:
<!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>
Samtidigt, när projektfiler ändras och ombyggnad sker, kommer Webpack automatiskt att ändra hasharna och göra ändringar i layoutfilen. Om projektfilerna inte har ändrats, kommer hash inte att ändras.
Skapa tre ingångspunkter. Se till att de byggs i separata bundlar med namn som innehåller hash.
Utför projektbyggnad. Se till att alla bundlar är anslutna i layoutfilen.
Ändra texten i källfilen för en av ingångspunkterna. Utför bygget. Kontrollera att hash för den bundeln ändras, medan de andra bundlarnas hash förblir oförändrad.
