Когда у меня есть конфигурация загрузчика с несколькими тестами, соответствующими файлу, я бы ожидал, что будет использоваться только первый соответствующий загрузчик, но это, похоже, не так.
Я пробовал читать источник, но даже когда я нашел бит, который, как я думаю, реализует загрузку, я не могу понять, как он себя ведет.
В документации не упоминается, как должна себя вести эта ситуация.
{
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)))
Если вы пришли от хрюка || Мир gulp запутан. Просто прочитайте загрузчики справа налево.
Этот ответ был полезен для меня, но я хотел бы добавить еще один момент, который влияет на порядок загрузчика, который является loadername!.
Скажем, у вас есть url-loader в вашей конфигурации с более высоким приоритетом, чем file-loader, и вы хотите импортировать путь изображения с последним. Не предпринимая ничего, вы импортируете файл через url-loader (который создает кодированный URL-адрес).
Префикс импорта с помощью file-loader! будет направлять импорт этому загрузчику.
import image from 'file-loader!./my-img.png'