Лоадери в 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'
        ],
      },
    ],
  },
};