Webpack – thử debug một vài chiếc loader xem có gì nào

Tram Ho

Hi mọi người, đối với các frontend dev, chắc hẳn ai cũng biết và dùng qua webpack phải không nào. Ít nhất thì cũng đọc qua những đoạn config kiểu như thế này:

Tham khảo: https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js

Lúc đầu thì mình cũng chỉ xem. Về sau rãnh rỗi init source thì cũng copy + paste => app chạy ok. Sau đó ko quan tâm nữa

Tuy nhiên, hôm nay mình sẽ thử debug nhẹ một số loader xem chúng hoạt động như thế nào, và vì sao mỗi loại file khác nhau lại phải dùng các loader khác nhau nhé. Cụ thể, trong bài viết này mình sẽ thử debug file-loader, url-loader,… khác nhau nhé. OK, let’s go

Chuẩn bị

Đầu tiên mình sẽ tạo một vài files + folders như sau.

Mọi người nhớ thêm đoạn script build nha

Tiếp theo chúng ta sẽ vào tab debug => create file launch.json => chọnNode js để debug mấy file loader

Chúng ta sẽ update file launch.json lại như sau (ở đây mình dùng yarn)

Giờ thì debug thôi nào >>

Tham khảo nodejs debug: https://code.visualstudio.com/docs/nodejs/nodejs-debugging

file-loader

Đầu tiên, chúng ta sẽ thử với file-loader

Docs: https://webpack.js.org/loaders/file-loader/

The file-loader resolves import/require() on a file into a url and emits the file into the output directory.

Theo như docs thì file-loader có 2 công dụng đó là: emit (copy + hash file name,…) file từ folder src qua folder dist và trả về url của file để chúng ta import

Chúng ta sẽ thêm đoạn code sau vào file index.js để test

Để debug thì chúng ta sẽ vào node_modules tìm đến folder file-loader để đặt breakpoint nhé

Sau đó vào tab debug và run launch build

Mọi người có thể để ý file name đã được đổi lại theo cấu trúc mặc định là [contenthash].[ext] và sau đó được emit vào outputPath (hàm này được webpack cung cấp sẵn).

Đoạn return sẽ có đạng export default ${outputPath}, theo mình nghĩ thì webpack sẽ eval đoạn string này (đoán thôi :v)

Kết quả:

Tham khảo cấu trúc củaloader: https://webpack.js.org/contribute/writing-a-loader/

Tham khảo loaders interface: https://webpack.js.org/api/loaders/#thisemitfile

url-loader

Docs: https://webpack.js.org/loaders/url-loader/

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

url-loader cũng tương tự như file-loader, chỉ có thêm chức năng return base64 url thay vì url thông thường đối với các file kích thước nhỏ

Chúng ta sẽ update file webpack.config.js lại như sau

Và debug:

Mọi người có thể thấy rằng, vì file ảnh của mình nhỏ (<100kb) nên url-loader đã encode và trả về dạng base64url. Cool!!

Kết quả

raw-loader

Giờ mình sẽ thử thêm phát cuối rồi kết bài nhé >>

Giờ chúng ta sẽ import file hello.txt và dùng raw-loader để load content nhé

debug tương tự 2 loader trước, chúng ta sẽ thấy raw-loader sẽ trả về nội dung bên trong file thay vì url

Kết quả:

Ở đây, mình thêm white-space: pre-line để xuống dòng nhé.

OK. xong

Kết

Bài viết đến đây thôi. Hy vọng sẽ giúp mọi người hiểu thêm về webpack loader và cách mà chúng hoạt động. Chúc mọi người thành công

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo