ჰეშით სკრიპტების ბანდლები ვებპეკის მაკეტში
როგორც წესი, პროექტის აწყობისას ჩვენ გვსურს, რომ ბანდლების სახელები შეიცავდეს ჰეშებს. ეს გვჭირდება იმისათვის, რომ მოვაგვაროთ ფაილების ბრაუზერის მიერ კეშირების პრობლემა.
ამიტომ მოსახერხებელია ის, რომ 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 ავტომატურად შეცვლის ჰეშებს და შეიტანს ცვლილებებს მაკეტის ფაილში. თუ პროექტის ფაილები არ შეცვლილა, მაშინ ჰეშიც არ შეიცვლება.
გაუკეთეთ სამი შესვლის წერტილი. გახადეთ ისე, რომ ისინი აიწყონ ცალკეულ ბანდლებად ჰეშების შემცველი სახელებით.
შეასრულეთ პროექტის აწყობა. დარწმუნდით, რომ მაკეტის ფაილში ყველა ბანდლია მიმაგრებული.
შეუცვალეთ ტექსტი ერთ-ერთი შესვლის წერტილის საწყის ფაილში. შეასრულეთ აწყობა. შეამოწმეთ, რომ ამ წერტილის ბანდლის ჰეში შეიცვლება, ხოლო დანარჩენი ბანდლების - არა.
