Nguyên lý hoạt động của Webpack

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. Đó 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 với file HTML qua thẻ script.

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

Tuy nhiên, việc phát triển mã trong một file chung cũng không thuận tiện. Do đó hiện nay thực hành cách tiếp cận sau: mã được phát triển trong các file riêng biệt, sau đó sử dụng công cụ đóng gói để tập hợp thành một file chung, và file này được kết nối với file HTML.

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

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

Công cụ đóng gói đi vào điểm vào, xem những module nào được kết nối với nó. Các module này cũng có thể được kết nối với các module khác. Công cụ đóng gói đi theo tất cả các kết nối và tập hợp toàn bộ mã thành 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.