4.4. Обработчики

В предыдущих модулях мы уже работали с обработчиками — без них webpack понимает только файлы JavaScript и JSON.

Обработчики позволяют webpack-у обрабатывать другие типы файлов и преобразовывать их в модули, которые могут использоваться приложением и добавляться в граф зависимостей. Обработчики добавляются в файле webpack.config.js — в поле module, которое является объектом.

У поля обработчиков есть два свойства:

  1. test — принимает строковые значения. Свойство удобнее использовать, применяя регулярные выражения.

Это свойство позволяет нам самим определять, какой файл (формат) или файлы будет обрабатывать webpack.

Например, для стилей мы используем запись test: /\.(s[ac]|c)ss$/i. Она означает, что сборщику следует воспринимать расширения .css, .scss, .sass и .less в качестве модулей. И понимать (обрабатывать) их webpack будет после того, как мы укажем в поле use перечень обработчиков к нему.

  1. use — принимает массив строк. Это свойство указывает сборщику, какой обработчик нужно использовать для преобразования файлов, указанных в поле test.

Чтобы обработать стили, необходима запись [MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'].

Как она читается — справа налево:

Смоделируем обычный проект, где стили мы пишем на SCSS. При сборке такого проекта изначально webpack обращается к sass-loader, который даёт поддержку синтаксиса SCSS. Далее за ним идёт css-loader, который преобразует стили синтаксиса SCSS в обыкновенный CSS. После этого style-loader подхватывает и внедряет преобразованные CSS-стили в DOM-дерево. Напоследок выполняется MiniCssExtractPlugin. О нём мы поговорим чуть подробнее.

MiniCssExtractPlugin служит нам в качестве плагина и обработчика. В этой статье мы посмотрим, как он работает в качестве обработчика.

В поле use мы вызываем у обработчика метод loader, и он находится в самом начале. Это означает лишь то, что когда webpack пройдёт предыдущие обработчики и остановится на последнем, на выходе мы получим преобразованный файл со стилями, понимаемыми браузером. То есть чистый CSS.

Для чего ещё нужны обработчики

Обработка файлов формата HTML

Рассмотрим пример обработки HTML-файлов:

{
  test: /\.(html)$/,
  use: ['html-loader'],
}

Этот обработчик нужен для корректной работы и отображения содержимого HTML-файла. Без него изменение стилей, скриптов или картинок может отображаться неправильно или не отображаться вовсе.

Обработка форматов JS и TS и их версий с поддержкой React — .jsx и .tsx.

Для обработки первых двух форматов нам понадобится либо один обработчик на оба формата...

для .js условный babel-loader, для .ts — ts-loader

... по отдельности, и от этого конфиг разрастается, либо обрабатывать оба через babel-loader.

Давайте остановимся на обработке .js— и .ts-форматов. Для этого нам хватит babel-loader’a с добавлением пакета:

npm i -D @babel/preset-typescript

Сам babel.config.json будет выглядеть так:

{
  "presets"
:
  [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current",
          "browsers": ["last 2 versions", "ie >= 11"],
          "chrome": "100"
        }
      }
    ],
    "@babel/preset-typescript"
  ],
    "plugins": []
}

Вышеуказанный пакет добавляется в конец поля presets. Когда мы его добавим, проект станет поддерживать синтаксис TypeScript. Но для корректной работы также необходим tsconfig.json, который генерируется с использованием команды tsc --init.

Команда становится доступной после установки пакета typescript: npm i typescript.

Далее по мере обучения мы оптимизируем работу обработчиков для .js— и .ts-форматов.