Яке замовлення завантажувача для webpack?

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

Я спробував прочитати джерело, але навіть коли виявив біт, який, на мою думку, реалізує завантаження, я не можу зрозуміти, як він поводиться.

У документації також не згадується, як повинна поводитися ця ситуація.

webpack

— w00t
джерело

Відповіді:

108

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

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

здаються рівними. У функціональному відношенні це те саме, що style(css(file))(дякую Мігелю).

Зверніть увагу, що loadersвони обчислюються справа наліво .

— Юхо Вепсалайнен
джерело

Хм, не дуже корисна поведінка Я думаю: - / я б скоріше використовував preLoaders для такої поведінки ...

— w00t

Навантажувачі діють як функції, тому це справа наліво. Коли ви використовуєте це "style!css", уявіть їх як функції: style( css( file ) )... у цьому випадку cssце викликається першим.

— Мігель Анджело

Оцінюючи від ПРАВО до ЛІВО, я певний час боровся. @ miguel-angelo ваше style( css( file ) )пояснення для мене полегшення.

— Evi Song

ВПРАВО ВЛІВО, швидше за все, по суті означає ВНИЗ до ВЕРХУ, коли ми розглядаємо синтаксис Webpack 3 ... найнижче: спочатку саме внутрішня функція ...

— Frank Nocke

Я не знаю, коли це було додано, але нарешті є документація щодо замовлення: webpack.js.org/concepts/loaders/#loader-features Завантажувачі можуть бути ланцюгами. Кожен завантажувач ланцюга застосовує перетворення до оброблюваного ресурсу. Ланцюжок виконується у зворотному порядку. Перший завантажувач передає свій результат (ресурс із застосованими перетвореннями) наступному і так далі. Нарешті, webpack очікує, що JavaScript поверне останній завантажувач у ланцюжку.

— Ерік Маджерус

Офіційна документація це дуже добре пояснює. На жаль, вся необхідна інформація поширюється в різних розділах документації. Дозвольте мені підсумувати все, що вам потрібно знати.

Переконайтеся, що вони в правильному порядку (знизу вгору).

Вони є функціями, які приймають за параметр джерело файлу ресурсу і повертають нове джерело.

Навантажувачі можуть бути прикуті ланцюгом. Вони застосовуються в конвеєрі до ресурсу. Очікується, що кінцевий завантажувач поверне JavaScript; кожен інший завантажувач може повернути джерело у довільному форматі, який передається наступному завантажувачу.

Тому...

Якщо у вас є somefile.cssі ви проходите через loaderOne, loaderTwo, loaderThreeце веде себе як звичайна ланцюг , функція.

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

означає точно так само, як ...

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

Якщо ви йдете з бурчання || глоток світ це заплутано. Просто прочитайте замовлення навантажувачів справа наліво.

— Павел Гжибек
джерело

У мене є цей масив module.loaders, в якому порядку вони виконуються?

— Saras Arya

ЧОМУ ВОНЯТЬ ДНЕ ДО ВЕРХУ! ??

— light24bulbs

можливо, ви захочете змінити відповідь, вказавши, що "кінцевий завантажувач" у документації є loaderOneу вашому прикладі

— aaaaaa

@ light24bulbs, щоб ви могли додати додаткові навантажувачі з простими .pushправилами і не турбуватися про їх попереднє додавання.

— Сарке

Ця відповідь була для мене корисною, але я хотів би доповнити ще одним пунктом, який впливає на порядок завантажувачів, а саме - ім'я завантажувача! підхід.

Скажімо, url-loaderу вашій конфігурації є вищий пріоритет, ніж file-loaderви, і ви хочете імпортувати шлях до зображення за допомогою останнього. Якщо нічого не робити, файл буде імпортовано через url-loader(що створює закодовану URL-адресу даних).

Префікс імпорту з file-loader!спрямовує імпорт до цього завантажувача.

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

— Е. Сундін
джерело

Так, хоча я люблю уникати цього, оскільки тоді ви не можете вирішити під час збірки, файл повинен бути посиланням чи вбудованим. Ви також можете почати з того, !!щоб пропустити будь-які інші навантажувачі, до речі ...

— w00t