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'
        ],
      },
    ],
  },
};