Webpack — یہ کیا ہے، فن تعمیر اور کام کرنے کا اصول

Webpack کیا ہے؟

Webpack ایک ماڈیول بنڈلر ہے جو ایپلی کیشن کے انحصار کا تجزیہ کرتا ہے اور انہیں براؤزر یا سرور کے لیے جامد فائلوں میں پیک کرتا ہے۔ Tobias Koppers نے 2012 میں تخلیق کیا، Webpack تمام فائلیں ماڈیول ہیں کے تصور کی بدولت جلد ہی تعمیر کا معیار بن گیا: JavaScript، CSS، تصاویر، فونٹس اور یہاں تک کہ HTML کو ایک ہی لوڈر سسٹم کے ذریعے پروسیس کیا جاتا ہے۔

Webpack صنعت کا معیار کیوں بن گیا

Webpack نے اپنے وقت کے لیے ایک انقلابی خیال متعارف کرایا: لوڈرز آپ کو import یا require کے ذریعے کسی بھی وسائل کو شامل کرنے کی اجازت دیتے ہیں۔ اس نے ڈویلپرز کو CSS پری پروسیسرز (SCSS)، TypeScript کمپائلرز اور امیج آپٹیمائزرز کے لیے علیحدہ ٹولز استعمال کرنے کی ضرورت سے آزاد کر دیا۔ 2020 تک، 80% سے زیادہ JavaScript پروجیکٹس Webpack استعمال کرتے تھے (npm stat ڈیٹا: 2019–2024)۔

مقابل — Vite، Parcel اور Turbopack — تیز تر ڈویلپمنٹ سپیڈ پیش کرتے ہیں، لیکن Webpack انٹرپرائز سیگمنٹ میں استحکام، پختہ ماحولیاتی نظام اور پسماندہ مطابقت کی وجہ سے قیادت برقرار رکھتا ہے۔ بڑے پروجیکٹس میں Webpack سے Vite میں منتقلی میں ہفتے لگتے ہیں اور اکثر پلگ ان کی غیر مطابقت کی وجہ سے رک جاتی ہے۔

Webpack کیسے کام کرتا ہے

Webpack داخلی نقطہ سے شروع کرکے ایک انحصار گراف بناتا ہے۔ ہر ملا import یا require گراف میں شامل کیا جاتا ہے، لوڈرز کی زنجیر سے گزرتا ہے اور ایک حصے میں رکھا جاتا ہے۔ حتمی آؤٹ پٹ ترتیب پر منحصر ہے: ایک بنڈل، متعدد حصے، یا UMD، CommonJS یا ES Module فارمیٹس میں لائبریری آؤٹ پٹ۔

Webpack بلڈ کا عمل

// کم از کم Webpack 5 ترتیب
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, filename: 'vendor.[contenthash:8].js' } },
    },
  },
};

Webpack 5 نے فائل سسٹم پر مبنی بلٹ ان کیش متعارف کرایا، جو دوبارہ تعمیر کو 2–5 گنا تیز کرتا ہے۔ مستقل کیشنگ رنز کے درمیان ماڈیول تبدیلی کے نتائج محفوظ کرتی ہے، جو CI/CD میں خاص طور پر اہم ہے۔ اسے فعال کرنے کے لیے، ترتیب میں cache: { type: 'filesystem' } شامل کریں۔

Webpack کے بنیادی تصورات

Webpack چار بنیادی تصورات کے ساتھ کام کرتا ہے: Entry (داخلی نقطہ)، Output (آؤٹ پٹ)، Loaders (تبدیلیاں) اور Plugins (توسیعات)۔ ان تصورات کو سمجھنا ایک سادہ سائٹ سے لے کر پیچیدہ انٹرپرائز ایپلی کیشن تک کسی بھی بلڈ کو ترتیب دینے کے لیے ضروری ہے۔

Entry، Output اور موڈز

Entry ایک صف یا آبجیکٹ ہے جو ایک یا زیادہ داخلی نکات کی وضاحت کرتا ہے۔ ملٹی انٹری کثیر اجزاء والی ایپلی کیشنز کے لیے استعمال ہوتی ہے۔ Output آؤٹ پٹ فائلوں کو ترتیب دیتا ہے: راستہ، نام کا نمونہ، عوامی URL۔ Mode — development، production یا none — ہر موڈ کے لیے خود بخود بہترین پلگ انز اور ڈیفالٹ اقدار کو فعال کرتا ہے۔

