Webpack-da Loaderlar

Webpack imkoniyatlarini kengaytirish uchun loaderlardan ham foydalaniladi. Ular ma'lum turdagi fayllarni olish va ular bilan ma'lum amallarni bajarishga imkon beradi.

Masalan, .less kengaytmasiga ega bo'lgan barcha fayllarni olib, ularning matnini CSS ga aylantirish, keyin olingan CSS ni minimallashtirish va bitta umumiy faylda saqlash mumkin.

Keling, loaderlar bilan ishlashning umumiy sxemasini ikki tasavvur qilingan loader misolida ko'rib chiqaylik.

Birinchi loaderni o'rnatamiz:

terminalnpm install test-loader1 --save-dev

Ikkinchi loaderni o'rnatamiz:

terminalnpm install test-loader2 --save-dev

Loaderlarni o'rnatgandan so'ng, ularndan konfiguratsiya faylida foydalanishimiz mumkin (ularni import qilish shart emas). Sintaksisga qarang:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // fayl turi
        use: ['test-loader1', 'test-loader2'], // loaderlar
      },
    ],
  },
};

Massiv elementlarini qator emas, ustun shaklida ham yozish mumkin:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

Turli xil fayl turlari uchun turli qoidalar yozish mumkin:

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