Czym jest Webpack i do czego służy?

Webpack to statyczny bundler modułów dla nowoczesnych aplikacji JavaScript. Przetwarza pliki Twojego projektu (moduły) i łączy je w jeden lub kilka pakietów (bundle), które można używać w przeglądarce.

Główne zadania i zalety Webpack:

• Budowa modułów: Łączy wszystkie zależności projektu (JavaScript, CSS, obrazy itp.) w zoptymalizowane pliki. Umożliwia to modularne podejście w rozwoju.
• Transpilacja i polyfill: Za pomocą loaderów może przekształcać nowoczesny JavaScript (ES6+) na starsze standardy (ES5), zrozumiałe dla większości przeglądarek, oraz dodawać polyfill dla obsługi nowych API.
• Zarządzanie zasobami: Może przetwarzać nie tylko JavaScript, ale także inne typy plików, takie jak CSS (przez css-loader, style-loader), obrazy (asset/resource), czcionki itp., włączając je do pakietu lub tworząc osobne pliki.
• Optymalizacja: Zapewnia wiele pluginów do optymalizacji rozmiaru pakietu, takich jak minifikacja, kompresja, usuwanie nieużywanego kodu (tree shaking).
• Podział kodu (Code Splitting): Pozwala dzielić pakiet na mniejsze części, które są ładowane na żądanie, co przyspiesza początkowe ładowanie aplikacji.
• Hot Module Replacement (HMR): Umożliwia aktualizację modułów w działającej aplikacji bez pełnego odświeżania strony, co znacznie przyspiesza proces rozwoju.
• Zarządzanie zależnościami: Pomaga efektywnie zarządzać złożonym grafem zależności w projekcie.

Przykład podstawowej konfiguracji (plik webpack.config.js):

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Punkt wejścia
  output: {
    filename: 'bundle.js', // Nazwa wyjściowego pakietu
    path: path.resolve(__dirname, 'dist'), // Folder wyjściowy
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Zasada dla plików z rozszerzeniem .js
        exclude: /node_modules/, // Wyklucza folder node_modules
        use: {
          loader: 'babel-loader', // Używa babel-loader do transpile
        },
      },
      {
        test: /\.css$/, // Zasada dla plików z rozszerzeniem .css
        use: [
          'style-loader', // Dodaje CSS do DOM
          'css-loader',   // Przetwarza CSS
        ],
      },
    ],
  },
  plugins: [
    // Dodatkowe pluginy (np. do minifikacji, kopiowania plików)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Włącza kompresję
    port: 9000,     // Port serwera deweloperskiego
  },
};

Webpack stał się de facto standardem do budowy nowoczesnych aplikacji internetowych, szczególnie przy użyciu frameworków i bibliotek takich jak React, Vue i Angular.