Загрузчики

Загрузчики — это преобразования, которые применяются к исходному коду модуля. Они позволяют предварительно обрабатывать файлы, как вы import или «загружать» их. Таким образом, загрузчики похожи на «задачи» в других инструментах сборки и предоставляют мощный способ обработки этапов сборки фронтенда. Загрузчики могут преобразовывать файлы из другого языка (например, 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 инструкции.
• CLI: Укажите их в командной строке.

Настройка

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

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // style-loader
          { loader: 'style-loader' },
          // css-loader
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // sass-loader
          { 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"}.

Используйте module.rules всякий раз, когда это возможно, так как это уменьшит объём вспомогательного кода в вашем исходном коде и позволит быстрее отладить или найти загрузчик, если что-то пойдёт не так.

CLI

Вы также можете использовать загрузчики через CLI:

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

Это использует jade-loader для .jade файлов и style-loader и css-loader для .css файлов.

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

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

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

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

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

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