ใช้ ปลั๊กอิน HTML-WEBPACK-PLUGIN เพื่อเริ่มหน้าเพื่อ นำหน้า HTML ลงในหน่วยความจำ เพื่อปรับปรุงความเร็วในการโหลดของหน้าเว็บ
นอกจากนี้ยังสามารถ ตั้งค่าเส้นทางที่แนะนำโดยไฟล์ JS ในหน้า index.html โดยอัตโนมัติ
ข้อกำหนดเบื้องต้นสำหรับการใช้งาน: ติดตั้ง webpack ในโครงการ:
ขั้นตอนที่ 1 : ป้อนcnpm i html-webpack-plugin -D ติดตั้งปลั๊กอิน HTML-WEBPACK-PLUGIN เพื่อการพัฒนาการพึ่งพาการพัฒนาฟังก์ชั่นของมันคือการสร้างหน้า HTML ที่สอดคล้องกันในหน่วยความจำตามหน้าแม่แบบที่ระบุ
ขั้นตอนที่ 2 : แก้ไขไฟล์การกำหนดค่าของ webpack.config.js หลังจากติดตั้งปลั๊กอินนำเข้า ปลั๊กอิน HTML-WEBPACK-PLUGIN ในไฟล์กำหนดค่าและ กำหนดค่า พา ธ หน้าเทมเพลตและชื่อหน้าสร้าง
const path = ต้องการ (พา ธ ) // นำเข้า html-webpack-pluginconst htmlwebpackplugin = ต้องการ (html-webpack-plugin) โมดูล exports = {entry: path.join (__ dirname,./src/main.js) ชื่อไฟล์: bundle.js}, // กำหนดค่าปลั๊กอิน: [// สร้าง html-webpack-plugin ปลั๊กอินใหม่ htmlwebpackplugin ({// // ตั้งค่าพารามิเตอร์เทมเพลต: path.join (__ dirname,./src/index.html) // ระบุชื่อของหน้าสร้างในหน่วยความจำ})]}หลังจากใช้ปลั๊กอิน html-webpack-plugin ไม่จำเป็นต้องประมวลผลเส้นทางอ้างอิงของ Bundle.js ด้วยตนเอง
เนื่องจาก เส้นทางที่ถูกต้องไปยัง Bundle.js ได้รับการแนะนำโดยอัตโนมัติ ในหน้า HTML ที่สร้างขึ้นในหน่วยความจำ
สรุป - ปลั๊กอินทำอะไร:1. สร้างหน้าในหน่วยความจำโดยอัตโนมัติตามหน้าระบุ
2. แนะนำ Bundle Packaged โดยอัตโนมัติในหน้า
นี่คือจุดสิ้นสุดของบทความนี้เกี่ยวกับการวิเคราะห์สั้น ๆ ของการสอนเกี่ยวกับการใช้ปลั๊กอิน HTML webpack สำหรับเนื้อหาปลั๊กอิน HTML Webpack ที่เกี่ยวข้องเพิ่มเติมโปรดค้นหาบทความก่อนหน้าจาก Wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!