Loaderët në Webpack

Për zgjerimin e mundësive të Webpack përdoren gjithashtu loaderët. Ato lejojnë marrjen e skedarëve të një tipi të caktuar dhe kryerjen e operacioneve të caktuara me to.

Për shembull, mund të merren të gjithë skedarët me zgjatje .less, të transformohet teksti i tyre në CSS, pastaj CSS i përftuar të minimizohet dhe të ruhet në një skedar të përbashkët.

Le të shohim skemën e përgjithshme të punës me një loader duke përdorur shembullin e dy loaderëve të imagjinuar.

Le të instalojmë loader-in e parë:

terminalnpm install test-loader1 --save-dev

Le të instalojmë loader-in e dytë:

terminalnpm install test-loader2 --save-dev

Pas instalimit të loaderëve, ne mund t'i përdorim ato në skedarin e konfigurimit (nuk ka nevojë t'i importohen). Shikoni sintaksën:

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

Elementet e vargut mund të shkruhen jo në një rresht, por në një kolonë:

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

Për tipe të ndryshme skedarësh mund të shkruhen rregulla të ndryshme:

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