Bundles de scripts con hash en el layout en Webpack
Generalmente, cuando construimos un proyecto, queremos que los nombres de los bundles contengan hashes. Esto es necesario para resolver el problema del almacenamiento en caché de archivos por parte del navegador.
Por lo tanto, es conveniente que Webpack automáticamente conecte los bundles con nombres que contienen hashes. Comprobémoslo. Supongamos que tenemos la siguiente configuración:
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(),
],
};
Después de la construcción, nuestro archivo de layout tendrá conectados nuestros bundles con hashes:
<!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 mismo tiempo, cuando se modifican los archivos del proyecto y se reconstruye, Webpack automáticamente cambiará los hashes y hará los cambios en el archivo de layout. Si los archivos del proyecto no han cambiado, el hash tampoco cambiará.
Cree tres puntos de entrada. Configúrelo para que se construyan en bundles separados con nombres que contengan hashes.
Ejecute la construcción del proyecto. Verifique que en el archivo de layout estén conectados todos los bundles.
Modifique el texto en el archivo fuente de uno de los puntos de entrada. Ejecute la construcción. Compruebe que el hash del bundle de ese punto ha cambiado, pero el de los demás bundles no.
