Balíčky skriptů s hashem v layoutu ve Webpacku
Při sestavování projektu obecně chceme, aby názvy balíčků obsahovaly hash. Potřebujeme to proto, abychom vyřešili problém s ukládáním souborů do mezipaměti prohlížečem.
Je tedy výhodné, že Webpack automaticky připojí balíčky s názvy, obsahujícími hash. Ověřme to. Předpokládejme, že máme následující nastavení:
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(),
],
};
Po sestavení budou k souboru layoutu připojeny naše balíčky s hashi:
<!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>
Při změně souborů projektu a novém sestavení Webpack automaticky změní hashe a provede změny v souboru layoutu. Pokud se soubory projektu nezměnily, hash se také nezmění.
Vytvořte tři vstupní body. Zařiďte, aby se sestavovaly do samostatných balíčků s názvy obsahujícími hashe.
Proveďte sestavení projektu. Ověřte, že v souboru layoutu jsou připojeny všechny balíčky.
Změňte text ve zdrojovém souboru jednoho ze vstupních bodů. Proveďte sestavení. Zkontrolujte, že se hash balíčku tohoto bodu změní, ale u ostatních balíčků zůstane stejný.
