Webpack'теги Loader'лер

Webpack'тин мүмкүнчүлүктөрүн кеңейтүү үчүн loader'лер да колдонулат. Алар белгилүү тилдеги файлдарды алууга жана алар менен белгилүү амалдарды жүргүзүүгө мүмкүнчүлүк берет.

Мисалы, .less кеңейтмеси бар бардык файлдарды алып, алардын текстин CSS'ке айландырып, анан алынган CSS'ти минимизациялоо жана бир жалпы файлга сактоо мүмкүн.

Келгиле, эки элестүү loader'дин мисалында loader менен иштөөнүн жалпы схемасын карап чыгалы.

Биринчи loader'ди орнотолу:

terminalnpm install test-loader1 --save-dev

Экинчи loader'ди орнотолу:

terminalnpm install test-loader2 --save-dev

Loader'лерди орноткондон кийин, биз аларды конфигурация файлында колдоно алабыз (аларды импорттоо керек эмес). Синтаксисти караңыз:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // файлдын түрү
        use: ['test-loader1', 'test-loader2'], // loader'лер
      },
    ],
  },
};

Массивдин элементтерин сапта эмес, тик тизип жазууга болот:

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