Bundles de scripts com hash no layout no Webpack
Geralmente, ao construir um projeto, queremos que os nomes dos bundles contenham hashes. Precisamos disso para resolver o problema de cache de arquivos pelo navegador.
Portanto, é conveniente que o Webpack automaticamente conecte os bundles com nomes que contenham hashes. Vamos verificar. Suponha que temos as seguintes configurações:
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(),
],
};
Após a build, nossos bundles com hashes serão conectados ao arquivo 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>
Além disso, quando os arquivos do projeto são alterados e uma rebuild é realizada, o Webpack automaticamente alterará os hashes e fará as mudanças no arquivo de layout. Se os arquivos do projeto não forem alterados, o hash não será modificado.
Crie três pontos de entrada. Configure para que eles sejam compilados em bundles separados com nomes contendo hashes.
Execute a build do projeto. Certifique-se de que todos os bundles estão conectados no arquivo de layout.
Altere o texto no arquivo de origem de um dos pontos de entrada. Execute a build. Verifique se o hash do bundle desse ponto de entrada mudou, mas os dos outros bundles não.
