Webpack nədir və nə üçün istifadə olunur?

Webpack müasir JavaScript tətbiqləri üçün statik modul yığan vasitədir. O, layihənizin fayllarını (modullar) işləyir və onları brauzerdə istifadə oluna biləcək bir və ya bir neçə bundle-ə birləşdirir.

Webpack-in əsas və üstünlükləri:

• Modul quruluşu: Layihənin bütün asılılıqlarını (JavaScript, CSS, şəkillər və s.) optimallaşdırılmış fayllarda birləşdirir. Bu, inkişafda modul yanaşmasını təmin edir.
• Transpilasiya və polyfill: Loader-lər vasitəsilə müasir JavaScript (ES6+) köhnə standartlara (ES5) çevrilə bilər və yeni API-ləri dəstəkləmək üçün polyfill əlavə edə bilər.
• Resursların idarə olunması: Yalnız JavaScript deyil, həmçinin CSS (css-loader, style-loader), şəkillər (asset/resource), şriftlər və s. kimi digər fayl növlərini də işləyə bilər və onları bundle-ə daxil edə və ya ayrıca fayllar yarada bilər.
• Optimizasiya: Minifikasiya, sıxışdırma, istifadə olunmayan kodun silinməsi (tree shaking) kimi çoxsaylı pluginlər təqdim edir.
• Kod bölmə (Code Splitting): Bundle-ı kiçik hissələrə bölməyə imkan verir və bu hissələr tələb olunduqda yüklənir, bu da ilkin yükləmə vaxtını sürətləndirir.
• İstilik modulu əvəzetməsi (Hot Module Replacement - HMR): İşlək tətbiqdə modulları tam yeniləmədən yeniləməyə imkan verir və bu, inkişaf prosesini xeyli sürətləndirir.
• Asılılıqların idarə olunması: Layihədə mürəkkəb asılılıq qrafikini effektiv idarə etməyə kömək edir.

Əsas konfiqurasiya nümunəsi (webpack.config.js faylı):

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

module.exports = {
  entry: './src/index.js', // Giriş nöqtəsi
  output: {
    filename: 'bundle.js', // Çıxış bundle adı
    path: path.resolve(__dirname, 'dist'), // Çıxış qovluğu
  },
  module: {
    rules: [
      {
        test: /\.js$/, // .js uzantılı fayllara tətbiq et
        exclude: /node_modules/, // node_modules qovluğunu istisna et
        use: {
          loader: 'babel-loader', // Transpil üçün babel-loader istifadə et
        },
      },
      {
        test: /\.css$/, // .css uzantılı fayllara tətbiq et
        use: [
          'style-loader', // CSS-i DOM-a əlavə et
          'css-loader',   // CSS-i işləyib hazırla
        ],
      },
    ],
  },
  plugins: [
    // Əlavə pluginlər (məsələn, minifikasyon, fayl kopyalama)
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, // Sıxışdırmanı aktiv et
    port: 9000,     // İnkişaf serverinin portu
  },
};

Webpack müasir veb tətbiqlərinin qurulması üçün standart halına gəlib, xüsusən React, Vue və Angular kimi framework və kitabxanalarla istifadə edilərkən.