Content Hash — فائل کے نام میں مواد کا ہیش ([contenthash]) شامل کرنا طویل مدتی کیشنگ کو یقینی بناتا ہے۔ براؤزر صرف اس وقت نئی فائل لوڈ کرتا ہے جب اس کا مواد تبدیل ہوتا ہے۔ SplitChunksPlugin خود بخود مختلف اندراجات سے مشترکہ انحصار کو علیحدہ حصوں میں نکالتا ہے، کوڈ کے دہرائے جانے کو روکتا ہے۔

Loaders اور Plugins

Loaders سورس فائلوں کو انحصار گراف میں شامل کرنے سے پہلے تبدیل کرتے ہیں۔ ہر لوڈر ایک فنکشن ہے جو فائل کا مواد وصول کرتا ہے اور ایک JavaScript ماڈیول لوٹاتا ہے۔ Plugins زیادہ طاقتور توسیعات ہیں جن کی پوری بلڈ لائف سائیکل تک رسائی ہے: شروع سے آؤٹ پٹ فائل جنریشن تک۔

مقبول لوڈرز اور ان کا مقصد

Plugins، لوڈرز کے برعکس، بلڈ کے کسی بھی مرحلے پر کارروائیاں کر سکتے ہیں۔ HtmlWebpackPlugin خود بخود منسلک اسکرپٹس کے ساتھ HTML فائل تیار کرتا ہے۔ MiniCssExtractPlugin متوازی لوڈنگ کے لیے CSS کو علیحدہ فائلوں میں نکالتا ہے۔ DefinePlugin بلڈ کے دوران ایپلی کیشن کوڈ میں ماحولیاتی متغیرات منتقل کرنے کی اجازت دیتا ہے۔

Webpack بلڈ آپٹیمائزیشن

Webpack بلٹ ان آپٹیمائزیشن میکانزم فراہم کرتا ہے: tree shaking، code splitting اور کمپریشن۔ Tree shaking ES ماڈیولز سے غیر استعمال شدہ ایکسپورٹ کو ہٹاتا ہے۔ Code splitting import() کے ذریعے بنڈل کو متحرک حصوں میں تقسیم کرتا ہے۔ Minimizer — JS کے لیے TerserPlugin اور CSS کے لیے CssMinimizerPlugin۔

اعلی درجے کی آپٹیمائزیشن تکنیک

// webpack.config.js — پروڈکشن بلڈ آپٹیمائزیشن
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: { compress: { drop_console: true }, mangle: true },
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      maxAsyncRequests: 30,
    },
  },
};

Module Federation مائیکرو فرنٹ اینڈز کے لیے Webpack 5 کی سب سے طاقتور خصوصیت ہے۔ یہ رن ٹائم پر دوسری آزاد تعمیرات سے ماڈیول لوڈ کرنے کی اجازت دیتا ہے۔ ہر مائیکرو ایپلی کیشن آزادانہ طور پر تیار اور تعینات کی جاتی ہے، لیکن صارف کے لیے ایک ہی انٹرفیس میں جمع ہوتی ہے۔ Segment Analytics 2021 سے پروڈکشن میں Module Federation استعمال کر رہا ہے، جس سے تعیناتی کا وقت 80% کم ہو گیا ہے۔

React Native اور ویب پروجیکٹس کے لیے Webpack

Webpack React Native میں شاذ و نادر ہی براہ راست استعمال ہوتا ہے — اس کے لیے Metro موجود ہے۔ تاہم، Webpack React Native Web پروجیکٹس میں استعمال ہوتا ہے، جب ایک کوڈ بیس موبائل پلیٹ فارمز (Metro کے ذریعے) اور ویب (Webpack کے ذریعے) دونوں کے لیے بنایا جاتا ہے۔ Webpack Ionic اور Cordova کے ساتھ ہائبرڈ ایپلی کیشنز میں بھی مقبول ہے۔

کراس پلیٹ فارم بلڈ کے لیے Webpack

