Script-Bundles mit Hash im Layout in Webpack
In der Regel möchten wir bei der Projektbuild, dass die Bundle-Namen Hashes enthalten. Wir benötigen dies, um das Problem mit der Zwischenspeicherung von Dateien durch den Browser zu lösen.
Daher ist es praktisch, dass Webpack automatisch Bundles mit Namen einbindet, die Hashes enthalten. Lassen Sie uns das überprüfen. Nehmen wir an, wir haben die folgenden Einstellungen:
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(),
],
};
Nach dem Build werden unsere Bundles mit Hashes in die Layout-Datei eingebunden:
<!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>
Gleichzeitig wird Webpack bei Änderungen der Projektdateien und beim Neubuild automatisch die Hashes ändern und die Änderungen in die Layout-Datei übernehmen. Wenn sich die Projektdateien jedoch nicht geändert haben, ändert sich auch der Hash nicht.
Erstellen Sie drei Einstiegspunkte. Sorgen Sie dafür, dass sie in separate Bundles mit Namen gebuildet werden, die Hashes enthalten.
Führen Sie den Projektbuild aus. Vergewissern Sie sich, dass alle Bundles in die Layout-Datei eingebunden sind.
Ändern Sie den Text in der Quelldatei eines der Einstiegspunkte. Führen Sie den Build aus. Prüfen Sie, ob sich der Hash dieses Bundles ändert, der der anderen Bundles jedoch nicht.
