38. Czym jest Webpack i jakie są jego główne funkcje?

Webpack to modułowy pakiet dla JavaScript, który przekształca moduły z zależnościami w statyczne zasoby. Jest szeroko stosowany w nowoczesnym ekosystemie front-endowym.

Główne funkcje Webpack:

1. Łączenie plików (Bundling): Webpack łączy wiele plików źródłowych (JavaScript, CSS, HTML itp.) w jeden lub kilka plików wyjściowych.
2. Przekształcanie kodu (Transpiling): Dzięki loaderom, Webpack może przekształcać nowoczesny kod JavaScript (ES6+) do zgodnego z ES5 za pomocą Babel.
3. Podział kodu (Code Splitting): Webpack umożliwia podział kodu na mniejsze części (chunki), które są ładowane na żądanie, co poprawia wydajność aplikacji.
4. Optymalizacja zasobów: Webpack minifikuje i optymalizuje zasoby takie jak CSS, JavaScript i obrazy.
5. Zarządzanie zależnościami: Automatycznie analizuje i zarządza zależnościami między plikami modułowymi.

Przykład konfiguracji Webpack:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Webpack jest potężnym narzędziem do zarządzania i optymalizacji zasobów w aplikacjach webowych.