Webpack-də Loaderlər

Webpack-in imkanlarını genişləndirmək üçün loaderlar da istifadə olunur. Onlar müəyyən tipdə olan faylları götürüb onlarla müəyyən əməliyyatlar yerinə yetirməyə imkan verir.

Məsələn, .less genişləndirməsi olan bütün faylları götürüb, onların mətnini CSS-ə çevirə, sonra alınan CSS-i kiçildə və bir ümumi faylda saxlaya bilərsiniz.

Gəlin iki xəyali loader nümunəsində loaderla işləməyin ümumi sxeminə baxaq.

Gəlin birinci loaderı quraşdıraq:

terminalnpm install test-loader1 --save-dev

Gəlin ikinci loaderı quraşdıraq:

terminalnpm install test-loader2 --save-dev

Loaderlar quraşdırıldıqdan sonra biz onları konfiqurasiya faylında istifadə edə bilərik (onları import etmək lazım deyil). Sintaksisə baxın:

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

Massiv elementlərini sətirdə deyil, sütunda da yazmaq olar:

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

Müxtəlif tip fayllar üçün müxtəlif qaydalar yazmaq olar:

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