Бандли на скрипти со хеш во макетот во Webpack
Во принцип, при собирање на проектот, ние сакаме имињата на бандловите да содржат хеш. Ова ни е потребно за да ја решиме проблемот со кеширање на датотеките од прелистувачот.
Затоа е погодно тоа што Webpack автоматски ќе ги поврзува бандловите со имиња кои содржат хеш. Ајде да провериме. Нека имаме следниве поставки:
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(),
],
};
По собирањето, кон датотеката на макетот ќе бидат поврзани нашите бандлови со хешови:
<!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>
Притоа, при промена на датотеките на проектот и повторно собирање, Webpack автоматски ќе ги менува хешовите и ќе внесува промени во датотеката на макетот. Доколку датотеките на проектот не се променети, тогаш хешот нема да се менува.
Направете три влезни точки. Направете така што тие да се собираат во посебни бандлови со имиња кои содржат хешови.
Извршете собирање на проектот. Проверете, дали во датотеката на макетот се поврзани сите бандлови.
Сменете текст во изворната датотека на една од влезните точки. Извршете собирање. Проверете дали хешот на бандлот од таа точка ќе се смени, а кај останатите бандлови - не.
