Loadere în Webpack

Pentru a extinde capacitățile Webpack de asemenea se folosesc loadere. Ele permit luarea fișierelor de un anumit tip și efectuarea anumitor operații cu acestea.

De exemplu, poți lua toate fișierele cu extensia .less, să transformi textul lor în CSS, apoi CSS-ul obținut să fie minimizat și salvat într-un singur fișier comun.

Să analizăm schema generală de lucru cu un loader folosind exemplul a două loadere imaginare.

Să instalăm primul loader:

terminalnpm install test-loader1 --save-dev

Să instalăm al doilea loader:

terminalnpm install test-loader2 --save-dev

După instalarea loaderelor putem să le utilizăm în fișierul de configurare (nu este nevoie să le importăm). Vedeți sintaxa:

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

Elementele array-ului pot fi scrise nu într-un șir, ci într-o coloană:

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

Pentru diferite tipuri de fișiere se pot scrie reguli diferite:

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