Bundles de scripts avec hachage dans le layout avec Webpack
En règle générale, lors de la construction du projet, nous souhaitons que les noms des bundles contiennent un hachage. Nous en avons besoin pour résoudre le problème de mise en cache des fichiers par le navigateur.
Il est donc pratique que Webpack connecte automatiquement les bundles avec des noms contenant des hachages. Vérifions. Supposons que nous ayons les paramètres suivants :
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(),
],
};
Après la construction, nos bundles avec des hachages seront connectés au fichier de layout :
<!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>
De plus, lorsque les fichiers du projet sont modifiés et reconstruits, Webpack modifiera automatiquement les hachages et apportera des modifications au fichier de layout. Si les fichiers du projet n'ont pas été modifiés, le hachage ne changera pas non plus.
Créez trois points d'entrée. Faites en sorte qu'ils soient compilés dans des bundles séparés avec des noms contenant des hachages.
Effectuez la construction du projet. Assurez-vous que tous les bundles sont connectés dans le fichier de layout.
Modifiez le texte dans le fichier source d'un des points d'entrée. Effectuez la construction. Vérifiez que le hachage du bundle de ce point d'entrée change, mais que ceux des autres bundles ne changent pas.
