ไฟล์เลย์เอาต์ของคุณเองใน Webpack

ในทางปฏิบัติ เรามักจะมี HTML เลย์เอาต์เว็บไซต์ของเราเองอยู่แล้ว ในกรณีนี้ เราต้องการให้ Webpack ใช้เลย์เอาต์ของเรา แทนที่จะสร้างขึ้นมาใหม่ มาดู วิธีการทำกัน

สมมติว่าเรามีเลย์เอาต์ดังต่อไปนี้:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>เลย์เอาต์ของฉัน</title>
	</head>
	<body>
		
	</body>
</html>

บังคับให้ Webpack ใช้เลย์เอาต์ของเรา เพื่อทำสิ่งนี้ ให้ระบุใน การตั้งค่าต่อไปนี้:

export default {
	entry: './src/index.js',
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),
	],
};

ผลลัพธ์หลังจากการบิลด์ในโฟลเดอร์ dist จะเป็นเลย์เอาต์ของเราและในนั้น บันเดิลทั้งหมดจะถูกเชื่อมต่อ โดยอัตโนมัติ:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>เลย์เอาต์ของฉัน</title>
		
		<script defer src="main.js"></script>
	</head>
	<body>
		
	</body>
</html>

สร้างเลย์เอาต์ของคุณเอง ตั้งค่า Webpack เพื่อให้ใช้เลย์เอาต์ของคุณ