Nguyên lý hoạt động của bộ đóng gói Webpack trong JavaScript

Thông thường, khi phát triển, chúng ta có nhiều file JavaScript chứa các đoạn mã khác nhau. Đây có thể là các phần mã của chúng ta, hoặc các thư viện bên thứ ba. Kết quả là mỗi file như vậy chúng ta phải kết nối đến file HTML qua thẻ script.

Điều này không tốt lắm, vì nhiều file được kết nối làm chậm tốc độ tải trang web. Vì vậy để tăng tốc tải cần phải đặt toàn bộ mã vào một file.

Tuy nhiên, phát triển mã trong một file chung cũng không thuận tiện. Vì vậy hiện nay phương pháp sau đây được thực hành: mã được phát triển trong các file riêng biệt, sau đó với sự trợ giúp của bộ đóng gói được tập hợp thành một file chung, file này được kết nối đến file HTML.

Các file riêng biệt đại diện cho các ES module. Các module này được kết nối đến các file khác qua lệnh import.

Thông thường tạo ra một file chính, mà các file còn lại được kết nối đến. File này được gọi là điểm vào.

Bộ đóng gói đi vào điểm vào, xem các module nào được kết nối đến nó. Đến các module này cũng có thể có các module khác được kết nối. Bộ đóng gói đi theo tất cả các kết nối và thu thập toàn bộ mã vào một file. File này được gọi là bundle.

Thông thường, mã mà lập trình viên viết, được đặt trong thư mục src, còn mã đã đóng gói được đặt vào thư mục dist.

Bộ đóng gói cũng cho phép điều chỉnh chế độ đóng gói. Chế độ 'development' dành cho quá trình phát triển. Nó đóng gói mã theo cách thuận tiện cho phát triển. Chế độ 'production' dành cho mã cuối cùng, sẽ được đưa vào hoạt động. Ở chế độ này mã sẽ được minify, để giảm kích thước của nó và tăng tốc độ tải.