Webpack - ما هو، الهندسة المعمارية ومبدأ العمل

ما هو Webpack؟

Webpack هو أداة تجميع وحدات تحلل تبعيات التطبيق وتعبئتها في ملفات ثابتة للمتصفح أو الخادم. تم إنشاؤه بواسطة Tobias Koppers في عام 2012، وسرعان ما أصبح Webpack معيار التجميع بفضل مفهوم جميع الملفات هي وحدات: JavaScript، CSS، الصور، الخطوط وحتى HTML تتم معالجتها من خلال نظام واحد من اللوادر.

لماذا أصبح Webpack معيار الصناعة

Webpack قدّم فكرة ثورية في عصره: تسمح اللوادر بتضمين أي مورد عبر import أو require. حرّر هذا المطورين من الحاجة إلى استخدام أدوات منفصلة لمعالجات CSS المسبقة (SCSS)، ومجمّعات TypeScript ومحسّنات الصور. بحلول عام 2020، كان Webpack يُستخدم في أكثر من 80% من مشاريع JavaScript (بيانات npm stat: 2019–2024).

المنافسون — Vite و Parcel و Turbopack — يقدمون سرعة تطوير أعلى، لكن Webpack يحتفظ بالريادة في قطاع المؤسسات بفضل الاستقرار والنظام البيئي الناضج والتوافق العكسي. يستغرق الانتقال من Webpack إلى Vite في المشاريع الكبيرة أسابيع وغالبًا ما يُعوق بسبب عدم توافق الإضافات.

كيف يعمل Webpack

Webpack يبني رسمًا بيانيًا للتبعيات بدءًا من نقطة الدخول. كل import أو require يتم العثور عليه يُضاف إلى الرسم البياني، ويمر عبر سلسلة من اللوادر ويُوضع في chunk. يعتمد المخرجات النهائية على التكوين: حزمة واحدة، عدة chunks أو مخرجات مكتبة بتنسيقات 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 هو مصفوفة أو كائن يحدد نقطة دخول واحدة أو أكثر. يُستخدم multi-entry للتطبيقات متعددة المكونات. Output يهيئ ملفات المخرجات: المسار، قالب الاسم، URL العام. Mode — development أو production أو none — يقوم تلقائيًا بتفعيل الإضافات المثلى والقيم الافتراضية لكل وضع.

Content Hash — تضمين تجزئة المحتوى في اسم الملف ([contenthash]) يضمن التخزين المؤقت طويل الأمد. يقوم المتصفح بتحميل ملف جديد فقط عندما يتغير محتواه. SplitChunksPlugin يستخرج تلقائيًا التبعيات المشتركة من نقاط الدخول المختلفة إلى chunks منفصلة، مما يمنع تكرار الكود.

Loaders و Plugins

Loaders تحول الملفات المصدر قبل إضافتها إلى الرسم البياني للتبعيات. كل loader هو دالة تستقبل محتوى الملف وتعيد وحدة JavaScript. Plugins هي إضافات أكثر قوة لديها إمكانية الوصول إلى دورة حياة التجميع بأكملها: من البداية إلى إنشاء ملفات المخرجات.

اللوادر الشائعة والغرض منها

Plugins، على عكس اللوادر، يمكنها تنفيذ إجراءات في أي مرحلة من التجميع. HtmlWebpackPlugin يولد تلقائيًا ملف HTML مع البرامج النصية المرتبطة. MiniCssExtractPlugin يستخرج CSS إلى ملفات منفصلة للتحميل المتوازي. DefinePlugin يسمح بتمرير متغيرات البيئة إلى كود التطبيق أثناء التجميع.

تحسين التجميع باستخدام Webpack

Webpack يوفر آليات تحسين مدمجة: tree shaking و code splitting والضغط. Tree shaking يزيل الصادرات غير المستخدمة من وحدات ES. Code splitting عبر import() يقسم الحزمة إلى chunks ديناميكية. Minimizer — TerserPlugin لـ JS و CssMinimizerPlugin لـ CSS.

تقنيات التحسين المتقدمة

// 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 تستخدم Module Federation في الإنتاج منذ 2021، مما قلّل وقت النشر بنسبة 80%.

Webpack لـ React Native ومشاريع الويب

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 للويب المحمول عن سطح المكتب. التجميع Mobile-first يشمل تصغيرًا عدوانيًا، lazy loading للصور وتحميلًا ذا أولوية لـ CSS الحرج. CompressionPlugin مع ضغط brotli يقلل حجم الحزمة بنسبة 20–25% لشبكات المحمول 3G/4G. استخدم webpack-merge لتقسيم التكوينات لمنصات مختلفة: تجميعات mobile-first ومحسّنة لسطح المكتب.

Webpack 5 Module Federation: الميكروفرونتند

Module Federation هي ميزة ثورية في Webpack 5 تتيح تحميل وحدات JavaScript من تجميعات مستقلة أخرى دون نشرها في npm. يتم تطوير كل تطبيق مصغر بشكل مستقل، وله تكوين 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) لمزامنة إصدارات التبعيات المشتركة وضمان اتساق التجميعات.