บันเดิลสคริปต์ที่มีแฮชในเลย์เอาต์ใน Webpack

โดยทั่วไปเมื่อทำการ build โปรเจค เรา ต้องการให้ชื่อของบันเดิลมี แฮช เราต้องการสิ่งนี้เพื่อ แก้ไขปัญหาการแคชไฟล์ โดยเบราว์เซอร์

ดังนั้นจึงสะดวกที่ 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(),
	],
};

หลังจากการ build ไฟล์เลย์เอาต์จะ ถูกเชื่อมต่อกับบันเดิลของเราที่มีแฮช:

<!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>

ในขณะเดียวกัน เมื่อไฟล์โปรเจคมีการเปลี่ยนแปลง และทำการ build ใหม่ Webpack จะ เปลี่ยนแฮชและปรับเปลี่ยน ไฟล์เลย์เอาต์โดยอัตโนมัติ หากไฟล์โปรเจค ไม่มีการเปลี่ยนแปลง แฮชก็จะไม่ เปลี่ยนแปลงเช่นกัน

สร้างจุดเข้า (entry) สามจุด จัดการ ให้พวกมันถูก build เป็นบันเดิลแยกกัน โดยมีชื่อที่มีแฮช

ทำการ build โปรเจค ตรวจสอบให้แน่ใจ ว่าในไฟล์เลย์เอาต์ได้เชื่อมต่อบันเดิล ทั้งหมดแล้ว

เปลี่ยนข้อความในไฟล์ต้นทางของหนึ่ง ในจุดเข้า ทำการ build ตรวจสอบว่าแฮชของบันเดิลจาก จุดเข้านั้นเปลี่ยนไป ในขณะที่บันเดิลอื่น ๆ ไม่เปลี่ยนแปลง