Loaders katika Webpack

Ili kupanua uwezo wa Webpack pia hutumika loaders. Zinawezesha kuchukua faili za aina fulani na kufanya operesheni fulani nazo.

Kwa mfano, unaweza kuchukua faili zote zenye kiambishi .less, kubadilisha maandishi yake kuwa CSS, kisha CSS iliyopatikana kupunguzwa na kuhifadhiwa kwenye faili moja ya jumla.

Wacha tuangalie mpango wa jumla wa kufanya kazi na loader kwa kutumia mfano wa loaders mbili za kubuni.

Wacha tusakinishe loader ya kwanza:

terminalnpm install test-loader1 --save-dev

Wacha tusakinishe loader ya pili:

terminalnpm install test-loader2 --save-dev

Baada ya kusakinisha loaders tunaweza kuzitumia kwenye faili ya usanidi (haihitaji kuagizwa). Angalia sintaksia:

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

Vipengele vya safu vinaweza kuandikwa sio kwenye mstari, lakini kwenye safu wima:

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

Kwa aina tofauti za faili unaweza kuandika kanuni tofauti:

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