Συσκευασίες Script με Hash στο Layout στο Webpack
Συνήθως κατά την οικοδόμηση του project θέλουμε τα ονόματα των συσκευασιών να περιέχουν hash. Αυτό το χρειαζόμαστε για να λύσουμε το πρόβλημα της προσωρινής αποθήκευσης αρχείων από το πρόγραμμα περιήγησης.
Επομένως, είναι βολικό που το Webpack αυτόματα θα συνδέει συσκευασίες με ονόματα που περιέχουν hash. Ας ελέγξουμε. Ας υποθέσουμε ότι έχουμε τις ακόλουθες ρυθμίσεις:
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(),
],
};
Μετά την οικοδόμηση, στο αρχείο layout θα συνδεθούν οι συσκευασίες μας με τα 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>
Επιπλέον, όταν αλλάζουν τα αρχεία του project και γίνεται επαναοικοδόμηση, το Webpack αυτόματα θα αλλάζει τα hashes και θα εισάγει αλλαγές στο αρχείο layout. Εάν τα αρχεία του project δεν άλλαξαν, τότε το hash δεν θα αλλάξει.
Δημιουργήστε τρία σημεία εισόδου. Ρυθμίστε τα ώστε να οικοδομούνται σε ξεχωριστές συσκευασίες με ονόματα που περιέχουν hashes.
Εκτελέστε οικοδόμηση του project. Βεβαιωθείτε ότι στο αρχείο layout είναι συνδεδεμένες όλες οι συσκευασίες.
Αλλάξτε το κείμενο στο αρχικό αρχείο ενός από τα σημεία εισόδου. Εκτελέστε οικοδόμηση. Ελέγξτε ότι το hash της συσκευασίας αυτού του σημείου θα αλλάξει, ενώ των υπολοίπων συσκευασιών - όχι.
