Какова роль загрузчика в Webpack? Какие погрузчики обычно используются?

Давайте поговорим об распространенных загрузчиках в веб-пакете? Какая проблема была решена? - Подробности вопроса. - Руководство по вопросам для собеседования.

1. Что такое загрузчик?

Загрузчик — одна из наиболее важных частей веб-пакета.

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

Загрузчик необходимо настроить отдельно с помощью модуля в webpack.config.js.

В веб-пакете модуль является любым файлом, а не только jsфайлами. По умолчанию при обнаружении модулей импорта или загрузки загрузки веб-пакет поддерживает только упаковку js-файлов. Когда речь идет о файлах таких типов, как css, sass, png и т. д., веб-пакет ничего не может сделать. На данный момент вам необходимо настроить соответствующий загрузчик.Разбор содержимого файла.

При загрузке модуля последовательность выполнения следующая:

Когда веб-пакет встречает неопознанный модуль, веб-пакет будет искать правила синтаксического анализа файлов в конфигурации.

Существует три способа настройки загрузчика:

Способ настройки (рекомендуется): укажите загрузчик в файле webpack.config.js.

Встроенный режим: явно укажите загрузчик в каждом операторе импорта.

Способ CLI: укажите их в команде оболочки

Что касается конфигурации загрузчика, то прописываем ее в атрибуте module.rules.Атрибуты вводятся следующим образом:

правила представлены в виде массива, поэтому мы можем настроить множество загрузчиков

Каждый загрузчик соответствует форме объекта.Проверка атрибута объекта — это правило сопоставления, которое обычно представляет собой регулярное выражение.

Атрибут use вызывает для обработки соответствующий загрузчик, если он соответствует типу файла.

Код записывается в следующем виде:

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

Как видно из приведенного выше кода, при обработке модуля css в атрибуте use настраиваются три загрузчика для обработки файлов css соответственно.

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

Порядок обратный , то есть указанный выше метод выполнения sass-loader, css-loader,style-loader

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

Поскольку веб-пакет выбирает метод функционального программирования, такой как compose , выражения в этом методе выполняются справа налево.

Кроме того, loader его особенности заключаются в следующем:

Загрузчики могут быть синхронными или асинхронными.

Загрузчик работает на Node.js и может выполнять любые операции.

В дополнение к обычному способу package.json экспорта main модуля npm в качестве загрузчика вы также можете использовать поля в файле Module.rules для loader прямой ссылки на модуль.

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

Загрузчик может генерировать дополнительные произвольные файлы

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

2. Функция загрузчика

① Обеспечить обработку файлов в различных форматах, например преобразование Scss в CSS или преобразование TypeScript в Javascript;

② Файлы можно скомпилировать и добавить в зависимости.

3. Часто используемые погрузчики

css-loader: загружает CSS, поддерживает модульность, сжатие, импорт файлов и другие функции;

style-loader: смонтируйте разобранный CSS style на страницу с помощью тегов head ;

Если вы загружаете файл только через css-loader , стиль, заданный кодом страницы, на данный момент не вступит в силу.

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

less-loader: конвертировать код LESS в CSS.

sass-loader: конвертировать код SCSS/SASS в CSS.

Во время разработки мы часто используем стили написания препроцессора less, sass, и для повышения эффективности разработки.Здесь нам нужно использовать sass- loader less- loader.styluscss、

postcss-loader: расширяет синтаксис CSS, использует CSS нового поколения и может автоматически дополнять префиксы CSS3 с помощью подключаемого модуля autoprefixer;

raw-loader: импортировать содержимое файла webpack с помощью метода в , который не является встроенным;importloader

Babel-Loader : конвертировать ES6 в ES5 ;

eslint-loader : проверка кода JavaScript через ESLint;

html-minify-loader : Сжать HTML

image-loader : загрузка и сжатие файлов изображений ;

file-loader : выводит файл в папку и ссылается на выходной файл через относительный URL-адрес в коде (обработка изображений и шрифтов);

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

source-map-loader : загрузить дополнительные файлы исходной карты для облегчения отладки точек останова.

json-loader: используется для загрузки данных JSON.

html-loader: обрабатывает файлы HTML и может импортировать изображения и другие ресурсы из файлов HTML в JavaScript в виде модулей.