Лоадеры в Webpack

Из коробки Webpack понимает только JavaScript, что будет если мы попытаемся запихнуть внутрь например SCSS? Webpack отдаст нам ошибку. Для таких вещей придумали лоадеры. Они позволяют брать файлы определенного типа и производить с ними операции.

Например, можно взять все файлы с расширением .less, преобразовать их данные в CSS, затем полученный CSS минимизировать и сохранить в один общий файл. Лоадеры используются для того, чтобы просто обработать файл, который мы импортируем в js.

babel-loader: переводит ES6 JavaScript в ES5 JavaScript, который понимается всеми браузерами
ts-loader: транспилирует TypeScript в JavaScript
coffee-loader: транспилирует CoffeeScript в JavaScript
css-loader: преобразует препроцессоры CSS, такие как SASS и LESS, в CSS
style-loader: помещает выходные строки, сгенерированные css-loader, в теги <style> в файле index.html
url-loader: преобразует большие изображения, включённые в виде отдельных файлов, в URL-адреса base64
html-loader: экспортирует HTML в виде строки, с которой может работать JavaScript

Работа с лоадерами

Давайте установим первый лоадер:

npm install test-loader1 --save-dev

Давайте установим второй лоадер:

npm install test-loader2 --save-dev

После установки лоадеров мы можем воспользоваться ими в файле конфигурации, смотрите синтаксис:

webpack.config.jsexport default {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        // тип файла
        test: /\.css$/i,
        // лоадеры
        use: ["test-loader1", "test-loader2"],
      },
    ],
  },
};

Для разных типов файлов можно писать разные правила:

webpack.config.jsexport default {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: ["test-loader1", "test-loader2"],
      },
      {
        test: /\.less$/i,
        use: ["test-loader3", "test-loader4"],
      },
    ],
  },
};