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