Šta je Webpack i zašto se koristi?

Webpack je statički modulni alat za izgradnju za savremene JavaScript aplikacije. On obrađuje fajlove vašeg projekta (module) i kombinuje ih u jedan ili više paketa (bundle), koje možete koristiti u pretraživaču.

Glavni zadaci i prednosti Webpack-a:

• Sastavljanje modula: Kombinuje sve zavisnosti projekta (JavaScript, CSS, slike itd.) u optimizovane fajlove. Ovo omogućava korišćenje modularnog pristupa u razvoju.
• Transpilacija i polifili: Pomoću loadera može da pretvara savremeni JavaScript (ES6+) u starije standarde (ES5), razumljive većini pretraživača, kao i da dodaje polifile za podršku novim API-ima.
• Upravljanje resursima: Može da obrađuje ne samo JavaScript, već i druge tipove fajlova, kao što su CSS (kroz css-loader, style-loader), slike (asset/resource), fontove itd., uključujući njihovo uključivanje u paket ili pravljenje zasebnih fajlova.
• Optimizacija: Nudi razne plugine (plugins) za optimizaciju veličine paketa, kao što su minifikacija, kompresija, uklanjanje neiskorišćenog koda (tree shaking).
• Deljenje koda (Code Splitting): Omogućava razbijanje paketa na manje delove koji se učitavaju na zahtev. Ovo ubrzava početno učitavanje aplikacije.
• Hot Module Replacement (HMR): Omogućava ažuriranje modula u radujućoj aplikaciji bez potpunog osvežavanja stranice, što značajno ubrzava razvojni proces.
• Upravljanje zavisnostima: Pomaže efikasno upravljanje složenim grafom zavisnosti u projektu.

Primer osnovne konfiguracije (fajl webpack.config.js):

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

module.exports = {
  entry: './src/index.js', // Ulazna tačka
  output: {
    filename: 'bundle.js', // Ime izlaznog paketa
    path: path.resolve(__dirname, 'dist'), // Folder za izlazne fajlove
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Pravilo za fajlove sa ekstenzijom .js
        exclude: /node_modules/, // Isključivanje foldera node_modules
        use: {
          loader: 'babel-loader', // Korišćenje babel-loader za transpilaciju
        },
      },
      {
        test: /\.css$/, // Pravilo za fajlove sa ekstenzijom .css
        use: [
          'style-loader', // Dodaje CSS u DOM
          'css-loader',   // Obradjuje CSS
        ],
      },
    ],
  },
  plugins: [
    // Dodatni pluginovi (npr. za minifikaciju, kopiranje fajlova)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Uključuje kompresiju
    port: 9000,     // Port dev servera
  },
};

Webpack je postao de facto standard za izgradnju savremenih web aplikacija, posebno sa korišćenjem frameworka i biblioteka poput React, Vue i Angular.