Webpack

Webpack – modułowy bundler (pakowacz) dla aplikacji internetowych, napisany w języku JavaScript i działający w środowisku Node.js. Umożliwia łączenie (bundling) plików źródłowych, takich jak skrypty, style, obrazy i szablony, w jeden lub kilka zoptymalizowanych plików wyjściowych, które mogą być bezpośrednio załadowane przeglądarką.

Historia

Projekt powstał w 2012 roku, a pierwsza stabilna wersja 1.0.0 została wydana w marcu 2014 roku. Twórcą jest Tobias Klenß, a początkowo narzędzie miało służyć jako alternatywa dla istniejących managerów pakietów, takich jak RequireJS i Browserify. Od tego czasu Webpack przeszedł przez kilka dużych rewizji, a wersja 5.x (wydana w 2020 roku) stała się de facto standardem w ekosystemie front‑end.

Podstawowe założenia

Modułowość – wszystkie zasoby traktowane są jako moduły, które mogą zależeć od innych modułów.
Tree shaking – eliminacja nieużywanego kodu (szczególnie przy modułach ES6).
Code splitting – podział aplikacji na osobne fragmenty (chunks), które mogą być ładowane na żądanie.
Hot Module Replacement (HMR) – możliwość podmiany kodu w trakcie działania aplikacji bez przeładowania strony.

Architektura

Webpack składa się z trzech głównych komponentów:

Entry – punkt wejściowy aplikacji (np. src/index.js), od którego rozpoczyna się budowanie grafu zależności.
Output – miejsce, w którym generowane są pliki wyjściowe (np. dist/bundle.js).
Loaders i Plugins – mechanizmy przetwarzania i rozszerzania funkcjonalności kompilacji.

Loadery

Loadery pozwalają Webpackowi przetwarzać pliki, które nie są natywnie obsługiwane przez JavaScript. Najczęściej używane:

babel-loader – transpile ES6+ do kompatybilnego ES5.
css-loader – umożliwia importowanie plików CSS w kodzie JavaScript.
sass-loader – kompiluje Sass/SCSS do CSS.
file-loader – obsługuje obrazy, czcionki i inne zasoby binarne.
url-loader – wstawia małe pliki jako data URI.

Pluginy

Pluginy to potężny interfejs pozwalający na wpływanie na cały proces kompilacji. Przykłady najpopularniejszych pluginów:

HtmlWebpackPlugin – generuje plik index.html z automatycznym wstawianiem linków do wygenerowanych pakietów.
MiniCssExtractPlugin – wyodrębnia CSS do osobnych plików.
CleanWebpackPlugin – czyści katalog docelowy przed każdą kompilacją.
DefinePlugin – wstrzykuje stałe (np. zmienne środowiskowe) do kodu źródłowego.
HotModuleReplacementPlugin – aktywuje HMR w trybie deweloperskim.

Konfiguracja

Podstawowa konfiguracja jest zapisywana w pliku webpack.config.js. Przykład minimalnej konfiguracji:

const path = require('path');

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

Ekosystem i integracje

Webpack jest szeroko stosowany w połączeniu z popularnymi bibliotekami i frameworkami:

React – często używany z Babelem i JSX dzięki babel-preset-react.
Vue.js – integruje się poprzez vue-loader.
Angular – w wersjach starszych wykorzystywał własny bundler, ale od Angular CLI 6 domyślnie stosuje Webpack.
TypeScript – obsługiwany przy pomocy ts-loader lub babel-loader w trybie preserve.
npm oraz Yarn – jako menedżery pakietów pozwalają instalować wszystkie potrzebne loadery i pluginy.

Porównanie z innymi bundlerami

Narzędzie	Główne cechy	Licencja
Webpack	Zaawansowane code splitting, tree shaking, HMR, ogromny ekosystem loaderów i pluginów	MIT
Parcel	Zero‑konfiguracja, szybka kompilacja dzięki workerom, wbudowany HMR	MIT
Rollup	Skupiony na bundlingu ESM, bardzo efektywny tree shaking	MIT
Vite	Rozbudowany na bazie Rollup, wykorzystuje natywny ES Modules w przeglądarce podczas developem	MIT

Typowe zastosowania

Aplikacje jednoplikowe (SPA) – łączenie kodu JavaScript i stylów w jedno wejściowe, optymalizowane pod kątem wydajności.
Strony statyczne – przetwarzanie szablonów (np. Pug), generowanie zasobów i minimalizacja.
Biblioteki i pakiety – budowanie dystrybucji w formacie UMD, CommonJS lub ESM dla innych deweloperów.
Rozbudowane systemy budowania – integracja z Git, CI/CD, testami jednostkowymi (Jest), lintingiem (ESLint) i preprocesorem (PostCSS).

Przykładowy scenariusz użycia

Załóżmy, że tworzymy aplikację React z obsługą TypeScript i SCSS. Poniżej schematyczny webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: { maxSize: 8192 }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
  ],
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: 'single'
  }
};

Wersje i wydania

Główne wersje:

1.x – wprowadzenie podstawowego systemu bundlingu.
2.x – ulepszone zarządzanie zasobami i integracja z Babel.
3.x – wprowadzenie tree shaking i przyspieszonego trybu watch.
4.x – wsparcie dla WebAssembly oraz dalsze usprawnienia HMR.
5.x – domyślna obsługa ESM w Node.js, zoptymalizowane API pluginów i wsparcie dla Asset Modules.