Čo je Webpack a na čo slúži?

Webpack je statický modulárny buildovací nástroj pre moderné JavaScriptové aplikácie. Spracováva súbory vášho projektu (moduly) a spája ich do jedného alebo viacerých balíkov (bundle), ktoré je možné použiť v prehliadači.

Hlavné úlohy a výhody Webpacku:

• Skladanie modulov: Spája všetky závislosti projektu (JavaScript, CSS, obrázky atď.) do optimalizovaných súborov. To umožňuje používať modulárny prístup pri vývoji.
• Transpilácia a polyfily: Pomocou loaderov môže transformovať moderný JavaScript (ES6+) na staršie štandardy (ES5), zrozumiteľné väčšine prehliadačov, a tiež pridávať polyfily pre podporu nových API.
• Správa zdrojov: Môže spracovávať nielen JavaScript, ale aj iné typy súborov, ako sú CSS (cez css-loader, style-loader), obrázky (asset/resource), písma atď., vrátane ich začlenenia do balíka alebo vytvárania samostatných súborov.
• Optimalizácia: Ponúka množstvo pluginov (plugins) na optimalizáciu veľkosti balíka, ako je minifikácia, kompresia, odstránenie nepoužívaného kódu (tree shaking).
• Delenie kódu (Code Splitting): Umožňuje rozdeľovať balík na menšie časti, ktoré sa načítavajú na požiadanie. To zrýchľuje počiatočné načítanie aplikácie.
• Horká výmena modulov (Hot Module Replacement - HMR): Umožňuje aktualizovať moduly v bežiacej aplikácii bez úplného obnovenia stránky, čo výrazne zrýchľuje vývojový proces.
• Správa závislostí: Pomáha efektívne riadiť zložitý graf závislostí v projekte.

Príklad základnej konfigurácie (súbor webpack.config.js):

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

module.exports = {
  entry: './src/index.js', // Vstupný bod
  output: {
    filename: 'bundle.js', // Názov výstupného balíka
    path: path.resolve(__dirname, 'dist'), // Složka pre výstupné súbory
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Pravidlo pre súbory s príponou .js
        exclude: /node_modules/, // Vylúčiť priečinok node_modules
        use: {
          loader: 'babel-loader', // Použitie babel-loader na transpiláciu
        },
      },
      {
        test: /\.css$/, // Pravidlo pre súbory s príponou .css
        use: [
          'style-loader', // Pridáva CSS do DOM
          'css-loader',   // Spracováva CSS
        ],
      },
    ],
  },
  plugins: [
    // Ďalšie pluginy (napríklad na minifikáciu, kopírovanie súborov)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Zapnutie kompresie
    port: 9000,     // Port vývojového servera
  },
};

Webpack sa stal štandardom pre zostavovanie moderných webových aplikácií, najmä pri použití frameworkov a knižníc ako React, Vue a Angular.