39. Co to są loadery w Webpack i jak działają?

Loadery w Webpack to narzędzia, które przekształcają pliki z jednego formatu na inny podczas procesu budowania. Pozwalają na przetwarzanie plików innych niż JavaScript, takich jak CSS, obrazy, czy pliki TypeScript.

Jak działają loadery:

1. Konfiguracja loaderów: Loadery są definiowane w konfiguracji Webpacka w sekcji module.rules.
2. Test: Każdy loader ma test, który określa, które pliki mają być przetwarzane (np. pliki z rozszerzeniem .css).
3. Use: Określa, który loader ma być używany do przetwarzania plików pasujących do testu.

Przykład konfiguracji loadera do przetwarzania plików CSS:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Popularne loadery:

1. babel-loader: Przekształca nowoczesny JavaScript (ES6+) na kompatybilny z ES5.
2. css-loader: Umożliwia importowanie plików CSS do JavaScript.
3. style-loader: Wstrzykuje CSS do DOM.
4. file-loader: Ładuje pliki (np. obrazy) i zwraca ich URL.
5. ts-loader: Przekształca pliki TypeScript na JavaScript.

Loadery umożliwiają Webpackowi przetwarzanie różnych typów plików, co jest kluczowe dla budowania złożonych aplikacji webowych.