หลักการทำงานของ Webpack ใน JavaScript

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

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

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

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

โดยปกติแล้วจะมีการสร้างไฟล์หลักบางไฟล์ ซึ่งไฟล์อื่นๆ จะเชื่อมต่อเข้ามา ไฟล์นี้เรียกว่า จุดเข้า (entry point)

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

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

ตัวรวมยังช่วยให้สามารถควบคุมโหมดการรวมได้ โหมด 'development' มีไว้สำหรับกระบวนการพัฒนา โดยจะรวมโค้ดในรูปแบบที่สะดวกต่อการพัฒนา โหมด 'production' มีไว้สำหรับโค้ดสุดท้ายที่จะนำไปใช้งานจริง ในโหมดนี้โค้ดจะถูกย่อขนาดเพื่อลดขนาดและเพิ่มความเร็วในการโหลด