Thứ tự trình tải cho webpack là gì?

Khi tôi có cấu hình trình tải với nhiều thử nghiệm khớp với một tệp, tôi chỉ mong đợi trình tải phù hợp đầu tiên được sử dụng nhưng dường như không phải vậy.

Tôi đã thử đọc mã nguồn nhưng ngay cả khi tôi tìm thấy bit mà tôi nghĩ rằng thực hiện tải, tôi không thể hiểu nó hoạt động như thế nào.

Tài liệu cũng không đề cập đến tình huống đó sẽ hoạt động như thế nào.

{
    test: /\.css$/,
    loaders: ['style'],
},
{
    test: /\.css$/,
    loaders: ['css'],
},

và

{
    test: /\.css$/,
    loaders: ['style', 'css'],
},

dường như ngang nhau. Về chức năng, điều này giống như style(css(file))(cảm ơn Miguel).

Lưu ý rằng bên trong loaderschúng được đánh giá từ phải sang trái .

Tài liệu chính thức giải thích nó thực sự tốt. Thật không may, tất cả các thông tin cần thiết đều nằm trong các phần khác nhau của tài liệu. Hãy để tôi tóm tắt tất cả những gì bạn cần biết.

1.

Đảm bảo rằng chúng theo đúng thứ tự (từ dưới lên trên).

2.

Chúng là các hàm lấy nguồn của một tệp tài nguyên làm tham số và trả về nguồn mới.

3.

Máy xúc lật có thể bị xích. Chúng được áp dụng trong một đường dẫn đến tài nguyên. Trình tải cuối cùng dự kiến ​​sẽ trả về JavaScript; mỗi bộ tải khác có thể trả về nguồn ở định dạng tùy ý, được chuyển cho bộ tải tiếp theo.

Vì thế...

Nếu bạn có somefile.cssvà bạn đang đi qua nó qua loaderOne, loaderTwo, loaderThreelà cư xử như một hàm xích thông thường.

{
    test: /\.css$/,
    loaders: ['loaderOne', 'loaderTwo', 'loaderThree']
}

có nghĩa là hoàn toàn giống với ...

loaderOne(loaderTwo(loaderThree(somefile.css)))

Nếu bạn đến từ grunt || thế giới nuốt nó là khó hiểu. Chỉ cần đọc thứ tự bộ tải từ phải sang trái.

Câu trả lời này hữu ích đối với tôi nhưng tôi muốn bổ sung bằng một điểm khác ảnh hưởng đến thứ tự bộ tải, đó là tên bộ tải! tiếp cận.

Giả sử bạn có một url-loadertrong cấu hình của mình với mức độ ưu tiên cao hơn file-loadervà bạn muốn nhập đường dẫn hình ảnh với đường dẫn sau. Không làm gì sẽ nhập tệp qua url-loader(tạo ra một url dữ liệu được mã hóa).

Đặt tiền tố nhập với file-loader!sẽ chuyển trực tiếp quá trình nhập tới trình nạp đó.

import image from 'file-loader!./my-img.png'