Scriptbundels met hash in lay-out in Webpack
Over het algemeen willen we bij het bouwen van een project dat de namen van de bundels hashes bevatten. Dit hebben we nodig om het probleem met het cachen van bestanden door de browser op te lossen.
Het is daarom handig dat Webpack automatisch bundels met namen die hashes bevatten, zal verbinden. Laten we het testen. Stel dat we de volgende instellingen hebben:
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(),
],
};
Na de build zullen onze bundels met hashes verbonden zijn met het lay-outbestand:
<!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>
Tegelijkertijd zal Webpack, bij het wijzigen van projectbestanden en het opnieuw bouwen, automatisch de hashes wijzigen en aanpassingen aanbrengen in het lay-outbestand. Als de projectbestanden niet zijn gewijzigd, dan zal de hash ook niet veranderen.
Maak drie entry points. Zorg ervoor dat ze in aparte bundels worden gebouwd met namen die hashes bevatten.
Voer de projectbuild uit. Verzeker je ervan dat in het lay-outbestand alle bundels zijn verbonden.
Wijzig de tekst in het bronbestand van een van de entry points. Voer de build uit. Controleer of de hash van de bundel van dat entry point verandert, en die van de andere bundels niet.
