Khái niệm bundle file

Câu hỏi này tương đối thú vị đó em. Để hiểu được tại sao lại phải dùng webpack thì chúng ta phải nhìn lại 1 xíu các web thông thường, nó sẽ kiểu:

<script src="/js/main.js"></script>
<script src="/js/hello.js"></script>
<script src="/js/world.js"></script>

Như vậy thì điều gì sẽ xảy ra khi các biến hay các hàm ở trong các file bị trùng nhau? Có thể nó sẽ override hoặc bị báo lỗi tuỳ vào trình thông dịch javascript (tuỳ vào browser). Vậy nên webpack đã ra đời để giải quyết việc này, nó sẽ đóng gói các file thành các module riêng kiểu này:

var hello = require('hello')
var world = require('world')
var main = require('main')

Vậy là mọi vấn đề đã được giả quyết. Tuy nhiên nhược điểm của phương pháp này là khi code với dự án web thông thường thì sẽ hơi mất công khi mỗi lần chỉnh sửa lại file build lại file bundle đang import ở html kiểu:

<script src="/js/all.min.js"></script>

Và việc debug cũng có phần nào khó khăn khi code bị đóng gói chung vào 1 file bundle nên cũng hơi khó tra cứu.

Thêm 1 điểm nữa là các javascript thông thường giờ sẽ phải chuyển qua dạng viết module để sử dụng được phần exports.

Quay trở lại bundle là gì, thì nó là kết quả của việc đóng gói các module bằng webpack nhé.