Лоадеры в Webpack

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

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

Давайте посмотрим общую схему работы с лоадером на примере двух воображаемых лоадеров.

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

terminalnpm install test-loader1 --save-dev

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

terminalnpm 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: /\.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'
        ],
      },
    ],
  },
};