Какой порядок загрузчика для webpack?

Когда у меня есть конфигурация загрузчика с несколькими тестами, соответствующими файлу, я ожидаю, что будет использоваться только первый соответствующий загрузчик, но, похоже, это не так.

Я попытался прочитать исходный код, но даже когда я нашел бит, который, как мне кажется, реализует загрузку, я не могу понять, как он себя ведет.

В документации также не упоминается, как должна вести себя эта ситуация.

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

а также

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

кажутся равными. Функционально это то же самое, что и style(css(file))(спасибо Мигелю).

Обратите внимание, что внутри loadersони оцениваются справа налево .

Официальная документация очень хорошо это объясняет. К сожалению, вся необходимая информация разбросана по разным разделам документации. Позвольте мне подытожить все, что вам нужно знать.

1.

Убедитесь, что они расположены в правильном порядке (снизу вверх).

2.

Это функции, которые принимают в качестве параметра источник файла ресурсов и возвращают новый источник.

3.

Погрузчики можно приковывать цепями. Они применяются в конвейере к ресурсу. Ожидается, что последний загрузчик вернет JavaScript; каждый другой загрузчик может возвращать исходный код в произвольном формате, который передается следующему загрузчику.

Так...

Если у вас есть somefile.cssи вы проходите через loaderOne, loaderTwo, loaderThreeэто ведет себя как обычная цепь , функция.

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

означает в точности то же, что и ...

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

Если вы исходите из ворчания || мир глотка сбивает с толку. Просто прочтите порядок загрузчиков справа налево.

Этот ответ был для меня полезен, но я хотел бы дополнить еще одним моментом, который влияет на порядок загрузчика, а именно имя загрузки! подход.

Допустим, у вас есть url-loaderв вашей конфигурации более высокий приоритет, чем, file-loaderи вы хотите импортировать путь изображения с последним. Если ничего не делать, файл будет импортирован через url-loader(что создает закодированный URL-адрес данных).

Приставка к импорту с помощью file-loader!будет направлять импорт в этот загрузчик.

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