Loadery w Webpack

Do rozszerzania możliwości Webpack również używa się loaderów. Pozwalają one brać pliki określonego typu i wykonywać na nich określone operacje.

Na przykład, można wziąć wszystkie pliki z rozszerzeniem .less, przekształcić ich tekst na CSS, następnie otrzymany CSS zminimalizować i zapisać w jeden wspólny plik.

Spójrzmy na ogólny schemat pracy z loaderem na przykładzie dwóch wymyślonych loaderów.

Zainstalujmy pierwszy loader:

terminalnpm install test-loader1 --save-dev

Zainstalujmy drugi loader:

terminalnpm install test-loader2 --save-dev

Po instalacji loaderów możemy skorzystać z nich w pliku konfiguracyjnym (importować ich nie trzeba). Patrz syntaksa:

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

Elementy tablicy można zapisać nie w linii, a w kolumnę:

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

Dla różnych typów plików można pisać różne reguły:

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