ان پروجیکٹس کے لیے جہاں ویب رینڈرنگ کے لیے React Native Web استعمال کیا جاتا ہے، Webpack کو عرفی ناموں سے ترتیب دیا جاتا ہے جو نیٹیو ماڈیولز کو ویب نفاذات سے بدل دیتے ہیں۔ Alias react-native → react-native-web درآمدات کو تبدیل کیے بغیر مشترکہ اجزاء استعمال کرنے کی اجازت دیتا ہے۔ DefinePlugin پلیٹ فارم کے لیے مخصوص کوڈ کی مشروط کمپائلیشن کے لیے پلیٹ فارم فلیگ منتقل کرتا ہے۔

موبائل ویب کے لیے Webpack آپٹیمائزیشن ڈیسک ٹاپ سے مختلف ہے۔ موبائل اول بلڈ میں جارحانہ چھوٹا کرنا، تصاویر کا سست لوڈنگ اور اہم CSS کی ترجیحی لوڈنگ شامل ہے۔ CompressionPlugin بروٹلی کمپریشن کے ساتھ 3G/4G موبائل نیٹ ورکس کے لیے بنڈل سائز 20–25% کم کرتا ہے۔ مختلف پلیٹ فارمز کے لیے ترتیبات تقسیم کرنے کے لیے webpack-merge استعمال کریں: موبائل اول اور ڈیسک ٹاپ کے لیے موزوں بلڈز۔

Webpack 5 Module Federation: مائیکرو فرنٹ اینڈز

Module Federation Webpack 5 کی ایک انقلابی خصوصیت ہے جو npm میں شائع کیے بغیر دیگر آزاد تعمیرات سے JavaScript ماڈیول لوڈ کرنے کی اجازت دیتی ہے۔ ہر مائیکرو ایپلی کیشن آزادانہ طور پر تیار ہوتی ہے، اس کی اپنی Webpack ترتیب ہوتی ہے اور علیحدہ طور پر تعینات کی جاتی ہے۔ Host ایپلی کیشن ModuleFederationPlugin کی خصوصی ترتیب کے ذریعے دور دراز کی تعمیرات سے ماڈیول منسلک کرتی ہے۔

فراہم کنندہ منتخب ماڈیولز کو ظاہر کرتا ہے، اور میزبان انہیں منسلک کرنے کے لیے remotes استعمال کرتا ہے۔ Module Federation مشترکہ لائبریریوں کو سپورٹ کرتا ہے: اگر React دو مائیکرو ایپلی کیشنز میں استعمال ہوتا ہے، تو Webpack اسے صرف ایک بار لوڈ کرتا ہے۔ اس سے صارف کے لیے 60% تک ٹریفک کی بچت ہوتی ہے۔ Segment اور Best Buy سمیت بڑی کمپنیاں پروڈکشن میں Module Federation استعمال کرتی ہیں، تعیناتی کے وقت کو گھنٹوں سے منٹوں میں کم کر دیتی ہیں۔

عام مسائل اور ان کے حل

Module Federation کے ساتھ کام کرتے وقت، ڈویلپرز کو اکثر مختلف ورژنز کے مشترکہ انحصار کے تصادم کا سامنا کرنا پڑتا ہے۔ حل اہم لائبریریوں کے لیے واضح طور پر requiredVersion اور singleton: true بتانا ہے۔ دوسرا مسئلہ دور دراز کی تعمیر سے اجزاء درآمد کرتے وقت سیاق و سباق کا کھو جانا ہے، خاص طور پر React Context اور Redux کے ساتھ۔ اسے حل کرنے کے لیے، shared: { react: { singleton: true } } استعمال کریں تاکہ یہ یقینی بنایا جا سکے کہ تمام مائیکرو ایپلی کیشنز React کی ایک مثال استعمال کریں۔ بڑے مائیکرو فرنٹ اینڈ آرکیٹیکچر کے لیے، مشترکہ انحصار کے ورژنز کو ہم آہنگ کرنے اور بلڈ مستقل مزاجی کو یقینی بنانے کے لیے Module Federation کو مونو ریپو سسٹم (Nx, Turborepo) کے ساتھ استعمال کرنے کی سفارش کی جاتی ہے۔