Jaka jest kolejność ładowania dla webpacka?

Kiedy mam konfigurację modułu ładującego z wieloma testami pasującymi do pliku, spodziewałbym się, że zostanie użyty tylko pierwszy pasujący program ładujący, ale wydaje się, że tak nie jest.

Próbowałem odczytać źródło, ale nawet kiedy znalazłem bit, który moim zdaniem implementuje ładowanie, nie mogę zrozumieć, jak się zachowuje.

Dokumentacja również nie wspomina, jak ta sytuacja powinna się zachowywać.

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

i

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

wydają się być równe. Pod względem funkcji jest to to samo, co style(css(file))(dzięki Miguel).

Zauważ, że wewnątrz loaderssą oceniane od prawej do lewej .

Oficjalna dokumentacja naprawdę dobrze to wyjaśnia. Niestety wszystkie niezbędne informacje są rozsiane w różnych sekcjach dokumentacji. Pozwól, że podsumuję wszystko, co musisz wiedzieć.

1.

Upewnij się, że są we właściwej kolejności (od dołu do góry).

2.

Są to funkcje, które pobierają źródło pliku zasobów jako parametr i zwracają nowe źródło.

3.

Ładowarki można łączyć łańcuchami. Są one stosowane w potoku do zasobu. Oczekuje się, że końcowy program ładujący zwróci JavaScript; każdy inny program ładujący może zwrócić źródło w dowolnym formacie, które jest przekazywane do następnego programu ładującego.

Więc...

Jeśli masz somefile.cssi jesteś przepuszczenie go przez loaderOne, loaderTwo, loaderThreeto zachowuje się jak zwykły funkcji przykuty.

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

znaczy dokładnie to samo, co ...

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

Jeśli pochodzisz z chrząknięcia || świat łyków jest zagmatwany. Po prostu przeczytaj kolejność ładowarek od prawej do lewej.

Ta odpowiedź była dla mnie pomocna, ale chciałbym uzupełnić inną kwestią, która ma wpływ na kolejność modułu ładującego, a mianowicie nazwę ładowania! podejście.

Powiedzmy, że masz url-loaderw swojej konfiguracji plik o wyższym priorytecie niż file-loaderi chcesz zaimportować ścieżkę obrazu z tym drugim. Nie robienie niczego spowoduje zaimportowanie pliku przez url-loader(co spowoduje utworzenie zakodowanego adresu URL danych).

Przedrostek importu znakiem file-loader!skierowałby import do tego programu ładującego.

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