หลักการทำงานของตัวรวม Webpack

โดยทั่วไปแล้ว ในระหว่างการพัฒนาเราจะมีไฟล์ JavaScript จำนวนมากที่ประกอบด้วยโค้ดส่วนต่างๆ ไฟล์เหล่านี้อาจเป็นส่วนของโค้ดเราเองหรือไลบรารีจากภายนอกก็ได้ ซึ่งหมายความว่าเราต้องเชื่อมต่อไฟล์แต่ละไฟล์เข้ากับไฟล์ HTML ผ่านแท็ก script

นี่ไม่ค่อยดีนัก เนื่องจากไฟล์ที่เชื่อมต่อจำนวนมากจะทำให้ความเร็วในการโหลดเว็บไซต์ช้าลง ดังนั้นเพื่อเร่งความเร็วในการโหลดจึงจำเป็นต้องรวมโค้ดทั้งหมดไว้ในไฟล์เดียว

อย่างไรก็ตาม การพัฒนาโค้ดในไฟล์รวมไฟล์เดียวก็ไม่สะดวกนักเช่นกัน ดังนั้นในปัจจุบันจึงมีการใช้แนวทางต่อไปนี้: โค้ดถูกพัฒนาในไฟล์แยกกัน จากนั้นจึงถูกรวมเป็นไฟล์ทั่วไปไฟล์เดียวโดยใช้ตัวรวม ซึ่งจะถูกเชื่อมต่อกับไฟล์ HTML

ไฟล์แยกต่างๆ คือ โมดูล ES โมดูลเหล่านี้จะถูกเชื่อมต่อกับไฟล์อื่นๆ ผ่านคำสั่ง import

โดยปกติแล้วเราจะสร้างไฟล์หลักบางไฟล์ ที่ไฟล์อื่นๆ จะถูกเชื่อมต่อเข้ามา ไฟล์นี้เรียกว่า จุดเข้า

ตัวรวมจะเข้าไปในจุดเข้า ตรวจดูว่าโมดูลใดถูกเชื่อมต่อกับมัน โมดูลเหล่านี้อาจถูกเชื่อมต่อกับโมดูลอื่นๆ อีกด้วย ตัวรวมจะติดตามการเชื่อมต่อทั้งหมดและรวบรวมโค้ดทั้งหมดเป็นไฟล์เดียว ไฟล์นี้เรียกว่า บันเดิล

โดยทั่วไป โค้ดที่โปรแกรมเมอร์เขียนจะอยู่ในโฟลเดอร์ src และโค้ดที่ถูกรวมแล้วจะถูกวางไว้ในโฟลเดอร์ dist