Bundles tập lệnh có mã hash trong bố cục với Webpack
Thông thường khi build dự án, chúng ta muốn tên của các bundles chứa mã hash. Điều này cần thiết để giải quyết vấn đề cache file bởi trình duyệt.
Vì vậy, thật tiện lợi khi Webpack tự động kết nối các bundles với tên chứa mã hash. Hãy kiểm tra. Giả sử chúng ta có cấu hình sau:
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(),
],
};
Sau khi build, các bundles có mã hash của chúng ta sẽ được kết nối đến file bố cục:
<!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>
Đồng thời, khi các file dự án thay đổi và rebuild, Webpack sẽ tự động thay đổi mã hash và cập nhật vào file bố cục. Nếu các file dự án không thay đổi, thì mã hash cũng sẽ không thay đổi.
Tạo ba điểm vào. Cấu hình sao cho chúng được build thành các bundles riêng biệt với tên chứa mã hash.
Thực hiện build dự án. Đảm bảo rằng tất cả các bundles đều được kết nối trong file bố cục.
Thay đổi nội dung trong file nguồn của một trong các điểm vào. Thực hiện build. Kiểm tra xem mã hash của bundle đó sẽ thay đổi, còn của các bundles khác - thì không.
