Загрузчики

Загрузчики — это преобразования, применяемые к исходному коду модуля. Они позволяют предварительно обрабатывать файлы при их import или «загрузке». Таким образом, загрузчики похожи на «задачи» в других инструментах сборки и предоставляют мощный способ обработки шагов сборки front-end. Загрузчики могут преобразовывать файлы из другого языка (например, TypeScript) в JavaScript или загружать встроенные изображения в виде данных URL. Загрузчики даже позволяют выполнять такие операции, как import файлы CSS напрямую из ваших JavaScript-модулей!

Пример

Например, вы можете использовать загрузчики, чтобы указать webpack на загрузку файла CSS или преобразование TypeScript в JavaScript. Для этого вы должны начать с установки необходимых загрузчиков:

npm install --save-dev css-loader ts-loader

Затем укажите webpack использовать css-loader для каждого .css файла и ts-loader для всех .ts файлов:

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

Использование загрузчиков

Существует два способа использования загрузчиков в вашем приложении:

• Настройка (рекомендуется): Укажите их в файле webpack.config.js.
• Встроенный: Укажите их явно в каждом import операторе.

Обратите внимание, что загрузчики могут использоваться из командной строки в webpack v4, но эта функция была устаревшей в webpack v5.

Настройка

module.rules позволяет указать несколько загрузчиков в вашей конфигурации webpack. Это лаконичный способ отобразить загрузчики и помогает поддерживать чистый код. Он также предоставляет вам полный обзор каждого соответствующего загрузчика.

Загрузчики оцениваются/выполняются справа налево (или сверху вниз). В примере ниже выполнение начинается с sass-loader, продолжается с css-loader и, наконец, завершается style-loader. Подробнее о порядке загрузчиков см. в "Особенности загрузчиков".

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  },
};

Встроенный

Загрузчики можно указать в import операторе или в любом эквивалентном методе "импорта". Разделяйте загрузчики и ресурс с помощью !. Каждая часть разрешается относительно текущей директории.

import Styles from 'style-loader!css-loader?modules!./styles.css';

Любые загрузчики, preLoaders и postLoaders из конфигурации можно переопределить, добавив префикс к встроенному import оператору:

• Добавление префикса ! отключит все настроенные обычные загрузчики

  import Styles from '!style-loader!css-loader?modules!./styles.css';

• Добавление префикса !! отключит все настроенные загрузчики (preLoaders, загрузчики, postLoaders)

  import Styles from '!!style-loader!css-loader?modules!./styles.css';

• Добавление префикса -! отключит все настроенные preLoaders и загрузчики, но не postLoaders

  import Styles from '-!style-loader!css-loader?modules!./styles.css';

Параметры можно передавать с помощью параметра запроса, например, ?key=value&foo=bar, или объекта JSON, например, ?{"key":"value","foo":"bar"}.

Особенности загрузчиков

• Загрузчики могут быть объединены в цепочку. Каждый загрузчик в цепочке применяет преобразования к обрабатываемому ресурсу. Цепочка выполняется в обратном порядке. Первый загрузчик передаёт свой результат (ресурс с применёнными преобразованиями) следующему и так далее. В конечном итоге webpack ожидает, что последний загрузчик в цепочке вернёт JavaScript.
• Загрузчики могут быть синхронными или асинхронными.
• Загрузчики работают в Node.js и могут выполнять всё, что возможно в нём.
• Загрузчики могут настраиваться с помощью объекта options (использование параметров query для настройки параметров всё ещё поддерживается, но устарело).
• Обычные модули могут экспортировать загрузчик в дополнение к стандартному main через package.json с полем loader.
• Плагины могут предоставлять загрузчикам больше функций.
• Загрузчики могут генерировать дополнительные произвольные файлы.

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

Разрешение загрузчиков

Загрузчики следуют стандартному разрешению модулей. В большинстве случаев он будет загружаться из пути модуля (подумайте о npm install, node_modules).

Модуль загрузчика должен экспортировать функцию и быть написан на совместимом с Node.js JavaScript. Чаще всего они управляются с помощью npm, но вы также можете иметь пользовательские загрузчики как файлы в вашем приложении. По соглашению, загрузчики обычно имеют имя xxx-loader (например, json-loader). Подробнее см. в "Написание загрузчика".