Webpack nima va u nima uchun ishlatiladi?

Webpack müasir JavaScript ilovələri üçün statik modul yığıcıdır. O, layihənizin fayllarını (modullər) 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: Bundle ölçüsünü azaltmaq üçün 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, minifikasiya, 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.