Webpack 5 - #4 Loaders

Loaders là sự biến đổi được áp dụng trong source code của một mô đun. Chúng cho phép bạn xử lý file trước khi bạn import hoặc load chúng. Do đó, loaders đại loại giống như "tasks" trong những build tools và cung cấp một cách mạnh mẽ để xử lý các bước xây dựng giao diện người dùng (front-end). Loaders có thể chuyển đổi file từ một ngôn ngữ khác (như TypeScript) thành Javascript hoặc load những inline image như data URLs. Loaders cũng cho phép bạn làm những thứ như import file CSS trực tiếp từ mô đun Javascript của bạn!

Ví dụ

Ví dụ, bạn có thể sử dụng loaders để nói webpack load một file CSS hoặc chuyển từ TypeScript thành JavaScript. Để làm việc này, bạn sẽ bắt đầu bằng việc cài đặt loaders bạn cần:

Và sau đó hướng dẫn webpack sử dụng css-loader cho file .css và ts-loader cho những file có đuôi .ts:

webpack.config.js

Sử dụng Loaders

Có hai cái để sử dụng loader trong ứng dụng của bạn:

• Configuration (khuyên dùng): Xác định chúng trong file webpack.config.js.
• Inline: Xác định chúng trực tiếp trong câu lệnh import

Cấu hình

module.rules cho phép bạn xác định một vài loaders trong cấu hình webpack của bạn. Đây là một cách ngắn gọn để hiển thị loaders, và giúp bạn duy trì clean code. Nó cũng cho bạn một cái nhìn tổng quan từng loader tương ứng. 

Loaders được đánh giá/thực thi từ phải qua trái (hoặc từ dưới lên trên). Trong ví dụ dưới đây thực thi bắt đầu với sass-loader, tiếp tục với css-loader và cuối cùng kết thúc với style-loader. Xem thêm Loader Features để có thêm nhiều thông tin về thứ tự các loader nhé

Inline

Có thể xác định loader trong câu lệnh import bằng một câu lệnh import, hoặc bất kỳ phương thức import nào. Tách các loaders từ resource bằng dấu !. Mỗi phần được phân giải tương đối đến thư mục hiện tại.

Có thể đè lên bất kỳ loaders nào, preLoaders và postLoaders từ configuration bằng tiền tố câu import:

• Tiền tố ! sẽ vô hiệu tất cả cấu hình loaders thông thường.

• Tiền tố !! sẽ vô hiệu tất cả cấu hình loader (preLoaders, loaders, postLoaders)

• Tiền tố -! sẽ vô hiệu tất cả cấu hình preLoaders và loader nhưng không vô hiệu postLoaders

Lựa chọn có thể được truyền với một tham số query, ví dụ ?key=value&foo=bar, hoặc một đối tượng JSON, ví dụ: ?{"key":"value","foo":"bar"}

💡Mẹo: Sử dụng module.rules bất kỳ lúc nào có thể, bởi vì nó sẽ giảm bớt chỗ phải ghi trong source code của bạn và cho phép bạn debug hoặc đặt một loader nhanh hơn nếu có gì đó khó kiểm soát.

Tính năng của Loader

• Loader có thể được xích với nhau. Mỗi loader trong dây xích đó áp dụng việc chuyển đổi đến resource được xử lý. Một dây xích được thực thi theo thứ tự ngược. Loader đầu tiên truyền kết quả của nó (resource đã được chuyển đổi rồi á) đến cái kế tiếp và kế tiếp. Cuối cùng, webpack mong chờ Javascript được trả về ở loader cuối cùng trong chuỗi.
• Loader có thể là đồng bộ hoặc bất đồng bộ.
• Loaders chạy trong Node.js và có thể làm mọi thứ mà nó có thể ở đó.
• Loaders có thể được cấu hình với đối tượng option (sử dụng tham số query để gán giá trị cho các sự lựa chọn vẫn được hỗ trợ nhưng nó đã không được dùng nữa)
• Bình thường mô đun có thể export một loader thông thường đến main bằng package.json với trường loader.
• Plugins có thể cho loaders thêm nhiều tính năng.
• Loaders có thể cung cấp các file bổ sung tuỳ ý.

Loaders cung cấp một cách để tuỳ chỉnh output bằng chức năng xử lý trước của chúng. Người dùng bây giờ có thể linh hoạt include logic chi tiết như được nén, đóng gói, dịch ngôn ngữ và hơn thế nữa.

Giải quyết Loaders

Loaders tuân thủ theo module resolution. Trong nhiều trường hợp nó sẽ được load từ module path (như npm installm node_modules)

Một mô đun loader được mong đợi để export một chức năng và được viết trong Node.js tương thích Javascript. Chúng thường được sử dụng với npm, nhưng bạn cũng có thể tuỷ chỉnh các loaders với các file trong ứng dụng của bạn. Bằng quy tắc đặt tên, loaders thường được sử dụng với tên là xxx-loader (ví dụ json-loader). Đọc thêm ở Writing a Loader để có thêm nhiều thông tin.