Webpack Loaderi

Lai paplašinātu Webpack iespējas, tiek izmantoti arī loaderi. Tie ļauj paņemt noteikta tipa failus un veikt ar tiem noteiktas darbības.

Piemēram, var paņemt visus failus ar paplašinājumu .less, pārveidot to tekstu par CSS, pēc tam iegūto CSS minimizēt un saglabāt vienā kopīgā failā.

Apskatīsim vispārējo shēmu darbam ar loaderiem, izmantojot divus iedomātus loaderus kā piemēru.

Instalēsim pirmo loader:

terminalnpm install test-loader1 --save-dev

Instalēsim otro loader:

terminalnpm install test-loader2 --save-dev

Pēc loaderu instalēšanas mēs varam tos izmantot konfigurācijas failā (tos nav nepieciešams importēt). Skatieties sintaksi:

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

Masīva elementus var rakstīt nevis rindā, bet kolonnā:

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

Dažādiem failu tipiem var rakstīt dažādus noteikumus:

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