Webpack 5 - #2 ENTRY POINTS

Có nhiều cách để định nghĩa thuộc tính entry trong cấu hình webpack của ban. Chúng tôi sẽ chỉ bạn cách bạn có thể cấu hình thuộc tính entry, ngoài ra sẽ giải thích tại sao bạn nó hữu ích cho bạn.

Cú pháp ngắn gọn Single Entry (một entry)

Cách dùng: entry: string | [string]

webpack.config.js

Cú pháp này là cách viết tắt của dưới đây:

webpack.config.js

Bạn cũng có thể tryền một mảng của những file vào thuộc tính entry để tạo một cái được biết đến như là "multi-main entry". Điều này hữu ích khi bạn muốn thêm nhiều file phụ thuộc cùng nhau vào nối các phụ thuộc thành một "chunk" (đoạn)

webpack.config.js

Cú pháp Single Entry này là lựa chọn tốt nhất khi bạn đang làm cấu hình webpack nhanh cho ứng dụng hoặc công cụ với một đầu vào duy nhất (entry point) (ví dụ như thư viện). Tuy nhiên, nó không linh hoạt khi mở rộng cấu hình của bạn nếu dùng cú pháp này.

Cú pháp đối tượng

Cách dùng: entry: { <entryChunkName> string | [string] } | {}

webpack.config.js

Cú pháp đối tượng thì dài hơn. Tuy nhiên, đây là cách dễ mở rộng các entry trong ứng dụng của bạn nhất.

Mẹo "Mở rộng cấu hình webpack" là có thể sử dụng lại và kết hợp với những cấu hình ở những phần khác. Đây là một kỹ thuật phổ biến được sử dụng để tách các thứ ta quan tâm như là môi trường, mục tiêu (build target), và runtime. Sau đó, chúng được hợp nhất bằng công cục chuyên dụng như webpack-merge.

Mẹo Bạn có thể truyền một đối tượng rỗng vào entry khi bạn chỉ có duy nhất những entry được tạo bằng plugin.

Đối tượng EntryDescription

Một đối tượng với những mô tả entry. Bạn có thể sử dụng những thuộc tính sau:

• dependOn: là những entry mà entry hiện tại đang phụ thuộc vào. Nó phải được tải trước khi entry hiện tại này tải.
• filename: xác định tên của mỗi file đầu ra trên ổ đĩa
• import: Mô đun được tải khi startup.
• library: Xác định các tùy chọn thư viện để đóng gói thư viện từ entry hiện tại
• runtime: Tên của đoạn runtime. Khi gán, một đoạn runtime mới sẽ được tạo. Nó có thể được gán thành false để tránh một đoạn runtime mới kể từ webpack 5.43.0
• publicPath: Xác định địa chỉ URL cho những file đầu ra của entry hiện tại khi nó tham chiếu trong một trình duyệt. Xem thêm ở output.publicPath

webpack.config.js

runtime và dependOn không nên được sử dụng cùng nhau trong một single entry, vì vậy cấu hình dưới đây sẽ không đúng và sẽ quăng lỗi:

webpack.config.js

Đảm bảo runtime không phải trỏ đến điểm entry đã tồn tại, ví dụ cấu hình dưới đây sẽ quăng lỗi nè:

webpack.config.js

Ngoài ra dependOn không nên đi vòng tròn, giống như cấu hình dưới đây nè nó sẽ quăng lỗi:

webpack.config.js

Các tình huống

Dưới đây là một danh sách các cấu hình entry và các trường hợp trong thực tế.

Tách biệt các entry App (ứng dụng) và Vendor(người bán)

webpack.config.js

webpack.prod.js

webpack.dev.js

Cái này nó làm gì? Chúng ta đang nói webpack rằng chúng ta muốn tách thành nhiều entry (như ví dụ trên)

Tại sao? Vì như vậy bạn có thể import những thư viện hoặc file bắt buộc không được chỉnh sửa (ví dụ như Bootstrap, jQuery, hình ảnh, v..v..) trong vendor.js và chúng sẽ được đóng gói cùng nhau trong chunk của chính nó. Content hash (nội dung hàm băm) vẫn giữ nguyên nội dung, và cho phép trình duyệt lưu vào bộ nhớ cache riêng biệt, để giảm thời gian tải lại.

Mẹo Trong webpack phiên bản < 4 khá phổ biến khi thêm nhà cung cấp (vendor) như một entry tách biệt để biên dịch nó như một file riêng (kết hợp với CommonsChunkPlugin)

Điều này không được khuyến khích trong webpack 4. Thay vào đó, tùy chọn optimization.splitChunks giải quyết việc tách các nhà cung cấp và mô đun ứng dụng và tạo ra file tách biệt. Đừng tạo entry cho nhà cung cấp hoặc những thứ khác không phải là điểm bắt đầu thực thi.

Ứng dụng nhiều trang

webpack.dev.js

Cái này nó làm gì? Chúng ta đang nói webpack rằng chúng ta muốn tách 3 biểu đồ phụ thuộc (dependency graph) riêng biệt (như ví dụ trên)

Tại sao? Trong ứng dụng nhiều trang, server sẽ lấy một trang tài liệu HTML cho bạn. Trang sẽ tải lại tài liệu này và những tài nguyên được tải về lần nữa. Tuy nhiên, điều này sẽ cho chúng ta cơ hội độc nhất để làm nhiều thứ như là optimization.splitChunks để tạo những bunle được chia sẻ giữa các trang code với nhau trong ứng dụng. Ứng dụng nhiều trang tái sử dụng lại rất nhiều code/mô đun giữa các entry points có thể là một lợi ích rất lớn của kỹ thuật này, khi số lượng các entry points tăng lên

Mẹo Theo quy luật: Sử dụng chính xác entry point cho mỗi trang tài liệu HTML. Đọc thêm vấn đề được mô tả chi tiết ở đây.

Nguồn: Webpack 5 - Entry Points