4. Loaders: трансформация файлов

Webpack по умолчанию понимает только JavaScript и JSON. Loaders — это трансформаторы, которые позволяют Webpack обрабатывать любые типы файлов: TypeScript, CSS, SASS, изображения, шрифты и многое другое. Каждый лоадер получает исходный файл и возвращает трансформированный JavaScript.

Как работают Loaders

src/styles.scss
       ↓
  sass-loader    ← SCSS → CSS
       ↓
  css-loader     ← CSS → JS module (разрешает @import, url())
       ↓
  style-loader   ← Инжектирует <style> тег в DOM
       ↓
  bundle.js      ← Финальный бандл

Важно: Лоадеры применяются справа налево (или снизу вверх в массиве). Последний в массиве выполняется первым.

Конфигурация module.rules

module.exports = {
  module: {
    rules: [
      {
        test: /\\.tsx?$/,         // RegExp для типов файлов
        use: 'ts-loader',         // Строка, объект, или массив
        exclude: /node_modules/,  // Исключения
        include: path.resolve(__dirname, 'src'), // Включения
      },
    ],
  },
};

Поля правила

Поле	Тип	Описание
test	RegExp	Какие файлы обрабатывать
use	string/array/object	Какие лоадеры применять
include	string/RegExp	Только эти пути
exclude	string/RegExp	Исключить эти пути
type	string	Тип модуля (asset и др.)
issuer	RegExp	Фильтр по файлу-источнику импорта

Популярные Loaders

babel-loader — JavaScript и TypeScript

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

{
  test: /\\.(js|jsx|ts|tsx)$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        ['@babel/preset-env', { targets: 'defaults' }],
        ['@babel/preset-react', { runtime: 'automatic' }],
        '@babel/preset-typescript',
      ],
      plugins: ['@babel/plugin-transform-runtime'],
    },
  },
  exclude: /node_modules/,
}

css-loader + style-loader

npm install --save-dev css-loader style-loader

{
  test: /\\.css$/,
  use: ['style-loader', 'css-loader'], // ← порядок справа налево!
}
// css-loader: разрешает @import, url() → JS модуль
// style-loader: инжектирует CSS в <style> тег

SASS/SCSS

npm install --save-dev sass-loader sass

{
  test: /\\.s[ac]ss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }, // CSS Modules
    },
    'sass-loader',
  ],
}

file-loader / url-loader (устарело в Webpack 5)

// Webpack 4 и ниже
{ test: /\\.(png|jpg|gif)$/, use: 'file-loader' }
{ test: /\\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { limit: 8192 } } }

// Webpack 5 — используйте Asset Modules вместо этого
{ test: /\\.(png|jpg|gif)$/, type: 'asset/resource' }

Передача опций лоадеру

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
    importLoaders: 1, // сколько лоадеров применяется после css-loader
  },
}

Написание кастомного лоадера

loaders/markdown-loader.js

module.exports = function(source) {
  // source — содержимое входного файла (строка)
  const html = markdownParser(source);
  return \`module.exports = \${JSON.stringify(html)}\`;
};

// Async лоадер
module.exports = async function(source) {
  const result = await processAsync(source);
  return result;
};

Ниже — интерактивный визуализатор pipeline лоадеров. Выберите тип файла и посмотрите, как он проходит через цепочку лоадеров.