Co je Webpack a k čemu slouží?

Webpack je statický modulární buildovací nástroj pro moderní JavaScriptové aplikace. Zpracovává soubory vašeho projektu (moduly) a spojuje je do jednoho nebo více balíčků (bundle), které lze použít v prohlížeči.

Hlavní úkoly a výhody Webpacku:

• Sestavení modulů: Spojuje všechny závislosti projektu (JavaScript, CSS, obrázky atd.) do optimalizovaných souborů. To umožňuje používat modulární přístup při vývoji.
• Transpilace a polyfily: Pomocí loaderů může převádět moderní JavaScript (ES6+) na starší standardy (ES5), srozumitelné většině prohlížečů, a také přidávat polyfily pro podporu nových API.
• Správa zdrojů: Může zpracovávat nejen JavaScript, ale i jiné typy souborů, jako jsou CSS (přes css-loader, style-loader), obrázky (asset/resource), písma atd., včetně jejich začlenění do balíčku nebo vytvoření samostatných souborů.
• Optimalizace: Nabízí řadu pluginů (plugins) pro optimalizaci velikosti balíčku, jako je minifikace, komprese, odstranění nepoužívaného kódu (tree shaking).
• Dělení kódu (Code Splitting): Umožňuje rozdělit balíček na menší části, které se načítají na požádání. To urychluje počáteční načítání aplikace.
• Horká výměna modulů (Hot Module Replacement - HMR): Umožňuje aktualizovat moduly v běžící aplikaci bez úplného obnovení stránky, což výrazně urychluje vývojový proces.
• Správa závislostí: Pomáhá efektivně řídit složitý graf závislostí v projektu.

Příklad základní konfigurace (soubor webpack.config.js):

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

module.exports = {
  entry: './src/index.js', // Vstupní bod
  output: {
    filename: 'bundle.js', // Název výstupního balíčku
    path: path.resolve(__dirname, 'dist'), // Složka pro výstupní soubory
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Aplikovat pravidlo na soubory s příponou .js
        exclude: /node_modules/, // Vyloučit složku node_modules
        use: {
          loader: 'babel-loader', // Použít babel-loader pro transpilaci
        },
      },
      {
        test: /\.css$/, // Aplikovat pravidlo na soubory s příponou .css
        use: [
          'style-loader', // Přidat CSS do DOM
          'css-loader',   // Zpracovat CSS
        ],
      },
    ],
  },
  plugins: [
    // Další pluginy (například pro minifikaci, kopírování souborů)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Povolit kompresi
    port: 9000,     // Port vývojového serveru
  },
};

Webpack se stal de facto standardem pro sestavování moderních webových aplikací, zejména při použití frameworků a knihoven jako React, Vue a Angular.