From bf1023dc1e2246620e9768de6f1e99a1946e6927 Mon Sep 17 00:00:00 2001
From: !? ReLaX <133292635+RlxChap2@users.noreply.github.com>
Date: Tue, 19 May 2026 04:15:24 +0300
Subject: [PATCH 01/35] feat(arabic): initialize Arabic translation

Translate initial blog and configuration index content to Arabic while preserving MDX structure.

Co-authored-by: ameencfw <ameencfw@users.noreply.github.com>
Co-authored-by: Shimizu Hiroyuki <amtixdev@gmail.com>
---
 .../blog/2020-10-10-webpack-5-release.mdx     | 1739 ++++++++---------
 src/content/blog/2020-12-08-roadmap-2021.mdx  |  275 +--
 src/content/blog/2026-02-03-webpack-5-105.mdx |  137 +-
 src/content/blog/2026-02-04-roadmap-2026.mdx  |  161 +-
 src/content/blog/2026-04-08-webpack-5-106.mdx |  153 +-
 src/content/blog/index.mdx                    |    9 +-
 .../configuration/configuration-languages.mdx |   76 +-
 src/content/configuration/index.mdx           |   41 +-
 8 files changed, 1281 insertions(+), 1310 deletions(-)

diff --git a/src/content/blog/2020-10-10-webpack-5-release.mdx b/src/content/blog/2020-10-10-webpack-5-release.mdx
index 980e688ab7a2..29c1638ad42c 100644
--- a/src/content/blog/2020-10-10-webpack-5-release.mdx
+++ b/src/content/blog/2020-10-10-webpack-5-release.mdx
@@ -2,326 +2,326 @@
 title: Webpack 5 release
 sort: 20201010
 contributors:
-  - sokra
-  - chenxsan
+  - ameencfw
+  - RlxChap2
 ---
 
-Webpack 4 was released in February 2018.
-Since then we shipped a lot of features without breaking changes.
-We know that people dislike major changes with breaking changes.
-Especially with webpack, which people usually only touch twice a year, and the remaining time it "just works".
-But shipping features without breaking changes also has a cost:
-We can't do major API or architectural improvements.
+تم إصدار Webpack 4 في فبراير 2018.
+منذ ذلك الحين قمنا بشحن الكثير من المميزات دون إحداث تغييرات جذرية (breaking changes).
+نحن نعلم أن الناس يكرهون التغييرات الكبيرة التي تصاحبها تغييرات جذرية.
+خاصة مع webpack، الذي عادة ما يتعامل معه الناس مرتين فقط في السنة، وفي بقية الوقت "يعمل ببساطة".
+لكن شحن الميزات دون تغييرات جذرية له تكلفة أيضًا:
+لا يمكننا إجراء تحسينات كبيرة على واجهة برمجة التطبيقات (API) أو البنية المعمارية.
 
-So from time to time, there is a point where the difficulties pile up and we are forced to do breaking changes to not mess everything up.
-That's the time for a new major version.
-So webpack 5 contains these architectural improvements and the features that were not possible to implement without them.
+لذا من وقت لآخر، نصل إلى نقطة تتراكم فيها الصعوبات ونُجبر على إجراء تغييرات جذرية لتجنب إفساد كل شيء.
+هذا هو الوقت المناسب لإصدار رئيسي جديد (major version).
+لذلك يحتوي webpack 5 على هذه التحسينات المعمارية والميزات التي لم يكن من الممكن تنفيذها بدونها.
 
-The major version was also the chance to revise some of the defaults and to align with proposals and specifications that come up in the meantime.
+كان الإصدار الرئيسي أيضًا فرصة لمراجعة بعض الإعدادات الافتراضية ومواءمتها مع المقترحات والمواصفات التي ظهرت في غضون ذلك.
 
-So today (2020-10-10) webpack 5.0.0 is released, but this doesn't mean it's done, bugfree or even feature-complete.
-As with webpack 4 we continue development by fixing problems and adding features.
-In the next days there will probably be a lot bugfixes. Features will come later.
+لذا تم اليوم (2020-10-10) إطلاق webpack 5.0.0، لكن هذا لا يعني أنه مكتمل، أو خالٍ من الأخطاء، أو حتى مكتمل الميزات.
+كما حدث مع webpack 4، نواصل التطوير من خلال إصلاح المشاكل وإضافة الميزات.
+في الأيام القادمة من المحتمل أن يكون هناك الكثير من إصلاحات الأخطاء. ستأتي الميزات لاحقًا.
 
-## Common Questions
+## أسئلة شائعة
 
-### So what does the release mean?
+### إذن ماذا يعني هذا الإصدار؟
 
-It means we finished doing breaking changes.
-Many refactorings have been done to up-level the architecture and create a good base for future features (and current features).
+يعني أننا انتهينا من إجراء التغييرات الجذرية.
+تم إجراء العديد من عمليات إعادة الهيكلة (refactoring) لرفع مستوى البنية وإنشاء قاعدة جيدة للميزات المستقبلية (والميزات الحالية).
 
-### So when is the time to upgrade?
+### إذن متى يحين وقت الترقية؟
 
-It depends. There is a good chance that upgrading fails and you would need to give it a second or 3rd try.
-If you are open to that, try to upgrade now and provide feedback to webpack, plugins and loaders.
-We are eager to fix those problems. Someone has to start and you would be one of the first ones benefiting from it.
+يعتمد الأمر. هناك فرصة جيدة أن تفشل الترقية وقد تحتاج إلى المحاولة للمرة الثانية أو الثالثة.
+إذا كنت منفتحًا على ذلك، فحاول الترقية الآن وقدم ملاحظاتك إلى webpack والإضافات (plugins) والمحملات (loaders).
+نحن حريصون على إصلاح تلك المشاكل. يجب أن يبدأ شخص ما وستكون أنت من أوائل المستفيدين منه.
 
-## Sponsoring Update
+## تحديث الرعاية (Sponsoring Update)
 
-Webpack is fully based upon [sponsoring](https://opencollective.com/webpack).
-It's not tied to (and paid by) a big company like some other Open Source projects.
-99% of the earnings from sponsoring are distributed towards contributors and maintainers based on the contributions they do.
-We believe in investing the money towards making webpack better.
+يعتمد Webpack بالكامل على [الرعاية](https://opencollective.com/webpack).
+إنه غير مرتبط (أو مدفوع الأجر) بشركة كبيرة مثل بعض مشاريع المصادر المفتوحة الأخرى.
+يتم توزيع 99% من أرباح الرعاية على المساهمين والمشرفين بناءً على المساهمات التي يقومون بها.
+نحن نؤمن باستثمار الأموال نحو جعل webpack أفضل.
 
-But there is a pandemic, and companies ain't that much open to sponsoring anymore.
-Webpack is suffering under these circumstances too (like many other companies and people).
+ولكن هناك جائحة، والشركات لم تعد منفتحة كثيرًا على الرعاية كما كانت.
+يعاني Webpack في ظل هذه الظروف أيضًا (مثل العديد من الشركات والأشخاص الآخرين).
 
-We were never able to pay our contributors the amount we think they deserve, but now we only have half of the money available, so we need to make a more serious cut.
-Until the situation improves we will only pay contributors and maintainers the first 10 days of each month.
-The remaining days they could work voluntarily, paid by their employer, work on something else, or take some days off.
-This allows us to pay for their work in the first 10 days more equivalent to the invested time.
+لم نتمكن أبدًا من الدفع لمساهمينا المبلغ الذي نعتقد أنهم يستحقونه، ولكن الآن ليس لدينا سوى نصف الأموال المتاحة، لذا نحن بحاجة إلى إجراء خفض أكثر جدية.
+حتى يتحسن الوضع، سندفع فقط للمساهمين والمشرفين عن الأيام العشرة الأولى من كل شهر.
+أما الأيام المتبقية فيمكنهم العمل بشكل تطوعي، أو بأجر من صاحب عملهم، أو العمل على شيء آخر، أو أخذ بعض أيام الإجازة.
+يتيح لنا ذلك الدفع مقابل عملهم في الأيام العشرة الأولى بما يعادل بشكل أكبر الوقت المستثمر.
 
-The biggest "Thank You" goes to [trivago](https://tech.trivago.com/opensource) which has been sponsoring webpack a huge amount for the last 3 years.
-Sadly they are unable to continue their sponsorship this year, as they have been hit hard by Covid-19.
-I hope some other company steps up and follows these (gigantic) footsteps.
+أكبر كلمة "شكرًا" تذهب إلى [trivago](https://tech.trivago.com/opensource) التي كانت ترعى webpack بمبلغ ضخم على مدار السنوات الثلاث الماضية.
+للأسف هم غير قادرين على الاستمرار في رعايتهم هذا العام، حيث تضرروا بشدة من Covid-19.
+آمل أن تتقدم شركة أخرى وتحذو حذو هذه الخطوات (العملاقة).
 
-Thanks to [all the sponsors](/#sponsors).
+شكرًا لـ [جميع الرعاة](/#sponsors).
 
-## General direction
+## الاتجاه العام
 
-This release focus on the following:
+يركز هذا الإصدار على ما يلي:
 
-- Improve build performance with Persistent Caching.
-- Improve Long Term Caching with better algorithms and defaults.
-- Improve bundle size with better Tree Shaking and Code Generation.
-- Improve compatibility with the web platform.
-- Clean up internal structures that were left in a weird state while implementing features in v4 without introducing any breaking changes.
-- Prepare for future features by introducing breaking changes now, allowing us to stay on v5 for as long as possible.
+- تحسين أداء البناء باستخدام التخزين المؤقت المستمر (Persistent Caching).
+- تحسين التخزين المؤقت طويل المدى (Long Term Caching) بخوارزميات وافتراضيات أفضل.
+- تحسين حجم الحزمة (bundle size) بفضل Tree Shaking وتوليد أكواد أفضل.
+- تحسين التوافق مع منصة الويب.
+- تنظيف الهياكل الداخلية التي تُركت في حالة غريبة أثناء تنفيذ الميزات في الإصدار 4 دون إدخال أي تغييرات جذرية.
+- التحضير للميزات المستقبلية عن طريق إدخال تغييرات جذرية الآن، مما يسمح لنا بالبقاء على الإصدار 5 لأطول فترة ممكنة.
 
-## **Migration** Guide
+## دليل **الترحيل** (Migration Guide)
 
-[See here for a **migration** guide](/migrate/5)
+[انظر هنا للحصول على دليل **الترحيل**](/migrate/5)
 
-## Major Changes: Removals
+## تغييرات رئيسية: الإزالات
 
-### Removed Deprecated Items
+### إزالة العناصر المهملة (Deprecated Items)
 
-All items deprecated in v4 were removed.
+تمت إزالة جميع العناصر التي تم إهمالها في الإصدار 4.
 
-**MIGRATION**: Make sure that your webpack 4 build does not print deprecation warnings.
+**الترحيل**: تأكد من أن بناء webpack 4 الخاص بك لا يطبع تحذيرات الإهمال (deprecation warnings).
 
-Here are a few things that were removed but did not have deprecation warnings in v4:
+إليك بعض الأشياء التي تمت إزالتها ولكن لم تكن تحتوي على تحذيرات إهمال في الإصدار 4:
 
-- IgnorePlugin and BannerPlugin must now be passed only one argument that can be an object, string or function.
+- يجب الآن تمرير وسيط واحد فقط لـ IgnorePlugin و BannerPlugin، يمكن أن يكون كائنًا (object)، أو سلسلة نصية (string)، أو دالة (function).
 
-### Deprecation codes
+### رموز الإهمال (Deprecation codes)
 
-New deprecations include a deprecation code so they are easier to reference.
+تتضمن الإهمالات الجديدة رمز إهمال بحيث يسهل الإشارة إليها.
 
-### Syntax deprecated
+### بنية جمل مهملة (Syntax deprecated)
 
-`require.include` has been deprecated and will emit a warning by default when used.
+تم إهمال `require.include` وسيصدر تحذيرًا بشكل افتراضي عند استخدامه.
 
-Behavior can be changed with `Rule.parser.requireInclude` to allowed, deprecated or disabled.
+يمكن تغيير السلوك باستخدام `Rule.parser.requireInclude` إلى مسموح به (allowed)، مهمل (deprecated)، أو معطل (disabled).
 
-### Automatic Node.js Polyfills Removed
+### إزالة تعويضات Node.js التلقائية (Automatic Node.js Polyfills Removed)
 
-In the early days, webpack's aim was to allow running most Node.js modules in the browser, but the module landscape changed and many module uses are now written mainly for frontend purposes. Webpack &lt;= 4 ships with polyfills for many of the Node.js core modules, which are automatically applied once a module uses any of the core modules (i.e. the `crypto` module).
+في الأيام الأولى، كان هدف webpack هو السماح بتشغيل معظم وحدات Node.js في المتصفح، ولكن المشهد تغير وأصبحت العديد من الوحدات تُكتب الآن بشكل أساسي لأغراض الواجهة الأمامية. يأتي Webpack &lt;= 4 مع تعويضات (polyfills) للعديد من الوحدات الأساسية لـ Node.js، والتي يتم تطبيقها تلقائيًا بمجرد استخدام أي وحدة من الوحدات الأساسية (مثل وحدة `crypto`).
 
-While this makes using modules written for Node.js easier, it adds these huge polyfills to the bundle. In many cases these polyfills are unnecessary.
+في حين أن هذا يجعل استخدام الوحدات المكتوبة لـ Node.js أسهل، إلا أنه يضيف هذه التعويضات الضخمة إلى الحزمة. في كثير من الحالات، تكون هذه التعويضات غير ضرورية.
 
-Webpack 5 stops automatically polyfilling these core modules and focus on frontend-compatible modules. Our goal is to improve compatibility with the web platform, where Node.js core modules are not available.
+يتوقف Webpack 5 عن إضافة التعويضات لهذه الوحدات الأساسية تلقائيًا ويركز على الوحدات المتوافقة مع الواجهة الأمامية. هدفنا هو تحسين التوافق مع منصة الويب، حيث لا تتوفر الوحدات الأساسية لـ Node.js.
 
-**MIGRATION**:
+**الترحيل**:
 
-- Try to use frontend-compatible modules whenever possible.
-- It's possible to manually add a polyfill for a Node.js core module. An error message will give a hint on how to achieve that.
-- Package authors: Use the `browser` field in `package.json` to make a package frontend-compatible. Provide alternative implementations/dependencies for the browser.
+- حاول استخدام الوحدات المتوافقة مع الواجهة الأمامية كلما أمكن ذلك.
+- من الممكن إضافة تعويض (polyfill) يدويًا لوحدة أساسية في Node.js. ستعطي رسالة الخطأ تلميحًا حول كيفية تحقيق ذلك.
+- لمؤلفي الحزم: استخدم حقل `browser` في `package.json` لجعل الحزمة متوافقة مع الواجهة الأمامية. قدم تطبيقات/تبعيات (implementations/dependencies) بديلة للمتصفح.
 
-## Major Changes: Long Term Caching
+## تغييرات رئيسية: التخزين المؤقت طويل المدى (Long Term Caching)
 
-### Deterministic Chunk, Module IDs and Export names
+### الحزم، ومعرفات الوحدات، وأسماء الصادرات الحتمية (Deterministic)
 
-New algorithms were added for long term caching. These are enabled by default in production mode.
+تمت إضافة خوارزميات جديدة للتخزين المؤقت طويل المدى. تم تمكينها بشكل افتراضي في وضع الإنتاج (production mode).
 
 `chunkIds: "deterministic"`
 `moduleIds: "deterministic"`
 `mangleExports: "deterministic"`
 
-The algorithms assign short (3 or 5 digits) numeric IDs to modules and chunks and short (2 characters) names to exports in a deterministic way.
-This is a trade-off between bundle size and long term caching.
+تقوم الخوارزميات بتعيين معرفات رقمية قصيرة (3 أو 5 أرقام) للوحدات والحزم، وأسماء قصيرة (حرفان) للصادرات بطريقة حتمية (deterministic).
+هذا يمثل مقايضة (trade-off) بين حجم الحزمة والتخزين المؤقت طويل المدى.
 
-`moduleIds/chunkIds/mangleExports: false` disables the default behavior and one can provide a custom algorithm via plugin. Note that in webpack 4 `moduleIds/chunkIds: false` without custom plugin resulted in a working build, while in webpack 5 you must provide a custom plugin.
+يقوم `moduleIds/chunkIds/mangleExports: false` بتعطيل السلوك الافتراضي ويمكن للمرء توفير خوارزمية مخصصة عبر إضافة (plugin). لاحظ أنه في webpack 4، كان استخدام `moduleIds/chunkIds: false` بدون إضافة مخصصة يؤدي إلى بناء يعمل، بينما في webpack 5 يجب عليك توفير إضافة مخصصة.
 
-**MIGRATION**: Best use the default values for `chunkIds`, `moduleIds` and `mangleExports`. You can also opt-in to the old defaults `chunkIds: "size", moduleIds: "size", mangleExports: "size"`, this will generate smaller bundles, but invalidate them more often for caching.
+**الترحيل**: من الأفضل استخدام القيم الافتراضية لـ `chunkIds` و `moduleIds` و `mangleExports`. يمكنك أيضًا اختيار الافتراضيات القديمة `chunkIds: "size", moduleIds: "size", mangleExports: "size"`، سيؤدي هذا إلى إنشاء حزم أصغر، ولكنه سيبطل صلاحيتها (invalidate) بشكل متكرر عند التخزين المؤقت.
 
-Note: In webpack 4 hashed module ids yielded reduced gzip performance. This was related to changed module order and has been fixed.
+ملاحظة: في webpack 4، أدت معرفات الوحدات المجزأة (hashed module ids) إلى انخفاض أداء gzip. كان هذا مرتبطًا بتغير ترتيب الوحدات وتم إصلاحه.
 
-Note: In webpack 5, `deterministic` Ids are enabled by default in production mode
+ملاحظة: في webpack 5، تم تفعيل المعرفات `deterministic` بشكل افتراضي في وضع الإنتاج.
 
-### Real Content Hash
+### التجزئة الحقيقية للمحتوى (Real Content Hash)
 
-Webpack 5 will use a real hash of the file content when using `[contenthash]` now. Before it "only" used a hash of the internal structure.
-This can be positive impact on long term caching when only comments are changed or variables are renamed. These changes are not visible after minimizing.
+سيستخدم Webpack 5 تجزئة (hash) حقيقية لمحتوى الملف عند استخدام `[contenthash]` الآن. في السابق كان يستخدم "فقط" تجزئة للبنية الداخلية.
+يمكن أن يكون لهذا تأثير إيجابي على التخزين المؤقت طويل المدى عندما يتم تغيير التعليقات فقط أو إعادة تسمية المتغيرات. هذه التغييرات غير مرئية بعد التصغير (minimizing).
 
-## Major Changes: Development Support
+## تغييرات رئيسية: دعم التطوير (Development Support)
 
-### Named Chunk IDs
+### معرفات الحزم المسماة (Named Chunk IDs)
 
-A new named chunk id algorithm enabled by default in development mode gives chunks (and filenames) human-readable names.
-A Module ID is determined by its path, relative to the `context`.
-A Chunk ID is determined by the chunk's content.
+تم تمكين خوارزمية جديدة لمعرف الحزمة المسمى بشكل افتراضي في وضع التطوير (development mode) لمنح الحزم (وأسماء الملفات) أسماء قابلة للقراءة البشرية.
+يتم تحديد معرف الوحدة (Module ID) من خلال مسارها بالنسبة إلى الـ `context`.
+يتم تحديد معرف الحزمة (Chunk ID) من خلال محتوى الحزمة.
 
-So you no longer need to use `import(/* webpackChunkName: "name" */ "module")` for debugging.
-But it would still make sense if you want to control the filenames for production environments.
+لذلك لم تعد بحاجة إلى استخدام `import(/* webpackChunkName: "name" */ "module")` لأغراض تصحيح الأخطاء (debugging).
+ولكن سيظل من المنطقي استخدامها إذا كنت ترغب في التحكم في أسماء الملفات لبيئات الإنتاج.
 
-It's possible to use `chunkIds: "named"` in production, but make sure not to accidentally expose sensitive information about module names.
+من الممكن استخدام `chunkIds: "named"` في الإنتاج، ولكن تأكد من عدم الكشف عن معلومات حساسة حول أسماء الوحدات عن طريق الخطأ.
 
-**MIGRATION**: If you dislike the filenames being changed in development, you can pass `chunkIds: "natural"` to use the old numeric mode.
+**الترحيل**: إذا كنت تكره تغيير أسماء الملفات في التطوير، يمكنك تمرير `chunkIds: "natural"` لاستخدام الوضع الرقمي القديم.
 
 ### Module Federation
 
-Webpack 5 adds a new feature called "Module Federation", which allows multiple webpack builds to work together.
-From runtime perspective modules from multiple builds will behave like a huge connected module graph.
-From developer perspective modules can be imported from specified remote builds and used with minimal restrictions.
+يضيف Webpack 5 ميزة جديدة تسمى "Module Federation"، والتي تسمح لعدة بنيات (builds) webpack بالعمل معًا.
+من منظور وقت التشغيل (runtime)، ستتصرف الوحدات من عمليات البناء المتعددة وكأنها رسم بياني متصل ضخم للوحدات.
+من منظور المطور، يمكن استيراد الوحدات من عمليات بناء بعيدة (remote) محددة واستخدامها بأقل قدر من القيود.
 
-For more details see [this separate guide](/concepts/module-federation).
+لمزيد من التفاصيل انظر [هذا الدليل المنفصل](/concepts/module-federation).
 
-## Major Changes: New Web Platform Features
+## تغييرات رئيسية: ميزات منصة الويب الجديدة
 
-### JSON modules
+### وحدات JSON (JSON modules)
 
-JSON modules now align with the proposal and emit a warning when a non-default export is used.
-JSON modules no longer have named exports when importing from a strict ECMAScript module.
+تتوافق وحدات JSON الآن مع الاقتراح وتصدر تحذيرًا عند استخدام تصدير غير افتراضي (non-default export).
+لم يعد لوحدات JSON صادرات مسماة (named exports) عند الاستيراد من وحدة ECMAScript صارمة.
 
-**MIGRATION**: Use the default export.
+**الترحيل**: استخدم التصدير الافتراضي (`default export`).
 
-Even when using the default export, unused properties are dropped by the `optimization.usedExports` optimization and properties are mangled by the `optimization.mangleExports` optimization.
+حتى عند استخدام التصدير الافتراضي، يتم إسقاط الخصائص غير المستخدمة بواسطة تحسين `optimization.usedExports` ويتم تغيير الخصائص (mangled) بواسطة تحسين `optimization.mangleExports`.
 
-It's possible to specify a custom JSON parser in `Rule.parser.parse` to import JSON-like files (e.g. for toml, yaml, json5, etc.).
+من الممكن تحديد محلل JSON مخصص في `Rule.parser.parse` لاستيراد ملفات تشبه JSON (مثل toml، yaml، json5، إلخ).
 
 ### import.meta
 
-- `import.meta.webpackHot` is an alias for `module.hot` which is also available in strict ESM
-- `import.meta.webpack` is the webpack major version as number
-- `import.meta.url` is the `file:` url of the current file (similar to `__filename` but as file url)
+- `import.meta.webpackHot` هو اسم مستعار لـ `module.hot` المتاح أيضًا في ESM الصارم.
+- `import.meta.webpack` هو الإصدار الرئيسي لـ webpack كـ رقم.
+- `import.meta.url` هو رابط `file:` للملف الحالي (على غرار `__filename` ولكن كرابط ملف).
 
-### Asset modules
+### وحدات الأصول (Asset modules)
 
-Webpack 5 has now native support for modules representing assets.
-These modules will either emit a file into the output folder or inject a DataURI into the javascript bundle.
-Either way they give a URL to work with.
+يتمتع Webpack 5 الآن بدعم محلي للوحدات التي تمثل الأصول (assets).
+ستقوم هذه الوحدات إما بإخراج ملف إلى مجلد المخرجات (output folder) أو حقن DataURI في حزمة javascript.
+في كلتا الحالتين تمنحك رابط URL للعمل به.
 
-They can be used via multiple ways:
+يمكن استخدامها عبر طرق متعددة:
 
-- `import url from "./image.png"` and setting `type: "asset"` in `module.rules` when matching such import. (old way)
-- `new URL("./image.png", import.meta.url)` (new way)
+- `import url from "./image.png"` وتعيين `type: "asset"` في `module.rules` عند مطابقة مثل هذا الاستيراد. (الطريقة القديمة)
+- `new URL("./image.png", import.meta.url)` (الطريقة الجديدة)
 
-The "new way" syntax was chosen to allow running code without bundler too. This syntax is also available in native ECMAScript modules in the browser.
+تم اختيار بنية "الطريقة الجديدة" للسماح بتشغيل الكود بدون محزم (bundler) أيضًا. تتوفر هذه البنية أيضًا في وحدات ECMAScript المحلية في المتصفح.
 
-### Native Worker support
+### دعم Worker المحلي
 
-When combining `new URL` for assets with `new Worker`/`new SharedWorker`/`navigator.serviceWorker.register` webpack will automatically create a new entrypoint for a web worker.
+عند الجمع بين `new URL` للأصول مع `new Worker`/`new SharedWorker`/`navigator.serviceWorker.register` سيقوم webpack تلقائيًا بإنشاء نقطة دخول جديدة لـ web worker.
 
 `new Worker(new URL("./worker.js", import.meta.url))`
 
-The syntax was chosen to allow running code without bundler too. This syntax is also available in native ECMAScript modules in the browser.
+تم اختيار البنية للسماح بتشغيل الكود بدون محزم أيضًا. تتوفر هذه البنية أيضًا في وحدات ECMAScript المحلية في المتصفح.
 
-### URIs
+### المعرفات المنتظمة (URIs)
 
-Webpack 5 supports handling of protocols in requests.
+يدعم Webpack 5 التعامل مع البروتوكولات في الطلبات (requests).
 
-- `data:` is supported. Base64 or raw encoding is supported. Mimetype can be mapped to loaders and module type in `module.rules`. Example: `import x from "data:text/javascript,export default 42"`
-- `file:` is supported.
-- `http(s):` is supported, but requires opt-in via `new webpack.experiments.schemesHttp(s)UriPlugin()`
-  - By default when targeting "web", these URIs result in requests to external resource (they are externals)
+- `data:` مدعوم. يدعم تشفير Base64 أو الخام (raw). يمكن تعيين Mimetype للمحملات ونوع الوحدة في `module.rules`. مثال: `import x from "data:text/javascript,export default 42"`
+- `file:` مدعوم.
+- `http(s):` مدعوم، لكنه يتطلب التفعيل عبر `new webpack.experiments.schemesHttp(s)UriPlugin()`
+  - افتراضيًا عند استهداف "web"، تؤدي عناوين URI هذه إلى طلبات لموارد خارجية (وهي externals).
 
-Fragments in requests are supported: Example: `./file.js#fragment`
+الأجزاء (Fragments) في الطلبات مدعومة: مثال: `./file.js#fragment`
 
-### Async modules
+### الوحدات غير المتزامنة (Async modules)
 
-Webpack 5 supports so called "async modules".
-That are modules that do not evaluate synchronously, but are async and Promise-based instead.
+يدعم Webpack 5 ما يسمى "الوحدات غير المتزامنة".
+هي الوحدات التي لا يتم تقييمها بشكل متزامن، بل هي غير متزامنة وتعتمد على الوعود (Promise-based).
 
-Importing them via `import` is automatically handled and no additional syntax is needed and difference is hardly notice-able.
+يتم التعامل مع استيرادها عبر `import` تلقائيًا ولا يلزم وجود بنية إضافية والفرق بالكاد يمكن ملاحظته.
 
-Importing them via `require()` will return a Promise that resolves to the exports.
+استيرادها عبر `require()` سيعيد Promise يحل للصادرات (exports).
 
-In webpack there are multiple ways to have async modules:
+في webpack، هناك عدة طرق لامتلاك وحدات غير متزامنة:
 
-- async externals
-- WebAssembly Modules in the new spec
-- ECMAScript Modules that are using Top-Level-Await
+- externals غير متزامنة
+- وحدات WebAssembly في المواصفات الجديدة
+- وحدات ECMAScript التي تستخدم Top-Level-Await
 
-### Externals
+### الخارجيون (Externals)
 
-Webpack 5 adds additional external types to cover more applications:
+يضيف Webpack 5 أنواعًا إضافية للخارجيين لتغطية المزيد من التطبيقات:
 
-`promise`: An expression that evaluates to a Promise. The external module is an async module and the resolved value is used as module exports.
+`promise`: تعبير يتم تقييمه كـ Promise. الوحدة الخارجية هي وحدة غير متزامنة وتُستخدم القيمة التي تم حلها كصادرات للوحدة.
 
-`import`: Native `import()` is used to load the specified request. The external module is an async module.
+`import`: تُستخدم `import()` المحلية لتحميل الطلب المحدد. الوحدة الخارجية هي وحدة غير متزامنة.
 
-`module`: Not implemented yet, but planned to load modules via `import x from "..."`.
+`module`: لم يتم تنفيذها بعد، ولكن من المخطط تحميل الوحدات عبر `import x from "..."`.
 
-`script`: Loads a url via `<script>` tag and gets the exports from a global variable (and optionally properties of it). The external module is an async module.
+`script`: تقوم بتحميل عنوان url عبر علامة `<script>` وتحصل على الصادرات من متغير عام (واختياريًا خصائص منه). الوحدة الخارجية هي وحدة غير متزامنة.
 
-## Major Changes: New Node.js Ecosystem Features
+## تغييرات رئيسية: ميزات نظام Node.js البيئي الجديد
 
-### Resolving
+### التحليل (Resolving)
 
-The `exports` and `imports` field in package.json is now supported.
+حقل `exports` و `imports` في package.json مدعوم الآن.
 
-Yarn PnP is supported natively.
+Yarn PnP مدعوم محليًا.
 
-See more details in [package exports](/guides/package-exports/).
+انظر لمزيد من التفاصيل في [صادرات الحزمة (package exports)](/guides/package-exports/).
 
-## Major Changes: Development Experience
+## تغييرات رئيسية: تجربة التطوير (Development Experience)
 
-### Improved target
+### هدف (target) محسن
 
-Webpack 5 allows to pass a list of targets and also support versions of target.
+يسمح Webpack 5 بتمرير قائمة بالأهداف (targets) ويدعم أيضًا إصدارات الهدف.
 
-Examples: `target: "node14"` `target: ["web", "es2020"]`
+أمثلة: `target: "node14"` `target: ["web", "es2020"]`
 
-This enables us to provide webpack all the information it needs to determine:
+هذا يمكننا من تزويد webpack بجميع المعلومات التي يحتاجها لتحديد:
 
-- chunk loading mechanism, and
-- supported syntax like arrow functions
+- آلية تحميل الحزمة (chunk loading mechanism)، و
+- البنية المدعومة مثل الدوال السهمية (arrow functions)
 
-### Stats
+### الإحصائيات (Stats)
 
-The Stats test format has been improved regarding readability and verbosity. The defaults have been improved to be less verbose and also suitable for large builds.
+تم تحسين تنسيق الإحصائيات من حيث قابلية القراءة والإسهاب. تم تحسين الإعدادات الافتراضية لتكون أقل إسهابًا ومناسبة أيضًا لعمليات البناء الكبيرة.
 
-- Chunk relations are hidden by default now. This can be toggled with `stats.chunkRelations`.
-- Stats differentiate between `files` and `auxiliaryFiles` now.
-- Stats hide module and chunk ids by default now. This can be toggled with `stats.ids`.
-- The list of all modules is sorted by distance to entrypoint now. This can be changed with `stats.modulesSort`.
-- The list of chunk modules is sorted by module name now. This can be changed with `stats.chunkModulesSort`.
-- The list of nested modules in concatenated modules is sorted topologically now. This can be changed with `stats.nestedModulesSort`.
-- Chunks and Assets show chunk id hints now.
-- Assets and modules will display in a tree instead of a list/table.
-- General information is shown in a summary at the end now. It shows webpack version, config name and warnings/errors count.
-- Hash is hidden by default now. This can be changed with `stats.hash`.
-- Timestamp of build is no longer shown by default. This can be enabled with `stats.builtAt`. It will show the timestamp in the summary.
-- Child compilations will no longer shown by default. They can be displayed with `stats.children`.
+- يتم إخفاء علاقات الحزم (Chunk relations) افتراضيًا الآن. يمكن تبديل هذا باستخدام `stats.chunkRelations`.
+- تميز الإحصائيات الآن بين `files` (الملفات) و `auxiliaryFiles` (الملفات المساعدة).
+- تخفي الإحصائيات معرفات الوحدات والحزم افتراضيًا الآن. يمكن تبديل هذا باستخدام `stats.ids`.
+- يتم الآن فرز قائمة بجميع الوحدات حسب المسافة إلى نقطة الدخول (entrypoint). يمكن تغيير ذلك باستخدام `stats.modulesSort`.
+- يتم الآن فرز قائمة وحدات الحزمة حسب اسم الوحدة. يمكن تغيير ذلك باستخدام `stats.chunkModulesSort`.
+- يتم الآن فرز قائمة الوحدات المتداخلة في الوحدات المتسلسلة (concatenated modules) طوبولوجيًا. يمكن تغيير ذلك باستخدام `stats.nestedModulesSort`.
+- تُظهر الحزم والأصول تلميحات لمعرف الحزمة الآن.
+- سيتم عرض الأصول والوحدات في شجرة بدلاً من قائمة/جدول.
+- يتم عرض المعلومات العامة في ملخص في النهاية الآن. يعرض إصدار webpack، واسم التكوين، وعدد التحذيرات/الأخطاء.
+- يتم إخفاء التجزئة (Hash) افتراضيًا الآن. يمكن تغيير ذلك باستخدام `stats.hash`.
+- لم يعد يظهر الطابع الزمني (Timestamp) للبناء بشكل افتراضي. يمكن تفعيله باستخدام `stats.builtAt`. سيُظهر الطابع الزمني في الملخص.
+- لن يتم عرض التجميعات الفرعية (Child compilations) بشكل افتراضي. يمكن عرضها باستخدام `stats.children`.
 
-### Progress
+### التقدم (Progress)
 
-A few improvements have been done to the `ProgressPlugin` which is used for `--progress` by the CLI, but can also be used manually as plugin.
+تم إجراء بعض التحسينات على `ProgressPlugin` والذي يُستخدم من أجل `--progress` بواسطة واجهة سطر الأوامر (CLI)، ولكن يمكن استخدامه أيضًا يدويًا كإضافة (plugin).
 
-It used to only count the processed modules. Now it can count `entries` `dependencies` and `modules`.
-All of them are shown by default now.
+كانت تقوم فقط بحساب الوحدات المعالجة. الآن يمكنها حساب الـ `entries` (المدخلات)، `dependencies` (التبعيات)، و `modules` (الوحدات).
+يتم عرضها جميعًا بشكل افتراضي الآن.
 
-It used to display the currently processed module. This caused much stderr output and yielded a performance problem on some consoles.
-This is now disabled by default (`activeModules` option). This also reduces the amount of spam on the console.
-Now writing to stderr during building modules is throttled to 500ms.
+كانت تقوم بعرض الوحدة التي تتم معالجتها حاليًا. تسبب هذا في الكثير من مخرجات الخطأ القياسي (stderr output) وأسفر عن مشكلة في الأداء على بعض الطرفيات (consoles).
+تم تعطيل هذا الآن بشكل افتراضي (خيار `activeModules`). وهذا يقلل أيضًا من كمية الرسائل المزعجة على الطرفية.
+الآن يتم تقييد الكتابة إلى الخطأ القياسي (stderr) أثناء بناء الوحدات إلى 500 مللي ثانية.
 
-The profiling mode also got an upgrade and will display timings of nested progress messages.
-This makes it easier to figure out which plugin is causing performance problems.
+حصل وضع ملفات التعريف (profiling mode) أيضًا على ترقية وسيعرض توقيتات رسائل التقدم المتداخلة.
+هذا يجعل من السهل معرفة أي إضافة تسبب مشاكل في الأداء.
 
-A newly added `percentBy`-option tells `ProgressPlugin` how to calculate progress percentage.
+يخبر الخيار المُضاف حديثًا `percentBy` إضافة `ProgressPlugin` بكيفية حساب نسبة التقدم.
 
 ```js
 new webpack.ProgressPlugin({ percentBy: "entries" });
 ```
 
-To make progress percentage more accurate `ProgressPlugin` caches the last known total modules count and reuses this value on the next build. The first build will warm the cache but the following builds will use and update this value.
+لجعل نسبة التقدم أكثر دقة، تقوم `ProgressPlugin` بتخزين آخر عدد إجمالي معروف للوحدات وتعيد استخدام هذه القيمة في البناء التالي. سيقوم البناء الأول بتسخين ذاكرة التخزين المؤقت ولكن البنيات التالية ستستخدم وتُحدّث هذه القيمة.
 
-### Automatic unique naming
+### التسمية الفريدة التلقائية (Automatic unique naming)
 
-In webpack 4 multiple webpack runtimes could conflict on the same HTML page, because they use the same global variable for chunk loading. To fix that it was needed to provide a custom name to the `output.jsonpFunction` configuration.
+في webpack 4، كان بإمكان أوقات تشغيل (runtimes) webpack المتعددة أن تتعارض في نفس صفحة HTML، لأنها تستخدم نفس المتغير العام (global variable) لتحميل الحزم. لإصلاح ذلك، كان من الضروري توفير اسم مخصص في تكوين `output.jsonpFunction`.
 
-Webpack 5 does automatically infer a unique name for the build from `package.json` `name` and uses this as default for `output.uniqueName`.
+يقوم Webpack 5 تلقائيًا باستنتاج اسم فريد للبناء من `name` في `package.json` ويستخدم هذا كإعداد افتراضي لـ `output.uniqueName`.
 
-This value is used to make all potential conflicting globals unique.
+تُستخدم هذه القيمة لجعل جميع المتغيرات العامة المتعارضة المحتملة فريدة من نوعها.
 
-**MIGRATION**: Remove `output.jsonpFunction` in favor of a unique name in your `package.json`.
+**الترحيل**: أزل `output.jsonpFunction` لصالح اسم فريد في `package.json`.
 
-### Automatic public path
+### المسار العام التلقائي (Automatic public path)
 
-Webpack 5 will determine the `output.publicPath` automatically when possible.
+سيقوم Webpack 5 بتحديد `output.publicPath` تلقائيًا كلما أمكن ذلك.
 
-### Typescript typings
+### أنواع Typescript (Typescript typings)
 
-Webpack 5 generates typescript typings from source code and exposes them via the npm package.
+يقوم Webpack 5 بتوليد أنواع typescript من الكود المصدري ويعرضها عبر حزمة npm.
 
-**MIGRATION**: Remove `@types/webpack`. Update references when names differ.
+**الترحيل**: أزل `@types/webpack`. قم بتحديث المراجع (references) عندما تختلف الأسماء.
 
-## Major Changes: Optimization
+## تغييرات رئيسية: التحسين (Optimization)
 
-### Nested tree-shaking
+### اهتزاز الشجرة المتداخل (Nested tree-shaking)
 
-Webpack is now able to track access to nested properties of exports. This can improve Tree Shaking (Unused export elimination and export mangling) when reexporting namespace objects.
+أصبح Webpack الآن قادرًا على تتبع الوصول إلى الخصائص المتداخلة للصادرات. يمكن أن يؤدي ذلك إلى تحسين Tree Shaking (إزالة الصادرات غير المستخدمة وتغيير أسماء الصادرات) عند إعادة تصدير كائنات مساحات الأسماء (namespace objects).
 
 **inner.js**
 
@@ -334,7 +334,7 @@ export const b = 2;
 
 ```js
 export * as inner from "./inner";
-// or import * as inner from './inner'; export { inner };
+// أو import * as inner from './inner'; export { inner };
 ```
 
 **user.js**
@@ -345,13 +345,13 @@ import * as module from "./module";
 console.log(module.inner.a);
 ```
 
-In this example, the export `b` can be removed in production mode.
+في هذا المثال، يمكن إزالة التصدير `b` في وضع الإنتاج.
 
-### Inner-module tree-shaking
+### اهتزاز الشجرة للوحدة الداخلية (Inner-module tree-shaking)
 
-Webpack 4 didn't analyze dependencies between exports and imports of a module. Webpack 5 has a new option `optimization.innerGraph`, which is enabled by default in production mode, that runs an analysis on symbols in a module to figure out dependencies from exports to imports.
+لم يقم Webpack 4 بتحليل التبعيات بين صادرات واستيرادات الوحدة. يمتلك Webpack 5 خيارًا جديدًا `optimization.innerGraph`، وهو مفعل افتراضيًا في وضع الإنتاج، والذي يُجري تحليلاً على الرموز في وحدة لمعرفة التبعيات من الصادرات إلى الاستيرادات.
 
-In a module like this:
+في وحدة مثل هذه:
 
 ```js
 import { something } from "./something";
@@ -365,143 +365,143 @@ export function test() {
 }
 ```
 
-The inner graph algorithm will figure out that `something` is only used when the `test` export is used. This allows to flag more exports as unused and to omit more code from the bundle.
+سيكتشف خوارزمية الرسم البياني الداخلي (inner graph) أن `something` يُستخدم فقط عند استخدام التصدير `test`. يتيح هذا وضع علامة على المزيد من الصادرات على أنها غير مستخدمة وحذف المزيد من التعليمات البرمجية من الحزمة.
 
-When `"sideEffects": false` is set, this allows to omit even more modules. In this example `./something` will be omitted when the `test` export is unused.
+عند ضبط `"sideEffects": false`، يسمح هذا بحذف المزيد من الوحدات. في هذا المثال سيتم حذف `./something` عندما يكون التصدير `test` غير مستخدم.
 
-To get the information about unused exports `optimization.usedExports` is required. To remove side-effect-free modules `optimization.sideEffects` is required.
+للحصول على معلومات حول الصادرات غير المستخدمة، يلزم وجود `optimization.usedExports`. ولإزالة الوحدات الخالية من الآثار الجانبية، يلزم وجود `optimization.sideEffects`.
 
-The following symbols can be analysed:
+يمكن تحليل الرموز التالية:
 
-- function declarations
-- class declarations
-- `export default` with or variable declarations with
-  - function expressions
-  - class expressions
-  - sequence expressions
-  - `/*#__PURE__*/` expressions
-  - local variables
-  - imported bindings
+- تصريحات الدوال (function declarations)
+- تصريحات الفئات (class declarations)
+- `export default` مع المتغيرات أو تصريحات المتغيرات مع:
+  - تعبيرات الدوال (function expressions)
+  - تعبيرات الفئات (class expressions)
+  - التعبيرات المتسلسلة (sequence expressions)
+  - تعبيرات `/*#__PURE__*/`
+  - المتغيرات المحلية (local variables)
+  - الروابط المستوردة (imported bindings)
 
-**FEEDBACK**: If you find something missing in this analysis, please report an issue and we consider adding it.
+**ملاحظاتك (FEEDBACK)**: إذا وجدت شيئًا مفقودًا في هذا التحليل، يرجى الإبلاغ عن مشكلة وسننظر في إضافتها.
 
-Using `eval()` will bail-out this optimization for a module, because evaled code could reference any symbol in scope.
+سيؤدي استخدام `eval()` إلى الخروج من هذا التحسين للوحدة، لأن الكود الذي يتم تقييمه (evaled code) يمكن أن يشير إلى أي رمز في النطاق (scope).
 
-This optimization is also known as Deep Scope Analysis.
+يُعرف هذا التحسين أيضًا باسم Deep Scope Analysis (تحليل النطاق العميق).
 
-### CommonJs Tree Shaking
+### اهتزاز شجرة CommonJs (CommonJs Tree Shaking)
 
-Webpack used to opt-out from used exports analysing for CommonJs exports and `require()` calls.
+كان Webpack ينسحب من تحليل الصادرات المستخدمة لصادرات CommonJs واستدعاءات `require()`.
 
-Webpack 5 adds support for some CommonJs constructs, allows to eliminate unused CommonJs exports and track referenced export names from `require()` calls.
+يضيف Webpack 5 دعمًا لبعض هياكل CommonJs، ويسمح بالتخلص من صادرات CommonJs غير المستخدمة وتتبع أسماء التصدير المشار إليها من استدعاءات `require()`.
 
-The following constructs are supported:
+الهياكل التالية مدعومة:
 
 - `exports|this|module.exports.xxx = ...`
-- `exports|this|module.exports = require("...")` (reexport)
-- `exports|this|module.exports.xxx = require("...").xxx` (reexport)
+- `exports|this|module.exports = require("...")` (إعادة تصدير)
+- `exports|this|module.exports.xxx = require("...").xxx` (إعادة تصدير)
 - `Object.defineProperty(exports|this|module.exports, "xxx", ...)`
 - `require("abc").xxx`
 - `require("abc").xxx()`
-- importing from ESM
-- `require()` a ESM
-- flagged exportType (special handling for non-strict ESM import):
+- الاستيراد من ESM
+- `require()` لـ ESM
+- flagged exportType (معالجة خاصة لاستيراد ESM غير الصارم):
   - `Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })`
   - `exports|this|module.exports.__esModule = true|!0`
-- It's planned to support more constructs in future
+- من المخطط دعم المزيد من الهياكل في المستقبل
 
-When detecting not analysable code, webpack bails out and doesn't track export information at all for these modules (for performance reasons).
+عند اكتشاف كود غير قابل للتحليل، ينسحب webpack ولا يتتبع معلومات التصدير على الإطلاق لهذه الوحدات (لأسباب تتعلق بالأداء).
 
-### Side-Effect analysis
+### تحليل الآثار الجانبية (Side-Effect analysis)
 
-The `"sideEffects"` flag in package.json allows to manually flag modules as side-effect-free, which allows to drop them when unused.
+تسمح علامة `"sideEffects"` في `package.json` بوضع علامة يدويًا على الوحدات بأنها خالية من الآثار الجانبية، مما يسمح بحذفها عند عدم استخدامها.
 
-Webpack 5 can also automatically flag modules as side-effect-free according to a static analysis of the source code.
+يمكن لـ Webpack 5 أيضًا وضع علامة تلقائيًا على الوحدات كخالية من الآثار الجانبية وفقًا للتحليل الثابت للكود المصدري.
 
-### Optimization per runtime
+### التحسين لكل وقت تشغيل (Optimization per runtime)
 
-Webpack 5 is now able (and does by default) to analyse and optimize modules per runtime (A runtime is often equal to an entrypoint).
-This allows to only exports in these entrypoints where they are really needed.
-Entrypoints doesn't affect each other (as long as using a runtime per entrypoint)
+أصبح Webpack 5 الآن قادرًا (ويفعل ذلك افتراضيًا) على تحليل وتحسين الوحدات لكل وقت تشغيل (غالبًا ما يكون وقت التشغيل مساويًا لنقطة الدخول entrypoint).
+هذا يسمح بتصديرها فقط في نقاط الدخول هذه حيث تكون هناك حاجة فعلية إليها.
+لا تؤثر نقاط الدخول على بعضها البعض (طالما تم استخدام وقت تشغيل لكل نقطة دخول).
 
-### Module Concatenation
+### تسلسل الوحدات (Module Concatenation)
 
-Module Concatenation also works per runtime to allow different concatenation for each runtime.
+يعمل تسلسل الوحدات أيضًا لكل وقت تشغيل للسماح بتسلسل مختلف لكل وقت تشغيل.
 
-Module Concatenation has become a first class citizen and any module and dependency is now allowed to implement it.
-Initially webpack 5 already added support for ExternalModules and json modules, more will likely ship soonish.
+أصبح تسلسل الوحدات مواطنًا من الدرجة الأولى ويُسمح الآن لأي وحدة وتابعية (dependency) بتنفيذه.
+مبدئيًا أضاف webpack 5 بالفعل دعمًا للوحدات الخارجية (ExternalModules) ووحدات json، ومن المحتمل أن يتم شحن المزيد قريبًا.
 
-### General Tree Shaking improvements
+### تحسينات Tree Shaking العامة (General Tree Shaking improvements)
 
-`export *` has been improved to track more info and do no longer flag the `default` export as used.
+تم تحسين `export *` لتتبع المزيد من المعلومات ولم يعد يضع علامة على التصدير `default` كمستخدم.
 
-`export *` will now show warnings when webpack is sure that there are conflicting exports.
+سيُظهر `export *` الآن تحذيرات عندما يتأكد webpack من وجود صادرات متعارضة.
 
-`import()` allows to manually tree shake the module via `/* webpackExports: ["abc", "default"] */` magic comment.
+تسمح `import()` باهتزاز الشجرة للوحدة يدويًا عبر التعليق السحري `/* webpackExports: ["abc", "default"] */`.
 
-### Development Production Similarity
+### التشابه بين التطوير والإنتاج (Development Production Similarity)
 
-We try to find a good trade-off between build performance in development mode and avoiding production-only problems by improving the similarity between both modes.
+نحاول إيجاد توازن جيد بين أداء البناء في وضع التطوير وتجنب المشاكل الخاصة بالإنتاج فقط عن طريق تحسين التشابه بين كلا الوضعين.
 
-Webpack 5 enables the `sideEffects` optimization by default in both modes. In webpack 4 this optimization lead to some production-only errors because of an incorrect `"sideEffects"` flag in package.json. Enabling this optimization in development allows to find these problems faster and easier.
+يُفعل Webpack 5 تحسين `sideEffects` افتراضيًا في كلا الوضعين. في webpack 4، أدى هذا التحسين إلى بعض الأخطاء الخاصة بالإنتاج فقط بسبب علامة `"sideEffects"` غير صحيحة في package.json. يتيح تفعيل هذا التحسين في التطوير العثور على هذه المشاكل بشكل أسرع وأسهل.
 
-In many cases development and production happen on different OS with different case-sensitivity of filesystem, so webpack 5 adds a few more warnings/errors when there is something weird casing-wise.
+في كثير من الحالات، يحدث التطوير والإنتاج على أنظمة تشغيل مختلفة مع حساسية مختلفة لحالة الأحرف (case-sensitivity) في نظام الملفات، لذا يضيف webpack 5 المزيد من التحذيرات/الأخطاء عندما يكون هناك شيء غريب فيما يتعلق بحالة الأحرف.
 
-### Improved Code Generation
+### توليد الكود المحسن (Improved Code Generation)
 
-Webpack detects when ASI happens and generates shorter code when no semicolons are inserted. `Object(...)` -> `(0, ...)`
+يكتشف Webpack متى يحدث الإدراج التلقائي للفواصل المنقوطة (ASI) ويولد كودًا أقصر عند عدم إدراج فواصل منقوطة. `Object(...)` -> `(0, ...)`
 
-Webpack merges multiple export getters into a single runtime function call: `r.d(x, "a", () => a); r.d(x, "b", () => b);` -> `r.d(x, {a: () => a, b: () => b});`
+يدمج Webpack وظائف الحصول على الصادرات (export getters) المتعددة في استدعاء وظيفة وقت تشغيل واحدة: `r.d(x, "a", () => a); r.d(x, "b", () => b);` -> `r.d(x, {a: () => a, b: () => b});`
 
-There are additional options in `output.environment` now.
-They allows specifying which ECMAScript feature can be used for runtime code generated by webpack.
+هناك خيارات إضافية في `output.environment` الآن.
+تسمح بتحديد ميزة ECMAScript التي يمكن استخدامها لرمز وقت التشغيل المُنشأ بواسطة webpack.
 
-One usually do not specify this option directly, but would use the `target` option instead.
+عادة لا يحدد المرء هذا الخيار مباشرة، ولكنه يستخدم خيار `target` بدلاً من ذلك.
 
-Webpack 4 used to only emit ES5 code.
-Webpack 5 can generate both ES5 and ES6/ES2015 code now.
+كان Webpack 4 يصدر كود ES5 فقط.
+يمكن لـ Webpack 5 الآن توليد كل من كود ES5 و ES6/ES2015.
 
-Supporting only modern browsers will generate shorter code using arrow functions and more spec-conform code using `const` declarations with TDZ for `export default`.
+سيؤدي دعم المتصفحات الحديثة فقط إلى إنشاء رمز أقصر باستخدام الدوال السهمية (arrow functions) وكود أكثر توافقًا مع المواصفات باستخدام تصريحات `const` مع TDZ لـ `export default`.
 
-### Improved `target` option
+### خيار `target` المحسن
 
-In webpack 4 the `target` was a rough choice between `"web"` and `"node"` (and a few others).
-Webpack 5 gives you more options here.
+في webpack 4 كان `target` خيارًا تقريبيًا بين `"web"` و `"node"` (وبضعة خيارات أخرى).
+يمنحك Webpack 5 المزيد من الخيارات هنا.
 
-The `target` option now influences more things about the generated code than before:
+يؤثر خيار `target` الآن على أشياء أكثر حول الكود المُنشأ عما سبق:
 
-- method of chunk loading
-- format of chunks
-- method of wasm loading
-- method of chunk and wasm loading in workers
-- global object used
-- if publicPath should be determined automatically
-- ECMAScript features/syntax used in the generated code
-- `externals` enabled by default
-- Behavior of some Node.js compat layers (`global`, `__filename`, `__dirname`)
-- Resolving of modules (`browser` field, `exports` and `imports` conditions)
-- Some loaders might change behavior based on that
+- طريقة تحميل الحزمة
+- تنسيق الحزم
+- طريقة تحميل wasm
+- طريقة تحميل الحزمة و wasm في العمال (workers)
+- الكائن العام (global object) المستخدم
+- ما إذا كان يجب تحديد publicPath تلقائيًا
+- ميزات/بناء جملة ECMAScript المستخدمة في الكود المُنشأ
+- `externals` مُمَكّنة بشكل افتراضي
+- سلوك بعض طبقات التوافق (compat layers) الخاصة بـ Node.js مثل (`global`، `__filename`، `__dirname`)
+- تحليل الوحدات (حقل `browser`، وشروط `exports` و `imports`)
+- قد تغير بعض المحملات (loaders) سلوكها بناءً على ذلك
 
-For some of these things the choice between `"web"` and `"node"` is too rough and we need more information.
-Therefore we allow to specify the minimum version e.g. like `"node10.13"` and infer more properties about the target environment.
+بالنسبة لبعض هذه الأشياء، يكون الاختيار بين `"web"` و `"node"` تقريبيًا للغاية ونحتاج إلى مزيد من المعلومات.
+لذلك نسمح بتحديد الحد الأدنى للإصدار مثل `"node10.13"` واستنتاج المزيد من الخصائص حول بيئة الهدف.
 
-It's now also allowed to combined multiple targets with an array and webpack will determine the minimum properties of all targets. Using an array is also useful when using targets that doesn't give full information like `"web"` or `"node"` (without version number). E. g. `["web", "es2020"]` combines these two partial targets.
+يُسمح الآن أيضًا بدمج عدة أهداف مع مصفوفة وسيقوم webpack بتحديد الحد الأدنى من خصائص جميع الأهداف. استخدام مصفوفة مفيد أيضًا عند استخدام أهداف لا تعطي معلومات كاملة مثل `"web"` أو `"node"` (بدون رقم إصدار). على سبيل المثال `["web", "es2020"]` يجمع بين هذين الهدفين الجزئيين.
 
-There is a target `"browserslist"` which will use browserslist data to determine properties of the environment.
-This target is also used by default when there is a browserslist config available in the project. When none such config is available, the `"web"` target will be used by default.
+هناك هدف `"browserslist"` والذي سيستخدم بيانات browserslist لتحديد خصائص البيئة.
+يُستخدم هذا الهدف أيضًا بشكل افتراضي عندما يكون هناك تكوين browserslist متاح في المشروع. في حالة عدم توفر مثل هذا التكوين، سيتم استخدام هدف `"web"` بشكل افتراضي.
 
-Some combinations and features are not yet implemented and will result in errors. They are preparations for future features. Examples:
+لم يتم تنفيذ بعض المجموعات والميزات بعد وستؤدي إلى أخطاء. إنها تحضيرات لميزات مستقبلية. أمثلة:
 
-- `["web", "node"]` will lead to an universal chunk loading method, which is not implemented yet
-- `["web", "node"]` + `output.module: true` will lead to a module chunk loading method, which is not implemented yet
-- `"web"` will lead to `http(s):` imports being treated as `module` externals, which are not implemented yet (Workaround: `externalsPresets: { web: false, webAsync: true }`, which will use `import()` instead).
+- `["web", "node"]` سيؤدي إلى طريقة تحميل حزمة عالمية (universal chunk loading method)، والتي لم يتم تنفيذها بعد
+- `["web", "node"]` + `output.module: true` سيؤدي إلى طريقة تحميل حزمة وحدة (module chunk loading method)، والتي لم يتم تنفيذها بعد
+- `"web"` سيؤدي إلى معاملة استيرادات `http(s):` كعناصر خارجية (externals) من النوع `module`، والتي لم يتم تنفيذها بعد (حل بديل: `externalsPresets: { web: false, webAsync: true }`، والذي سيستخدم `import()` بدلاً من ذلك).
 
-### SplitChunks and Module Sizes
+### تقسيم الحزم وأحجام الوحدات (SplitChunks and Module Sizes)
 
-Modules now express size in a better way than a single number. There are different types of sizes now.
+تُعبّر الوحدات الآن عن الحجم بطريقة أفضل من رقم واحد. هناك أنواع مختلفة من الأحجام الآن.
 
-The SplitChunksPlugin now knows how to handle these different sizes and uses them for `minSize` and `maxSize`.
-By default, only `javascript` size is handled, but you can now pass multiple values to manage them:
+يعرف SplitChunksPlugin الآن كيفية التعامل مع هذه الأحجام المختلفة ويستخدمها لـ `minSize` و `maxSize`.
+بشكل افتراضي، يتم التعامل مع حجم `javascript` فقط، ولكن يمكنك الآن تمرير قيم متعددة لإدارتها:
 
 ```js
 module.exports = {
@@ -516,15 +516,15 @@ module.exports = {
 };
 ```
 
-You can still use a single number for sizes. In this case webpack will automatically use the default size types.
+لا يزال بإمكانك استخدام رقم واحد للأحجام. في هذه الحالة، سيستخدم webpack أنواع الأحجام الافتراضية تلقائيًا.
 
-The `mini-css-extract-plugin` uses `css/mini-extra` as size type, and adds this size type to the default types automatically.
+يستخدم `mini-css-extract-plugin` نوع الحجم `css/mini-extra`، ويضيف نوع الحجم هذا إلى الأنواع الافتراضية تلقائيًا.
 
-## Major Changes: Performance
+## تغييرات رئيسية: الأداء (Performance)
 
-### Persistent Caching
+### التخزين المؤقت المستمر (Persistent Caching)
 
-There is now a filesystem cache. It's opt-in and can be enabled with the following configuration:
+يوجد الآن نظام تخزين مؤقت على نظام الملفات (filesystem cache). يتطلب الاشتراك (opt-in) ويمكن تفعيله باستخدام التكوين التالي:
 
 ```js
 module.exports = {
@@ -543,114 +543,114 @@ module.exports = {
 };
 ```
 
-Important notes:
+ملاحظات هامة:
 
-By default, webpack assumes that the `node_modules` directory, which webpack is inside of, is **only** modified by a package manager. Hashing and timestamping is skipped for `node_modules`.
-Instead, only the package name and version is used for performance reasons.
-Symlinks (i. e. `npm/yarn link`) are fine as long `resolve.symlinks: false` is not specified (avoid that anyway).
-Do not edit files in `node_modules` directly unless you opt-out of this optimization with `snapshot.managedPaths: []`.
-When using Yarn PnP webpack assumes that the yarn cache is immutable (which it usually is).
-You can opt-out of this optimization with `snapshot.immutablePaths: []`
+افتراضيًا، يفترض webpack أن مجلد `node_modules`، الذي يتواجد بداخله webpack، يتم تعديله **فقط** بواسطة مدير الحزم (package manager). يتم تخطي حساب التجزئة (Hashing) والطابع الزمني (timestamping) لمجلد `node_modules`.
+بدلاً من ذلك، يتم استخدام اسم الحزمة وإصدارها فقط لأسباب تتعلق بالأداء.
+الروابط الرمزية (Symlinks) (أي `npm/yarn link`) لا بأس بها طالما لم يتم تحديد `resolve.symlinks: false` (تجنب ذلك على أي حال).
+لا تقم بتعديل الملفات في `node_modules` مباشرة إلا إذا انسحبت (opt-out) من هذا التحسين باستخدام `snapshot.managedPaths: []`.
+عند استخدام Yarn PnP، يفترض webpack أن التخزين المؤقت لـ yarn غير قابل للتغيير (وهو ما يكون عليه عادةً).
+يمكنك الانسحاب من هذا التحسين باستخدام `snapshot.immutablePaths: []`
 
-The cache will be stored into `node_modules/.cache/webpack` (when using node_modules) resp. `.yarn/.cache/webpack` (when using Yarn PnP) by default.
-You probably never have to delete it manually, when all plugins handle caching correctly.
+سيتم حفظ ذاكرة التخزين المؤقت في `node_modules/.cache/webpack` (عند استخدام node_modules) أو في `.yarn/.cache/webpack` (عند استخدام Yarn PnP) بشكل افتراضي.
+من المحتمل أنك لن تضطر أبدًا إلى حذفه يدويًا، عندما تتعامل جميع الإضافات مع التخزين المؤقت بشكل صحيح.
 
-Many internal plugins will use the Persistent Cache too. Examples: `SourceMapDevToolPlugin` (to cache the SourceMap generation) or `ProgressPlugin` (to cache the number of modules)
+العديد من الإضافات الداخلية ستستخدم "التخزين المؤقت المستمر" أيضًا. أمثلة: `SourceMapDevToolPlugin` (لتخزين توليد خريطة المصدر مؤقتًا) أو `ProgressPlugin` (لتخزين عدد الوحدات مؤقتًا)
 
-The Persistent Cache will automatically create multiple cache files depending on usage to optimize read and write access to and from the cache.
+سيقوم التخزين المؤقت المستمر تلقائيًا بإنشاء ملفات ذاكرة تخزين مؤقت متعددة اعتمادًا على الاستخدام لتحسين الوصول للقراءة والكتابة من وإلى ذاكرة التخزين المؤقت.
 
-By default timestamps will be used for snapshotting in development mode and file hashes in production mode.
-File hashes allow to use Persistent Caching on CI too.
+بشكل افتراضي، سيتم استخدام الطوابع الزمنية (timestamps) لأخذ اللقطات (snapshotting) في وضع التطوير (development mode) وتجزئة الملفات (file hashes) في وضع الإنتاج.
+تسمح تجزئة الملفات باستخدام التخزين المؤقت المستمر في عمليات التكامل المستمر (CI) أيضًا.
 
-#### Compiler Idle and Close
+#### خمول المترجم وإغلاقه (Compiler Idle and Close)
 
-Compilers now need to be closed after being used. Compilers now enter and leave the idle state and have hooks for these states. Plugins may use these hooks to do unimportant work. (i. e. the Persistent cache slowly stores the cache to disk). On compiler close - All remaining work should be finished as fast as possible. A callback signals the closing as done.
+تحتاج المترجمات (Compilers) الآن إلى الإغلاق بعد استخدامها. المترجمات تدخل الآن وتترك حالة الخمول (idle state) ولها خطافات (hooks) لهذه الحالات. قد تستخدم الإضافات هذه الخطافات للقيام بأعمال غير مهمة. (أي أن التخزين المؤقت المستمر يقوم ببطء بتخزين ذاكرة التخزين المؤقت على القرص). عند إغلاق المترجم - يجب الانتهاء من جميع الأعمال المتبقية في أسرع وقت ممكن. تشير دالة استدعاء (callback) إلى الانتهاء من الإغلاق.
 
-Plugins and their respective authors should expect that some users may forget to close the Compiler. So, all work should eventually be finishing while in idle too. Processes should be prevented from exiting when the work is being done.
+يجب أن تتوقع الإضافات ومؤلفوها أن بعض المستخدمين قد ينسون إغلاق المترجم. لذلك، يجب أن تنتهي كل الأعمال في النهاية أثناء الخمول أيضًا. يجب منع العمليات من الخروج عند إنجاز العمل.
 
-The `webpack()` façade automatically calls `close` when being passed a callback.
+تستدعي واجهة `webpack()` تلقائيًا `close` عند تمرير دالة استدعاء.
 
-**MIGRATION**: While using the Node.js API, make sure to call `Compiler.close` when done.
+**الترحيل**: أثناء استخدام Node.js API، تأكد من استدعاء `Compiler.close` عند الانتهاء.
 
-### File Emitting
+### إصدار الملف (File Emitting)
 
-Webpack used to always emit all output files during the first build but skipped writing unchanged files during incremental (watch) builds.
-It is assumed that nothing else changes output files while webpack is running.
+كان Webpack يقوم دائمًا بإصدار جميع ملفات الإخراج أثناء البناء الأول ولكنه يتخطى كتابة الملفات غير المتغيرة أثناء عمليات البناء المتزايدة (بناء المراقب - watch builds).
+يُفترض أنه لا يوجد شيء آخر يغير ملفات المخرجات أثناء تشغيل webpack.
 
-With Persistent Caching added a watch-like experience should be given even when restarting the webpack process, but it would be a too strong assumption to think that nothing else changes the output directory even when webpack is not running.
+مع إضافة "التخزين المؤقت المستمر"، يجب إعطاء تجربة تشبه المراقبة (watch-like) حتى عند إعادة تشغيل عملية webpack، ولكن سيكون من الافتراض القوي جدًا الاعتقاد بأنه لا يوجد شيء آخر يغير دليل المخرجات حتى عندما لا يكون webpack قيد التشغيل.
 
-So webpack will now check existing files in the output directory and compares their content with the output file in memory. It will only write the file when it has been changed.
-This is only done on the first build. Any incremental build will always write the file when a new asset has been generated in the running webpack process.
+لذا سيقوم webpack الآن بفحص الملفات الموجودة في دليل المخرجات ويقارن محتواها مع ملف المخرجات في الذاكرة. سيقوم بكتابة الملف فقط عندما يكون قد تم تغييره.
+يتم ذلك فقط في البناء الأول. ستقوم أي عملية بناء متزايدة دائمًا بكتابة الملف عند إنشاء أصل جديد في عملية webpack قيد التشغيل.
 
-We assume that webpack and plugins only generate new assets when content has been changed. Caching should be used to ensure that no new asset is generated when input is equal.
-Not following this advice will degrade performance.
+نحن نفترض أن webpack والإضافات تقوم فقط بإنشاء أصول جديدة عند تغيير المحتوى. يجب استخدام التخزين المؤقت للتأكد من عدم إنشاء أصل جديد عندما تكون المدخلات متساوية.
+عدم اتباع هذه النصيحة سيؤدي إلى انخفاض الأداء.
 
-Files that are flagged as `[immutable]` (including a content hash), will never be written when a file with the same name already exists.
-We assume that the content hash will change when file content changes.
-This is true in general, but might not be always true during webpack or plugin development.
+الملفات التي تم تمييزها بعلامة `[immutable]` (بما في ذلك تجزئة المحتوى)، لن يتم كتابتها أبدًا عند وجود ملف بنفس الاسم بالفعل.
+نفترض أن تجزئة المحتوى ستتغير عندما يتغير محتوى الملف.
+هذا صحيح بشكل عام، ولكنه قد لا يكون صحيحًا دائمًا أثناء تطوير webpack أو الإضافة.
 
-## Major Changes: Long outstanding problems
+## تغييرات رئيسية: مشاكل بارزة منذ فترة طويلة (Long outstanding problems)
 
-### Code Splitting for single-file-targets
+### تقسيم الكود لأهداف الملف الواحد (Code Splitting for single-file-targets)
 
-Targets that only allow to startup a single file (like node, WebWorker, electron main) now supports loading the dependent pieces required for bootstrapping automatically by the runtime.
+الأهداف التي تسمح فقط ببدء تشغيل ملف واحد (مثل node، و WebWorker، و electron main) تدعم الآن تحميل الأجزاء التابعة المطلوبة لعملية التهيئة (bootstrapping) تلقائيًا بواسطة وقت التشغيل (runtime).
 
-This allows using `optimization.splitChunks` for these targets with `chunks: "all"` and also `optimization.runtimeChunk`
+يسمح هذا باستخدام `optimization.splitChunks` لهذه الأهداف باستخدام `chunks: "all"` وأيضًا `optimization.runtimeChunk`.
 
-Note that with targets where chunk loading is async, this makes initial evaluation async too. This can be an issue when using `output.library`, since the exported value is a Promise now.
+لاحظ أنه مع الأهداف التي يكون فيها تحميل الحزمة غير متزامن، يجعل هذا التقييم الأولي (initial evaluation) غير متزامن أيضًا. يمكن أن يمثل هذا مشكلة عند استخدام `output.library`، حيث أن القيمة المُصدّرة هي Promise الآن.
 
-### Updated Resolver
+### المحلل المحدث (Updated Resolver)
 
-`enhanced-resolve` was updated to v5. This has the following improvements:
+تم تحديث `enhanced-resolve` إلى v5. هذا يحتوي على التحسينات التالية:
 
-- The resolve tracks more dependencies, like missing files
-- aliasing may have multiple alternatives
-- aliasing to `false` is possible now
-- support for features like `exports` and `imports` fields
-- Increased performance
+- يتتبع المحلل المزيد من التبعيات، مثل الملفات المفقودة
+- قد يكون للأسماء المستعارة (aliasing) بدائل متعددة
+- يمكن الآن استخدام الأسماء المستعارة إلى `false`
+- دعم ميزات مثل حقول `exports` و `imports`
+- زيادة الأداء
 
-### Chunks without JS
+### حزم بدون JS
 
-Chunks that contain no JS code, will no longer generate a JS file.
-This allows to have chunks that contain only CSS.
+الحزم التي لا تحتوي على كود JS، لن تُولد بعد الآن ملف JS.
+يسمح هذا بالحصول على حزم تحتوي على CSS فقط.
 
-## Major Changes: Future
+## تغييرات رئيسية: المستقبل (Future)
 
-### Experiments
+### تجارب (Experiments)
 
-Not all features are stable from the beginning. In webpack 4 we added experimental features and noted in the changelog that they are experimental, but it was not always clear from the configuration that these features are experimental.
+ليست كل الميزات مستقرة منذ البداية. في webpack 4 أضفنا ميزات تجريبية وأشرنا في سجل التغيير (changelog) إلى أنها تجريبية، ولكن لم يكن من الواضح دائمًا من التكوين أن هذه الميزات تجريبية.
 
-In webpack 5 there is a new `experiments` config option which allows to enable experimental features. This makes it clear which ones are enabled/used.
+في webpack 5، يوجد خيار تكوين جديد `experiments` يسمح بتمكين الميزات التجريبية. هذا يوضح ماهية الميزات التي يتم تمكينها/استخدامها.
 
-While webpack follows semantic versioning, it will make an exception for experimental features. Experimental features might contain breaking changes in minor webpack versions. When this happens we will add a clear note into the changelog. This will allow us to iterate faster for experimental features, while also allowing us to stay longer on a major version for stable features.
+في حين يتبع webpack نظام تحديد الإصدارات الدلالي (semantic versioning)، فإنه سيستثني الميزات التجريبية. قد تحتوي الميزات التجريبية على تغييرات جذرية في إصدارات webpack الثانوية. عندما يحدث هذا سنضيف ملاحظة واضحة إلى سجل التغيير. سيتيح لنا هذا تكرار الميزات التجريبية بشكل أسرع، مع السماح لنا أيضًا بالبقاء لفترة أطول في إصدار رئيسي للميزات المستقرة.
 
-The following experiments will ship with webpack 5:
+سيتم شحن التجارب التالية مع webpack 5:
 
-- Old WebAssembly support like in webpack 4 (`experiments.syncWebAssembly`)
-- New WebAssembly support according to the [updated spec](https://github.com/WebAssembly/esm-integration) (`experiments.asyncWebAssembly`)
-  - This makes a WebAssembly module an async module
-- [Top Level Await](https://github.com/tc39/proposal-top-level-await) Stage 3 proposal (`experiments.topLevelAwait`)
-  - Using `await` on top-level makes the module an async module
-- Emitting bundle as module (`experiments.outputModule`)
-  - This removed the wrapper IIFE from the bundle, enforces strict mode, lazy loads via `<script type="module">` and minimized in module mode
+- دعم WebAssembly القديم مثلما في webpack 4 (`experiments.syncWebAssembly`)
+- دعم WebAssembly الجديد وفقًا لـ [المواصفة المحدثة](https://github.com/WebAssembly/esm-integration) (`experiments.asyncWebAssembly`)
+  - هذا يجعل وحدة WebAssembly وحدة غير متزامنة (async module)
+- اقتراح المرحلة 3 من [الانتظار في المستوى الأعلى (Top Level Await)](https://github.com/tc39/proposal-top-level-await) (`experiments.topLevelAwait`)
+  - استخدام `await` في المستوى الأعلى يجعل الوحدة وحدة غير متزامنة
+- إصدار الحزمة كوحدة (`experiments.outputModule`)
+  - هذا يزيل التغليف IIFE من الحزمة، ويفرض وضع strict، ويقوم بالتحميل البطيء (lazy loads) عبر `<script type="module">` وتصغيره في وضع الوحدة
 
-Note that this also means WebAssembly support is now disabled by default.
+لاحظ أن هذا يعني أيضًا أن دعم WebAssembly معطل الآن بشكل افتراضي.
 
-### Minimum Node.js Version
+### الحد الأدنى لإصدار Node.js
 
-The minimum supported Node.js version has increased from 6 to 10.13.0(LTS).
+تمت زيادة الحد الأدنى لإصدار Node.js المدعوم من 6 إلى 10.13.0(LTS).
 
-**MIGRATION**: Upgrade to the latest Node.js version available.
+**الترحيل**: الترقية إلى أحدث إصدار متاح من Node.js.
 
-## Changes to the Configuration
+## تغييرات على التكوين (Configuration)
 
-### Changes to the Structure
+### تغييرات على الهيكل (Structure)
 
-- `entry: {}` allows an empty object now (to allow to use plugins to add entries)
-- `target` supports an array, versions and browserslist
-- `cache: Object` removed: Setting to a memory-cache object is no longer possible
-- `cache.type` added: It's now possible to choose between `"memory"` and `"filesystem"`
-- New configuration options for `cache.type = "filesystem"` added:
+- `entry: {}` يسمح بكائن فارغ الآن (للسماح باستخدام الإضافات لإضافة إدخالات)
+- يدعم `target` مصفوفة (array) وإصدارات و browserslist
+- إزالة `cache: Object`: لم يعد الإعداد إلى كائن ذاكرة تخزين مؤقت في الذاكرة ممكنًا
+- إضافة `cache.type`: أصبح من الممكن الآن الاختيار بين `"memory"` و `"filesystem"`
+- إضافة خيارات تكوين جديدة لـ `cache.type = "filesystem"`:
   - `cache.cacheDirectory`
   - `cache.name`
   - `cache.version`
@@ -659,233 +659,233 @@ The minimum supported Node.js version has increased from 6 to 10.13.0(LTS).
   - `cache.idleTimeout`
   - `cache.idleTimeoutForInitialStore`
   - `cache.buildDependencies`
-- `snapshot.resolveBuildDependencies` added
-- `snapshot.resolve` added
-- `snapshot.module` added
-- `snapshot.managedPaths` added
-- `snapshot.immutablePaths` added
-- `resolve.cache` added: Allows to disable/enable the safe resolve cache
-- `resolve.concord` removed
-- `resolve.moduleExtensions` removed
-- `resolve.alias` values can be arrays or `false` now
-- `resolve.restrictions` added: Allows to restrict potential resolve results
-- `resolve.fallback` added: Allow to alias requests that failed to resolve
-- `resolve.preferRelative` added: Allows to resolve modules requests are relative requests too
-- Automatic polyfills for native Node.js modules were removed
-  - `node.Buffer` removed
-  - `node.console` removed
-  - `node.process` removed
-  - `node.*` (Node.js native module) removed
-  - **MIGRATION**: `resolve.alias` and `ProvidePlugin`. Errors will give hints. (Refer to [node-libs-browser](https://github.com/webpack/node-libs-browser) for polyfills & mocks used in v4)
-- `output.filename` can now be a function
-- `output.assetModuleFilename` added
-- `output.jsonpScriptType` renamed to `output.scriptType`
-- `devtool` is more strict
-  - Format: `false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`
-- `optimization.chunkIds: "deterministic"` added
-- `optimization.moduleIds: "deterministic"` added
-- `optimization.moduleIds: "hashed"` deprecated
-- `optimization.moduleIds: "total-size"` removed
-- Deprecated flags for module and chunk ids were removed
-  - `optimization.hashedModuleIds` removed
-  - `optimization.namedChunks` removed (`NamedChunksPlugin` too)
-  - `optimization.namedModules` removed (`NamedModulesPlugin` too)
-  - `optimization.occurrenceOrder` removed
-  - **MIGRATION**: Use `chunkIds` and `moduleIds`
-- `optimization.splitChunks` `test` no longer matches chunk name
-  - **MIGRATION**: Use a test function
+- إضافة `snapshot.resolveBuildDependencies`
+- إضافة `snapshot.resolve`
+- إضافة `snapshot.module`
+- إضافة `snapshot.managedPaths`
+- إضافة `snapshot.immutablePaths`
+- إضافة `resolve.cache`: يسمح بتعطيل/تفعيل ذاكرة التخزين المؤقت الآمنة للتحليل (resolve cache)
+- إزالة `resolve.concord`
+- إزالة `resolve.moduleExtensions`
+- يمكن أن تكون قيم `resolve.alias` الآن مصفوفات (arrays) أو `false`
+- إضافة `resolve.restrictions`: يسمح بتقييد نتائج التحليل المحتملة
+- إضافة `resolve.fallback`: السماح بإنشاء اسم مستعار للطلبات التي فشل تحليلها
+- إضافة `resolve.preferRelative`: السماح بتحليل طلبات الوحدات كطلبات نسبية أيضًا
+- تمت إزالة التعويضات (polyfills) التلقائية لوحدات Node.js المحلية
+  - إزالة `node.Buffer`
+  - إزالة `node.console`
+  - إزالة `node.process`
+  - إزالة `node.*` (وحدات Node.js المحلية)
+  - **الترحيل**: `resolve.alias` و `ProvidePlugin`. ستعطي الأخطاء تلميحات. (راجع [node-libs-browser](https://github.com/webpack/node-libs-browser) للتعويضات والبدائل (mocks) المستخدمة في الإصدار 4)
+- يمكن أن يكون `output.filename` الآن دالة (function)
+- إضافة `output.assetModuleFilename`
+- إعادة تسمية `output.jsonpScriptType` إلى `output.scriptType`
+- أصبحت `devtool` أكثر صرامة
+  - التنسيق: `false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`
+- إضافة `optimization.chunkIds: "deterministic"`
+- إضافة `optimization.moduleIds: "deterministic"`
+- تم إهمال `optimization.moduleIds: "hashed"`
+- إزالة `optimization.moduleIds: "total-size"`
+- تمت إزالة العلامات المهملة (Deprecated flags) لمعرفات الوحدات والحزم
+  - إزالة `optimization.hashedModuleIds`
+  - إزالة `optimization.namedChunks` (وكذلك `NamedChunksPlugin`)
+  - إزالة `optimization.namedModules` (وكذلك `NamedModulesPlugin`)
+  - إزالة `optimization.occurrenceOrder`
+  - **الترحيل**: استخدم `chunkIds` و `moduleIds`
+- لم تعد مطابقة (test) لـ `optimization.splitChunks` تتطابق مع اسم الحزمة
+  - **الترحيل**: استخدم دالة مطابقة (test function)
     `(module, { chunkGraph }) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name")`
-- `optimization.splitChunks` `minRemainingSize` was added
-- `optimization.splitChunks` `filename` can now be a function
-- `optimization.splitChunks` sizes can now be objects with a size per source type
+- إضافة `optimization.splitChunks` `minRemainingSize`
+- يمكن أن يكون `optimization.splitChunks` `filename` الآن دالة (function)
+- يمكن أن تكون أحجام `optimization.splitChunks` الآن كائنات مع حجم لكل نوع مصدر (source type)
   - `minSize`
   - `minRemainingSize`
   - `maxSize`
   - `maxAsyncSize`
   - `maxInitialSize`
-- `optimization.splitChunks` `maxAsyncSize` and `maxInitialSize` added next to `maxSize`: allows to specify different max sizes for initial and async chunks
-- `optimization.splitChunks` `name: true` removed: Automatic names are no longer supported
-  - **MIGRATION**: Use the default. `chunkIds: "named"` will give your files useful names for debugging
-- `optimization.splitChunks.cacheGroups[].idHint` added: Gives a hint how the named chunk id should be chosen
-- `optimization.splitChunks` `automaticNamePrefix` removed
-  - **MIGRATION**: Use `idHint` instead
-- `optimization.splitChunks` `filename` is no longer restricted to initial chunks
-- `optimization.splitChunks` `usedExports` added to include used exports when comparing modules
-- `optimization.splitChunks.defaultSizeTypes` added: Specified the size types when using numbers for sizes
-- `optimization.mangleExports` added
-- `optimization.minimizer` `"..."` can be used to reference the defaults
-- `optimization.usedExports` `"global"` value added to allow to disable the analysis per runtime and instead do it globally (better performance)
-- `optimization.noEmitOnErrors` renamed to `optimization.emitOnErrors` and logic inverted
-- `optimization.realContentHash` added
-- `output.devtoolLineToLine` removed
-  - **MIGRATION**: No replacement
-- `output.chunkFilename: Function` is now allowed
-- `output.hotUpdateChunkFilename: Function` is now forbidden: It never worked anyway.
-- `output.hotUpdateMainFilename: Function` is now forbidden: It never worked anyway.
-- `output.importFunctionName: string` specifies the name used as replacement for `import()` to allow polyfilling for non-supported environments
-- `output.charset` added: setting it to false omit the `charset` property on script tags
-- `output.hotUpdateFunction` renamed to `output.hotUpdateGlobal`
-- `output.jsonpFunction` renamed to `output.chunkLoadingGlobal`
-- `output.chunkCallbackFunction` renamed to `output.chunkLoadingGlobal`
-- `output.chunkLoading` added
-- `output.enabledChunkLoadingTypes` added
-- `output.chunkFormat` added
-- `module.rules` `resolve` and `parser` will merge in a different way (objects are deeply merged, array may include `"..."` to reference to prev value)
-- `module.rules` `parser.worker` added: Allows to configure the worker supported
-- `module.rules` `query` and `loaders` were removed
-- `module.rules` `options` passing a string is deprecated
-  - **MIGRATION**: Pass an options object instead, open an issue on the loader when this is not supported
-- `module.rules` `mimetype` added: allows to match a mimetype of a DataURI
-- `module.rules` `descriptionData` added: allows to match a data from package.json
-- `module.defaultRules` `"..."` can be used to reference the defaults
-- `stats.chunkRootModules` added: Show root modules for chunks
-- `stats.orphanModules` added: Show modules which are not emitted
-- `stats.runtime` added: Show runtime modules
-- `stats.chunkRelations` added: Show parent/children/sibling chunks
-- `stats.errorStack` added: Show webpack-internal stack trace of errors
-- `stats.preset` added: select a preset
-- `stats.relatedAssets` added: show assets that are related to other assets (e.g. SourceMaps)
-- `stats.warningsFilter` deprecated in favor of `ignoreWarnings`
-- `BannerPlugin.banner` signature changed
-  - `data.basename` removed
-  - `data.query` removed
-  - **MIGRATION**: extract from `filename`
-- `SourceMapDevToolPlugin` `lineToLine` removed
-  - **MIGRATION**: No replacement
-- `[hash]` as hash for the full compilation is now deprecated
-  - **MIGRATION**: Use `[fullhash]` instead or better use another hash option
-- `[modulehash]` is deprecated
-  - **MIGRATION**: Use `[hash]` instead
-- `[moduleid]` is deprecated
-  - **MIGRATION**: Use `[id]` instead
-- `[filebase]` removed
-  - **MIGRATION**: Use `[base]` instead
-- New placeholders for file-based templates (i. e. SourceMapDevToolPlugin)
+- تمت إضافة `maxAsyncSize` و `maxInitialSize` في `optimization.splitChunks` بجوار `maxSize`: يسمح بتحديد أحجام قصوى مختلفة للحزم الأولية وغير المتزامنة
+- تمت إزالة `name: true` من `optimization.splitChunks`: لم تعد الأسماء التلقائية مدعومة
+  - **الترحيل**: استخدم الافتراضي. سيعطي `chunkIds: "named"` ملفاتك أسماء مفيدة لتصحيح الأخطاء
+- إضافة `optimization.splitChunks.cacheGroups[].idHint`: يعطي تلميحًا حول كيفية اختيار معرف الحزمة المسماة
+- تمت إزالة `automaticNamePrefix` من `optimization.splitChunks`
+  - **الترحيل**: استخدم `idHint` بدلاً من ذلك
+- لم يعد `filename` في `optimization.splitChunks` مقصورًا على الحزم الأولية
+- إضافة `usedExports` في `optimization.splitChunks` لتضمين الصادرات المستخدمة عند مقارنة الوحدات
+- إضافة `optimization.splitChunks.defaultSizeTypes`: تحدد أنواع الأحجام عند استخدام الأرقام للأحجام
+- إضافة `optimization.mangleExports`
+- يمكن استخدام `"..."` في `optimization.minimizer` للإشارة إلى الافتراضيات
+- إضافة القيمة `"global"` إلى `optimization.usedExports` للسماح بتعطيل التحليل لكل وقت تشغيل والقيام بذلك بشكل عام (أداء أفضل)
+- إعادة تسمية `optimization.noEmitOnErrors` إلى `optimization.emitOnErrors` وعكس المنطق
+- إضافة `optimization.realContentHash`
+- إزالة `output.devtoolLineToLine`
+  - **الترحيل**: لا يوجد بديل
+- أصبح `output.chunkFilename: Function` مسموحًا به الآن
+- أصبح `output.hotUpdateChunkFilename: Function` محظورًا الآن: لم ينجح الأمر أبدًا على أي حال.
+- أصبح `output.hotUpdateMainFilename: Function` محظورًا الآن: لم ينجح الأمر أبدًا على أي حال.
+- تحدد `output.importFunctionName: string` الاسم المستخدم كبديل لـ `import()` للسماح بالتعويض (polyfilling) للبيئات غير المدعومة
+- إضافة `output.charset`: إعداده إلى false يحذف الخاصية `charset` من علامات (tags) `script`
+- إعادة تسمية `output.hotUpdateFunction` إلى `output.hotUpdateGlobal`
+- إعادة تسمية `output.jsonpFunction` إلى `output.chunkLoadingGlobal`
+- إعادة تسمية `output.chunkCallbackFunction` إلى `output.chunkLoadingGlobal`
+- إضافة `output.chunkLoading`
+- إضافة `output.enabledChunkLoadingTypes`
+- إضافة `output.chunkFormat`
+- ستندمج (merge) `resolve` و `parser` في `module.rules` بطريقة مختلفة (يتم دمج الكائنات (objects) بعمق، وقد تتضمن المصفوفة (array) `"..."` للإشارة إلى القيمة السابقة)
+- إضافة `module.rules` `parser.worker`: يسمح بتكوين الـ worker المدعوم
+- إزالة `query` و `loaders` من `module.rules`
+- تم إهمال تمرير سلسلة نصية (string) لـ `options` في `module.rules`
+  - **الترحيل**: قم بتمرير كائن خيارات (options object) بدلاً من ذلك، افتح مشكلة على المحمل (loader) عندما لا يكون هذا مدعومًا
+- إضافة `module.rules` `mimetype`: يسمح بمطابقة نوع MIME (mimetype) الخاص بـ DataURI
+- إضافة `module.rules` `descriptionData`: يسمح بمطابقة بيانات من package.json
+- يمكن استخدام `"..."` في `module.defaultRules` للإشارة إلى الافتراضيات
+- إضافة `stats.chunkRootModules`: عرض وحدات الجذر (root modules) للحزم
+- إضافة `stats.orphanModules`: إظهار الوحدات التي لا يتم إصدارها
+- إضافة `stats.runtime`: عرض وحدات وقت التشغيل
+- إضافة `stats.chunkRelations`: عرض علاقات الحزم الأم/الأبناء/الإخوة (parent/children/sibling chunks)
+- إضافة `stats.errorStack`: عرض تتبع التكدس الداخلي للأخطاء في webpack (webpack-internal stack trace of errors)
+- إضافة `stats.preset`: تحديد الإعداد المسبق (preset)
+- إضافة `stats.relatedAssets`: إظهار الأصول (assets) المرتبطة بأصول أخرى (مثل SourceMaps)
+- تم إهمال `stats.warningsFilter` لصالح `ignoreWarnings`
+- تغيير توقيع (signature) `BannerPlugin.banner`
+  - إزالة `data.basename`
+  - إزالة `data.query`
+  - **الترحيل**: الاستخراج من `filename`
+- إزالة `lineToLine` من `SourceMapDevToolPlugin`
+  - **الترحيل**: لا يوجد بديل
+- أصبح استخدام `[hash]` كتجزئة للتجميع (compilation) بالكامل مهملًا الآن
+  - **الترحيل**: استخدم `[fullhash]` بدلاً من ذلك، أو من الأفضل استخدام خيار تجزئة آخر
+- إهمال `[modulehash]`
+  - **الترحيل**: استخدم `[hash]` بدلاً من ذلك
+- إهمال `[moduleid]`
+  - **الترحيل**: استخدم `[id]` بدلاً من ذلك
+- إزالة `[filebase]`
+  - **الترحيل**: استخدم `[base]` بدلاً من ذلك
+- عناصر نائبة (placeholders) جديدة للقوالب القائمة على الملفات (أي SourceMapDevToolPlugin)
   - `[name]`
   - `[base]`
   - `[path]`
   - `[ext]`
-- `externals` when passing a function, it has now a different signature `({ context, request }, callback)`
-  - **MIGRATION**: Change signature
-- `externalsPresets` added
-- `experiments` added (see Experiments section above)
-- `watchOptions.followSymlinks` added
-- `watchOptions.ignored` can now be a RegExp
-- `webpack.util.serialization` is now exposed.
-
-### Changes to the Defaults
-
-- `target` is now `"browserslist"` by default when a browserslist config is available
-- `module.unsafeCache` is now only enabled for `node_modules` by default
-- `optimization.moduleIds` defaults to `deterministic` in production mode, instead of `size`
-- `optimization.chunkIds` defaults to `deterministic` in production mode, instead of `total-size`
-- `optimization.nodeEnv` defaults to `false` in `none` mode
-- `optimization.splitChunks.minSize` defaults to `20k` in production
-- `optimization.splitChunks.enforceSizeThreshold` defaults to `50k` in production
-- `optimization.splitChunks` `minRemainingSize` defaults to `minSize`
-  - This will lead to less splitted chunks created in cases where the remaining part would be too small
-- `optimization.splitChunks` `maxAsyncRequests` and `maxInitialRequests` defaults was been increased to 30
-- `optimization.splitChunks.cacheGroups.vendors` has be renamed to `optimization.splitChunks.cacheGroups.defaultVendors`
-- `optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk` now defaults to `true`
-- `optimization.minimizer` target default uses `compress.passes: 2` in terser options now
-- `resolve(Loader).cache` defaults to `true` when `cache` is used
-- `resolve(Loader).cacheWithContext` defaults to `false`
-- `resolveLoader.extensions` remove `.json`
-- `node.global` `node.__filename` and `node.__dirname` defaults to `false` in node-`target`s
-- `stats.errorStack` defaults to `false`
-
-## Loader related Changes
+- `externals` عند تمرير دالة (function)، أصبح لها الآن توقيع مختلف `({ context, request }, callback)`
+  - **الترحيل**: تغيير التوقيع
+- إضافة `externalsPresets`
+- إضافة `experiments` (راجع قسم التجارب - Experiments أعلاه)
+- إضافة `watchOptions.followSymlinks`
+- يمكن أن يكون `watchOptions.ignored` الآن تعبيرًا نمطيًا (RegExp)
+- تم الآن عرض (exposed) `webpack.util.serialization`.
+
+### التغييرات على الافتراضيات (Changes to the Defaults)
+
+- أصبح `target` الآن `"browserslist"` افتراضيًا عندما يكون تكوين browserslist متاحًا
+- يتم الآن تفعيل `module.unsafeCache` فقط لـ `node_modules` بشكل افتراضي
+- يتم افتراضيًا ضبط `optimization.moduleIds` على `deterministic` في وضع الإنتاج، بدلاً من `size`
+- يتم افتراضيًا ضبط `optimization.chunkIds` على `deterministic` في وضع الإنتاج، بدلاً من `total-size`
+- يتم افتراضيًا ضبط `optimization.nodeEnv` على `false` في وضع `none`
+- يتم افتراضيًا ضبط `optimization.splitChunks.minSize` على `20k` في الإنتاج
+- يتم افتراضيًا ضبط `optimization.splitChunks.enforceSizeThreshold` على `50k` في الإنتاج
+- يتم افتراضيًا ضبط `optimization.splitChunks` `minRemainingSize` على `minSize`
+  - سيؤدي هذا إلى إنشاء حزم مقسمة (splitted chunks) أقل في الحالات التي يكون فيها الجزء المتبقي صغيرًا جدًا
+- تمت زيادة القيمة الافتراضية لكل من `maxAsyncRequests` و `maxInitialRequests` في `optimization.splitChunks` إلى 30
+- تمت إعادة تسمية `optimization.splitChunks.cacheGroups.vendors` إلى `optimization.splitChunks.cacheGroups.defaultVendors`
+- يُعيّن `optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk` افتراضيًا الآن إلى `true`
+- يستخدم الإعداد الافتراضي لهدف `optimization.minimizer` الآن `compress.passes: 2` في خيارات terser
+- يعيّن `resolve(Loader).cache` افتراضيًا إلى `true` عند استخدام `cache`
+- يعيّن `resolve(Loader).cacheWithContext` افتراضيًا إلى `false`
+- إزالة `.json` من `resolveLoader.extensions`
+- يتم افتراضيًا ضبط `node.global`، `node.__filename` و `node.__dirname` على `false` في أهداف node (`node-targets`)
+- يتم افتراضيًا ضبط `stats.errorStack` على `false`
+
+## التغييرات المتعلقة بالمحمل (Loader related Changes)
 
 ### `this.getOptions`
 
-This new API should simplify the usage for options in loaders.
-It allows to pass a JSON schema for validation.
-See [PR](https://github.com/webpack/webpack/pull/10017) for details
+يجب أن تعمل واجهة برمجة التطبيقات (API) الجديدة هذه على تبسيط استخدام الخيارات في المحملات.
+يسمح بتمرير مخطط JSON (JSON schema) للتحقق من الصحة.
+راجع [PR](https://github.com/webpack/webpack/pull/10017) للتفاصيل.
 
 ### `this.exec`
 
-This has been removed from loader context
+تمت إزالة هذا من سياق المحمل (loader context)
 
-**MIGRATION**: This can be implemented in the loader itself
+**الترحيل**: يمكن تنفيذ هذا في المحمل نفسه
 
 ### `this.getResolve`
 
-`getResolve(options)` in the loader API will merge options in a different way, see `module.rules` `resolve`.
+ستقوم `getResolve(options)` في واجهة المحمل بدمج الخيارات بطريقة مختلفة، راجع `resolve` في `module.rules`.
 
-As webpack 5 differs between different issuing dependencies so it might make sense to pass a `dependencyType` as option (e.g. `"esm"`, `"commonjs"`, or others).
+حيث يختلف webpack 5 بين تبعيات الإصدار المختلفة، لذلك قد يكون من المنطقي تمرير `dependencyType` كخيار (مثل `"esm"`، `"commonjs"`، أو غيرها).
 
-## Major Internal Changes
+## تغييرات داخلية رئيسية (Major Internal Changes)
 
-?> This section might need a bit more refinement
+?> قد يحتاج هذا القسم إلى مزيد من التنقيح
 
-The following changes are only relevant for plugin authors:
+التغييرات التالية ذات صلة فقط لمؤلفي الإضافات (plugin authors):
 
-### New plugin order
+### ترتيب الإضافات الجديد (New plugin order)
 
-Plugins in webpack 5 are now applies **before** the configuration defaults has been applied.
-This allows plugins to apply their own defaults, or act as configuration presets.
+يتم الآن تطبيق الإضافات في webpack 5 **قبل** تطبيق الافتراضيات الخاصة بالتكوين.
+يسمح هذا للإضافات بتطبيق الافتراضيات الخاصة بها، أو العمل كإعدادات مسبقة للتكوين (configuration presets).
 
-But this is also a breaking change as plugins can't rely on configuration values to be set when they are applied.
+ولكن هذا يمثل أيضًا تغييرًا جذريًا لأن الإضافات لا يمكنها الاعتماد على قيم التكوين التي يتم تعيينها عند تطبيقها.
 
-**MIGRATION**: Access configuration only in plugin hooks. Or best avoid accessing configuration at all and take options via constructor.
+**الترحيل**: يمكنك الوصول إلى التكوين فقط في خطافات (hooks) الإضافات. أو من الأفضل تجنب الوصول إلى التكوين على الإطلاق وأخذ الخيارات عبر المُنشئ (constructor).
 
-### Runtime Modules
+### وحدات وقت التشغيل (Runtime Modules)
 
-A large part of the runtime code was moved into the so-called "runtime modules". These special modules are in-charge of adding runtime code. They can be added into any chunk, but are currently always added to the runtime chunk. "Runtime Requirements" control which runtime modules (or core runtime parts) are added to the bundle. This ensures that only runtime code that is used is added to the bundle. In the future, runtime modules could also be added to an on-demand-loaded chunk, to load runtime code when needed.
+تم نقل جزء كبير من كود وقت التشغيل إلى ما يسمى بـ "وحدات وقت التشغيل". هذه الوحدات الخاصة مسؤولة عن إضافة كود وقت التشغيل. يمكن إضافتها إلى أي حزمة، ولكنها حاليًا تُضاف دائمًا إلى حزمة وقت التشغيل (runtime chunk). تتحكم "متطلبات وقت التشغيل (Runtime Requirements)" في وحدات وقت التشغيل (أو أجزاء وقت التشغيل الأساسية) التي تُضاف إلى الحزمة. يضمن هذا إضافة كود وقت التشغيل المستخدم فقط إلى الحزمة. في المستقبل، يمكن أيضًا إضافة وحدات وقت التشغيل إلى حزمة يتم تحميلها عند الطلب، لتحميل كود وقت التشغيل عند الحاجة.
 
-In most cases, the core runtime allows to inline the entry module instead of calling it with `__webpack_require__`. If there is no other module in the bundle, no `__webpack_require__` is needed at all. This combines well with Module Concatenation where multiple modules are concatenated into a single module.
+في معظم الحالات، يسمح وقت التشغيل الأساسي (core runtime) بتضمين وحدة الدخول (inlining the entry module) بدلاً من استدعائها باستخدام `__webpack_require__`. إذا لم تكن هناك وحدة أخرى في الحزمة، فلن تكون هناك حاجة إلى `__webpack_require__` على الإطلاق. يتحد هذا بشكل جيد مع تسلسل الوحدات (Module Concatenation) حيث يتم ربط وحدات متعددة في وحدة واحدة.
 
-In the best case, no runtime code is needed at all.
+في أفضل الحالات، لن تكون هناك حاجة إلى كود وقت التشغيل على الإطلاق.
 
-**MIGRATION**: If you are injecting runtime code into the webpack runtime in a plugin, consider using RuntimeModules instead.
+**الترحيل**: إذا كنت تقوم بحقن كود وقت التشغيل في وقت تشغيل webpack داخل إضافة (plugin)، ففكر في استخدام وحدات وقت التشغيل (RuntimeModules) بدلاً من ذلك.
 
-### Serialization
+### التسلسل (Serialization)
 
-A serialization mechanism was added to allow serialization of complex objects in webpack. It has an opt-in semantic, so classes that should be serialized need to be explicitly flagged (and their serialization implemented). This has been done for most Modules, all Dependencies and some Errors.
+تمت إضافة آلية تسلسل للسماح بتسلسل الكائنات المعقدة في webpack. يحتوي على دلالات اختيارية (opt-in)، لذلك يجب وضع علامة واضحة على الفئات التي يجب أن تكون متسلسلة (وتنفيذ التسلسل الخاص بها). تم القيام بذلك لمعظم الوحدات (Modules)، وجميع التبعيات (Dependencies) وبعض الأخطاء (Errors).
 
-**MIGRATION**: When using custom Modules or Dependencies, it is recommended to make them serializable to benefit from persistent caching.
+**الترحيل**: عند استخدام وحدات أو تبعيات مخصصة، يوصى بجعلها قابلة للتسلسل (serializable) للاستفادة من التخزين المؤقت المستمر.
 
-### Plugins for Caching
+### إضافات للتخزين المؤقت (Plugins for Caching)
 
-A `Cache` class with a plugin interface has been added. This class can be used to write and read to the cache. Depending on the configuration, different plugins can add functionality to the cache. The `MemoryCachePlugin` adds in-memory caching. The `FileCachePlugin` adds persistent (file-system) caching.
+تمت إضافة فئة `Cache` مع واجهة إضافة. يمكن استخدام هذه الفئة للكتابة والقراءة من ذاكرة التخزين المؤقت. اعتمادًا على التكوين، يمكن للإضافات المختلفة إضافة وظائف إلى التخزين المؤقت. تضيف إضافة `MemoryCachePlugin` التخزين المؤقت داخل الذاكرة (in-memory). تضيف إضافة `FileCachePlugin` التخزين المؤقت المستمر (Persistent) (على نظام الملفات).
 
-The `FileCachePlugin` uses the serialization mechanism to persist and restore cached items to/from the disk.
+يستخدم `FileCachePlugin` آلية التسلسل للحفاظ على العناصر المخزنة مؤقتًا واستعادتها من/إلى القرص.
 
-### Hook Object Frozen
+### تجميد كائن الخطاف (Hook Object Frozen)
 
-Classes with `hooks` have their `hooks` object frozen, so adding custom hooks is no longer possible this way.
+تم تجميد (frozen) كائن `hooks` للفئات (Classes) التي تحتوي على `hooks`، لذا لم يعد من الممكن إضافة خطافات مخصصة (custom hooks) بهذه الطريقة.
 
-**MIGRATION**: The recommended way to add custom hooks is using a WeakMap and a static `getXXXHooks(XXX)` (i. e. `getCompilationHook(compilation)`) method. Internal classes use the same mechanism used for custom hooks.
+**الترحيل**: الطريقة الموصى بها لإضافة خطافات مخصصة هي استخدام `WeakMap` وطريقة ثابتة `getXXXHooks(XXX)` (أي `getCompilationHook(compilation)`). تستخدم الفئات الداخلية نفس الآلية المستخدمة للخطافات المخصصة.
 
-### Tapable Upgrade
+### ترقية Tapable (Tapable Upgrade)
 
-The compat layer for webpack 3 plugins has been removed. It had already been deprecated for webpack 4.
+تمت إزالة طبقة التوافق (compat layer) لإضافات webpack 3. وقد تم إهمالها بالفعل في webpack 4.
 
-Some less used tapable APIs were removed or deprecated.
+تمت إزالة أو إهمال بعض واجهات برمجة تطبيقات (APIs) tapable الأقل استخدامًا.
 
-**MIGRATION**: Use the new tapable API.
+**الترحيل**: استخدم واجهة برمجة تطبيقات tapable الجديدة.
 
-### Staged Hooks
+### الخطافات المرحلية (Staged Hooks)
 
-For several steps in the sealing process, there had been multiple hooks for different stages. i. e. `optimizeDependenciesBasic` `optimizeDependencies` and `optimizeDependenciesAdvanced`. These have been removed in favor of a single hook which can be used with a `stage` option. See `OptimizationStages` for possible stage values.
+بالنسبة لعدة خطوات في عملية الختم (sealing process)، كانت هناك خطافات متعددة لمراحل مختلفة. مثل `optimizeDependenciesBasic` و `optimizeDependencies` و `optimizeDependenciesAdvanced`. تمت إزالتها لصالح خطاف واحد يمكن استخدامه مع خيار `stage`. راجع `OptimizationStages` لقيم المرحلة الممكنة.
 
-**MIGRATION**: Hook into the remaining hook instead. You may add a `stage` option.
+**الترحيل**: اربط (Hook into) بالخطاف المتبقي بدلاً من ذلك. يمكنك إضافة خيار `stage`.
 
-### Main/Chunk/ModuleTemplate deprecation
+### إهمال Main/Chunk/ModuleTemplate
 
-Bundle templating has been refactored. MainTemplate/ChunkTemplate/ModuleTemplate were deprecated and the JavascriptModulesPlugin takes care of JS templating now.
+تمت إعادة هيكلة قوالب الحزم (Bundle templating). تم إهمال `MainTemplate`/`ChunkTemplate`/`ModuleTemplate` وتتولى `JavascriptModulesPlugin` مسؤولية قوالب JS الآن.
 
-Before that refactoring, JS output was handled by Main/ChunkTemplate while another output (i. e. WASM, CSS) was handled by plugins. This looks like JS is first class, while another output is second class. The refactoring changes that and all output is handled by their plugins.
+قبل إعادة الهيكلة هذه، كان يتم التعامل مع مخرجات JS بواسطة `Main`/`ChunkTemplate` بينما كان يتم التعامل مع المخرجات الأخرى (مثل WASM، CSS) بواسطة الإضافات. يبدو هذا وكأن JS من الدرجة الأولى، بينما المخرجات الأخرى من الدرجة الثانية. أدت إعادة الهيكلة إلى تغيير ذلك ويتم التعامل مع جميع المخرجات بواسطة إضافاتها الخاصة.
 
-It's still possible to hook into parts of the templating. The hooks are in JavascriptModulesPlugin instead of Main/ChunkTemplate now. (Yes plugins can have hooks too. I call them attached hooks.)
+لا يزال من الممكن الربط (hook into) بأجزاء من القوالب. الخطافات موجودة في `JavascriptModulesPlugin` بدلاً من `Main`/`ChunkTemplate` الآن. (نعم يمكن أن تحتوي الإضافات على خطافات أيضًا. أسميها الخطافات المرفقة - attached hooks).
 
-There is a compat-layer, so Main/Chunk/ModuleTemplate still exist, but only delegate tap calls to the new hook locations.
+توجد طبقة توافق (compat-layer)، لذا لا يزال `Main`/`Chunk`/`ModuleTemplate` موجودين، لكنهم يقومون فقط بتفويض (delegate) استدعاءات `tap` إلى مواقع الخطافات الجديدة.
 
-**MIGRATION**: Follow the advice in the deprecation messages. Mostly pointing to hooks at different locations.
+**الترحيل**: اتبع النصائح الموجودة في رسائل الإهمال. وهي في الغالب تشير إلى الخطافات في مواقع مختلفة.
 
-### Entry point descriptor
+### واصف نقطة الدخول (Entry point descriptor)
 
-If an object is passed as entry point the value might be a string, array of strings or a descriptor:
+إذا تم تمرير كائن (object) كنقطة دخول، فقد تكون القيمة سلسلة نصية (string)، أو مصفوفة من السلاسل النصية (array of strings)، أو واصفًا (descriptor):
 
 ```js
 module.exports = {
@@ -897,11 +897,11 @@ module.exports = {
 };
 ```
 
-Descriptor syntax might be used to pass additional options to an entry point.
+يمكن استخدام بناء جملة الواصف (Descriptor syntax) لتمرير خيارات إضافية إلى نقطة الدخول.
 
-#### Entry point output filename
+#### اسم ملف المخرجات لنقطة الدخول (Entry point output filename)
 
-By default, the output filename for the entry chunk is extracted from `output.filename` but you can specify a custom output filename for a specific entry:
+بشكل افتراضي، يتم استخراج اسم ملف الإخراج للحزمة الأولية (entry chunk) من `output.filename` ولكن يمكنك تحديد اسم ملف إخراج مخصص لإدخال (entry) معين:
 
 ```js
 module.exports = {
@@ -911,9 +911,9 @@ module.exports = {
 };
 ```
 
-#### Entry point dependency
+#### تبعية نقطة الدخول (Entry point dependency)
 
-By default, every entry chunk stores all the modules that it uses. With `dependOn`-option you can share the modules from one entry chunk to another:
+افتراضيًا، تخزن كل حزمة أولية (entry chunk) جميع الوحدات التي تستخدمها. باستخدام خيار `dependOn` يمكنك مشاركة الوحدات من حزمة أولية إلى أخرى:
 
 ```js
 module.exports = {
@@ -924,11 +924,11 @@ module.exports = {
 };
 ```
 
-The app chunk will not contain the modules that `react-vendors` has.
+لن تحتوي حزمة `app` على الوحدات الموجودة في `react-vendors`.
 
-#### Entry point library
+#### مكتبة نقطة الدخول (Entry point library)
 
-The entry descriptor allows to pass a different `library` option for each entrypoint.
+يسمح واصف الإدخال (entry descriptor) بتمرير خيار `library` مختلف لكل نقطة دخول.
 
 ```js
 module.exports = {
@@ -949,12 +949,12 @@ module.exports = {
 };
 ```
 
-#### Entry point runtime
+#### وقت تشغيل نقطة الدخول (Entry point runtime)
 
-The entry descriptor allows to specify a `runtime` per entry.
-When specified a chunk with this name is created which contains only the runtime code for the entry.
-When multiple entries specify the same `runtime`, that chunk will contain a common runtime for all these entry.
-This means they could be used together on the same HTML page.
+يسمح واصف الإدخال بتحديد `runtime` لكل إدخال.
+عند تحديده، يتم إنشاء حزمة بهذا الاسم والتي تحتوي فقط على كود وقت التشغيل للإدخال.
+عندما تحدد مدخلات متعددة نفس الـ `runtime`، ستحتوي تلك الحزمة على وقت تشغيل مشترك (common runtime) لجميع هذه المدخلات.
+وهذا يعني أنه يمكن استخدامهم معًا في نفس صفحة HTML.
 
 ```js
 module.exports = {
@@ -967,10 +967,10 @@ module.exports = {
 };
 ```
 
-#### Entry point chunk loading
+#### تحميل حزمة نقطة الدخول (Entry point chunk loading)
 
-The entry descriptor allows to specify a `chunkLoading` per entry.
-The runtime for this entry will use this to load chunks.
+يسمح واصف الإدخال بتحديد `chunkLoading` لكل إدخال.
+سيستخدم وقت التشغيل لهذا الإدخال هذا الخيار لتحميل الحزم.
 
 ```js
 module.exports = {
@@ -986,82 +986,81 @@ module.exports = {
 };
 ```
 
-### Order and IDs
+### الترتيب والمعرفات (Order and IDs)
 
-Webpack used to order modules and chunks in the Compilation phase, in a specific way, to assign IDs in incremental order. This is no longer the case. The order will no longer be used for id generation, instead, the full control of ID generation is in the plugin.
+كان Webpack يقوم بترتيب الوحدات والحزم في مرحلة التجميع (Compilation phase)، بطريقة معينة، لتعيين المعرفات (IDs) بترتيب تزايدي. لم يعد هذا هو الحال. لن يتم استخدام الترتيب لتوليد المعرف (id) بعد الآن، بدلاً من ذلك، أصبح التحكم الكامل في توليد الـ ID موجودًا في الإضافة (plugin).
 
-Hooks to optimize the order of module and chunks have been removed.
+تمت إزالة الخطافات (Hooks) المستخدمة لتحسين ترتيب الوحدات والحزم.
 
-**MIGRATION**: You cannot rely on the order of modules and chunks in the compilation phase no more.
+**الترحيل**: لا يمكنك الاعتماد على ترتيب الوحدات والحزم في مرحلة التجميع بعد الآن.
 
-### Arrays to Sets
+### من مصفوفات إلى مجموعات (Arrays to Sets)
 
-- Compilation.modules is now a Set
-- Compilation.chunks is now a Set
-- Chunk.files is now a Set
+- أصبح `Compilation.modules` الآن `Set` (مجموعة)
+- أصبح `Compilation.chunks` الآن `Set`
+- أصبح `Chunk.files` الآن `Set`
 
-There is a compat-layer which prints deprecation warnings.
+هناك طبقة توافق (compat-layer) تطبع تحذيرات إهمال.
 
-**MIGRATION**: Use Set methods instead of Array methods.
+**الترحيل**: استخدم طرق `Set` (Set methods) بدلاً من طرق المصفوفة (Array methods).
 
 ### Compilation.fileSystemInfo
 
-This new class can be used to access information about the filesystem in a cached way. Currently, it allows asking for both file and directory timestamps. Information about timestamps is transferred from the watcher if possible, otherwise determined by filesystem access.
+يمكن استخدام هذه الفئة الجديدة للوصول إلى معلومات حول نظام الملفات بطريقة مخزنة مؤقتًا (cached way). تتيح حاليًا طلب طوابع زمنية (timestamps) لكل من الملف والدليل (directory). يتم نقل المعلومات حول الطوابع الزمنية من المراقب (watcher) إن أمكن، وإلا يتم تحديدها عن طريق الوصول إلى نظام الملفات.
 
-In the future, asking for file content hashes will be added and modules will be able to check validity with file contents instead of file hashes.
+في المستقبل، ستتم إضافة السؤال عن تجزئة محتوى الملف (file content hashes) وستتمكن الوحدات من التحقق من الصلاحية (validity) باستخدام محتويات الملف بدلاً من تجزئة الملف.
 
-**MIGRATION**: Instead of using `file/contextTimestamps` use the `compilation.fileSystemInfo` API instead.
+**الترحيل**: بدلاً من استخدام `file/contextTimestamps` استخدم واجهة `compilation.fileSystemInfo` بدلاً من ذلك.
 
-Timestamping for directories is possible now, which allows serialization of ContextModules.
+أصبح وضع الطوابع الزمنية (Timestamping) للأدلة (directories) ممكنًا الآن، مما يسمح بتسلسل (serialization) وحدات `ContextModules`.
 
-`Compiler.modifiedFiles` has been added (next to `Compiler.removedFiles`) to make it easier to reference the changed files.
+تمت إضافة `Compiler.modifiedFiles` (بجوار `Compiler.removedFiles`) لتسهيل الإشارة إلى الملفات المتغيرة.
 
-### Filesystems
+### أنظمة الملفات (Filesystems)
 
-Next to `compiler.inputFileSystem` and `compiler.outputFileSystem` there is a new `compiler.intermediateFileSystem` for all fs actions that are not considered as input or output, like writing records, cache or profiling output.
+بجوار `compiler.inputFileSystem` و `compiler.outputFileSystem` يوجد `compiler.intermediateFileSystem` جديد لجميع إجراءات نظام الملفات (fs) التي لا تعتبر كإدخال أو إخراج، مثل كتابة السجلات، وذاكرة التخزين المؤقت أو مخرجات التنميط (profiling output).
 
-The filesystems have now the `fs` interface and do no longer demand additional methods like `join` or `mkdirp`. But if they have methods like `join` or `dirname` they are used.
+أنظمة الملفات لديها الآن واجهة `fs` ولم تعد تتطلب طرقًا إضافية مثل `join` أو `mkdirp`. ولكن إذا كان لديهم طرق مثل `join` أو `dirname` يتم استخدامها.
 
-### Hot Module Replacement
+### الاستبدال الساخن للوحدة (Hot Module Replacement)
 
-HMR runtime has been refactored to Runtime Modules. `HotUpdateChunkTemplate` has been merged into `ChunkTemplate`. ChunkTemplates and plugins should also handle `HotUpdateChunk`s now.
+تمت إعادة هيكلة وقت تشغيل HMR إلى وحدات وقت تشغيل (Runtime Modules). تم دمج `HotUpdateChunkTemplate` في `ChunkTemplate`. يجب أن تتعامل `ChunkTemplates` والإضافات (plugins) مع `HotUpdateChunk`s الآن أيضًا.
 
-The javascript part of HMR runtime has been separated from the core HMR runtime. Other module types can now also handle HMR in their own way. In the future, this will allow i. e. HMR for the mini-css-extract-plugin or for WASM modules.
+تم فصل جزء javascript من وقت تشغيل HMR عن وقت تشغيل HMR الأساسي. يمكن للأنواع الأخرى من الوحدات الآن التعامل مع HMR بطريقتها الخاصة. في المستقبل، سيسمح هذا بـ HMR لإضافة mini-css-extract-plugin أو لوحدات WASM على سبيل المثال.
 
-**MIGRATION**: As this is a newly introduced functionality, there is nothing to migrate.
+**الترحيل**: نظرًا لأن هذه وظيفة تم تقديمها حديثًا، فلا يوجد شيء لترحيله.
 
-`import.meta.webpackHot` exposes the same API as `module.hot`. This is also usable from strict ESM modules (.mjs, type: "module" in package.json) which do not have access to `module`.
+يعرض `import.meta.webpackHot` نفس واجهة برمجة التطبيقات مثل `module.hot`. يمكن استخدام هذا أيضًا من وحدات ESM الصارمة (strict ESM modules) (`.mjs`، النوع `type: "module"` في `package.json`) التي ليس لها حق الوصول إلى `module`.
 
-### Work Queues
+### طوابير العمل (Work Queues)
 
-Webpack used to handle module processing by functions calling functions, and a `semaphore` which limits parallelism. The `Compilation.semaphore` has been removed and async queues now handle work queuing and processing. Each step has a separate queue:
+كان Webpack يتعامل مع معالجة الوحدة عن طريق وظائف (functions) تستدعي وظائف، وإشارة (semaphore) تحد من التوازي (parallelism). تمت إزالة `Compilation.semaphore` وتقوم الطوابير غير المتزامنة (async queues) الآن بمعالجة طوابير العمل والمعالجة. لكل خطوة طابور منفصل:
 
-- `Compilation.factorizeQueue`: calling the module factory for a group of dependencies.
-- `Compilation.addModuleQueue`: adding the module to the compilation queue (may restore module from cache).
-- `Compilation.buildQueue`: building the module if necessary (may stores module to cache).
-- `Compilation.rebuildQueue`: building a module again if manually triggered.
-- `Compilation.processDependenciesQueue`: processing dependencies of a module.
+- `Compilation.factorizeQueue`: استدعاء مصنع الوحدات (module factory) لمجموعة من التبعيات (dependencies).
+- `Compilation.addModuleQueue`: إضافة الوحدة إلى طابور التجميع (compilation queue) (قد يستعيد الوحدة من ذاكرة التخزين المؤقت).
+- `Compilation.buildQueue`: بناء الوحدة إذا لزم الأمر (قد يخزن الوحدة في ذاكرة التخزين المؤقت).
+- `Compilation.rebuildQueue`: بناء وحدة مرة أخرى إذا تم تشغيلها يدويًا.
+- `Compilation.processDependenciesQueue`: معالجة التبعيات الخاصة بالوحدة.
 
-These queues have some hooks to watch and intercept job processing.
+تحتوي هذه الطوابير على بعض الخطافات (hooks) لمشاهدة واعتراض معالجة الوظيفة (job processing).
 
-In the future, multiple compilers may work together and job orchestration can be done by intercepting these queues.
+في المستقبل، قد تعمل مترجمات متعددة معًا ويمكن إجراء تنسيق الوظائف (job orchestration) عن طريق اعتراض هذه الطوابير.
 
-**MIGRATION**: As this is a newly introduced functionality, there is nothing to migrate.
+**الترحيل**: نظرًا لأن هذه وظيفة تم تقديمها حديثًا، فلا يوجد شيء لترحيله.
 
-### Logging
+### التسجيل (Logging)
+تتضمن تصميمات webpack الداخلية بعض التسجيل (logging) الآن.
+يمكن استخدام خيارات `stats.logging` و `infrastructureLogging` لتمكين هذه الرسائل.
 
-Webpack internals includes some logging now.
-`stats.logging` and `infrastructureLogging` options can be used to enabled these messages.
+### رسم بياني للوحدة والحزمة (Module and Chunk Graph)
 
-### Module and Chunk Graph
+كان Webpack يقوم بتخزين الوحدة المحللة (resolved module) في التبعية، وتخزين الوحدات المضمنة في الحزمة (chunk). لم يعد هذا هو الحال. يتم الآن تخزين جميع المعلومات حول كيفية توصيل الوحدات في الرسم البياني للوحدة (module graph) في فئة `ModuleGraph`. يتم الآن تخزين جميع المعلومات حول كيفية توصيل الوحدات بالحزم في فئة `ChunkGraph`. المعلومات التي تعتمد على سبيل المثال على الرسم البياني للحزمة، يتم تخزينها أيضًا في الفئة ذات الصلة.
 
-Webpack used to store a resolved module in the dependency, and store the contained modules in the chunk. This is no longer the case. All information about how modules are connected in the module graph are now stored in a ModuleGraph class. All information about how modules are connected with chunks are now stored in the ChunkGraph class. The information which depends on i. e. the chunk graph, is also stored in the related class.
-
-That means the following information about modules has been moved:
+هذا يعني أنه تم نقل المعلومات التالية حول الوحدات:
 
 - Module connections -> ModuleGraph
 - Module issuer -> ModuleGraph
-- Module optimization bailout -> ModuleGraph (TODO: check if it should ChunkGraph instead)
+- Module optimization bailout -> ModuleGraph (ملاحظة: تحقق مما إذا كان يجب أن يكون ChunkGraph بدلاً من ذلك)
 - Module usedExports -> ModuleGraph
 - Module providedExports -> ModuleGraph
 - Module pre order index -> ModuleGraph
@@ -1076,96 +1075,96 @@ That means the following information about modules has been moved:
 - Module is runtime module in chunk -> ChunkGraph
 - Chunk runtime requirements -> ChunkGraph
 
-Webpack used to disconnect modules from the graph when restored from the cache. This is no longer necessary. A Module stores no info about the graph and can technically be used in multiple graphs. This makes caching easier.
+كان Webpack يقوم بفصل الوحدات عن الرسم البياني عند استعادتها من ذاكرة التخزين المؤقت. لم يعد هذا ضروريًا. لا تقوم الوحدة (Module) بتخزين أي معلومات حول الرسم البياني ويمكن استخدامها تقنيًا في رسوم بيانية متعددة. هذا يجعل التخزين المؤقت أسهل.
 
-There is a compat-layer for most of these changes, which prints a deprecation warning when used.
+هناك طبقة توافق لمعظم هذه التغييرات، والتي تطبع تحذير إهمال عند استخدامها.
 
-**MIGRATION**: Use the new APIs on ModuleGraph and ChunkGraph
+**الترحيل**: استخدم واجهات برمجة التطبيقات (APIs) الجديدة على `ModuleGraph` و `ChunkGraph`
 
 ### Init Fragments
 
-`DependenciesBlockVariables` has been removed in favor of InitFragments. `DependencyTemplates` can now add `InitFragments` to inject code to the top of the module's source. `InitFragments` allows deduplication.
+تمت إزالة `DependenciesBlockVariables` لصالح `InitFragments`. يمكن الآن لـ `DependencyTemplates` إضافة `InitFragments` لحقن التعليمات البرمجية في أعلى مصدر الوحدة. تسمح `InitFragments` بإلغاء التكرار (deduplication).
 
-**MIGRATION**: Use `InitFragments` instead of inserting something at a negative index into the source.
+**الترحيل**: استخدم `InitFragments` بدلاً من إدراج شيء ما في فهرس سالب (negative index) داخل المصدر.
 
-### Module Source Types
+### أنواع مصادر الوحدة (Module Source Types)
 
-Modules now have to define which source types they support via `Module.getSourceTypes()`. Depending on that, different plugins call `source()` with these types. i. e. for source type `javascript` the `JavascriptModulesPlugin` embeds the source code into the bundle. Source type `webassembly` will make the `WebAssemblyModulesPlugin` emit a wasm file. Custom source types are also supported, i. e. the mini-css-extract-plugin will probably use the source type `stylesheet` to embed the source code into a css file.
+يجب على الوحدات الآن تحديد أنواع المصادر (source types) التي تدعمها عبر `Module.getSourceTypes()`. اعتمادًا على ذلك، تستدعي الإضافات المختلفة `source()` باستخدام هذه الأنواع. على سبيل المثال، بالنسبة لنوع المصدر `javascript`، تقوم إضافة `JavascriptModulesPlugin` بتضمين الكود المصدري في الحزمة. سيؤدي نوع المصدر `webassembly` إلى قيام إضافة `WebAssemblyModulesPlugin` بإصدار ملف wasm. يتم دعم أنواع المصادر المخصصة أيضًا، على سبيل المثال من المحتمل أن تستخدم إضافة mini-css-extract-plugin نوع المصدر `stylesheet` لتضمين كود المصدر في ملف css.
 
-There is no relationship between module type and source type. i. e. module type `json` also uses source type `javascript` and module type `webassembly/experimental` uses source types `javascript` and `webassembly`.
+لا توجد علاقة بين نوع الوحدة (module type) ونوع المصدر (source type). أي أن نوع الوحدة `json` يستخدم أيضًا نوع المصدر `javascript` ويستخدم نوع الوحدة `webassembly/experimental` أنواع المصدر `javascript` و `webassembly`.
 
-**MIGRATION**: Custom modules need to implement these new interface methods.
+**الترحيل**: تحتاج الوحدات المخصصة إلى تنفيذ طرق الواجهة الجديدة هذه.
 
-### Plugins for Stats
+### إضافات الإحصائيات (Plugins for Stats)
 
-Stats `preset`, `default`, `json` and `toString` are now baked in by a plugin system. Converted the current Stats into plugins.
+الإحصائيات `preset`، `default`، `json` و `toString` مدمجة الآن بواسطة نظام إضافة (plugin system). تم تحويل الإحصائيات الحالية إلى إضافات.
 
-**MIGRATION**: Instead of replacing the whole Stats functionality, you can now customize it. Extra information can now be added to the stats json instead of writing a separate file.
+**الترحيل**: بدلاً من استبدال وظيفة الإحصائيات بالكامل، يمكنك الآن تخصيصها. يمكن الآن إضافة معلومات إضافية إلى إحصائيات json بدلاً من كتابة ملف منفصل.
 
-### New Watching
+### مراقبة جديدة (New Watching)
 
-The watcher used by webpack was refactored. It was previously using `chokidar` and the native dependency `fsevents` (only on macOS). Now it's only based on native Node.js `fs`. This means there is no native dependency left in webpack.
+تمت إعادة هيكلة المراقب (watcher) الذي يستخدمه webpack. كان يستخدم سابقًا `chokidar` والتبعية الأصلية `fsevents` (فقط على نظام macOS). الآن يعتمد فقط على `fs` الخاص بـ Node.js الأصلي. هذا يعني أنه لم يتبق أي تبعية أصلية في webpack.
 
-It also captures more information about filesystem while watching. It now captures mtimes and watches event times, as well as information about missing files. For this, the `WatchFileSystem` API changed a little bit. While on it we also converted Arrays to Sets and Objects to Maps.
+كما أنه يلتقط المزيد من المعلومات حول نظام الملفات أثناء المراقبة. يلتقط الآن أوقات التعديل (mtimes) ويراقب أوقات الأحداث (event times)، بالإضافة إلى معلومات حول الملفات المفقودة. لهذا الغرض، تغيرت واجهة `WatchFileSystem` قليلاً. أثناء القيام بذلك، قمنا أيضًا بتحويل المصفوفات (Arrays) إلى `Sets` والكائنات (Objects) إلى `Maps`.
 
-### SizeOnlySource after emit
+### SizeOnlySource بعد الإصدار
 
-Webpack now replaces the Sources in `Compilation.assets` with `SizeOnlySource` variants to reduce memory usage.
+يستبدل Webpack الآن المصادر (Sources) في `Compilation.assets` بمتغيرات `SizeOnlySource` لتقليل استخدام الذاكرة.
 
-### Emitting assets multiple times
+### إصدار الأصول مرات متعددة
 
-The warning `Multiple assets emit different content to the same filename` has been made an error.
+تم تحويل التحذير (warning) `Multiple assets emit different content to the same filename` (محتوى مختلف لعدة أصول يتم إصداره بنفس اسم الملف) إلى خطأ (error).
 
 ### ExportsInfo
 
-The way how information about exports of modules is stored has been refactored. The ModuleGraph now features an `ExportsInfo` for each `Module`, which stores information per export. It also stores information about unknown exports and if the module is used in a side-effect-only way.
+تمت إعادة هيكلة الطريقة التي يتم بها تخزين المعلومات حول صادرات الوحدات (exports of modules). يحتوي `ModuleGraph` الآن على `ExportsInfo` لكل `Module`، والذي يقوم بتخزين المعلومات لكل تصدير. كما يقوم بتخزين معلومات حول الصادرات غير المعروفة وما إذا كانت الوحدة تُستخدم بطريقة لا تحتوي إلا على تأثيرات جانبية (side-effect-only).
 
-For each export the following information is stored:
+بالنسبة لكل تصدير، يتم تخزين المعلومات التالية:
 
-- Is the export used? yes, no, not statically known, not determined. (see also `optimization.usedExports`)
-- Is the export provided? yes, no, not statically known, not determined. (see also `optimization.providedExports`)
-- Can be export name be renamed? yes, no, not determined.
-- The new name, if the export has been renamed. (see also `optimization.mangleExports`)
-- Nested ExportsInfo, if the export is an object with information attached itself
-  - Used for reexporting namespace objects: `import * as X from "..."; export { X };`
-  - Used for representing structure in JSON modules
+- هل التصدير مستخدم؟ نعم، لا، غير معروف بشكل ثابت (statically known)، غير محدد. (راجع أيضًا `optimization.usedExports`)
+- هل التصدير مُقدم (provided)؟ نعم، لا، غير معروف بشكل ثابت، غير محدد. (راجع أيضًا `optimization.providedExports`)
+- هل يمكن إعادة تسمية اسم التصدير؟ نعم، لا، غير محدد.
+- الاسم الجديد، إذا تمت إعادة تسمية التصدير. (راجع أيضًا `optimization.mangleExports`)
+- `ExportsInfo` المتداخلة، إذا كان التصدير عبارة عن كائن به معلومات مرفقة به
+  - يُستخدم لإعادة تصدير كائنات مساحات الأسماء: `import * as X from "..."; export { X };`
+  - يُستخدم لتمثيل البنية في وحدات JSON
 
-### Code Generation Phase
+### مرحلة توليد الكود (Code Generation Phase)
 
-The Compilation features Code Generation as separate compilation phase now. It no longer runs hidden in `Module.source()` or `Module.getRuntimeRequirements()`.
+تتميز عملية التجميع (Compilation) بتوليد الكود كمرحلة تجميع منفصلة الآن. لم تعد تعمل بشكل مخفي في `Module.source()` أو `Module.getRuntimeRequirements()`.
 
-This should make the flow much cleaner. It also allows to report progress for this phase and makes Code Generation more visible when profiling.
+يجب أن يجعل هذا التدفق أكثر نظافة. كما يسمح بالإبلاغ عن التقدم المحرز في هذه المرحلة ويجعل توليد الكود أكثر وضوحًا عند إنشاء ملفات التعريف (profiling).
 
-**MIGRATION**: `Module.source()` and `Module.getRuntimeRequirements()` are deprecated now. Use `Module.codeGeneration()` instead.
+**الترحيل**: تم إهمال `Module.source()` و `Module.getRuntimeRequirements()` الآن. استخدم `Module.codeGeneration()` بدلاً من ذلك.
 
-### DependencyReference
+### مرجع التبعية (DependencyReference)
 
-Webpack used to have a single method and type to represent references of dependencies (`Compilation.getDependencyReference` returning a `DependencyReference`).
-This type used to include all information about this reference like the referenced Module, which exports have been imported, if it's a weak reference and also some ordering related information.
+كان لدى Webpack طريقة ونوع واحد لتمثيل مراجع التبعيات (تقوم `Compilation.getDependencyReference` بإرجاع `DependencyReference`).
+كان هذا النوع يتضمن جميع المعلومات حول هذا المرجع مثل الوحدة (Module) المُشار إليها، وأسماء الصادرات التي تم استيرادها، وما إذا كان مرجعًا ضعيفًا (weak reference) وكذلك بعض المعلومات المتعلقة بالترتيب.
 
-Bundling all these information together makes getting the reference expensive and it's also called often (every time somebody needs one piece of information).
+يؤدي تجميع كل هذه المعلومات معًا إلى جعل الحصول على المرجع أمرًا مكلفًا ويتم استدعاؤه بشكل متكرر (في كل مرة يحتاج فيها شخص ما إلى معلومة واحدة).
 
-In webpack 5 this part of the codebase was refactored and the method has been split up.
+في webpack 5، تمت إعادة هيكلة هذا الجزء من قاعدة الكود وتم تقسيم الطريقة (method).
 
-- The referenced module can be read from the ModuleGraphConnection
-- The imported export names can be get via `Dependency.getReferencedExports()`
-- There is a `weak` flag on the `Dependency` class
-- Ordering is only relevant to `HarmonyImportDependencies` and can be get via `sourceOrder` property
+- يمكن قراءة الوحدة المشار إليها من `ModuleGraphConnection`
+- يمكن الحصول على أسماء الصادرات المستوردة عبر `Dependency.getReferencedExports()`
+- توجد علامة `weak` (ضعيف) على فئة `Dependency`
+- الترتيب وثيق الصلة فقط بـ `HarmonyImportDependencies` ويمكن الحصول عليه عبر خاصية `sourceOrder`
 
-### Presentational Dependencies
+### تبعيات العرض (Presentational Dependencies)
 
-There is now a new type of dependency in `NormalModules`: Presentational Dependencies
+يوجد الآن نوع جديد من التبعية في `NormalModules`: التبعيات التقديمية (Presentational Dependencies)
 
-These dependencies are only used during the Code Generation phase but are not used during Module Graph building.
-So they can never have referenced modules or influence exports/imports.
+تُستخدم هذه التبعيات فقط أثناء مرحلة "توليد الكود" (Code Generation) ولكن لا تُستخدم أثناء بناء الرسم البياني للوحدة (Module Graph).
+لذا لا يمكن أن يكون لديها وحدات مرجعية أو تؤثر على الصادرات/الواردات.
 
-These dependencies are cheaper to process and webpack uses them when possible
+هذه التبعيات أرخص في المعالجة ويستخدمها webpack عندما يكون ذلك ممكنًا.
 
-### Deprecated loaders
+### محملات مهملة (Deprecated loaders)
 
 - [`null-loader`](https://github.com/webpack-contrib/null-loader)
 
-  It will be deprecated. Use
+  سيتم إهماله. استخدم
 
   ```js
   module.exports = {
@@ -1177,7 +1176,7 @@ These dependencies are cheaper to process and webpack uses them when possible
   };
   ```
 
-  or use an absolute path
+  أو استخدم مسارًا مطلقًا (absolute path)
 
   ```js
   module.exports = {
@@ -1189,254 +1188,254 @@ These dependencies are cheaper to process and webpack uses them when possible
   };
   ```
 
-## Minor Changes
-
-- `Compiler.name`: When generating a compiler name with absolute paths, make sure to separate them with `|` or `!` on both parts of the name.
-  - Using space as a separator is now deprecated. (Paths could contain spaces)
-  - Hint: `|` is replaced with space in Stats string output.
-- `SystemPlugin` is now disabled by default.
-  - **MIGRATION**: Avoid using it as the spec has been removed. You can re-enable it with `Rule.parser.system: true`
-- `ModuleConcatenationPlugin`: concatenation is no longer prevented by `DependencyVariables` as they have been removed
-  - This means it can now concatenate in cases of `module`, `global`, `process` or the ProvidePlugin
-- `Stats.presetToOptions` removed
-  - **MIGRATION**: Use `compilation.createStatsOptions` instead
-- `SingleEntryPlugin` and `SingleEntryDependency` removed
-  - **MIGRATION**: use `EntryPlugin` and `EntryDependency`
-- Chunks can now have multiple entry modules
-- `ExtendedAPIPlugin` removed
-  - **MIGRATION**: No longer needed, `__webpack_hash__` and `__webpack_chunkname__` can always be used and runtime code is injected where needed.
-- `ProgressPlugin` no longer uses tapable context for `reportProgress`
-  - **MIGRATION**: Use `ProgressPlugin.getReporter(compiler)` instead
-- `ProvidePlugin` is now re-enabled for `.mjs` files
-- `Stats` json `errors` and `warnings` no longer contain strings but objects with information splitted into properties.
-  - **MIGRATION**: Access the information on the properties. i. e. `message`
-- `Compilation.hooks.normalModuleLoader` is deprecated
-  - **MIGRATION**: Use `NormalModule.getCompilationHooks(compilation).loader` instead
-- Changed hooks in `NormalModuleFactory` from waterfall to bailing, changed and renamed hooks that return waterfall functions
-- Removed `compilationParams.compilationDependencies`
-  - Plugins can add dependencies to the compilation by adding to `compilation.file/context/missingDependencies`
-  - Compat layer will delegate `compilationDependencies.add` to `fileDependencies.add`
-- `stats.assetsByChunkName[x]` is now always an array
-- `__webpack_get_script_filename__` function added to get the filename of a script file
-- `"sideEffects"` in package.json will be handled by `glob-to-regex` instead of `micromatch`
-  - This may have changed semantics in edge-cases
-- `checkContext` was removed from `IgnorePlugin`
-- New `__webpack_exports_info__` API allows export usage introspection
-- SourceMapDevToolPlugin applies to non-chunk assets too now
-- EnvironmentPlugin shows an error now when referenced env variable is missing and has no fallback
-- Remove `serve` property from schema
-
-## Other Minor Changes
-
-- removed builtin directory and replaced builtins with runtime modules
-- Removed deprecated features
-  - BannerPlugin now only support one argument that can be an object, string or function
-- removed `CachePlugin`
-- `Chunk.entryModule` is deprecated, use ChunkGraph instead
-- `Chunk.hasEntryModule` is deprecated
-- `Chunk.addModule` is deprecated
-- `Chunk.removeModule` is deprecated
-- `Chunk.getNumberOfModules` is deprecated
-- `Chunk.modulesIterable` is deprecated
-- `Chunk.compareTo` is deprecated
-- `Chunk.containsModule` is deprecated
-- `Chunk.getModules` is deprecated
-- `Chunk.remove` is deprecated
-- `Chunk.moveModule` is deprecated
-- `Chunk.integrate` is deprecated
-- `Chunk.canBeIntegrated` is deprecated
-- `Chunk.isEmpty` is deprecated
-- `Chunk.modulesSize` is deprecated
-- `Chunk.size` is deprecated
-- `Chunk.integratedSize` is deprecated
+## تغييرات طفيفة (Minor Changes)
+
+- `Compiler.name`: عند إنشاء اسم مترجم (compiler name) بمسارات مطلقة، تأكد من فصلها باستخدام `|` أو `!` في كلا جزأي الاسم.
+  - أصبح استخدام المسافة (space) كفاصل مهملًا الآن. (يمكن أن تحتوي المسارات على مسافات)
+  - تلميح: يتم استبدال `|` بمسافة في إخراج سلسلة الإحصائيات (Stats string output).
+- يتم الآن تعطيل `SystemPlugin` افتراضيًا.
+  - **الترحيل**: تجنب استخدامه حيث تمت إزالة المواصفات (spec). يمكنك إعادة تمكينه باستخدام `Rule.parser.system: true`
+- `ModuleConcatenationPlugin`: لم يعد التسلسل (concatenation) يُمنع بواسطة `DependencyVariables` حيث تمت إزالتها
+  - هذا يعني أنه يمكن الآن التسلسل في حالات `module`، `global`، `process` أو الـ `ProvidePlugin`
+- إزالة `Stats.presetToOptions`
+  - **الترحيل**: استخدم `compilation.createStatsOptions` بدلاً من ذلك
+- إزالة `SingleEntryPlugin` و `SingleEntryDependency`
+  - **الترحيل**: استخدم `EntryPlugin` و `EntryDependency`
+- يمكن أن تحتوي الحزم (Chunks) الآن على وحدات دخول (entry modules) متعددة
+- إزالة `ExtendedAPIPlugin`
+  - **الترحيل**: لم يعد هناك حاجة إليها، يمكن دائمًا استخدام `__webpack_hash__` و `__webpack_chunkname__` ويتم حقن كود وقت التشغيل عند الحاجة.
+- لم يعد `ProgressPlugin` يستخدم سياق tapable لـ `reportProgress`
+  - **الترحيل**: استخدم `ProgressPlugin.getReporter(compiler)` بدلاً من ذلك
+- تمت إعادة تفعيل `ProvidePlugin` الآن لملفات `.mjs`
+- لم تعد الأخطاء والتحذيرات في ملفات الإحصائيات (`Stats` json `errors` and `warnings`) تحتوي على سلاسل نصية (strings) بل أصبحت تحتوي على كائنات بمعلومات مقسمة إلى خصائص.
+  - **الترحيل**: قم بالوصول إلى المعلومات على الخصائص. مثل `message`
+- إهمال `Compilation.hooks.normalModuleLoader`
+  - **الترحيل**: استخدم `NormalModule.getCompilationHooks(compilation).loader` بدلاً من ذلك
+- تغيير الخطافات في `NormalModuleFactory` من المتتالية (waterfall) إلى المنسحبة (bailing)، وتغيير وإعادة تسمية الخطافات التي تُرجع وظائف متتالية (waterfall functions)
+- إزالة `compilationParams.compilationDependencies`
+  - يمكن للإضافات إضافة تبعيات إلى التجميع (compilation) عن طريق إضافتها إلى `compilation.file/context/missingDependencies`
+  - ستقوم طبقة التوافق بتفويض `compilationDependencies.add` إلى `fileDependencies.add`
+- أصبح `stats.assetsByChunkName[x]` الآن دائمًا مصفوفة (array)
+- تمت إضافة دالة `__webpack_get_script_filename__` للحصول على اسم ملف نص برمجي (script file)
+- سيتم التعامل مع `"sideEffects"` في package.json بواسطة `glob-to-regex` بدلاً من `micromatch`
+  - قد يؤدي هذا إلى تغيير الدلالات (semantics) في الحالات القصوى (edge-cases)
+- تمت إزالة `checkContext` من `IgnorePlugin`
+- واجهة برمجة تطبيقات (API) جديدة `__webpack_exports_info__` تتيح استبطان (introspection) استخدام التصدير
+- تُطبق إضافة `SourceMapDevToolPlugin` على الأصول غير الحزمية (non-chunk assets) الآن أيضًا
+- تعرض `EnvironmentPlugin` خطأ الآن عند فقدان متغير البيئة المُشار إليه وعدم وجود بديل له (no fallback)
+- إزالة خاصية `serve` من المخطط (schema)
+
+## تغييرات طفيفة أخرى (Other Minor Changes)
+
+- إزالة الدليل المُدمج (builtin directory) واستبدال المدمجات (builtins) بوحدات وقت التشغيل
+- إزالة الميزات المهملة
+  - تدعم `BannerPlugin` الآن وسيطًا واحدًا فقط يمكن أن يكون كائنًا (object) أو سلسلة نصية (string) أو دالة (function)
+- إزالة `CachePlugin`
+- تم إهمال `Chunk.entryModule`، استخدم `ChunkGraph` بدلاً من ذلك
+- إهمال `Chunk.hasEntryModule`
+- إهمال `Chunk.addModule`
+- إهمال `Chunk.removeModule`
+- إهمال `Chunk.getNumberOfModules`
+- إهمال `Chunk.modulesIterable`
+- إهمال `Chunk.compareTo`
+- إهمال `Chunk.containsModule`
+- إهمال `Chunk.getModules`
+- إهمال `Chunk.remove`
+- إهمال `Chunk.moveModule`
+- إهمال `Chunk.integrate`
+- إهمال `Chunk.canBeIntegrated`
+- إهمال `Chunk.isEmpty`
+- إهمال `Chunk.modulesSize`
+- إهمال `Chunk.size`
+- إهمال `Chunk.integratedSize`
 - `Chunk.getChunkModuleMaps` is deprecated
-- `Chunk.hasModuleInGraph` is deprecated
-- `Chunk.updateHash` signature changed
-- `Chunk.getChildIdsByOrders` signature changed (TODO: consider moving to `ChunkGraph`)
-- `Chunk.getChildIdsByOrdersMap` signature changed (TODO: consider moving to `ChunkGraph`)
-- `Chunk.getChunkModuleMaps` removed
-- `Chunk.setModules` removed
-- deprecated Chunk methods removed
-- `ChunkGraph` added
-- `ChunkGroup.setParents` removed
-- `ChunkGroup.containsModule` removed
-- `Compilation.cache` was removed in favor of `Compilation.getCache()`
-- `ChunkGroup.remove` no longer disconnected the group from block
-- `ChunkGroup.compareTo` signature changed
-- `ChunkGroup.getChildrenByOrders` signature changed
-- `ChunkGroup` index and index renamed to pre/post order index
-  - old getter is deprecated
-- `ChunkTemplate.hooks.modules` signature changed
-- `ChunkTemplate.hooks.render` signature changed
-- `ChunkTemplate.updateHashForChunk` signature changed
-- `Compilation.hooks.optimizeChunkOrder` removed
-- `Compilation.hooks.optimizeModuleOrder` removed
-- `Compilation.hooks.advancedOptimizeModuleOrder` removed
-- `Compilation.hooks.optimizeDependenciesBasic` removed
-- `Compilation.hooks.optimizeDependenciesAdvanced` removed
-- `Compilation.hooks.optimizeModulesBasic` removed
-- `Compilation.hooks.optimizeModulesAdvanced` removed
-- `Compilation.hooks.optimizeChunksBasic` removed
-- `Compilation.hooks.optimizeChunksAdvanced` removed
-- `Compilation.hooks.optimizeChunkModulesBasic` removed
-- `Compilation.hooks.optimizeChunkModulesAdvanced` removed
-- `Compilation.hooks.optimizeExtractedChunksBasic` removed
-- `Compilation.hooks.optimizeExtractedChunks` removed
-- `Compilation.hooks.optimizeExtractedChunksAdvanced` removed
-- `Compilation.hooks.afterOptimizeExtractedChunks` removed
-- `Compilation.hooks.stillValidModule` added
-- `Compilation.hooks.statsPreset` added
-- `Compilation.hooks.statsNormalize` added
-- `Compilation.hooks.statsFactory` added
-- `Compilation.hooks.statsPrinter` added
-- `Compilation.fileDependencies`, `Compilation.contextDependencies` and `Compilation.missingDependencies` are now LazySets
-- `Compilation.entries` removed
-  - **MIGRATION**: Use `Compilation.entryDependencies` instead
-- `Compilation._preparedEntrypoints` removed
-- `dependencyTemplates` is now a `DependencyTemplates` class instead of a raw `Map`
-- `Compilation.fileTimestamps` and `contextTimestamps` removed
-  - **MIGRATION**: Use `Compilation.fileSystemInfo` instead
-- `Compilation.waitForBuildingFinished` removed
-  - **MIGRATION**: Use the new queues
-- `Compilation.addModuleDependencies` removed
-- `Compilation.prefetch` removed
-- `Compilation.hooks.beforeHash` is now called after the hashes of modules are created
-  - **MIGRATION**: Use `Compilation.hooks.beforeModuleHash` instead
-- `Compilation.applyModuleIds` removed
-- `Compilation.applyChunkIds` removed
-- `Compiler.root` added, which points to the root compiler
-  - it can be used to cache data in WeakMaps instead of statically scoped
-- `Compiler.hooks.afterDone` added
-- `Source.emitted` is no longer set by the Compiler
-  - **MIGRATION**: Check `Compilation.emittedAssets` instead
-- `Compiler/Compilation.compilerPath` added: It's a unique name of the compiler in the compiler tree. (Unique to the root compiler scope)
-- `Module.needRebuild` deprecated
-  - **MIGRATION**: use `Module.needBuild` instead
-- `Dependency.getReference` signature changed
-- `Dependency.getExports` signature changed
-- `Dependency.getWarnings` signature changed
-- `Dependency.getErrors` signature changed
-- `Dependency.updateHash` signature changed
-- `Dependency.module` removed
-- There is now a base class for `DependencyTemplate`
-- `MultiEntryDependency` removed
-- `EntryDependency` added
-- `EntryModuleNotFoundError` removed
-- `SingleEntryPlugin` removed
-- `EntryPlugin` added
-- `Generator.getTypes` added
-- `Generator.getSize` added
-- `Generator.generate` signature changed
-- `HotModuleReplacementPlugin.getParserHooks` added
-- `Parser` was moved to `JavascriptParser`
-- `ParserHelpers` was moved to `JavascriptParserHelpers`
-- `MainTemplate.hooks.moduleObj` removed
-- `MainTemplate.hooks.currentHash` removed
-- `MainTemplate.hooks.addModule` removed
-- `MainTemplate.hooks.requireEnsure` removed
-- `MainTemplate.hooks.globalHashPaths` removed
-- `MainTemplate.hooks.globalHash` removed
-- `MainTemplate.hooks.hotBootstrap` removed
-- `MainTemplate.hooks` some signatures changed
-- `Module.hash` deprecated
-- `Module.renderedHash` deprecated
-- `Module.reasons` removed
-- `Module.id` deprecated
-- `Module.index` deprecated
-- `Module.index2` deprecated
-- `Module.depth` deprecated
-- `Module.issuer` deprecated
-- `Module.profile` removed
-- `Module.prefetched` removed
-- `Module.built` removed
-- `Module.used` removed
-  - **MIGRATION**: Use `Module.getUsedExports` instead
-- Module.usedExports deprecated
-  - **MIGRATION**: Use `Module.getUsedExports` instead
-- `Module.optimizationBailout` deprecated
-- `Module.exportsArgument` removed
-- `Module.optional` deprecated
-- `Module.disconnect` removed
-- `Module.unseal` removed
-- `Module.setChunks` removed
-- `Module.addChunk` deprecated
-- `Module.removeChunk` deprecated
-- `Module.isInChunk` deprecated
-- `Module.isEntryModule` deprecated
-- `Module.getChunks` deprecated
-- `Module.getNumberOfChunks` deprecated
-- `Module.chunksIterable` deprecated
-- `Module.hasEqualsChunks` removed
-- `Module.useSourceMap` moved to `NormalModule`
-- `Module.addReason` removed
-- `Module.removeReason` removed
-- `Module.rewriteChunkInReasons` removed
-- `Module.isUsed` removed
-  - **MIGRATION**: Use `isModuleUsed`, `isExportUsed` and `getUsedName` instead
-- `Module.updateHash` signature changed
-- `Module.sortItems` removed
-- `Module.unbuild` removed
-  - **MIGRATION**: Use `invalidateBuild` instead
-- `Module.getSourceTypes` added
-- `Module.getRuntimeRequirements` added
-- `Module.size` signature changed
-- `ModuleFilenameHelpers.createFilename` signature changed
-- `ModuleProfile` class added with more data
-- `ModuleReason` removed
-- `ModuleTemplate.hooks` signatures changed
-- `ModuleTemplate.render` signature changed
-- `Compiler.dependencies` removed
-  - **MIGRATION**: Use `MultiCompiler.setDependencies` instead
-- `MultiModule` removed
-- `MultiModuleFactory` removed
-- `NormalModuleFactory.fileDependencies`, `NormalModuleFactory.contextDependencies` and `NormalModuleFactory.missingDependencies` are now LazySets
-- `RuntimeTemplate` methods now take `runtimeRequirements` arguments
-- `serve` property is removed
-- `Stats.jsonToString` removed
-- `Stats.filterWarnings` removed
-- `Stats.getChildOptions` removed
-- `Stats` helper methods removed
-- `Stats.toJson` signature changed (second argument removed)
-- `ExternalModule.external` removed
-- `HarmonyInitDependency` removed
-- `Dependency.getInitFragments` deprecated
-  - **MIGRATION**: Use `apply` `initFragments` instead
-- DependencyReference now takes a function to a module instead of a Module
-- HarmonyImportSpecifierDependency.redirectedId removed
-  - **MIGRATION**: Use `setId` instead
-- acorn 5 -> 8
-- Testing
-  - HotTestCases now runs for multiple targets `async-node` `node` `web` `webworker`
-  - TestCases now also runs for filesystem caching with `store: "instant"` and `store: "pack"`
-  - TestCases now also runs for deterministic module ids
-- Tooling added to order the imports (checked in CI)
-- Chunk name mapping in runtime no longer contains entries when chunk name equals chunk id
-- add `resolvedModuleId` `resolvedModuleIdentifier` and `resolvedModule` to reasons in Stats which point to the module before optimizations like scope hoisting
-- show `resolvedModule` in Stats toString output
-- loader-runner was upgraded: https://github.com/webpack/loader-runner/releases/tag/v3.0.0
-- `file/context/missingDependencies` in `Compilation` are no longer sorted for performance reasons
-  - Do not rely on the order
-- webpack-sources was upgraded to version 2: https://github.com/webpack/webpack-sources/releases/tag/v2.0.1
-- webpack-command support was removed
-- Use schema-utils@2 for schema validation
-- `Compiler.assetEmitted` has an improved second argument with more information
-- BannerPlugin omits trailing whitespace
-- removed `minChunkSize` option from `LimitChunkCountPlugin`
-- reorganize from javascript related files into sub-directory
+- إهمال `Chunk.hasModuleInGraph`
+- تغيير توقيع (signature) `Chunk.updateHash`
+- تغيير توقيع `Chunk.getChildIdsByOrders` (ملاحظة: فكر في نقله إلى `ChunkGraph`)
+- تغيير توقيع `Chunk.getChildIdsByOrdersMap` (ملاحظة: فكر في نقله إلى `ChunkGraph`)
+- إزالة `Chunk.getChunkModuleMaps`
+- إزالة `Chunk.setModules`
+- إزالة طرق Chunk المهملة (deprecated Chunk methods)
+- إضافة `ChunkGraph`
+- إزالة `ChunkGroup.setParents`
+- إزالة `ChunkGroup.containsModule`
+- تمت إزالة `Compilation.cache` لصالح `Compilation.getCache()`
+- لم يعد `ChunkGroup.remove` يفصل المجموعة عن الكتلة (block)
+- تغيير توقيع `ChunkGroup.compareTo`
+- تغيير توقيع `ChunkGroup.getChildrenByOrders`
+- تم تغيير اسم index و index في `ChunkGroup` إلى index للترتيب المسبق/اللاحق (pre/post order index)
+  - تم إهمال المسترد (getter) القديم
+- تغيير توقيع `ChunkTemplate.hooks.modules`
+- تغيير توقيع `ChunkTemplate.hooks.render`
+- تغيير توقيع `ChunkTemplate.updateHashForChunk`
+- إزالة `Compilation.hooks.optimizeChunkOrder`
+- إزالة `Compilation.hooks.optimizeModuleOrder`
+- إزالة `Compilation.hooks.advancedOptimizeModuleOrder`
+- إزالة `Compilation.hooks.optimizeDependenciesBasic`
+- إزالة `Compilation.hooks.optimizeDependenciesAdvanced`
+- إزالة `Compilation.hooks.optimizeModulesBasic`
+- إزالة `Compilation.hooks.optimizeModulesAdvanced`
+- إزالة `Compilation.hooks.optimizeChunksBasic`
+- إزالة `Compilation.hooks.optimizeChunksAdvanced`
+- إزالة `Compilation.hooks.optimizeChunkModulesBasic`
+- إزالة `Compilation.hooks.optimizeChunkModulesAdvanced`
+- إزالة `Compilation.hooks.optimizeExtractedChunksBasic`
+- إزالة `Compilation.hooks.optimizeExtractedChunks`
+- إزالة `Compilation.hooks.optimizeExtractedChunksAdvanced`
+- إزالة `Compilation.hooks.afterOptimizeExtractedChunks`
+- إضافة `Compilation.hooks.stillValidModule`
+- إضافة `Compilation.hooks.statsPreset`
+- إضافة `Compilation.hooks.statsNormalize`
+- إضافة `Compilation.hooks.statsFactory`
+- إضافة `Compilation.hooks.statsPrinter`
+- أصبحت `Compilation.fileDependencies`، `Compilation.contextDependencies` و `Compilation.missingDependencies` الآن `LazySets`
+- إزالة `Compilation.entries`
+  - **الترحيل**: استخدم `Compilation.entryDependencies` بدلاً من ذلك
+- إزالة `Compilation._preparedEntrypoints`
+- أصبح `dependencyTemplates` الآن فئة (class) `DependencyTemplates` بدلاً من `Map` خام
+- إزالة `Compilation.fileTimestamps` و `contextTimestamps`
+  - **الترحيل**: استخدم `Compilation.fileSystemInfo` بدلاً من ذلك
+- إزالة `Compilation.waitForBuildingFinished`
+  - **الترحيل**: استخدم الطوابير (queues) الجديدة
+- إزالة `Compilation.addModuleDependencies`
+- إزالة `Compilation.prefetch`
+- يتم الآن استدعاء `Compilation.hooks.beforeHash` بعد إنشاء التجزئات (hashes) الخاصة بالوحدات
+  - **الترحيل**: استخدم `Compilation.hooks.beforeModuleHash` بدلاً من ذلك
+- إزالة `Compilation.applyModuleIds`
+- إزالة `Compilation.applyChunkIds`
+- تمت إضافة `Compiler.root`، والذي يشير إلى المترجم الأساسي (root compiler)
+  - يمكن استخدامه لتخزين البيانات مؤقتًا في `WeakMaps` بدلاً من أن يكون نطاقها ثابتًا (statically scoped)
+- إضافة `Compiler.hooks.afterDone`
+- لم يعد `Source.emitted` يتم تعيينه بواسطة المترجم (Compiler)
+  - **الترحيل**: تحقق من `Compilation.emittedAssets` بدلاً من ذلك
+- إضافة `Compiler/Compilation.compilerPath`: إنه اسم فريد للمترجم في شجرة المترجمين. (فريد لنطاق المترجم الأساسي - root compiler scope)
+- إهمال `Module.needRebuild`
+  - **الترحيل**: استخدم `Module.needBuild` بدلاً من ذلك
+- تغيير توقيع `Dependency.getReference`
+- تغيير توقيع `Dependency.getExports`
+- تغيير توقيع `Dependency.getWarnings`
+- تغيير توقيع `Dependency.getErrors`
+- تغيير توقيع `Dependency.updateHash`
+- إزالة `Dependency.module`
+- يوجد الآن فئة أساسية (base class) لـ `DependencyTemplate`
+- إزالة `MultiEntryDependency`
+- إضافة `EntryDependency`
+- إزالة `EntryModuleNotFoundError`
+- إزالة `SingleEntryPlugin`
+- إضافة `EntryPlugin`
+- إضافة `Generator.getTypes`
+- إضافة `Generator.getSize`
+- تغيير توقيع `Generator.generate`
+- إضافة `HotModuleReplacementPlugin.getParserHooks`
+- تم نقل `Parser` إلى `JavascriptParser`
+- تم نقل `ParserHelpers` إلى `JavascriptParserHelpers`
+- إزالة `MainTemplate.hooks.moduleObj`
+- إزالة `MainTemplate.hooks.currentHash`
+- إزالة `MainTemplate.hooks.addModule`
+- إزالة `MainTemplate.hooks.requireEnsure`
+- إزالة `MainTemplate.hooks.globalHashPaths`
+- إزالة `MainTemplate.hooks.globalHash`
+- إزالة `MainTemplate.hooks.hotBootstrap`
+- تغيير بعض التوقيعات لـ `MainTemplate.hooks`
+- إهمال `Module.hash`
+- إهمال `Module.renderedHash`
+- إزالة `Module.reasons`
+- إهمال `Module.id`
+- إهمال `Module.index`
+- إهمال `Module.index2`
+- إهمال `Module.depth`
+- إهمال `Module.issuer`
+- إزالة `Module.profile`
+- إزالة `Module.prefetched`
+- إزالة `Module.built`
+- إزالة `Module.used`
+  - **الترحيل**: استخدم `Module.getUsedExports` بدلاً من ذلك
+- إهمال Module.usedExports
+  - **الترحيل**: استخدم `Module.getUsedExports` بدلاً من ذلك
+- إهمال `Module.optimizationBailout`
+- إزالة `Module.exportsArgument`
+- إهمال `Module.optional`
+- إزالة `Module.disconnect`
+- إزالة `Module.unseal`
+- إزالة `Module.setChunks`
+- إهمال `Module.addChunk`
+- إهمال `Module.removeChunk`
+- إهمال `Module.isInChunk`
+- إهمال `Module.isEntryModule`
+- إهمال `Module.getChunks`
+- إهمال `Module.getNumberOfChunks`
+- إهمال `Module.chunksIterable`
+- إزالة `Module.hasEqualsChunks`
+- تم نقل `Module.useSourceMap` إلى `NormalModule`
+- إزالة `Module.addReason`
+- إزالة `Module.removeReason`
+- إزالة `Module.rewriteChunkInReasons`
+- إزالة `Module.isUsed`
+  - **الترحيل**: استخدم `isModuleUsed`، `isExportUsed` و `getUsedName` بدلاً من ذلك
+- تغيير توقيع `Module.updateHash`
+- إزالة `Module.sortItems`
+- إزالة `Module.unbuild`
+  - **الترحيل**: استخدم `invalidateBuild` بدلاً من ذلك
+- إضافة `Module.getSourceTypes`
+- إضافة `Module.getRuntimeRequirements`
+- تغيير توقيع `Module.size`
+- تغيير توقيع `ModuleFilenameHelpers.createFilename`
+- إضافة فئة `ModuleProfile` مع مزيد من البيانات
+- إزالة `ModuleReason`
+- تغيير توقيعات `ModuleTemplate.hooks`
+- تغيير توقيع `ModuleTemplate.render`
+- إزالة `Compiler.dependencies`
+  - **الترحيل**: استخدم `MultiCompiler.setDependencies` بدلاً من ذلك
+- إزالة `MultiModule`
+- إزالة `MultiModuleFactory`
+- أصبحت `NormalModuleFactory.fileDependencies`، `NormalModuleFactory.contextDependencies` و `NormalModuleFactory.missingDependencies` الآن `LazySets`
+- تأخذ طرق `RuntimeTemplate` الآن وسطاء (arguments) `runtimeRequirements`
+- تمت إزالة خاصية `serve`
+- إزالة `Stats.jsonToString`
+- إزالة `Stats.filterWarnings`
+- إزالة `Stats.getChildOptions`
+- إزالة الطرق المساعدة (helper methods) لـ `Stats`
+- تغيير توقيع `Stats.toJson` (تمت إزالة الوسيط الثاني)
+- إزالة `ExternalModule.external`
+- إزالة `HarmonyInitDependency`
+- إهمال `Dependency.getInitFragments`
+  - **الترحيل**: استخدم `apply` `initFragments` بدلاً من ذلك
+- يأخذ `DependencyReference` الآن دالة لوحدة (function to a module) بدلاً من `Module`
+- إزالة `HarmonyImportSpecifierDependency.redirectedId`
+  - **الترحيل**: استخدم `setId` بدلاً من ذلك
+- acorn من الإصدار 5 -> 8
+- الاختبار (Testing)
+  - تعمل HotTestCases الآن لأهداف متعددة `async-node` `node` `web` `webworker`
+  - تعمل TestCases الآن أيضًا للتخزين المؤقت لنظام الملفات باستخدام `store: "instant"` و `store: "pack"`
+  - تعمل TestCases الآن أيضًا لمعرفات الوحدات الحتمية (deterministic module ids)
+- تمت إضافة أدوات لترتيب الواردات (imports) (يتم التحقق منها في CI)
+- لم يعد تعيين اسم الحزمة في وقت التشغيل (Chunk name mapping in runtime) يحتوي على إدخالات (entries) عندما يساوي اسم الحزمة معرف الحزمة
+- إضافة `resolvedModuleId`، `resolvedModuleIdentifier` و `resolvedModule` إلى الأسباب (reasons) في الإحصائيات (Stats) والتي تشير إلى الوحدة قبل التحسينات مثل رفع النطاق (scope hoisting)
+- عرض `resolvedModule` في إخراج `Stats` toString
+- تمت ترقية loader-runner: https://github.com/webpack/loader-runner/releases/tag/v3.0.0
+- لم تعد `file/context/missingDependencies` في `Compilation` مفروزة لأسباب تتعلق بالأداء
+  - لا تعتمد على الترتيب
+- تمت ترقية webpack-sources إلى الإصدار 2: https://github.com/webpack/webpack-sources/releases/tag/v2.0.1
+- تمت إزالة دعم webpack-command
+- استخدم schema-utils@2 للتحقق من صحة المخطط (schema validation)
+- يحتوي `Compiler.assetEmitted` على وسيط ثانٍ مُحسن بمزيد من المعلومات
+- يقوم `BannerPlugin` بحذف المسافات الزائدة (trailing whitespace)
+- تمت إزالة خيار `minChunkSize` من `LimitChunkCountPlugin`
+- إعادة التنظيم من الملفات المتعلقة بجافا سكريبت إلى دليل فرعي (sub-directory)
   - `webpack.JavascriptModulesPlugin` -> `webpack.javascript.JavascriptModulesPlugin`
-- Logger.getChildLogger added
-- change the default of entryOnly of the DllPlugin to true
-- remove special request shortening logic and use single relative paths for readable module names
-- allow webpack:// urls in SourceMaps to provided paths relative to webpack root context
-- add API to generate and process CLI arguments targeting webpack configuration
-- add `__system_context__` as context from System.js when using System.js as libraryTarget
-- add bigint support for the DefinePlugin
-- add bigint support for basic evaluations like maths
-- remove ability to modify the compilation hash after the hash has been created
-- remove HotModuleReplacementPlugin multiStep mode
-- `assetInfo` from `emitAsset` will now merge when nested objects or arrays are used
-- `[query]` is now a valid placeholder when for paths based on a `filename` like assets
-- add `Compilation.deleteAsset` to correctly delete an assets and non-shared related assets
-- expose `require("webpack-sources")` as `require("webpack").sources`
+- إضافة Logger.getChildLogger
+- تغيير الإعداد الافتراضي لـ `entryOnly` في DllPlugin إلى `true`
+- إزالة منطق تقصير الطلب الخاص (special request shortening logic) واستخدام مسارات نسبية مفردة (single relative paths) لأسماء وحدات قابلة للقراءة
+- السماح لعناوين webpack:// urls في SourceMaps بالمسارات المقدمة المتعلقة بالسياق الأساسي لـ webpack (webpack root context)
+- إضافة واجهة برمجة تطبيقات (API) لإنشاء ومعالجة وسيطات CLI التي تستهدف تكوين webpack
+- إضافة `__system_context__` كسياق (context) من System.js عند استخدام System.js كـ libraryTarget
+- إضافة دعم bigint لإضافة DefinePlugin
+- إضافة دعم bigint للتقييمات الأساسية (basic evaluations) مثل الرياضيات
+- إزالة القدرة على تعديل تجزئة التجميع (compilation hash) بعد إنشاء التجزئة
+- إزالة وضع الخطوات المتعددة (multiStep mode) لإضافة HotModuleReplacementPlugin
+- سوف تندمج الآن `assetInfo` من `emitAsset` عند استخدام الكائنات أو المصفوفات المتداخلة (nested objects or arrays)
+- يعد `[query]` الآن عنصرًا نائبًا (placeholder) صالحًا للمسارات بناءً على `filename` مثل الأصول (assets)
+- إضافة `Compilation.deleteAsset` لحذف الأصول (assets) والأصول غير المشتركة ذات الصلة بشكل صحيح
+- عرض `require("webpack-sources")` على هيئة `require("webpack").sources`
 - terser 5
-- Webpack can be written with a capital W when at the start of a sentence
+- يمكن كتابة Webpack بحرف W كبير عندما يكون في بداية جملة
\ No newline at end of file
diff --git a/src/content/blog/2020-12-08-roadmap-2021.mdx b/src/content/blog/2020-12-08-roadmap-2021.mdx
index 1070a9892a9d..c9d5e1db2026 100644
--- a/src/content/blog/2020-12-08-roadmap-2021.mdx
+++ b/src/content/blog/2020-12-08-roadmap-2021.mdx
@@ -1,100 +1,101 @@
 ---
-title: Roadmap 2021
+title: خارطة طريق 2021
 sort: 20201208
 contributors:
-  - sokra
+  - ameencfw
+  - RlxChap2
 ---
 
-It has been nearly 2 months since webpack 5 was officially released. Due to the sponsoring situation, we couldn't devote as much time to webpack as we would like to. Speaking only for myself (@sokra), I enjoyed the little break and have worked on a few side projects. Ironically, while I was using webpack 5 and all its bleeding-edge features (asset modules, worker support, persistent caching), I discovered a few more bugs in webpack 5 that people are likely to run into when upgrading their projects to webpack 5, which led to a lot of work going into bug fixing. Here is a little summary:
+لقد مر ما يقرب من شهرين منذ أن تم إصدار webpack 5 رسميًا. نظرًا لحالة الرعاية، لم نتمكن من تكريس الكثير من الوقت لـ webpack كما كنا نود. متحدثًا عن نفسي فقط (@sokra)، لقد استمتعت بالاستراحة القصيرة وعملت على بعض المشاريع الجانبية. ومن المفارقات، أثناء استخدامي لـ webpack 5 وجميع ميزاته المتطورة (asset modules، worker support، persistent caching)، اكتشفت بضعة أخطاء إضافية في webpack 5 من المحتمل أن يواجهها الأشخاص عند ترقية مشاريعهم إلى webpack 5، مما أدى إلى تخصيص الكثير من العمل لإصلاح الأخطاء. إليك ملخص صغير:
 
-## What happened so far?
+## ماذا حدث حتى الآن؟
 
-A few more things have been exposed from webpack, both typings-wise and runtime-wise. A few low-handling performance improvements have been made. Code without semicolons used to generate some invalid/incorrect code in some cases, which has been corrected. The combination of side-effect-free code + concatenated modules + reexports has led to some edge cases, which have been fixed (at least the known ones).
+تم الكشف عن بعض الأشياء الإضافية من webpack، سواء من حيث الأنواع (typings) أو من حيث وقت التشغيل (runtime). تم إجراء عدد قليل من تحسينات الأداء سهلة التنفيذ. كان الكود الخالي من الفواصل المنقوطة (semicolons) يولد كودًا غير صالح/غير صحيح في بعض الحالات، وقد تم تصحيح ذلك. أدى الجمع بين الكود الخالي من الآثار الجانبية + الوحدات المتسلسلة (concatenated modules) + إعادة التصدير (reexports) إلى بعض الحالات الطرفية (edge cases)، والتي تم إصلاحها (على الأقل المعروفة منها).
 
-But one bug reported by a user has led to the need for a completely new internal feature. You can skip it and go to the next chapter if you find webpack internals boring or too complex.
+ولكن أحد الأخطاء التي أبلغ عنها مستخدم أدى إلى الحاجة إلى ميزة داخلية جديدة تمامًا. يمكنك تخطي هذا والذهاب إلى الفصل التالي إذا كنت تجد الأجزاء الداخلية لـ webpack مملة أو معقدة للغاية.
 
-To trigger the bug we need three ingredients:
+لإطلاق الخطأ، نحتاج إلى ثلاثة مكونات:
 
-- Since webpack 5 the optimization in `production` mode will run the used exports analysis (Tree Shaking) against each runtime (which is often identical to the entrypoints), which means webpack can optimize each runtime (resp. entrypoint) individually.
-- A custom `optimization.splitChunks` configuration allows to forcefully merge modules into a single chunk. This is done by passing the `name` option. E.g. `{ test: /node_modules/, name: "vendors" }` merges modules from `node_modules` into a single chunk. While this is not recommended in general, it's possible and probably makes sense in some cases. The whole thing is about trade-offs anyway and choosing to merge all vendors into a single chunk can be good for long term caching this chunk for repeated visits or between multiple entrypoints.
-- When exports of a side-effect-free module are not used, the whole module is omitted from the module graph and the `import`-statement generates no runtime code at all.
+- منذ إصدار webpack 5، سيقوم التحسين (optimization) في وضع `production` (الإنتاج) بتشغيل تحليل الصادرات المستخدمة (Tree Shaking) ضد كل بيئة تشغيل (runtime) (والتي غالبًا ما تكون مطابقة لنقاط الدخول entrypoints)، مما يعني أن webpack يمكنه تحسين كل وقت تشغيل (أو نقطة دخول) على حدة.
+- يسمح تكوين `optimization.splitChunks` المخصص بدمج الوحدات بالقوة في حزمة (chunk) واحدة. يتم ذلك عن طريق تمرير الخيار `name`. على سبيل المثال `{ test: /node_modules/, name: "vendors" }` يدمج الوحدات من `node_modules` في حزمة واحدة. على الرغم من أن هذا غير موصى به بشكل عام، إلا أنه ممكن وربما يكون منطقيًا في بعض الحالات. الأمر برمته يتعلق بالمقايضات (trade-offs) على أي حال، واختيار دمج جميع الموردين (vendors) في حزمة واحدة يمكن أن يكون مفيدًا للتخزين المؤقت طويل المدى لهذه الحزمة للزيارات المتكررة أو بين نقاط الدخول المتعددة.
+- عندما لا يتم استخدام صادرات الوحدة الخالية من الآثار الجانبية، يتم حذف الوحدة بأكملها من رسم بياني الوحدة (module graph) ولا تُولد عبارة `import` أي كود وقت تشغيل (runtime code) على الإطلاق.
 
-A problem happens in an edge case where modules from two entrypoints are merged into a single chunk and they reference a side-effect-free module which is not in the shared chunk since only one of the entrypoints uses exports from the side-effect-free module. Modules in the shared chunk are used by both entrypoint, thus they need to include the exports that are used by any of the entrypoints.
-That means it will generate code referencing the side-effect-free module that is not available at runtime for the other entrypoint in the aforementioned edge case, which leads to an `undefined is not a function` or `cannot read property 'call' of undefined` error at runtime.
+تحدث مشكلة في حالة طرفية (edge case) حيث يتم دمج الوحدات من نقطتي دخول في حزمة واحدة وتشير إلى وحدة خالية من الآثار الجانبية ليست في الحزمة المشتركة لأن إحدى نقطتي الدخول فقط هي التي تستخدم صادرات من الوحدة الخالية من الآثار الجانبية. الوحدات الموجودة في الحزمة المشتركة تُستخدم من قبل كلتا نقطتي الدخول، وبالتالي فإنها تحتاج إلى تضمين الصادرات التي تستخدمها أي من نقطتي الدخول.
+هذا يعني أنها ستولد كودًا يشير إلى الوحدة الخالية من الآثار الجانبية والتي لا تتوفر في وقت التشغيل لنقطة الدخول الأخرى في الحالة الطرفية المذكورة أعلاه، مما يؤدي إلى حدوث خطأ `undefined is not a function` أو `cannot read property 'call' of undefined` في وقت التشغيل.
 
-A potential fix would be to include the side-effect-free module in all entrypoints, but as this module isn't really needed, that would be a waste of bundle size.
-So we went another route, which required the development of a new feature: `runtime-dependent code generation`.
-This allows to generate code which behaves differently depending on which runtime it executes.
+سيكون الإصلاح المحتمل هو تضمين الوحدة الخالية من الآثار الجانبية في جميع نقاط الدخول، ولكن نظرًا لأن هذه الوحدة ليست مطلوبة حقًا، فإن ذلك سيكون إهدارًا لحجم الحزمة.
+لذلك سلكنا طريقًا آخر، مما تطلب تطوير ميزة جديدة: `runtime-dependent code generation` (توليد الكود المعتمد على وقت التشغيل).
+يسمح هذا بتوليد كود يتصرف بشكل مختلف اعتمادًا على وقت التشغيل الذي يتم تنفيذه فيه.
 
-To put it another way, we are wrapping some generated code in `if`-blocks, so they only execute in one runtime.
-In this example, this would affect the `import`-statement which references the side-effect-free module.
-The import is only executed for one of the entrypoints.
-This avoids to include unnecessary modules, and it also avoids executing unnecessary code even if it would be available.
-So even if you are merging all code into a single chunk, only the code that is really used is executed.
+وبعبارة أخرى، نقوم بتغليف بعض الكود المولد في كتل `if`، بحيث يتم تنفيذها فقط في وقت تشغيل واحد.
+في هذا المثال، سيؤثر هذا على عبارة `import` التي تشير إلى الوحدة الخالية من الآثار الجانبية.
+يتم تنفيذ الاستيراد فقط لإحدى نقطتي الدخول.
+هذا يتجنب تضمين وحدات غير ضرورية، كما يتجنب تنفيذ كود غير ضروري حتى لو كان متاحًا.
+لذلك حتى إذا كنت تدمج كل التعليمات البرمجية في حزمة واحدة، سيتم تنفيذ الكود المُستخدم حقًا فقط.
 
-So far for the excurse, I hope it wasn't that boring...
+هذا كل شيء بخصوص هذه الاستطرادة، أتمنى ألا تكون مملة جدًا...
 
-## Roadmap 2021
+## خارطة طريق 2021
 
-So assuming we can sort out our sponsoring situation, the following is planned for 2021:
+بافتراض أنه يمكننا تسوية وضع الرعاية الخاص بنا، فإنه من المخطط القيام بما يلي في عام 2021:
 
-### Further stabilizing
+### المزيد من الاستقرار
 
-Our top-priority stays stabilizing webpack 5.
-So far the situation looks pretty good.
-Most critical bugs reported in the last time, affect some edge cases.
-So I guess webpack 5 should work for the general cases.
-But handling edge cases is (and should stay) one of webpack strength, so we want to continue to work hard fixing these.
-We think that many many webpack users need custom things for their build and that's something webpack offers via configurability and its rich plugin system.
+تبقى أولويتنا القصوى هي استقرار webpack 5.
+حتى الآن يبدو الوضع جيدًا جدًا.
+تؤثر معظم الأخطاء الحرجة التي تم الإبلاغ عنها في المرة الأخيرة على بعض الحالات الطرفية.
+لذلك أعتقد أن webpack 5 يجب أن يعمل بشكل جيد للحالات العامة.
+ولكن التعامل مع الحالات الطرفية هو (ويجب أن يبقى) أحد نقاط قوة webpack، لذلك نريد الاستمرار في العمل بجد لإصلاحها.
+نعتقد أن الكثير من مستخدمي webpack يحتاجون إلى أشياء مخصصة لعمليات البناء الخاصة بهم وهذا شيء يقدمه webpack من خلال إمكانية التكوين (configurability) ونظام الإضافات (plugin system) الغني الخاص به.
 
-### EcmaScript Modules
+### وحدات EcmaScript (EcmaScript Modules)
 
-EcmaScript Modules (ESM) are slowly gaining wide-spread adoption.
-On authoring side they are already the de facto standard to write code.
-On browser support it also looks pretty ok (except for IE11 and a few older mobile browsers).
-Browsers are still a bit lacking in supporting ESM for WebWorkers.
+تكتسب وحدات EcmaScript (ESM) تدريجيًا تبنيًا واسع النطاق.
+من جانب الكتابة، أصبحت بالفعل المعيار الفعلي لكتابة التعليمات البرمجية.
+من حيث دعم المتصفحات، يبدو الوضع جيدًا أيضًا (باستثناء IE11 وعدد قليل من متصفحات الهواتف المحمولة القديمة).
+لا تزال المتصفحات تفتقر إلى حد ما في دعم ESM لـ WebWorkers.
 
-One can also generate bundles that run in a `type=module` script tag, but that has few benefits currently.
+يمكن للمرء أيضًا إنشاء حزم تعمل في علامة نصية `<script type="module">`، ولكن هذا له فوائد قليلة في الوقت الحالي.
 
-There are multiple areas in webpack where ESM support can be improved:
+هناك مجالات متعددة في webpack حيث يمكن تحسين دعم ESM:
 
-#### ESM as chunk loading mechanism
+#### ESM كآلية لتحميل الحزم (chunk loading mechanism)
 
-When targeting the web webpack loads chunks via `script` tags.
-When targeting node.js webpack loads chunks via `require` or `fs` + `vm`.
-When targeting WebWorkers webpack loads chunk via `importScripts`.
+عند استهداف الويب، يقوم webpack بتحميل الحزم (chunks) عبر علامات `script`.
+عند استهداف node.js، يقوم webpack بتحميل الحزم عبر `require` أو `fs` + `vm`.
+عند استهداف WebWorkers، يقوم webpack بتحميل الحزمة عبر `importScripts`.
 
-In a not-so-far future, all these environments support ESM and more importantly the dynamic `import()` function.
-So a chunk loading mechanism based on `import()` can unify all these environments, while even needing less runtime code.
+في مستقبل ليس ببعيد، ستدعم جميع هذه البيئات ESM والأهم من ذلك دالة `import()` الديناميكية.
+وبالتالي يمكن لآلية تحميل الحزم المعتمدة على `import()` توحيد جميع هذه البيئات، بينما تتطلب كود وقت تشغيل (runtime code) أقل.
 
-#### Self-executed chunks
+#### الحزم ذاتية التنفيذ (Self-executed chunks)
 
-Currently on-demand-loaded chunks in webpack are always containers for module and never execute module code directly.
-When writing `import("./module")` in modules, this will compile to something like `__webpack_load_chunk__("chunk-containing-module.js").then(() => __webpack_require__("./module"))`.
-There are many cases where this can't be changed (e.g. when loading multiple chunks or loading CSS too), but there are some cases where webpack could generate a chunk that directly executes the contained module.
-This could lead to less generated code and would avoid the function wrapping in the chunk.
+حاليًا، دائمًا ما تكون الحزم التي يتم تحميلها عند الطلب في webpack عبارة عن حاويات للوحدات ولا تنفذ أبدًا كود الوحدة مباشرة.
+عند كتابة `import("./module")` في الوحدات، سيتم تحويل ذلك إلى شيء مثل `__webpack_load_chunk__("chunk-containing-module.js").then(() => __webpack_require__("./module"))`.
+هناك العديد من الحالات التي لا يمكن فيها تغيير هذا (مثل عند تحميل حزم متعددة أو تحميل CSS أيضًا)، ولكن هناك بعض الحالات التي يمكن فيها لـ webpack إنشاء حزمة تنفذ الوحدة المضمنة مباشرة.
+قد يؤدي هذا إلى تقليل التعليمات البرمجية المولدة وتجنب تغليف الدالة في الحزمة.
 
-Currently I'm not yet sure if this is worth it, but it's at least worth looking into that.
+حاليًا لست متأكدًا بعد مما إذا كان هذا يستحق العناء، ولكن الأمر يستحق على الأقل النظر فيه.
 
-#### ESM exports
+#### صادرات ESM
 
-Currently it's not possible to generate ESM exports for a bundle via `output.library.type: "module"`.
-This can be useful when integrating webpack bundles into ESM loading environments or inline scripts.
+حاليًا لا يمكن إنشاء صادرات ESM لحزمة عبر `output.library.type: "module"`.
+يمكن أن يكون هذا مفيدًا عند دمج حزم webpack في بيئات تحميل ESM أو نصوص مضمنة (inline scripts).
 
-T> For webpack 4 there is actually a plugin, but native support would be preferable.
+T> بالنسبة لـ webpack 4، توجد بالفعل إضافة (plugin)، ولكن الدعم الأصلي سيكون مفضلًا.
 
-#### ESM externals (import)
+#### استيرادات خارجية ESM (ESM externals)
 
-Webpack allows to define `externals` which are modules that are not bundled but exist at runtime.
-There are many types of externals ranging from globals over CommonJs/AMD/System to loading from classic script tag.
-Even `import()` (`type: "import"`) can be used to load an external, but `import` (`type: "module"`) can't be used yet.
+يسمح Webpack بتعريف `externals` (العناصر الخارجية) وهي عبارة عن وحدات لم يتم تحزيمها ولكنها موجودة في وقت التشغيل.
+هناك العديد من أنواع العناصر الخارجية بدءًا من globals مرورًا بـ CommonJs/AMD/System ووصولًا إلى التحميل من علامة script التقليدية.
+حتى `import()` (`type: "import"`) يمكن استخدامها لتحميل عنصر خارجي، لكن `import` (`type: "module"`) لا يمكن استخدامه بعد.
 
-Interestingly even while `type: "module"` isn't supported yet, webpack already uses it as default when writing e.g. `import x from "https://example.com/module.js"`.
-The default has been choosing to seamlessly add support for ESM externals without introducing a breaking change.
+من المثير للاهتمام، على الرغم من أن `type: "module"` غير مدعوم حتى الآن، إلا أن webpack يستخدمه بالفعل كإعداد افتراضي عند كتابة مثلاً `import x from "https://example.com/module.js"`.
+كان الافتراضي هو اختيار إضافة دعم بسلاسة للعناصر الخارجية ESM دون إدخال تغيير جذري (breaking change).
 
-Absolute URLs in `import`s can make sense e.g. when using external services that offer their API as ESM: `import { event } from "https://analytics.company.com/api/v1.js"` (`import("https://analytics.company.com/api/v1.js")` might make more sense to gracefully handle errors when depending on this external service, but errors could also be caught higher in module graph).
+قد تكون عناوين URL المطلقة في الـ `import`s منطقية، على سبيل المثال، عند استخدام خدمات خارجية تقدم واجهة برمجة التطبيقات (API) الخاصة بها كـ ESM: `import { event } from "https://analytics.company.com/api/v1.js"` (قد يكون استخدام `import("https://analytics.company.com/api/v1.js")` أكثر منطقية للتعامل بشكل رشيق مع الأخطاء عند الاعتماد على هذه الخدمة الخارجية، ولكن يمكن أيضًا التقاط الأخطاء في مستوى أعلى من الرسم البياني للوحدات).
 
-As usual the `externals` configuration allows to map any module name to externals:
+كالعادة، يسمح تكوين `externals` بربط أي اسم وحدة بعناصر خارجية:
 
 ```js
 export default {
@@ -108,125 +109,125 @@ export default {
 };
 ```
 
-W> Using multiple different ESM CDNs will not work. This is only an example.
+W> استخدام شبكات CDN متعددة لـ ESM لن يعمل. هذا مجرد مثال.
 
-#### ESM library
+#### مكتبة ESM (ESM library)
 
-When ESM exports and import are supported people might think bundling a library makes sense, and that's probably true in some cases, but in many cases natively bundling will result in worse results.
-The biggest problem is the `"sideEffects": false` flag. It affects modules on per file base to skip whole modules. When concatenating multiple side-effect-free modules it's no longer possible to skip the individual modules, which leads to worse optimization when not all exports of the library are used.
+عند دعم صادرات واستيرادات ESM، قد يعتقد الناس أن تحزيم مكتبة أمر منطقي، ومن المحتمل أن يكون ذلك صحيحًا في بعض الحالات، ولكن في كثير من الحالات سيؤدي التحزيم الأصلي إلى نتائج أسوأ.
+أكبر مشكلة هي علامة `"sideEffects": false`. فهي تؤثر على الوحدات على أساس كل ملف لتخطي وحدات بأكملها. عند تسلسل وحدات متعددة خالية من الآثار الجانبية، لم يعد من الممكن تخطي الوحدات الفردية، مما يؤدي إلى تحسين أسوأ عندما لا يتم استخدام جميع صادرات المكتبة.
 
-When the output should be a library that will be processed by a bundler later, this needs to be considered.
+عندما يجب أن يكون الناتج مكتبة ستتم معالجتها بواسطة أداة تحزيم لاحقًا، فيجب أخذ ذلك في الاعتبار.
 
-I could think of a special mode, which does not apply chunking and instead, emit the raw (processed) modules connected via ESM imports and exports (or also CommonJS `require`).
-So this means loaders, module graph, and asset optimizations run, but no chunk graph is created and each module in the module graph is emitted as a separate file.
+يمكنني التفكير في وضع خاص، والذي لا يطبق التحزيم (chunking) وبدلاً من ذلك، يُصدر الوحدات الخام (المُعالجة) المتصلة عبر استيرادات وصادرات ESM (أو أيضًا `require` في CommonJS).
+لذلك يعني هذا أن المحملات (loaders)، والرسم البياني للوحدات، وتحسينات الأصول قيد التشغيل، ولكن لا يتم إنشاء رسم بياني للحزم (chunk graph) ويتم إصدار كل وحدة في الرسم البياني للوحدات كملف منفصل.
 
-#### Strict mode warnings
+#### تحذيرات الوضع الصارم (Strict mode warnings)
 
-When generating an ESM bundle, all contained code will be forced to strict mode.
-For many modules, this isn't an issue, but there are a few older packages that might have trouble with the different semantic.
-We want to show warnings for these cases.
+عند إنشاء حزمة ESM، سيُجبر كل الكود المضمن على استخدام الوضع الصارم (strict mode).
+بالنسبة للعديد من الوحدات، لا يمثل هذا مشكلة، ولكن هناك بضع حزم أقدم قد تواجه صعوبة مع دلالات مختلفة (different semantic).
+نريد إظهار تحذيرات لهذه الحالات.
 
-### More first-class citizen
+### المزيد من المواطنين من الدرجة الأولى (first-class citizen)
 
-Webpack 4 and 5 did a lot of work to support non-JS module types, and webpack 5 already supports some module types by default: JS (ESM/CJS/AMD), JSON, WebAssembly, Asset.
-Since webpack 5 one of our long term goals is to become a web-app optimizer, with the goal of supporting everything the browser supports.
-So technically a vanilla web app should work out-of-the-box with webpack, but being optimized on the go.
+قام webpack 4 و 5 بالكثير من العمل لدعم أنواع الوحدات غير JS، ويدعم webpack 5 بالفعل بعض أنواع الوحدات افتراضيًا: JS (ESM/CJS/AMD)، و JSON، و WebAssembly، والأصول (Asset).
+منذ إصدار webpack 5، كان أحد أهدافنا طويلة المدى هو أن نصبح مُحسِّنًا لتطبيقات الويب (web-app optimizer)، مع هدف دعم كل ما يدعمه المتصفح.
+لذلك من الناحية الفنية، يجب أن يعمل تطبيق الويب العادي مباشرة من الصندوق مع webpack، مع تحسينه أثناء التنقل.
 
-The initial webpack 5 release already did some major steps in this direction: `new Worker` is supported natively. `new URL(...)` is supported natively (assets).
+لقد اتخذ الإصدار الأولي من webpack 5 بالفعل بعض الخطوات الكبيرة في هذا الاتجاه: يتم دعم `new Worker` محليًا. يتم دعم `new URL(...)` محليًا (assets).
 
-WebAssembly and JSON is already supported, even while the proposals are not finished yet.
+يتم دعم WebAssembly و JSON بالفعل، على الرغم من أن المقترحات لم تنته بعد.
 
-But two resource types are still missing for the complete story: HTML and CSS.
+لكن لا يزال هناك نوعان من الموارد مفقودان للقصة الكاملة: HTML و CSS.
 
-#### CSS as modules
+#### CSS كوحدات (CSS as modules)
 
-Currently webpack supports CSS via `css-loader`, `style-loader` or `mini-css-extract-plugin`.
-This is working pretty well, but I think we can do more by supporting CSS as a native module type in webpack.
+يدعم webpack حاليًا CSS عبر `css-loader`، أو `style-loader` أو `mini-css-extract-plugin`.
+هذا يعمل بشكل جيد جدًا، لكنني أعتقد أنه يمكننا بذل المزيد من خلال دعم CSS كنوع وحدة أصلي (native module type) في webpack.
 
-A major benefit would be the developer experience: The `mini-css-extract-plugin` configuration is not the easiest and getting rid of it would simplify a lot for the developer.
-That doesn't mean you can add additional customization on top of that.
-I see many developers not using raw CSS, but using preprocessors on top of that (with native CSS support this would look like that: `{ test: /\.sass$/, type: "stylesheet", use: "sass-loader" }`).
+ستكون الفائدة الكبرى في تجربة المطور (developer experience): تكوين `mini-css-extract-plugin` ليس الأسهل والتخلص منه من شأنه تبسيط الكثير للمطور.
+لا يعني ذلك أنه لا يمكنك إضافة تخصيص إضافي فوق ذلك.
+أرى العديد من المطورين لا يستخدمون CSS الخام، بل يستخدمون معالجات مسبقة (preprocessors) فوق ذلك (مع دعم CSS الأصلي، سيبدو هذا هكذا: `{ test: /\.sass$/, type: "stylesheet", use: "sass-loader" }`).
 
-As of [State of CSS 2020](https://2020.stateofcss.com/en-US/technologies/css-in-js/) CSS Modules is a popular way of writing modular CSS and it being a native module type in webpack allows to benefit from module graph optimization like Tree Shaking (Used Exports Optimization and Side-Effects optimization). When using CSS Modules this means the resulting CSS will only contain CSS rules that are referenced from the application (as one is used to from JS Tree Shaking).
+وفقًا لتقرير [State of CSS 2020](https://2020.stateofcss.com/en-US/technologies/css-in-js/)، تعد وحدات CSS طريقة شائعة لكتابة CSS معياري، وكونها نوع وحدة أصلي في webpack يسمح بالاستفادة من تحسين رسم بياني الوحدة مثل إزالة الأكواد غير المستخدمة (Used Exports Optimization وتحسين Side-Effects). عند استخدام وحدات CSS، هذا يعني أن CSS الناتج سيحتوي فقط على قواعد CSS التي يُشار إليها من التطبيق (كما هو معتاد من Tree Shaking في JS).
 
-There are some potential CSS Modules specific optimizations which are possible with the global knowledge of the application webpack has: CSS rules can be split into smaller rules to avoid repeating common properties. This can result in a much smaller payload as the output CSS contains fewer repeated properties (Atomic CSS).
+هناك بعض التحسينات المحتملة الخاصة بوحدات CSS الممكنة من خلال المعرفة العالمية للتطبيق الذي يمتلكه webpack: يمكن تقسيم قواعد CSS إلى قواعد أصغر لتجنب تكرار الخصائص الشائعة. هذا يمكن أن يؤدي إلى حجم تحميل أصغر بكثير لأن مخرجات CSS تحتوي على خصائص متكررة أقل (Atomic CSS).
 
-But there is a big "BUT" here: There is work towards a different "CSS Modules" proposal in the WebComponents community, which is planned to become natively supported by browsers.
-At least that's the goal of the proposal.
-Sadly this proposal is different from what's currently used in the Frontend ecosystem but uses similar syntax.
-Usually, webpack would align with proposals, so that's something to consider here.
-We have to check whether it's possible to avoid potential conflicts.
+ولكن هناك "لكن" كبيرة هنا: هناك عمل نحو اقتراح "وحدات CSS" (CSS Modules) مختلف في مجتمع WebComponents، والذي من المخطط أن يصبح مدعومًا بشكل أصلي من قبل المتصفحات.
+على الأقل هذا هو هدف الاقتراح.
+للأسف، هذا الاقتراح مختلف عما يُستخدم حاليًا في نظام الواجهة الأمامية البيئي (Frontend ecosystem) ولكنه يستخدم بناء جملة مشابه.
+عادة، يصطف webpack مع الاقتراحات (proposals)، لذلك هذا شيء يجب مراعاته هنا.
+علينا التحقق مما إذا كان من الممكن تجنب النزاعات المحتملة.
 
-#### HTML as entrypoint
+#### HTML كنقطة دخول (HTML as entrypoint)
 
-Following Parcels example, we also want to support HTML natively as entrypoints.
-Supporting that would be inline with the goal as web app optimizer, as web apps usually start with an HTML document.
-It is also a huge developer experience improvement for beginners as many things can be inferred from the HTML.
+باتباع مثال Parcel، نريد أيضًا دعم HTML أصليًا كنقاط دخول (entrypoints).
+سيكون دعم ذلك يتماشى مع الهدف كمُحسِّن تطبيقات الويب (web app optimizer)، حيث تبدأ تطبيقات الويب عادةً بمستند HTML.
+إنه أيضًا تحسين ضخم لتجربة المطورين للمبتدئين حيث يمكن استنتاج العديد من الأشياء من HTML.
 
-Being in control of the generated HTML does also allow to optimize more aggressively by default.
-Currently, we prevent renaming or splitting initial chunks by default, as this requires additional infrastructure for the HTML generation.
+يسمح لك التحكم في HTML المولد بالتحسين بشكل أكثر قوة افتراضيًا.
+حاليًا، نمنع إعادة التسمية أو تقسيم الحزم الأولية (initial chunks) افتراضيًا، لأن هذا يتطلب بنية تحتية إضافية لتوليد HTML.
 
-HTML entrypoints also benefit from CSS as modules and Asset modules, as these resources can be referenced from HTML too (e.g. `<link rel=stylesheet />`, `<img src="..." />`, `<link rel=icon />`).
+تستفيد نقاط دخول HTML أيضًا من CSS كوحدات ووحدات الأصول (Asset modules)، حيث يمكن الإشارة إلى هذه الموارد من HTML أيضًا (مثل `<link rel=stylesheet />`، `<img src="..." />`، `<link rel=icon />`).
 
-#### HTML modules
+#### وحدات HTML (HTML modules)
 
-There is also a proposal about native support of importing HTML in browsers, that's something we will follow, especially as there is a huge overlap with HTML entrypoints.
+هناك أيضًا اقتراح بشأن الدعم الأصلي لاستيراد HTML في المتصفحات، وهذا شيء سنتابعه، خاصة نظرًا لوجود تداخل كبير مع نقاط دخول HTML.
 
-### SourceMap performance
+### أداء خرائط المصدر (SourceMap performance)
 
-Using (full) SourceMaps with webpack is currently quite expensive with webpack, as performance for SourceMap processing isn't the best.
-This is something we want to look into for webpack, but also for terser, which is used by webpack as minimizer by default.
+يعد استخدام خرائط المصدر (الكاملة) مع webpack حاليًا مكلفًا للغاية مع webpack، لأن الأداء لمعالجة خرائط المصدر ليس الأفضل.
+هذا شيء نريد التحقيق فيه بالنسبة لـ webpack، ولكن أيضًا بالنسبة لـ terser، الذي يستخدمه webpack كمُصغِّر (minimizer) افتراضيًا.
 
-### `exports`/`imports` package.json field
+### حقل `exports`/`imports` في package.json
 
-Node.js 14 has added support for the `exports` field in package.json to allow to define entrypoints of a package.
-Webpack 5 followed this, and even added additional conditions like `production/development`.
+أضاف Node.js 14 دعمًا لحقل `exports` في package.json للسماح بتحديد نقاط الدخول للحزمة.
+حذا webpack 5 حذوه، وحتى أضاف شروطًا إضافية مثل `production/development`.
 
-Shortly after that Node.js made further additions to that, e.g. they also added an `imports` field for private imports.
+بعد فترة وجيزة من ذلك أجرى Node.js إضافات أخرى لذلك، مثل إضافة حقل `imports` للاستيرادات الخاصة.
 
-That's something we also want to add.
+هذا شيء نريد إضافته أيضًا.
 
-### Improve CommonJS analysis
+### تحسين تحليل CommonJS
 
-While ESM is the future, there are still a lot of CommonJS packages in npm and in use.
-Webpack 5 added analysis for CommonJS modules to allow Tree Shaking for most of these modules.
+في حين أن ESM هو المستقبل، لا يزال هناك الكثير من حزم CommonJS في npm وقيد الاستخدام.
+أضاف Webpack 5 التحليل لوحدات CommonJS للسماح بـ Tree Shaking لمعظم هذه الوحدات.
 
-But we can do more. While many exporting patterns are supported, only a few importing patterns are supported.
-We want to add support for more patterns to allow more optimizations for CommonJS modules too.
+لكن يمكننا أن نفعل المزيد. في حين يتم دعم العديد من أنماط التصدير (exporting patterns)، يتم دعم عدد قليل فقط من أنماط الاستيراد.
+نريد إضافة دعم لمزيد من الأنماط للسماح بمزيد من التحسينات لوحدات CommonJS أيضًا.
 
-### Hot Module Replacement for Module Federation
+### استبدال الوحدة الساخنة (Hot Module Replacement) لـ Module Federation
 
-Webpack 5 added a new feature called "Module Federation" which allows integrating multiple builds together at runtime.
-Currently, Hot Module Replacement (HMR) supports only a single build at a time and updates can't bubble between builds.
-We want to improve here and allow HMR updates to bubble between different builds, which would improve developing federation applications.
+أضاف Webpack 5 ميزة جديدة تسمى "Module Federation" والتي تسمح بدمج عمليات بناء متعددة معًا في وقت التشغيل.
+حاليًا، يدعم Hot Module Replacement (HMR) بنية واحدة فقط في كل مرة ولا يمكن أن تنتقل التحديثات بين البنيات (builds).
+نريد التحسين هنا والسماح لتحديثات HMR بالانتقال بين عمليات البناء المختلفة، مما سيحسن تطوير تطبيقات الفيدرالية (federation applications).
 
-### Hinting system
+### نظام التلميحات (Hinting system)
 
-Currently, webpack displays warnings and errors to the user.
-During the build, there are quite a few cases where we could tell the user something, like potential footguns or optimization opportunities, but they don't fit into warnings or errors and we don't want to spam the output with all this information.
-So we want to add another category: Hints.
-We want to collect all hints during builds (plugins could also emit some), but only display a limited number of them in the output (by default only one).
-This should lead to some kind of "Did you know" experience for the user.
+حاليًا، يعرض webpack التحذيرات والأخطاء للمستخدم.
+أثناء البناء، هناك عدد قليل من الحالات التي يمكننا فيها إخبار المستخدم بشيء ما، مثل مشاكل محتملة (footguns) أو فرص تحسين، لكنها لا تتناسب مع التحذيرات أو الأخطاء ولا نريد الإغراق في المخرجات بكل هذه المعلومات.
+لذلك نريد إضافة فئة أخرى: التلميحات (Hints).
+نريد جمع كل التلميحات أثناء عمليات البناء (يمكن أن تصدر الإضافات (plugins) بعضًا منها أيضًا)، ولكننا لا نعرض سوى عدد محدود منها في المخرجات (افتراضيًا واحد فقط).
+يجب أن يؤدي هذا إلى نوع من تجربة "هل تعلم" (Did you know) للمستخدم.
 
-### Multi-Threading
+### تعدد مؤشرات الترابط (Multi-Threading)
 
-While Persistent Caching makes cached build "blazing" fast, initial builds without Persistent Cache have still a bit of room for improvement.
-Javascript execution in Node.js is single-threaded by default, but recent additions allow to use `worker_threads`, which is an API similar to WebWorkers.
+بينما يجعل التخزين المؤقت المستمر (Persistent Caching) البناء المخزن مؤقتًا "سريعًا للغاية"، لا يزال هناك مجال للتحسين لعمليات البناء الأولية بدون Persistent Cache.
+تنفيذ Javascript في Node.js أحادي مؤشر الترابط (single-threaded) افتراضيًا، لكن الإضافات الحديثة تسمح باستخدام `worker_threads`، وهي واجهة برمجة تطبيقات (API) تشبه WebWorkers.
 
-This can be used distribute work across all CPUs. There has already been some preparations in webpack 5 for that: e.g. serializing of internal data structures is possible and the work queues support plugins. But some parts of that are still unclear and require experimentation.
+يمكن استخدام هذا لتوزيع العمل عبر جميع وحدات المعالجة المركزية (CPUs). كانت هناك بالفعل بعض الاستعدادات في webpack 5 لذلك: على سبيل المثال يمكن تسلسل هياكل البيانات الداخلية (serializing of internal data structures) وتدعم قوائم انتظار العمل (work queues) الإضافات (plugins). لكن بعض أجزاء ذلك لا تزال غير واضحة وتتطلب التجريب.
 
-This is in our voting list for a while, but not many have voted on that. Is this really something people need?
+كان هذا في قائمة التصويت لدينا لفترة من الوقت، لكن لم يصوت الكثيرون على ذلك. هل هذا حقًا شيء يحتاجه الناس؟
 
 ### WebAssembly
 
-Currently, WebAssembly is experimental and not enabled by default.
-Once the proposal reaches Stage 4 we can enable it by default.
+حاليًا، لا يزال WebAssembly في المرحلة التجريبية (experimental) وليس مُفعّلًا افتراضيًا.
+بمجرد وصول الاقتراح إلى المرحلة 4 (Stage 4)، يمكننا تمكينه افتراضيًا.
 
-This might also lead to a wider adoption of WebAssembly in the ecosystem.
-I think we might see more in this field in 2021.
+قد يؤدي هذا أيضًا إلى تبني أوسع لـ WebAssembly في النظام البيئي (ecosystem).
+أعتقد أننا قد نرى المزيد في هذا المجال في 2021.
 
-## Disclaimer
+## تنويه (Disclaimer)
 
-This list is not set in stone.
-The web ecosystem changes so fast that we probably end up implementing totally different things, that we might not even aware of at this time.
-We do not even know how much time we can invest in webpack, considering our current sponsoring situation.
+هذه القائمة ليست مكتوبة على حجر.
+يتغير نظام الويب البيئي (web ecosystem) بسرعة كبيرة لدرجة أننا ربما ينتهي بنا الأمر بتنفيذ أشياء مختلفة تمامًا، والتي ربما لا نكون حتى على دراية بها في هذا الوقت.
+نحن لا نعرف حتى مقدار الوقت الذي يمكننا استثماره في webpack، بالنظر إلى وضع الرعاية الحالي لدينا.
\ No newline at end of file
diff --git a/src/content/blog/2026-02-03-webpack-5-105.mdx b/src/content/blog/2026-02-03-webpack-5-105.mdx
index 6edef382fdfe..1e7b5e003c8f 100644
--- a/src/content/blog/2026-02-03-webpack-5-105.mdx
+++ b/src/content/blog/2026-02-03-webpack-5-105.mdx
@@ -2,64 +2,64 @@
 title: Webpack 5.105
 sort: 20260203
 contributors:
-  - bjohansebas
+  - ameencfw
+  - RlxChap2
 ---
 
-Webpack 5.105 brings several improvements, both in code generation and bug fixes.
+يجلب Webpack 5.105 عدة تحسينات، سواء في توليد الأكواد أو إصلاح الأخطاء.
 
-- [Two Low-Severity CVEs Fixed in Webpack](#two-low-severity-cves-fixed-in-webpack)
-- [`tsconfig.json` Alias Resolution Without Requiring plugins](#tsconfigjson-alias-resolution-without-requiring-plugins)
-- [Automatic Module Resolution for Web Workers](#automatic-module-resolution-for-web-workers)
-- [Support Import Specifier Guard](#support-import-specifier-guard)
-- [Support `import.defer()` for Context Module](#support-importdefer-for-context-module)
-- [Preserving Custom `import.meta` Properties](#preserving-custom-importmeta-properties)
-- [Better Control of Source Maps in `devtool`](#better-control-of-source-maps-in-devtool)
-- [Cleaner ESM output for Node.js and modern builds](#cleaner-esm-output-for-nodejs-and-modern-builds)
-- [Other Improvements and Bug Fixes](#other-improvements-and-bug-fixes)
+- [إصلاح ثغرتين أمنيتين (CVEs) منخفضتي الخطورة في Webpack](#two-low-severity-cves-fixed-in-webpack)
+- [تحليل الأسماء المستعارة في `tsconfig.json` دون الحاجة إلى إضافات (plugins)](#tsconfigjson-alias-resolution-without-requiring-plugins)
+- [تحليل الوحدات (Module Resolution) التلقائي لـ Web Workers](#automatic-module-resolution-for-web-workers)
+- [دعم حارس محدد الاستيراد (Import Specifier Guard)](#support-import-specifier-guard)
+- [دعم `import.defer()` لوحدة السياق (Context Module)](#support-importdefer-for-context-module)
+- [الحفاظ على الخصائص المخصصة في `import.meta`](#preserving-custom-importmeta-properties)
+- [تحكم أفضل في خرائط المصدر (Source Maps) في `devtool`](#better-control-of-source-maps-in-devtool)
+- [مخرجات ESM أنظف لـ Node.js وعمليات البناء الحديثة](#cleaner-esm-output-for-nodejs-and-modern-builds)
+- [تحسينات وإصلاحات أخرى](#other-improvements-and-bug-fixes)
 
 ---
 
-## Two Low-Severity CVEs Fixed in Webpack
+## إصلاح ثغرتين أمنيتين (CVEs) منخفضتي الخطورة في Webpack
 
-Two new low-severity CVEs in Webpack have been fixed and published.
-By default, you are safe; these issues only affect users of the experimental
-[`experiments.buildHttp`](/configuration/experiments/#experimentsbuildhttp) option.
+تم إصلاح ونشر ثغرتين أمنيتين (CVEs) جديدتين منخفضتي الخطورة في Webpack.
+بشكل افتراضي، أنت في أمان؛ هذه المشاكل تؤثر فقط على مستخدمي الخيار التجريبي
+[`experiments.buildHttp`](/configuration/experiments/#experimentsbuildhttp).
 
-### Affected CVEs:
+### الثغرات (CVEs) المتأثرة:
 
 #### CVE-2025-68157
 
-- For more details, see the advisory: [GHSA-38r7-794h-5758](https://github.com/webpack/webpack/security/advisories/GHSA-38r7-794h-5758)
-- Affected versions: `>=5.49.0 <5.104.0`
+- لمزيد من التفاصيل، راجع الاستشارة: [GHSA-38r7-794h-5758](https://github.com/webpack/webpack/security/advisories/GHSA-38r7-794h-5758)
+- الإصدارات المتأثرة: `>=5.49.0 <5.104.0`
 
 #### CVE-2025-68458
 
-- For more details, see the advisory: [GHSA-8fgc-7cc6-rx7x](https://github.com/webpack/webpack/security/advisories/GHSA-8fgc-7cc6-rx7x)
-- Affected versions: `>=5.49.0 <5.104.1`
+- لمزيد من التفاصيل، راجع الاستشارة: [GHSA-8fgc-7cc6-rx7x](https://github.com/webpack/webpack/security/advisories/GHSA-8fgc-7cc6-rx7x)
+- الإصدارات المتأثرة: `>=5.49.0 <5.104.1`
 
-Even though these are low-severity CVEs, it’s still a good idea to
-update if you use the affected versions.
+على الرغم من أن هذه الثغرات منخفضة الخطورة، إلا أنه من الجيد دائمًا
+التحديث إذا كنت تستخدم الإصدارات المتأثرة.
 
-For more information on reporting security vulnerabilities,
-see the [Webpack Security Policy](https://github.com/webpack/webpack/security/policy)
-.
+لمزيد من المعلومات حول الإبلاغ عن الثغرات الأمنية،
+راجع [سياسة أمان Webpack](https://github.com/webpack/webpack/security/policy).
 
-## `tsconfig.json` Alias Resolution Without Requiring plugins
+## تحليل الأسماء المستعارة في `tsconfig.json` دون الحاجة إلى إضافات (plugins)
 
-Module resolution can be configured to read `compilerOptions.baseUrl` and `compilerOptions.paths` from `tsconfig.json` and apply those aliases when resolving imports. As a result, it is no longer necessary to install and configure the external `tsconfig-paths-webpack-plugin` just to make TypeScript path aliases work during bundling.
+يمكن الآن تكوين تحليل الوحدات (Module resolution) لقراءة `compilerOptions.baseUrl` و `compilerOptions.paths` من ملف `tsconfig.json` وتطبيق تلك الأسماء المستعارة عند تحليل الواردات (imports). نتيجة لذلك، لم يعد من الضروري تثبيت وتكوين الإضافة الخارجية `tsconfig-paths-webpack-plugin` فقط لجعل الأسماء المستعارة لمسارات TypeScript تعمل أثناء الحزم (bundling).
 
-In the webpack configuration, the `resolve.tsconfig` option is used to specify which tsconfig file should be used as the source (which is also useful in monorepos or setups with multiple tsconfig files):
+في تكوين webpack، يُستخدم الخيار `resolve.tsconfig` لتحديد ملف tsconfig الذي يجب استخدامه كمصدر (وهو مفيد أيضًا في المستودعات الأحادية monorepos أو الإعدادات التي تحتوي على ملفات tsconfig متعددة):
 
 ```js
 // webpack.config.js
 module.exports = {
   resolve: {
-    tsconfig: "./tsconfig.json", // Can be `false` (disabled), `true` (use the default tsconfig.json), a path to a `tsconfig.json` file, or an object with configFile and references options.
+    tsconfig: "./tsconfig.json", // يمكن أن يكون `false` (معطل)، `true` (استخدام tsconfig.json الافتراضي)، أو مسارًا إلى ملف `tsconfig.json`، أو كائنًا بخيارات configFile و references.
   },
 };
 ```
 
-Example of aliases in tsconfig.json:
+مثال على الأسماء المستعارة في tsconfig.json:
 
 ```json
 {
@@ -72,21 +72,21 @@ Example of aliases in tsconfig.json:
 }
 ```
 
-And then in the code:
+وبعد ذلك في الكود:
 
 ```ts
 import Button from "@/components/Button";
 ```
 
-This way, `@/components/Button` can be resolved according to the rules defined in `tsconfig.json`, avoiding the need to duplicate aliases in `resolve.alias` and reducing discrepancies between what TypeScript understands and what the bundler resolves.
+بهذه الطريقة، يمكن تحليل `@/components/Button` وفقًا للقواعد المحددة في `tsconfig.json`، مما يتجنب الحاجة إلى تكرار الأسماء المستعارة في `resolve.alias` ويقلل من التناقضات بين ما يفهمه TypeScript وما يقوم المحزم (bundler) بتحليله.
 
-## Automatic Module Resolution for Web Workers
+## تحليل الوحدات (Module Resolution) التلقائي لـ Web Workers
 
-When importing a package specifically to be used in a Web Worker in Webpack, module resolution can prioritize files like `index.worker.js` over `index.js` when using [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) defined in the `exports` field of `package.json`.
+عند استيراد حزمة مخصصة لاستخدامها في Web Worker في Webpack، يمكن لتحليل الوحدات إعطاء الأولوية لملفات مثل `index.worker.js` بدلاً من `index.js` عند استخدام [الصادرات المشروطة (conditional exports)](https://nodejs.org/api/packages.html#conditional-exports) المعرفة في حقل `exports` في `package.json`.
 
-This means that if you define conditions such as `"worker"` in your package's exports, Webpack will automatically select the appropriate version, like `index.worker.js`, whenever the package is imported inside a worker context. There’s no need to modify the `resolve.conditionNames` option or make additional Webpack configuration changes; you just need to specify the conditions correctly in `package.json`.
+هذا يعني أنه إذا قمت بتحديد شروط مثل `"worker"` في صادرات حزمتك، سيقوم Webpack تلقائيًا بتحديد الإصدار المناسب، مثل `index.worker.js`، كلما تم استيراد الحزمة داخل سياق الـ worker. لا حاجة لتعديل خيار `resolve.conditionNames` أو إجراء تغييرات إضافية في تكوين Webpack؛ تحتاج فقط إلى تحديد الشروط بشكل صحيح في `package.json`.
 
-For example, in `package.json`:
+على سبيل المثال، في `package.json`:
 
 ```json
 {
@@ -100,12 +100,12 @@ For example, in `package.json`:
 }
 ```
 
-Now, when importing the `foo` package inside a Worker, Webpack will automatically choose the `index.worker.js` file according to the export conditions:
+الآن، عند استيراد حزمة `foo` داخل Worker، سيختار Webpack تلقائيًا ملف `index.worker.js` وفقًا لشروط التصدير:
 
 {/* eslint-disable */}
 
 ```js
-// This import is inside a Worker context, so Webpack uses index.worker.js
+// هذا الاستيراد موجود داخل سياق Worker، لذا يستخدم Webpack ملف index.worker.js
 const worker = new Worker(new URL("foo", import.meta.url), {
   type: "module",
 });
@@ -113,25 +113,25 @@ const worker = new Worker(new URL("foo", import.meta.url), {
 
 {/* eslint-enable */}
 
-## Support Import Specifier Guard
+## دعم حارس محدد الاستيراد (Import Specifier Guard)
 
-Support for import specifier guards has been added, an improvement that helps the bundler better understand a common pattern checking whether an export exists before using it. Previously, even if the code was correctly guarded by an if, the access could be interpreted as unconditional and result in warnings like “export … was not found”.
+تمت إضافة دعم لحراس محدد الاستيراد (import specifier guards)، وهو تحسين يساعد المحزم (bundler) على فهم النمط الشائع بشكل أفضل عند التحقق مما إذا كان التصدير موجودًا قبل استخدامه. في السابق، حتى لو كان الكود محميًا بشكل صحيح بواسطة عبارة if، كان من الممكن تفسير الوصول على أنه غير مشروط ويؤدي إلى تحذيرات مثل "export … was not found" (التصدير ... غير موجود).
 
-With this change, those checks are recognized as a signal that the access is conditional, and the analysis is adjusted accordingly. In practice, this makes it possible to write code that is more compatible across different versions of the same library, where an export may or may not exist, without unnecessary noise during compilation.
+مع هذا التغيير، يُعترف بهذه التحققات كإشارة على أن الوصول مشروط، ويتم تعديل التحليل وفقًا لذلك. من الناحية العملية، يجعل هذا من الممكن كتابة كود متوافق بشكل أكبر عبر الإصدارات المختلفة لنفس المكتبة، حيث قد يوجد التصدير أو لا يوجد، دون تشويش غير ضروري أثناء التحويل البرمجي (compilation).
 
 ```js
 import * as React from "react";
 
 if (React.useId) {
-  // create guard for `React` => userId: ["", "useId"].
+  // إنشاء حارس لـ `React` => userId: ["", "useId"].
   React.useId; // React -> "useId" is in guard.
   React; //  React -> "" is in guard.
 }
 ```
 
-## Support `import.defer()` for Context Module
+## دعم `import.defer()` لوحدة السياق (Context Module)
 
-Webpack now supports `import.defer()` even when the import is a context module (that is, when the import path is built dynamically and webpack needs to include a set of possible files). In practice, this makes it much easier to defer the loading of a module selected at runtime, even when that module comes from a dynamic expression pointing to a directory. This enables patterns like “choose between a.js or b.js and load it only when needed”, with webpack generating the appropriate context so that import.defer() works correctly.
+يدعم Webpack الآن `import.defer()` حتى عندما يكون الاستيراد وحدة سياق (context module) (أي عندما يتم بناء مسار الاستيراد ديناميكيًا ويحتاج webpack إلى تضمين مجموعة من الملفات المحتملة). عمليًا، يجعل هذا من الأسهل بكثير تأجيل تحميل الوحدة المحددة في وقت التشغيل، حتى عندما تأتي تلك الوحدة من تعبير ديناميكي يشير إلى مجلد. ويتيح هذا أنماطًا مثل "اختر بين a.js أو b.js وقم بتحميله فقط عند الحاجة"، مع توليد webpack للسياق المناسب لضمان عمل import.defer() بشكل صحيح.
 
 {/* eslint-disable */}
 
@@ -142,20 +142,20 @@ import.defer("./dir/" + file);
 
 {/* eslint-enabled */}
 
-## Preserving Custom `import.meta` Properties
+## الحفاظ على الخصائص المخصصة في `import.meta`
 
-Webpack now preserves custom `import.meta` properties during bundling when [`output.module`](/configuration/output/#outputmodule) is enabled. Previously, Webpack would remove any unknown `import.meta` properties (such as `import.meta.customProp`), causing the loss of contextual or tool-specific information in the build.
+يحافظ Webpack الآن على الخصائص المخصصة لـ `import.meta` أثناء الحزم عند تفعيل [`output.module`](/configuration/output/#outputmodule). في السابق، كان Webpack يقوم بإزالة أي خصائص `import.meta` غير معروفة (مثل `import.meta.customProp`)، مما يتسبب في فقدان المعلومات السياقية أو الخاصة بالأدوات في البناء.
 
-With this change, any non-standard property you add to `import.meta` will remain intact in the generated code, allowing the use of custom meta-information or additional signals in modern applications.
+مع هذا التغيير، ستبقى أي خاصية غير قياسية تضيفها إلى `import.meta` سليمة في الكود المُولد، مما يسمح باستخدام المعلومات الوصفية (meta-information) المخصصة أو الإشارات الإضافية في التطبيقات الحديثة.
 
 ```js
 if (!import.meta.UNKNOWN_PROPERTY) {
-  // runtime assignment
+  // تخصيص وقت التشغيل (runtime assignment)
   import.meta.UNKNOWN_PROPERTY = "HELLO";
 }
 ```
 
-If `output.module` is not enabled, Webpack will continue to remove unknown properties unless you explicitly indicate otherwise. To preserve them manually, you can configure [`module.parser.javascript.importMeta`](/configuration/module/#moduleparserjavascriptimportmeta) as 'preserve-unknown' in your `webpack.config.js`:
+إذا لم يكن `output.module` مُفعلاً، سيستمر Webpack في إزالة الخصائص غير المعروفة ما لم تشر صراحةً إلى خلاف ذلك. للحفاظ عليها يدويًا، يمكنك تكوين [`module.parser.javascript.importMeta`](/configuration/module/#moduleparserjavascriptimportmeta) كـ 'preserve-unknown' في ملف `webpack.config.js`:
 
 ```js
 // webpack.config.js
@@ -170,18 +170,18 @@ module.exports = {
 };
 ```
 
-This way, even without `output.module: true`, any custom import.meta property, such as `import.meta.customProp`, will be preserved in the build.
+بهذه الطريقة، حتى بدون `output.module: true`، سيتم الحفاظ على أي خاصية مخصصة لـ import.meta، مثل `import.meta.customProp`، في البناء.
 
-## Better Control of Source Maps in `devtool`
+## تحكم أفضل في خرائط المصدر (Source Maps) في `devtool`
 
-Webpack now allows the `devtool` option to accept both a **string** and an array of objects for advanced configurations.
+يسمح Webpack الآن لخيار `devtool` بقبول كل من **سلسلة نصية (string)** ومصفوفة من الكائنات (array of objects) للتكوينات المتقدمة.
 
-Each object in the array can include:
+يمكن أن يتضمن كل كائن في المصفوفة:
 
-- `type`: which can be `"all"`, `"css"`, or `"javascript"`.
-- `use`: where you define the type of source map to generate.
+- `type`: والذي يمكن أن يكون `"all"`, `"css"`, أو `"javascript"`.
+- `use`: حيث تحدد نوع خريطة المصدر التي سيتم توليدها.
 
-This enables specifying different types of source maps for different resources in your project. For example:
+يتيح هذا تحديد أنواع مختلفة من خرائط المصدر للموارد المختلفة في مشروعك. على سبيل المثال:
 
 ```js
 // webpack.config.js
@@ -203,25 +203,24 @@ module.exports = {
 };
 ```
 
-In this example, standard source maps are applied to all modules, and inline source maps are used specifically for CSS files.
+في هذا المثال، يتم تطبيق خرائط المصدر القياسية على جميع الوحدات، وتُستخدم خرائط المصدر المُضمنة (inline) بشكل خاص لملفات CSS.
 
-This new option is especially useful if you are using Webpack’s [experimental CSS compilation feature](/configuration/experiments/#experimentscss), as it gives you greater control over the debugging process and improves integration with external tools.
+هذا الخيار الجديد مفيد بشكل خاص إذا كنت تستخدم [ميزة تحويل CSS التجريبية](/configuration/experiments/#experimentscss) الخاصة بـ Webpack، حيث تمنحك تحكمًا أكبر في عملية تصحيح الأخطاء (debugging) وتحسّن التكامل مع الأدوات الخارجية.
 
-It’s worth noting that the classic string syntax, like `devtool: "source-map"`, remains fully valid and supported.
+الجدير بالذكر أن الصياغة النصية الكلاسيكية، مثل `devtool: "source-map"`، تظل صالحة تمامًا ومدعومة.
 
-## Cleaner ESM Output for Node.js and Modern Builds
+## مخرجات ESM أنظف لـ Node.js وعمليات البناء الحديثة
 
-This improvement in Webpack optimizes the handling and representation of Node.js native modules (such as `fs`, `path`, or `crypto`) during bundling, especially when using the [`output.module`](/configuration/output/#outputmodule) option in the configuration. When `output.module: true` is enabled, Webpack now generates imports of native modules using ES module syntax `import ... from "module"` instead of CommonJS `require("module")`, regardless of whether the code will run in a web or Node.js environment.
+يحسّن هذا التحسين في Webpack معالجة وتمثيل وحدات Node.js الأصلية (مثل `fs`, `path`, أو `crypto`) أثناء عملية الحزم، وخاصة عند استخدام الخيار [`output.module`](/configuration/output/#outputmodule) في التكوين. عند تفعيل `output.module: true`، يقوم Webpack الآن بتوليد استيرادات للوحدات الأصلية باستخدام صياغة ES module أي `import ... from "module"` بدلاً من `require("module")` الخاصة بـ CommonJS، بغض النظر عما إذا كان الكود سيعمل في بيئة الويب أو Node.js.
 
-## Other Improvements and Bug Fixes
+## تحسينات وإصلاحات أخرى
 
-- **Webpack-dev-server** has released a new version to update dependencies that had reported transitive vulnerabilities, so updating is recommended. Additionally, the option to close the error overlay by pressing the ESC key has been added, and several bugs have been fixed. Check the [release for more information](https://github.com/webpack/webpack-dev-server/releases/tag/v5.2.3).
-- **Webpack-bundle-analyzer** has received important improvements and fixes for the user experience. Visual issues with tooltips in dark mode have been resolved, and the analysis of bundles using IIFE has been made more robust, preventing errors. Additionally, support for Zstandard compression has been added, available only on Node.js 22.15 or higher. Check the [changelog for more information](https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md)
-- **Mini-css-extract-plugin** introduces new features and bug fixes. Among the main changes, the plugin now respects the `output.cssFilename` and `output.cssChunkFilename` options, allowing more precise control over the names of the generated CSS files. Additionally, a bug was fixed that prevented the generation of the `contentHash` for a chunk when the CSS module set had zero size, thus avoiding unnecessary hashes in those cases. Check the [release for more information](https://github.com/webpack/mini-css-extract-plugin/releases/tag/v2.10.0)
+- أصدر **Webpack-dev-server** إصدارًا جديدًا لتحديث التبعيات (dependencies) التي أُبلغ عن وجود ثغرات انتقالية بها، لذا يوصى بالتحديث. بالإضافة إلى ذلك، تمت إضافة خيار لإغلاق تراكب الخطأ (error overlay) بالضغط على مفتاح ESC، وتم إصلاح العديد من الأخطاء. تحقق من [الإصدار لمزيد من المعلومات](https://github.com/webpack/webpack-dev-server/releases/tag/v5.2.3).
+- تلقى **Webpack-bundle-analyzer** تحسينات وإصلاحات مهمة لتجربة المستخدم. تم حل المشكلات البصرية المتعلقة بـ tooltips في الوضع المظلم، وأصبح تحليل الحزم باستخدام IIFE أكثر قوة، مما يمنع الأخطاء. بالإضافة إلى ذلك، تمت إضافة دعم لضغط Zstandard، وهو متاح فقط في Node.js 22.15 أو أعلى. تحقق من [سجل التغييرات لمزيد من المعلومات](https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md).
+- يقدم **Mini-css-extract-plugin** ميزات جديدة وإصلاحات للأخطاء. من بين التغييرات الرئيسية، أصبحت الإضافة الآن تحترم الخيارين `output.cssFilename` و `output.cssChunkFilename`، مما يسمح بتحكم أدق في أسماء ملفات CSS المولدة. بالإضافة إلى ذلك، تم إصلاح خلل كان يمنع توليد `contentHash` للـ chunk عندما يكون حجم مجموعة وحدات CSS صفراً، مما يتجنب التجزئة (hashes) غير الضرورية في تلك الحالات. تحقق من [الإصدار لمزيد من المعلومات](https://github.com/webpack/mini-css-extract-plugin/releases/tag/v2.10.0).
 
-Several bug fixes have been resolved since version [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for more details
+تم حل العديد من الأخطاء منذ الإصدار [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). تحقق من [سجل التغييرات (changelog)](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) لمزيد من التفاصيل.
 
-## Thanks
+## شكر
 
-A big thank you to all our contributors and [sponsors](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
-who made Webpack 5.105 possible. Your support, whether through code contributions, documentation, or financial sponsorship, helps keep Webpack evolving and improving for everyone.
+شكر كبير لجميع المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring) الذين جعلوا Webpack 5.105 ممكنًا. دعمكم، سواء كان عبر المساهمة بالكود، أو التوثيق، أو الرعاية المالية، يساعد في استمرار تطور وتحسن Webpack للجميع.
\ No newline at end of file
diff --git a/src/content/blog/2026-02-04-roadmap-2026.mdx b/src/content/blog/2026-02-04-roadmap-2026.mdx
index 500cf3000aa3..6dfefde41552 100644
--- a/src/content/blog/2026-02-04-roadmap-2026.mdx
+++ b/src/content/blog/2026-02-04-roadmap-2026.mdx
@@ -1,160 +1,159 @@
 ---
-title: Roadmap 2026
+title: خارطة طريق 2026
 sort: 20260204
 contributors:
-  - evenstensberg
-  - bjohansebas
-  - UlisesGascon
+  - ameencfw
+  - RlxChap2
 ---
 
-Hello from the webpack Technical Steering Committee member [Even](http://x.com/evenstensberg)!
+مرحبًا من عضو لجنة التوجيه الفني (TSC) في webpack [Even](http://x.com/evenstensberg)!
 
-The different contributors in the organization continue to work on ensuring that **webpack remains a solid and reliable tool** for building web applications. While many new tools have emerged, webpack continues to be a **stable and well-supported choice**.
+يستمر المساهمون المختلفون في المنظمة في العمل على ضمان أن **يظل webpack أداة صلبة وموثوقة** لبناء تطبيقات الويب. في حين ظهرت العديد من الأدوات الجديدة، لا يزال webpack يمثل **خيارًا مستقرًا ومدعومًا بشكل جيد**.
 
-## Here’s what we’re excited about for 2026
+## إليك ما نحن متحمسون له في 2026
 
-In 2026, our focus goes beyond maintaining existing features. We’re investing in improvements that make webpack easier to use and maintain, while also pushing forward ideas that prepare the project for modern runtimes, evolving development patterns, and the long-term health of the ecosystem.
+في عام 2026، يتجاوز تركيزنا مجرد الحفاظ على الميزات الحالية. نحن نستثمر في تحسينات تجعل webpack أسهل في الاستخدام والصيانة، مع الدفع قدمًا بالأفكار التي تُعد المشروع لبيئات التشغيل (runtimes) الحديثة، وأنماط التطوير المتطورة، والصحة طويلة المدى للنظام البيئي.
 
-Below, we’ll walk through the main areas we’re actively working on and the ideas we plan to develop throughout the year.
+أدناه، سنستعرض المجالات الرئيسية التي نعمل عليها بنشاط والأفكار التي نخطط لتطويرها على مدار العام.
 
-### [webpack#14893](https://github.com/webpack/webpack/issues/14893) - Support for CSS Modules without the need for plugins
+### [webpack#14893](https://github.com/webpack/webpack/issues/14893) - دعم CSS Modules دون الحاجة إلى إضافات (plugins)
 
-There is currently an [`experimental.css`](/configuration/experiments/#experimentscss) option, which enables **native CSS support** without the need to add plugins to your configuration, as was previously required with plugins like [`mini-css-extract-plugin`](/plugins/mini-css-extract-plugin).
+يوجد حاليًا خيار [`experimental.css`](/configuration/experiments/#experimentscss)، والذي يُفعل **الدعم الأصلي لـ CSS** دون الحاجة إلى إضافة إضافات (plugins) إلى التكوين الخاص بك، كما كان مطلوبًا في السابق مع إضافات مثل [`mini-css-extract-plugin`](/plugins/mini-css-extract-plugin).
 
-The development is already quite advanced, with the possibility of finishing the inclusion into webpack core around **February/March**. After that, the support would remain _experimental_ for a while to gather bug reports, but in **webpack 6** it will no longer be experimental and **plugins for this task will no longer be necessary**.
+التطوير متقدم بالفعل بشكل جيد، مع إمكانية الانتهاء من تضمينه في النواة الأساسية لـ webpack في حوالي شهر **فبراير/مارس**. بعد ذلك، سيبقى الدعم _تجريبيًا_ لفترة من الوقت لجمع تقارير الأخطاء، ولكن في **webpack 6** لن يعود تجريبيًا و**لن تكون هناك حاجة للإضافات لهذه المهمة**.
 
-You can follow the discussion about [experimental CSS support](https://github.com/webpack/webpack/issues/14893)
-to stay updated and contribute ideas.
+يمكنك متابعة النقاش حول [دعم CSS التجريبي](https://github.com/webpack/webpack/issues/14893)
+للبقاء على اطلاع والمساهمة بالأفكار.
 
-### [webpack#6525](https://github.com/webpack/webpack/issues/6525) - A universal target to make your code compatible across runtimes
+### [webpack#6525](https://github.com/webpack/webpack/issues/6525) - هدف شامل (universal target) لجعل الكود الخاص بك متوافقًا عبر بيئات التشغيل (runtimes)
 
-The idea is to add a new target called **universal**, which will compile your code so it can run across **different runtimes**, including Node, the web, Bun, Deno, etc.
-Regardless of whether you use **CommonJS modules** in your application, webpack will be able to wrap them, and all the resulting code will be **pure ESM**, making it _runtime-agnostic_.
+الفكرة هي إضافة هدف (target) جديد يسمى **universal** (شامل)، والذي سيقوم بتحويل الكود الخاص بك بحيث يمكن تشغيله عبر **بيئات تشغيل مختلفة**، بما في ذلك Node و الويب و Bun و Deno، إلخ.
+بغض النظر عما إذا كنت تستخدم **وحدات CommonJS** في تطبيقك، سيكون webpack قادرًا على تغليفها، وسيكون كل الكود الناتج **عبارة عن ESM خالص**، مما يجعله _غير معتمد على بيئة تشغيل محددة_ (runtime-agnostic).
 
-There has already been significant progress toward this goal, but **ESM output is not fully finished yet**. Additional fixes and improvements are still required (see [webpack#17121](https://github.com/webpack/webpack/issues/17121)), along with **adding missing tests** and completing the _CommonJS wrapper functionality_.
+كان هناك تقدم كبير نحو هذا الهدف بالفعل، ولكن **مخرجات ESM لم تكتمل بالكامل بعد**. لا تزال هناك حاجة إلى إصلاحات وتحسينات إضافية (انظر [webpack#17121](https://github.com/webpack/webpack/issues/17121))، إلى جانب **إضافة الاختبارات المفقودة** وإكمال وظيفة _تغليف CommonJS_ (CommonJS wrapper).
 
-You can also join the discussion about [universal target](https://github.com/webpack/webpack/issues/6525) to share your ideas or follow updates on cross-runtime compatibility.
+يمكنك أيضًا الانضمام إلى النقاش حول [الهدف الشامل (universal target)](https://github.com/webpack/webpack/issues/6525) لمشاركة أفكارك أو متابعة التحديثات حول التوافق عبر بيئات التشغيل.
 
-### Support for building TypeScript without loaders
+### دعم بناء TypeScript بدون محملات (loaders)
 
-Recently, in version [5.105](/blog/2026-02-03-webpack-5-105/) we included support for **resolving the paths defined in the TypeScript configuration**, eliminating the need to use a plugin ([tsconfig-paths-webpack-plugin](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin)). Now we want to further expand TypeScript support by **removing the need to use a loader** (the most common one being _ts-loader_) to transpile TypeScript directly in webpack, which would also **reduce your project’s dependencies**.
+مؤخرًا، في الإصدار [5.105](/blog/2026-02-03-webpack-5-105/) قمنا بتضمين دعم لـ **تحليل المسارات المحددة في تكوين TypeScript**، مما يلغي الحاجة لاستخدام إضافة ([tsconfig-paths-webpack-plugin](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin)). الآن نريد توسيع دعم TypeScript بشكل أكبر عن طريق **إزالة الحاجة إلى استخدام محمل (loader)** (أكثرها شيوعًا هو _ts-loader_) لتحويل TypeScript البرمجي (transpile) مباشرة في webpack، مما سيقلل أيضًا من **تبعيات مشروعك** (dependencies).
 
-### [webpack#536](https://github.com/webpack/webpack/issues/536) - Import HTML files and use them as entry points without the need for plugins
+### [webpack#536](https://github.com/webpack/webpack/issues/536) - استيراد ملفات HTML واستخدامها كنقاط دخول (entry points) دون الحاجة لإضافات
 
-Currently, to import HTML files and use them as entry points, it’s necessary to use a plugin ([_html-webpack-plugin_](/plugins/html-webpack-plugin)). The idea is to **integrate that plugin into the core of webpack itself**, similar to how CSS Modules are being handled, and remove the need for a plugin for such a common task. Like CSS Modules, this would be introduced as an _experimental option_, so that in **webpack 6** you’ll be able to remove that dependency.
+حاليًا، لاستيراد ملفات HTML واستخدامها كنقاط دخول، من الضروري استخدام إضافة ([_html-webpack-plugin_](/plugins/html-webpack-plugin)). الفكرة هي **دمج تلك الإضافة في النواة الأساسية لـ webpack نفسها**، على غرار كيفية التعامل مع CSS Modules، وإزالة الحاجة إلى إضافة لمثل هذه المهمة الشائعة. ومثل CSS Modules، سيتم تقديم هذا كـ _خيار تجريبي_، بحيث تتمكن في **webpack 6** من إزالة تلك التبعية.
 
-You can follow the idea and its progress in the related issue ([#536](https://github.com/webpack/webpack/issues/536)).
+يمكنك متابعة الفكرة وتقدمها في المشكلة ذات الصلة ([#536](https://github.com/webpack/webpack/issues/536)).
 
-### Webpack Everywhere (Node, Deno, and Bun, Web)
+### Webpack في كل مكان (Node, Deno, Bun, والويب)
 
-Node.js is still the **default runtime** for many projects, but times have changed and it’s no longer the only JavaScript runtime. New options like **Deno** and **Bun** have gained significant popularity, and webpack should work seamlessly across all of them.
+لا يزال Node.js يمثل **بيئة التشغيل الافتراضية** للعديد من المشاريع، لكن الأوقات تغيرت ولم يعد هو بيئة تشغيل JavaScript الوحيدة. اكتسبت الخيارات الجديدة مثل **Deno** و **Bun** شعبية كبيرة، ويجب أن يعمل webpack بسلاسة عبر جميعها.
 
-The goal is to build webpack so it can run **everywhere**: in Node.js, in web environments, and in alternative runtimes like Deno and Bun. Even when using modules traditionally tied to Node.js, such as `node:fs`, webpack will intelligently handle them, enabling code that depends on these modules to **run in the browser** or other environments where these modules don’t exist.
+الهدف هو بناء webpack بحيث يمكن تشغيله **في كل مكان**: في Node.js، وفي بيئات الويب، وفي بيئات التشغيل البديلة مثل Deno و Bun. حتى عند استخدام وحدات (modules) مرتبطة تقليديًا بـ Node.js، مثل `node:fs`، سيتعامل معها webpack بذكاء، مما يتيح للكود الذي يعتمد على هذه الوحدات أن **يعمل في المتصفح** أو البيئات الأخرى التي لا توجد فيها هذه الوحدات.
 
-To achieve this, we need to **reduce reliance on Node.js internals** and _Buffer usage_, move toward a **more runtime-agnostic architecture**, and expand test coverage.
+لتحقيق ذلك، نحن بحاجة إلى **تقليل الاعتماد على النواة الداخلية لـ Node.js** (Node.js internals) واستخدام _Buffer_، والتحرك نحو **بنية أقل اعتمادًا على بيئة تشغيل محددة** (runtime-agnostic architecture)، وتوسيع تغطية الاختبارات.
 
-Currently, **Deno support is missing proper tests**, while **Bun still lacks required assets and corresponding tests**. In addition, this effort includes adding a **site playground** to validate and showcase webpack running across different environments.
+حاليًا، **يفتقر دعم Deno إلى اختبارات مناسبة**، بينما **لا يزال Bun يفتقر إلى الأصول المطلوبة والاختبارات المقابلة**. بالإضافة إلى ذلك، يتضمن هذا الجهد إضافة **ساحة لعب في الموقع (site playground)** للتحقق من وعرض webpack وهو يعمل في بيئات مختلفة.
 
-### Evaluating Lazy Barrel Optimization
+### تقييم تحسين البرميل الكسول (Lazy Barrel Optimization)
 
-One interesting idea to explore is **lazy barrel optimization**, inspired by how _Rspack_ handles certain module patterns. In Rspack, _lazy barrel_ is an optimization that **skips building unused re-exported modules in side‑effect‑free barrel files until they’re actually needed**. This can significantly reduce build time, especially in **large codebases** with lots of grouped exports.
+من الأفكار المثيرة للاهتمام لاستكشافها هو **تحسين البرميل الكسول**، المستوحى من كيفية تعامل _Rspack_ مع أنماط وحدات معينة. في Rspack، يعد _البرميل الكسول_ تحسينًا **يتخطى بناء الوحدات المعاد تصديرها غير المستخدمة في ملفات البرميل الخالية من الآثار الجانبية حتى يُحتاج إليها فعليًا**. يمكن أن يقلل هذا من وقت البناء بشكل كبير، خاصة في **قواعد التعليمات البرمجية الكبيرة** (codebases) التي تحتوي على الكثير من الصادرات المجمعة.
 
-Barrel files are modules that **re-export other modules** to create a convenient API surface. For example, a `components/index.js` that exports every component from a directory. While useful for organizing code, traditional bundlers often build _all_ the re-exported modules even if only one is used, which can hurt performance. With _lazy barrel optimization_ in Rspack, **only the modules actually referenced get built**, skipping the rest and improving overall build speed.
+ملفات البرميل (Barrel files) هي وحدات **تعيد تصدير وحدات أخرى** لإنشاء واجهة برمجة تطبيقات (API) مريحة. على سبيل المثال، ملف `components/index.js` يقوم بتصدير كل مكون من مجلد. على الرغم من فائدتها لتنظيم الكود، فإن المحزمات التقليدية (bundlers) غالبًا ما تبني _جميع_ الوحدات المعاد تصديرها حتى لو تم استخدام واحدة فقط، مما قد يضر بالأداء. باستخدام _تحسين البرميل الكسول_ في Rspack، **يتم بناء الوحدات المشار إليها فعليًا فقط**، متخطيًا الباقي ومحسنًا سرعة البناء الإجمالية.
 
-Evaluating Rspack’s approach gives us an opportunity to see whether a **similar strategy could benefit webpack**, improving performance around commonly used barrel patterns without requiring developers to restructure their exports manually. It’s an example of looking outward at innovations in the ecosystem to inform possible future enhancements for webpack.
+يمنحنا تقييم نهج Rspack فرصة لمعرفة ما إذا كانت **استراتيجية مماثلة يمكن أن تفيد webpack**، وتحسن الأداء حول أنماط البرميل الشائعة الاستخدام دون مطالبة المطورين بإعادة هيكلة صادراتهم يدويًا. إنه مثال على التطلع إلى الابتكارات في النظام البيئي لإثراء التحسينات المستقبلية المحتملة لـ webpack.
 
-### Simplifying Asset Minimization in Webpack
+### تبسيط تصغير الأصول (Asset Minimization) في Webpack
 
-Webpack currently relies on **multiple separate minimizer plugins**, such as `terser-webpack-plugin`, `css-minimizer-webpack-plugin`, `html-minimizer-webpack-plugin`, and `json-minimizer-webpack-plugin`. While each one works well on its own, **managing them individually adds extra configuration and maintenance overhead**.
+يعتمد Webpack حاليًا على **إضافات تصغير منفصلة ومتعددة**، مثل `terser-webpack-plugin`، و `css-minimizer-webpack-plugin`، و `html-minimizer-webpack-plugin`، و `json-minimizer-webpack-plugin`. في حين أن كل واحدة منها تعمل بشكل جيد بمفردها، فإن **إدارتها بشكل فردي تضيف عبئًا إضافيًا في التكوين والصيانة**.
 
-The idea is to **combine all of these into a single `minimizer-webpack-plugin`**, providing a more **unified and consistent minimization experience**. This would **simplify configuration**, reduce duplication, and make it easier to extend and maintain minimization logic across different asset types.
+الفكرة هي **دمج كل هذه في إضافة واحدة `minimizer-webpack-plugin`**، مما يوفر تجربة تصغير **أكثر توحيدًا واتساقًا**. سيؤدي ذلك إلى **تبسيط التكوين**، وتقليل التكرار، وجعل من السهل توسيع وصيانة منطق التصغير عبر أنواع الأصول المختلفة.
 
-### Streamlining Webpack’s Dev Experience
+### تبسيط تجربة تطوير (Dev Experience) Webpack
 
-Webpack’s **development and CLI tools** are being improved to enhance maintainability while also introducing **new features** for contributors and users alike.
+يتم تحسين **أدوات التطوير وواجهة سطر الأوامر (CLI)** لـ Webpack لتعزيز قابلية الصيانة مع تقديم **ميزات جديدة** للمساهمين والمستخدمين على حد سواء.
 
-#### Dev Tooling
+#### أدوات التطوير (Dev Tooling)
 
-Efforts in development tooling focus on **improving webpack’s internal development workflow** and making it easier to extend and maintain. This includes **merging webpack-dev-middleware and webpack-hot-middleware**, **extracting the overlay from dev-server**, and **consolidating overlay + WebSocket/EventSource logic for reuse**.
+تركز الجهود المبذولة في أدوات التطوير على **تحسين سير عمل التطوير الداخلي لـ webpack** وتسهيل توسيعه وصيانته. يتضمن ذلك **دمج webpack-dev-middleware و webpack-hot-middleware**، و **استخراج التراكب (overlay) من dev-server**، و **توحيد منطق التراكب + WebSocket/EventSource لإعادة استخدامه**.
 
-Additionally, **plugin support** will be added to the dev-server, enabling more flexibility and reducing duplication. These improvements streamline development for contributors while keeping webpack **flexible and reliable** for users.
+بالإضافة إلى ذلك، سيتم إضافة **دعم للإضافات** (plugin support) إلى dev-server، مما يتيح المزيد من المرونة ويقلل من التكرار. هذه التحسينات تبسط التطوير للمساهمين بينما تبقي webpack **مرنًا وموثوقًا** للمستخدمين.
 
-#### CLI Improvements
+#### تحسينات CLI
 
-The CLI is being refined to **simplify maintenance** and **improve usability**. Work includes **consolidating packages**, **refactoring help and subcommand logic**, and **improving the overall developer experience** (see [webpack-cli#4619](https://github.com/webpack/webpack-cli/issues/4619)).
+يتم تحسين واجهة سطر الأوامر لتصبح **أسهل في الصيانة** و **أكثر قابلية للاستخدام**. يتضمن العمل **توحيد الحزم**، و **إعادة صياغة منطق المساعدة والأوامر الفرعية**، و **تحسين تجربة المطور الشاملة** (انظر [webpack-cli#4619](https://github.com/webpack/webpack-cli/issues/4619)).
 
-These changes make it easier for contributors to maintain the CLI while also providing **practical enhancements** for developers working with webpack in their projects.
+هذه التغييرات تجعل من السهل على المساهمين الحفاظ على واجهة سطر الأوامر مع توفير **تحسينات عملية** للمطورين الذين يعملون مع webpack في مشاريعهم.
 
-You can follow the [webpack-cli improvements](https://github.com/webpack/webpack-cli/issues/4619) discussion to stay updated.
+يمكنك متابعة مناقشة [تحسينات webpack-cli](https://github.com/webpack/webpack-cli/issues/4619) للبقاء على اطلاع.
 
-### Accurate and Reliable Documentation
+### توثيق دقيق وموثوق
 
-The idea is to **enable automatic generation of all API and configuration documentation** directly from webpack’s **types and schemas**, ensuring the documentation **always matches the actual behavior** of the code (new api options, deprecations, types etc).
+الفكرة هي **تمكين التوليد التلقائي لجميع وثائق واجهة برمجة التطبيقات (API) والتكوين** مباشرة من **أنواع (types) ومخططات (schemas)** webpack، مما يضمن أن التوثيق **يطابق دائمًا السلوك الفعلي** للكود (خيارات API الجديدة، حالات الإهمال (deprecations)، الأنواع، إلخ).
 
-This approach addresses long-standing problems with **incomplete, or inconsistent documentation** on the webpack website, and makes it easier to maintain. The goal is to provide developers with **accurate, reliable, and up-to-date references** that gives users a easy way to interact with webpack.
+يعالج هذا النهج المشاكل طويلة الأمد المتعلقة بـ **الوثائق غير المكتملة أو غير المتسقة** على موقع webpack، ويجعل صيانتها أسهل. الهدف هو تزويد المطورين بـ **مراجع دقيقة وموثوقة ومحدثة** تمنح المستخدمين طريقة سهلة للتفاعل مع webpack.
 
-### Community Outreach and Engagement
+### التواصل مع المجتمع والمشاركة
 
-Following improvements to documentation and active maintenance, another key focus is **building and strengthening the webpack community**. This year, the effort began with a **new blog launched for webpack 5.105**, and the idea is to continue expanding our outreach through **articles, conference talks, and other public channels**.
+بعد إدخال تحسينات على الوثائق والصيانة النشطة، ينصب تركيز رئيسي آخر على **بناء وتقوية مجتمع webpack**. بدأ هذا الجهد هذا العام من خلال **مدونة جديدة تم إطلاقها للإصدار 5.105 لـ webpack**، والفكرة هي مواصلة توسيع تواصلنا من خلال **المقالات والمحادثات في المؤتمرات والقنوات العامة الأخرى**.
 
-By engaging the community, webpack can **grow adoption**, receive **valuable input**, and create stronger connections between the project and its users. Outreach efforts also help ensure that improvements, tutorials, and best practices reach a **wider audience**, making the ecosystem more vibrant and sustainable.
+من خلال إشراك المجتمع، يمكن لـ webpack **زيادة التبني**، وتلقي **مساهمات قيمة**، وخلق روابط أقوى بين المشروع ومستخدميه. تساعد جهود التواصل أيضًا في ضمان وصول التحسينات والبرامج التعليمية وأفضل الممارسات إلى **جمهور أوسع**، مما يجعل النظام البيئي أكثر حيوية واستدامة.
 
-### Multithreading API
+### واجهة برمجة تطبيقات لتعدد مؤشرات الترابط (Multithreading API)
 
-Webpack is exploring a **Multithreading API**, inspired by _thread-loader_, to bring **better parallel processing capabilities** into the core.
+يستكشف Webpack **واجهة برمجة تطبيقات لتعدد مؤشرات الترابط**، مستوحاة من _thread-loader_، لجلب **قدرات معالجة متوازية أفضل** إلى النواة الأساسية.
 
-The goal is to allow webpack to take advantage of **multi-core systems**, improving build performance for **large projects**. This effort is still in the **design and discussion phase**, aiming to create a solution that is **flexible, maintainable, and easy to use**.
+الهدف هو السماح لـ webpack بالاستفادة من **الأنظمة متعددة النوى**، مما يحسن أداء البناء لـ **المشاريع الكبيرة**. لا يزال هذا الجهد في **مرحلة التصميم والمناقشة**، بهدف إنشاء حل **مرن وقابل للصيانة وسهل الاستخدام**.
 
-By integrating multithreading in a more formal way, webpack hopes to provide developers with **faster builds** while keeping the configuration and internal logic **clean and scalable**. This work reflects ongoing exploration rather than a finalized feature, and _thread-loader_ remains the current **community-supported solution** for parallelization.
+من خلال دمج تعدد مؤشرات الترابط بطريقة رسمية أكثر، يأمل webpack في تزويد المطورين بـ **عمليات بناء أسرع** مع الحفاظ على التكوين والمنطق الداخلي **نظيفًا وقابلاً للتوسع**. يعكس هذا العمل استكشافًا مستمرًا بدلاً من ميزة نهائية، ويظل _thread-loader_ **الحل الحالي المدعوم من المجتمع** للموازاة (parallelization).
 
-### Design and Visual Identity
+### التصميم والهوية البصرية
 
-We want to **improve webpack’s overall visual identity** by creating **new design assets** for projects and swag. This includes things like **banners, clothing merch, water bottles, coffee cups, socks**, and other branded materials.
+نريد **تحسين الهوية البصرية الإجمالية لـ webpack** من خلال إنشاء **أصول تصميم جديدة** للمشاريع والمنتجات (swag). ويشمل ذلك أشياء مثل **اللافتات، والملابس، وزجاجات المياه، وأكواب القهوة، والجوارب**، ومواد أخرى تحمل العلامة التجارية.
 
-Beyond making webpack look **more polished and recognizable**, these assets also open the door to **future merchandise sales**, where purchasing swag would directly help fund and support webpack’s ongoing development.
+بالإضافة إلى جعل webpack يبدو **أكثر احترافية وقابلية للتعرف عليه**، تفتح هذه الأصول أيضًا الباب لـ **مبيعات سلع مستقبلية**، حيث يساعد شراء هذه المنتجات بشكل مباشر في تمويل ودعم التطوير المستمر لـ webpack.
 
-### GSoC Mentorship
+### الإرشاد في GSoC
 
-A key focus is **mentoring students through the Google Summer of Code (GSoC) program**, a volunteer-driven effort with the goal of teaching them how to **effectively maintain open source projects**.
+من الاهتمامات الرئيسية **توجيه الطلاب من خلال برنامج Google Summer of Code (GSoC)**، وهو جهد تطوعي يهدف إلى تعليمهم كيفية **الحفاظ بفعالية على مشاريع مفتوحة المصدر**.
 
-Through hands-on guidance, students learn **workflows, best practices**, and how to approach maintaining a codebase. At the same time, this mentorship allows the project to **develop new features**, as students work on functionalities that are needed while being guided by experienced contributors.
+من خلال الإرشاد العملي، يتعلم الطلاب **سير العمل، وأفضل الممارسات**، وكيفية التعامل مع صيانة قاعدة التعليمات البرمجية. في الوقت نفسه، يتيح هذا الإرشاد للمشروع **تطوير ميزات جديدة**، حيث يعمل الطلاب على وظائف مطلوبة تحت توجيه المساهمين ذوي الخبرة.
 
-This experience equips them with the skills needed to become **future maintainers**, contributing not only to webpack but also to the **broader open source ecosystem**, which relies heavily on volunteers.
+هذه التجربة تزودهم بالمهارات اللازمة ليصبحوا **مشرفين في المستقبل (maintainers)**، ولا يساهمون فقط في webpack ولكن أيضًا في **النظام البيئي الأوسع مفتوح المصدر**، والذي يعتمد بشكل كبير على المتطوعين.
 
-By emphasizing **maintainability, knowledge transfer**, and **guided feature development**, GSoC mentorship helps secure **long-term sustainability** and cultivates the **next generation of contributors** for open source projects.
+من خلال التأكيد على **قابلية الصيانة، ونقل المعرفة**، و **التطوير الموجه للميزات**، يساعد توجيه GSoC في تأمين **الاستدامة طويلة المدى** وتنمية **الجيل القادم من المساهمين** للمشاريع مفتوحة المصدر.
 
-### Donations and Sponsorships
+### التبرعات والرعايات
 
-Open source projects like webpack are maintained primarily by **volunteers**, and there isn’t a full-time engineering team dedicated to the project.
+تتم صيانة المشاريع مفتوحة المصدر مثل webpack في المقام الأول بواسطة **المتطوعين**، ولا يوجد فريق هندسي بدوام كامل مخصص للمشروع.
 
-**Growing donations and sponsorships** is crucial because the more funding available, the more time the core contributors can dedicate to **maintaining and improving webpack**, despite having other responsibilities and personal lives.
+يُعد **زيادة التبرعات والرعايات** أمرًا بالغ الأهمية لأنه كلما توفر المزيد من التمويل، ازداد الوقت الذي يمكن للمساهمين الأساسيين تكريسه لـ **صيانة وتحسين webpack**، على الرغم من مسؤولياتهم الأخرى وحياتهم الشخصية.
 
-Support through donations not only helps **sustain ongoing maintenance** but also enables contributors to focus on **new features, bug fixes**, and **improving the ecosystem** overall. By contributing financially, the community directly helps ensure webpack remains **healthy and actively developed**.
+الدعم من خلال التبرعات لا يساعد فقط في **استدامة الصيانة المستمرة** ولكنه يمكن أيضًا المساهمين من التركيز على **الميزات الجديدة، وإصلاح الأخطاء**، و **تحسين النظام البيئي** بشكل عام. من خلال المساهمة المالية، يساعد المجتمع بشكل مباشر في ضمان بقاء webpack **صحيًا وقيد التطوير النشط**.
 
-### Preparing for Webpack 6
+### التحضير لـ Webpack 6
 
-All the efforts covered in this blog, from enhancing runtime support (Node, Deno, Bun, and universal targets), improving documentation and developer tooling, mentoring new contributors through GSoC, to exploring multithreading and optimizations like lazy barrel, are paving the way toward **webpack 6**.
+كل الجهود المذكورة في هذه المدونة، من تعزيز دعم بيئات التشغيل (Node و Deno و Bun والأهداف الشاملة)، إلى تحسين الوثائق وأدوات المطور، وتوجيه المساهمين الجدد من خلال GSoC، إلى استكشاف تعدد مؤشرات الترابط والتحسينات مثل البرميل الكسول، تمهد الطريق نحو **webpack 6**.
 
-#### Core and Loader Improvements
+#### تحسينات النواة (Core) والمحمل (Loader)
 
-To prepare for **webpack@6** and simplify internal logic, efforts include **moving loader-runner into core** to unify loader context handling. This helps reduce duplication, improves maintainability, and lays the groundwork for future enhancements.
+للتحضير لـ **webpack@6** وتبسيط المنطق الداخلي، تتضمن الجهود **نقل loader-runner إلى النواة** لتوحيد التعامل مع سياق المحمل. يساعد هذا في تقليل التكرار، وتحسين قابلية الصيانة، ويضع الأساس للتحسينات المستقبلية.
 
-Additionally, **reducing internal TODOs across the codebase** ensures a **cleaner foundation** and makes it easier for contributors to work efficiently.
+بالإضافة إلى ذلك، فإن **تقليل المهام الداخلية المؤجلة (TODOs) عبر قاعدة التعليمات البرمجية** يضمن **أساسًا أكثر نظافة** ويسهل على المساهمين العمل بكفاءة.
 
-#### Testing and Type Coverage
+#### الاختبار وتغطية الأنواع (Type Coverage)
 
-**Improving test coverage** and **strengthening type coverage** are key priorities. By reducing the use of `any`, `unknown`, and other loose types, webpack becomes **more reliable** and easier to maintain. Strong types and thorough tests help **catch issues earlier** and improve confidence for contributors making changes.
+تُعد **تحسين تغطية الاختبار** و **تقوية تغطية الأنواع** أولويات رئيسية. من خلال تقليل استخدام الأنواع الفضفاضة مثل `any` و `unknown`، يصبح webpack **أكثر موثوقية** وأسهل في الصيانة. الأنواع القوية والاختبارات الشاملة تساعد على **اكتشاف المشكلات مبكرًا** وتحسن الثقة لدى المساهمين عند إجراء تغييرات.
 
-#### Benchmarks and Performance
+#### المقارنات المعيارية (Benchmarks) والأداء
 
-To measure progress and maintain **high performance standards**, webpack plans to **add more benchmarks**. Integrating these benchmarks into CI pipelines allows **comparisons across versions**, ensuring that optimizations continue to deliver **tangible improvements** for developers.
+لقياس التقدم والحفاظ على **معايير أداء عالية**، يخطط webpack لإضافة **المزيد من المقارنات المعيارية**. يتيح دمج هذه المقارنات في مسارات CI **مقارنات عبر الإصدارات**، مما يضمن أن التحسينات تستمر في تقديم **تحسينات ملموسة** للمطورين.
 
-## Final remarks
+## ملاحظات ختامية
 
-I hope that you found this list useful and that you are **excited for 2026**, we are too! One of the most important parts of our work now, is to **get enough donations** to keep the project sustainable. We use our resources to **pay contributors** once they reach a certain threshold. In addition to that, we want to make sure that over time, the project has **some left-over resources** that we can save for when times are hard.
+آمل أن تجد هذه القائمة مفيدة وأن تكون **متحمسًا لعام 2026**، نحن كذلك! أحد أهم أجزاء عملنا الآن، هو **الحصول على تبرعات كافية** للحفاظ على استدامة المشروع. نحن نستخدم مواردنا لـ **الدفع للمساهمين** بمجرد وصولهم إلى حد معين. بالإضافة إلى ذلك، نريد التأكد من أنه بمرور الوقت، سيحتوي المشروع على **بعض الموارد المتبقية** التي يمكننا توفيرها للأوقات الصعبة.
 
-This year we will try something new, which is to have **allocated sections** where **companies/individuals that contribute a significant amount** will have a spot to **showcase their product/project/promotion**.
+هذا العام سنحاول شيئًا جديدًا، وهو أن يكون لدينا **أقسام مخصصة** حيث ستحظى **الشركات/الأفراد الذين يساهمون بمبلغ كبير** بمكان لـ **عرض منتجاتهم/مشاريعهم/عروضهم الترويجية**.
 
-Thank you for the attention and for being interested in our roadmap for 2026. If you are curious about contributing to the organization either **financially** or otherwise, send us a private or public message in [Discord](https://discord.com/invite/webpack), reach us through [email](mailto:webpack-security@openjsf.org) or contact one of the [TSC members](https://github.com/webpack/webpack?tab=readme-ov-file#tsc-technical-steering-committee).
+شكرًا لاهتمامك ولرغبتك في معرفة خارطة طريقنا لعام 2026. إذا كنت فضوليًا بشأن المساهمة في المنظمة سواء **ماليًا** أو بأي شكل آخر، فأرسل لنا رسالة خاصة أو عامة في [Discord](https://discord.com/invite/webpack)، أو تواصل معنا عبر [البريد الإلكتروني](mailto:webpack-security@openjsf.org) أو اتصل بأحد أعضاء [TSC](https://github.com/webpack/webpack?tab=readme-ov-file#tsc-technical-steering-committee).
 
-~ webpack TSC 💙
+~ لجنة التوجيه الفني في webpack 💙
\ No newline at end of file
diff --git a/src/content/blog/2026-04-08-webpack-5-106.mdx b/src/content/blog/2026-04-08-webpack-5-106.mdx
index 4c94088764ff..ea3d5aa6885f 100644
--- a/src/content/blog/2026-04-08-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-08-webpack-5-106.mdx
@@ -2,46 +2,47 @@
 title: Webpack 5.106
 sort: 20260408
 contributors:
-  - bjohansebas
+  - ameencfw
+  - RlxChap2
 ---
 
-**Webpack 5.106 introduces plugin validation hooks, built-in runtime style injection for CSS Modules, smarter tree shaking for CommonJS destructuring, source-phase imports for WebAssembly modules, and an experimental integration with `oxc-parser` for faster JavaScript parsing.**
+**يقدم Webpack 5.106 خطافات (hooks) للتحقق من صحة الإضافات (plugins)، وحقن نمط مدمج في وقت التشغيل (runtime) لـ CSS Modules، و tree shaking أذكى لتفكيك CommonJS (destructuring)، واستيرادات مرحلة المصدر (source-phase) لوحدات WebAssembly، وتكاملًا تجريبيًا مع `oxc-parser` لتحليل JavaScript أسرع.**
 
-Explore what's new in this release:
+اكتشف ما هو الجديد في هذا الإصدار:
 
-- [**Plugin Validation with `compiler.hooks.validate`**](#plugin-validation-with-compilerhooksvalidate)
-- [**CSS Modules with Runtime Style Injection**](#css-modules-with-runtime-style-injection)
-- [**Better Tree Shaking for CommonJS Destructuring**](#better-tree-shaking-for-commonjs-destructuring)
-- [**Source Phase Imports for WebAssembly (Experimental)**](#source-phase-imports-for-webassembly-experimental)
-- [**Getting Started with `create-webpack-app`**](#getting-started-with-create-webpack-app)
-- [**Context Support for VirtualUrlPlugin**](#context-support-for-virtualurlplugin)
-- [**Experimental JavaScript Parsing with `oxc-parser`**](#experimental-javascript-parsing-with-oxc-parser)
-- [**Ecosystem Updates**](#ecosystem-updates)
-- [**Bug Fixes**](#bug-fixes)
+- [**التحقق من صحة الإضافات باستخدام `compiler.hooks.validate`**](#plugin-validation-with-compilerhooksvalidate)
+- [**CSS Modules مع حقن النمط في وقت التشغيل**](#css-modules-with-runtime-style-injection)
+- [**Tree Shaking أفضل لتفكيك CommonJS**](#better-tree-shaking-for-commonjs-destructuring)
+- [**استيرادات مرحلة المصدر لـ WebAssembly (تجريبي)**](#source-phase-imports-for-webassembly-experimental)
+- [**البدء مع `create-webpack-app`**](#getting-started-with-create-webpack-app)
+- [**دعم السياق لـ VirtualUrlPlugin**](#context-support-for-virtualurlplugin)
+- [**تحليل JavaScript تجريبي باستخدام `oxc-parser`**](#experimental-javascript-parsing-with-oxc-parser)
+- [**تحديثات النظام البيئي**](#ecosystem-updates)
+- [**إصلاحات الأخطاء**](#bug-fixes)
 
-## Plugin Validation with `compiler.hooks.validate`
+## التحقق من صحة الإضافات باستخدام `compiler.hooks.validate`
 
-Webpack adds a new top-level `validate` option and a [`compiler.hooks.validate`](/api/compiler-hooks/#validate) hook that standardize how schema validation works across webpack configuration, plugins, and loaders.
+يضيف Webpack خيارًا جديدًا في المستوى الأعلى يسمى `validate` وخطافًا (hook) [`compiler.hooks.validate`](/api/compiler-hooks/#validate) يوحدان كيفية عمل التحقق من المخطط (schema validation) عبر تكوين webpack، والإضافات، والمحملات (loaders).
 
-Until now, there was no unified way for plugins to integrate schema validation into the webpack build lifecycle. Each plugin handled validation on its own. The new `compiler.hooks.validate` hook gives plugin authors a standard API to register their validation logic, and `compiler.validate(...)` to run it. This means all validation from webpack's core config to every plugin that adopts the hook is controlled by a single `validate` flag and follows the same patterns:
+حتى الآن، لم تكن هناك طريقة موحدة للإضافات لدمج التحقق من المخطط في دورة حياة بناء webpack. كانت كل إضافة تعالج التحقق بمفردها. يمنح خطاف `compiler.hooks.validate` الجديد مؤلفي الإضافات واجهة برمجة تطبيقات (API) قياسية لتسجيل منطق التحقق الخاص بهم، و `compiler.validate(...)` لتشغيله. وهذا يعني أن جميع عمليات التحقق من تكوين webpack الأساسي إلى كل إضافة تتبنى الخطاف يتم التحكم فيها بواسطة علامة `validate` واحدة وتتبع نفس الأنماط:
 
 ```js
 module.exports = {
-  // Disable schema validation (webpack config, plugins, and loaders)
+  // تعطيل التحقق من المخطط (تكوين webpack والإضافات والمحملات)
   validate: false,
 };
 ```
 
-The default value depends on the build mode:
+تعتمد القيمة الافتراضية على وضع البناء:
 
-| Mode        | `experiments.futureDefaults` | Default `validate` |
+| Mode        | `experiments.futureDefaults` | الافتراضي لـ `validate` |
 | ----------- | :--------------------------: | :----------------: |
 | development |           `false`            |       `true`       |
 | development |            `true`            |       `true`       |
 | production  |           `false`            |       `true`       |
 | production  |            `true`            |      `false`       |
 
-For plugin authors, integrating validation is straightforward. Register a tap on `compiler.hooks.validate`, and webpack takes care of the rest, including skipping validation entirely when the user sets `validate: false`:
+بالنسبة لمؤلفي الإضافات، يعد دمج التحقق أمرًا مباشرًا. قم بتسجيل tap على `compiler.hooks.validate`، وسيهتم webpack بالباقي، بما في ذلك تخطي التحقق تمامًا عندما يضبط المستخدم `validate: false`:
 
 ```js
 class MyPlugin {
@@ -59,24 +60,24 @@ class MyPlugin {
       );
     });
 
-    // ...normal plugin logic here...
+    // ...المنطق العادي للإضافة هنا...
   }
 }
 
 module.exports = MyPlugin;
 ```
 
-When `validate` is `true` and something is wrong, webpack throws a clear error at compile time.
+عندما يكون `validate` `true` وهناك خطأ ما، يرمي webpack خطأً واضحًا في وقت التحويل البرمجي (compile time).
 
-When `validate` is `false`, that check is skipped entirely. The build may still fail later with a less obvious error, so use this option with care.
+عندما يكون `validate` `false`، يتم تخطي هذا التحقق بالكامل. قد لا يزال البناء يفشل لاحقًا بخطأ أقل وضوحًا، لذا استخدم هذا الخيار بحذر.
 
-## CSS Modules with Runtime Style Injection
+## CSS Modules مع حقن النمط في وقت التشغيل
 
-Webpack now supports `exportType: "style"` for CSS Modules (when `experiments.css: true` is enabled), which allows CSS to be injected into the DOM as a `<style>` (`HTMLStyleElement`) directly from the webpack runtime. This covers the typical use case of `style-loader`, so it is no longer necessary to use `style-loader` to inject styles when using this mode.
+يدعم Webpack الآن `exportType: "style"` لـ CSS Modules (عند تفعيل `experiments.css: true`)، مما يسمح بحقن CSS في DOM كـ `<style>` (`HTMLStyleElement`) مباشرة من وقت تشغيل webpack. يغطي هذا حالة الاستخدام النموذجية لـ `style-loader`، لذا لم يعد من الضروري استخدام `style-loader` لحقن الأنماط عند استخدام هذا الوضع.
 
-Additionally, the CSS Module exports are preserved (for example, the class name mapping in `*.module.css`).
+بالإضافة إلى ذلك، يتم الاحتفاظ بصادرات CSS Module (على سبيل المثال، تعيين اسم الفئة (class name mapping) في `*.module.css`).
 
-For CSP compatibility, when a nonce has been configured in the webpack runtime (`__webpack_require__.nc`), the `<style>` injected by this mode receives the same nonce via the `nonce` attribute (webpack reuses the nonce provided by the application; it does not generate one automatically).
+للتوافق مع CSP، عند تكوين nonce في وقت تشغيل webpack (`__webpack_require__.nc`)، فإن `<style>` المحقون بهذا الوضع يتلقى نفس nonce عبر السمة `nonce` (يعيد webpack استخدام nonce المقدم من التطبيق؛ ولا يقوم بإنشائه تلقائيًا).
 
 ```js
 module.exports = {
@@ -95,13 +96,13 @@ module.exports = {
 };
 ```
 
-W> CSS support has matured significantly and is expected to be fully finalized in the next minor release, as planned in the roadmap. As part of this transition, `css-loader`, `style-loader`, and `mini-css-extract-plugin` are planned for deprecation.
+W> لقد نضج دعم CSS بشكل كبير ومن المتوقع الانتهاء منه بالكامل في الإصدار الفرعي التالي، كما هو مخطط له في خارطة الطريق. كجزء من هذا الانتقال، من المخطط إهمال كل من `css-loader` و `style-loader` و `mini-css-extract-plugin`.
 
-## Better Tree Shaking for CommonJS Destructuring
+## Tree Shaking أفضل لتفكيك CommonJS
 
-Webpack can now statically analyze **destructuring assignments directly from CommonJS `require`** (and `module.require`) and treat only the destructured properties as "referenced exports", instead of conservatively assuming the whole `exports` object is used. This improves dead-code elimination in optimized builds and can reduce bundle size in codebases that still consume CommonJS modules.
+يمكن لـ Webpack الآن تحليل **تعيينات التفكيك (destructuring assignments) بشكل ثابت مباشرة من `require` في CommonJS** (و `module.require`) والتعامل مع الخصائص المفككة فقط كـ "صادرات مشار إليها"، بدلاً من افتراض بشكل متحفظ أن كائن `exports` بأكمله مستخدم. هذا يحسن إزالة الأكواد الميتة في عمليات البناء المحسنة ويمكن أن يقلل من حجم الحزمة في قواعد الأكواد التي لا تزال تستهلك وحدات CommonJS.
 
-Consider a module that exports multiple functions, and a consumer that only destructures one of them:
+تأمل وحدة تصدر وظائف متعددة، ومستهلك يفصل إحداها فقط:
 
 ```js
 // math.js
@@ -118,10 +119,10 @@ const { add } = require("./math");
 console.log(add(2, 3));
 ```
 
-In previous versions, webpack treated `require("./math")` as referencing the entire exports object. All four functions were included in the bundle even though only `add` is used:
+في الإصدارات السابقة، كان webpack يعامل `require("./math")` على أنه يشير إلى كائن الصادرات بأكمله. تم تضمين جميع الوظائف الأربع في الحزمة على الرغم من استخدام `add` فقط:
 
 ```js
-// Bundled output (5.105 — simplified)
+// الناتج المحزم (5.105 — مبسط)
 const math = {
   add: (a, b) => a + b,
   subtract: (a, b) => a - b,
@@ -130,29 +131,29 @@ const math = {
 };
 ```
 
-Starting with 5.106, webpack recognizes the destructuring pattern and marks only `add` as referenced. The unused exports are eliminated during optimization:
+بدءًا من الإصدار 5.106، يتعرف webpack على نمط التفكيك ويضع علامة على `add` فقط كمشار إليها. يتم القضاء على الصادرات غير المستخدمة أثناء التحسين:
 
 ```js
-// Bundled output (5.106 — simplified)
+// الناتج المحزم (5.106 — مبسط)
 const math_add = (a, b) => a + b;
-// subtract, multiply, divide - tree-shaken away
+// تم التخلص من subtract, multiply, divide
 ```
 
-This also works with `module.require`:
+يعمل هذا أيضًا مع `module.require`:
 
 ```js
 const { a, b } = module.require("./module");
 ```
 
-## Source Phase Imports for WebAssembly (Experimental)
+## استيرادات مرحلة المصدر لـ WebAssembly (تجريبي)
 
-Webpack now includes experimental support for TC39 [Source Phase Imports](https://github.com/tc39/proposal-source-phase-imports) when importing WebAssembly modules.
+يتضمن Webpack الآن دعمًا تجريبيًا لـ [استيرادات مرحلة المصدر (Source Phase Imports)](https://github.com/tc39/proposal-source-phase-imports) من TC39 عند استيراد وحدات WebAssembly.
 
-The proposal is currently at **Stage 3** and introduces a way to import a module at the _source phase_ instead of immediately evaluating it. In practical terms for WebAssembly, this means you can obtain a compiled `WebAssembly.Module` first, and instantiate it later with your own imports.
+المقترح حاليًا في **المرحلة 3** ويقدم طريقة لاستيراد وحدة في _مرحلة المصدر_ بدلاً من تقييمها على الفور. من الناحية العملية لـ WebAssembly، هذا يعني أنه يمكنك الحصول على `WebAssembly.Module` مُترجم أولاً، وإنشاء مثيل له لاحقًا مع استيراداتك الخاصة.
 
-In webpack 5.106, this experimental support is focused on WebAssembly source imports under `experiments.sourceImport`. In the next minor release, the focus is expected to shift toward JavaScript support.
+في الإصدار 5.106 من webpack، يركز هذا الدعم التجريبي على استيرادات مصدر WebAssembly ضمن `experiments.sourceImport`. في الإصدار الفرعي القادم، من المتوقع أن يتحول التركيز نحو دعم JavaScript.
 
-Enable the feature with `experiments.sourceImport`:
+قم بتمكين الميزة باستخدام `experiments.sourceImport`:
 
 ```js
 module.exports = {
@@ -163,32 +164,32 @@ module.exports = {
 };
 ```
 
-Then use either static or dynamic source-phase syntax:
+ثم استخدم إما صياغة مرحلة المصدر الثابتة أو الديناميكية:
 
 ```text
-// Static form
+// الشكل الثابت
 import source wasmModule from "./module.wasm";
 
-// Dynamic form
+// الشكل الديناميكي
 const wasmModule2 = await import.source("./module.wasm");
 
 const instance = await WebAssembly.instantiate(wasmModule);
 ```
 
-You can also see an end-to-end example in webpack's repository:
+يمكنك أيضًا رؤية مثال كامل في مستودع webpack:
 [https://github.com/webpack/webpack/tree/main/examples/wasm-simple-source-phase](https://github.com/webpack/webpack/tree/main/examples/wasm-simple-source-phase)
 
-## Getting Started with `create-webpack-app`
+## البدء مع `create-webpack-app`
 
-[`create-webpack-app`](https://www.npmjs.com/package/create-webpack-app) is now the recommended way to scaffold a new webpack project. Previously, this functionality lived inside `webpack-cli` as the `webpack init` command, but it has been extracted into its own standalone package with the release of webpack-cli 7.
+أصبحت [`create-webpack-app`](https://www.npmjs.com/package/create-webpack-app) الآن الطريقة الموصى بها لإعداد مشروع webpack جديد. في السابق، كانت هذه الوظيفة موجودة داخل `webpack-cli` كأمر `webpack init`، ولكن تم استخراجها في حزمتها المستقلة مع إصدار webpack-cli 7.
 
-This means you can now create a new webpack project with a single command, without needing to install `webpack-cli` first:
+هذا يعني أنه يمكنك الآن إنشاء مشروع webpack جديد بأمر واحد، دون الحاجة إلى تثبيت `webpack-cli` أولاً:
 
 ```bash
 npx create-webpack-app
 ```
 
-The CLI walks you through an interactive setup where you choose the pieces that fit your project:
+ترشدك واجهة سطر الأوامر (CLI) خلال إعداد تفاعلي حيث تختار القطع التي تناسب مشروعك:
 
 ```bash
 $ npx create-webpack-app
@@ -206,22 +207,22 @@ $ npx create-webpack-app
 [create-webpack] ✅ Project dependencies installed successfully!
 ```
 
-The generated project includes a working `webpack.config.js`, dev server configuration, and the loader/plugin setup for the options you selected. From there, you can start developing immediately:
+يتضمن المشروع المُولد `webpack.config.js` جاهز للعمل، وتكوين خادم التطوير، وإعداد المحمل/الإضافة للخيارات التي حددتها. من هناك، يمكنك البدء في التطوير على الفور:
 
 ```bash
 cd my-project
 npm start
 ```
 
-This approach follows the same pattern popularized by tools like `create-react-app` and `create-vite`: a single `npx` command that gets you from zero to a working project without manual configuration.
+يتبع هذا النهج نفس النمط الذي نشرته أدوات مثل `create-react-app` و `create-vite`: أمر `npx` واحد ينقلك من الصفر إلى مشروع عامل بدون تكوين يدوي.
 
-You can also use the `init` subcommand if you prefer the explicit form:
+يمكنك أيضًا استخدام الأمر الفرعي `init` إذا كنت تفضل الشكل الصريح:
 
 ```bash
 npx create-webpack-app init
 ```
 
-Beyond project scaffolding, `create-webpack-app` can also generate the boilerplate for custom loaders and plugins:
+بالإضافة إلى إعداد المشروع، يمكن لـ `create-webpack-app` أيضًا إنشاء الكود الأساسي (boilerplate) لمحملات وإضافات مخصصة:
 
 ```bash
 npx create-webpack-app loader
@@ -229,15 +230,15 @@ npx create-webpack-app loader
 npx create-webpack-app plugin
 ```
 
-## Context Support for VirtualUrlPlugin
+## دعم السياق لـ VirtualUrlPlugin
 
-`VirtualUrlPlugin` (via `webpack.experiments.schemes.VirtualUrlPlugin`) now supports a `context` option that defines the **base directory used to resolve relative imports inside virtual modules**. This feature is currently **experimental**, as it is part of the `experiments.schemes` API.
+تدعم إضافة `VirtualUrlPlugin` (عبر `webpack.experiments.schemes.VirtualUrlPlugin`) الآن خيار `context` الذي يحدد **المجلد الأساسي المُستخدم لتحليل الاستيرادات النسبية داخل الوحدات الافتراضية**. هذه الميزة حاليًا **تجريبية**، لأنها جزء من واجهة برمجة تطبيقات `experiments.schemes`.
 
-This makes virtual modules behave more like real files: code such as `import "./utils"` resolves consistently instead of falling back to `compiler.context` and potentially resolving incorrectly.
+هذا يجعل الوحدات الافتراضية تتصرف بشكل أشبه بالملفات الحقيقية: الكود مثل `import "./utils"` يُحلل بشكل متسق بدلاً من الرجوع إلى `compiler.context` وربما حله بشكل غير صحيح.
 
-`context` can be set per virtual module (inside the module definition) or as a plugin level default. It defaults to `"auto"`, which tries to infer the context from the virtual module id or path; otherwise it falls back to `compiler.context`. Conceptually, when you set `context` for a module, webpack treats that virtual module _as if it lived inside that directory_ for resolving relative paths.
+يمكن تعيين `context` لكل وحدة افتراضية (داخل تعريف الوحدة) أو كافتراضي على مستوى الإضافة. افتراضيًا يكون `"auto"`، والذي يحاول استنتاج السياق من معرف الوحدة الافتراضية أو المسار؛ وإلا فإنه يعود إلى `compiler.context`. من الناحية المفاهيمية، عندما تقوم بتعيين `context` لوحدة ما، فإن webpack يعامل تلك الوحدة الافتراضية _كما لو أنها تعيش داخل ذلك المجلد_ لتحليل المسارات النسبية.
 
-For example, if you define a virtual module id `virtual/table.js` with `context: path.join(__dirname, "src/components")`, then its internal `import "./utils"` is resolved as if the file were `src/components/table.js` importing `src/components/utils.js`.
+على سبيل المثال، إذا حددت معرف وحدة افتراضية `virtual/table.js` مع `context: path.join(__dirname, "src/components")`، فسيتم تحليل استيرادها الداخلي `import "./utils"` كما لو كان الملف هو `src/components/table.js` الذي يستورد `src/components/utils.js`.
 
 ```js
 const path = require("node:path");
@@ -266,15 +267,15 @@ module.exports = {
 };
 ```
 
-## Experimental JavaScript Parsing with `oxc-parser`
+## تحليل JavaScript تجريبي باستخدام `oxc-parser`
 
-Webpack now includes an example demonstrating how to replace the default JavaScript parser with **`oxc-parser`**. This integration should be considered **purely experimental** and is **not recommended for production use**.
+يتضمن Webpack الآن مثالًا يوضح كيفية استبدال محلل JavaScript الافتراضي بـ **`oxc-parser`**. يجب اعتبار هذا التكامل **تجريبيًا بحتًا** و**لا يوصى به للاستخدام في الإنتاج**.
 
-Instead, it is intended for **development environments** or **benchmark branches**, allowing the community to experiment with alternative parsing strategies in real projects. This helps evaluate potential improvements in **parse time and build performance**, as well as identify possible **compatibility issues**.
+بدلاً من ذلك، الغرض منه لـ **بيئات التطوير** أو **فروع المقارنة المعيارية (benchmark)**، مما يسمح للمجتمع بتجربة استراتيجيات تحليل بديلة في مشاريع حقيقية. يساعد هذا في تقييم التحسينات المحتملة في **وقت التحليل وأداء البناء**، بالإضافة إلى تحديد **مشكلات التوافق** المحتملة.
 
-**Example**
+**مثال**
 
-The following configuration limits the custom parser to `.js` files:
+يقتصر التكوين التالي على تطبيق المحلل المخصص لملفات `.js`:
 
 ```js
 "use strict";
@@ -288,7 +289,7 @@ module.exports = {
   module: {
     rules: [
       {
-        // Apply the custom parser only to JavaScript files
+        // تطبيق المحلل المخصص فقط لملفات JavaScript
         test: /\.js$/,
         parser: {
           parse: oxcParse,
@@ -299,22 +300,22 @@ module.exports = {
 };
 ```
 
-You can find the full example in the webpack repository:
+يمكنك العثور على المثال الكامل في مستودع webpack:
 [https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js](https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js)
 
-## Ecosystem Updates
+## تحديثات النظام البيئي
 
-- **Webpack-cli** has released a new major version, [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). The minimum supported Node.js version is now `20.9.0`, and configuration files are loaded via dynamic `import()` by default, which enables native TypeScript configuration support through Node.js type stripping without needing external loaders.
-  The `--node-env` argument has been replaced by `--config-node-env`, and the deprecated programmatic API has been removed. Additionally, configuration freezing is now allowed, graceful shutdown has been improved when file system cache is enabled, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0).
-- **Webpack-dev-middleware** has released a new major version, [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). The minimum supported Node.js version is now `20.9.0` and the minimum webpack version is `5.101.0`. The `getFilenameFromUrl` function is now asynchronous, immutable asset caching (`cacheImmutable`) is enabled by default, and a new `forwardError` option allows forwarding errors to the next middleware.
-  Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0).
-- **Compression-webpack-plugin**, **html-minimizer-webpack-plugin**, **css-minimizer-webpack-plugin**, **image-minimizer-webpack-plugin**, and other plugins have released new major versions to align their minimum supported Node.js version to `20.9.0`, keeping consistency across the webpack ecosystem alongside the recent major releases of webpack-cli 7 and webpack-dev-middleware 8.
+- أصدرت **Webpack-cli** إصدارًا رئيسيًا جديدًا، [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). الحد الأدنى لإصدار Node.js المدعوم الآن هو `20.9.0`، ويتم تحميل ملفات التكوين عبر `import()` الديناميكي افتراضيًا، مما يُفعل الدعم الأصلي لتكوين TypeScript عبر تجريد أنواع Node.js (type stripping) دون الحاجة إلى محملات خارجية.
+  تم استبدال وسيطة `--node-env` بـ `--config-node-env`، وتم إزالة واجهة برمجة التطبيقات البرمجية المهملة. بالإضافة إلى ذلك، أصبح الآن يُسمح بتجميد التكوين (configuration freezing)، وتم تحسين الإغلاق السلس (graceful shutdown) عند تفعيل ذاكرة التخزين المؤقت لنظام الملفات، وتم إجراء تحسينات عامة على الأداء. تحقق من [الإصدار لمزيد من المعلومات](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0).
+- أصدرت **Webpack-dev-middleware** إصدارًا رئيسيًا جديدًا، [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). الحد الأدنى لإصدار Node.js المدعوم الآن هو `20.9.0` والحد الأدنى لإصدار webpack هو `5.101.0`. أصبحت وظيفة `getFilenameFromUrl` الآن غير متزامنة، وتم تفعيل التخزين المؤقت الثابت للأصول (`cacheImmutable`) افتراضيًا، وهناك خيار جديد `forwardError` يسمح بتمرير الأخطاء إلى البرمجيات الوسيطة (middleware) التالية.
+  كما تم إضافة دعم لاستخدام الإضافات، وتم إجراء تحسينات عامة على الأداء. تحقق من [الإصدار لمزيد من المعلومات](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0).
+- أصدرت إضافات مثل **Compression-webpack-plugin**, **html-minimizer-webpack-plugin**, **css-minimizer-webpack-plugin**, **image-minimizer-webpack-plugin** وغيرها من الإضافات إصدارات رئيسية جديدة لمواءمة الحد الأدنى لإصدار Node.js المدعوم إلى `20.9.0`، مع الحفاظ على التناسق عبر النظام البيئي لـ webpack جنبًا إلى جنب مع الإصدارات الرئيسية الأخيرة من webpack-cli 7 و webpack-dev-middleware 8.
 
-## Bug Fixes
+## إصلاحات الأخطاء
 
-Several bug fixes have been resolved since version [5.105](https://github.com/webpack/webpack/releases/tag/v5.105.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for all the details.
+تم حل العديد من الأخطاء منذ الإصدار [5.105](https://github.com/webpack/webpack/releases/tag/v5.105.0). تحقق من [سجل التغييرات (changelog)](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) للحصول على كل التفاصيل.
 
-## Thanks
+## شكر
 
-A big thank you to all our contributors and [sponsors](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
-who made Webpack 5.106 possible. Your support, whether through code contributions, documentation, or financial sponsorship, helps keep Webpack evolving and improving for everyone.
+شكر كبير لجميع المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
+الذين جعلوا Webpack 5.106 ممكنًا. دعمكم، سواء كان عبر المساهمة بالكود، أو التوثيق، أو الرعاية المالية، يساعد في استمرار تطور وتحسن Webpack للجميع.
\ No newline at end of file
diff --git a/src/content/blog/index.mdx b/src/content/blog/index.mdx
index d546e8920b44..d1f396fdc99d 100644
--- a/src/content/blog/index.mdx
+++ b/src/content/blog/index.mdx
@@ -1,10 +1,11 @@
 ---
-title: Blog
+title: المدونة
 sort: -1
 contributors:
-  - sokra
+  - ameencfw
+  - RlxChap2
 ---
 
-Read here for announcements.
+اقرأ الإعلانات هنا.
 
-See recent blog posts in the side bar.
+شاهد أحدث مقالات المدونة في الشريط الجانبي.
\ No newline at end of file
diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx
index 9f0a1055bd0c..1b5a5f466dac 100644
--- a/src/content/configuration/configuration-languages.mdx
+++ b/src/content/configuration/configuration-languages.mdx
@@ -1,35 +1,23 @@
 ---
-title: Configuration Languages
+title: تخصيص اللغات
 sort: 2
 contributors:
-  - piouson
-  - sokra
-  - skipjack
-  - tarang9211
-  - simon04
-  - peterblazejewicz
-  - youta1119
-  - byzyk
-  - Nek-
-  - liyiming22
-  - daimalou
-  - ChocolateLoverRaj
-  - snitin315
+  - RlxChap2
 ---
 
-Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the [node-interpret](https://github.com/gulpjs/interpret) package. Using [node-interpret](https://github.com/gulpjs/interpret), webpack can handle many different types of configuration files.
+يقبل webpack ملفات تخصيص مكتوبة بعدّة لغات برمجة ولغات بيانات. تجد قائمة بامتدادات الملفات المدعومة في حزمة [node-interpret](https://github.com/gulpjs/interpret). فعبر [node-interpret](https://github.com/gulpjs/interpret)، يستطيع webpack التعامل مع أنواع كثيرة ومختلفة من ملفات التخصيص.
 
 ## TypeScript
 
-To write the webpack configuration in [TypeScript](http://www.typescriptlang.org/), you would first install the necessary dependencies, i.e., TypeScript and the relevant type definitions from the [DefinitelyTyped](https://definitelytyped.org/) project:
+لكتابة تخصيص webpack بلغة [TypeScript](http://www.typescriptlang.org/)، ثبّت أوّلاً الاعتماديات اللازمة، وهي TypeScript وتعريفات الأنواع ذات الصلة من مشروع [DefinitelyTyped](https://definitelytyped.org/):
 
 ```bash
 npm install --save-dev typescript ts-node @types/node
-# and, if using webpack-dev-server < v4.7.0
+# وإن كنت تستخدم webpack-dev-server بإصدار أقل من v4.7.0
 npm install --save-dev @types/webpack-dev-server
 ```
 
-and then proceed to write your configuration:
+ثم ابدأ بكتابة التخصيص:
 
 **webpack.config.ts**
 
@@ -38,7 +26,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 import webpack from "webpack";
-// in case you run into any typescript error when configuring `devServer`
+// في حال واجهتك أخطاء TypeScript عند تخصيص `devServer`
 import "webpack-dev-server";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -69,31 +57,31 @@ export default config;
     "resolveJsonModule": true,
     "isolatedModules": true,
 
-    // Allows you to write `import ... from './file.ts';`
+    // يتيح لك كتابة `import ... from './file.ts';`
     "rewriteRelativeImportExtensions": true
   }
 }
 ```
 
-The above sample assumes version >= 2.7 or newer of TypeScript is used with the new `esModuleInterop` and `allowSyntheticDefaultImports` compiler options in your `tsconfig.json` file.
+يفترض المثال السابق أنّك تستخدم إصدار TypeScript رقم 2.7 أو أحدث، مع تفعيل خياري `esModuleInterop` و `allowSyntheticDefaultImports` في ملف `tsconfig.json`.
 
-We support configuration in both `CommonJS` and `ESM` format.
+ندعم التخصيص بصيغة `CommonJS` و `ESM` معاً.
 
-Starting with v22.18.0 Node.js supports built-in [type stripping](https://nodejs.org/api/typescript.html#type-stripping), so the additional settings described below are only required for older versions.
+بدءاً من الإصدار v22.18.0، أصبح Node.js يدعم [إزالة الأنواع (type stripping)](https://nodejs.org/api/typescript.html#type-stripping) بشكل أصلي، ولذلك فإنّ الإعدادات الإضافية الموضّحة أدناه ليست مطلوبة إلا للإصدارات الأقدم.
 
-> To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties use the flag [--experimental-transform-types](https://nodejs.org/api/cli.html#experimental-transform-types).
+> لتفعيل تحويل صياغات TypeScript غير القابلة للحذف، التي تحتاج إلى توليد شيفرة JavaScript مثل تصريحات `enum` وخصائص المُعاملات (parameter properties)، استخدم الراية [--experimental-transform-types](https://nodejs.org/api/cli.html#experimental-transform-types).
 
-If you are using an older version of Node.js that does not support the `typescript` format, or want to set `module` in `compilerOptions` in `tsconfig.json` to `commonjs` there are three solutions to this issue:
+إذا كنت تستخدم إصداراً أقدم من Node.js لا يدعم صيغة `typescript`، أو أردت ضبط `module` في `compilerOptions` ضمن `tsconfig.json` على `commonjs`، فأمامك ثلاثة حلول لهذه المشكلة:
 
-- Modify `tsconfig.json`.
-- Modify `tsconfig.json` and add settings for `ts-node`.
-- Install `tsconfig-paths`.
+- تعديل `tsconfig.json`.
+- تعديل `tsconfig.json` وإضافة إعدادات خاصة بـ `ts-node`.
+- تثبيت `tsconfig-paths`.
 
-The **first option** is to open your `tsconfig.json` file and look for `compilerOptions`. Set `target` to `"ES5"` and `module` to `"CommonJS"` (or completely remove the `module` option).
+**الحلّ الأول**: افتح ملف `tsconfig.json` وابحث عن `compilerOptions`، ثم اضبط `target` على `"ES5"` و `module` على `"CommonJS"` (أو احذف خيار `module` تماماً).
 
-The **second option** is to add settings for ts-node:
+**الحلّ الثاني**: أضِف إعدادات خاصة بـ ts-node.
 
-You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another build tool, set an override for ts-node. [ts-node config](https://typestrong.org/ts-node/docs/imports/)
+يمكنك إبقاء `"module": "ESNext"` لـ `tsc`، وإن كنت تستعمل webpack أو أداة بناء أخرى، فاضبط قيمة بديلة لـ ts-node. [توثيق إعداد ts-node](https://typestrong.org/ts-node/docs/imports/)
 
 ```json
 {
@@ -108,13 +96,13 @@ You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another
 }
 ```
 
-The **third option** is to install the `tsconfig-paths` package:
+**الحلّ الثالث**: ثبّت حزمة `tsconfig-paths`:
 
 ```bash
 npm install --save-dev tsconfig-paths
 ```
 
-And create a separate TypeScript configuration specifically for your webpack configs:
+ثم أنشئ تخصيصاً مستقلاً لـ TypeScript مخصّصاً لملفات تخصيص webpack:
 
 **tsconfig-for-webpack-config.json**
 
@@ -128,9 +116,9 @@ And create a separate TypeScript configuration specifically for your webpack con
 }
 ```
 
-T> `ts-node` can resolve a `tsconfig.json` file using the environment variable provided by `tsconfig-paths`.
+T> يستطيع `ts-node` تحديد ملف `tsconfig.json` المطلوب عبر متغيّر البيئة الذي توفّره `tsconfig-paths`.
 
-Then set the environment variable `process.env.TS_NODE_PROJECT` provided by `tsconfig-paths` like so:
+ثم اضبط متغيّر البيئة `process.env.TS_NODE_PROJECT` الذي توفّره `tsconfig-paths` على النحو التالي:
 
 **package.json**
 
@@ -142,17 +130,17 @@ Then set the environment variable `process.env.TS_NODE_PROJECT` provided by `tsc
 }
 ```
 
-W> We had been getting reports that `TS_NODE_PROJECT` might not work with `"TS_NODE_PROJECT" unrecognized command` error. Therefore running it with `cross-env` seems to fix the issue, for more info [see this issue](https://github.com/webpack/webpack.js.org/issues/2733).
+W> وردتنا بلاغات بأن `TS_NODE_PROJECT` قد لا يعمل أحياناً ويُظهر الخطأ `"TS_NODE_PROJECT" unrecognized command`. وقد ظهر أنّ تشغيله عبر `cross-env` يحلّ المشكلة. لمزيد من التفاصيل [راجع هذه القضية](https://github.com/webpack/webpack.js.org/issues/2733).
 
 ## CoffeeScript
 
-Similarly, to use [CoffeeScript](https://coffeescript.org/), you would first install the necessary dependencies:
+بالطريقة نفسها، لاستخدام [CoffeeScript](https://coffeescript.org/)، ثبّت أوّلاً الاعتماديات اللازمة:
 
 ```bash
 npm install --save-dev coffeescript
 ```
 
-and then proceed to write your configuration:
+ثم اكتب التخصيص:
 
 **webpack.config.coffee**
 
@@ -185,13 +173,13 @@ config =
 export default config
 ```
 
-## Babel and JSX
+## Babel و JSX
 
-In the example below JSX (React JavaScript Markup) and Babel are used, to create a JSON configuration that webpack can understand.
+في المثال أدناه، يُستخدم JSX (صياغة JavaScript الخاصة بـ React) مع Babel لإنشاء تخصيص بصيغة JSON يستطيع webpack فهمه.
 
-> Courtesy of [Jason Miller](https://twitter.com/_developit)
+> بفضل من [Jason Miller](https://twitter.com/_developit)
 
-First, install the necessary dependencies:
+ثبّت أوّلاً الاعتماديات اللازمة:
 
 ```bash
 npm install --save-dev babel-register jsxobj babel-preset-es2015
@@ -212,7 +200,7 @@ npm install --save-dev babel-register jsxobj babel-preset-es2015
 ```jsx
 import jsxobj from "jsxobj";
 
-// example of an imported plugin
+// مثال على plugin مستورد
 const CustomPlugin = (config) => ({
   ...config,
   name: "custom-plugin",
@@ -236,4 +224,4 @@ export default (
 );
 ```
 
-W> If you are using Babel elsewhere and have `modules` set to `false`, you will have to either maintain two separate `.babelrc` files or use `const jsxobj = require('jsxobj');` and `module.exports` instead of the new `import` and `export` syntax. This is because while Node does support many new ES6 features, they don't yet support ES6 module syntax.
+W> إن كنت تستخدم Babel في أماكن أخرى وضبطت `modules` على `false`، فستضطر إمّا للاحتفاظ بملفَّي `.babelrc` منفصلين، أو استخدام `const jsxobj = require('jsxobj');` و `module.exports` بدلاً من صياغة `import` و `export` الجديدة. ذلك أنّ Node يدعم كثيراً من ميزات ES6 الجديدة، لكنه لا يدعم بعدُ صياغة وحدات ES6.
diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx
index 7236cf8c0f78..0564ce0b264d 100644
--- a/src/content/configuration/index.mdx
+++ b/src/content/configuration/index.mdx
@@ -1,38 +1,21 @@
 ---
-title: Configuration
+title: التخصيص
 sort: 1
 contributors:
-  - sokra
-  - skipjack
-  - grgur
-  - bondz
-  - sricc
-  - terinjokes
-  - mattce
-  - kbariotis
-  - sterlingvix
-  - jeremenichelli
-  - dasarianudeep
-  - lukasgeiter
-  - EugeneHlushko
-  - bigdawggi
-  - anshumanv
-  - textbook
-  - coly010
-  - chenxsan
+  - RlxChap2
 ---
 
-Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is `src/index.js` and will output the result in `dist/main.js` minified and optimized for production.
+خارج الصندوق، لا يُلزمك webpack باستخدام ملف تكوين. غير أنّه سيفترض أنّ نقطة الدخول لمشروعك هي `src/index.js`، وسيُخرج الناتج في `dist/main.js` مُصغَّراً ومُحسَّناً للإنتاج.
 
-Usually, your projects will need to extend this functionality, for this you can create a `webpack.config.js` file in the root folder and webpack will automatically use it.
+عادةً ما تحتاج مشاريعك إلى توسيع هذه الوظائف، ولهذا يمكنك إنشاء ملف `webpack.config.js` في المجلد الجذر، وسيلتقطه webpack تلقائياً.
 
-All the available configuration options are specified below.
+كل خيارات التخصيص المتاحة موضّحة في الأسفل.
 
-T> New to webpack? Check out our guide to some of webpack's [core concepts](/concepts) to get started!
+T> هل أنت جديد على webpack؟ ألقِ نظرة على دليلنا حول [المفاهيم الأساسية](/concepts) لتبدأ منه!
 
-## Use a different configuration file
+## استخدام ملف تكوين مختلف
 
-If for some reason you want to use a different configuration file depending on certain situations, you can change this via command line by using the `--config` flag.
+إن أردت لسبب ما استخدام ملف تكوين مختلف بحسب الموقف، يمكنك تغيير ذلك من سطر الأوامر عبر الراية `--config`.
 
 **package.json**
 
@@ -42,17 +25,17 @@ If for some reason you want to use a different configuration file depending on c
 }
 ```
 
-## Set up a new webpack project
+## تجهيز مشروع webpack جديد
 
-W> webpack applies configuration defaults after [plugins defaults](/contribute/writing-a-plugin/#configuration-defaults) are applied.
+W> يُطبّق webpack القيم الافتراضية للتكوين بعد تطبيق [القيم الافتراضية للـ plugins](/contribute/writing-a-plugin/#configuration-defaults).
 
-Webpack has a huge set of options which might be overwhelming to you, please take advantage of `webpack-cli` starting from version v6.0.0 new tool [create-webpack-app](https://github.com/webpack/webpack-cli/) which could rapidly generate webpack application with specific configuration files for your project requirements, it will ask you a couple of questions before creating a configuration file.
+يحتوي webpack على مجموعة ضخمة من الخيارات قد تكون مربكة بالنسبة لك، لذا استفد من الأداة الجديدة [create-webpack-app](https://github.com/webpack/webpack-cli/) التي يقدّمها `webpack-cli` ابتداءً من الإصدار v6.0.0، وهي تُولّد لك تطبيق webpack بسرعة، بملفات تكوين تناسب متطلبات مشروعك. ستطرح عليك بضعة أسئلة قبل أن تُنشئ ملف التخصيص.
 
 ```bash
 npx create-webpack-app [command] [options]
 ```
 
-npx might prompt you to install `create-webpack-app` if it is not yet installed in the project or globally. You might also get additional packages installed to your project depending on the choices you've made during the new webpack application generation.
+قد يطلب منك npx تثبيت `create-webpack-app` إن لم يكن مثبَّتاً في المشروع أو على المستوى العام. وقد تُضاف إلى مشروعك حزم إضافية تبعاً للخيارات التي ستختارها أثناء توليد التطبيق الجديد.
 
 ```bash
 $ npx create-webpack-app init

From e7ae69eb4087c1a54f702798948c6b91b13fa8e1 Mon Sep 17 00:00:00 2001
From: !? ReLaX <133292635+RlxChap2@users.noreply.github.com>
Date: Tue, 19 May 2026 16:54:16 +0300
Subject: [PATCH 02/35] docs(configuration): translate configuration pages

Translate webpack configuration documentation pages to Arabic while preserving MDX structure.
---
 src/content/configuration/cache.mdx           | 165 ++--
 .../configuration/configuration-languages.mdx |   4 +-
 .../configuration/configuration-types.mdx     |  58 +-
 src/content/configuration/dev-server.mdx      | 402 ++++----
 src/content/configuration/devtool.mdx         | 183 ++--
 src/content/configuration/dotenv.mdx          | 137 ++-
 src/content/configuration/entry-context.mdx   |  78 +-
 src/content/configuration/experiments.mdx     | 211 ++--
 .../extending-configurations.mdx              |  41 +-
 src/content/configuration/externals.mdx       | 263 +++--
 src/content/configuration/index.mdx           |  12 +-
 .../configuration/infrastructureLogging.mdx   |  34 +-
 src/content/configuration/mode.mdx            |  41 +-
 src/content/configuration/module.mdx          | 874 ++++++++---------
 src/content/configuration/node.mdx            |  70 +-
 src/content/configuration/optimization.mdx    | 283 +++---
 src/content/configuration/other-options.mdx   | 185 ++--
 src/content/configuration/output.mdx          | 927 +++++++++---------
 src/content/configuration/performance.mdx     |  42 +-
 src/content/configuration/plugins.mdx         |  27 +-
 src/content/configuration/resolve.mdx         | 298 +++---
 src/content/configuration/stats.mdx           | 278 +++---
 src/content/configuration/target.mdx          |  88 +-
 src/content/configuration/watch.mdx           |  83 +-
 24 files changed, 2270 insertions(+), 2514 deletions(-)

diff --git a/src/content/configuration/cache.mdx b/src/content/configuration/cache.mdx
index 0a1bba4fcf90..1f4e998132ec 100644
--- a/src/content/configuration/cache.mdx
+++ b/src/content/configuration/cache.mdx
@@ -2,24 +2,22 @@
 title: Cache
 sort: 12
 contributors:
-  - snitin315
-  - chenxsan
-  - shivxmsharma
+  - RlxChap2
 ---
 
 ## cache
 
 `boolean` `object`
 
-Cache the generated webpack modules and chunks to improve build speed. `cache: true` is an alias to `cache: { type: 'memory' }`. To disable caching pass `false`:
+يُخزِّن وحدات webpack و chunks المُولَّدة في الذاكرة المؤقَّتة لتحسين سرعة البناء. `cache: true` اختصارٌ لـ `cache: { type: 'memory' }`. ولتعطيل التخزين المؤقَّت مرِّر `false`:
 
-The default value of `cache` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `cache` على [`mode`](/configuration/mode/):
 
-| Mode            | Default              |
+| Mode            | الافتراضي               |
 | --------------- | -------------------- |
-| `"production"`  | `false`              |
+| `"production"` | `false` |
 | `"development"` | `{ type: 'memory' }` |
-| `"none"`        | `false`              |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -30,21 +28,21 @@ export default {
 };
 ```
 
-While setting `cache.type` to `'filesystem'` opens up more options for configuration.
+أمّا ضبط `cache.type` على `'filesystem'` فيفتح أمامك خيارات تخصيص أكثر.
 
 ### cache.allowCollectingMemory
 
-Collect unused memory allocated during deserialization, only available when [`cache.type`](#cachetype) is set to `'filesystem'`. This requires copying data into smaller buffers and has a performance cost.
+اجمع الذاكرة غير المستعمَلة التي خُصِّصت أثناء فكّ التسلسل (deserialization)، وهو خيار لا يتوفّر إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`. ويتطلّب نسخ البيانات إلى buffers أصغر، وله تكلفته على الأداء.
 
-- Type: `boolean`
+- النوع: `boolean`
 
-The default value of `cache.allowCollectingMemory` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `cache.allowCollectingMemory` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `false` |
-| `"development"` | `true`  |
-| `"none"`        | `false` |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `false` |
 
 - <Badge text="5.35.0+" />
 
@@ -63,11 +61,11 @@ export default {
 
 `object`
 
-`cache.buildDependencies` is an object of arrays of additional code dependencies for the build. Webpack will use a hash of each of these items and all dependencies to invalidate the filesystem cache.
+`cache.buildDependencies` كائن يحوي مصفوفات من اعتماديات الشيفرة الإضافية للبناء. يستعمل webpack hash لكلّ عنصر منها مع كلّ اعتمادياتها لإبطال الذاكرة المؤقَّتة على نظام الملفّات.
 
-Defaults to `webpack/lib` to get all dependencies of webpack.
+القيمة الافتراضية هي `webpack/lib` لجلب كلّ اعتماديات webpack.
 
-T> It's recommended to set `cache.buildDependencies.config: [__filename]` in your webpack configuration to get the latest configuration and all dependencies.
+T> يُستحسَن ضبط `cache.buildDependencies.config: [__filename]` في تخصيصك حتى تحصل دائماً على أحدث تخصيص وكلّ اعتمادياته.
 
 **webpack.config.js**
 
@@ -80,9 +78,9 @@ const __filename = fileURLToPath(import.meta.url);
 export default {
   cache: {
     buildDependencies: {
-      // This makes all dependencies of this file - build dependencies
+      // هذا يجعل كلّ اعتماديات هذا الملفّ اعتماديات بناء
       config: [__filename],
-      // By default webpack and loaders are build dependencies
+      // افتراضياً، يُعدّ webpack والـ loaders اعتماديات بناء
     },
   },
 };
@@ -92,9 +90,9 @@ export default {
 
 `string`
 
-Base directory for the cache. Defaults to `node_modules/.cache/webpack`.
+المجلَّد الأساسي للذاكرة المؤقَّتة. القيمة الافتراضية هي `node_modules/.cache/webpack`.
 
-`cache.cacheDirectory` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.cacheDirectory` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -114,13 +112,13 @@ export default {
 };
 ```
 
-W> The final location of the cache is a combination of `cache.cacheDirectory` + `cache.name`.
+W> الموقع النهائي للذاكرة المؤقَّتة هو حصيلة جمع `cache.cacheDirectory` و `cache.name`.
 
 ### cache.cacheLocation
 
 `string`
 
-Locations for the cache. Defaults to `path.resolve(cache.cacheDirectory, cache.name)`.
+موقع الذاكرة المؤقَّتة. القيمة الافتراضية هي `path.resolve(cache.cacheDirectory, cache.name)`.
 
 **webpack.config.js**
 
@@ -142,9 +140,9 @@ export default {
 
 ### cache.cacheUnaffected
 
-Cache computation of modules which are unchanged and reference only unchanged modules. It can only be used along with [`cache.type`](#cachetype) of `'memory'`, besides, [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) must be enabled to use it.
+يُخزِّن في الذاكرة المؤقَّتة حساب الوحدات التي لم تتغيّر، والتي تُشير إلى وحدات لم تتغيّر هي الأخرى. ولا يمكن استعماله إلا مع [`cache.type`](#cachetype) المضبوطة على `'memory'`، فضلاً عن ذلك يلزم تفعيل [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) قبل استعماله.
 
-- Type: `boolean`
+- النوع: `boolean`
 - v5.54.0+
 
 **webpack.config.js**
@@ -165,9 +163,9 @@ export default {
 
 <Badge text="5.42.0+" />
 
-Compression type used for the cache files. By default it is `false`.
+نوع الضغط المستعمَل لملفّات الذاكرة المؤقَّتة. القيمة الافتراضية `false`.
 
-`cache.compression` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.compression` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -185,9 +183,9 @@ export default {
 
 `string`
 
-Algorithm used the hash generation. See [Node.js crypto](https://nodejs.org/api/crypto.html) for more details. Defaults to `md4`.
+الخوارزمية المستعمَلة لتوليد الـ hash. اطّلع على [Node.js crypto](https://nodejs.org/api/crypto.html) لمزيد من التفاصيل. القيمة الافتراضية `md4`.
 
-`cache.hashAlgorithm` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.hashAlgorithm` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -205,9 +203,9 @@ export default {
 
 `number = 60000`
 
-Time in milliseconds. `cache.idleTimeout` denotes the time period after which the cache storing should happen.
+الزمن بالميلي ثانية. يُحدِّد `cache.idleTimeout` المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة.
 
-`cache.idleTimeout` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.idleTimeout` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -227,9 +225,9 @@ export default {
 
 <Badge text="5.41.0+" />
 
-Time in milliseconds. `cache.idleTimeoutAfterLargeChanges` is the time period after which the cache storing should happen when larger changes have been detected.
+الزمن بالميلي ثانية. `cache.idleTimeoutAfterLargeChanges` هو المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة عند رصد تغييرات كبيرة.
 
-`cache.idleTimeoutAfterLargeChanges` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.idleTimeoutAfterLargeChanges` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -247,9 +245,9 @@ export default {
 
 `number = 5000`
 
-Time in milliseconds. `cache.idleTimeoutForInitialStore` is the time period after which the initial cache storing should happen.
+الزمن بالميلي ثانية. `cache.idleTimeoutForInitialStore` هو المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة الأوّل.
 
-`cache.idleTimeoutForInitialStore` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.idleTimeoutForInitialStore` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -267,9 +265,9 @@ export default {
 
 `[string] = ['./node_modules']`
 
-W> Moved to [snapshot.managedPaths](/configuration/other-options/#managedpaths)
+W> نُقل إلى [snapshot.managedPaths](/configuration/other-options/#managedpaths)
 
-`cache.managedPaths` is an array of package-manager only managed paths. Webpack will avoid hashing and timestamping them, assume the version is unique and will use it as a snapshot (for both memory and filesystem cache).
+`cache.managedPaths` مصفوفة من المسارات التي لا يديرها سوى مدير حزم. وسيتجنّب webpack عمل hash أو timestamp لها، ويفترض أنّ الإصدار فريد، وسيستعمله بوصفه لقطة (سواء للذاكرة المؤقَّتة في الذاكرة أو على نظام الملفّات).
 
 ### cache.maxAge
 
@@ -277,9 +275,9 @@ W> Moved to [snapshot.managedPaths](/configuration/other-options/#managedpaths)
 
 <Badge text="5.30.0+" />
 
-The amount of time in milliseconds that unused cache entries are allowed to stay in the filesystem cache; defaults to one month.
+المدّة بالميلي ثانية التي يُسمح فيها لمدخلات الذاكرة المؤقَّتة غير المستعمَلة بالبقاء في ذاكرة نظام الملفّات؛ القيمة الافتراضية شهر واحد.
 
-`cache.maxAge` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.maxAge` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -299,13 +297,12 @@ export default {
 
 <Badge text="5.30.0+" />
 
-Define the lifespan of unused cache entries in the memory cache.
+عرِّف عمر مدخلات الذاكرة المؤقَّتة غير المستعمَلة في ذاكرة الـ memory.
 
-- `cache.maxGenerations: 1`: Cache entries are removed after being unused for a single compilation.
+- `cache.maxGenerations: 1`: تُحذَف مدخلات الذاكرة المؤقَّتة بعد عدم استعمالها لعملية تصريف واحدة.
+- `cache.maxGenerations: Infinity`: تُحفظ المدخلات إلى الأبد.
 
-- `cache.maxGenerations: Infinity`: Cache entries are kept forever.
-
-`cache.maxGenerations` option is only available when [`cache.type`](#cachetype) is set to `'memory'`.
+لا يتوفّر الخيار `cache.maxGenerations` إلا حين يُضبط [`cache.type`](#cachetype) على `'memory'`.
 
 **webpack.config.js**
 
@@ -325,21 +322,19 @@ export default {
 
 <Badge text="5.30.0+" />
 
-Define the lifespan of unused cache entries in the memory cache.
-
-- `cache.maxMemoryGenerations: 0`: Persistent cache will not use an additional memory cache. It will only cache items in memory until they are serialized to disk. Once serialized the next read will deserialize them from the disk again. This mode will minimize memory usage but introduce a performance cost.
-
-- `cache.maxMemoryGenerations: 1`: This will purge items from the memory cache once they are serialized and unused for at least one compilation. When they are used again they will be deserialized from the disk. This mode will minimize memory usage while still keeping active items in the memory cache.
+عرِّف عمر مدخلات الذاكرة المؤقَّتة غير المستعمَلة في ذاكرة الـ memory.
 
-- `cache.maxMemoryGenerations`: small numbers > 0 will have a performance cost for the GC operation. It gets lower as the number increases.
+- `cache.maxMemoryGenerations: 0`: لن تستعمل الذاكرة المؤقَّتة الدائمة (persistent cache) ذاكرة memory إضافية. ولن تُخزِّن العناصر في الذاكرة إلا إلى حين تسلسلها (serialize) إلى القرص. وحين تُقرأ مجدَّداً ستُفكّ من القرص. هذا الوضع يُقلِّص استعمال الذاكرة إلى أدنى حدّ، لكنه يأتي بكلفة على الأداء.
+- `cache.maxMemoryGenerations: 1`: سيُنظِّف العناصر من ذاكرة الـ memory بمجرّد تسلسلها وعدم استعمالها لعملية تصريف واحدة على الأقلّ. وحين تُستعمَل مجدَّداً، ستُفكّ من القرص. هذا الوضع يُقلِّص استعمال الذاكرة مع الإبقاء على العناصر النشطة في ذاكرة الـ memory.
+- `cache.maxMemoryGenerations`: الأرقام الصغيرة الأكبر من 0 ستحمل كلفة على الأداء بسبب عملية الـ GC. وتقلّ هذه الكلفة كلّما زاد الرقم.
 
-The default value of `cache.maxMemoryGenerations` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `cache.maxMemoryGenerations` على [`mode`](/configuration/mode/):
 
-| Mode            | Default    |
+| Mode            | الافتراضي    |
 | --------------- | ---------- |
-| `"production"`  | `Infinity` |
-| `"development"` | `5`        |
-| `"none"`        | `Infinity` |
+| `"production"` | `Infinity` |
+| `"development"` | `5` |
+| `"none"` | `Infinity` |
 
 **webpack.config.js**
 
@@ -355,9 +350,9 @@ export default {
 
 ### cache.memoryCacheUnaffected
 
-Cache computation of modules which are unchanged and reference only unchanged modules in memory. It can only be used along with [`cache.type`](#cachetype) of `'filesystem'`, besides, [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) must be enabled to use it.
+يُخزِّن في ذاكرة الـ memory حساب الوحدات التي لم تتغيّر، والتي تُشير إلى وحدات لم تتغيّر هي الأخرى. ولا يمكن استعماله إلا مع [`cache.type`](#cachetype) المضبوطة على `'filesystem'`، فضلاً عن ذلك يلزم تفعيل [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) قبل استعماله.
 
-- Type: `boolean`
+- النوع: `boolean`
 - v5.54.0+
 
 **webpack.config.js**
@@ -376,9 +371,9 @@ export default {
 
 `string`
 
-Name for the cache. Different names will lead to different coexisting caches. Defaults to `${config.name}-${config.mode}`. Using `cache.name` makes sense when you have multiple configurations which should have independent caches.
+اسم الذاكرة المؤقَّتة. الأسماء المختلفة تؤدّي إلى ذاكرات مؤقَّتة متعايشة. القيمة الافتراضية هي `${config.name}-${config.mode}`. ويُجدي `cache.name` نفعاً حين يكون لديك عدّة تخصيصات ينبغي أن يكون لكلّ منها ذاكرة مؤقَّتة مستقلّة.
 
-`cache.name` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.name` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -396,7 +391,7 @@ export default {
 
 `boolean = false`
 
-Track and log detailed timing information for individual cache items of type `'filesystem'`.
+يتعقّب ويُسجِّل معلومات زمنية تفصيلية لكلّ عنصر في الذاكرة المؤقَّتة من نوع `'filesystem'`.
 
 **webpack.config.js**
 
@@ -414,7 +409,7 @@ export default {
 
 `boolean` <Badge text='5.85.0' />
 
-Prevent webpack from storing cache into file system. Only available when `cache.type === "filesystem"` and `cache.store === 'pack'`.
+يمنع webpack من حفظ الذاكرة المؤقَّتة في نظام الملفّات. لا يتوفّر إلا حين تكون `cache.type === "filesystem"` و `cache.store === 'pack'`.
 
 ```js
 export default {
@@ -431,13 +426,13 @@ export default {
 
 `string = 'pack': 'pack'`
 
-`cache.store` tells webpack when to store data on the file system.
+يُخبر `cache.store` webpack متى يحفظ البيانات في نظام الملفّات.
 
-- `'pack'`: Store data when compiler is idle in a single file for all cached items
+- `'pack'`: احفظ البيانات حين يكون المُصرِّف خاملاً في ملفّ واحد يضمّ كلّ العناصر المُخزَّنة مؤقَّتاً.
 
-`cache.store` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.store` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
-W> `pack` is the only supported mode since webpack 5.0.x
+W> الوضع `pack` هو الوضع الوحيد المدعوم منذ webpack 5.0.x
 
 **webpack.config.js**
 
@@ -455,7 +450,7 @@ export default {
 
 `string: 'memory' | 'filesystem'`
 
-Sets the `cache` type to either in memory or on the file system. The `memory` option is straightforward, it tells webpack to store cache in memory and doesn't allow additional configuration:
+يضبط نوع `cache` ليكون في الذاكرة أو على نظام الملفّات. الخيار `memory` بسيط ومباشر، فهو يُخبر webpack بحفظ الذاكرة المؤقَّتة في الذاكرة، ولا يسمح بأيّ تخصيص إضافي:
 
 **webpack.config.js**
 
@@ -472,9 +467,9 @@ export default {
 
 `string = ''`
 
-Version of the cache data. Different versions won't allow to reuse the cache and override existing content. Update the version when configuration changed in a way which doesn't allow to reuse cache. This will invalidate the cache.
+إصدار بيانات الذاكرة المؤقَّتة. لا تسمح الإصدارات المختلفة بإعادة استعمال الذاكرة المؤقَّتة، وتكتب فوق المحتوى القائم. حدِّث الإصدار حين يتغيّر تخصيصك تغيُّراً لا يسمح بإعادة استعمال الذاكرة المؤقَّتة، وهو ما يُبطل الذاكرة المؤقَّتة.
 
-`cache.version` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.version` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
 
 **webpack.config.js**
 
@@ -488,44 +483,44 @@ export default {
 };
 ```
 
-W> Don't share the cache between calls with different options.
+W> لا تُشارك الذاكرة المؤقَّتة بين استدعاءات بخيارات مختلفة.
 
-## Setup cache in CI/CD system
+## ضبط الذاكرة المؤقَّتة في أنظمة CI/CD
 
-Filesystem cache allows to share cache between builds in CI. To setup cache:
+تتيح ذاكرة نظام الملفّات المؤقَّتة مشاركة الذاكرة المؤقَّتة بين البُنى في CI. ولضبطها:
 
-- CI should have an option to share cache between builds.
-- CI should run job in the same absolute path. This is important since webpack cache files store absolute paths.
+- يجب أن يدعم نظام الـ CI خيار مشاركة الذاكرة المؤقَّتة بين البُنى.
+- يجب أن يُشغِّل الـ CI المهمّة في نفس المسار المطلق، إذ أنّ ملفّات الذاكرة المؤقَّتة في webpack تحفظ مسارات مطلقة.
 
 ### GitLab CI/CD
 
-Common config could looks like
+قد يبدو التخصيص المعتاد كالآتي:
 
 ```yaml
 variables:
-  # fallback to use "main" branch cache, requires GitLab Runner 13.4
+  # العودة إلى ذاكرة فرع "main" المؤقَّتة، تتطلّب GitLab Runner 13.4
   CACHE_FALLBACK_KEY: main
 
-# this is webpack build job
+# هذه مهمّة بناء webpack
 build-job:
   cache:
-    key: "$CI_COMMIT_REF_SLUG" # branch/tag name
+    key: "$CI_COMMIT_REF_SLUG" # اسم الفرع أو الوسم
     paths:
-      # cache directory
-      # make sure that you don't run "npm ci" in this job or change default cache directory
-      # otherwise "npm ci" will prune cache files
+      # مجلَّد الذاكرة المؤقَّتة
+      # تأكّد ألا تُشغِّل "npm ci" في هذه المهمّة ولا أن تُغيِّر مجلَّد الذاكرة المؤقَّتة الافتراضي
+      # وإلا فإنّ "npm ci" سيحذف ملفّات الذاكرة المؤقَّتة
       - node_modules/.cache/webpack/
 ```
 
-### Github actions
+### إجراءات جيثب
 
 ```yaml
 - uses: actions/cache@v3
   with:
-    # cache directory
+    # مجلَّد الذاكرة المؤقَّتة
     path: node_modules/.cache/webpack/
     key: ${{ GITHUB_REF_NAME }}-webpack-build
-    # fallback to use "main" branch cache
+    # العودة إلى ذاكرة فرع "main" المؤقَّتة
     restore-keys: |
       main-webpack-build
 ```
diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx
index 1b5a5f466dac..d321b3f74f08 100644
--- a/src/content/configuration/configuration-languages.mdx
+++ b/src/content/configuration/configuration-languages.mdx
@@ -1,5 +1,5 @@
 ---
-title: تخصيص اللغات
+title: لغات التخصيص
 sort: 2
 contributors:
   - RlxChap2
@@ -132,7 +132,7 @@ T> يستطيع `ts-node` تحديد ملف `tsconfig.json` المطلوب عب
 
 W> وردتنا بلاغات بأن `TS_NODE_PROJECT` قد لا يعمل أحياناً ويُظهر الخطأ `"TS_NODE_PROJECT" unrecognized command`. وقد ظهر أنّ تشغيله عبر `cross-env` يحلّ المشكلة. لمزيد من التفاصيل [راجع هذه القضية](https://github.com/webpack/webpack.js.org/issues/2733).
 
-## CoffeeScript
+## كوفي سكريبت
 
 بالطريقة نفسها، لاستخدام [CoffeeScript](https://coffeescript.org/)، ثبّت أوّلاً الاعتماديات اللازمة:
 
diff --git a/src/content/configuration/configuration-types.mdx b/src/content/configuration/configuration-types.mdx
index e8767839ca54..7af6f1caa370 100644
--- a/src/content/configuration/configuration-types.mdx
+++ b/src/content/configuration/configuration-types.mdx
@@ -1,28 +1,18 @@
 ---
-title: Configuration Types
+title: أنواع التخصيص
 sort: 3
 contributors:
-  - sokra
-  - skipjack
-  - kbariotis
-  - simon04
-  - fadysamirsadek
-  - byzyk
-  - EugeneHlushko
-  - dhurlburtusa
-  - anshumanv
-  - thorn0
-  - tusharthakur04
+  - RlxChap2
 ---
 
-Besides exporting a single configuration object, there are a few more ways that cover other needs as well.
+إلى جانب تصدير كائن تخصيص واحد، هناك طرق أخرى تغطّي احتياجات مختلفة.
 
-## Exporting a Function
+## تصدير دالّة
 
-Eventually you will find the need to disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production). There are multiple ways to do that. One option is to export a function from your webpack configuration instead of exporting an object. The function will be invoked with two arguments:
+ستجد عاجلاً أم آجلاً حاجة إلى التمييز داخل `webpack.config.js` بين [بناء التطوير](/guides/development) و[بناء الإنتاج](/guides/production). وثمّة طرق متعددة لذلك. من بينها أن تُصدّر دالّة من ملف تخصيص webpack بدلاً من تصدير كائن. سيتمّ استدعاء هذه الدالّة بمعاملين:
 
-- An environment as the first parameter. See the [environment options CLI documentation](/api/cli/#environment-options) for syntax examples.
-- An options map (`argv`) as the second parameter. This describes the options passed to webpack, with keys such as [`output-path`](/api/cli/#flags) and [`mode`](/api/cli/#flags).
+- بيئة (environment) بوصفها المعامل الأول. راجع [توثيق خيارات البيئة في الـ CLI](/api/cli/#environment-options) لأمثلة على الصياغة.
+- خريطة خيارات (`argv`) بوصفها المعامل الثاني. تصف هذه الخريطة الخيارات الممرَّرة إلى webpack، بمفاتيح مثل [`output-path`](/api/cli/#flags) و[`mode`](/api/cli/#flags).
 
 ```diff
 -export default {
@@ -33,7 +23,7 @@ Eventually you will find the need to disambiguate in your `webpack.config.js` be
      plugins: [
        new MinimizerPlugin({
          minimizerOptions: {
-+          compress: argv.mode === 'production' // only if `--mode production` was passed
++          compress: argv.mode === 'production' // فقط في حال تمرير `--mode production`
          }
        })
      ]
@@ -41,11 +31,11 @@ Eventually you will find the need to disambiguate in your `webpack.config.js` be
 };
 ```
 
-## Exporting a Promise
+## تصدير Promise
 
-Webpack will run the function exported by the configuration file and wait for a Promise to be returned. Handy when you need to asynchronously load configuration variables.
+سيُشغّل webpack الدالّة المُصدَّرة من ملف التخصيص، وينتظر منها إرجاع Promise. وهذا مفيد حين تحتاج إلى تحميل متغيّرات التخصيص بشكل غير متزامن.
 
-T> It is possible to export multiple promises by wrapping them into `Promise.all([/* Your promises */]).`
+T> يمكنك تصدير عدّة Promises عبر تغليفها داخل `Promise.all([/* Promises الخاصة بك */])`.
 
 ```js
 export default () =>
@@ -59,11 +49,11 @@ export default () =>
   });
 ```
 
-W> Returning a `Promise` only works when using webpack via CLI. [`webpack()`](/api/node/#webpack) expects an object.
+W> إرجاع `Promise` يعمل فقط حين تستخدم webpack عبر الـ CLI. أمّا [`webpack()`](/api/node/#webpack) فيتوقّع كائناً.
 
-## Exporting multiple configurations
+## تصدير تخصيصات متعددة
 
-Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built. For instance, this is useful for [bundling a library](/guides/author-libraries) for multiple [targets](/configuration/output/#outputlibrarytarget) such as AMD and CommonJS:
+عوضاً عن تصدير كائن أو دالّة تخصيص واحدة، يمكنك تصدير عدّة تخصيصات (وقد دُعمت الدوال المتعددة منذ webpack 3.1.0). وعند تشغيل webpack، تُبنى كل التخصيصات معاً. وهذا مفيد مثلاً عند [حزم مكتبة](/guides/author-libraries) لعدّة [أهداف (targets)](/configuration/output/#outputlibrarytarget) كـ AMD و CommonJS:
 
 ```js
 export default [
@@ -88,11 +78,11 @@ export default [
 ];
 ```
 
-T> If you pass a name to [`--config-name`](/api/cli/#config-name) flag, webpack will only build that specific configuration.
+T> لو مرّرت اسماً إلى الراية [`--config-name`](/api/cli/#config-name)، فلن يبني webpack إلا التخصيص المطابق لذلك الاسم فقط.
 
 ### dependencies
 
-In case you have a configuration that depends on the output of another configuration, you can specify a list of dependencies using the [`dependencies`](/configuration/other-options/#dependencies) array.
+إن كان لديك تخصيص يعتمد على ناتج تخصيص آخر، فيمكنك تحديد قائمة بالاعتماديات عبر مصفوفة [`dependencies`](/configuration/other-options/#dependencies).
 
 **webpack.config.js**
 
@@ -111,26 +101,24 @@ export default [
 ];
 ```
 
-### parallelism
+### التوازي
 
-In case you export multiple configurations, you can use the `parallelism` option on the configuration array to specify the maximum number of compilers that will compile in parallel.
+عند تصدير تخصيصات متعددة، يمكنك استخدام الخيار `parallelism` على مصفوفة التخصيصات لتحديد الحدّ الأقصى لعدد الـ compilers التي ستعمل بالتوازي.
 
-- Type: `number`
-- Available: 5.22.0+
+- النوع: `number`
+- متاح: 5.22.0+
 
 **webpack.config.js**
 
 ```js
 const config = [
   {
-    // config-1
+    // التخصيص-1
   },
   {
-    // config-2
+    // التخصيص-2
   },
 ];
-
 config.parallelism = 1;
-
 export default config;
-```
+```
\ No newline at end of file
diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx
index 364c17f99bbe..6b8fda6134cb 100644
--- a/src/content/configuration/dev-server.mdx
+++ b/src/content/configuration/dev-server.mdx
@@ -2,40 +2,20 @@
 title: DevServer
 sort: 11
 contributors:
-  - sokra
-  - skipjack
-  - spacek33z
-  - charlespwd
-  - orteth01
-  - byzyk
-  - EugeneHlushko
-  - Yiidiir
-  - Loonride
-  - dmohns
-  - EslamHiko
-  - digitaljohn
-  - bhavya9107
-  - wizardofhogwarts
-  - jamesgeorge007
-  - g100g
-  - anikethsaha
-  - snitin315
-  - Biki-das
-  - SaulSilver
-  - malcolm-kee
+  - RlxChap2
 ---
 
-[webpack-dev-server](https://github.com/webpack/webpack-dev-server) can be used to quickly develop an application. See the [development guide](/guides/development/) to get started.
+يمكن استخدام [webpack-dev-server](https://github.com/webpack/webpack-dev-server) لتطوير التطبيق بسرعة. راجع [دليل التطوير](/guides/development/) للبدء.
 
-This page describes the options that affect the behavior of webpack-dev-server (short: dev-server) <Badge text="version >= 5.0.0" />. Migration guide from `v4` to `v5` can be found [here](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md).
+تصف هذه الصفحة الخيارات التي تؤثر على سلوك webpack-dev-server (باختصار: dev-server) <Badge text="version >= 5.0.0" />. يمكن العثور على دليل الترحيل من `v4` إلى `v5` [هنا](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md).
 
-W> `webpack-dev-server v5.0.0+` requires `node >= v18.12.0`, `webpack >= v5.0.0` and `webpack-cli >= v4.7.0`, we recommend using the latest version.
+W> `webpack-dev-server v5.0.0+` يتطلب `Node.js >= v18.12.0`، `webpack >= v5.0.0` و`webpack-cli >= v4.7.0`، نوصي باستخدام أحدث إصدار.
 
 ## devServer
 
 `object`
 
-This set of options is picked up by [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our `public/` directory in the project root:
+يلتقط [webpack-dev-server](https://github.com/webpack/webpack-dev-server) مجموعة الخيارات هذه، ويمكنك استخدامها لتغيير سلوكه بطرق مختلفة. في المثال البسيط التالي نفعّل ضغط gzip ونخدم كل شيء من دليل `public/` في جذر المشروع:
 
 **webpack.config.js**
 
@@ -58,7 +38,7 @@ export default {
 };
 ```
 
-When the server is started, there will be a message prior to the list of resolved modules:
+عند بدء تشغيل server، ستكون هناك رسالة قبل قائمة الحلول modules:
 
 ```bash
 <i> [webpack-dev-server] Project is running at:
@@ -68,41 +48,41 @@ When the server is started, there will be a message prior to the list of resolve
 <i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory
 ```
 
-that will give some background on where the server is located and what it's serving.
+سيعطي ذلك بعض المعلومات الأساسية عن مكان وجود server وما الذي يقدمه.
 
-If you're using dev-server through the Node.js API, the options in `devServer` will be ignored. Pass the options as the first parameter instead: `new WebpackDevServer({...}, compiler)`. [See here](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) for an example of how to use webpack-dev-server through the Node.js API.
+إذا كنت تستخدم dev-server من خلال Node.js API، فسيتم تجاهل الخيارات الموجودة في `devServer`. قم بتمرير الخيارات كمعلمة أولى بدلاً من ذلك: `new WebpackDevServer({...}, compiler)`. [انظر هنا](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) للحصول على مثال حول كيفية استخدام webpack-dev-server من خلال Node.js API.
 
-W> You cannot use the second `compiler` argument (a callback) when using `WebpackDevServer`.
+W> لا يمكنك استخدام الوسيطة `compiler` الثانية (رد الاتصال) عند استخدام `WebpackDevServer`.
 
-W> Be aware that when [exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations) only the `devServer` options for the first configuration will be taken into account and used for all the configurations in the array.
+W> انتبه إلى أنه عند [تصدير تخصيصات متعددة](/configuration/configuration-types/#exporting-multiple-configurations) سيتم أخذ خيارات `devServer` فقط للتخصيص الأول في الاعتبار واستخدامها لجميع التخصيصات في array.
 
-T> If you're having trouble, navigating to the `/webpack-dev-server` route will show where files are served. For example, `http://localhost:9000/webpack-dev-server`.
+T> إذا كنت تواجه مشكلة، فإن الانتقال إلى المسار `/webpack-dev-server` سيُظهر مكان تقديم الملفات. على سبيل المثال، `http://localhost:9000/webpack-dev-server`.
 
-T> If you want to manually recompile the bundle, navigating to the `/webpack-dev-server/invalidate` route will [invalidate](/api/node/#invalidate-watching) the current compilation of the bundle and recompile it for you via [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate). Depending on your configuration, the URL may look like `http://localhost:9000/webpack-dev-server/invalidate`.
+T> إذا كنت تريد إعادة ترجمة bundle يدويًا، فإن الانتقال إلى المسار `/webpack-dev-server/invalidate` سيؤدي إلى [إبطال](/api/node/#invalidate-watching) compilation الحالي لـ bundle وإعادة ترجمته لك عبر [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate). اعتمادًا على التخصيص الذي قمت به، قد يبدو عنوان URL بالشكل `http://localhost:9000/webpack-dev-server/invalidate`.
 
-T> HTML template is required to serve the bundle, usually, it is an `index.html` file. Make sure that script references are added into HTML, webpack-dev-server doesn't inject them automatically.
+T> يلزم وجود HTML template لخدمة bundle، ويكون عادةً ملف `index.html`. تأكد من إضافة مراجع `<script>` إلى HTML؛ فـ webpack-dev-server لا يضيفها تلقائيًا.
 
-### Usage via CLI
+### الاستخدام عبر CLI
 
-You can invoke webpack-dev-server via CLI by:
+يمكنك استدعاء webpack-dev-server عبر CLI عن طريق:
 
 ```bash
 npx webpack serve
 ```
 
-A list of CLI options for `serve` is available [here](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md)
+تتوفر قائمة بخيارات CLI لـ `serve` [هنا](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md)
 
-### Usage via API
+### الاستخدام عبر API
 
-While it's recommended to run `webpack-dev-server` via the CLI, you may also choose to start a server via the API.
+بينما يوصى بتشغيل `webpack-dev-server` عبر CLI، يمكنك أيضًا اختيار بدء server عبر API.
 
-See the related [API documentation for `webpack-dev-server`](/api/webpack-dev-server/).
+راجع وثائق [API ذات الصلة بـ `webpack-dev-server`](/api/webpack-dev-server/).
 
 ## devServer.app
 
 `function`
 
-Allows you to use custom server applications, such as `connect`, `fastify`, etc. The default application used is `express`.
+يسمح لك باستخدام تطبيقات server المخصصة، مثل `connect`، `fastify`، وما إلى ذلك. التطبيق الافتراضي المستخدم هو `express`.
 
 **webpack.config.js**
 
@@ -121,7 +101,7 @@ export default {
 
 `'auto' | 'all'` `[string]`
 
-This option allows you to allowlist services that are allowed to access the dev server.
+يتيح لك هذا الخيار إدراج الخدمات المسموح لها بالوصول إلى server في القائمة المسموح بها.
 
 **webpack.config.js**
 
@@ -139,7 +119,7 @@ export default {
 };
 ```
 
-Mimicking Django's `ALLOWED_HOSTS`, a value beginning with `.` can be used as a subdomain wildcard. `.host.com` will match `host.com`, `www.host.com`, and any other subdomain of `host.com`.
+لتقليد `ALLOWED_HOSTS` الخاص بـ Django، يمكن استخدام القيمة التي تبدأ بـ `.` كحرف بدل للنطاق الفرعي. سوف يتطابق `.host.com` مع `host.com` و`www.host.com` وأي نطاق فرعي آخر لـ `host.com`.
 
 **webpack.config.js**
 
@@ -147,21 +127,21 @@ Mimicking Django's `ALLOWED_HOSTS`, a value beginning with `.` can be used as a
 export default {
   // ...
   devServer: {
-    // this achieves the same effect as the first example
-    // with the bonus of not having to update your config
-    // if new subdomains need to access the dev server
+    // وهذا يحقق نفس تأثير المثال الأول
+    // مع ميزة عدم الاضطرار إلى تحديث التخصيص الخاص بك
+    // إذا كانت النطاقات الفرعية الجديدة بحاجة إلى الوصول إلى server dev
     allowedHosts: [".host.com", "host2.com"],
   },
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com
 ```
 
-When set to `'all'` this option bypasses host checking. **THIS IS NOT RECOMMENDED** as apps that do not check the host are vulnerable to DNS rebinding attacks.
+عند التعيين على `'all'`، يتجاوز هذا الخيار فحص المضيف. **هذا غير مستحسن** لأن التطبيقات التي لا تتحقق من المضيف تكون عرضة لهجمات إعادة ربط DNS.
 
 **webpack.config.js**
 
@@ -174,13 +154,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --allowed-hosts all
 ```
 
-When set to `'auto'` this option always allows `localhost`, [`host`](#devserverhost), and [`client.webSocketURL.hostname`](#websocketurl):
+عند التعيين على `'auto'`، يسمح هذا الخيار دائمًا بـ `localhost` و[`host`](#devserverhost) و[`client.webSocketURL.hostname`](#websocketurl):
 
 **webpack.config.js**
 
@@ -193,7 +173,7 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --allowed-hosts auto
@@ -203,7 +183,7 @@ npx webpack serve --allowed-hosts auto
 
 `boolean = false` `object`
 
-This option broadcasts the server via [ZeroConf](http://www.zeroconf.org/) networking on start.
+يقوم هذا الخيار ببث server عبر شبكة [ZeroConf](http://www.zeroconf.org/) عند البداية.
 
 **webpack.config.js**
 
@@ -216,19 +196,19 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --bonjour
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-bonjour
 ```
 
-You can also pass [custom options](https://github.com/watson/bonjour#initializing) to bonjour, for example:
+يمكنك أيضًا تمرير [الخيارات المخصصة](https://github.com/watson/bonjour#initializing) إلى صباح الخير، على سبيل المثال:
 
 **webpack.config.js**
 
@@ -246,11 +226,11 @@ export default {
 
 ## devServer.client
 
-### logging
+### تسجيل
 
 `'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'`
 
-Allows to set log level in the browser, e.g. before reloading, before an error or when [Hot Module Replacement](/concepts/hot-module-replacement/) is enabled.
+يسمح بتعيين مستوى السجل في browser، على سبيل المثال، قبل إعادة التحميل، قبل حدوث خطأ أو عند تمكين [Hot Module Replacement](/concepts/hot-module-replacement/).
 
 **webpack.config.js**
 
@@ -265,17 +245,17 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-logging info
 ```
 
-### overlay
+### تراكب
 
 `boolean = true` `object`
 
-Shows a full-screen overlay in the browser when there are compiler errors or warnings.
+يعرض تراكبًا بملء الشاشة في browser عند وجود أخطاء أو تحذيرات compiler.
 
 **webpack.config.js**
 
@@ -290,29 +270,29 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-overlay
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-client-overlay
 ```
 
-You can provide an object with the following properties for more granular control:
+يمكنك توفير object بالخصائص التالية لمزيد من التحكم الدقيق:
 
-| Property        | Explanation              |
+| الملكية        | شرح              |
 | --------------- | ------------------------ |
-| `errors`        | compilation errors       |
-| `runtimeErrors` | unhandled runtime errors |
-| `warnings`      | compilation warnings     |
+| `errors`        | compilation أخطاء       |
+| `runtimeErrors` | أخطاء runtime لم تتم معالجتها |
+| `warnings`      | compilation تحذيرات     |
 
-All properties are optional and default to `true` when not provided.
+جميع الخصائص اختيارية وتكون افتراضيًا `true` عندما لا يتم توفيرها.
 
-For example, to disable compilation warnings, you can provide the following configuration:
+على سبيل المثال، لتعطيل تحذيرات compilation، يمكنك توفير التخصيص التالي:
 
 **webpack.config.js**
 
@@ -331,15 +311,15 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-overlay-errors --no-client-overlay-warnings --client-overlay-runtime-errors
 ```
 
-To filter based on the thrown error, you can pass a function that accepts an `error` parameter and returns a boolean.
+للتصفية بناءً على الخطأ الذي تم طرحه، يمكنك تمرير function الذي يقبل المعلمة `error` ويعيد boolean.
 
-For example, to ignore errors thrown by [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort):
+على سبيل المثال، لتجاهل الأخطاء التي يلقيها [`AbortController.abort()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort):
 
 **webpack.config.js**
 
@@ -361,13 +341,13 @@ export default {
 };
 ```
 
-W> The function will not have access to the variables declared in the outer scope within the configuration file.
+W> لن يتمكن function من الوصول إلى المتغيرات المعلنة في النطاق الخارجي داخل ملف التخصيص.
 
-### progress
+### التقدم
 
 `boolean`
 
-Prints compilation progress in percentage in the browser.
+يطبع compilation التقدم بالنسبة المئوية في browser.
 
 **webpack.config.js**
 
@@ -382,25 +362,25 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-progress
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-client-progress
 ```
 
-### reconnect
+### أعد الاتصال
 
 `boolean = true` `number`
 
 <Badge text="v4.4.0+" />
 
-Tells dev-server the number of times it should try to reconnect the client. When `true` it will try to reconnect unlimited times.
+يخبر dev-server number بالمرات التي يجب أن يحاول فيها إعادة توصيل client. عندما `true` سيحاول إعادة الاتصال مرات غير محدودة.
 
 **webpack.config.js**
 
@@ -415,13 +395,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-reconnect
 ```
 
-When set to `false` it will not try to reconnect.
+عند التعيين على `false`، لن يحاول إعادة الاتصال.
 
 ```js
 export default {
@@ -434,13 +414,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --no-client-reconnect
 ```
 
-You can also specify the exact number of times the client should try to reconnect.
+يمكنك أيضًا تحديد number بالضبط للمرات التي يجب أن يحاول فيها client إعادة الاتصال.
 
 ```js
 export default {
@@ -453,7 +433,7 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-reconnect 5
@@ -463,9 +443,9 @@ npx webpack serve --client-reconnect 5
 
 `'ws' | 'sockjs'` `string`
 
-This option allows us either to choose the current `devServer` transport mode for clients individually or to provide custom client implementation. This allows specifying how the browser or other client communicates with the `devServer`.
+يتيح لنا هذا الخيار إما اختيار وضع النقل `devServer` الحالي للعملاء بشكل فردي أو توفير تنفيذ client مخصص. يسمح هذا بتحديد كيفية اتصال browser أو client الأخرى مع `devServer`.
 
-T> Providing `'ws'` or `'sockjs'` to [`webSocketServer`](#devserverwebsocketserver) is a shortcut to setting both `devServer.client.webSocketTransport` and `devServer.webSocketServer` to the given value.
+T> يعد توفير `'ws'` أو `'sockjs'` إلى [`webSocketServer`](#devserverwebsocketserver) اختصارًا لتعيين كل من `devServer.client.webSocketTransport` و`devServer.webSocketServer` إلى القيمة المحددة.
 
 **webpack.config.js**
 
@@ -481,17 +461,17 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-web-socket-transport ws --web-socket-server-type ws
 ```
 
-T> When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully.
+T> عند توفير تطبيق مخصص client وserver تأكد من توافقهما مع بعضهما البعض للتواصل بنجاح.
 
-To create a custom client implementation, create a class that extends [`BaseClient`](https://github.com/webpack/webpack-dev-server/blob/master/client-src/clients/BaseClient.js).
+لإنشاء تطبيق client مخصص، قم بإنشاء فئة تمتد [`BaseClient`](https://github.com/webpack/webpack-dev-server/blob/master/client-src/clients/BaseClient.js).
 
-Using path to `CustomClient.js`, a custom WebSocket client implementation, along with the compatible `'ws'` server:
+باستخدام المسار إلى `CustomClient.js`، تطبيق WebSocket client المخصص، بالإضافة إلى `'ws'` server المتوافق:
 
 **webpack.config.js**
 
@@ -507,7 +487,7 @@ export default {
 };
 ```
 
-Using custom, compatible WebSocket client and server implementations:
+استخدام تطبيقات WebSocket client وserver المخصصة والمتوافقة:
 
 **webpack.config.js**
 
@@ -527,7 +507,7 @@ export default {
 
 `string` `object`
 
-This option allows specifying URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
+يسمح هذا الخيار بتحديد عنوان URL لـ WebSocket server، وهذا مفيد عندما تضع dev-server خلف proxy ولا يعرف client script دائمًا أين يتصل.
 
 **webpack.config.js**
 
@@ -542,20 +522,20 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws
 ```
 
-You can also specify an object with the following properties:
+يمكنك أيضًا تحديد object بالخصائص التالية:
 
-- `hostname`: Tells clients connected to devServer to use the provided hostname.
-- `pathname`: Tells clients connected to devServer to use the provided path to connect.
-- `password`: Tells clients connected to devServer to use the provided password to authenticate.
-- `port`: Tells clients connected to devServer to use the provided port.
-- `protocol`: Tells clients connected to devServer to use the provided protocol.
-- `username`: Tells clients connected to devServer to use the provided username to authenticate.
+- `hostname`: يخبر العملاء المتصلين بـ devServer لاستخدام اسم المضيف المقدم.
+- `pathname`: يخبر العملاء المتصلين بـ devServer لاستخدام المسار المتوفر للاتصال.
+- `password`: يخبر العملاء المتصلين بـ devServer لاستخدام كلمة المرور المقدمة للمصادقة.
+- `port`: يخبر العملاء المتصلين بـ devServer باستخدام المنفذ المتوفر.
+- `protocol`: يخبر العملاء المتصلين بـ devServer لاستخدام البروتوكول المتوفر.
+- `username`: يخبر العملاء المتصلين بـ devServer لاستخدام اسم المستخدم المقدم للمصادقة.
 
 **webpack.config.js**
 
@@ -577,13 +557,13 @@ export default {
 };
 ```
 
-T> To get `protocol`/`hostname`/`port` from browser use `webSocketURL: 'auto://0.0.0.0:0/ws'`.
+T> للحصول على `protocol`/`hostname`/`port` من browser استخدم `webSocketURL: 'auto://0.0.0.0:0/ws'`.
 
 ## devServer.compress
 
 `boolean = true`
 
-Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) for everything served:
+تمكين [ضغط gzip](https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) لكل ما يتم تقديمه:
 
 **webpack.config.js**
 
@@ -596,13 +576,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --compress
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-compress
@@ -612,7 +592,7 @@ npx webpack serve --no-compress
 
 `object`
 
-Provide options to [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) which handles webpack assets.
+قم بتوفير خيارات لـ [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) الذي يتعامل مع webpack assets.
 
 **webpack.config.js**
 
@@ -634,7 +614,7 @@ export default {
 
 `array` `function` `object`
 
-Adds headers to all responses:
+إضافة رؤوس إلى كافة الردود:
 
 **webpack.config.js**
 
@@ -649,7 +629,7 @@ export default {
 };
 ```
 
-You can also pass an array:
+يمكنك أيضًا تمرير array:
 
 **webpack.config.js**
 
@@ -671,7 +651,7 @@ export default {
 };
 ```
 
-You can also pass a function:
+يمكنك أيضًا تمرير function:
 
 ```js
 export default {
@@ -686,7 +666,7 @@ export default {
 
 `boolean = false` `object`
 
-When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History), the `index.html` page will likely have to be served in place of any `404` responses. Enable `devServer.historyApiFallback` by setting it to `true`:
+عند استخدام [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History)، من المحتمل أن يتم عرض صفحة `index.html` بدلاً من أي ردود `404`. قم بتمكين `devServer.historyApiFallback` عن طريق ضبطه على `true`:
 
 **webpack.config.js**
 
@@ -699,19 +679,19 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --history-api-fallback
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-history-api-fallback
 ```
 
-By providing an object this behavior can be controlled further using options like `rewrites`:
+من خلال توفير object يمكن التحكم في هذا السلوك بشكل أكبر باستخدام خيارات مثل `rewrites`:
 
 **webpack.config.js**
 
@@ -730,7 +710,7 @@ export default {
 };
 ```
 
-When using dots in your path (common with Angular), you may need to use the `disableDotRule`:
+عند استخدام النقاط في المسار الخاص بك (الشائعة مع Angular)، قد تحتاج إلى استخدام `disableDotRule`:
 
 **webpack.config.js**
 
@@ -745,13 +725,13 @@ export default {
 };
 ```
 
-For more options and information, see the [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback) documentation.
+لمزيد من الخيارات والمعلومات، راجع وثائق [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback).
 
 ## devServer.host
 
 `'local-ip' | 'local-ipv4' | 'local-ipv6'` `string`
 
-Specify a host to use. If you want your server to be accessible externally, specify it like this:
+حدد مضيفًا للاستخدام. إذا كنت تريد إمكانية الوصول إلى server خارجيًا، فحدده على النحو التالي:
 
 **webpack.config.js**
 
@@ -764,13 +744,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --host 0.0.0.0
 ```
 
-This also works with IPv6:
+يعمل هذا أيضًا مع IPv6:
 
 ```bash
 npx webpack serve --host ::
@@ -778,7 +758,7 @@ npx webpack serve --host ::
 
 ### local-ip
 
-Specifying `local-ip` as host will try to resolve the host option as your local `IPv4` address if available, if `IPv4` is not available it will try to resolve your local `IPv6` address.
+تحديد `local-ip` كمضيف سيحاول resolve خيار المضيف كعنوان `IPv4` المحلي إذا كان متاحًا، وإذا لم يكن `IPv4` متاحًا، فسيحاول resolve عنوان `IPv6` المحلي الخاص بك.
 
 ```bash
 npx webpack serve --host local-ip
@@ -786,7 +766,7 @@ npx webpack serve --host local-ip
 
 ### local-ipv4
 
-Specifying `local-ipv4` as host will try to resolve the host option as your local `IPv4` address.
+تحديد `local-ipv4` كمضيف سيحاول resolve خيار المضيف كعنوان `IPv4` المحلي الخاص بك.
 
 ```bash
 npx webpack serve --host local-ipv4
@@ -794,7 +774,7 @@ npx webpack serve --host local-ipv4
 
 ### local-ipv6
 
-Specifying local-ipv6 as host will try to resolve the host option as your local IPv6 address.
+سيؤدي تحديد local-ipv6 كمضيف إلى محاولة resolve خيار المضيف كعنوان IPv6 المحلي الخاص بك.
 
 ```bash
 npx webpack serve --host local-ipv6
@@ -804,7 +784,7 @@ npx webpack serve --host local-ipv6
 
 `'only'` `boolean = true`
 
-Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) feature:
+تمكين ميزة [Hot Module Replacement](/concepts/hot-module-replacement/) الخاصة بـ webpack:
 
 **webpack.config.js**
 
@@ -817,19 +797,19 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --hot
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-hot
 ```
 
-To enable Hot Module Replacement without page refresh as a fallback in case of build failures, use `hot: 'only'`:
+لتمكين Hot Module Replacement بدون تحديث الصفحة كإجراء احتياطي في حالة فشل build، استخدم `hot: 'only'`:
 
 **webpack.config.js**
 
@@ -842,21 +822,21 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --hot only
 ```
 
-T> Since webpack-dev-server v4, HMR is enabled by default. It automatically applies [`webpack.HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin/) which is required to enable HMR. So you don't have to add this plugin to your `webpack.config.js` when `hot` is set to `true` in config or via the CLI option `--hot`. See the [HMR concepts page](/concepts/hot-module-replacement/) for more information.
+T> نظرًا لأن webpack-dev-server v4، يتم تمكين HMR افتراضيًا. يتم تطبيق [`webpack.HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin/) تلقائيًا وهو أمر مطلوب لتمكين HMR. لذلك لا يتعين عليك إضافة هذا plugin إلى `webpack.config.js` عندما يتم ضبط `hot` على `true` في التخصيص أو عبر خيار CLI `--hot`. راجع [HMR صفحة المفاهيم](/concepts/hot-module-replacement/) لمزيد من المعلومات.
 
 ## devServer.ipc
 
 `true` `string`
 
-The Unix socket to listen to (instead of a [`host`](#devserverhost)).
+مقبس Unix للاستماع إليه (بدلاً من [`host`](#devserverhost)).
 
-Setting it to `true` will listen to a socket at `/your-os-temp-dir/webpack-dev-server.sock`:
+سيؤدي ضبطه على `true` إلى الاستماع إلى المقبس عند `/your-os-temp-dir/webpack-dev-server.sock`:
 
 **webpack.config.js**
 
@@ -869,13 +849,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --ipc
 ```
 
-You can also listen to a different socket with:
+يمكنك أيضًا الاستماع إلى مقبس مختلف باستخدام:
 
 **webpack.config.js**
 
@@ -898,7 +878,7 @@ export default {
 
 `boolean = true`
 
-By default, the dev-server will reload/refresh the page when file changes are detected. [`devServer.hot`](#devserverhot) option must be disabled or [`devServer.watchFiles`](#devserverwatchfiles) option must be enabled in order for `liveReload` to take effect. Disable `devServer.liveReload` by setting it to `false`:
+افتراضيًا، سيقوم dev-server بإعادة تحميل/تحديث الصفحة عند اكتشاف تغييرات في الملف. يجب تعطيل خيار [`devServer.hot`](#devserverhot) أو يجب تمكين خيار [`devServer.watchFiles`](#devserverwatchfiles) حتى يصبح `liveReload` ساري المفعول. قم بتعطيل `devServer.liveReload` عن طريق ضبطه على `false`:
 
 **webpack.config.js**
 
@@ -911,25 +891,25 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --live-reload
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-live-reload
 ```
 
-W> Live reloading works only with web related [targets](/configuration/target/#string) like `web`, `webworker`, `electron-renderer` and `node-webkit`.
+W> تعمل إعادة التحميل المباشر فقط مع [targets](/configuration/target/#string) المرتبطة بالويب مثل `web`، `webworker`، `electron-renderer` و`node-webkit`.
 
 ## devserver.onListening
 
 `function (devServer)`
 
-Provides the ability to execute a custom function when webpack-dev-server starts listening for connections on a port.
+يوفر القدرة على تنفيذ function مخصص عندما يبدأ webpack-dev-server في الاستماع للاتصالات الموجودة على المنفذ.
 
 **webpack.config.js**
 
@@ -953,7 +933,7 @@ export default {
 
 `boolean` `string` `object` `[string, object]`
 
-Tells dev-server to open the browser after server had been started. Set it to `true` to open your default browser.
+يخبر dev-server بفتح browser بعد بدء server. اضبطه على `true` لفتح browser الافتراضي.
 
 **webpack.config.js**
 
@@ -966,19 +946,19 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --open
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-open
 ```
 
-To open a specified page in a browser:
+لفتح صفحة محددة في browser:
 
 **webpack.config.js**
 
@@ -991,13 +971,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --open /my-page
 ```
 
-To open multiple specified pages in browser:
+لفتح عدة صفحات محددة في browser:
 
 **webpack.config.js**
 
@@ -1010,13 +990,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --open /my-page --open /another-page
 ```
 
-Provide browser name to use instead of the default one:
+قم بتوفير اسم browser لاستخدامه بدلاً من الاسم الافتراضي:
 
 **webpack.config.js**
 
@@ -1033,13 +1013,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --open-app-name 'google-chrome'
 ```
 
-The object accepts all [open](https://www.npmjs.com/package/open) options:
+يقبل object جميع خيارات [فتح](https://www.npmjs.com/package/open):
 
 **webpack.config.js**
 
@@ -1058,13 +1038,13 @@ export default {
 };
 ```
 
-T> The browser application name is platform-dependent. Don't hard code it in reusable modules. For example, `'Chrome'` is `'Google Chrome'` on macOS, `'google-chrome'` on Linux, and `'chrome'` on Windows.
+T> يعتمد اسم التطبيق browser على النظام الأساسي. لا تقم بترميزها بشكل قابل لإعادة الاستخدام modules. على سبيل المثال، `'Chrome'` هو `'Google Chrome'` على نظام التشغيل macOS، و`'google-chrome'` على نظام Linux، و`'chrome'` على نظام Windows.
 
 ## devServer.port
 
 `'auto'` `string` `number`
 
-Specify a port number to listen for requests on:
+حدد منفذ number للاستماع للطلبات على:
 
 **webpack.config.js**
 
@@ -1077,13 +1057,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --port 8080
 ```
 
-`port` option can't be `null` or an empty string, to automatically use a free port please use `port: 'auto'`:
+لا يمكن أن يكون خيار `port` `null` أو string فارغًا، لاستخدام منفذ مجاني تلقائيًا، يرجى استخدام `port: 'auto'`:
 
 **webpack.config.js**
 
@@ -1096,7 +1076,7 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --port auto
@@ -1106,11 +1086,11 @@ npx webpack serve --port auto
 
 `[object, function]`
 
-Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.
+يمكن أن يكون تفويض بعض عناوين URL مفيدًا عندما يكون لديك تطوير خلفي منفصل API server وتريد إرسال طلبات API على نفس النطاق.
 
-The dev-server makes use of the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) package. Check out its [documentation](https://github.com/chimurai/http-proxy-middleware#options) for more advanced usages. Note that some of `http-proxy-middleware`'s features do not require a `target` key, e.g. its `router` feature, but you will still need to include a `target` key in your configuration here, otherwise `webpack-dev-server` won't pass it along to `http-proxy-middleware`.
+يستفيد dev-server من [http-proxy-middleware] القوي (https://github.com/chimurai/http-proxy-middleware) package. تحقق من [الوثائق](https://github.com/chimurai/http-proxy-middleware#options) لمعرفة المزيد من الاستخدامات المتقدمة. لاحظ أن بعض ميزات `http-proxy-middleware` لا تتطلب مفتاح `target`، على سبيل المثال، ميزة `router` الخاصة بها، ولكنك ستظل بحاجة إلى تضمين مفتاح `target` في التخصيص الخاص بك هنا، وإلا فلن يمرره `webpack-dev-server` إلى `http-proxy-middleware`.
 
-With a backend on `localhost:3000`, you can use this to enable proxying:
+مع الواجهة الخلفية على `localhost:3000`، يمكنك استخدام هذا لتمكين الوكيل:
 
 **webpack.config.js**
 
@@ -1128,9 +1108,9 @@ export default {
 };
 ```
 
-A request to `/api/users` will now proxy the request to `http://localhost:3000/api/users`.
+سيؤدي الطلب إلى `/api/users` الآن إلى وكيل الطلب إلى `http://localhost:3000/api/users`.
 
-If you don't want `/api` to be passed along, we need to rewrite the path:
+إذا كنت لا تريد تمرير `/api`، فنحن بحاجة إلى إعادة كتابة المسار:
 
 **webpack.config.js**
 
@@ -1149,7 +1129,7 @@ export default {
 };
 ```
 
-A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, modify your configuration like this:
+لن يتم قبول الواجهة الخلفية server التي تعمل على HTTPS بشهادة غير صالحة افتراضيًا. إذا كنت ترغب في ذلك، قم بتعديل التخصيص الخاص بك مثل هذا:
 
 **webpack.config.js**
 
@@ -1168,15 +1148,15 @@ export default {
 };
 ```
 
-Sometimes you don't want to proxy everything. It is possible to bypass the proxy based on the return value of a function.
+في بعض الأحيان لا تريد وكيل كل شيء. من الممكن تجاوز الوكيل بناءً على القيمة المرجعة لـ function.
 
-In the function, you get access to the request, response, and proxy options.
+في function، يمكنك الوصول إلى خيارات الطلب والاستجابة والوكيل.
 
-- Return `null` or `undefined` to continue processing the request with proxy.
-- Return `false` to produce a 404 error for the request.
-- Return a path to serve from, instead of continuing to proxy the request.
+- قم بإرجاع `null` أو `undefined` لمواصلة معالجة الطلب بالوكيل.
+- قم بإرجاع `false` لإنتاج خطأ 404 للطلب.
+- قم بإرجاع مسار للعرض منه، بدلاً من الاستمرار في وكيل الطلب.
 
-E.g. for a browser request, you want to serve an HTML page, but for an API request, you want to proxy it. You could do something like this:
+على سبيل المثال بالنسبة لطلب browser، فأنت تريد عرض صفحة HTML، ولكن بالنسبة لطلب API، فأنت تريد إنشاء وكيل لها. يمكنك أن تفعل شيئا مثل هذا:
 
 **webpack.config.js**
 
@@ -1200,9 +1180,9 @@ export default {
 };
 ```
 
-W> The `bypass` option is deprecated for proxy in favor of the `router` and the `context` options. [Read more here](https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options).
+W> تم إهمال الخيار `bypass` للوكيل لصالح الخيارين `router` و`context`. [اقرأ المزيد هنا](https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options).
 
-If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a `context` property:
+إذا كنت تريد إنشاء مسارات متعددة ومحددة لنفس target، فيمكنك استخدام array لكائن واحد أو أكثر مع خاصية `context`:
 
 **webpack.config.js**
 
@@ -1220,7 +1200,7 @@ export default {
 };
 ```
 
-Note that requests to root won't be proxied by default. To enable root proxying, the [`devMiddleware.index`](#devserverdevmiddleware) option should be specified as a falsy value:
+لاحظ أن طلبات الوصول إلى الجذر لن يتم تحويلها إلى وكيل افتراضيًا. لتمكين وكيل الجذر، يجب تحديد الخيار [`devMiddleware.index`](#devserverdevmiddleware) كقيمة زائفة:
 
 **webpack.config.js**
 
@@ -1241,7 +1221,7 @@ export default {
 };
 ```
 
-The origin of the host header is kept when proxying by default, you can set `changeOrigin` to `true` to override this behaviour. It is useful in some cases like using [name-based virtual hosted sites](https://en.wikipedia.org/wiki/Virtual_hosting#Name-based).
+يتم الاحتفاظ بأصل رأس المضيف عند إنشاء الوكيل افتراضيًا، ويمكنك ضبط `changeOrigin` على `true` لتجاوز هذا السلوك. يكون مفيدًا في بعض الحالات مثل استخدام [المواقع الافتراضية المستضافة القائمة على الاسم](https://en.wikipedia.org/wiki/Virtual_hosting#Name-based).
 
 **webpack.config.js**
 
@@ -1266,7 +1246,7 @@ export default {
 
 <Badge text="v4.4.0+" />
 
-Allows to set server and options (by default 'http').
+يسمح بتعيين server والخيارات (افتراضيًا "http").
 
 **webpack.config.js**
 
@@ -1279,13 +1259,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --server-type http
 ```
 
-To serve over `HTTPS` with a self-signed certificate:
+لخدمة أكثر من `HTTPS` بشهادة موقعة ذاتيًا:
 
 **webpack.config.js**
 
@@ -1298,13 +1278,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --server-type https
 ```
 
-To serve over `HTTP/2` using [spdy](https://www.npmjs.com/package/spdy) with a self-signed certificate:
+للعرض على `HTTP/2` باستخدام [spdy](https://www.npmjs.com/package/spdy) مع شهادة موقعة ذاتيًا:
 
 **webpack.config.js**
 
@@ -1317,15 +1297,15 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --server-type spdy
 ```
 
-W> This option is ignored for Node 15.0.0 and above, as [spdy is broken for those versions](https://github.com/spdy-http2/node-spdy/issues/380). The dev server will migrate over to Node's built-in HTTP/2 once [Express](https://expressjs.com/) supports it.
+W> يتم تجاهل هذا الخيار في Node.js 15.0.0 وما بعده، لأن [spdy معطّل لتلك الإصدارات](https://github.com/spdy-http2/node-spdy/issues/380). وسيُنقل dev-server إلى HTTP/2 المدمج في Node.js بمجرد أن يدعمه [Express](https://expressjs.com/).
 
-Use the object syntax to provide your own certificate:
+استخدم بناء الجملة object لتقديم شهادتك الخاصة:
 
 **webpack.config.js**
 
@@ -1348,13 +1328,13 @@ export default {
 };
 ```
 
-Usage via the CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --server-type https --server-options-key ./path/to/server.key --server-options-cert ./path/to/server.crt --server-options-ca ./path/to/ca.pem --server-options-passphrase webpack-dev-server
 ```
 
-It also allows you to set additional [TLS options](https://nodejs.org/api/tls.html#tls_tls_createsecurecontext_options) like `minVersion` and you can directly pass the contents of respective files:
+كما يسمح لك أيضًا بتعيين [خيارات TLS](https://nodejs.org/api/tls.html#tls_tls_createsecurecontext_options) إضافية مثل `minVersion` ويمكنك تمرير محتويات الملفات المعنية مباشرة:
 
 **webpack.config.js**
 
@@ -1389,7 +1369,7 @@ export default {
 
 `boolean = true`
 
-Allows to close dev server and exit the process on `SIGINT` and `SIGTERM` signals.
+يسمح بإغلاق dev server والخروج من العملية عند إشارات `SIGINT` و`SIGTERM`.
 
 **webpack.config.js**
 
@@ -1408,7 +1388,7 @@ export default {
 
 <Badge text="v4.7.0+" />
 
-Provides the ability to execute a custom function and apply custom middleware(s).
+يوفر القدرة على تنفيذ function مخصص وتطبيق البرامج الوسيطة المخصصة.
 
 **webpack.config.js**
 
@@ -1425,8 +1405,8 @@ export default {
         response.send("setup-middlewares option GET");
       });
 
-      // Use the `unshift` method if you want to run a middleware before all other middlewares
-      // or when you are migrating from the `onBeforeSetupMiddleware` option
+      // استخدم الطريقة `unshift` إذا كنت تريد تشغيل برنامج وسيط قبل كافة البرامج الوسيطة الأخرى
+      // أو عند الترحيل من الخيار `onBeforeSetupMiddleware`
       middlewares.unshift({
         name: "first-in-array",
         // `path` is optional
@@ -1436,8 +1416,8 @@ export default {
         },
       });
 
-      // Use the `push` method if you want to run a middleware after all other middlewares
-      // or when you are migrating from the `onAfterSetupMiddleware` option
+      // استخدم الطريقة `push` إذا كنت تريد تشغيل برنامج وسيط بعد كل البرامج الوسيطة الأخرى
+      // أو عند الترحيل من الخيار `onAfterSetupMiddleware`
       middlewares.push({
         name: "hello-world-test-one",
         // `path` is optional
@@ -1461,7 +1441,7 @@ export default {
 
 `boolean` `string` `object` `[string, object]`
 
-This option allows configuring options for serving static files from the directory (by default 'public' directory). To disable set it to `false`:
+يتيح هذا الخيار تخصيص خيارات لخدمة الملفات الثابتة من الدليل (بشكل افتراضي الدليل "العام"). لتعطيله، اضبطه على `false`:
 
 **webpack.config.js**
 
@@ -1474,19 +1454,19 @@ export default {
 };
 ```
 
-Usage via CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --static
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-static
 ```
 
-To watch a single directory:
+إلى watch دليل واحد:
 
 **webpack.config.js**
 
@@ -1499,13 +1479,13 @@ export default {
 };
 ```
 
-Usage via CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --static assets
 ```
 
-To watch multiple static directories:
+إلى watch أدلة ثابتة متعددة:
 
 **webpack.config.js**
 
@@ -1518,17 +1498,17 @@ export default {
 };
 ```
 
-Usage via CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --static assets --static css
 ```
 
-### directory
+### الدليل
 
 `string = path.join(process.cwd(), 'public')`
 
-Tell the server where to serve the content from. This is only necessary if you want to serve static files. [`static.publicPath`](#publicpath) will be used to determine where the bundles should be served from and takes precedence.
+أخبر server من أين سيتم تقديم المحتوى. يعد هذا ضروريًا فقط إذا كنت تريد تقديم ملفات ثابتة. سيتم استخدام [`static.publicPath`](#publicpath) لتحديد المكان الذي يجب تقديم bundles منه ويكون له الأولوية.
 
 **webpack.config.js**
 
@@ -1549,7 +1529,7 @@ export default {
 };
 ```
 
-Provide an array of objects in case you have multiple static folders:
+قم بتوفير array من الكائنات في حالة وجود مجلدات ثابتة متعددة:
 
 **webpack.config.js**
 
@@ -1575,13 +1555,13 @@ export default {
 };
 ```
 
-T> It is recommended to use an absolute path.
+T> يوصى باستخدام المسار المطلق.
 
 ### staticOptions
 
 `object`
 
-It is possible to configure advanced options for serving static files from [`static.directory`](#directory). See the [Express documentation](http://expressjs.com/en/4x/api.html#express.static) for the possible options.
+من الممكن تخصيص خيارات متقدمة لخدمة الملفات الثابتة من [`static.directory`](#directory). راجع [الوثائق السريعة](http://expressjs.com/en/4x/api.html#express.static) للتعرف على الخيارات الممكنة.
 
 **webpack.config.js**
 
@@ -1602,7 +1582,7 @@ export default {
 
 `string = '/'` `[string]`
 
-Tell the server at which URL to serve [`static.directory`](#directory) content. For example to serve a file `assets/manifest.json` at `/serve-public-path-url/manifest.json`, your configurations should be as following:
+أخبر server بعنوان URL الذي سيتم عرض محتوى [`static.directory`](#directory) عليه. على سبيل المثال، لعرض ملف `assets/manifest.json` في `/serve-public-path-url/manifest.json`، يجب أن تكون التخصيصات الخاصة بك كما يلي:
 
 **webpack.config.js**
 
@@ -1624,7 +1604,7 @@ export default {
 };
 ```
 
-Provide an array of objects in case you have multiple static folders:
+قم بتوفير array من الكائنات في حالة وجود مجلدات ثابتة متعددة:
 
 **webpack.config.js**
 
@@ -1652,13 +1632,13 @@ export default {
 };
 ```
 
-### serveIndex
+### serverIndex
 
 `boolean` `object = { icons: true }`
 
-Tell dev-server to use [`serveIndex`](https://github.com/expressjs/serve-index) middleware when enabled.
+أخبر dev-server باستخدام البرنامج الوسيط [`serveIndex`](https://github.com/expressjs/serve-index) عند تمكينه.
 
-[`serveIndex`](https://github.com/expressjs/serve-index) middleware generates directory listings on viewing directories that don't have an `index.html` file.
+[`serveIndex`](https://github.com/expressjs/serve-index) تنشئ البرامج الوسيطة قوائم الأدلة عند عرض الدلائل التي لا تحتوي على ملف `index.html`.
 
 **webpack.config.js**
 
@@ -1680,13 +1660,13 @@ export default {
 };
 ```
 
-Usage via CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --static-serve-index
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-static-serve-index
@@ -1696,7 +1676,7 @@ npx webpack serve --no-static-serve-index
 
 `boolean` `object`
 
-Tell dev-server to watch the files served by the [`static.directory`](#directory) option. It is enabled by default, and file changes will trigger a full page reload. This can be disabled by setting the `watch` option to `false`.
+أخبر dev-server إلى watch بالملفات التي يقدمها الخيار [`static.directory`](#directory). يتم تمكينه افتراضيًا، وستؤدي تغييرات الملف إلى إعادة تحميل الصفحة بالكامل. يمكن تعطيل ذلك عن طريق ضبط خيار `watch` على `false`.
 
 **webpack.config.js**
 
@@ -1718,19 +1698,19 @@ export default {
 };
 ```
 
-Usage via CLI:
+الاستخدام عبر CLI:
 
 ```bash
 npx webpack serve --static-watch
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack serve --no-static-watch
 ```
 
-It is possible to configure advanced options for watching static files from [`static.directory`](#directory). See the [`chokidar`](https://github.com/paulmillr/chokidar) documentation for the possible options.
+من الممكن تخصيص خيارات متقدمة للملفات الثابتة watching من [`static.directory`](#directory). راجع وثائق [`chokidar`](https://github.com/paulmillr/chokidar) للتعرف على الخيارات الممكنة.
 
 **webpack.config.js**
 
@@ -1759,7 +1739,7 @@ export default {
 
 `string` `object` `[string, object]`
 
-This option allows you to configure a list of globs/directories/files to watch for file changes. For example:
+يتيح لك هذا الخيار تخصيص قائمة من globs/directories/files إلى watch لتغييرات الملف. على سبيل المثال:
 
 **webpack.config.js**
 
@@ -1772,7 +1752,7 @@ export default {
 };
 ```
 
-It is possible to configure advanced options for watching files. See the [`chokidar`](https://github.com/paulmillr/chokidar) documentation for the possible options.
+من الممكن تخصيص خيارات متقدمة لملفات watching. راجع وثائق [`chokidar`](https://github.com/paulmillr/chokidar) للتعرف على الخيارات الممكنة.
 
 **webpack.config.js**
 
@@ -1794,9 +1774,9 @@ export default {
 
 `false | 'sockjs' | 'ws'` `string` `function` `object`
 
-This option allows us either to choose the current web-socket server or to provide custom web-socket server implementation.
+يتيح هذا الخيار اختيار WebSocket server الحالي أو توفير تنفيذ WebSocket server مخصص.
 
-The current default mode is `'ws'`. This mode uses [`ws`](https://www.npmjs.com/package/ws) as a server, and native WebSockets on the client.
+الوضع الافتراضي الحالي هو `'ws'`. يستخدم هذا الوضع [`ws`](https://www.npmjs.com/package/ws) باعتباره server، وWebSockets الأصلي على client.
 
 **webpack.config.js**
 
@@ -1809,9 +1789,9 @@ export default {
 };
 ```
 
-To create a custom server implementation, create a class that extends [`BaseServer`](https://github.com/webpack/webpack-dev-server/blob/master/lib/servers/BaseServer.js).
+لإنشاء تطبيق server مخصص، قم بإنشاء فئة تمتد [`BaseServer`](https://github.com/webpack/webpack-dev-server/blob/master/lib/servers/BaseServer.js).
 
-Using path to `CustomServer.js`, a custom WebSocket server implementation, along with the compatible `'ws'` client:
+باستخدام المسار إلى `CustomServer.js`، تطبيق WebSocket server المخصص، بالإضافة إلى `'ws'` client المتوافق:
 
 **webpack.config.js**
 
@@ -1827,7 +1807,7 @@ export default {
 };
 ```
 
-Using custom, compatible WebSocket client and server implementations:
+استخدام تطبيقات WebSocket client وserver المخصصة والمتوافقة:
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/devtool.mdx b/src/content/configuration/devtool.mdx
index 715841cdcaf5..753eb37ee390 100644
--- a/src/content/configuration/devtool.mdx
+++ b/src/content/configuration/devtool.mdx
@@ -2,33 +2,26 @@
 title: Devtool
 sort: 12
 contributors:
-  - sokra
-  - skipjack
-  - SpaceK33z
-  - lricoy
-  - madhavarshney
-  - wizardofhogwarts
-  - anikethsaha
-  - snitin315
+  - RlxChap2
 related:
-  - title: Enabling Source Maps
+  - title: "تفعيل Source Maps"
     url: https://survivejs.com/webpack/developing-with-webpack/enabling-sourcemaps/
-  - title: webpack's Devtool Source Map
+  - title: "Source Map الخاصة بـ Devtool في webpack"
     url: http://cheng.logdown.com/posts/2016/03/25/679045
 ---
 
-This option controls if and how source maps are generated.
-Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`Rule.extractSourceMap`](/configuration/module/#ruleextractsourcemap) to deal with existing source maps.
+يتحكم هذا الخيار في إمكانية وكيفية إنشاء Source Maps.
+استخدم [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) للحصول على تخصيص أكثر دقة. راجع [`Rule.extractSourceMap`](/configuration/module/#ruleextractsourcemap) للتعامل مع Source Maps الموجودة.
 
 ## devtool
 
 `string = 'eval'` `Array<{ type: "all" | "javascript" | "css", use: string }>` `false`
 
-Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. These values can affect build and rebuild speed dramatically.
+اختر النمط [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) لتحسين عملية التصحيح. يمكن أن تؤثر هذه القيم على سرعة build وrebuild بشكل كبير.
 
 <Badge text="5.105.0+" />
 
-You can also provide an array of objects to configure different source map styles for different asset types:
+يمكنك أيضًا توفير array من الكائنات لتخصيص أنماط مختلفة لـ Source Map لأنواع asset مختلفة:
 
 **webpack.config.js**
 
@@ -42,124 +35,124 @@ export default {
 };
 ```
 
-The `type` field specifies which asset type should receive the devtool value:
+يحدد الحقل `type` نوع asset الذي يجب أن يتلقى القيمة devtool:
 
-- `"all"` - applies to all asset types (JavaScript and CSS)
-- `"javascript"` - applies only to JavaScript files
-- `"css"` - applies only to CSS files
+- `"all"` - ينطبق على جميع أنواع asset (JavaScript وCSS)
+- `"javascript"` - ينطبق فقط على ملفات JavaScript
+- `"css"` - ينطبق فقط على ملفات CSS
 
-When using an array, each entry will be processed in order. If you provide a string value, it will be treated as `{ type: "all", use: "your-string-value" }`.
+عند استخدام array، ستتم معالجة كل entry بالترتيب. إذا قمت بتوفير قيمة string، فسيتم التعامل معها على أنها `{ type: "all", use: "your-string-value" }`.
 
-T> The webpack repository contains an [example showing the effect of all `devtool` variants](https://github.com/webpack/webpack/tree/master/examples/source-map). Those examples will likely help you to understand the differences.
+T> يحتوي مستودع webpack على [مثال يوضح تأثير جميع متغيرات `devtool`](https://github.com/webpack/webpack/tree/master/examples/source-map). من المرجح أن تساعدك هذه الأمثلة على فهم الاختلافات.
 
-T> Instead of using the `devtool` option you can also use `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` directly as it has more options. Never use both the `devtool` option and plugin together. The `devtool` option adds the plugin internally so you would end up with the plugin applied twice.
+T> بدلاً من استخدام الخيار `devtool` يمكنك أيضًا استخدام `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` مباشرة لأنه يحتوي على المزيد من الخيارات. لا تستخدم أبدًا الخيارين `devtool` وplugin معًا. يضيف خيار `devtool` plugin داخليًا بحيث ينتهي بك الأمر إلى تطبيق plugin مرتين.
 
-| devtool                                    | performance                                        | production | quality        | comment                                                                               |
+| devtool                                    | performance                                        | الإنتاج | الجودة        | تعليق                                                                               |
 | ------------------------------------------ | -------------------------------------------------- | ---------- | -------------- | ------------------------------------------------------------------------------------- |
-| (none)                                     | **build**: fastest<br /><br />**rebuild**: fastest | yes        | bundle         | Recommended choice for production builds with maximum performance.                    |
-| **`eval`**                                 | **build**: fast<br /><br />**rebuild**: fastest    | no         | generated      | Recommended choice for development builds with maximum performance.                   |
-| `eval-cheap-source-map`                    | **build**: ok<br /><br />**rebuild**: fast         | no         | transformed    | Tradeoff choice for development builds.                                               |
-| `eval-cheap-module-source-map`             | **build**: slow<br /><br />**rebuild**: fast       | no         | original lines | Tradeoff choice for development builds.                                               |
-| **`eval-source-map`**                      | **build**: slowest<br /><br />**rebuild**: ok      | no         | original       | Recommended choice for development builds with high quality SourceMaps.               |
-| `cheap-source-map`                         | **build**: ok<br /><br />**rebuild**: slow         | no         | transformed    |                                                                                       |
-| `cheap-module-source-map`                  | **build**: slow<br /><br />**rebuild**: slow       | no         | original lines |                                                                                       |
-| **`source-map`**                           | **build**: slowest<br /><br />**rebuild**: slowest | yes        | original       | Recommended choice for production builds with high quality SourceMaps.                |
-| `inline-cheap-source-map`                  | **build**: ok<br /><br />**rebuild**: slow         | no         | transformed    |                                                                                       |
-| `inline-cheap-module-source-map`           | **build**: slow<br /><br />**rebuild**: slow       | no         | original lines |                                                                                       |
-| `inline-source-map`                        | **build**: slowest<br /><br />**rebuild**: slowest | no         | original       | Possible choice when publishing a single file                                         |
-| `eval-nosources-cheap-source-map`          | **build**: ok<br /><br />**rebuild**: fast         | no         | transformed    | source code not included                                                              |
-| `eval-nosources-cheap-module-source-map`   | **build**: slow<br /><br />**rebuild**: fast       | no         | original lines | source code not included                                                              |
-| `eval-nosources-source-map`                | **build**: slowest<br /><br />**rebuild**: ok      | no         | original       | source code not included                                                              |
-| `inline-nosources-cheap-source-map`        | **build**: ok<br /><br />**rebuild**: slow         | no         | transformed    | source code not included                                                              |
-| `inline-nosources-cheap-module-source-map` | **build**: slow<br /><br />**rebuild**: slow       | no         | original lines | source code not included                                                              |
-| `inline-nosources-source-map`              | **build**: slowest<br /><br />**rebuild**: slowest | no         | original       | source code not included                                                              |
-| `nosources-cheap-source-map`               | **build**: ok<br /><br />**rebuild**: slow         | no         | transformed    | source code not included                                                              |
-| `nosources-cheap-module-source-map`        | **build**: slow<br /><br />**rebuild**: slow       | no         | original lines | source code not included                                                              |
-| `nosources-source-map`                     | **build**: slowest<br /><br />**rebuild**: slowest | yes        | original       | source code not included                                                              |
-| `hidden-nosources-cheap-source-map`        | **build**: ok<br /><br />**rebuild**: slow         | no         | transformed    | no reference, source code not included                                                |
-| `hidden-nosources-cheap-module-source-map` | **build**: slow<br /><br />**rebuild**: slow       | no         | original lines | no reference, source code not included                                                |
-| `hidden-nosources-source-map`              | **build**: slowest<br /><br />**rebuild**: slowest | yes        | original       | no reference, source code not included                                                |
-| `hidden-cheap-source-map`                  | **build**: ok<br /><br />**rebuild**: slow         | no         | transformed    | no reference                                                                          |
-| `hidden-cheap-module-source-map`           | **build**: slow<br /><br />**rebuild**: slow       | no         | original lines | no reference                                                                          |
-| `hidden-source-map`                        | **build**: slowest<br /><br />**rebuild**: slowest | yes        | original       | no reference. Possible choice when using SourceMap only for error reporting purposes. |
-
-| shortcut                | explanation                                                                                                                                                                                                                                                                                                       |
+| (لا شيء)                                     | **build**: الأسرع<br /><br />**rebuild**: الأسرع | نعم        | bundle         | الاختيار الموصى به لإصدارات الإنتاج بحد أقصى performance.                    |
+| **`eval`**                                 | **build**: سريع<br /><br />**rebuild**: الأسرع    | no         | ولدت      | يُوصى باختيار التطوير بحد أقصى performance.                   |
+| `eval-cheap-source-map`                    | **build**: ok<br /><br />**rebuild**: سريع         | no         | تحولت    | خيار المقايضة للتنمية يبني.                                               |
+| `eval-cheap-module-source-map`             | **build**: بطيء<br /><br />**rebuild**: سريع       | no         | الخطوط الأصلية | خيار المقايضة للتنمية يبني.                                               |
+| **`eval-source-map`**                      | **build**: الأبطأ<br /><br />**rebuild**: حسنًا      | no         | original       | الاختيار الموصى به للتطوير يبني بجودة عالية Source Maps.               |
+| `cheap-source-map`                         | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    |                                                                                       |
+| `cheap-module-source-map`                  | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية |                                                                                       |
+| **`source-map`**                           | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | الاختيار الموصى به للإنتاج يبني بجودة عالية Source Maps.                |
+| `inline-cheap-source-map`                  | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    |                                                                                       |
+| `inline-cheap-module-source-map`           | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية |                                                                                       |
+| `inline-source-map`                        | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | no         | original       | الاختيار المحتمل عند نشر ملف واحد                                         |
+| `eval-nosources-cheap-source-map`          | **build**: ok<br /><br />**rebuild**: سريع         | no         | تحولت    | كود المصدر غير متضمن                                                              |
+| `eval-nosources-cheap-module-source-map`   | **build**: بطيء<br /><br />**rebuild**: سريع       | no         | الخطوط الأصلية | كود المصدر غير متضمن                                                              |
+| `eval-nosources-source-map`                | **build**: الأبطأ<br /><br />**rebuild**: حسنًا      | no         | original       | كود المصدر غير متضمن                                                              |
+| `inline-nosources-cheap-source-map`        | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | كود المصدر غير متضمن                                                              |
+| `inline-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | كود المصدر غير متضمن                                                              |
+| `inline-nosources-source-map`              | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | no         | original       | كود المصدر غير متضمن                                                              |
+| `nosources-cheap-source-map`               | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | كود المصدر غير متضمن                                                              |
+| `nosources-cheap-module-source-map`        | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | كود المصدر غير متضمن                                                              |
+| `nosources-source-map`                     | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | كود المصدر غير متضمن                                                              |
+| `hidden-nosources-cheap-source-map`        | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | لا يوجد مرجع، كود المصدر غير مدرج                                                |
+| `hidden-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | لا يوجد مرجع، كود المصدر غير مدرج                                                |
+| `hidden-nosources-source-map`              | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | لا يوجد مرجع، كود المصدر غير مدرج                                                |
+| `hidden-cheap-source-map`                  | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | لا مرجع                                                                          |
+| `hidden-cheap-module-source-map`           | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | لا مرجع                                                                          |
+| `hidden-source-map`                        | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | لا مرجع. الاختيار المحتمل عند استخدام Source Map فقط لأغراض الإبلاغ عن الأخطاء. |
+
+| الاختصار                | شرح                                                                                                                                                                                                                                                                                                       |
 | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| performance: build      | How is the performance of the initial build affected by the devtool setting?                                                                                                                                                                                                                                      |
-| performance: rebuild    | How is the performance of the incremental build affected by the devtool setting? Slow devtools might reduce development feedback loop in watch mode. The scale is different compared to the build performance, as one would expect rebuilds to be faster than builds.                                             |
-| production              | Does it make sense to use this devtool for production builds? It's usually `no` when the devtool has a negative effect on user experience.                                                                                                                                                                        |
-| quality: bundled        | You will see all generated code of a chunk in a single blob of code. This is the raw output file without any devtooling support                                                                                                                                                                                   |
-| quality: generated      | You will see the generated code, but each module is shown as separate code file in browser devtools.                                                                                                                                                                                                              |
-| quality: transformed    | You will see generated code after the preprocessing by loaders but before additional webpack transformations. Only source lines will be mapped and column information will be discarded resp. not generated. This prevents setting breakpoints in the middle of lines which doesn't work together with minimizer. |
-| quality: original lines | You will see the original code that you wrote, assuming all loaders support SourceMapping. Only source lines will be mapped and column information will be discarded resp. not generated. This prevents setting breakpoints in the middle of lines which doesn't work together with minimizer.                    |
-| quality: original       | You will see the original code that you wrote, assuming all loaders support SourceMapping.                                                                                                                                                                                                                        |
-| `eval-*` addition       | generate SourceMap per module and attach it via eval. Recommended for development, because of improved rebuild performance. Note that there is a windows defender issue, which causes huge slowdown due to virus scanning.                                                                                        |
-| `inline-*` addition     | inline the SourceMap to the original file instead of creating a separate file.                                                                                                                                                                                                                                    |
-| `hidden-*` addition     | no reference to the SourceMap added. When SourceMap is not deployed, but should still be generated, e. g. for error reporting purposes.                                                                                                                                                                           |
-| `nosources-*` addition  | source code is not included in SourceMap. This can be useful when the original files should be referenced (further config options needed).                                                                                                                                                                        |
+| performance: build      | كيف يتأثر performance الخاص بـ build الأولي بإعداد devtool؟                                                                                                                                                                                                                                      |
+| performance: rebuild    | كيف يتأثر performance الخاص بـ build المتزايد بإعداد devtool؟ قد تؤدي أدوات التطوير البطيئة إلى تقليل حلقة تعليقات التطوير في وضع watch. يختلف المقياس مقارنةً بـ build performance، حيث يتوقع المرء أن تكون عمليات إعادة البناء أسرع من عمليات الإنشاء.                                             |
+| الإنتاج              | هل يعقل استخدام هذا devtool لبناء الإنتاج؟ عادةً ما يكون `no` عندما يكون لـ devtool تأثير سلبي على تجربة المستخدم.                                                                                                                                                                        |
+| الجودة: المجمعة        | سترى كل التعليمات البرمجية التي تم إنشاؤها لـ chunk في كتلة واحدة من التعليمات البرمجية. هذا هو ملف output الخام بدون أي دعم لتطوير الأدوات                                                                                                                                                                                   |
+| الجودة: ولدت      | سترى الكود الذي تم إنشاؤه، ولكن يتم عرض كل module كملف تعليمات برمجية منفصل في أدوات التطوير browser.                                                                                                                                                                                                              |
+| الجودة: تحولت    | ستشاهد التعليمات البرمجية التي تم إنشاؤها بعد المعالجة المسبقة بواسطة loaders ولكن قبل تحويلات webpack الإضافية. سيتم تعيين خطوط المصدر فقط وسيتم تجاهل معلومات العمود بشكل متكرر. لم يتم إنشاؤها. يؤدي هذا إلى منع تعيين نقاط التوقف في منتصف الأسطر التي لا تعمل مع المصغر. |
+| الجودة: الخطوط الأصلية | سترى الكود الأصلي الذي كتبته، بافتراض أن كل loaders يدعم Source Mapping. سيتم تعيين خطوط المصدر فقط وسيتم تجاهل معلومات العمود بشكل متكرر. لم يتم إنشاؤها. يؤدي هذا إلى منع تعيين نقاط التوقف في منتصف الأسطر التي لا تعمل مع المصغر.                    |
+| الجودة: أصلية       | سترى الكود الأصلي الذي كتبته، بافتراض أن كل loaders يدعم Source Mapping.                                                                                                                                                                                                                        |
+| `eval-*` إضافة       | أنشئ Source Map لكل module وأرفقه عبر التقييم. موصى به للتطوير، بسبب تحسين rebuild performance. لاحظ أن هناك مشكلة في Windows Defender، والتي تسبب تباطؤًا كبيرًا بسبب فحص الفيروسات.                                                                                        |
+| `inline-*` إضافة     | قم بتضمين Source Map في الملف الأصلي بدلاً من إنشاء ملف منفصل.                                                                                                                                                                                                                                    |
+| `hidden-*` إضافة     | لم تتم إضافة أي إشارة إلى Source Map. عندما لا يتم نشر Source Map، ولكن لا يزال يتعين إنشاؤها، مثلاً لأغراض الإبلاغ عن الأخطاء.                                                                                                                                                                           |
+| `nosources-*` إضافة  | لم يتم تضمين كود المصدر في Source Map. يمكن أن يكون هذا مفيدًا عندما يجب الرجوع إلى الملفات الأصلية (تلزم خيارات تخصيص إضافية).                                                                                                                                                                        |
 
-T> We expect a certain pattern when validate devtool name, pay attention and don't mix up the sequence of devtool string. The pattern is: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`.
+T> نتوقع نمطًا معينًا عند التحقق من صحة اسم devtool، انتبه ولا تخلط بين تسلسل devtool string. النمط هو: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`.
 
-Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate and support minimizing.
+بعض هذه القيم مناسبة للتطوير وبعضها مناسب للإنتاج. للتطوير، تحتاج عادةً إلى Source Maps سريع بتكلفة bundle الحجم، ولكن بالنسبة للإنتاج، فأنت تريد Source Maps منفصلة دقيقة وتدعم التقليل.
 
-T> See [`output.sourceMapFilename`](/configuration/output/#outputsourcemapfilename) to customize the filenames of generated Source Maps.
+T> راجع [`output.sourceMapFilename`](/configuration/output/#outputsourcemapfilename) لتخصيص أسماء الملفات التي تم إنشاؤها Source Maps.
 
-### Qualities
+### الصفات
 
-`bundled code` - You see all generated code as a big blob of code. You don't see modules separated from each other.
+`bundled code` - ترى كل التعليمات البرمجية التي تم إنشاؤها كنقطة كبيرة من التعليمات البرمجية. لا ترى modules منفصلة عن بعضها البعض.
 
-`generated code` - You see each module separated from each other, annotated with module names. You see the code generated by webpack. Example: Instead of `import {test} from "module"; test();` you see something like `var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();`.
+`generated code` - ترى كل module منفصلاً عن بعضها البعض، ومزودًا بتعليقات توضيحية بأسماء module. ترى الكود الذي تم إنشاؤه بواسطة webpack. مثال: بدلاً من `import {test} from "module"; test();` ترى شيئًا مثل `var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();`.
 
-`transformed code` - You see each module separated from each other, annotated with module names. You see the code before webpack transforms it, but after Loaders transpile it. Example: Instead of `import {test} from "module"; class A extends test {}` you see something like `import {test} from "module"; var A = function(_test) { ... }(test);`
+`transformed code` - ترى كل module منفصلاً عن بعضها البعض، ومزودًا بتعليقات توضيحية بأسماء module. ترى الكود قبل أن يقوم webpack بتحويله، ولكن بعد loaders ينقله. مثال: بدلاً من `import {test} from "module"; class A extends test {}` ترى شيئًا مثل `import {test} from "module"; var A = function(_test) { ... }(test);`
 
-`original source` - You see each module separated from each other, annotated with module names. You see the code before transpilation, as you authored it. This depends on Loader support.
+`original source` - ترى كل module منفصلاً عن بعضها البعض، ومزودًا بتعليقات توضيحية بأسماء module. ترى الكود قبل الترجمة، كما قمت بتأليفه. هذا يعتمد على دعم Loader.
 
-`without source content` - Contents for the sources are not included in the Source Maps. Browsers usually try to load the source from the webserver or filesystem. You have to make sure to set [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate) correctly to match source urls.
+`without source content` - لم يتم تضمين محتويات المصادر في Source Maps. يحاول browsers عادةً تحميل المصدر من web server أو نظام الملفات. يجب عليك التأكد من تعيين [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate) بشكل صحيح لمطابقة عناوين URL المصدر.
 
-`(lines only)` - Source Maps are simplified to a single mapping per line. This usually means a single mapping per statement (assuming you author it this way). This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line. Combining with minimizing is not possible as minimizers usually only emit a single line.
+`(lines only)` - يتم تبسيط Source Maps تبسيطها إلى تعيين واحد لكل سطر. يعني هذا عادةً تعيينًا واحدًا لكل عبارة (على افتراض أنك تقوم بتأليفها بهذه الطريقة). يمنعك هذا من تصحيح أخطاء التنفيذ على مستوى العبارة ومن نقاط توقف الإعدادات على أعمدة السطر. الدمج مع التصغير غير ممكن لأن أدوات التصغير عادةً ما تصدر سطرًا واحدًا فقط.
 
-### Development
+### التنمية
 
-The following options are ideal for development:
+الخيارات التالية مثالية للتطوير:
 
-`eval` - Each module is executed with `eval()` and `//# sourceURL`. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code (No Source Maps from Loaders).
+`eval` - يتم تنفيذ كل module باستخدام `eval()` و`//# sourceURL`. هذا سريع جدًا. العيب الرئيسي هو أنه لا يعرض أرقام الأسطر بشكل صحيح حيث يتم تعيينه للكود المنقول بدلاً من الكود الأصلي (لا يوجد Source Maps من loaders).
 
-`eval-source-map` - Each module is executed with `eval()` and a SourceMap is added as a DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code. It yields the best quality SourceMaps for development.
+`eval-source-map` - يتم تنفيذ كل module باستخدام `eval()` ويتم إضافة Source Map كـ Data URL إلى `eval()`. في البداية كان بطيئًا، لكنه يوفر سرعة rebuild سريعة وينتج ملفات حقيقية. يتم تعيين أرقام الأسطر بشكل صحيح حيث يتم تعيينها إلى الكود الأصلي. إنها تنتج أفضل جودة Source Maps للتطوير.
 
-`eval-cheap-source-map` - Similar to `eval-source-map`, each module is executed with `eval()`. It is "cheap" because it doesn't have column mappings, it only maps line numbers. It ignores SourceMaps from Loaders and only display transpiled code similar to the `eval` devtool.
+`eval-cheap-source-map` - على غرار `eval-source-map`، يتم تنفيذ كل module باستخدام `eval()`. إنه "رخيص" لأنه لا يحتوي على تعيينات للأعمدة، بل يقوم فقط بتعيين أرقام الأسطر. إنه يتجاهل Source Maps من loaders ويعرض فقط الكود المنقول المشابه لـ `eval` devtool.
 
-`eval-cheap-module-source-map` - Similar to `eval-cheap-source-map`, however, in this case Source Maps from Loaders are processed for better results. However Loader Source Maps are simplified to a single mapping per line.
+`eval-cheap-module-source-map` - يشبه `eval-cheap-source-map`، ومع ذلك، في هذه الحالة تتم معالجة Source Maps من loaders للحصول على نتائج أفضل. ومع ذلك، تم تبسيط Loader Source Maps إلى تعيين واحد لكل سطر.
 
-### Special cases
+### حالات خاصة
 
-The following options are not ideal for development nor production. They are needed for some special cases, i. e. for some 3rd party tools.
+الخيارات التالية ليست مثالية للتطوير أو الإنتاج. فهي ضرورية لبعض الحالات الخاصة، مثلاً لبعض أدوات الطرف الثالث.
 
-`inline-source-map` - A SourceMap is added as a DataUrl to the bundle.
+`inline-source-map` - تتم إضافة Source Map كـ Data URL إلى bundle.
 
-`cheap-source-map` - A SourceMap without column-mappings ignoring loader Source Maps.
+`cheap-source-map` - Source Map بدون تعيينات الأعمدة التي تتجاهل loader Source Maps.
 
-`inline-cheap-source-map` - Similar to `cheap-source-map` but SourceMap is added as a DataUrl to the bundle.
+`inline-cheap-source-map` - يشبه `cheap-source-map` ولكن تتم إضافة Source Map كـ Data URL إلى bundle.
 
-`cheap-module-source-map` - A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line.
+`cheap-module-source-map` - Source Map بدون تعيينات أعمدة تعمل على تبسيط loader Source Maps إلى تعيين واحد لكل سطر.
 
-`inline-cheap-module-source-map` - Similar to `cheap-module-source-map` but SourceMap is added as a DataUrl to the bundle.
+`inline-cheap-module-source-map` - يشبه `cheap-module-source-map` ولكن تتم إضافة Source Map كـ Data URL إلى bundle.
 
-### Production
+### الإنتاج
 
-These options are typically used in production:
+تُستخدم هذه الخيارات عادةً في الإنتاج:
 
-`(none)` (Omit the `devtool` option or set `devtool: false`) - No SourceMap is emitted. This is a good option to start with.
+`(none)` (احذف الخيار `devtool` أو اضبط `devtool: false`) - لا ينبعث Source Map. هذا خيار جيد للبدء به.
 
-`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
+`source-map` - يتم إصدار Source Map كامل كملف منفصل. فهو يضيف تعليقًا مرجعيًا إلى bundle حتى تعرف أدوات التطوير مكان العثور عليه.
 
-W> You should configure your server to disallow access to the Source Map file for normal users!
+W> يجب عليك تخصيص server لديك لعدم السماح بالوصول إلى ملف Source Map للمستخدمين العاديين!
 
-`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
+`hidden-source-map` - مثل `source-map`، لكنه لا يضيف تعليقًا مرجعيًا إلى bundle. يكون ذلك مفيدًا إذا كنت تريد فقط أن يقوم Source Maps بتعيين تتبعات مكدس الأخطاء من تقارير الأخطاء، ولكنك لا تريد كشف Source Map لأدوات تطوير browser.
 
-W> You should not deploy the Source Map file to the webserver. Instead only use it for error report tooling.
+W> لا ينبغي عليك نشر الملف Source Map على web server. بدلاً من ذلك، استخدمه فقط لأدوات تقرير الأخطاء.
 
-`nosources-source-map` - A SourceMap is created without the `sourcesContent` in it. It can be used to map stack traces on the client without exposing all of the source code. You can deploy the Source Map file to the webserver.
+`nosources-source-map` - يتم إنشاء Source Map بدون `sourcesContent` بداخله. يمكن استخدامه لتعيين آثار المكدس على client دون الكشف عن كافة التعليمات البرمجية المصدر. يمكنك نشر الملف Source Map على web server.
 
-W> It still exposes filenames and structure for decompiling, but it doesn't expose the original code.
+W> لا يزال يكشف عن أسماء الملفات وبنيتها لفك ترجمتها، لكنه لا يكشف عن الكود الأصلي.
 
-T> If the default webpack `minimizer` has been overridden (such as to customise the `minimizer-webpack-plugin` options), make sure to configure its replacement with `sourceMap: true` to enable SourceMap support.
+T> إذا تم تجاوز الإعداد الافتراضي webpack `minimizer` (مثل تخصيص خيارات `minimizer-webpack-plugin`)، فتأكد من تخصيص استبداله بـ `sourceMap: true` لتمكين دعم Source Map.
diff --git a/src/content/configuration/dotenv.mdx b/src/content/configuration/dotenv.mdx
index b701b5d07b72..da1f98f1233e 100644
--- a/src/content/configuration/dotenv.mdx
+++ b/src/content/configuration/dotenv.mdx
@@ -2,7 +2,7 @@
 title: Dotenv
 sort: 16
 contributors:
-  - xiaoxiaojx
+  - RlxChap2
 related:
   - title: dotenv
     url: https://github.com/motdotla/dotenv
@@ -11,12 +11,11 @@ related:
 ---
 
 <Badge text="5.103.0+" />
-The `dotenv` option enables webpack's built-in environment variable loading from
-`.env` files.
+يُفعِّل الخيار `dotenv` ميزة تحميل متغيّرات البيئة المدمجة في webpack من ملفّات `.env`.
 
 `boolean` `object`
 
-Enable and configure the built-in Dotenv plugin to load environment variables from `.env` files.
+فعِّل plugin الـ Dotenv المدمج واضبطه ليُحمِّل متغيّرات البيئة من ملفّات `.env`.
 
 **webpack.config.js**
 
@@ -27,7 +26,7 @@ export default {
 };
 ```
 
-Setting `dotenv` to `true` enables the plugin with default options. For custom configuration, pass an options object:
+ضبط `dotenv` على `true` يُفعِّل الـ plugin بخياراته الافتراضية. أمّا إن أردت تخصيصاً أعمق فمرِّر كائن خيارات:
 
 ```js
 export default {
@@ -40,15 +39,15 @@ export default {
 };
 ```
 
-## Options
+## الخيارات
 
 ### `prefix`
 
 `string` `string[]`
 
-**Default:** `'WEBPACK_'`
+**الافتراضي:** `'WEBPACK_'`
 
-Only expose environment variables that start with the specified prefix(es). This prevents accidental exposure of sensitive variables.
+لا تُكشف من متغيّرات البيئة إلا تلك التي تبدأ بالبادئة (أو البادئات) المُحدَّدة. وهذا يحول دون كشفك المتغيّرات الحسّاسة بغير قصد.
 
 **webpack.config.js**
 
@@ -56,35 +55,35 @@ Only expose environment variables that start with the specified prefix(es). This
 export default {
   // ...
   dotenv: {
-    prefix: "APP_", // Only expose APP_* variables
+    prefix: "APP_", // اكشف فقط متغيّرات APP_*
   },
 };
 ```
 
-**Multiple prefixes:**
+**عدّة بادئات:**
 
 ```js
 export default {
   // ...
   dotenv: {
-    prefix: ["APP_", "CONFIG_"], // Expose both APP_* and CONFIG_* variables
+    prefix: ["APP_", "CONFIG_"], // اكشف متغيّرات APP_* و CONFIG_* كلتيهما
   },
 };
 ```
 
-T> For security reasons, an empty string `''` is not allowed as a prefix, as it would expose all environment variables.
+T> لأسباب أمنية، لا يُسمح بالنصّ الفارغ `''` بادئةً، لأنّه سيكشف كلّ متغيّرات البيئة.
 
 ### `dir`
 
 `boolean` `string`
 
-**Default:** `true`
+**الافتراضي:** `true`
 
-The directory from which `.env` files are loaded.
+المجلَّد الذي تُحمَّل منه ملفّات `.env`.
 
-- `true` - Load from the project root (context)
-- `false` - Disable `.env` file loading
-- `string` - Relative path from project root or absolute path
+- `true` — التحميل من جذر المشروع (السياق).
+- `false` — تعطيل تحميل ملفّات `.env`.
+- `string` — مسار نسبي من جذر المشروع، أو مسار مطلق.
 
 **webpack.config.js**
 
@@ -92,18 +91,18 @@ The directory from which `.env` files are loaded.
 export default {
   // ...
   dotenv: {
-    dir: "./config", // Load from ./config directory
+    dir: "./config", // التحميل من مجلَّد ./config
   },
 };
 ```
 
-**Disable loading:**
+**تعطيل التحميل:**
 
 ```js
 export default {
   // ...
   dotenv: {
-    dir: false, // Only use process.env variables
+    dir: false, // الاكتفاء بمتغيّرات process.env
   },
 };
 ```
@@ -112,11 +111,11 @@ export default {
 
 `string[]`
 
-**Default:** `['.env', '.env.local', '.env.[mode]', '.env.[mode].local']`
+**الافتراضي:** `['.env', '.env.local', '.env.[mode]', '.env.[mode].local']`
 
-Template patterns for `.env` file names. Use `[mode]` as a placeholder for the webpack mode (e.g., `development`, `production`).
+أنماط قوالب لأسماء ملفّات `.env`. استعمل `[mode]` بوصفه عنصراً نائباً لـ webpack mode (مثل `development` و `production`).
 
-Files are loaded in the order specified, with later files overriding earlier ones.
+تُحمَّل الملفّات بالترتيب المُحدَّد، والملفّات اللاحقة تُلغي ما سبقها من قيم متطابقة.
 
 **webpack.config.js**
 
@@ -125,12 +124,12 @@ export default {
   // ...
   mode: "production",
   dotenv: {
-    template: [".env", ".env.production"], // Only load these two files
+    template: [".env", ".env.production"], // اكتفِ بتحميل هذين الملفّين فقط
   },
 };
 ```
 
-**Custom patterns:**
+**أنماط مخصَّصة:**
 
 ```js
 export default {
@@ -141,72 +140,72 @@ export default {
       ".env.local",
       ".env.[mode]",
       ".env.[mode].local",
-      ".env.override", // Always loaded last
+      ".env.override", // يُحمَّل دائماً في الأخير
     ],
   },
 };
 ```
 
-T> The `[mode]` placeholder will be replaced with the current webpack mode. For example, in `production` mode, `.env.[mode]` becomes `.env.production`.
+T> سيُستبدَل العنصر النائب `[mode]` بقيمة webpack mode الحالية. فمثلاً، في وضع `production`، يصير `.env.[mode]` هو `.env.production`.
 
-## File Priority
+## أولوية الملفّات
 
-Environment files are loaded in order, with later files having higher priority:
+تُحمَّل ملفّات البيئة بحسب الترتيب، والملفّات اللاحقة لها الأولوية الأعلى:
 
-1. `.env` - Loaded in all modes
-2. `.env.local` - Loaded in all modes, ignored by git (convention)
-3. `.env.[mode]` - Only loaded in specified mode (e.g., `.env.production`)
-4. `.env.[mode].local` - Only loaded in specified mode, ignored by git
+1. `.env` — يُحمَّل في كلّ الأوضاع.
+2. `.env.local` — يُحمَّل في كلّ الأوضاع، ويُتجاهَل من git (عُرفاً).
+3. `.env.[mode]` — لا يُحمَّل إلا في الوضع المُحدَّد (مثل `.env.production`).
+4. `.env.[mode].local` — لا يُحمَّل إلا في الوضع المُحدَّد، ويُتجاهَل من git.
 
-Variables from later files override those from earlier files. Additionally, variables already set in `process.env` take the highest priority.
+تُلغي متغيّرات الملفّات اللاحقة قيمَ الملفّات السابقة. وفوق ذلك، تأخذ المتغيّرات المضبوطة فعلاً في `process.env` الأولوية القصوى.
 
-## Variable Expansion
+## توسيع المتغيّرات
 
-Environment variables are automatically expanded using the [dotenv-expand](https://github.com/motdotla/dotenv-expand) syntax:
+تُوسَّع متغيّرات البيئة تلقائياً وفق صياغة [dotenv-expand](https://github.com/motdotla/dotenv-expand):
 
 **.env**
 
 ```bash
 WEBPACK_API_BASE=https://api.example.com
 WEBPACK_API_URL=${WEBPACK_API_BASE}/v1
-WEBPACK_PORT=${WEBPACK_PORT:-3000}  # Use WEBPACK_PORT from process.env, or 3000 as default
+WEBPACK_PORT=${WEBPACK_PORT:-3000}  # استعمل WEBPACK_PORT من process.env، وإلا اعتمد 3000 افتراضياً
 ```
 
-**In your code:**
+**في شيفرتك:**
 
 ```js
 console.log(process.env.WEBPACK_API_URL); // "https://api.example.com/v1"
-console.log(process.env.WEBPACK_PORT); // Value of process.env.WEBPACK_PORT if set, otherwise "3000"
+console.log(process.env.WEBPACK_PORT); // قيمة process.env.WEBPACK_PORT إن وُجدت، وإلا "3000"
 ```
 
-T> During expansion, you can reference any variable from `process.env` (e.g., `${PORT}`), but only variables with the specified prefix (e.g., `WEBPACK_`) will be exposed in your final bundle. In the example above, `${WEBPACK_PORT:-3000}` references `WEBPACK_PORT` from `process.env` if it exists.
+T> أثناء التوسيع، يمكنك الإشارة إلى أيّ متغيّر من `process.env` (كـ `${PORT}`)، غير أنّه لا يُكشف في الحزمة النهائية إلا المتغيّرات التي تحمل البادئة المُحدَّدة (كـ `WEBPACK_`). في المثال أعلاه، يُشير `${WEBPACK_PORT:-3000}` إلى `WEBPACK_PORT` من `process.env` إن كان موجوداً.
 
-**Expansion behavior example:**
+**مثال على سلوك التوسيع:**
 
 ```bash
-# .env file
+# ملفّ .env
 WEBPACK_API_URL=${API_BASE:-https://default.com}/api
 ```
 
 ```bash
-# Run with environment variable
+# شغِّل مع متغيّر بيئة
 API_BASE=https://custom.com npm run build
 ```
 
-Result: `process.env.WEBPACK_API_URL` will be `"https://custom.com/api"` because `API_BASE` from `process.env` is used during expansion, even though `API_BASE` itself won't be exposed in the bundle (it lacks the `WEBPACK_` prefix).
+النتيجة: ستصبح `process.env.WEBPACK_API_URL` هي `"https://custom.com/api"`، لأنّ `API_BASE` من `process.env` يُستعمَل في أثناء التوسيع، وإن كان `API_BASE` نفسه لن يُكشف في الحزمة (لأنّه لا يحمل البادئة `WEBPACK_`).
 
-## Usage Examples
+## أمثلة على الاستخدام
 
-### Basic Usage
+### الاستخدام الأساسي
 
-Create a `.env` file in your project root:
+أنشئ ملفّ `.env` في جذر مشروعك:
 
 **.env**
 
 ```bash
 WEBPACK_API_URL=https://api.example.com
 WEBPACK_FEATURE_FLAG=true
-SECRET_KEY=should-not-be-exposed  # Won't be exposed (no WEBPACK_ prefix)
+SECRET_KEY=should-not-be-exposed  # لن يُكشف (لا يحمل البادئة WEBPACK_)
 ```
 
 **webpack.config.js**
@@ -214,21 +213,21 @@ SECRET_KEY=should-not-be-exposed  # Won't be exposed (no WEBPACK_ prefix)
 ```js
 export default {
   // ...
-  dotenv: true, // Uses default prefix "WEBPACK_"
+  dotenv: true, // يستعمل البادئة الافتراضية "WEBPACK_"
 };
 ```
 
-**In your application:**
+**في تطبيقك:**
 
 ```js
 console.log(process.env.WEBPACK_API_URL); // "https://api.example.com"
 console.log(process.env.WEBPACK_FEATURE_FLAG); // "true"
-console.log(process.env.SECRET_KEY); // undefined (not exposed)
+console.log(process.env.SECRET_KEY); // undefined (غير مكشوف)
 ```
 
-### Mode-Specific Configuration
+### تخصيص خاصّ بكلّ وضع
 
-Create mode-specific files:
+أنشئ ملفّات خاصّة بكلّ وضع:
 
 **.env**
 
@@ -251,11 +250,11 @@ WEBPACK_API_URL=https://dev-api.example.com
 WEBPACK_DEBUG=true
 ```
 
-When building with `--mode production`, `WEBPACK_API_URL` will be `"https://prod-api.example.com"`.
+حين تبني مع `--mode production`، ستكون `WEBPACK_API_URL` مساوية لـ `"https://prod-api.example.com"`.
 
-### Multiple Prefixes
+### عدّة بادئات
 
-Expose variables with different prefixes:
+اكشف متغيّرات ذات بادئات مختلفة:
 
 **.env**
 
@@ -264,7 +263,7 @@ APP_NAME=MyApp
 APP_VERSION=1.0.0
 CONFIG_TIMEOUT=5000
 CONFIG_RETRY=3
-PRIVATE_KEY=secret  # Won't be exposed
+PRIVATE_KEY=secret  # لن يُكشف
 ```
 
 **webpack.config.js**
@@ -278,9 +277,9 @@ export default {
 };
 ```
 
-### Custom Directory and Template
+### مجلَّد وقالب مخصَّصان
 
-Load environment files from a custom location with custom naming:
+حمِّل ملفّات البيئة من موقع مخصَّص وبأسماء مخصَّصة:
 
 **webpack.config.js**
 
@@ -294,25 +293,25 @@ export default {
 };
 ```
 
-This will load:
+سيُحمَّل من هذا التخصيص:
 
 - `./environments/.env.base`
-- `./environments/.env.production` (in production mode)
+- `./environments/.env.production` (في وضع production)
 
-## Security Considerations
+## اعتبارات أمنية
 
-W> **Never commit sensitive data to version control!**
+W> **لا تُودِع البيانات الحسّاسة في نظام التحكّم بالإصدار أبداً!**
 
-- Use `.gitignore` to exclude `.env.local` and `.env.[mode].local` files
-- Only expose environment variables with specific prefixes
-- Never use an empty string `''` as a prefix
-- Consider using different `.env` files for different environments
-- Store production secrets in your deployment platform's environment variables
+- استعمل `.gitignore` لاستبعاد ملفّات `.env.local` و `.env.[mode].local`.
+- اكشف فقط متغيّرات البيئة ذات البادئات المُحدَّدة.
+- لا تستعمل النصّ الفارغ `''` بادئةً.
+- فكِّر في استعمال ملفّات `.env` منفصلة لكلّ بيئة.
+- خزِّن أسرار الإنتاج في متغيّرات البيئة الخاصّة بمنصّة النشر لديك.
 
 **.gitignore**
 
 ```bash
-# local env files
+# ملفّات البيئة المحلية
 .env.local
 .env.*.local
 ```
diff --git a/src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.mdx
index 283928a1f688..e0465bd5af5f 100644
--- a/src/content/configuration/entry-context.mdx
+++ b/src/content/configuration/entry-context.mdx
@@ -2,26 +2,16 @@
 title: Entry and Context
 sort: 4
 contributors:
-  - sokra
-  - skipjack
-  - tarang9211
-  - byzyk
-  - madhavarshney
-  - EugeneHlushko
-  - smelukov
-  - anshumanv
-  - snitin315
-  - hai-x
-  - cengizilhan
+  - RlxChap2
 ---
 
-The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files.
+كائن `entry` هو المكان الذي ينطلق منه webpack ليبدأ بناء الحزمة. أمّا `context` فهو نصّ يحمل مساراً مطلقاً إلى المجلَّد الذي يحتوي ملفّات نقاط الدخول.
 
 ## context
 
 `string`
 
-The base directory, an **absolute path**, for resolving entry points and loaders from the configuration.
+المجلَّد الأساسي، ويكون **مساراً مطلقاً**، يُستعمل لتحليل نقاط الدخول والـ loaders انطلاقاً من التخصيص.
 
 ```js
 import path from "node:path";
@@ -36,7 +26,7 @@ export default {
 };
 ```
 
-By default, the current working directory of Node.js is used, but it's recommended to pass a value in your configuration. This makes your configuration independent from CWD (current working directory).
+يستخدم webpack افتراضياً مجلَّد العمل الحالي لـ Node.js، غير أنّ من المُستحسَن أن تُمرِّر قيمة صريحة في تخصيصك، فبذلك يصبح تخصيصك مستقلاً عن CWD (مجلَّد العمل الحالي).
 
 ---
 
@@ -44,11 +34,11 @@ By default, the current working directory of Node.js is used, but it's recommend
 
 `string` `[string]` `object = { <key> string | [string] | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false }}` `(function() => string | [string] | object = { <key> string | [string] } | object = { import string | [string], dependOn string | [string], filename string, layer string, runtime string | false })`
 
-The point or points where to start the application bundling process. If an array is passed then all items will be processed.
+النقطة أو النقاط التي ينطلق منها webpack ليبدأ عملية حزم التطبيق. وإن مُرِّرت مصفوفة، فستُعالَج جميع عناصرها.
 
-A dynamically loaded module is **not** an entry point.
+الوحدة المُحمَّلة ديناميكياً ليست نقطة دخول.
 
-A rule to consider: one entry point per HTML page. SPA: one entry point, MPA: multiple entry points.
+قاعدة جديرة بالاعتبار: نقطة دخول واحدة لكلّ صفحة HTML. فالـ SPA يحتاج إلى نقطة واحدة، أمّا الـ MPA فيحتاج إلى نقاط متعدّدة.
 
 ```js
 export default {
@@ -61,13 +51,13 @@ export default {
 };
 ```
 
-### Naming
+### التسمية
 
-If a string or array of strings is passed, the chunk is named `main`. If an object is passed, each key is the name of a chunk, and the value describes the entry point for the chunk.
+إن مُرِّر نصّ أو مصفوفة نصوص، فإنّ الـ chunk يحصل على الاسم `main`. وإن مُرِّر كائن، فإنّ كلّ مفتاح فيه يكون اسماً لـ chunk، وقيمته تصف نقطة الدخول الموافقة له.
 
-### Entry descriptor
+### واصف نقطة الدخول
 
-If an object is passed the value might be a string, array of strings, or a descriptor:
+إن مُرِّر كائن، فقد تكون قيمة كلّ مفتاح نصّاً أو مصفوفة نصوص أو واصفاً:
 
 ```js
 export default {
@@ -79,25 +69,25 @@ export default {
       import: "./catalog.js",
       filename: "pages/catalog.js",
       dependOn: "shared",
-      chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.
+      chunkLoading: false, // تعطيل الـ chunks التي تُحمَّل عند الطلب، ووضع كلّ شيء في الـ chunk الرئيسي.
     },
     personal: {
       import: "./personal.js",
       filename: "pages/personal.js",
       dependOn: "shared",
       chunkLoading: "jsonp",
-      asyncChunks: true, // Create async chunks that are loaded on demand.
-      layer: "name of layer", // set the layer for an entry point
+      asyncChunks: true, // إنشاء chunks غير متزامنة تُحمَّل عند الطلب.
+      layer: "name of layer", // تعيين الطبقة (layer) لنقطة دخول.
     },
   },
 };
 ```
 
-Descriptor syntax might be used to pass additional options to an entry point.
+تُستعمَل صياغة الواصف لتمرير خيارات إضافية إلى نقطة الدخول.
 
-### Output filename
+### اسم ملفّ الإخراج
 
-By default, the output filename for the entry chunk is extracted from [`output.filename`](/configuration/output/#outputfilename) but you can specify a custom output filename for a specific entry:
+افتراضياً، يُؤخذ اسم ملفّ الإخراج لـ chunk نقطة الدخول من [`output.filename`](/configuration/output/#outputfilename)، غير أنّ بإمكانك تحديد اسم إخراج خاص بنقطة دخول بعينها:
 
 ```js
 export default {
@@ -110,11 +100,11 @@ export default {
 };
 ```
 
-Descriptor syntax was used here to pass `filename`-option to the specific entry points.
+استُعملت هنا صياغة الواصف لتمرير الخيار `filename` إلى نقاط دخول بعينها.
 
-### Dependencies
+### الاعتماديات
 
-By default, every entry chunk stores all the modules that it uses. With `dependOn` option you can share the modules from one entry chunk to another:
+افتراضياً، يحتفظ كلّ chunk من chunks نقاط الدخول بجميع الوحدات التي يستعملها. ومع الخيار `dependOn` تستطيع مشاركة وحدات chunk نقطة دخولٍ مع غيرها:
 
 ```js
 export default {
@@ -126,9 +116,9 @@ export default {
 };
 ```
 
-The `app` chunk will not contain the modules that `react-vendors` have.
+لن يحتوي chunk المُسمَّى `app` على الوحدات التي يحتويها `react-vendors`.
 
-`dependOn` option can also accept an array of strings:
+كما يقبل الخيار `dependOn` مصفوفة نصوص:
 
 ```js
 export default {
@@ -144,7 +134,7 @@ export default {
 };
 ```
 
-Also, you can specify multiple files per entry using an array:
+كما يمكنك تحديد عدّة ملفّات لنقطة دخول واحدة باستعمال مصفوفة:
 
 ```js
 export default {
@@ -156,11 +146,11 @@ export default {
 };
 ```
 
-### Dynamic entry
+### نقطة الدخول الديناميكية
 
-If a function is passed then it will be invoked on every [make](/api/compiler-hooks/#make) event.
+إن مُرِّرت دالّة، فستُستدعى مع كلّ حدث [make](/api/compiler-hooks/#make).
 
-> Note that the `make` event triggers when webpack starts and for every invalidation when [watching for file changes](/configuration/watch/).
+> لاحظ أنّ حدث `make` يُطلق حين يبدأ webpack وحين يقع كلّ إبطال (invalidation) عند [مراقبة تغيّر الملفّات](/configuration/watch/).
 
 ```js
 export default {
@@ -169,7 +159,7 @@ export default {
 };
 ```
 
-or
+أو
 
 ```js
 export default {
@@ -181,9 +171,9 @@ export default {
 };
 ```
 
-### Multiple Entry Points in Different Folders
+### نقاط دخول متعدّدة في مجلَّدات مختلفة
 
-In some scenarios, you might want to organize your entry points into different folders for better structure and maintainability. Here's how you can define multiple entry points located in different folders:
+أحياناً ترغب في تنظيم نقاط الدخول داخل مجلَّدات منفصلة لتحسين البنية وسهولة الصيانة. وفيما يلي كيفية تعريف عدّة نقاط دخول واقعة في مجلَّدات مختلفة:
 
 ```js
 export default {
@@ -194,25 +184,25 @@ export default {
 };
 ```
 
-For example: you can use dynamic entries to get the actual entries from an external source (remote server, file system content or database):
+ومثال على ذلك: يمكنك استعمال نقاط الدخول الديناميكية للحصول على نقاط الدخول الفعلية من مصدر خارجي (خادوم بعيد، أو نظام ملفّات، أو قاعدة بيانات):
 
 **webpack.config.js**
 
 ```js
 export default {
   entry() {
-    return fetchPathsFromSomeExternalSource(); // returns a promise that will be resolved with something like ['src/main-layout.js', 'src/admin-layout.js']
+    return fetchPathsFromSomeExternalSource(); // يُرجع promise يُحَلّ بقيمة مشابهة لـ ['src/main-layout.js', 'src/admin-layout.js']
   },
 };
 ```
 
-When combining with the [`output.library`](/configuration/output/#outputlibrary) option: If an array is passed only the last item is exported.
+عند الدمج مع الخيار [`output.library`](/configuration/output/#outputlibrary): إن مُرِّرت مصفوفة، فلن يُصدَّر منها إلا العنصر الأخير.
 
 ### Runtime chunk
 
-It allows setting the runtime chunk for an entry point and setting it to `false` to avoid a new runtime chunk since webpack `v5.43.0`.
+تتيح هذه الخاصية تعيين runtime chunk لنقطة دخولٍ ما، وضبطه على `false` لتجنّب إنشاء runtime chunk جديد، وذلك منذ webpack `v5.43.0`.
 
-`optimization.runtimeChunk` allows setting it globally for unspecified entry points.
+ويتيح `optimization.runtimeChunk` ضبطه على المستوى العام لنقاط الدخول التي لم تُحدَّد صراحةً.
 
 ```js
 export default {
diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx
index 64333705a961..446769118d01 100644
--- a/src/content/configuration/experiments.mdx
+++ b/src/content/configuration/experiments.mdx
@@ -2,25 +2,20 @@
 title: Experiments
 sort: 19
 contributors:
-  - EugeneHlushko
-  - wizardofhogwarts
-  - chenxsan
-  - anshumanv
-  - snitin315
-  - burhanuday
+  - RlxChap2
 ---
 
-## experiments
+## التجارب
 
 `boolean: false`
 
-`experiments` option was introduced in webpack 5 to empower users with the ability to activate and try out experimental features.
+أُدخل الخيار `experiments` في webpack 5 ليُتيح للمستخدمين تفعيل الميزات التجريبية وتجربتها.
 
-W> Because experimental features have relaxed semantic versioning and might contain breaking changes, make sure to fix webpack's version to minor e.g. `webpack: ~5.4.3` instead of `webpack: ^5.4.3` or use a lockfile when using `experiments`.
+W> لمّا كانت الميزات التجريبية تتساهل مع semantic versioning وقد تأتي بتغييرات كاسرة، تأكّد من تثبيت إصدار webpack عند المستوى الثانوي مثل `webpack: ~5.4.3` بدلاً من `webpack: ^5.4.3`، أو استعمل lockfile حين تستخدم `experiments`.
 
-Available options:
+الخيارات المتاحة:
 
-- `asyncWebAssembly`: Support the new WebAssembly according to the [updated specification](https://github.com/WebAssembly/esm-integration), it makes a WebAssembly module an async module. And it is enabled by default when [`experiments.futureDefaults`](#experimentsfuturedefaults) is set to `true`.
+- `asyncWebAssembly`: يدعم WebAssembly الجديد وفق [المواصفة المحدَّثة](https://github.com/WebAssembly/esm-integration)، فيجعل وحدة WebAssembly وحدةً غير متزامنة. وهو مُفعَّل افتراضياً حين يُضبط [`experiments.futureDefaults`](#experimentsfuturedefaults) على `true`.
 - [`backCompat`](#experimentsbackcompat)
 - [`buildHttp`](#experimentsbuildhttp)
 - [`cacheUnaffected`](#experimentscacheunaffected)
@@ -31,9 +26,9 @@ Available options:
 - [`lazyCompilation`](#experimentslazycompilation)
 - [`outputModule`](#experimentsoutputmodule)
 - [`sourceImport`](#experimentssourceimport)
-- `syncWebAssembly`: Support the old WebAssembly like in webpack 4.
-- `layers`: Enable module and chunk layers, removed and works without additional options since `5.102.0`.
-- `topLevelAwait`: Transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0` (however, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`), this feature is enabled by default, removed and works without additional options since `5.102.0`.
+- `syncWebAssembly`: يدعم WebAssembly القديم كما في webpack 4.
+- `layers`: يُفعِّل طبقات الوحدات والـ chunks، أُزيل ويعمل بلا خيارات إضافية منذ `5.102.0`.
+- `topLevelAwait`: يُحوِّل الوحدة إلى وحدة `async` حين يُستعمَل `await` على المستوى الأعلى. ابتداءً من webpack `5.83.0` (أمّا في الإصدارات السابقة فيمكنك تفعيله بضبط `experiments.topLevelAwait` على `true`)، صارت هذه الميزة مُفعَّلة افتراضياً، وأُزيلت وصارت تعمل بلا خيارات إضافية منذ `5.102.0`.
 
 **webpack.config.js**
 
@@ -54,9 +49,9 @@ export default {
 
 ### experiments.backCompat
 
-Enable backward-compat layer with deprecation warnings for many webpack 4 APIs.
+فعِّل طبقة التوافق العكسي مع تحذيرات الإهمال (deprecation warnings) لكثير من واجهات webpack 4 البرمجية.
 
-- Type: `boolean`
+- النوع: `boolean`
 
 ```js
 export default {
@@ -69,12 +64,12 @@ export default {
 
 ### experiments.buildHttp
 
-When enabled, webpack can build remote resources that begin with the `http(s):` protocol.
+حين يُفعَّل هذا الخيار، يستطيع webpack بناء الموارد البعيدة التي تبدأ بـ `http(s):`.
 
-- Type:
+- النوع:
   - `(string | RegExp | ((uri: string) => boolean))[]`
 
-    A shortcut for [`experiments.buildHttp.allowedUris`](#experimentsbuildhttpalloweduris).
+    اختصارٌ لـ [`experiments.buildHttp.allowedUris`](#experimentsbuildhttpalloweduris).
 
   - `HttpUriOptions`
 
@@ -88,8 +83,8 @@ When enabled, webpack can build remote resources that begin with the `http(s):`
     }
     ```
 
-- Available: 5.49.0+
-- Example
+- متاح: 5.49.0+
+- مثال
 
   **webpack.config.js**
 
@@ -106,16 +101,16 @@ When enabled, webpack can build remote resources that begin with the `http(s):`
   // src/index.js
   import pMap1 from "https://cdn.skypack.dev/p-map";
 
-  // with `buildHttp` enabled, webpack will build pMap1 like a regular local module
+  // مع تفعيل `buildHttp`، سيبني webpack pMap1 كأنّها وحدة محلية اعتيادية
   console.log(pMap1);
   ```
 
 #### experiments.buildHttp.allowedUris
 
-A list of allowed URIs.
+قائمة بالعناوين المسموح بها (URIs).
 
-- Type: `(string|RegExp|(uri: string) => boolean)[]`
-- Example
+- النوع: `(string|RegExp|(uri: string) => boolean)[]`
+- مثال
 
   **webpack.config.js**
 
@@ -135,12 +130,12 @@ A list of allowed URIs.
 
 #### experiments.buildHttp.cacheLocation
 
-Define the location for caching remote resources.
+حدِّد موقع التخزين المؤقَّت للموارد البعيدة.
 
-- Type
+- النوع
   - `string`
   - `false`
-- Example
+- مثال
 
   **webpack.config.js**
 
@@ -155,51 +150,51 @@ Define the location for caching remote resources.
   };
   ```
 
-By default webpack would use `<compiler-name.>webpack.lock.data/` for caching, but you can disable it by setting its value to `false`.
+افتراضياً يستعمل webpack `<compiler-name.>webpack.lock.data/` للتخزين المؤقَّت، غير أنّ بإمكانك تعطيله بضبط قيمته على `false`.
 
-Note that you should commit files under `experiments.buildHttp.cacheLocation` into a version control system as no network requests will be made during the `production` build.
+لاحظ أنّه ينبغي إيداع الملفّات الموجودة تحت `experiments.buildHttp.cacheLocation` في نظام التحكّم بالإصدار، إذ لن يجري أيّ طلب شبكي أثناء بناء `production`.
 
 #### experiments.buildHttp.frozen
 
-Freeze the remote resources and lockfile. Any modification to the lockfile or resource contents will result in an error.
+جمِّد الموارد البعيدة وملفّ القفل (lockfile). أيّ تعديل على lockfile أو على محتوى المورد سيُفضي إلى خطأ.
 
-- Type: `boolean`
+- النوع: `boolean`
 
 #### experiments.buildHttp.lockfileLocation
 
-Define the location to store the lockfile.
+حدِّد موقع تخزين lockfile.
 
-- Type: `string`
+- النوع: `string`
 
-By default webpack would generate a `<compiler-name.>webpack.lock` file>. Make sure to commit it into a version control system. During the `production` build, webpack will build those modules beginning with `http(s):` protocol from the lockfile and caches under [`experiments.buildHttp.cacheLocation`](#experimentsbuildhttpcachelocation).
+افتراضياً يُولِّد webpack ملفّ `<compiler-name.>webpack.lock`. تأكّد من إيداعه في نظام التحكّم بالإصدار. وأثناء بناء `production`، سيبني webpack تلك الوحدات التي تبدأ بـ `http(s):` انطلاقاً من lockfile ومن الذاكرة المؤقَّتة الموجودة في [`experiments.buildHttp.cacheLocation`](#experimentsbuildhttpcachelocation).
 
 #### experiments.buildHttp.proxy
 
-Specify the proxy server to use for fetching remote resources.
+حدِّد خادوم البروكسي المستعمَل لجلب الموارد البعيدة.
 
-- Type: `string`
+- النوع: `string`
 
-By default, Webpack would imply the proxy server to use for fetching remote resources from the `http_proxy` (case insensitive) environment variable. However, you can also specify one through the `proxy` option.
+افتراضياً، سيستنتج webpack خادوم البروكسي من متغيّر البيئة `http_proxy` (لا يميِّز بين الحالة الصغيرة والكبيرة). كما تستطيع تحديده صراحةً عبر الخيار `proxy`.
 
 #### experiments.buildHttp.upgrade
 
-Detect changes to remote resources and upgrade them automatically.
+اكتشف التغيّرات في الموارد البعيدة وحدِّثها تلقائياً.
 
-- Type: `boolean`
+- النوع: `boolean`
 
 ### experiments.css
 
-Enable native CSS support. Note that it's an experimental feature still under development and will be enabled by default in webpack v6, however you can track the progress on [GitHub](https://github.com/webpack/webpack/issues/14893).
+يُفعِّل دعم CSS الأصلي. لاحظ أنّها ميزة تجريبية لا تزال قيد التطوير، وستُفعَّل افتراضياً في webpack v6، لكن بإمكانك تتبّع تقدّمها على [GitHub](https://github.com/webpack/webpack/issues/14893).
 
-- Type: `boolean`
+- النوع: `boolean`
 
-Experimental features:
+الميزات التجريبية:
 
-- CSS Modules support: webpack will generate a unique name for each CSS class. Use the `.module.css` extension for CSS Modules.
+- دعم CSS Modules: سيُولِّد webpack اسماً فريداً لكلّ صنف CSS. استعمل الامتداد `.module.css` لتفعيل CSS Modules.
 
   <Badge text="5.103.0+" />
 
-  Webpack natively supports the CSS Modules `composes` property, allowing you to compose classes from the same file, other CSS modules, or global classes:
+  يدعم webpack بشكل أصلي خاصية `composes` الخاصة بـ CSS Modules، فيسمح لك بتركيب الأصناف من الملفّ نفسه، أو من وحدات CSS أخرى، أو من أصناف عامة (global):
 
   ```css
   /* styles.module.css */
@@ -217,41 +212,29 @@ Experimental features:
     background: blue;
   }
 
-  /* Compose from another CSS module */
+  /* تركيب من وحدة CSS أخرى */
   .composed {
     composes: className from "./other.module.css";
   }
 
-  /* Compose from global classes */
+  /* تركيب من أصناف عامة */
   .globalComposed {
     composes: global-class from global;
   }
   ```
 
-- <Badge text="5.87.0+" /> Style-specific fields resolution in `package.json`
-  files: webpack will look for `style` field in `package.json` files and use
-  that if it exists for imports inside CSS files.
+- <Badge text="5.87.0+" /> تحليل الحقول الخاصّة بـ style في ملفّات `package.json`: سيبحث webpack عن حقل `style` في ملفّات `package.json` ويستعمله إن وُجد للاستيراد داخل ملفّات CSS.
 
-  For example, if you add `@import 'bootstrap';` to your CSS file, webpack will look for `bootstrap` in `node_modules` and use the `style` field in `package.json` from there. If `style` field is not found, webpack will use the `main` field instead to preserve backward compatibility.
+  فمثلاً، إن أضفت `@import 'bootstrap';` إلى ملفّ CSS لديك، فسيبحث webpack عن `bootstrap` في `node_modules` ويستعمل حقل `style` من `package.json` هناك. وإن لم يجد حقل `style`، فسيستعمل حقل `main` بدلاً منه حفاظاً على التوافق العكسي.
 
-- Content hash for CSS files: webpack will generate a content hash for CSS files and use it in the filename. This is useful for long-term caching.
-- CSS extraction: webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support.
-- CSS imports: webpack will inline CSS imports into the generated CSS file.
-- Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload.
+- Content hash لملفّات CSS: سيُولِّد webpack content hash لملفّات CSS ويستعمله في اسم الملفّ، وهذا مفيد للتخزين المؤقَّت طويل الأمد.
+- استخراج CSS: سيستخرج webpack الـ CSS إلى ملفّ منفصل. وتُغني هذه الإمكانية عن الحاجة إلى `mini-css-extract-plugin` و `css-loader`، إذ أنّها توفِّر دعماً أصلياً.
+- استيرادات CSS: سيُضمِّن webpack استيرادات CSS داخل ملفّ CSS المُولَّد.
+- إعادة التحميل الساخن (HMR): يدعم webpack الـ HMR لملفّات CSS، أي أنّ التغييرات في ملفّات CSS ستظهر في المتصفّح من دون إعادة تحميل كاملة للصفحة.
 
-- <Badge text="5.107.0+" /> Scope hoisting (module concatenation) for CSS
-  Modules. When
-  [`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules)
-  is enabled, CSS Modules whose `exportType` is `text`, `css-style-sheet`,
-  `style`, or `link` are concatenated into a single module instance instead of
-  being kept as separate runtime instances. This reduces overhead and produces
-  smaller output for CSS-heavy bundles.
+- <Badge text="5.107.0+" /> Scope hoisting (module concatenation) لـ CSS Modules. حين يُفعَّل [`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules)، فإنّ وحدات CSS التي يكون `exportType` لها `text` أو `css-style-sheet` أو `style` أو `link` تُدمَج في نسخة واحدة من الوحدة بدلاً من إبقائها نسخاً منفصلة عند الـ runtime. وهذا يُقلِّل الـ overhead ويُنتج مخرَجات أصغر للحزم الثقيلة بـ CSS.
 
-- <Badge text="5.107.0+" /> `@value` identifiers can be used as the path
-  argument to `@import` and inside `url()` references, so shared paths and
-  assets can be defined once and reused across stylesheets. Both quoted
-  (`"./x"`, `'./x'`) and bare (`./x`) forms are accepted and resolved through
-  webpack's normal asset pipeline.
+- <Badge text="5.107.0+" /> يمكن استعمال معرّفات `@value` بوصفها مسارَ معامل لـ `@import` وداخل مراجع `url()`، حتى يُعرَّف المسار أو الـ asset المشترك مرّة واحدة ويُعاد استعماله عبر عدّة أوراق أنماط. وتُقبل الصيغة المُغلَّفة بعلامتي اقتباس (`"./x"`, `'./x'`) والصيغة المُجرَّدة (`./x`)، وتُحلّ كلتاهما عبر مسار الـ assets الاعتيادي في webpack.
 
   ```css
   @value path: "./other.module.css";
@@ -266,23 +249,23 @@ Experimental features:
 
 ### experiments.cacheUnaffected
 
-Enable additional in-memory caching of modules which are unchanged and reference only unchanged modules.
+يُفعِّل تخزيناً مؤقَّتاً إضافياً في الذاكرة (in-memory) للوحدات التي لم تتغيّر، والتي لا تُشير إلا إلى وحدات لم تتغيّر هي الأخرى.
 
-- Type: `boolean`
+- النوع: `boolean`
 
-Defaults to the value of [`futureDefaults`](#experimentsfuturedefaults).
+القيمة الافتراضية مأخوذة من قيمة [`futureDefaults`](#experimentsfuturedefaults).
 
 ### experiments.deferImport
 
-Enable support of the tc39 proposal [the `import defer` proposal](https://github.com/tc39/proposal-defer-import-eval).
-This allows deferring the evaluation of a module until its first use.
-This is useful to synchronously defer code execution when it's not possible to use `import()` due to its asynchronous nature.
+فعِّل دعم اقتراح tc39 [اقتراح `import defer`](https://github.com/tc39/proposal-defer-import-eval).
+وهو يتيح تأجيل تقييم الوحدة إلى حين أوّل استعمال لها.
+وهذا مفيد لتأجيل تنفيذ الشيفرة بشكل متزامن حين لا يكون استعمال `import()` ممكناً بسبب طبيعته غير المتزامنة.
 
-- Type: `boolean`
+- النوع: `boolean`
 
-This feature requires the runtime environment to have [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) (ES6) support.
+تستلزم هذه الميزة أن تدعم بيئة الـ runtime [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) (ES6).
 
-Enables the following syntaxes:
+يُفعِّل الصياغات الآتية:
 
 {/* eslint-skip */}
 
@@ -290,33 +273,33 @@ Enables the following syntaxes:
 import defer * as module from "module-name";
 import * as module2 from /* webpackDefer: true */ "module-name2";
 
-// Or using dynamic import
+// أو باستعمال الاستيراد الديناميكي
 import.defer("module-name3");
 import(/* webpackDefer: true */ "module-name4");
 
 export function f() {
-  // module-name is evaluated synchronously, then call doSomething() on it.
+  // module-name تُقيَّم بشكل متزامن، ثمّ تُستدعى عليها doSomething().
   module.doSomething();
 }
 ```
 
-#### Limitations of magic comments (`/* webpackDefer: true */`)
+#### قيود التعليقات السحرية (`/* webpackDefer: true */`)
 
-It's suggested to put the magic comment after the `from` keyword. Other positions may work, but have not been tested.
+يُستحسَن وضع التعليق السحري بعد الكلمة المفتاحية `from`. قد تعمل المواضع الأخرى، غير أنّها لم تُختبر.
 
-Putting the magic comment after the `import` keyword is incompatible with the filesystem cache.
+ووضع التعليق السحري بعد الكلمة المفتاحية `import` غير متوافق مع filesystem cache.
 
 ### experiments.sourceImport
 
 <Badge text="5.106.0+" />
 
-Enable support for the tc39 proposal [Source Phase Imports](https://github.com/tc39/proposal-source-phase-imports).
+فعِّل دعم اقتراح tc39 [Source Phase Imports](https://github.com/tc39/proposal-source-phase-imports).
 
-This proposal introduces a way to import a module at the _source phase_ instead of immediately evaluating it. In webpack, this experimental support is currently implemented for **WebAssembly modules**: you obtain a compiled [`WebAssembly.Module`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module) first and instantiate it later with your own imports. Support for JavaScript source imports is planned for a future release.
+يُقدِّم هذا الاقتراح طريقة لاستيراد وحدةٍ في _مرحلة المصدر_ بدلاً من تقييمها فوراً. وفي webpack، هذا الدعم التجريبي مُطبَّق حالياً على **وحدات WebAssembly**: تحصل أوّلاً على [`WebAssembly.Module`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module) مُصرَّفة، ثمّ تُنشئ منها instance لاحقاً مع imports خاصّة بك. أمّا دعم استيرادات المصدر في JavaScript فمخطَّط له في إصدار قادم.
 
-- Type: `boolean`
+- النوع: `boolean`
 
-Enable it alongside `asyncWebAssembly`:
+فعِّله إلى جانب `asyncWebAssembly`:
 
 ```js
 // webpack.config.js
@@ -329,40 +312,40 @@ export default {
 };
 ```
 
-Then use either the static or dynamic source-phase syntax with a `.wasm` import:
+ثمّ استعمل صياغة source-phase الساكنة أو الديناميكية مع استيراد `.wasm`:
 
 ```text
-// Static form
+// الصيغة الساكنة
 import source wasmModule from "./module.wasm";
 
-// Dynamic form
+// الصيغة الديناميكية
 const wasmModule2 = await import.source("./module.wasm");
 
 const instance = await WebAssembly.instantiate(wasmModule);
 ```
 
-A full example is available in the webpack repository: [examples/wasm-simple-source-phase](https://github.com/webpack/webpack/tree/main/examples/wasm-simple-source-phase).
+ثمّة مثال كامل في مستودع webpack: [examples/wasm-simple-source-phase](https://github.com/webpack/webpack/tree/main/examples/wasm-simple-source-phase).
 
 {/* eslint-skip */}
 
 ```js
-import /* webpackDefer: true */ * as ns from "..."; // known broken
-import * as ns from /* webpackDefer: true */ "..."; // recommended
+import /* webpackDefer: true */ * as ns from "..."; // معلوم أنّه لا يعمل
+import * as ns from /* webpackDefer: true */ "..."; // الموصى به
 ```
 
-You should make sure your loaders do not remove the magic comment.
+تأكّد من أنّ الـ loaders لديك لا تحذف التعليق السحري.
 
-TypeScript, Babel, SWC, and Flow.js can be configured to preserve the magic comment.
+ويمكن ضبط TypeScript و Babel و SWC و Flow.js للحفاظ على التعليق السحري.
 
-Esbuild is _not_ compatible with this feature (see [evanw/esbuild#1439](https://github.com/evanw/esbuild/issues/1439) and [evanw/esbuild#309](https://github.com/evanw/esbuild/issues/309)), but it may support this in the future.
+أمّا Esbuild فهو _غير_ متوافق مع هذه الميزة (انظر [evanw/esbuild#1439](https://github.com/evanw/esbuild/issues/1439) و [evanw/esbuild#309](https://github.com/evanw/esbuild/issues/309))، وإن كان قد يدعمها في المستقبل.
 
 <Badge text="5.105.0+" />
 
-`import.defer()` is now supported for ContextModule (the import path is a dynamic expression). See the [lazy loading guide](/guides/lazy-loading/#defer-import-example) for examples.
+`import.defer()` صار مدعوماً الآن لـ ContextModule (حين يكون مسار الاستيراد تعبيراً ديناميكياً). انظر [دليل التحميل الكسول](/guides/lazy-loading/#defer-import-example) للأمثلة.
 
 ### experiments.futureDefaults
 
-Use defaults of the next major webpack and show warnings in any problematic places.
+استعمل القيم الافتراضية لإصدار webpack الرئيسي القادم، واعرض تحذيرات في أيّ موضع قد يكون إشكالياً.
 
 **webpack.config.js**
 
@@ -489,15 +472,15 @@ Placing an HTML `<!-- webpackIgnore: true -->` comment immediately before a tag
 
 ### experiments.lazyCompilation
 
-Compile entrypoints and dynamic `import`s only when they are in use. It can be used for either Web or Node.js.
+صرِّف نقاط الدخول و `import` الديناميكية فقط حين تكون مستعملة. يمكن استعماله للويب أو لـ Node.js.
 
-- Type
+- النوع
   - `boolean`
   - `object`
 
     ```ts
     {
-      // define a custom backend
+      // عرِّف backend مخصَّصاً
       backend?: ((
         compiler: Compiler,
         callback: (err?: Error, api?: BackendApi) => void
@@ -505,22 +488,22 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u
         | ((compiler: Compiler) => Promise<BackendApi>)
         | {
           /**
-           * A custom client.
+           * عميل مخصَّص.
            */
           client?: string;
 
           /**
-           * Specify where to listen to from the server.
+           * حدِّد المنفذ الذي يستمع إليه الخادوم.
            */
           listen?: number | ListenOptions | ((server: Server) => void);
 
           /**
-           * Specify the protocol the client should use to connect to the server.
+           * حدِّد البروتوكول الذي يستعمله العميل للاتصال بالخادوم.
            */
           protocol?: "http" | "https";
 
           /**
-           * Specify how to create the server handling the EventSource requests.
+           * حدِّد طريقة إنشاء الخادوم الذي يُعالج طلبات EventSource.
            */
           server?: ServerOptionsImport | ServerOptionsHttps | (() => Server);
         },
@@ -530,13 +513,13 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u
     }
     ```
 
-    - `backend`: Customize the backend.
-    - `entries`: Enable lazy compilation for entries.
-    - `imports` <Badge text='5.20.0+' />: Enable lazy compilation for dynamic imports.
-    - `test` <Badge text='5.20.0+' />: Specify which imported modules should be lazily compiled.
+    - `backend`: خصِّص الـ backend.
+    - `entries`: فعِّل التصريف الكسول لنقاط الدخول.
+    - `imports` <Badge text='5.20.0+' />: فعِّل التصريف الكسول للاستيرادات الديناميكية.
+    - `test` <Badge text='5.20.0+' />: حدِّد أيّ الوحدات المستوردة ينبغي تصريفها كسولياً.
 
-- Available: 5.17.0+
-- Example 1:
+- متاح: 5.17.0+
+- مثال 1:
 
   ```js
   export default {
@@ -547,20 +530,20 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u
   };
   ```
 
-- Example 2:
+- مثال 2:
 
   ```js
   export default {
     // …
     experiments: {
       lazyCompilation: {
-        // disable lazy compilation for dynamic imports
+        // عطِّل التصريف الكسول للاستيرادات الديناميكية
         imports: false,
 
-        // disable lazy compilation for entries
+        // عطِّل التصريف الكسول لنقاط الدخول
         entries: false,
 
-        // do not lazily compile moduleB
+        // لا تُصرِّف moduleB كسولياً
         test: (module) => !/moduleB/.test(module.nameForCondition()),
       },
     },
@@ -571,7 +554,7 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u
 
 `boolean`
 
-Once enabled, webpack will output ECMAScript module syntax whenever possible. For instance, `import()` to load chunks, ESM exports to expose chunk data, among others.
+حين يُفعَّل هذا الخيار، سيُخرج webpack صياغة وحدات ECMAScript كلّما كان ذلك ممكناً. فعلى سبيل المثال، يستعمل `import()` لتحميل الـ chunks، و ESM exports لكشف بيانات الـ chunk، وغير ذلك.
 
 ```js
 export default {
diff --git a/src/content/configuration/extending-configurations.mdx b/src/content/configuration/extending-configurations.mdx
index ce260fd890c4..528192b35a1e 100644
--- a/src/content/configuration/extending-configurations.mdx
+++ b/src/content/configuration/extending-configurations.mdx
@@ -2,19 +2,18 @@
 title: Extends
 sort: 12
 contributors:
-  - burhanuday
-  - tusharthakur04
+  - RlxChap2
 ---
 
-## extends
+## يمتد
 
 `string | string[]`
 
 <Badge text="webpack v5.82.0+" /> <Badge text="webpack-cli v5.1.0+" />
 
-The `extends` property allows you to extend an existing configuration to use as the base. It internally uses the `webpack-merge` package to merge the configurations and helps you to avoid duplicating configurations between multiple configurations.
+تتيح لك الخاصية `extends` أن توسِّع تخصيصاً قائماً لتجعله أساساً تبني عليه. وهي تعتمد داخلياً على الحزمة `webpack-merge` لدمج التخصيصات، فتُعينك على تجنّب تكرار نفس الإعدادات بين عدّة ملفات تخصيص.
 
-W> **This option is not supported via the Node API**: Extends will have no effect when using the Node API. webpack-cli is required to use this feature.
+W> **لا يدعم هذا الخيار Node API**: لن يُنتج `extends` أيّ أثر إن استخدمت Node API، إذ يلزم وجود webpack-cli لتشتغل هذه الميزة.
 
 **base.webpack.config.js**
 
@@ -60,11 +59,11 @@ export default {
 };
 ```
 
-## Extending multiple configurations
+## توسعة عدّة تخصيصات
 
-You can extend multiple configurations at once by passing an array of configuration paths to the `extends` property.
+يمكنك أن توسِّع عدّة تخصيصات دفعةً واحدة بأن تُمرِّر مصفوفة من مسارات التخصيص إلى الخاصية `extends`.
 
-Configurations from the `extends` property are merged from right to left, meaning that the configuration on the right will be merged into the configuration on the left. Configuration can be overridden by passing the same property in the configuration on the right.
+تُدمَج التخصيصات الواردة في `extends` من اليمين إلى اليسار، بمعنى أنّ التخصيص الواقع على اليمين يندمج داخل التخصيص الواقع على اليسار. ويمكنك تجاوز قيمة ما بأن تُمرِّر نفس الخاصية في التخصيص الواقع على اليمين.
 
 **js.webpack.config.js**
 
@@ -119,9 +118,9 @@ export default {
 };
 ```
 
-## Overriding Configurations
+## تجاوز التخصيصات
 
-You can override configurations from the extended configuration by passing the same property in the configuration that extends it.
+يمكنك تجاوز ما ورد في التخصيص المُوسَّع بأن تُمرِّر نفس الخاصية في التخصيص الذي يوسِّعه.
 
 **base.webpack.config.js**
 
@@ -152,7 +151,7 @@ const __dirname = path.dirname(__filename);
 export default {
   extends: path.resolve(__dirname, "./base.webpack.config.js"),
   entry: "./src/index.js",
-  // overriding the output path and filename
+  // تجاوز مسار الإخراج واسم الملفّ
   output: {
     path: path.resolve(__dirname, "build"),
     filename: "[name].bundle.js",
@@ -160,9 +159,9 @@ export default {
 };
 ```
 
-## Concatinating rules and plugins
+## ضمّ الـ rules والـ plugins
 
-While primitive values (such as strings) are overridden, array fields are concatenated instead of replaced. This behavior comes from webpack-merge, which Webpack uses internally when processing extends.
+في حين أنّ القيم البدائية (كالنصوص) يُكتب فوقها، فإنّ حقول المصفوفات تُضمّ بعضها إلى بعض بدلاً من أن يُستبدل أحدها بالآخر. وهذا السلوك مصدره `webpack-merge` التي يستعملها webpack داخلياً عند معالجة `extends`.
 
 **base.webpack.config.js**
 
@@ -212,9 +211,9 @@ export default {
 };
 ```
 
-**Result after merging**
+**النتيجة بعد الدمج**
 
-Instead of module being replaced the rules and plugins array got concatenated
+بدلاً من أن يُستبدل `module` بكامله، فإنّ مصفوفتي `rules` و`plugins` قد ضُمّتا.
 
 ```js
 import webpack from "webpack";
@@ -222,13 +221,13 @@ import webpack from "webpack";
 export default {
   module: {
     rules: [
-      // From base.webpack.config.js
+      // من base.webpack.config.js
       {
         test: /\.js$/,
         use: "babel-loader",
       },
 
-      // From webpack.config.js (appended)
+      // من webpack.config.js (مُلحَق)
       {
         test: /\.css$/,
         use: ["style-loader", "css-loader"],
@@ -237,20 +236,20 @@ export default {
   },
 
   plugins: [
-    // From base.webpack.config.js
+    // من base.webpack.config.js
     new webpack.DefinePlugin({
       __DEV__: false,
     }),
 
-    // From webpack.config.js (appended)
+    // من webpack.config.js (مُلحَق)
     new webpack.HotModuleReplacementPlugin(),
   ],
 };
 ```
 
-## Loading configuration from external packages
+## تحميل التخصيص من حزم خارجية
 
-You can also load configuration from third-party packages by passing the package name to the `extends` property. The package must export the webpack configuration in package.json.
+يمكنك أيضاً تحميل التخصيص من حزم طرف ثالث بتمرير اسم الحزمة إلى الخاصية `extends`. ويُشترط أن تُصدِّر الحزمة تخصيص webpack ضمن ملف package.json.
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/externals.mdx b/src/content/configuration/externals.mdx
index cd22e55df20a..f8fe2159f4ae 100644
--- a/src/content/configuration/externals.mdx
+++ b/src/content/configuration/externals.mdx
@@ -2,35 +2,18 @@
 title: Externals
 sort: 15
 contributors:
-  - sokra
-  - skipjack
-  - pksjce
-  - fadysamirsadek
-  - byzyk
-  - zefman
-  - Mistyyyy
-  - jamesgeorge007
-  - tanhauhau
-  - snitin315
-  - beejunk
-  - EugeneHlushko
-  - chenxsan
-  - pranshuchittora
-  - kinetifex
-  - anshumanv
-  - SaulSilver
-  - fi3ework
+  - RlxChap2
 ---
 
-The `externals` configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment. This feature is typically most useful to **library developers**, however there are a variety of applications for it.
+يوفر خيار التخصيص `externals` طريقة لاستبعاد dependencies من output bundles. بدلاً من ذلك، يعتمد bundle الذي تم إنشاؤه على dependency ليكون موجودًا في بيئة المستهلك (أي تطبيق مستخدم نهائي). عادةً ما تكون هذه الميزة مفيدة للغاية لمطوري **library**، ولكن هناك مجموعة متنوعة من التطبيقات لها.
 
 ## externals
 
 `string` `object` `function` `RegExp` `[string, object, function, RegExp]`
 
-**Prevent bundling** of certain `import`ed packages and instead retrieve these _external dependencies_ at runtime.
+**منع التجميع** لبعض `import`ed packages وبدلاً من ذلك قم باسترداد هذه التبعيات _الخارجية_ في runtime.
 
-For example, to include [jQuery](https://jquery.com/) from a CDN instead of bundling it:
+على سبيل المثال، لتضمين [jQuery](https://jquery.com/) من CDN بدلاً من تجميعه:
 
 **index.html**
 
@@ -53,7 +36,7 @@ export default {
 };
 ```
 
-This leaves any dependent modules unchanged, i.e. the code shown below will still work:
+وهذا يترك أي تابع modules دون تغيير، أي أن الكود الموضح أدناه سيظل يعمل:
 
 ```js
 import $ from "jquery";
@@ -61,15 +44,15 @@ import $ from "jquery";
 $(".my-element").animate(/* ... */);
 ```
 
-The property name `jquery` specified under `externals` in the above `webpack.config.js` indicates that the module `jquery` in `import $ from 'jquery'` should be excluded from bundling. In order to replace this module, the value `jQuery` will be used to retrieve a global `jQuery` variable, as the default external library type is `var`, see [externalsType](#externalstype).
+يشير اسم الخاصية `jquery` المحدد ضمن `externals` في `webpack.config.js` أعلاه إلى أنه يجب استبعاد module `jquery` في `import $ from 'jquery'` من التجميع. لاستبدال module، سيتم استخدام القيمة `jQuery` لاسترداد متغير `jQuery` عام، حيث أن النوع الافتراضي external library هو `var`، راجع [externalsType](#externalstype).
 
-While we showed an example consuming external global variable above, the external can actually be available in any of these forms: global variable, CommonJS, AMD, ES2015 Module, see more in [externalsType](#externalstype).
+بينما أظهرنا مثالًا يستهلك external global variable أعلاه، يمكن أن يكون external متاحًا فعليًا في أي من هذه النماذج: global variable، CommonJS، AMD، ES2015 Module، راجع المزيد في [externalsType](#externalstype).
 
 ### string
 
-Depending on the [externalsType](#externalstype), this could be the name of the global variable (see [`'global'`](#externalstypeglobal), [`'this'`](#externalstypethis), [`'var'`](#externalstypevar), [`'window'`](#externalstypewindow)) or the name of the module (see `amd`, [`commonjs`](#externalstypecommonjs), [`module`](#externalstypemodule), `umd`).
+اعتمادًا على [externalsType](#externalstype)، يمكن أن يكون هذا اسم global variable (راجع [`'global'`](#externalstypeglobal)، [`'this'`](#externalstypethis)، [`'var'`](#externalstypevar)، [`'window'`](#externalstypewindow)) أو اسم module (راجع `amd`، [`commonjs`](#externalstypecommonjs)، [`module`](#externalstypemodule)، `umd`).
 
-You can also use the shortcut syntax if you're defining only 1 external:
+يمكنك أيضًا استخدام صيغة الاختصار إذا كنت تحدد 1 external فقط:
 
 ```js
 export default {
@@ -78,7 +61,7 @@ export default {
 };
 ```
 
-equals to
+يساوي
 
 ```js
 export default {
@@ -89,9 +72,9 @@ export default {
 };
 ```
 
-You can specify the [external library type](#externalstype) to the external with the `${externalsType} ${libraryName}` syntax. It will override the default external library type specified in the [externalsType](#externalstype) option.
+يمكنك تحديد [external library النوع](#externalstype) إلى external باستخدام بناء الجملة `${externalsType} ${libraryName}`. وسوف يتجاوز النوع الافتراضي external library المحدد في الخيار [externalsType](#externalstype).
 
-For example, if the external library is a [CommonJS module](#externalstypecommonjs), you can specify
+على سبيل المثال، إذا كان external library هو [CommonJS module](#externalstypecommonjs)، فيمكنك تحديد
 
 ```js
 export default {
@@ -113,11 +96,11 @@ export default {
 };
 ```
 
-`subtract: ['./math', 'subtract']` allows you select part of a module, where `./math` is the module and your bundle only requires the subset under the `subtract` variable.
+`subtract: ['./math', 'subtract']` يسمح لك بتحديد جزء من module، حيث `./math` هو module وbundle الخاص بك يتطلب فقط المجموعة الفرعية ضمن المتغير `subtract`.
 
-When the `externalsType` is `commonjs`, this example would translate to `require('./math').subtract;` while when the `externalsType` is `window`, this example would translate to `window["./math"]["subtract"];`
+عندما يكون `externalsType` هو `commonjs`، سيترجم هذا المثال إلى `require('./math').subtract;` بينما عندما يكون `externalsType` هو `window`، سيترجم هذا المثال إلى `window["./math"]["subtract"];`
 
-Similar to the [string syntax](#string), you can specify the external library type with the `${externalsType} ${libraryName}` syntax, in the first item of the array, for example:
+على غرار بناء الجملة [string](#string)، يمكنك تحديد النوع external library باستخدام بناء الجملة `${externalsType} ${libraryName}`، في العنصر الأول من array، على سبيل المثال:
 
 ```js
 export default {
@@ -130,7 +113,7 @@ export default {
 
 ### object
 
-W> An object with `{ root, amd, commonjs, ... }` is only allowed for [`libraryTarget: 'umd'`](/configuration/output/#outputlibrarytarget) and [`externalsType: 'umd'`](#externalstype). It's not allowed for other library targets.
+W> يُسمح بـ object مع `{ root, amd, commonjs, ... }` فقط لـ [`libraryTarget: 'umd'`](/configuration/output/#outputlibrarytarget) و[`externalsType: 'umd'`](#externalstype). لا يجوز للآخرين library targets.
 
 ```js
 export default {
@@ -168,31 +151,31 @@ export default {
 };
 ```
 
-This syntax is used to describe all the possible ways that an external library can be made available. `lodash` here is available as `lodash` under AMD and CommonJS module systems but available as `_` in a global variable form. `subtract` here is available via the property `subtract` under the global `math` object (e.g. `window['math']['subtract']`).
+يتم استخدام بناء الجملة هذا لوصف جميع الطرق الممكنة لتوفير external library. `lodash` هنا متاح كـ `lodash` ضمن أنظمة AMD وCommonJS module ولكنه متاح كـ `_` في شكل متغير عام. `subtract` هنا متاح عبر الخاصية `subtract` ضمن `math` object (على سبيل المثال `window['math']['subtract']`).
 
 ### function
 
 - `function ({ context, request, contextInfo, getResolve }, callback)`
 - `function ({ context, request, contextInfo, getResolve }) => promise` <Badge text='5.15.0+' />
 
-It might be useful to define your own function to control the behavior of what you want to externalize from webpack. [webpack-node-externals](https://www.npmjs.com/package/webpack-node-externals), for example, excludes all modules from the `node_modules` directory and provides options to allowlist packages.
+قد يكون من المفيد تحديد function الخاص بك للتحكم في سلوك ما تريد إخراجه من webpack. على سبيل المثال، يستبعد [webpack-node-externals](https://www.npmjs.com/package/webpack-node-externals) جميع modules من الدليل `node_modules` ويوفر خيارات للقائمة المسموح بها packages.
 
-Here're arguments the function can receive:
+فيما يلي الوسائط التي يمكن أن يستقبلها function:
 
-- `ctx` (`object`): Object containing details of the file.
-  - `ctx.context` (`string`): The directory of the file which contains the import.
-  - `ctx.request` (`string`): The import path being requested.
-  - `ctx.contextInfo` (`object`): Contains information about the issuer (e.g. the layer and compiler)
-  - `ctx.getResolve` <Badge text='5.15.0+' />: Get a resolve function with the current resolver options.
-- `callback` (`function (err, result, type)`): Callback function used to indicate how the module should be externalized.
+- `ctx` (`object`): Object يحتوي على تفاصيل الملف.
+  - `ctx.context` (`string`): دليل الملف الذي يحتوي على الاستيراد.
+  - `ctx.request` (`string`): مسار الاستيراد المطلوب.
+  - `ctx.contextInfo` (`object`): يحتوي على معلومات حول جهة الإصدار (على سبيل المثال، الطبقة وcompiler)
+  - `ctx.getResolve` <Badge text='5.15.0+' />: احصل على resolve function مع خيارات resolver الحالية.
+- `callback` (`function (err, result, type)`): رد الاتصال function يستخدم للإشارة إلى كيفية module يجب أن يتم إضفاء الطابع الخارجي عليها.
 
-The callback function takes three arguments:
+يأخذ رد الاتصال function ثلاث وسائط:
 
-- `err` (`Error`): Used to indicate if there has been an error while externalizing the import. If there is an error, this should be the only parameter used.
-- `result` (`string` `[string]` `object`): Describes the external module with the other external formats ([`string`](#string), [`[string]`](#string-1), or [`object`](#object))
-- `type` (`string`): Optional parameter that indicates the module [external type](#externalstype) (if it has not already been indicated in the `result` parameter).
+- `err` (`Error`): يُستخدم للإشارة إلى ما إذا كان هناك خطأ أثناء تنفيذ الاستيراد خارجيًا. إذا كان هناك خطأ، فيجب أن تكون هذه هي المعلمة الوحيدة المستخدمة.
+- `result` (`string` `[string]` `object`): يصف external module مع تنسيقات external الأخرى ([`string`](#string)، [`[string]`](#string-1)، أو [`object`](#object))
+- `type` (`string`): معلمة اختيارية تشير إلى module [نوع external](#externalstype) (إذا لم تتم الإشارة إليها بالفعل في المعلمة `result`).
 
-As an example, to externalize all imports where the import path matches a regular expression you could do the following:
+على سبيل المثال، لإضفاء الطابع الخارجي على جميع عمليات الاستيراد حيث يتطابق مسار الاستيراد مع تعبير عادي، يمكنك القيام بما يلي:
 
 **webpack.config.js**
 
@@ -202,18 +185,18 @@ export default {
   externals: [
     function ({ context, request }, callback) {
       if (/^yourregex$/.test(request)) {
-        // Externalize to a commonjs module using the request path
+        // إضفاء الطابع الخارجي على Commonjs module باستخدام مسار الطلب
         return callback(null, `commonjs ${request}`);
       }
 
-      // Continue without externalizing the import
+      // استمر دون الاستعانة بمصادر خارجية للاستيراد
       callback();
     },
   ],
 };
 ```
 
-Other examples using different module formats:
+أمثلة أخرى تستخدم تنسيقات module مختلفة:
 
 **webpack.config.js**
 
@@ -221,7 +204,7 @@ Other examples using different module formats:
 export default {
   externals: [
     function (ctx, callback) {
-      // The external is a `commonjs2` module located in `@scope/library`
+      // external هو `commonjs2` module يقع في `@scope/library`
       callback(null, "@scope/library", "commonjs2");
     },
   ],
@@ -234,7 +217,7 @@ export default {
 export default {
   externals: [
     function (ctx, callback) {
-      // The external is a global variable called `nameOfGlobal`.
+      // external هو متغير عام يسمى `nameOfGlobal`.
       callback(null, "nameOfGlobal");
     },
   ],
@@ -247,7 +230,7 @@ export default {
 export default {
   externals: [
     function (ctx, callback) {
-      // The external is a named export in the `@scope/library` module.
+      // external عبارة عن تصدير مسمى في `@scope/library` module.
       callback(null, ["@scope/library", "namedexport"], "commonjs");
     },
   ],
@@ -260,7 +243,7 @@ export default {
 export default {
   externals: [
     function (ctx, callback) {
-      // The external is a UMD module
+      // external هو UMD module
       callback(null, {
         root: "componentsGlobal",
         commonjs: "@scope/components",
@@ -274,7 +257,7 @@ export default {
 
 ### RegExp
 
-Every dependency that matches the given regular expression will be excluded from the output bundles.
+سيتم استبعاد كل dependency الذي يطابق التعبير العادي المحدد من output bundles.
 
 **webpack.config.js**
 
@@ -285,11 +268,11 @@ export default {
 };
 ```
 
-In this case, any dependency named `jQuery`, capitalized or not, or `$` would be externalized.
+في هذه الحالة، أي dependency مسمى `jQuery`، سواء كان مكتوبًا بأحرف كبيرة أم لا، أو `في هذه الحالة، أي dependency مسمى `jQuery`، سواء كان مكتوبًا بأحرف كبيرة أم لا، أو  سيتم إضفاء الطابع الخارجي عليه.
 
-### Combining syntaxes
+### الجمع بين النحو
 
-Sometimes you may want to use a combination of the above syntaxes. This can be done in the following manner:
+في بعض الأحيان قد ترغب في استخدام مجموعة من بناء الجملة أعلاه. ويمكن القيام بذلك بالطريقة التالية:
 
 **webpack.config.js**
 
@@ -316,21 +299,21 @@ export default {
       }
       callback();
     },
-    // Regex
+    // التعبير العادي
     /^(jquery|\$)$/i,
   ],
 };
 ```
 
-W> [Default type](/configuration/externals/#externalstype) will be used if you specify `externals` without a type e.g. `externals: { react: 'react' }` instead of `externals: { react: 'commonjs-module react' }`.
+W> سيتم استخدام [النوع الافتراضي](/configuration/externals/#externalstype) إذا حددت `externals` بدون نوع، على سبيل المثال، `externals: { react: 'react' }` بدلاً من `externals: { react: 'commonjs-module react' }`.
 
-For more information on how to use this configuration, please refer to the article on [how to author a library](/guides/author-libraries).
+لمزيد من المعلومات حول كيفية استخدام هذا التخصيص، يرجى الرجوع إلى المقالة حول [كيفية تأليف library](/guides/author-libraries).
 
 ### byLayer
 
 `function` `object`
 
-Specify externals by layer.
+حدد externals حسب الطبقة.
 
 **webpack.config.js**
 
@@ -346,27 +329,27 @@ export default {
 };
 ```
 
-## externalsType
+## ExternalsType
 
 `string = 'var'`
 
-Specify the default type of externals. `amd`, `umd`, `system` and `jsonp` externals **depend on the [`output.libraryTarget`](/configuration/output/#outputlibrarytarget)** being set to the same value e.g. you can only consume `amd` externals within an `amd` library.
+حدد النوع الافتراضي لـ externals. `amd`، `umd`، `system` و `jsonp` externals **تعتمد على [`output.libraryTarget`](/configuration/output/#outputlibrarytarget)** التي تم ضبطها على نفس القيمة على سبيل المثال، يمكنك فقط استهلاك `amd` externals داخل `amd` library.
 
-Supported types:
+الأنواع المدعومة:
 
 - `'amd'`
 - `'amd-require'`
-- `'assign'` - same as `'var'`
+- `'assign'` - نفس `'var'`
 - [`'commonjs'`](#externalstypecommonjs)
 - `'commonjs-module'`
 - [`'global'`](#externalstypeglobal)
-- `'import'` - uses `import()` to load a native EcmaScript module (async module)
+- `'import'` - يستخدم `import()` لتحميل ECMAScript أصلي module (غير متزامن module)
 - `'jsonp'`
 - [`'module'`](#externalstypemodule)
 - [`'import'`](#externalstypeimport)
 - [`'module-import'`](#externalstypemodule-import)
 - [`'node-commonjs'`](#externalstypenode-commonjs)
-- [`'promise'`](#externalstypepromise) - same as `'var'` but awaits the result (async module)
+- [`'promise'`](#externalstypepromise) - نفس `'var'` ولكنه ينتظر النتيجة (غير متزامن module)
 - [`'self'`](#externalstypeself)
 - `'system'`
 - [`'script'`](#externalstypescript)
@@ -387,9 +370,9 @@ export default {
 
 ### externalsType.commonjs
 
-Specify the default type of externals as `'commonjs'`. Webpack will generate code like `const X = require('...')` for externals used in a module.
+حدد النوع الافتراضي لـ externals كـ `'commonjs'`. سيقوم webpack بإنشاء رمز مثل `const X = require('...')` لـ externals المستخدم في module.
 
-#### Example
+#### مثال
 
 ```js
 import fs from "fs-extra";
@@ -407,19 +390,19 @@ export default {
 };
 ```
 
-Will generate into something like:
+سوف تولد إلى شيء مثل:
 
 ```js
 import fs from "fs-extra";
 ```
 
-Note that there will be a `require()` in the output bundle.
+لاحظ أنه سيكون هناك `require()` في output bundle.
 
 ### externalsType.global
 
-Specify the default type of externals as `'global'`. Webpack will read the external as a global variable on the [`globalObject`](/configuration/output/#outputglobalobject).
+حدد النوع الافتراضي لـ externals كـ `'global'`. webpack سوف يقرأ external كمتغير عام على [`globalObject`](/configuration/output/#outputglobalobject).
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -442,7 +425,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 const jq = globalThis.$;
@@ -452,11 +435,11 @@ jq(".my-element").animate(/* ... */);
 
 ### externalsType.module
 
-Specify the default type of externals as `'module'`. Webpack will generate code like `import * as X from '...'` for externals used in a module.
+حدد النوع الافتراضي لـ externals كـ `'module'`. سيقوم webpack بإنشاء رمز مثل `import * as X from '...'` لـ externals المستخدم في module.
 
-Make sure to enable [`experiments.outputModule`](/configuration/experiments/#experimentsoutputmodule) first, otherwise webpack will throw errors.
+تأكد من تمكين [`experiments.outputModule`](/configuration/experiments/#experimentsoutputmodule) أولاً، وإلا فإن webpack سوف يؤدي إلى حدوث أخطاء.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -478,7 +461,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 import * as __WEBPACK_EXTERNAL_MODULE_jquery__ from "jquery";
@@ -487,7 +470,7 @@ const jq = __WEBPACK_EXTERNAL_MODULE_jquery__.default;
 jq(".my-element").animate(/* ... */);
 ```
 
-Note that there will be an `import` statement in the output bundle.
+لاحظ أنه سيكون هناك عبارة `import` في output bundle.
 
 #### Preserving phase keywords
 
@@ -511,9 +494,9 @@ import source v from "external-mod";
 
 <Badge text="5.94.0+" />
 
-Specify the default type of externals as `'import'`. Webpack will generate code like `import('...')` for externals used in a module.
+حدد النوع الافتراضي لـ externals كـ `'import'`. سيقوم webpack بإنشاء رمز مثل `import('...')` لـ externals المستخدم في module.
 
-#### Example
+#### مثال
 
 ```js
 async function foo() {
@@ -533,7 +516,7 @@ export default {
 };
 ```
 
-Will generate something like below:
+سوف تولد شيئا مثل أدناه:
 
 ```js
 const __webpack_modules__ = {
@@ -552,7 +535,7 @@ async function foo() {
 }
 ```
 
-Note that the output bundle will have an `import()` statement.
+لاحظ أن output bundle سيحتوي على عبارة `import()`.
 
 #### Preserving phase keywords
 
@@ -576,11 +559,11 @@ const src = await import.source("external-mod");
 
 <Badge text="5.94.0+" />
 
-Specify the default type of externals as `'module-import'`. This combines [`'module'`](#externalstypemodule) and [`'import'`](#externalstypeimport). Webpack will automatically detect the type of import syntax, setting it to `'module'` for static imports and `'import'` for dynamic imports.
+حدد النوع الافتراضي لـ externals كـ `'module-import'`. يجمع هذا بين [`'module'`](#externalstypemodule) و[`'import'`](#externalstypeimport). سيكتشف webpack تلقائيًا نوع صيغة الاستيراد، ويضبطه على `'module'` للواردات الثابتة و`'import'` للواردات الديناميكية.
 
-Ensure to enable [`experiments.outputModule`](/configuration/experiments/#experimentsoutputmodule) first if static imports exist, otherwise, webpack will throw errors.
+تأكد من تمكين [`experiments.outputModule`](/configuration/experiments/#experimentsoutputmodule) أولاً في حالة وجود عمليات استيراد ثابتة، وإلا فسيؤدي webpack إلى ظهور أخطاء.
 
-#### Example
+#### مثال
 
 ```js
 import { attempt } from "lodash";
@@ -603,7 +586,7 @@ export default {
 };
 ```
 
-Will generate something like below:
+سوف تولد شيئا مثل أدناه:
 
 ```js
 import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";
@@ -626,9 +609,9 @@ async function foo() {
 }
 ```
 
-Note that the output bundle will have an `import` or `import()` statement.
+لاحظ أن output bundle سيحتوي على عبارة `import` أو `import()`.
 
-When a module is not imported via `import` or `import()`, webpack will use the `"module"` externals type as a fallback. If you want to use a different kind of externals as a fallback, you can specify it with a function in the `externals` option. For example:
+عندما لا يتم استيراد module عبر `import` أو `import()`، فإن webpack سيستخدم النوع `"module"` externals كبديل. إذا كنت تريد استخدام نوع مختلف من externals كبديل، يمكنك تحديده باستخدام function في الخيار `externals`. على سبيل المثال:
 
 ```js
 export default {
@@ -646,9 +629,9 @@ export default {
 
 ### externalsType.node-commonjs
 
-Specify the default type of externals as `'node-commonjs'`. Webpack will import [`createRequire`](https://nodejs.org/api/module.html#module_module_createrequire_filename) from `'module'` to construct a require function for loading externals used in a module.
+حدد النوع الافتراضي لـ externals كـ `'node-commonjs'`. سوف يقوم webpack باستيراد [`createRequire`](https://nodejs.org/api/module.html#module_module_createrequire_filename) من `'module'` لإنشاء طلب function للتحميل externals المستخدم في module.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -670,7 +653,7 @@ module.export = {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 import { createRequire } from "node:module";
@@ -679,11 +662,11 @@ const jq = createRequire(import.meta.url)("jquery");
 jq(".my-element").animate(/* ... */);
 ```
 
-Note that there will be an `import` statement in the output bundle.
+لاحظ أنه سيكون هناك عبارة `import` في output bundle.
 
-This is useful when dependencies rely on Node.js built-in modules or require a CommonJS-style `require` function to preserve prototypes, which is necessary for functions like [`util.inherits`](https://nodejs.org/api/util.html#utilinheritsconstructor-superconstructor). Refer to [this issue](https://github.com/webpack/webpack.js.org/issues/7446) for more details.
+يكون هذا مفيدًا عندما يعتمد dependencies على Node.js المضمن modules أو يتطلب نمط CommonJS `require` function للحفاظ على النماذج الأولية، وهو أمر ضروري لوظائف مثل [`util.inherits`](https://nodejs.org/api/util.html#utilinheritsconstructor-superconstructor). راجع [هذه المشكلة](https://github.com/webpack/webpack.js.org/issues/7446) لمزيد من التفاصيل.
 
-For code that relies on prototype structures, like:
+بالنسبة للتعليمات البرمجية التي تعتمد على بنيات النموذج الأولي، مثل:
 
 ```js
 function ChunkStream() {
@@ -692,7 +675,7 @@ function ChunkStream() {
 util.inherits(ChunkStream, Stream);
 ```
 
-You can use `node-commonjs` to ensure that the prototype chain is preserved:
+يمكنك استخدام `node-commonjs` لضمان الحفاظ على سلسلة النموذج الأولي:
 
 ```js
 const { builtinModules } = require("node:module");
@@ -709,7 +692,7 @@ export default {
 };
 ```
 
-This produces something like:
+وهذا ينتج شيئًا مثل:
 
 {/* eslint-disable */}
 
@@ -729,13 +712,13 @@ const __webpack_modules__ = {
 };
 ```
 
-This setup keeps the prototype structure intact, resolving issues with Node.js built-ins.
+يحافظ هذا الإعداد على بنية النموذج الأولي سليمة، مما يؤدي إلى حل مشكلات Node.js المضمنة.
 
 ### externalsType.promise
 
-Specify the default type of externals as `'promise'`. Webpack will read the external as a global variable (similar to [`'var'`](#externalstypevar)) and `await` for it.
+حدد النوع الافتراضي لـ externals كـ `'promise'`. webpack سوف يقرأ external كمتغير عام (مشابه لـ [`'var'`](#externalstypevar)) و`await` له.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -755,7 +738,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 const jq = await $;
@@ -765,9 +748,9 @@ jq(".my-element").animate(/* ... */);
 
 ### externalsType.self
 
-Specify the default type of externals as `'self'`. Webpack will read the external as a global variable on the `self` object.
+حدد النوع الافتراضي لـ externals كـ `'self'`. webpack سوف يقرأ external كمتغير عام على `self` object.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -787,7 +770,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 const jq = globalThis.$;
@@ -797,9 +780,9 @@ jq(".my-element").animate(/* ... */);
 
 ### externalsType.script
 
-Specify the default type of externals as `'script'`. Webpack will load the external as a script exposing predefined global variables with HTML `<script>` element. The `<script>` tag would be removed after the script has been loaded.
+حدّد النوع الافتراضي لـ externals كـ `'script'`. سيحمّل webpack الـ external بوصفه script يعرّض global variables محددة مسبقًا عبر عنصر HTML `<script>`. وتُزال علامة `<script>` بعد تحميل script.
 
-#### Syntax
+#### بناء الجملة
 
 ```js
 export default {
@@ -815,7 +798,7 @@ export default {
 };
 ```
 
-You can also use the shortcut syntax if you're not going to specify any properties:
+يمكنك أيضًا استخدام صيغة الاختصار إذا كنت لن تحدد أي خصائص:
 
 ```js
 export default {
@@ -826,11 +809,11 @@ export default {
 };
 ```
 
-Note that [`output.publicPath`](/configuration/output/#outputpublicpath) won't be added to the provided URL.
+لاحظ أنه لن تتم إضافة [`output.publicPath`](/configuration/output/#outputpublicpath) إلى عنوان URL المقدم.
 
-#### Example
+#### مثال
 
-Let's load a `lodash` from CDN:
+لنقم بتحميل `lodash` من CDN:
 
 **webpack.config.js**
 
@@ -844,7 +827,7 @@ export default {
 };
 ```
 
-Then use it in code:
+ثم استخدمه في الكود:
 
 ```js
 import _ from "lodash";
@@ -852,7 +835,7 @@ import _ from "lodash";
 console.log(_.head([1, 2, 3]));
 ```
 
-Here's how we specify properties for the above example:
+إليك كيفية تحديد خصائص المثال أعلاه:
 
 ```js
 export default {
@@ -868,7 +851,7 @@ export default {
 };
 ```
 
-Both local variable `head` and global `window._` will be exposed when you `import` `lodash`:
+سيتم عرض كل من المتغير المحلي `head` وglobal variable `window._` عندما تقوم `import` `lodash`:
 
 ```js
 import head from "lodash";
@@ -877,19 +860,19 @@ console.log(head([1, 2, 3])); // logs 1 here
 console.log(globalThis._.head(["a", "b"])); // logs a here
 ```
 
-T> When loading code with HTML `<script>` tags, the webpack runtime will try to find an existing `<script>` tag that matches the `src` attribute or has a specific `data-webpack` attribute. For chunk loading `data-webpack` attribute would have value of `'[output.uniqueName]:chunk-[chunkId]'` while external script has value of `'[output.uniqueName]:[global]'`.
+T> عند تحميل التعليمات البرمجية باستخدام علامات HTML `<script>`، ستحاول webpack runtime العثور على علامة `<script>` موجودة والتي تطابق السمة `src` أو تحتوي على سمة `data-webpack` محددة. بالنسبة إلى تحميل chunk، ستكون للسمة `data-webpack` قيمة `'[output.uniqueName]:chunk-[chunkId]'` بينما يكون للبرنامج النصي external قيمة `'[output.uniqueName]:[global]'`.
 
-T> Options like `output.chunkLoadTimeout`, `output.crossOriginLoading` and `output.scriptType` will also have effect on the external scripts loaded this way.
+T> خيارات مثل `output.chunkLoadTimeout`، `output.crossOriginLoading` و`output.scriptType` سيكون لها أيضًا تأثير على external scripts المحملة بهذه الطريقة.
 
-W> `externalsType: "script"` loads externals using a classic (non-module) `<script src="...">` tag. The external file must be compatible with classic scripts (i.e. no top-level `import` / `export`). If the loaded script contains ESM syntax (for example, `import * as b from "b.js"`), the browser will fail to evaluate it and webpack will report a script loading failure (often surfaced as `ScriptExternalLoadError: Loading script failed.`).
+W> يحمّل `externalsType: "script"` الـ externals عبر علامة `<script src="...">` الكلاسيكية (غير module). يجب أن يكون ملف external متوافقًا مع classic scripts، أي بلا top-level `import` / `export`. إذا احتوى script المحمّل على صياغة ESM، مثل `import * as b from "b.js"`، فسيفشل browser في تقييمه وسيبلّغ webpack عن فشل تحميل script، وغالبًا ما يظهر ذلك كـ `ScriptExternalLoadError: Loading script failed.`.
 
-T> If you need module-to-module dependencies, prefer `externalsType: "import"` / `externalsType: "module"` / `externalsType: "module-import"` instead. If you must keep `externalsType: "script"`, load dependencies first and access them via globals (e.g. `globalThis.SomeLib`) rather than using `import`.
+T> إذا كنت بحاجة إلى module-to-module dependencies، ففضل `externalsType: "import"` / `externalsType: "module"` / `externalsType: "module-import"` بدلاً من ذلك. إذا كان يجب عليك الاحتفاظ بـ `externalsType: "script"`، فقم بتحميل dependencies أولاً وقم بالوصول إليها عبر النطاقات العالمية (على سبيل المثال `globalThis.SomeLib`) بدلاً من استخدام `import`.
 
 ### externalsType.this
 
-Specify the default type of externals as `'this'`. Webpack will read the external as a global variable on the `this` object.
+حدد النوع الافتراضي لـ externals كـ `'this'`. webpack سوف يقرأ external كمتغير عام على `this` object.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -909,7 +892,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 const jq = this.$;
@@ -919,9 +902,9 @@ jq(".my-element").animate(/* ... */);
 
 ### externalsType.var
 
-Specify the default type of externals as `'var'`. Webpack will read the external as a global variable.
+حدد النوع الافتراضي لـ externals كـ `'var'`. webpack سوف يقرأ external كمتغير عام.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -941,7 +924,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 const jq = $;
@@ -951,9 +934,9 @@ jq(".my-element").animate(/* ... */);
 
 ### externalsType.window
 
-Specify the default type of externals as `'window'`. Webpack will read the external as a global variable on the `window` object.
+حدد النوع الافتراضي لـ externals كـ `'window'`. webpack سوف يقرأ external كمتغير عام على `window` object.
 
-#### Example
+#### مثال
 
 ```js
 import jq from "jquery";
@@ -973,7 +956,7 @@ export default {
 };
 ```
 
-Will generate into something like
+سوف تولد في شيء من هذا القبيل
 
 ```js
 const jq = globalThis.$;
@@ -981,28 +964,28 @@ const jq = globalThis.$;
 jq(".my-element").animate(/* ... */);
 ```
 
-## externalsPresets
+## ExternalsPresets
 
 `object`
 
-Enable presets of externals for specific targets.
+تمكين الإعدادات المسبقة لـ externals لـ targets محدد.
 
-| Option             | Description                                                                                                                                                                                                     | Input Type |
+| الخيار             | الوصف                                                                                                                                                                                                     | نوع الإدخال |
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `electron`         | Treat common electron built-in modules in main and preload context like `electron`, `ipc` or `shell` as external and load them via `require()` when used.                                                       | boolean    |
-| `electronMain`     | Treat electron built-in modules in the main context like `app`, `ipc-main` or `shell` as external and load them via `require()` when used.                                                                      | boolean    |
-| `electronPreload`  | Treat electron built-in modules in the preload context like `web-frame`, `ipc-renderer` or `shell` as external and load them via require() when used.                                                           | boolean    |
-| `electronRenderer` | Treat electron built-in modules in the renderer context like `web-frame`, `ipc-renderer` or `shell` as external and load them via `require()` when used.                                                        | boolean    |
-| `node`             | Treat node.js built-in modules like `fs`, `path` or `vm` as external and load them via `require()` when used.                                                                                                   | boolean    |
-| `nwjs`             | Treat `NW.js` legacy `nw.gui` module as external and load it via `require()` when used.                                                                                                                         | boolean    |
-| `web`              | Treat references to `http(s)://...` and `std:...` as external and load them via `import` when used. **(Note that this changes execution order as externals are executed before any other code in the chunk)**.  | boolean    |
-| `webAsync`         | Treat references to `http(s)://...` and `std:...` as external and load them via `async import()` when used **(Note that this external type is an `async` module, which has various effects on the execution)**. | boolean    |
+| `electron`         | تعامل مع الإلكترون المشترك المدمج modules في السياق الرئيسي وسياق التحميل المسبق مثل `electron` أو `ipc` أو `shell` كـ external وقم بتحميلها عبر `require()` عند الاستخدام.                                                       | boolean    |
+| `electronMain`     | تعامل مع الإلكترون المدمج modules في السياق الرئيسي مثل `app` أو `ipc-main` أو `shell` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                                      | boolean    |
+| `electronPreload`  | تعامل مع الإلكترون المدمج modules في سياق التحميل المسبق مثل `web-frame` أو `ipc-renderer` أو `shell` كـ external وقم بتحميلها عبر require() عند استخدامها.                                                           | boolean    |
+| `electronRenderer` | تعامل مع الإلكترون المدمج modules في سياق العارض مثل `web-frame` أو `ipc-renderer` أو `shell` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                        | boolean    |
+| `node`             | تعامل مع Node.js المضمنة modules مثل `fs` أو `path` أو `vm` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                                                                   | boolean    |
+| `nwjs`             | تعامل مع `NW.js` القديم `nw.gui` module كـ external وقم بتحميله عبر `require()` عند الاستخدام.                                                                                                                         | boolean    |
+| `web`              | تعامل مع الإشارات إلى `http(s)://...` و`std:...` على أنها external وقم بتحميلها عبر `import` عند استخدامها. **(لاحظ أن هذا يغير ترتيب التنفيذ حيث يتم تنفيذ externals قبل أي كود آخر في chunk)**.  | boolean    |
+| `webAsync`         | تعامل مع المراجع إلى `http(s)://...` و`std:...` على أنها external وقم بتحميلها عبر `async import()` عند استخدامها **(لاحظ أن هذا النوع external هو `async` module، والذي له تأثيرات مختلفة على التنفيذ)**. | boolean    |
 
-Note that if you're going to output ES Modules with those node.js-related presets, webpack will set the default `externalsType` to [`node-commonjs`](#externalstypenode-commonjs) which would use `createRequire` to construct a require function instead of using `require()`.
+لاحظ أنه إذا كنت ستنتقل إلى output ES Modules مع تلك الإعدادات المسبقة المرتبطة بـnode.js، فإن webpack سيعين الإعداد الافتراضي `externalsType` إلى [`node-commonjs`](#externalstypenode-commonjs) والذي سيستخدم `createRequire` لإنشاء طلب function بدلاً من استخدام `require()`.
 
 **Example**
 
-Using `node` preset will not bundle built-in modules and treats them as external and loads them via `require()` when used.
+لن يؤدي استخدام الإعداد المسبق `node` إلى bundle المدمج في modules ويعاملها على أنها external ويقوم بتحميلها عبر `require()` عند الاستخدام.
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx
index 0564ce0b264d..4fbc357f58ef 100644
--- a/src/content/configuration/index.mdx
+++ b/src/content/configuration/index.mdx
@@ -5,7 +5,7 @@ contributors:
   - RlxChap2
 ---
 
-خارج الصندوق، لا يُلزمك webpack باستخدام ملف تكوين. غير أنّه سيفترض أنّ نقطة الدخول لمشروعك هي `src/index.js`، وسيُخرج الناتج في `dist/main.js` مُصغَّراً ومُحسَّناً للإنتاج.
+خارج الصندوق، لا يُلزمك webpack باستخدام ملف تخصيص. غير أنّه سيفترض أنّ نقطة الدخول لمشروعك هي `src/index.js`، وسيُخرج الناتج في `dist/main.js` مُصغَّراً ومُحسَّناً للإنتاج.
 
 عادةً ما تحتاج مشاريعك إلى توسيع هذه الوظائف، ولهذا يمكنك إنشاء ملف `webpack.config.js` في المجلد الجذر، وسيلتقطه webpack تلقائياً.
 
@@ -13,9 +13,9 @@ contributors:
 
 T> هل أنت جديد على webpack؟ ألقِ نظرة على دليلنا حول [المفاهيم الأساسية](/concepts) لتبدأ منه!
 
-## استخدام ملف تكوين مختلف
+## استخدام ملف تخصيص مختلف
 
-إن أردت لسبب ما استخدام ملف تكوين مختلف بحسب الموقف، يمكنك تغيير ذلك من سطر الأوامر عبر الراية `--config`.
+إن أردت لسبب ما استخدام ملف تخصيص مختلف بحسب الموقف، يمكنك تغيير ذلك من سطر الأوامر عبر الراية `--config`.
 
 **package.json**
 
@@ -27,9 +27,9 @@ T> هل أنت جديد على webpack؟ ألقِ نظرة على دليلنا 
 
 ## تجهيز مشروع webpack جديد
 
-W> يُطبّق webpack القيم الافتراضية للتكوين بعد تطبيق [القيم الافتراضية للـ plugins](/contribute/writing-a-plugin/#configuration-defaults).
+W> يُطبّق webpack القيم الافتراضية للتخصيص بعد تطبيق [القيم الافتراضية للـ plugins](/contribute/writing-a-plugin/#configuration-defaults).
 
-يحتوي webpack على مجموعة ضخمة من الخيارات قد تكون مربكة بالنسبة لك، لذا استفد من الأداة الجديدة [create-webpack-app](https://github.com/webpack/webpack-cli/) التي يقدّمها `webpack-cli` ابتداءً من الإصدار v6.0.0، وهي تُولّد لك تطبيق webpack بسرعة، بملفات تكوين تناسب متطلبات مشروعك. ستطرح عليك بضعة أسئلة قبل أن تُنشئ ملف التخصيص.
+يحتوي webpack على مجموعة ضخمة من الخيارات قد تكون مربكة بالنسبة لك، لذا استفد من الأداة الجديدة [create-webpack-app](https://github.com/webpack/webpack-cli/) التي يقدّمها `webpack-cli` ابتداءً من الإصدار v6.0.0، وهي تُولّد لك تطبيق webpack بسرعة، بملفات تخصيص تناسب متطلبات مشروعك. ستطرح عليك بضعة أسئلة قبل أن تُنشئ ملف التخصيص.
 
 ```bash
 npx create-webpack-app [command] [options]
@@ -52,7 +52,7 @@ Ok to proceed? (y)
 ? Will you be using PostCSS in your project? Yes
 ? Do you want to extract CSS for every file? Only for Production
 ? Which package manager do you want to use? npm
-[create-webpack] ℹ️ Initializing a new Webpack project
+[create-webpack] ℹ️ Initializing a new webpack project
 ...
 ...
 ...
diff --git a/src/content/configuration/infrastructureLogging.mdx b/src/content/configuration/infrastructureLogging.mdx
index 1540506bd936..29a3670ba925 100644
--- a/src/content/configuration/infrastructureLogging.mdx
+++ b/src/content/configuration/infrastructureLogging.mdx
@@ -2,10 +2,10 @@
 title: InfrastructureLogging
 sort: 20
 contributors:
-  - snitin315
+  - RlxChap2
 ---
 
-Options for infrastructure level logging.
+خيارات التسجيل (logging) على مستوى البنية التحتية.
 
 ## infrastructureLogging.appendOnly
 
@@ -13,7 +13,7 @@ Options for infrastructure level logging.
 
 `boolean`
 
-Append lines to the output instead of updating existing output, useful for status messages. This option is used only when no custom [`console`](#infrastructureloggingconsole) is provided.
+يُلحق السطور بالمخرَجات بدل تحديث المخرَجات القائمة، وهذا مفيد لرسائل الحالة. ولا يُؤخذ هذا الخيار بعين الاعتبار إلا حين لا تكون قد قدّمت كائن [`console`](#infrastructureloggingconsole) خاصاً بك.
 
 **webpack.config.js**
 
@@ -27,7 +27,7 @@ export default {
   plugins: [
     (compiler) => {
       const logger = compiler.getInfrastructureLogger("MyPlugin");
-      logger.status("first output"); // this line won't be overridden with `appendOnly` enabled
+      logger.status("first output"); // لن يُستبدَل هذا السطر طالما أنّ `appendOnly` مُفعَّل
       logger.status("second output");
     },
   ],
@@ -40,7 +40,7 @@ export default {
 
 `boolean`
 
-Enable colorful output for infrastructure level logging. This option is used only when no custom [`console`](#infrastructureloggingconsole) is provided.
+يُفعِّل المخرَجات الملوّنة للتسجيل على مستوى البنية التحتية. ولا يُؤخذ بعين الاعتبار إلا حين لا تكون قد قدّمت كائن [`console`](#infrastructureloggingconsole) خاصاً بك.
 
 **webpack.config.js**
 
@@ -66,7 +66,7 @@ export default {
 
 `Console`
 
-Customize the console used for infrastructure level logging.
+خصِّص كائن الـ console المستخدم في التسجيل على مستوى البنية التحتية.
 
 **webpack.config.js**
 
@@ -83,7 +83,7 @@ export default {
 
 `string` `boolean = false` `RegExp` `function(name) => boolean` `[string, RegExp, function(name) => boolean]`
 
-Enable debug information of specified loggers such as plugins or loaders. Similar to [`stats.loggingDebug`](/configuration/stats/#statsloggingdebug) option but for infrastructure. Defaults to `false`.
+يُمكّن معلومات التنقيح (debug) لمسجِّلات بعينها كالـ plugins أو الـ loaders. وهو مشابه لخيار [`stats.loggingDebug`](/configuration/stats/#statsloggingdebug) لكنه يخصّ البنية التحتية. وقيمته الافتراضية `false`.
 
 **webpack.config.js**
 
@@ -101,16 +101,16 @@ export default {
 
 `string = 'info' : 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'`
 
-Enable infrastructure logging output. Similar to [`stats.logging`](/configuration/stats/#statslogging) option but for infrastructure. Defaults to `'info'`.
+يُفعِّل مخرَجات تسجيل البنية التحتية. شبيه بخيار [`stats.logging`](/configuration/stats/#statslogging) لكنه يخصّ البنية التحتية. وقيمته الافتراضية `'info'`.
 
-Possible values:
+القيم الممكنة:
 
-- `'none'` - disable logging
-- `'error'` - errors only
-- `'warn'` - errors and warnings only
-- `'info'` - errors, warnings, and info messages
-- `'log'` - errors, warnings, info messages, log messages, groups, clears. Collapsed groups are displayed in a collapsed state.
-- `'verbose'` - log everything except debug and trace. Collapsed groups are displayed in expanded state.
+- `'none'` — تعطيل التسجيل.
+- `'error'` — الأخطاء فقط.
+- `'warn'` — الأخطاء والتحذيرات فقط.
+- `'info'` — الأخطاء والتحذيرات ورسائل المعلومات.
+- `'log'` — الأخطاء والتحذيرات ورسائل المعلومات ورسائل log والمجموعات وأوامر المسح. وتُعرض المجموعات المطويّة في حالتها المطويّة.
+- `'verbose'` — تسجيل كل شيء عدا debug و trace. وتُعرض المجموعات المطويّة في حالتها المفتوحة.
 
 **webpack.config.js**
 
@@ -129,7 +129,7 @@ export default {
 
 `NodeJS.WritableStream = process.stderr`
 
-Stream used for logging output. Defaults to `process.stderr`. This option is used only when no custom [`console`](#infrastructureloggingconsole) is provided.
+التيار (stream) المستخدم في مخرَجات التسجيل. القيمة الافتراضية هي `process.stderr`. ولا يُؤخذ هذا الخيار بعين الاعتبار إلا حين لا تكون قد قدّمت كائن [`console`](#infrastructureloggingconsole) خاصاً بك.
 
 **webpack.config.js**
 
@@ -142,4 +142,4 @@ export default {
 };
 ```
 
-T> In the case of a TTY stream, `colors` is enabled and `appendOnly` is disabled, and vice versa.
+T> إن كان التيار من نوع TTY، فإنّ `colors` يكون مُفعَّلاً و`appendOnly` مُعطَّلاً، والعكس بالعكس.
diff --git a/src/content/configuration/mode.mdx b/src/content/configuration/mode.mdx
index 8eea14548778..6b344864e9b2 100644
--- a/src/content/configuration/mode.mdx
+++ b/src/content/configuration/mode.mdx
@@ -2,24 +2,19 @@
 title: Mode
 sort: 5
 contributors:
-  - EugeneHlushko
-  - byzyk
-  - mrichmond
-  - Fental
-  - snitin315
-  - chenxsan
+  - RlxChap2
 related:
-  - title: "webpack default options (source code)"
+  - title: "خيارات webpack الافتراضية (الشيفرة المصدرية)"
     url: https://github.com/webpack/webpack/blob/main/lib/config/defaults.js
 ---
 
-Providing the `mode` configuration option tells webpack to use its built-in optimizations accordingly.
+ضبط خيار التخصيص `mode` يُخبر webpack أن يستخدم تحسيناته المدمجة بما يتناسب مع الوضع المُحدَّد.
 
 `string = 'production': 'none' | 'development' | 'production'`
 
-## Usage
+## الاستخدام
 
-Provide the `mode` option in the config:
+اضبط خيار `mode` ضمن ملف التخصيص:
 
 ```js
 export default {
@@ -27,25 +22,25 @@ export default {
 };
 ```
 
-or pass it as a [CLI](/api/cli/) argument:
+أو مرّره بوصفه وسيطاً عبر [الـ CLI](/api/cli/):
 
 ```bash
 webpack --mode=development
 ```
 
-The following string values are supported:
+القيم النصيّة المدعومة كالآتي:
 
-| Option        | Description                                                                                                                                                                                                                                                          |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `development` | Sets `process.env.NODE_ENV` on `DefinePlugin` to value `development`. Enables useful names for modules and chunks.                                                                                                                                                   |
-| `production`  | Sets `process.env.NODE_ENV` on `DefinePlugin` to value `production`. Enables deterministic mangled names for modules and chunks, `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin` and `MinimizerPlugin`. |
-| `none`        | Opts out of any default optimization options                                                                                                                                                                                                                         |
+| الخيار        | الوصف                                                                                                                                                                                                                                                                       |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `development` | يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `development`، ويُفعِّل أسماءً وصفيّة مفيدة للوحدات والـ chunks.                                                                                                                                                       |
+| `production`  | يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `production`، ويُفعِّل أسماءً مُختصَرة حتميّة (deterministic mangled) للوحدات والـ chunks، إلى جانب `FlagDependencyUsagePlugin` و`FlagIncludedChunksPlugin` و`ModuleConcatenationPlugin` و`NoEmitOnErrorsPlugin` و`MinimizerPlugin`. |
+| `none`        | يصرف النظر عن أي خيارات تحسين افتراضية.                                                                                                                                                                                                                                      |
 
-If not set, webpack sets `production` as the default value for `mode`.
+إن لم تضبط هذا الخيار، فإنّ webpack يعدّ القيمة `production` هي الافتراضية لـ `mode`.
 
-T> If `mode` is not provided via configuration or CLI, CLI will use any valid `NODE_ENV` value for `mode`.
+T> إن لم يُمَرَّر `mode` لا من خلال التخصيص ولا من خلال الـ CLI، فسيستخدم الـ CLI أي قيمة صالحة لـ `NODE_ENV` ويعدّها قيمة `mode`.
 
-### Mode: development
+### الوضع: التطوير
 
 ```js
 // webpack.development.config.js
@@ -54,7 +49,7 @@ export default {
 };
 ```
 
-### Mode: production
+### الوضع: الإنتاج
 
 ```js
 // webpack.production.config.js
@@ -63,7 +58,7 @@ export default {
 };
 ```
 
-### Mode: none
+### الوضع: لا يوجد
 
 ```js
 // webpack.custom.config.js
@@ -72,7 +67,7 @@ export default {
 };
 ```
 
-If you want to change the behavior according to the **mode** variable inside the _webpack.config.js_, you have to export a function instead of an object:
+إن أردت تغيير السلوك تبعاً للمتغيّر **mode** داخل ملف _webpack.config.js_ نفسه، فعليك أن تُصدِّر دالّة عوضاً عن كائن:
 
 ```js
 const config = {
diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx
index d807124696e9..93c5f2344638 100644
--- a/src/content/configuration/module.mdx
+++ b/src/content/configuration/module.mdx
@@ -2,38 +2,16 @@
 title: Module
 sort: 7
 contributors:
-  - sokra
-  - skipjack
-  - jouni-kantola
-  - jhnns
-  - dylanonelson
-  - byzyk
-  - pnevares
-  - fadysamirsadek
-  - nerdkid93
-  - EugeneHlushko
-  - superburrito
-  - lukasgeiter
-  - skovy
-  - smelukov
-  - opl-
-  - Mistyyyy
-  - anshumanv
-  - chenxsan
-  - snitin315
-  - vabushkevich
-  - ahabhgk
-  - hai-x
-  - shivxmsharma
+  - RlxChap2
 ---
 
-These options determine how the [different types of modules](/concepts/modules) within a project will be treated.
+تحدد هذه الخيارات كيفية التعامل مع [أنواع مختلفة من modules](/concepts/modules) داخل المشروع.
 
 ## module.defaultRules
 
-An array of rules applied by default for modules.
+array من القواعد المطبقة افتراضيًا على modules.
 
-See [source code](https://github.com/webpack/webpack/blob/dc4d97429b2013f7770ba785721b65cf82c2ef04/lib/config/defaults.js#L608) for details.
+راجع [كود المصدر](https://github.com/webpack/webpack/blob/dc4d97429b2013f7770ba785721b65cf82c2ef04/lib/config/defaults.js#L608) للحصول على التفاصيل.
 
 ```js
 export default {
@@ -45,7 +23,7 @@ export default {
 };
 ```
 
-Starting with webpack 5.87.0, falsy values including `0`, `""`, `false`, `null` and `undefined` are allowed to pass to `module.defaultRules` to conditionally disable specific rules.
+بدءًا من webpack 5.87.0، يُسمح للقيم الزائفة بما في ذلك `0`، `""`، `false`، `null` و`undefined` بالمرور إلى `module.defaultRules` لتعطيل قواعد معينة بشكل مشروط.
 
 {/* eslint-disable */}
 
@@ -55,7 +33,7 @@ export default {
     defaultRules: [
       false &&
         {
-          // this rule will be disabled
+          // سيتم تعطيل هذه القاعدة
         },
     ],
   },
@@ -66,7 +44,7 @@ export default {
 
 <Badge text="5.12.0+" />
 
-It's possible to configure all generators' options in one place with a `module.generator`.
+من الممكن تخصيص جميع خيارات المولدات في مكان واحد باستخدام `module.generator`.
 
 **webpack.config.js**
 
@@ -75,141 +53,141 @@ export default {
   module: {
     generator: {
       asset: {
-        // Generator options for asset modules
+        // خيارات المولد لـ asset modules
 
-        // Indicates if this asset should be treated as binary. Set to 'false' to handle it as text instead. Available since webpack 5.93.0
+        // يشير إلى ما إذا كان يجب التعامل مع asset كثنائي. اضبط على "خطأ" للتعامل معه كنص بدلاً من ذلك. متوفر منذ webpack 5.93.0
         binary: false,
 
-        // The options for data url generator.
+        // خيارات مولد عنوان URL للبيانات.
         dataUrl: {
-          // Asset encoding (defaults to "base64")
-          // type: 'base64' | false
+          // ترميز Asset (الإعداد الافتراضي هو "base64")
+          // النوع: 'base64' | كاذبة
           encoding: "base64",
-          // Asset mimetype (getting from file extension by default).
-          // type: string
+          // Asset mimetype (الحصول على امتداد الملف بشكل افتراضي).
+          // النوع: string
           mimetype: "image/png",
         },
 
-        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
-        // type: boolean
+        // تنبعث منها output asset من هذا asset module. يمكن ضبط هذا على "خطأ" لحذف انبعاث مثلاً من أجل إصلاح القطاع الأمني.
+        // النوع: boolean
         emit: true,
 
-        // Customize filename for this asset module
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // تخصيص اسم الملف لهذا asset module
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         filename: "static/[path][name][ext]",
 
-        // Customize publicPath for asset modules, available since webpack 5.28.0
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // تخصيص publicPath لـ asset modules، متاح منذ webpack 5.28.0
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         publicPath: "https://cdn/assets/",
 
-        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // قم بإصدار asset في المجلد المحدد المتعلق بـ "output.path"، المتوفر منذ webpack 5.67.0
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         outputPath: "cdn-assets/",
       },
       "asset/inline": {
-        // Generator options for asset/inline modules
+        // خيارات المولد لـ asset/المضمنة modules
 
-        // Indicates if this asset should be treated as binary. Set to 'false' to handle it as text instead. Available since webpack 5.93.0
+        // يشير إلى ما إذا كان يجب التعامل مع asset كثنائي. اضبط على "خطأ" للتعامل معه كنص بدلاً من ذلك. متوفر منذ webpack 5.93.0
         binary: false,
 
-        // The options for data url generator.
+        // خيارات مولد عنوان URL للبيانات.
         dataUrl: {
-          // Asset encoding (defaults to "base64")
-          // type: 'base64' | false
+          // ترميز Asset (الإعداد الافتراضي هو "base64")
+          // النوع: 'base64' | كاذبة
           encoding: "base64",
-          // Asset mimetype (getting from file extension by default).
-          // type: string
+          // Asset mimetype (الحصول على امتداد الملف بشكل افتراضي).
+          // النوع: string
           mimetype: "image/png",
         },
       },
       "asset/resource": {
-        // Generator options for asset/resource modules
+        // خيارات المولد لـ asset/المورد modules
 
-        // Indicates if this asset should be treated as binary. Set to 'false' to handle it as text instead. Available since webpack 5.93.0
+        // يشير إلى ما إذا كان يجب التعامل مع asset كثنائي. اضبط على "خطأ" للتعامل معه كنص بدلاً من ذلك. متوفر منذ webpack 5.93.0
         binary: false,
 
-        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
-        // type: boolean
+        // تنبعث منها output asset من هذا asset module. يمكن ضبط هذا على "خطأ" لحذف انبعاث مثلاً من أجل إصلاح القطاع الأمني.
+        // النوع: boolean
         emit: true,
 
-        // Customize filename for this asset module
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // تخصيص اسم الملف لهذا asset module
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         filename: "static/[path][name][ext]",
 
-        // Customize publicPath for asset/resource modules, available since webpack 5.28.0
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // تخصيص publicPath لـ asset/المورد modules، متاح منذ webpack 5.28.0
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         publicPath: "https://cdn/assets/",
 
-        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // قم بإصدار asset في المجلد المحدد المتعلق بـ "output.path"، المتوفر منذ webpack 5.67.0
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         outputPath: "cdn-assets/",
       },
       "asset/bytes": {
-        // No generator options are supported for this module type yet
+        // لا توجد خيارات مولد مدعومة لهذا النوع module حتى الآن
       },
       javascript: {
-        // No generator options are supported for this module type yet
+        // لا توجد خيارات مولد مدعومة لهذا النوع module حتى الآن
       },
       "javascript/auto": {
-        // ditto
+        // كما سبق
       },
       "javascript/dynamic": {
-        // ditto
+        // كما سبق
       },
       "javascript/esm": {
-        // ditto
+        // كما سبق
       },
       css: {
-        // Generator options for css modules
+        // خيارات المولد لـ CSS modules
 
-        // Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
-        // type: boolean, available since webpack 5.90.0
+        // تجنب إنشاء ورقة أنماط وتحميلها وقم فقط بتضمين الصادرات من CSS في ملفات JavaScript output.
+        // النوع: boolean، متاح منذ webpack 5.90.0
         exportsOnly: true,
 
-        // Customize how css export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
-        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string | string[])
-        // available since webpack 5.90.4; the function form may return string[] since 5.107.0
+        // تخصيص كيفية تصدير أسماء تصدير CSS إلى javascript modules، مثل الاحتفاظ بها كما هي، وتحويلها إلى حالة الجمل، وما إلى ذلك.
+        // النوع: 'كما هو' | 'حالة الجمل' | 'حالة الجمل فقط' | "شرطات" | "شرطات فقط" | ((الاسم: string) => string | string[])
+        // متاح منذ webpack 5.90.4؛ قد يُرجع النموذج function string[] منذ 5.107.0
         exportsConvention: "camel-case-only",
       },
       "css/auto": {
-        // Generator options for css/auto modules
+        // خيارات المولد لـ css/auto modules
 
-        // Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
-        // type: boolean, available since webpack 5.90.0
+        // تجنب إنشاء ورقة أنماط وتحميلها وقم فقط بتضمين الصادرات من CSS في ملفات JavaScript output.
+        // النوع: boolean، متاح منذ webpack 5.90.0
         exportsOnly: true,
 
-        // Customize how css export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
-        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string | string[])
-        // available since webpack 5.90.4; the function form may return string[] since 5.107.0
+        // تخصيص كيفية تصدير أسماء تصدير CSS إلى javascript modules، مثل الاحتفاظ بها كما هي، وتحويلها إلى حالة الجمل، وما إلى ذلك.
+        // النوع: 'كما هو' | 'حالة الجمل' | 'حالة الجمل فقط' | "شرطات" | "شرطات فقط" | ((الاسم: string) => string | string[])
+        // متاح منذ webpack 5.90.4؛ قد يُرجع النموذج function string[] منذ 5.107.0
         exportsConvention: "camel-case-only",
 
-        // Customize the format of the local class names generated for css modules.
-        // type: string, besides the substitutions at File-level and Module-level in https://webpack.js.org/configuration/output/#template-strings, also include [uniqueName] and [local].
-        // available since webpack 5.90.4
+        // قم بتخصيص تنسيق أسماء الفئات المحلية التي تم إنشاؤها لـ CSS modules.
+        // النوع: string، إلى جانب البدائل على مستوى الملف ومستوى Module في https://webpack.js.org/configuration/output/#template-strings, تتضمن أيضًا [uniqueName] و[local].
+        // متاح منذ webpack 5.90.4
         localIdentName: "[uniqueName]-[id]-[local]",
       },
       "css/global": {
-        // ditto
+        // كما سبق
       },
       "css/module": {
-        // ditto
+        // كما سبق
       },
       json: {
-        // Generator options for json modules
-        // Use `JSON.parse` when the JSON string is longer than 20 characters.
+        // خيارات المولد لـ json modules
+        // استخدم `JSON.parse` عندما يكون JSON string أطول من 20 حرفًا.
         parse: JSONParse,
       },
-      // others…
+      // الآخرين…
     },
   },
 };
 ```
 
-### Multiple aliases via `exportsConvention`
+### أسماء مستعارة متعددة عبر `exportsConvention`
 
 <Badge text="5.107.0+" />
 
-When `exportsConvention` is a function, it may return either a `string` or a `string[]`. Returning an array exports the local class under every name in the array, matching `css-loader`'s behavior. This is useful when you want to expose the same class under several aliases without writing two rules.
+عندما يكون `exportsConvention` هو function، فقد يُرجع إما `string` أو `string[]`. يؤدي إرجاع array إلى تصدير الفئة المحلية تحت كل اسم في array، بما يتوافق مع سلوك `css-loader`. يعد هذا مفيدًا عندما تريد كشف نفس الفصل تحت عدة أسماء مستعارة دون كتابة قاعدتين.
 
 **webpack.config.js**
 
@@ -219,7 +197,7 @@ export default {
   module: {
     generator: {
       "css/module": {
-        // expose each class under both its original name and an uppercase alias
+        // كشف كل فئة تحت اسمها الأصلي واسم مستعار كبير
         exportsConvention: (name) => [name, name.toUpperCase()],
       },
     },
@@ -238,7 +216,7 @@ console.log(styles.BTN); // same hashed class, uppercase alias
 
 <Badge text="5.12.0+" />
 
-Similar to the [`module.generator`](#modulegenerator), you can configure all parsers' options in one place with a `module.parser`.
+كما هو الحال مع [`module.generator`](#modulegenerator)، يمكنك تخصيص جميع خيارات المحلل اللغوي في مكان واحد باستخدام `module.parser`.
 
 **webpack.config.js**
 
@@ -247,88 +225,88 @@ export default {
   module: {
     parser: {
       asset: {
-        // Parser options for asset modules
+        // خيارات المحلل اللغوي لـ asset modules
 
-        // The options for data url generator.
+        // خيارات مولد عنوان URL للبيانات.
         dataUrl: {
-          // Asset encoding (defaults to "base64")
-          // type: 'base64' | false
+          // ترميز Asset (الإعداد الافتراضي هو "base64")
+          // النوع: 'base64' | كاذبة
           encoding: "base64",
-          // Asset mimetype (getting from file extension by default).
-          // type: string
+          // Asset mimetype (الحصول على امتداد الملف بشكل افتراضي).
+          // النوع: string
           mimetype: "image/png",
         },
 
-        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
-        // type: boolean
+        // تنبعث منها output asset من هذا asset module. يمكن ضبط هذا على "خطأ" لحذف انبعاث مثلاً من أجل إصلاح القطاع الأمني.
+        // النوع: boolean
         emit: true,
 
-        // Customize filename for this asset module
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // تخصيص اسم الملف لهذا asset module
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         filename: "static/[path][name][ext]",
 
-        // Customize publicPath for asset modules, available since webpack 5.28.0
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // تخصيص publicPath لـ asset modules، متاح منذ webpack 5.28.0
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         publicPath: "https://cdn/assets/",
 
-        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
-        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
+        // قم بإصدار asset في المجلد المحدد المتعلق بـ "output.path"، المتوفر منذ webpack 5.67.0
+        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
         outputPath: "cdn-assets/",
       },
       "asset/inline": {
-        // No parser options are supported for this module type yet
+        // لا توجد خيارات محلل مدعومة لهذا النوع module حتى الآن
       },
       "asset/resource": {
-        // ditto
+        // كما سبق
       },
       "asset/source": {
-        // ditto
+        // كما سبق
       },
       "asset/bytes": {
-        // ditto
+        // كما سبق
       },
       javascript: {
-        // Parser options for javascript modules
-        // e.g, enable parsing of require.ensure syntax
+        // خيارات المحلل اللغوي لJavaScript modules
+        // على سبيل المثال، تمكين تحليل بناء الجملة require.ensure
         requireEnsure: true,
-        // Set the module to `'strict'` or `'non-strict'` mode. This can affect the module's behavior, as some behaviors differ between strict and non-strict modes.
+        // اضبط الوضع module على `'strict'` أو `'non-strict'`. يمكن أن يؤثر هذا على سلوك module، حيث تختلف بعض السلوكيات بين الوضع الصارم وغير الصارم.
         overrideStrict: "non-strict",
       },
       "javascript/auto": {
-        // ditto
+        // كما سبق
       },
       "javascript/dynamic": {
-        // ditto
+        // كما سبق
       },
       "javascript/esm": {
-        // ditto
+        // كما سبق
       },
       css: {
-        // Parser options for css modules
+        // خيارات المحلل اللغوي لـ CSS modules
 
-        // Enable/disable `@import` at-rules handling, available since webpack 5.97.0
-        // type: boolean
+        // تمكين/تعطيل التعامل مع القواعد `@import`، وهو متاح منذ webpack 5.97.0
+        // النوع: boolean
         import: true,
-        // Enable/disable url()/image-set()/src()/image() functions handling, available since webpack 5.97.0
-        // type: boolean
+        // تمكين/تعطيل التعامل مع وظائف url()/image-set()/src()/image()، وهو متاح منذ webpack 5.97.0
+        // النوع: boolean
         url: true,
-        // Use ES modules named export for css exports, available since webpack 5.90.0
-        // type: boolean
+        // استخدم ES modules التصدير المسمى لصادرات CSS، وهو متاح منذ webpack 5.90.0
+        // النوع: boolean
         namedExports: true,
-        // Configure how CSS content is exported
-        // type: string
+        // قم بتخصيص كيفية تصدير محتوى CSS
+        // النوع: string
         exportType: "link",
       },
       "css/auto": {
-        // ditto
+        // كما سبق
       },
       "css/global": {
-        // ditto
+        // كما سبق
       },
       "css/module": {
-        // ditto
+        // كما سبق
       },
-      // others…
+      // الآخرين…
     },
   },
 };
@@ -336,7 +314,7 @@ export default {
 
 ### module.parser.css
 
-Configure options for the CSS parser.
+قم بتخصيص الخيارات للمحلل اللغوي CSS.
 
 ```js
 export default {
@@ -353,11 +331,11 @@ export default {
 
 #### module.parser.css.import
 
-This option enables the handling of `@import` at-rules in CSS files. When set to `true`, `@import` statements are processed, allowing modular inclusion of styles from other CSS files.
+يتيح هذا الخيار معالجة قواعد `@import` في ملفات CSS. عند التعيين على `true`، تتم معالجة عبارات `@import`، مما يسمح بالتضمين المعياري للأنماط من ملفات CSS الأخرى.
 
-- Type: `boolean`
-- Available: 5.97.0+
-- Example:
+- النوع: `boolean`
+- متاح: 5.97.0+
+- مثال:
 
   ```js
   export default {
@@ -388,15 +366,15 @@ This option enables the handling of `@import` at-rules in CSS files. When set to
   }
   ```
 
-T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.
+T> لتصفية الواردات المحددة، يمكنك استخدام [IgnorePlugin](/plugins/ignore-plugin/) المدمج في webpack. الخيار [`filter`](/loaders/css-loader/#filter)، كما هو متاح في `css-loader`، غير مدعوم.
 
 #### module.parser.css.url
 
-This option enables or disables the handling of URLs in functions such as `url()`, `image-set()`, `src()`, and `image()` within CSS files. When enabled, these URLs are resolved and processed by webpack.
+يعمل هذا الخيار على تمكين أو تعطيل معالجة عناوين URL في وظائف مثل `url()`، و`image-set()`، و`src()`، و`image()` داخل ملفات CSS. عند التمكين، يتم حل عناوين URL هذه ومعالجتها بواسطة webpack.
 
-- Type: `boolean`
-- Available: 5.97.0+
-- Example:
+- النوع: `boolean`
+- متاح: 5.97.0+
+- مثال:
 
   ```js
   export default {
@@ -421,15 +399,15 @@ This option enables or disables the handling of URLs in functions such as `url()
   }
   ```
 
-T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.
+T> لتصفية الواردات المحددة، يمكنك استخدام [IgnorePlugin](/plugins/ignore-plugin/) المدمج في webpack. الخيار [`filter`](/loaders/css-loader/#filter)، كما هو متاح في `css-loader`، غير مدعوم.
 
 #### module.parser.css.namedExports
 
-This option enables the use of ES modules named export for CSS exports. When set to `true`, the CSS module will export its classes and styles using named exports.
+يتيح هذا الخيار استخدام التصدير المسمى ES modules لعمليات التصدير CSS. عند التعيين على `true`، سيقوم CSS module بتصدير فئاته وأنماطه باستخدام عمليات التصدير المسماة.
 
-- Type: `boolean`
-- Available: 5.90.0+
-- Example:
+- النوع: `boolean`
+- متاح: 5.90.0+
+- مثال:
 
   ```js
   export default {
@@ -443,8 +421,8 @@ This option enables the use of ES modules named export for CSS exports. When set
   };
   ```
 
-When `namedExports` is `false` for CSS modules, you can retrieve CSS classes using various import methods.
-Named exports are redirected to improve developer experience (DX), facilitating a smooth transition from default exports to named exports:
+عندما يكون `namedExports` هو `false` لـ CSS modules، يمكنك استرداد فئات CSS باستخدام طرق استيراد متنوعة.
+تتم إعادة توجيه عمليات التصدير المسماة لتحسين تجربة المطورين (DX)، مما يسهل الانتقال السلس من عمليات التصدير الافتراضية إلى عمليات التصدير المسماة:
 
 ```js
 import * as styles from "./styles.module.css";
@@ -457,7 +435,7 @@ console.log(styles1.foo); // Access via default import styles1
 console.log(foo); // Direct named import
 ```
 
-When `namedExports` is enabled (default behavior), you can use **only** named exports to import CSS classes.
+عند تمكين `namedExports` (السلوك الافتراضي)، يمكنك استخدام **فقط** عمليات التصدير المسماة لاستيراد فئات CSS.
 
 ```css
 /* styles.css */
@@ -474,17 +452,17 @@ When `namedExports` is enabled (default behavior), you can use **only** named ex
 import { footer, header } from "./styles.module.css";
 ```
 
-By enabling `namedExports`, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.
+من خلال تمكين `namedExports`، فإنك تتبنى نهجًا أكثر نمطية وقابلية للصيانة لإدارة CSS في مشاريع JavaScript، مع الاستفادة من بناء جملة ES module لعمليات استيراد أكثر وضوحًا ووضوحًا.
 
 #### module.parser.css.pure
 
 <Badge text="5.107.0+" />
 
-Enable strict pure mode for CSS Modules. Every selector must contain at least one local class or id selector; otherwise webpack emits a build error. This mirrors the pure mode of [`postcss-modules-local-by-default`](https://github.com/css-modules/postcss-modules-local-by-default) and helps catch accidentally global selectors early.
+تمكين الوضع النقي الصارم لـ CSS Modules. يجب أن يحتوي كل محدد على فئة محلية واحدة أو محدد معرف واحد على الأقل؛ وإلا فإن webpack يصدر خطأ build. يعكس هذا الوضع النقي لـ [`postcss-modules-local-by-default`](https://github.com/css-modules/postcss-modules-local-by-default) ويساعد في اكتشاف المحددات العامة غير المقصودة مبكرًا.
 
-- Type: `boolean`
-- Default: `false`
-- Available for: `css/module` and `css/auto` (not exposed for `css/global`, where global-by-default is the intended semantic).
+- النوع: `boolean`
+- الافتراضي: `false`
+- متوفر لـ: `css/module` و`css/auto` (غير معروض لـ `css/global`، حيث يكون global بشكل افتراضي هو الدلالي المقصود).
 
 **webpack.config.js**
 
@@ -501,9 +479,9 @@ export default {
 };
 ```
 
-Two comments opt out of the check when needed.
+تعليقان ينسحبان من الشيك عند الحاجة.
 
-`/* cssmodules-pure-ignore */` placed directly before a rule suppresses the check for that single rule. The suppression is per-rule and is not propagated to children.
+`/* cssmodules-pure-ignore */` الذي تم وضعه مباشرة قبل القاعدة يمنع التحقق من تلك القاعدة الفردية. القمع هو حسب القاعدة ولا يتم نشره للأطفال.
 
 ```css
 /* cssmodules-pure-ignore */
@@ -513,7 +491,7 @@ a {
 }
 ```
 
-`/* cssmodules-pure-no-check */` placed among the leading comments of a file (before any rule) disables the check for the whole file.
+`/* cssmodules-pure-no-check */` الذي يتم وضعه بين التعليقات البادئة للملف (قبل أي قاعدة) يؤدي إلى تعطيل التحقق من الملف بأكمله.
 
 ```css
 /* cssmodules-pure-no-check */
@@ -524,16 +502,16 @@ a {
 }
 ```
 
-Some constructs are exempt by design: nested rules inside a local-bearing ancestor are treated as pure-compliant, `&` resolves to the parent rule's purity, and `@keyframes` and `@counter-style` body contents are not checked.
+يتم استثناء بعض البنيات حسب التصميم: يتم التعامل مع القواعد المتداخلة داخل سلف حامل محلي على أنها متوافقة تمامًا، ويتوافق `&` مع نقاء القاعدة الأصلية، ولا يتم التحقق من محتويات النص `@keyframes` و`@counter-style`.
 
 #### module.parser.css.animation
 
 <Badge text="5.104.0+" />
 
-Enable or disable renaming of `@keyframes` animation names in CSS modules.
+تمكين أو تعطيل إعادة تسمية أسماء الرسوم المتحركة `@keyframes` في CSS modules.
 
-- Type: `boolean`
-- Default: `true`
+- النوع: `boolean`
+- الافتراضي: `true`
 
 **webpack.config.js**
 
@@ -553,10 +531,10 @@ export default {
 
 <Badge text="5.104.0+" />
 
-Enable or disable renaming of `@container` names in CSS modules.
+تمكين أو تعطيل إعادة تسمية أسماء `@container` في CSS modules.
 
-- Type: `boolean`
-- Default: `true`
+- النوع: `boolean`
+- الافتراضي: `true`
 
 **webpack.config.js**
 
@@ -576,10 +554,10 @@ export default {
 
 <Badge text="5.104.0+" />
 
-Enable or disable renaming of custom identifiers in CSS modules.
+تمكين أو تعطيل إعادة تسمية المعرفات المخصصة في CSS modules.
 
-- Type: `boolean`
-- Default: `true`
+- النوع: `boolean`
+- الافتراضي: `true`
 
 **webpack.config.js**
 
@@ -599,10 +577,10 @@ export default {
 
 <Badge text="5.104.0+" />
 
-Enable or disable renaming of dashed identifiers, such as CSS custom properties (e.g., `--my-variable`).
+تمكين أو تعطيل إعادة تسمية المعرفات المتقطعة، مثل CSS الخصائص المخصصة (على سبيل المثال، `--my-variable`).
 
-- Type: `boolean`
-- Default: `true`
+- النوع: `boolean`
+- الافتراضي: `true`
 
 **webpack.config.js**
 
@@ -622,10 +600,10 @@ export default {
 
 <Badge text="5.104.0+" />
 
-Enable or disable renaming of `@function` names in CSS modules.
+تمكين أو تعطيل إعادة تسمية أسماء `@function` في CSS modules.
 
-- Type: `boolean`
-- Default: `true`
+- النوع: `boolean`
+- الافتراضي: `true`
 
 **webpack.config.js**
 
@@ -645,10 +623,10 @@ export default {
 
 <Badge text="5.104.0+" />
 
-Enable or disable renaming of grid identifiers in CSS modules.
+تمكين أو تعطيل إعادة تسمية معرفات الشبكة في CSS modules.
 
-- Type: `boolean`
-- Default: `true`
+- النوع: `boolean`
+- الافتراضي: `true`
 
 **webpack.config.js**
 
@@ -666,11 +644,11 @@ export default {
 
 ### module.parser.css.exportType
 
-Configure how CSS content will be exported.
+قم بتخصيص كيفية تصدير محتوى CSS.
 
-- Type: `boolean`
-- Available: 5.102.0+
-- Example:
+- النوع: `boolean`
+- متاح: 5.102.0+
+- مثال:
 
   ```js
   export default {
@@ -685,15 +663,15 @@ Configure how CSS content will be exported.
   };
   ```
 
-Possible values: `'link' | 'text' | 'css-style-sheet'
+القيم المحتملة: ``رابط' | "نص" | "ورقة أنماط CSS"
 
-- `link` - extract CSS into own file and use `link` tags to inject into DOM.
-- `text` - store CSS in JS file and return using default export.
-- `css-style-sheet` - the default export is a constructable stylesheet (i.e. CSSStyleSheet). Useful for custom elements and shadow DOM.
+- `link` - استخرج CSS في الملف الخاص واستخدم علامات `link` لإدخالها في DOM.
+- `text` - قم بتخزين CSS في ملف JS وإعادته باستخدام التصدير الافتراضي.
+- `css-style-sheet` - التصدير الافتراضي هو ورقة أنماط قابلة للإنشاء (أي CSSStyleSheet). مفيد للعناصر المخصصة وshadow DOM.
 
 ### module.parser.javascript
 
-Configure options for JavaScript parser.
+تخصيص الخيارات للمحلل اللغوي JavaScript.
 
 ```js
 export default {
@@ -708,20 +686,20 @@ export default {
 };
 ```
 
-It's allowed to configure those options in [`Rule.parser`](/configuration/module/#ruleparser) as well to target specific modules.
+يُسمح بتخصيص هذه الخيارات في [`Rule.parser`](/configuration/module/#ruleparser) بالإضافة إلى target المحددة modules.
 
 #### module.parser.javascript.anonymousDefaultExportName
 
 <Badge text="5.107.0+" />
 
-Controls whether webpack sets `.name` to `"default"` for anonymous default-export functions and classes, matching the ES spec for native ESM. When enabled, webpack injects a small runtime helper (`__webpack_require__.dn`) that calls `Object.defineProperty(...)` on the export to set the `.name` value.
+يتحكم في ما إذا كان webpack يضبط `.name` على `"default"` لوظائف وفئات التصدير الافتراضية المجهولة، بما يتوافق مع مواصفات ES لـ ESM الأصلي. عند التمكين، يقوم webpack بإدخال مساعد runtime صغير (`__webpack_require__.dn`) يستدعي `Object.defineProperty(...)` عند التصدير لتعيين القيمة `.name`.
 
-- Type: `boolean`
-- Default: `true` for applications, `false` for libraries (when [`output.library`](/configuration/output/#outputlibrary) is set).
+- النوع: `boolean`
+- الافتراضي: `true` للتطبيقات، `false` للمكتبات (عند تعيين [`output.library`](/configuration/output/#outputlibrary)).
 
-Applications stay spec-compliant by default. Libraries skip the helper to keep bundle size small, since library consumers rarely rely on `.name === "default"`.
+تظل التطبيقات متوافقة مع المواصفات بشكل افتراضي. تتخطى المكتبات المساعد لإبقاء حجم bundle صغيرًا، نظرًا لأن مستهلكي library نادرًا ما يعتمدون على `.name === "default"`.
 
-To override the default explicitly:
+لتجاوز الافتراضي بشكل صريح:
 
 **webpack.config.js**
 
@@ -739,11 +717,11 @@ export default {
 
 #### module.parser.javascript.commonjsMagicComments
 
-Enable [magic comments](/api/module-methods/#magic-comments) support for CommonJS.
+تمكين دعم [التعليقات السحرية](/api/module-methods/#magic-comments) لـ CommonJS.
 
-- Type: `boolean`
-- Available: 5.17.0+
-- Example:
+- النوع: `boolean`
+- متاح: 5.17.0+
+- مثال:
 
   ```js
   export default {
@@ -757,7 +735,7 @@ Enable [magic comments](/api/module-methods/#magic-comments) support for CommonJ
   };
   ```
 
-Note that only `webpackIgnore` comment is supported at the moment:
+لاحظ أن تعليق `webpackIgnore` فقط هو المعتمد في الوقت الحالي:
 
 ```js
 const x = require(/* webpackIgnore: true */ "x");
@@ -765,11 +743,11 @@ const x = require(/* webpackIgnore: true */ "x");
 
 #### module.parser.javascript.dynamicImportFetchPriority
 
-Specify the global [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) for dynamic import.
+حدد [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) العامة للاستيراد الديناميكي.
 
-- Type: `'low' | 'high' | 'auto' | false`
-- Available: 5.87.0+
-- Example:
+- النوع: `'low' | 'high' | 'auto' | false`
+- متاح: 5.87.0+
+- مثال:
 
   ```js
   export default {
@@ -785,11 +763,11 @@ Specify the global [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/
 
 #### module.parser.javascript.dynamicImportMode
 
-Specifies global mode for dynamic import.
+يحدد الوضع العام للاستيراد الديناميكي.
 
-- Type: `'eager' | 'weak' | 'lazy' | 'lazy-once'`
-- Available: 5.73.0+
-- Example:
+- النوع: `'eager' | 'weak' | 'lazy' | 'lazy-once'`
+- متاح: 5.73.0+
+- مثال:
 
   ```js
   export default {
@@ -805,11 +783,11 @@ Specifies global mode for dynamic import.
 
 #### module.parser.javascript.dynamicImportPrefetch
 
-Specifies global prefetch for dynamic import.
+يحدد الجلب المسبق العالمي للاستيراد الديناميكي.
 
-- Type: `number | boolean`
-- Available: 5.73.0+
-- Example:
+- النوع: `number | boolean`
+- متاح: 5.73.0+
+- مثال:
 
   ```js
   export default {
@@ -825,11 +803,11 @@ Specifies global prefetch for dynamic import.
 
 #### module.parser.javascript.dynamicImportPreload
 
-Specifies global preload for dynamic import.
+يحدد التحميل المسبق العام للاستيراد الديناميكي.
 
-- Type: `number | boolean`
-- Available: 5.73.0+
-- Example:
+- النوع: `number | boolean`
+- متاح: 5.73.0+
+- مثال:
 
   ```js
   export default {
@@ -845,11 +823,11 @@ Specifies global preload for dynamic import.
 
 #### module.parser.javascript.exportsPresence
 
-Specifies the behavior of invalid export names in `\"import ... from ...\"` and `\"export ... from ...\"`.
+يحدد سلوك أسماء التصدير غير الصالحة في `\"import ... from ...\"` و`\"export ... from ...\"`.
 
-- Type: `'error' | 'warn' | 'auto' | false`
-- Available: 5.62.0+
-- Example:
+- النوع: `'error' | 'warn' | 'auto' | false`
+- متاح: 5.62.0+
+- مثال:
 
   ```js
   export default {
@@ -865,11 +843,11 @@ Specifies the behavior of invalid export names in `\"import ... from ...\"` and
 
 #### module.parser.javascript.importExportsPresence
 
-Specifies the behavior of invalid export names in `\"import ... from ...\"`.
+يحدد سلوك أسماء التصدير غير الصالحة في `\"import ... from ...\"`.
 
-- Type: `'error' | 'warn' | 'auto' | false`
-- Available: 5.62.0+
-- Example:
+- النوع: `'error' | 'warn' | 'auto' | false`
+- متاح: 5.62.0+
+- مثال:
 
   ```js
   export default {
@@ -885,21 +863,21 @@ Specifies the behavior of invalid export names in `\"import ... from ...\"`.
 
 #### module.parser.javascript.importMeta
 
-Controls how webpack evaluates `import.meta` expressions during bundling.
+يتحكم في كيفية تقييم webpack لتعبيرات `import.meta` أثناء التجميع.
 
-- Type: `boolean | 'preserve-unknown'`
-- Default: `true`
-- Available: 5.68.0+
+- النوع: `boolean | 'preserve-unknown'`
+- الافتراضي: `true`
+- متاح: 5.68.0+
 
-Accepted values:
+القيم المقبولة:
 
-- `true` - webpack evaluates known `import.meta` properties (e.g. `import.meta.url`, `import.meta.webpackHot`); behavior of unknown properties depends on other configuration (e.g. `output.module`).
-- `false` - disables all `import.meta` evaluation; webpack leaves expressions as-is.
-- `'preserve-unknown'` <Badge text="5.105.0+" /> - evaluates known properties as usual but **preserves** any non-standard properties verbatim in the output instead of removing them.
+- `true` - webpack يقوم بتقييم خصائص `import.meta` المعروفة (على سبيل المثال `import.meta.url`، `import.meta.webpackHot`)؛ يعتمد سلوك الخصائص غير المعروفة على تخصيصات أخرى (مثل `output.module`).
+- `false` - تعطيل كافة تقييمات `import.meta`؛ webpack يترك التعبيرات كما هي.
+- `'preserve-unknown'` <Badge text="5.105.0+" /> - يتم تقييم الخصائص المعروفة كالمعتاد ولكن **يحتفظ** بأي خصائص غير قياسية حرفيًا في output بدلاً من إزالتها.
 
-  W> When `output.module` is `true`, unknown `import.meta` properties are preserved automatically without this option.
+W> عندما يكون `output.module` هو `true`، يتم الاحتفاظ بخصائص `import.meta` غير المعروفة تلقائيًا بدون هذا الخيار.
 
-- Example - disable `import.meta` evaluation entirely:
+- مثال - تعطيل تقييم `import.meta` بالكامل:
 
   ```js
   export default {
@@ -913,7 +891,7 @@ Accepted values:
   };
   ```
 
-- Example - preserve custom `import.meta` properties without enabling `output.module`:
+- مثال - الحفاظ على خصائص `import.meta` المخصصة دون تمكين `output.module`:
 
   ```js
   // webpack.config.js
@@ -928,10 +906,10 @@ Accepted values:
   };
   ```
 
-  With this configuration, custom properties on `import.meta` set by the build tool or runtime are preserved in the generated output:
+باستخدام هذا التخصيص، يتم الاحتفاظ بالخصائص المخصصة على `import.meta` التي تم تعيينها بواسطة الأداة build أو runtime في output الذي تم إنشاؤه:
 
   ```js
-  // import.meta.customProp is set externally (e.g. by a build tool or runtime)
+  // يتم تعيين import.meta.customProp خارجيًا (على سبيل المثال بواسطة أداة build أو runtime)
   if (import.meta.customProp) {
     console.log(import.meta.customProp);
   }
@@ -939,11 +917,11 @@ Accepted values:
 
 #### module.parser.javascript.importMetaContext
 
-Enable/disable evaluating [`import.meta.webpackContext`](/api/module-variables/#importmetawebpackcontext).
+تمكين/تعطيل تقييم [`import.meta.webpackContext`](/api/module-variables/#importmetawebpackcontext).
 
-- Type: `boolean`
-- Available: 5.70.0+
-- Example:
+- النوع: `boolean`
+- متاح: 5.70.0+
+- مثال:
 
   ```js
   export default {
@@ -959,11 +937,11 @@ Enable/disable evaluating [`import.meta.webpackContext`](/api/module-variables/#
 
 #### module.parser.javascript.overrideStrict
 
-Set the module to `'strict'` or `'non-strict'` mode. This can affect the module's behavior, as some behaviors differ between strict and non-strict modes.
+اضبط الوضع module على `'strict'` أو `'non-strict'`. يمكن أن يؤثر هذا على سلوك module، حيث تختلف بعض السلوكيات بين الوضع الصارم وغير الصارم.
 
-- Type: `'strict' | 'non-strict'`
-- Available: 5.93.0+
-- Example:
+- النوع: `'strict' | 'non-strict'`
+- متاح: 5.93.0+
+- مثال:
 
   ```js
   export default {
@@ -979,11 +957,11 @@ Set the module to `'strict'` or `'non-strict'` mode. This can affect the module'
 
 #### module.parser.javascript.reexportExportsPresence
 
-Specifies the behavior of invalid export names in `\"export ... from ...\"`. This might be useful to disable during the migration from `\"export ... from ...\"` to `\"export type ... from ...\"` when reexporting types in TypeScript.
+يحدد سلوك أسماء التصدير غير الصالحة في `\"export ... from ...\"`. قد يكون من المفيد تعطيل هذا أثناء الترحيل من `\"export ... from ...\"` إلى `\"export type ... from ...\"` عند إعادة تصدير الأنواع في TypeScript.
 
-- Type: `'error' | 'warn' | 'auto' | false`
-- Available: 5.62.0+
-- Example:
+- النوع: `'error' | 'warn' | 'auto' | false`
+- متاح: 5.62.0+
+- مثال:
 
   ```js
   export default {
@@ -999,10 +977,10 @@ Specifies the behavior of invalid export names in `\"export ... from ...\"`. Thi
 
 #### module.parser.javascript.url
 
-Enable parsing of `new URL()` syntax.
+تمكين تحليل بناء الجملة `new URL()`.
 
-- Type: `boolean = true` | `'relative'`
-- Example:
+- النوع: `boolean = true` | `'relative'`
+- مثال:
 
   ```js
   export default {
@@ -1016,7 +994,7 @@ Enable parsing of `new URL()` syntax.
   };
   ```
 
-The `'relative'` value for `module.parser.javascript.url` is available since webpack <Badge text='5.23.0' />. When used, webpack would generate relative URLs for `new URL()` syntax, i.e., there's no base URL included in the result URL:
+قيمة `'relative'` لـ `module.parser.javascript.url` متاحة منذ webpack <Badge text='5.23.0' />. عند استخدامه، سيؤدي webpack إلى إنشاء عناوين URL نسبية لبناء جملة `new URL()`، أي أنه لا يوجد عنوان URL أساسي مضمن في عنوان URL للنتيجة:
 
 ```html
 <!-- with 'relative' -->
@@ -1026,23 +1004,23 @@ The `'relative'` value for `module.parser.javascript.url` is available since web
 <img src="file:///path/to/project/dist/c43188443804f1b1f534.svg" />
 ```
 
-1. This is useful for SSR (Server side rendering) when base URL is not known by server (and it saves a few bytes). To be identical it must also be used for the client build.
-2. Also for static site generators, mini-css-plugin and html-plugin, etc. where server side rendering is commonly needed.
+1. يعد هذا مفيدًا لـ SSR (العرض الجانبي Server) عندما لا يكون عنوان URL الأساسي معروفًا بواسطة server (ويحفظ بضعة بايتات). لكي تكون متطابقة، يجب أيضًا استخدامها لـ client build.
+2. أيضًا لمولدات المواقع الثابتة، mini-css-plugin وhtml-plugin، وما إلى ذلك حيث تكون هناك حاجة عادةً إلى العرض الجانبي server.
 
 #### module.parser.javascript.parse
 
 <Badge text="5.103.0+" />
 
-Use a custom JavaScript parse function instead of webpack's built-in parser.
+استخدم تحليل JavaScript مخصص function بدلاً من المحلل اللغوي المدمج في webpack.
 
-Return `ast`, `comments`, and `semicolons` to ensure webpack’s AST analysis works correctly.
+قم بإرجاع `ast` و`comments` و`semicolons` للتأكد من أن تحليل AST الخاص بـ webpack يعمل بشكل صحيح.
 
-- `ast` should be ESTree-compatible.
-- `comments` is an array of ESTree comment nodes.
-- `semicolons` is a set of positions where the parser inserted a semicolon.
+- يجب أن يكون `ast` متوافقًا مع EStree.
+- `comments` هو array من عقد تعليق ESTree.
+- `semicolons` عبارة عن مجموعة من المواضع حيث يقوم المحلل بإدراج فاصلة منقوطة.
 
-- Type: `(code: string, options: ParseOptions) => ParseResult`
-- Example:
+- النوع: `(code: string, options: ParseOptions) => ParseResult`
+- مثال:
 
   ```js
   export default {
@@ -1075,14 +1053,14 @@ Return `ast`, `comments`, and `semicolons` to ensure webpack’s AST analysis wo
 
 ### module.parser.json
 
-Configure options for json parser.
+تخصيص الخيارات لمحلل json.
 
 ```js
 export default {
   module: {
     parser: {
       json: {
-        // options
+        // خيارات
       },
     },
   },
@@ -1091,26 +1069,26 @@ export default {
 
 ### module.parser.json.exportsDepth
 
-The depth of json dependency flagged as `exportInfo`.
+عمق json dependency تم وضع علامة عليه كـ `exportInfo`.
 
-The default value of `module.parser.json.exportsDepth` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `module.parser.json.exportsDepth` على [`mode`](/configuration/mode/):
 
-| Mode            | Default    |
+| Mode            | الافتراضي    |
 | --------------- | ---------- |
-| `"production"`  | `Infinity` |
-| `"development"` | `1`        |
-| `"none"`        | `Infinity` |
+| `"production"` | `Infinity` |
+| `"development"` | `1` |
+| `"none"` | `Infinity` |
 
-- Type: `number`
-- Available: <Badge text='5.98.0+' />
-- Example:
+- النوع: `number`
+- متاح: <Badge text='5.98.0+' />
+- مثال:
 
 ```js
 export default {
   module: {
     parser: {
       json: {
-        // For example, for the following json
+        // على سبيل المثال، بالنسبة إلى json التالي
         // {
         //   "depth_1": {
         //     "depth_2": {
@@ -1119,7 +1097,7 @@ export default {
         //   },
         //   "_depth_1": "bar"
         // }
-        // when `exportsDepth: 1`, `depth_2` and `depth_3` will not be flagged as `exportInfo`.
+        // عندما لا يتم وضع علامة على `exportsDepth: 1` و`depth_2` و`depth_3` كـ `exportInfo`.
         exportsDepth: 1,
       },
     },
@@ -1129,19 +1107,19 @@ export default {
 
 ### module.parser.json.namedExports
 
-Allow named exports for json of object type.
+السماح بالتصدير المُسمى لنوع json من النوع object.
 
-- Type: `boolean`
-- Available: <Badge text='5.103.0+' />
-- Example:
+- النوع: `boolean`
+- متاح: <Badge text='5.103.0+' />
+- مثال:
 
 ```js
 export default {
   module: {
     parser: {
       json: {
-        // Example:
-        // import { myField } from "./file.json";
+        // مثال:
+        // استيراد { myField } من "./file.json"؛
         //
         // console.log(myField);
         namedExports: true,
@@ -1153,10 +1131,10 @@ export default {
 
 ### module.parser.json.parse
 
-Function to parser content and return JSON.
+Function لمحلل المحتوى والعودة JSON.
 
-- Type: `((input: string) => Buffer | JsonValue)`
-- Example:
+- النوع: `((input: string) => Buffer | JsonValue)`
+- مثال:
 
 ```js
 import json5 from "json5";
@@ -1176,12 +1154,12 @@ export default {
 
 `RegExp` `[RegExp]` `function(resource)` `string` `[string]`
 
-Prevent webpack from parsing any files matching the given regular expression(s). Ignored files **should not** have calls to `import`, `require`, `define` or any other importing mechanism. This can boost build performance when ignoring large libraries.
+منع webpack من تحليل أي ملفات تطابق التعبير (التعبيرات) العادية المحددة. **لا ينبغي** أن تحتوي الملفات التي تم تجاهلها على استدعاءات لـ `import`، `require`، `define` أو أي آلية استيراد أخرى. يمكن أن يؤدي هذا إلى تعزيز build performance عند تجاهل المكتبات الكبيرة.
 
-`noParse` can be also used as a way to deliberately prevent expansion of all `import`, `require`, `define` etc. calls for cases when those calls are unreachable at runtime.
-For example, when building a project for `'browser'` [target](/configuration/target/) and using a third-party library that was prebuilt for both browser and Node.js and it requires Node.js built-ins e.g. `require('os')`.
+يمكن أيضًا استخدام `noParse` كطريقة لمنع توسيع جميع المكالمات `import`، `require`، `define` وما إلى ذلك بشكل متعمد في الحالات التي لا يمكن الوصول فيها إلى هذه المكالمات على runtime.
+على سبيل المثال، عند إنشاء مشروع لـ `'browser'` [target](/configuration/target/) واستخدام جهة خارجية library تم إنشاؤها مسبقًا لكل من browser وNode.js ويتطلب Node.js مدمجًا، على سبيل المثال، `require('os')`.
 
-T> You may need to use `[\\/]` in regex to match `\` on Windows and `/` on Mac/Linux.
+T> قد تحتاج إلى استخدام `[\\/]` في التعبير العادي لمطابقة `\` على نظام التشغيل Windows و`/` على نظام Mac/Linux.
 
 **webpack.config.js**
 
@@ -1208,10 +1186,10 @@ export default {
 
 `boolean` `function (module)`
 
-Cache the resolution of module requests. There are a couple of defaults for `module.unsafeCache`:
+Cache حل طلبات module. هناك بضعة إعدادات افتراضية لـ `module.unsafeCache`:
 
-- `false` if [`cache`](/configuration/cache) is disabled.
-- `true` if [`cache`](/configuration/cache) is enabled and the module appears to come from node modules, `false` otherwise.
+- `false` إذا تم تعطيل [`cache`](/configuration/cache).
+- `true` إذا تم تمكين [`cache`](/configuration/cache) ويبدو أن module يأتي من `node_modules`، و`false` بخلاف ذلك.
 
 **webpack.config.js**
 
@@ -1228,64 +1206,64 @@ export default {
 
 `(Rule | undefined | null | false | "" | 0 | "...")[]`
 
-An array of [Rules](#rule) which are matched to requests when modules are created. These rules can modify how the module is created. They can apply loaders to the module, or modify the parser.
+array من [القواعد](#rule) والتي تتطابق مع الطلبات عند إنشاء modules. يمكن لهذه القواعد تعديل كيفية إنشاء module. يمكنهم تطبيق loaders على module أو تعديل المحلل اللغوي.
 
-As of webpack 5.87.0, falsy values such as `false`, `undefined`, `null` and `0` can be used to conditionally disable a rule.
+اعتبارًا من webpack 5.87.0، يمكن استخدام القيم الزائفة مثل `false`، `undefined`، `null` و`0` لتعطيل القاعدة بشكل مشروط.
 
-## Rule
+## القاعدة
 
 `object`
 
-A Rule can be separated into three parts — Conditions, Results and nested Rules.
+يمكن تقسيم القاعدة إلى ثلاثة أجزاء - الشروط والنتائج والقواعد المتداخلة.
 
-### Rule Conditions
+### شروط القاعدة
 
-There are two input values for the conditions:
+هناك قيمتان مدخلتان للشروط:
 
-1. The resource: An absolute path to the file requested. It's already resolved according to the [`resolve` rules](/configuration/resolve).
+1. المورد: المسار المطلق للملف المطلوب. لقد تم حل المشكلة بالفعل وفقًا لـ [`resolve` القواعد](/configuration/resolve).
 
-2. The issuer: An absolute path to the file of the module which requested the resource. It's the location of the import.
+2. المُصدر: المسار المطلق لملف module الذي طلب المورد. إنه موقع الاستيراد.
 
-**Example:** When we `import './style.css'` within `app.js`, the resource is `/path/to/style.css` and the issuer is `/path/to/app.js`.
+**مثال:** عندما نكون `import './style.css'` ضمن `app.js`، يكون المورد `/path/to/style.css` وجهة الإصدار هي `/path/to/app.js`.
 
-In a Rule the properties [`test`](#ruletest), [`include`](#ruleinclude), [`exclude`](#ruleexclude) and [`resource`](#ruleresource) are matched with the resource and the property [`issuer`](#ruleissuer) is matched with the issuer.
+في القاعدة، تتم مطابقة الخصائص [`test`](#ruletest)، [`include`](#ruleinclude)، [`exclude`](#ruleexclude) و[`resource`](#ruleresource) مع المورد ويتم مطابقة الخاصية [`issuer`](#ruleissuer) مع المُصدر.
 
-When using multiple conditions, all conditions must match.
+عند استخدام شروط متعددة، يجب أن تتطابق جميع الشروط.
 
-W> Be careful! The resource is the _resolved_ path of the file, which means symlinked resources are the real path _not_ the symlink location. This is good to remember when using tools that symlink packages (like `npm link`), common conditions like `/node_modules/` may inadvertently miss symlinked files. Note that you can turn off symlink resolving (so that resources are resolved to the symlink path) via [`resolve.symlinks`](/configuration/resolve/#resolvesymlinks).
+W> كن حذرا! المورد هو المسار _الذي تم حله_ للملف، مما يعني أن الموارد المرتبطة هي المسار الحقيقي _وليس_ موقع الارتباط الرمزي. من الجيد تذكر ذلك عند استخدام الأدوات التي تربط packages (مثل `npm link`)، الحالات الشائعة مثل `/node_modules/` قد تفوت الملفات المرتبطة دون قصد. لاحظ أنه يمكنك إيقاف تشغيل تحليل الارتباط الرمزي (بحيث يتم تحليل الموارد إلى مسار الارتباط الرمزي) عبر [`resolve.symlinks`](/configuration/resolve/#resolvesymlinks).
 
-### Rule results
+### نتائج القاعدة
 
-Rule results are used only when the Rule condition matches.
+يتم استخدام نتائج القاعدة فقط عندما يتطابق شرط القاعدة.
 
-There are two output values of a Rule:
+هناك قيمتان output للقاعدة:
 
-1. Applied loaders: An array of loaders applied to the resource.
-2. Parser options: An options object which should be used to create the parser for this module.
+1. تم تطبيق loaders: تم تطبيق array من loaders على المورد.
+2. خيارات المحلل اللغوي: الخيارات object التي يجب استخدامها لإنشاء المحلل اللغوي لهذا module.
 
-These properties affect the loaders: [`loader`](#ruleloader), [`options`](#ruleoptions--rulequery), [`use`](#ruleuse).
+تؤثر هذه الخصائص على loaders: [`loader`](#ruleloader)، [`options`](#ruleoptions--rulequery)، [`use`](#ruleuse).
 
-For compatibility also these properties: [`query`](#ruleoptions--rulequery), [`loaders`](#ruleloaders).
+للتوافق أيضًا هذه الخصائص: [`query`](#ruleoptions--rulequery), [`loaders`](#ruleloaders).
 
-The [`enforce`](#ruleenforce) property affects the loader category. Whether it's a normal, pre- or post- loader.
+تؤثر الخاصية [`enforce`](#ruleenforce) على الفئة loader. سواء كان ذلك طبيعيًا أو قبل أو بعد loader.
 
-The [`parser`](#ruleparser) property affects the parser options.
+تؤثر الخاصية [`parser`](#ruleparser) على خيارات المحلل اللغوي.
 
-## Nested rules
+## قواعد متداخلة
 
-Nested rules can be specified under the properties [`rules`](#rulerules) and [`oneOf`](#ruleoneof).
+يمكن تحديد القواعد المتداخلة ضمن الخصائص [`rules`](#rulerules) و[`oneOf`](#ruleoneof).
 
-These rules are evaluated only when the parent Rule condition matches. Each nested rule can contain its own conditions.
+يتم تقييم هذه القواعد فقط عندما يتطابق شرط القاعدة الأصلية. يمكن أن تحتوي كل قاعدة متداخلة على شروطها الخاصة.
 
-The order of evaluation is as follows:
+ترتيب التقييم هو كما يلي:
 
-1. The parent rule
+1. القاعدة الأم
 2. [`rules`](#rulerules)
 3. [`oneOf`](#ruleoneof)
 
 ## Rule.assert
 
-A [`Condition`](#condition) that allows you to match the import assertion of a dependency and apply specific rules based on the assertion type.
+[`Condition`](#condition) الذي يسمح لك بمطابقة تأكيد الاستيراد لـ dependency وتطبيق قواعد محددة بناءً على نوع التأكيد.
 
 **webpack.config.js**
 
@@ -1295,7 +1273,7 @@ export default {
   module: {
     rules: [
       {
-        // Handles imports with the assertion "assert { type: 'json' }"
+        // يعالج عمليات الاستيراد مع التأكيد "assert { type: 'json' }"
         assert: { type: "json" },
         loader: import.meta.resolve("./loader-assert.js"),
       },
@@ -1312,11 +1290,11 @@ export default {
 import one from "./pkg-1.json" assert { type: "json" };
 ```
 
-In this example, `Rule.assert` is used to apply `loader-assert.js` to any module imported with the assertion `assert { type: "json" }`, ensuring that JSON files are processed correctly.
+في هذا المثال، يتم استخدام `Rule.assert` لتطبيق `loader-assert.js` على أي module تم استيراده مع التأكيد `assert { type: "json" }`، مما يضمن معالجة ملفات JSON بشكل صحيح.
 
 ## Rule.compiler
 
-A [`Condition`](#condition) that allows you to match the child compiler name.
+[`Condition`](#condition) الذي يسمح لك بمطابقة اسم الطفل compiler.
 
 **webpack.config.js**
 
@@ -1345,51 +1323,51 @@ export default {
 
 `string`
 
-Possible values: `'pre' | 'post'`
+القيم المحتملة: `'pre' | 'post'`
 
-Specifies the category of the loader. No value means normal loader.
+يحدد فئة loader. لا توجد قيمة تعني عادي loader.
 
-There is also an additional category "inlined loader" which are loaders applied inline of the import/require.
+هناك أيضًا فئة إضافية "مضمنة loader" والتي يتم تطبيقها loaders ضمن عملية الاستيراد/الطلب.
 
-There are two phases that all loaders enter one after the other:
+هناك مرحلتان تدخلهما جميع loaders واحدة تلو الأخرى:
 
-1. **Pitching** phase: the pitch method on loaders is called in the order `post, inline, normal, pre`. See [Pitching Loader](/api/loaders/#pitching-loader) for details.
-2. **Normal** phase: the normal method on loaders is executed in the order `pre, normal, inline, post`. Transformation on the source code of a module happens in this phase.
+1. مرحلة **العرض**: يتم استدعاء طريقة العرض على loaders بالترتيب `post, inline, normal, pre`. راجع [الترويج Loader](/api/loaders/#pitching-loader) للحصول على التفاصيل.
+2. **المرحلة العادية**: يتم تنفيذ الطريقة العادية على loaders بالترتيب `pre, normal, inline, post`. يحدث التحويل على الكود المصدري لـ module في هذه المرحلة.
 
-All normal loaders can be omitted (overridden) by prefixing `!` in the request.
+يمكن حذف (تجاوز) كل loaders العادي عن طريق البادئة `!` في الطلب.
 
-All normal and pre loaders can be omitted (overridden) by prefixing `-!` in the request.
+يمكن حذف (تجاوز) كل ما هو عادي وما قبل loaders عن طريق البادئة `-!` في الطلب.
 
-All normal, post and pre loaders can be omitted (overridden) by prefixing `!!` in the request.
+يمكن حذف (تجاوز) كل ما هو عادي وما بعد وما قبل loaders عن طريق البادئة `!!` في الطلب.
 
 ```js
-// Disable normal loaders
+// تعطيل عادي loaders
 import { a } from "!./file1.js";
 ```
 
 ```js
-// Disable preloaders and normal loaders
+// تعطيل التحميل المسبق والعادي loaders
 import { b } from "-!./file2.js";
 ```
 
 ```js
-// Disable all loaders
+// تعطيل الكل loaders
 import { c } from "!!./file3.js";
 ```
 
-Inline loaders and `!` prefixes should not be used as they are non-standard. They may be used by loader generated code.
+لا ينبغي استخدام البادئات المضمنة loaders و`!` لأنها غير قياسية. يمكن استخدامها بواسطة الكود الذي تم إنشاؤه loader.
 
 ## Rule.exclude
 
-Exclude all modules matching any of these conditions. If you supply a `Rule.exclude` option, you cannot also supply a `Rule.resource`. See [`Rule.resource`](#ruleresource) and [`Condition.exclude`](#condition) for details.
+استبعاد كافة modules المطابقة لأي من هذه الشروط. إذا قمت بتوفير خيار `Rule.exclude`، فلن تتمكن أيضًا من توفير `Rule.resource`. راجع [`Rule.resource`](#ruleresource) و[`Condition.exclude`](#condition) للحصول على التفاصيل.
 
 ## Rule.include
 
-Include all modules matching any of these conditions. If you supply a `Rule.include` option, you cannot also supply a `Rule.resource`. See [`Rule.resource`](#ruleresource) and [`Condition.include`](#condition) for details.
+قم بتضمين جميع modules المطابقة لأي من هذه الشروط. إذا قمت بتوفير خيار `Rule.include`، فلن تتمكن أيضًا من توفير `Rule.resource`. راجع [`Rule.resource`](#ruleresource) و[`Condition.include`](#condition) للحصول على التفاصيل.
 
 ## Rule.issuer
 
-A [`Condition`](#condition) to match against the module that issued the request. In the following example, the `issuer` for the `a.js` request would be the path to the `index.js` file.
+A [`Condition`](#condition) للمطابقة مع module الذي أصدر الطلب. في المثال التالي، سيكون `issuer` للطلب `a.js` هو المسار إلى الملف `index.js`.
 
 **index.js**
 
@@ -1397,11 +1375,11 @@ A [`Condition`](#condition) to match against the module that issued the request.
 import A from "./a.js";
 ```
 
-This option can be used to apply loaders to the dependencies of a specific module or set of modules.
+يمكن استخدام هذا الخيار لتطبيق loaders على dependencies لـ module محدد أو مجموعة modules.
 
 ## Rule.issuerLayer
 
-Allows to filter/match by layer of the issuer.
+يسمح بالتصفية/المطابقة حسب طبقة المُصدر.
 
 **webpack.config.js**
 
@@ -1422,7 +1400,7 @@ export default {
 
 `string`
 
-Specify the layer in which the module should be placed in. A group of modules could be united in one layer which could then be used in [split chunks](/plugins/split-chunks-plugin/#splitchunkslayer), [stats](/configuration/stats/#statsgroupmodulesbylayer) or [entry options](/configuration/entry-context/#entry-descriptor).
+حدد الطبقة التي يجب وضع module فيها. يمكن دمج مجموعة modules في طبقة واحدة يمكن استخدامها بعد ذلك في [تقسيم chunks](/plugins/split-chunks-plugin/#splitchunkslayer)، [stats](/configuration/stats/#statsgroupmodulesbylayer) أو [entry خيارات](/configuration/entry-context/#entry-descriptor).
 
 **webpack.config.js**
 
@@ -1444,7 +1422,7 @@ export default {
 
 `boolean = false`
 
-Extracts existing source map data from files (from their `//# sourceMappingURL` comment), useful for preserving the source maps of third-party libraries.
+يستخرج بيانات Source Map الموجودة من الملفات (من تعليق `//# sourceMappingURL`)، وهو مفيد للحفاظ على Source Maps لمكتبات الجهات الخارجية.
 
 **webpack.config.js**
 
@@ -1455,7 +1433,7 @@ export default {
     rules: [
       {
         test: /\.m?js$/,
-        extractSourceMap: true,
+        extractSource Map: true,
       },
     ],
   },
@@ -1464,17 +1442,17 @@ export default {
 
 ## Rule.loader
 
-`Rule.loader` is a shortcut to `Rule.use: [ { loader } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.loader`](#useentry) for details.
+`Rule.loader` هو اختصار لـ `Rule.use: [ { loader } ]`. راجع [`Rule.use`](#ruleuse) و[`UseEntry.loader`](#useentry) للحصول على التفاصيل.
 
 ## Rule.loaders
 
-W> This option is **deprecated** in favor of `Rule.use`.
+W> تم **إهمال** هذا الخيار لصالح `Rule.use`.
 
-`Rule.loaders` is an alias to `Rule.use`. See [`Rule.use`](#ruleuse) for details.
+`Rule.loaders` هو اسم مستعار لـ `Rule.use`. راجع [`Rule.use`](#ruleuse) للحصول على التفاصيل.
 
 ## Rule.mimetype
 
-You can match config rules to data uri with `mimetype`.
+يمكنك مطابقة قواعد التخصيص مع URI للبيانات باستخدام `mimetype`.
 
 **webpack.config.js**
 
@@ -1492,11 +1470,11 @@ export default {
 };
 ```
 
-`application/json`, `text/javascript`, `application/javascript`, `application/node` and `application/wasm` are already included by default as mimetype.
+تم بالفعل تضمين `application/json` و`text/javascript` و`application/javascript` و`application/node` و`application/wasm` افتراضيًا كنوع mimetype.
 
 ## Rule.oneOf
 
-An array of [`Rules`](#rule) from which only the first matching Rule is used when the Rule matches.
+array من [`Rules`](#rule) يتم استخدام القاعدة المطابقة الأولى منها فقط عندما تتطابق القاعدة.
 
 **webpack.config.js**
 
@@ -1523,26 +1501,26 @@ export default {
 };
 ```
 
-T> See [`Nested rules`](#nested-rules) for more information.
+T> راجع [`Nested rules`](#nested-rules) لمزيد من المعلومات.
 
 ## Rule.options / Rule.query
 
-`Rule.options` and `Rule.query` are shortcuts to `Rule.use: [ { options } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.options`](#useentry) for details.
+`Rule.options` و`Rule.query` هما اختصاران لـ `Rule.use: [ { options } ]`. راجع [`Rule.use`](#ruleuse) و[`UseEntry.options`](#useentry) للحصول على التفاصيل.
 
-W> `Rule.query` is deprecated in favor of `Rule.options` and `UseEntry.options`.
+W> تم إهمال `Rule.query` لصالح `Rule.options` و`UseEntry.options`.
 
 ## Rule.parser
 
-An object with parser options. All applied parser options are merged.
+object مع خيارات المحلل اللغوي. يتم دمج كافة خيارات المحلل اللغوي المطبقة.
 
-Parsers may inspect these options and disable or reconfigure themselves accordingly. Most of the default plugins interpret the values as follows:
+يمكن للموزعين فحص هذه الخيارات وتعطيلها أو إعادة تخصيصها وفقًا لذلك. معظم القيم الافتراضية plugins تفسر القيم كما يلي:
 
-- Setting the option to `false` disables the parser.
-- Setting the option to `true` or leaving it `undefined` enables the parser.
+- يؤدي تعيين الخيار إلى `false` إلى تعطيل المحلل اللغوي.
+- يؤدي تعيين الخيار إلى `true` أو تركه `undefined` إلى تمكين المحلل اللغوي.
 
-However, parser plugins may accept more than only a boolean. For example, the internal `NodeStuffPlugin` can accept an object instead of `true` to add additional options for a particular Rule.
+ومع ذلك، قد يقبل المحلل اللغوي plugins أكثر من boolean فقط. على سبيل المثال، يمكن أن يقبل `NodeStuffPlugin` الداخلي object بدلاً من `true` لإضافة خيارات إضافية لقاعدة معينة.
 
-**Examples** (parser options by the default plugins):
+**أمثلة** (خيارات المحلل اللغوي بشكل افتراضي plugins):
 
 ```js
 import path from "node:path";
@@ -1570,7 +1548,7 @@ export default {
           commonjsMagicComments: false, // disable magic comments support for CommonJS
           node: {}, // reconfigure node layer on module level
           // or
-          // node: false, // disable __dirname, __filename, etc.
+          // node: false, // تعطيل __dirname و__filename وما إلى ذلك.
           worker: ["default from web-worker", "..."], // Customize the WebWorker handling for javascript files, "..." refers to the defaults.
         },
       },
@@ -1579,17 +1557,17 @@ export default {
 };
 ```
 
-If `Rule.type` is an `asset` then `Rules.parser` option may be an object or a function that describes a condition whether to encode file contents to Base64 or emit it as a separate file into the output directory.
+إذا كان `Rule.type` هو `asset`، فقد يكون خيار `Rules.parser` هو object أو function الذي يصف شرطًا سواءً لتشفير محتويات الملف إلى Base64 أو إرساله كملف منفصل إلى الدليل output.
 
-If `Rule.type` is an `asset` or `asset/inline` then `Rule.generator` option may be an object that describes the encoding of the module source or a function that encodes module's source by a custom algorithm.
+إذا كان `Rule.type` هو `asset` أو `asset/inline`، فقد يكون خيار `Rule.generator` هو object الذي يصف تشفير مصدر module أو function الذي يقوم بتشفير مصدر module بواسطة خوارزمية مخصصة.
 
-See [Asset Modules guide](/guides/asset-modules/) for additional information and use cases.
+راجع [Asset Modules دليل](/guides/asset-modules/) للحصول على معلومات إضافية وحالات الاستخدام.
 
 ## Rule.parser.dataUrlCondition
 
 `object = { maxSize number = 8096 }` `function (source, { filename, module }) => boolean`
 
-If a module source size is less than `maxSize` then module will be injected into the bundle as a Base64-encoded string, otherwise module file will be emitted into the output directory.
+إذا كان حجم المصدر module أقل من `maxSize`، فسيتم إدخال module في bundle باعتباره string مشفرًا بـ Base64، وإلا فسيتم إرسال ملف module إلى الدليل output.
 
 **webpack.config.js**
 
@@ -1611,7 +1589,7 @@ export default {
 };
 ```
 
-When a function is given, returning `true` tells webpack to inject the module into the bundle as Base64-encoded string, otherwise module file will be emitted into the output directory.
+عندما يتم إعطاء function، فإن `true` يخبر webpack بإدخال module في bundle كـ Base64-encoded string، وإلا فسيتم إصدار ملف module إلى الدليل output.
 
 **webpack.config.js**
 
@@ -1640,10 +1618,10 @@ export default {
 
 `object = { encoding string = 'base64' | false, mimetype string = undefined | false }` `function (content, { filename, module }) => string`
 
-When `Rule.generator.dataUrl` is used as an object, you can configure two properties:
+عند استخدام `Rule.generator.dataUrl` كـ object، يمكنك تخصيص خاصيتين:
 
-- encoding: When set to `'base64'`, module source will be encoded using Base64 algorithm. Setting `encoding` to false will disable encoding.
-- mimetype: A mimetype for data URI. Resolves from module resource extension by default.
+- الترميز: عند التعيين على `'base64'`، سيتم تشفير المصدر module باستخدام خوارزمية Base64. سيؤدي ضبط `encoding` على خطأ إلى تعطيل التشفير.
+- mimetype: نوع mime لـ URI للبيانات. يتم الحل من امتداد المورد module بشكل افتراضي.
 
 **webpack.config.js**
 
@@ -1666,7 +1644,7 @@ export default {
 };
 ```
 
-When used as a function, it executes for every module and must return a data URI string.
+عند استخدامه كـ function، فإنه يتم تنفيذه لكل module ويجب أن يُرجع URI للبيانات string.
 
 ```js
 export default {
@@ -1693,11 +1671,11 @@ export default {
 
 ### Rule.generator.emit
 
-Opt out of writing assets from [Asset Modules](/guides/asset-modules/), you might want to use it in Server side rendering cases.
+قم بإلغاء الاشتراك في كتابة assets من [Asset Modules](/guides/asset-modules/)، وقد ترغب في استخدامها في حالات العرض الجانبية Server.
 
-- Type: `boolean = true`
-- Available: <Badge text='5.25.0+' />
-- Example:
+- النوع: `boolean = true`
+- متاح: <Badge text='5.25.0+' />
+- مثال:
 
   ```js
   export default {
@@ -1718,7 +1696,7 @@ Opt out of writing assets from [Asset Modules](/guides/asset-modules/), you migh
 
 ### Rule.generator.filename
 
-The same as [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) but for specific rule. Overrides `output.assetModuleFilename` and works only with `asset` and `asset/resource` module types.
+نفس [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) ولكن لقاعدة محددة. يتجاوز `output.assetModuleFilename` ويعمل فقط مع النوعين `asset` و`asset/resource` module.
 
 **webpack.config.js**
 
@@ -1748,10 +1726,10 @@ export default {
 
 ### Rule.generator.publicPath
 
-Customize `publicPath` for specific Asset Modules.
+قم بتخصيص `publicPath` لـ Asset Modules محدد.
 
-- Type: `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
-- Available: <Badge text='5.28.0+' />
+- النوع: `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
+- متاح: <Badge text='5.28.0+' />
 
 ```js
 export default {
@@ -1775,10 +1753,10 @@ export default {
 
 ### Rule.generator.outputPath
 
-Emit the asset in the specified folder relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.
+قم بإصدار asset في المجلد المحدد بالنسبة إلى "output.path". يجب أن يكون هذا مطلوبًا فقط عند تحديد "publicPath" المخصص لمطابقة بنية المجلد هناك.
 
-- Type: `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
-- Available: <Badge text='5.67.0+' />
+- النوع: `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
+- متاح: <Badge text='5.67.0+' />
 
 ```js
 export default {
@@ -1803,11 +1781,11 @@ export default {
 
 ## Rule.resource
 
-A [`Condition`](#condition) matched with the resource. See details in [`Rule` conditions](#rule-conditions).
+A [`Condition`](#condition) متطابق مع المورد. راجع التفاصيل في [`Rule` الشروط](#rule-conditions).
 
 ## Rule.resourceQuery
 
-A [`Condition`](#condition) matched with the resource query. This option is used to test against the query section of a request string (i.e. from the question mark onwards). If you were to `import Foo from './foo.css?inline'`, the following condition would match:
+A [`Condition`](#condition) متطابق مع استعلام المورد. يُستخدم هذا الخيار للاختبار مقابل قسم الاستعلام الخاص بالطلب string (أي من علامة الاستفهام فصاعدًا). إذا كنت تريد `import Foo from './foo.css?inline'`، فسوف يتطابق الشرط التالي:
 
 **webpack.config.js**
 
@@ -1830,7 +1808,7 @@ export default {
 
 `function(input) => string | object`
 
-If `Rule.type` is set to `'json'` then `Rules.parser.parse` option may be a function that implements custom logic to parse module's source and convert it to a JavaScript `object`. It may be useful to import `toml`, `yaml` and other non-JSON files as JSON, without specific loaders:
+إذا تم تعيين `Rule.type` على `'json'`، فقد يكون خيار `Rules.parser.parse` هو function الذي ينفذ منطقًا مخصصًا لتحليل مصدر module وتحويله إلى JavaScript `object`. قد يكون من المفيد استيراد `toml`، `yaml` وملفات أخرى غير JSON كـ JSON، بدون loaders محدد:
 
 **webpack.config.js**
 
@@ -1855,16 +1833,16 @@ export default {
 
 ## Rule.rules
 
-An array of [`Rules`](#rule) that is also used when the Rule matches.
+array من [`Rules`](#rule) يتم استخدامه أيضًا عندما تتطابق القاعدة.
 
-T> See [`Nested rules`](#nested-rules) for more information.
+T> راجع [`Nested rules`](#nested-rules) لمزيد من المعلومات.
 
 ## Rule.scheme
 
-Match the used schema, e.g., `data`, `http`.
+قم بمطابقة المخطط المستخدم، على سبيل المثال، `data`، `http`.
 
-- Type: `string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditions | RuleSetCondition[]`
-- Available: <Badge text='5.38.0+' />
+- النوع: `string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditions | RuleSetCondition[]`
+- متاح: <Badge text='5.38.0+' />
 
 **webpack.config.js**
 
@@ -1885,19 +1863,19 @@ export default {
 
 `bool`
 
-Indicate what parts of the module contain side effects. See [Tree Shaking](/guides/tree-shaking/#mark-the-file-as-side-effect-free) for details.
+أشر إلى أجزاء module التي تحتوي على آثار جانبية. راجع [Tree Shaking](/guides/tree-shaking/#mark-the-file-as-side-effect-free) للحصول على التفاصيل.
 
 ## Rule.test
 
-Include all modules that pass test assertion. If you supply a `Rule.test` option, you cannot also supply a `Rule.resource`. See [`Rule.resource`](#ruleresource) and [`Condition`](#condition) for details.
+قم بتضمين جميع modules التي اجتازت تأكيد الاختبار. إذا قمت بتوفير خيار `Rule.test`، فلن تتمكن أيضًا من توفير `Rule.resource`. راجع [`Rule.resource`](#ruleresource) و[`Condition`](#condition) للحصول على التفاصيل.
 
 ## Rule.type
 
 `string`
 
-Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'asset/bytes' | 'css' | 'css/auto' | 'css/module' | 'css/global'`
+القيم المحتملة: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'asset/bytes' | 'css' | 'css/auto' | 'css/module' | 'css/global'`
 
-`Rule.type` sets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring. For example, if you want to load a `.json` file through a custom loader, you'd need to set the `type` to `javascript/auto` to bypass webpack's built-in json importing.
+`Rule.type` يضبط النوع للمطابقة module. يؤدي هذا إلى منع حدوث القواعد الافتراضية وسلوكيات الاستيراد الافتراضية الخاصة بها. على سبيل المثال، إذا كنت تريد تحميل ملف `.json` من خلال loader مخصص، فستحتاج إلى تعيين `type` على `javascript/auto` لتجاوز استيراد json المدمج في webpack.
 
 **webpack.config.js**
 
@@ -1917,13 +1895,13 @@ export default {
 };
 ```
 
-> See [Asset Modules guide](/guides/asset-modules/) for more about `asset*` type.
+> راجع [Asset Modules دليل](/guides/asset-modules/) لمزيد من المعلومات حول نوع `asset*`.
 
-### css/auto
+### المغلق/تلقائي
 
 <Badge text="5.87.0+" />
 
-See use case of `css/auto` module type [here](https://github.com/webpack/webpack/issues/16572). Make sure to enable [`experiments.css`](/configuration/experiments/#experimentscss) to use `css/auto`.
+راجع حالة استخدام النوع `css/auto` module [هنا](https://github.com/webpack/webpack/issues/16572). تأكد من تمكين [`experiments.css`](/configuration/experiments/#experimentscss) لاستخدام `css/auto`.
 
 ```js
 export default {
@@ -1948,15 +1926,15 @@ export default {
 
 `[UseEntry]` `function(info)`
 
-Starting with webpack 5.87.0 falsy values such as `undefined` `null` can be used to conditionally disable specific use entry.
+بدءًا من webpack 5.87.0 يمكن استخدام القيم الزائفة مثل `undefined` `null` لتعطيل الاستخدام المحدد entry بشكل مشروط.
 
 **`[UseEntry]`**
 
-`Rule.use` can be an array of [UseEntry](#useentry) which are applied to modules. Each entry specifies a loader to be used.
+`Rule.use` يمكن أن يكون array من [UseEntry](#useentry) والتي يتم تطبيقها على modules. يحدد كل entry loader ليتم استخدامه.
 
-Passing a string (i.e. `use: [ 'style-loader' ]`) is a shortcut to the loader property (i.e. `use: [ { loader: 'style-loader '} ]`).
+يعد تمرير string (أي `use: [ 'style-loader' ]`) اختصارًا للخاصية loader (أي `use: [ { loader: 'style-loader '} ]`).
 
-Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).
+يمكن ربط loaders بتمرير عدة loaders، والتي سيتم تطبيقها من اليمين إلى اليسار (من الأخير إلى الأول).
 
 **webpack.config.js**
 
@@ -1972,7 +1950,7 @@ export default {
           {
             loader: "css-loader",
             options: {
-              importLoaders: 1,
+              importloaders: 1,
             },
           },
           {
@@ -1990,16 +1968,16 @@ export default {
 
 **`function(info)`**
 
-`Rule.use` can also be a function which receives the object argument describing the module being loaded, and must return an array of `UseEntry` items.
+يمكن أن يكون `Rule.use` أيضًا function الذي يستقبل الوسيطة object التي تصف module الجاري تحميلها، ويجب أن يُرجع array من عناصر `UseEntry`.
 
-The `info` object parameter has the following fields:
+تحتوي المعلمة `info` object على الحقول التالية:
 
-- `compiler`: The current webpack compiler (can be undefined)
-- `issuer`: The path to the module that is importing the module being loaded
-- `realResource`: Always the path to the module being loaded
-- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string
+- `compiler`: التيار webpack compiler (يمكن أن يكون غير محدد)
+- `issuer`: المسار إلى module الذي يقوم باستيراد module الجاري تحميله
+- `realResource`: يتم دائمًا تحميل المسار إلى module
+- `resource`: المسار إلى module الذي يتم تحميله، عادةً ما يساوي `realResource` إلا عندما تتم الكتابة فوق اسم المورد عبر `!=!` في الطلب string
 
-The same shortcut as an array can be used for the return value (i.e. `use: [ 'style-loader' ]`).
+يمكن استخدام نفس الاختصار مثل array للقيمة المرجعة (أي `use: [ 'style-loader' ]`).
 
 **webpack.config.js**
 
@@ -2032,16 +2010,16 @@ export default {
 };
 ```
 
-See [UseEntry](#useentry) for details.
+راجع [UseEntry](#useentry) للحصول على التفاصيل.
 
 ## Rule.resolve
 
-W> `Rule.resolve` is Available since webpack 4.36.1
+W> `Rule.resolve` متاح منذ webpack 4.36.1
 
-Resolving can be configured on module level. See all available options on [resolve configuration page](/configuration/resolve/#resolve).
-All applied resolve options get deeply merged with higher level [resolve](/configuration/resolve/#resolve).
+يمكن تخصيص الحل على مستوى module. اطلع على جميع الخيارات المتاحة على [resolve صفحة التخصيص](/configuration/resolve/#resolve).
+يتم دمج جميع خيارات resolve المطبقة بعمق مع المستوى الأعلى [resolve](/configuration/resolve/#resolve).
 
-For example, let's imagine we have an entry in `./src/index.js`, `./src/footer/default.js` and a `./src/footer/overridden.js` to demonstrate the module level resolve.
+على سبيل المثال، لنتخيل أن لدينا entry في `./src/index.js`، `./src/footer/default.js` و`./src/footer/overridden.js` لتوضيح المستوى module resolve.
 
 **./src/index.js**
 
@@ -2075,7 +2053,7 @@ export default {
 };
 ```
 
-When creating a bundle with this configuration, `console.log(footer)` will output 'default footer'. Let's set `Rule.resolve` for `.js` files, and alias `footer` to `overridden.js`.
+عند إنشاء bundle بهذا التخصيص، فإن `console.log(footer)` سيكون output "التذييل الافتراضي". لنقم بتعيين `Rule.resolve` لملفات `.js`، والاسم المستعار `footer` إلى `overridden.js`.
 
 **webpack.js.org**
 
@@ -2100,13 +2078,13 @@ export default {
 };
 ```
 
-When creating a bundle with updated configuration, `console.log(footer)` will output 'overridden footer'.
+عند إنشاء bundle بتخصيص محدث، فإن `console.log(footer)` سوف output "تجاوز التذييل".
 
 ### resolve.fullySpecified
 
 `boolean = true`
 
-When enabled, you should provide the file extension when `import`ing a module in `.mjs` files or any other `.js` files when their nearest parent `package.json` file contains a `"type"` field with a value of `"module"`, otherwise webpack would fail the compiling with a `Module not found` error. And webpack won't resolve directories with filenames defined in the [`resolve.mainFiles`](/configuration/resolve/#resolvemainfiles), you have to specify the filename yourself.
+عند التمكين، يجب عليك توفير امتداد الملف عند `import`ing module في ملفات `.mjs` أو أي ملفات `.js` أخرى عندما يحتوي الملف الأصلي `package.json` على حقل `"type"` بقيمة `"module"`، وإلا فإن webpack سيفشل التجميع مع خطأ `Module not found`. وwebpack لن resolve الدلائل ذات أسماء الملفات المحددة في [`resolve.mainFiles`](/configuration/resolve/#resolvemainfiles)، عليك تحديد اسم الملف بنفسك.
 
 **webpack.config.js**
 
@@ -2126,13 +2104,13 @@ export default {
 };
 ```
 
-W> `resolve.fullySpecified` doesn't affect requests from [mainFields](/configuration/resolve/#resolvemainfields), [aliasFields](/configuration/resolve/#resolvealiasfields) or [aliases](/configuration/resolve/#resolvealias).
+W> `resolve.fullySpecified` لا يؤثر على الطلبات الواردة من [mainFields](/configuration/resolve/#resolvemainfields) أو [aliasFields](/configuration/resolve/#resolvealiasfields) أو [الأسماء المستعارة](/configuration/resolve/#resolvealias).
 
 ## Rule.with
 
 <Badge text="v5.92.0+" />
 
-A [`Condition`](#condition) that allows you to match the imports based on specific conditions provided with the `with` keyword, enabling different rules to be applied based on the content type.
+[`Condition`](#condition) يسمح لك بمطابقة الواردات بناءً على شروط محددة مقدمة مع الكلمة الأساسية `with`، مما يتيح تطبيق قواعد مختلفة بناءً على نوع المحتوى.
 
 **webpack.config.js**
 
@@ -2142,7 +2120,7 @@ export default {
   module: {
     rules: [
       {
-        // Handles imports with the condition "with { type: 'json' }"
+        // يتعامل مع الواردات بالشرط "مع { type: 'json' }"
         with: { type: "json" },
         loader: import.meta.resolve("./loader-assert.js"),
       },
@@ -2157,25 +2135,25 @@ export default {
 import one from "./pkg-1.json" with { type: "json" };
 ```
 
-In this example, `Rule.with` is used to apply `loader-assert.js` to any module imported with the condition `with { type: "json" }`.
+في هذا المثال، يتم استخدام `Rule.with` لتطبيق `loader-assert.js` على أي module مستورد بالشرط `with { type: "json" }`.
 
-## Condition
+## الحالة
 
-Conditions can be one of these:
+الشروط يمكن أن تكون واحدة من هذه:
 
-- A string: To match the input must start with the provided string. I. e. an absolute directory path, or absolute path to the file.
-- A RegExp: It's tested with the input.
-- A function: It's called with the input and must return a truthy value to match.
-- An array of Conditions: At least one of the Conditions must match.
-- An object: All properties must match. Each property has a defined behavior.
+- أ string: لمطابقة الإدخال يجب أن يبدأ بـ string المقدم. أي. مسار الدليل المطلق، أو المسار المطلق للملف.
+- أ RegExp: تم اختباره باستخدام الإدخال.
+- A function: يتم استدعاؤه مع الإدخال ويجب أن يُرجع قيمة صحيحة للمطابقة.
+- array من الشروط: يجب أن يتطابق شرط واحد على الأقل.
+- object: يجب أن تتطابق جميع الخصائص. كل خاصية لها سلوك محدد.
 
-`{ and: [Condition] }`: All Conditions must match.
+`{ and: [Condition] }`: يجب أن تتطابق جميع الشروط.
 
-`{ or: [Condition] }`: Any Condition must match.
+`{ or: [Condition] }`: يجب أن يتطابق أي شرط.
 
-`{ not: [Condition] }`: All Conditions must NOT match.
+`{ not: [Condition] }`: يجب ألا تتطابق جميع الشروط.
 
-**Example:**
+**مثال:**
 
 ```js
 import path from "node:path";
@@ -2191,10 +2169,10 @@ export default {
       {
         test: /\.css$/,
         include: [
-          // will include any paths relative to the current directory starting with `app/styles`
-          // e.g. `app/styles.css`, `app/styles/styles.css`, `app/stylesheet.css`
+          // سيتضمن أي مسارات تتعلق بالدليل الحالي تبدأ بـ `app/styles`
+          // على سبيل المثال `app/styles.css`، `app/styles/styles.css`، `app/stylesheet.css`
           path.resolve(__dirname, "app/styles"),
-          // add an extra slash to only include the content of the directory `vendor/styles/`
+          // أضف شرطة مائلة إضافية لتضمين محتوى الدليل `vendor/styles/` فقط
           path.join(__dirname, "vendor/styles/"),
         ],
       },
@@ -2209,15 +2187,15 @@ export default {
 
 **`object`**
 
-It must have a `loader` property being a string. It is resolved relative to the configuration [`context`](/configuration/entry-context/#context) with the loader resolving options ([resolveLoader](/configuration/resolve/#resolveloader)).
+يجب أن تحتوي على خاصية `loader` وهي string. تم حلها بالنسبة إلى التخصيص [`context`](/configuration/entry-context/#context) مع خيارات الحل loader ([resolveLoader](/configuration/resolve/#resolveloader)).
 
-It can have an `options` property being a string or object. This value is passed to the loader, which should interpret it as loader options.
+يمكن أن تحتوي على خاصية `options` وهي string أو object. يتم تمرير هذه القيمة إلى loader، والتي يجب أن تفسرها على أنها خيارات loader.
 
-For compatibility a `query` property is also possible, which is an alias for the `options` property. Use the `options` property instead.
+من أجل التوافق، من الممكن أيضًا استخدام خاصية `query`، وهي اسم مستعار للخاصية `options`. استخدم الخاصية `options` بدلاً من ذلك.
 
-Note that webpack needs to generate a unique module identifier from the resource and all loaders including options. It tries to do this with a `JSON.stringify` of the options object. This is fine in 99.9% of cases, but may be not unique if you apply the same loaders with different options to the resource and the options have same stringified values.
+لاحظ أن webpack يحتاج إلى إنشاء معرف module فريد من المصدر وجميع loaders بما في ذلك الخيارات. يحاول القيام بذلك باستخدام `JSON.stringify` من الخيارات object. يعد هذا أمرًا جيدًا في 99.9% من الحالات، ولكنه قد لا يكون فريدًا إذا قمت بتطبيق نفس loaders مع خيارات مختلفة على المورد وكانت الخيارات لها نفس القيم الموحدة.
 
-It also breaks if the options object cannot be stringified (i.e. circular JSON). Because of this you can have a `ident` property in the options object which is used as unique identifier.
+وينكسر أيضًا إذا لم يكن من الممكن تقييد الخيارات object (أي دائرية JSON). ولهذا السبب يمكن أن يكون لديك خاصية `ident` في الخيارات object والتي يتم استخدامها كمعرف فريد.
 
 **webpack.config.js**
 
@@ -2239,14 +2217,14 @@ export default {
 
 **`function(info)`**
 
-A `UseEntry` can also be a function which receives the object argument describing the module being loaded, and must return a non-function `UseEntry` object. This can be used to vary the loader options on a per-module basis.
+يمكن أن يكون `UseEntry` أيضًا function الذي يستقبل الوسيطة object التي تصف module الجاري تحميلها، ويجب أن يُرجع غير function `UseEntry` object. يمكن استخدام هذا لتغيير خيارات loader على أساس module.
 
-The `info` object parameter has the following fields:
+تحتوي المعلمة `info` object على الحقول التالية:
 
-- `compiler`: The current webpack compiler (can be undefined)
-- `issuer`: The path to the module that is importing the module being loaded
-- `realResource`: Always the path to the module being loaded
-- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string
+- `compiler`: التيار webpack compiler (يمكن أن يكون غير محدد)
+- `issuer`: المسار إلى module الذي يقوم باستيراد module الجاري تحميله
+- `realResource`: يتم دائمًا تحميل المسار إلى module
+- `resource`: المسار إلى module الذي يتم تحميله، عادةً ما يساوي `realResource` إلا عندما تتم الكتابة فوق اسم المورد عبر `!=!` في الطلب string
 
 **webpack.config.js**
 
@@ -2274,17 +2252,17 @@ export default {
 };
 ```
 
-## Module Contexts
+## Module السياقات
 
-These options describe the default settings for the context created when a dynamic dependency is encountered.
+تصف هذه الخيارات الإعدادات الافتراضية للسياق الذي تم إنشاؤه عند مواجهة dependency ديناميكي.
 
-Example for an `unknown` dynamic dependency: `require`.
+مثال لديناميكية `unknown` dependency: `require`.
 
-Example for an `expr` dynamic dependency: `require(expr)`.
+مثال لديناميكية `expr` dependency: `require(expr)`.
 
-Example for an `wrapped` dynamic dependency: `require('./templates/' + expr)`.
+مثال لديناميكية `wrapped` dependency: `require('./templates/' + expr)`.
 
-Here are the available options with their [defaults](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js):
+فيما يلي الخيارات المتاحة مع [الإعدادات الافتراضية](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js):
 
 **webpack.config.js**
 
@@ -2308,14 +2286,14 @@ export default {
 };
 ```
 
-T> You can use the `ContextReplacementPlugin` to modify these values for individual dependencies. This also removes the warning.
+T> يمكنك استخدام `ContextReplacementPlugin` لتعديل هذه القيم للفرد dependencies. يؤدي هذا أيضًا إلى إزالة التحذير.
 
-A few use cases:
+بعض حالات الاستخدام:
 
-- Warn for dynamic dependencies: `wrappedContextCritical: true`.
-- `require(expr)` should include the whole directory: `exprContextRegExp: /^\.\//`
-- `require('./templates/' + expr)` should not include subdirectories by default: `wrappedContextRecursive: false`
-- `strictExportPresence` makes missing exports an error instead of warning
-- Set the inner regular expression for partial dynamic dependencies : `wrappedContextRegExp: /\\.\\*/`
+- تحذير من الديناميكية dependencies: `wrappedContextCritical: true`.
+- يجب أن يتضمن `require(expr)` الدليل بأكمله: `exprContextRegExp: /^\.\//`
+- يجب ألا يتضمن `require('./templates/' + expr)` أدلة فرعية بشكل افتراضي: `wrappedContextRecursive: false`
+- `strictExportPresence` يجعل عمليات التصدير المفقودة خطأ بدلاً من التحذير
+- اضبط التعبير العادي الداخلي للديناميكية الجزئية dependencies : `wrappedContextRegExp: /\\.\\*/`
 
-W> `strictExportPresence` is deprecated in favor of [`exportsPresence`](#moduleparserjavascriptexportspresence) option.
+W> تم إهمال `strictExportPresence` لصالح خيار [`exportsPresence`](#moduleparserjavascriptexportspresence).
diff --git a/src/content/configuration/node.mdx b/src/content/configuration/node.mdx
index e6ddee6f08d2..0bc3bc4d8d39 100644
--- a/src/content/configuration/node.mdx
+++ b/src/content/configuration/node.mdx
@@ -2,22 +2,14 @@
 title: Node
 sort: 17
 contributors:
-  - sokra
-  - skipjack
-  - oneforwonder
-  - Rob--W
-  - byzyk
-  - EugeneHlushko
-  - anikethsaha
-  - chenxsan
-  - snitin315
+  - RlxChap2
 ---
 
-The following Node.js options configure whether to polyfill or mock certain [Node.js globals](https://nodejs.org/docs/latest/api/globals.html).
+تُحدِّد خيارات Node.js الآتية ما إذا كان webpack سيُوفِّر polyfill أو مُحاكاة (mock) لبعض [المتغيّرات العالميّة في Node.js](https://nodejs.org/docs/latest/api/globals.html).
 
-This feature is provided by webpack's internal [`NodeStuffPlugin`](https://github.com/webpack/webpack/blob/main/lib/NodeStuffPlugin.js) plugin.
+هذه الميزة يُوفّرها plugin داخلي في webpack هو [`NodeStuffPlugin`](https://github.com/webpack/webpack/blob/main/lib/NodeStuffPlugin.js).
 
-W> As of webpack 5, You can configure only `global`, `__filename`/`import.meta.filename` or `__dirname`/`import.meta.dirname` under `node` option. If you're looking for how to polyfill `fs` alike in Node.js under webpack 5, please check [resolve.fallback](/configuration/resolve/#resolvefallback) for help.
+W> منذ webpack 5، لم يعد بإمكانك ضبط شيء تحت الخيار `node` سوى `global` و`__filename`/`import.meta.filename` و`__dirname`/`import.meta.dirname`. وإن كنت تبحث عن طريقة لعمل polyfill لـ `fs` ونظائرها في Node.js على webpack 5، فاستعِن بـ [resolve.fallback](/configuration/resolve/#resolvefallback).
 
 ## node
 
@@ -36,54 +28,54 @@ export default {
 };
 ```
 
-The `node` option may be set to `false` to completely turn off the `NodeStuffPlugin` plugin.
+يمكنك ضبط الخيار `node` على `false` لتُعطّل plugin الـ `NodeStuffPlugin` تماماً.
 
 ## node.global
 
 `boolean` `'warn'`
 
-T> If you are using a module which needs global variables in it, use `ProvidePlugin` instead of `global`.
+T> إن كنت تستخدم وحدة (module) تحتاج إلى متغيّرات عالميّة داخلها، فاستخدم `ProvidePlugin` بدلاً من `global`.
 
-See [the Node.js documentation](https://nodejs.org/api/globals.html#globals_global) for the exact behavior of this object.
+اطّلع على [توثيق Node.js](https://nodejs.org/api/globals.html#globals_global) لمعرفة السلوك التفصيلي لهذا الكائن.
 
-Options:
+الخيارات:
 
-- `true`: Provide a polyfill or using `globalThis` if supported by your environment, see the [`environment`](/configuration/output/#outputenvironment) option.
-- `false`: Provide nothing. Code that expects this object may crash with a `ReferenceError`.
-- `'warn'`: Show a warning when using `global`.
+- `true`: يُوفِّر polyfill أو يستعمل `globalThis` إن كانت بيئتك تدعمها، انظر الخيار [`environment`](/configuration/output/#outputenvironment).
+- `false`: لا يُوفِّر شيئاً. وقد تنهار الشيفرة التي تنتظر وجود هذا الكائن مُطلقةً `ReferenceError`.
+- `'warn'`: يُظهر تحذيراً عند استخدام `global`.
 
 ## node.\_\_filename
 
 `boolean` `'mock' | 'warn-mock' | 'node-module' | 'eval-only'`
 
-Options:
+الخيارات:
 
-- `true`: The filename of the **input** file relative to the [`context` option](/configuration/entry-context/#context).
-- `false`: Webpack won't touch your `__filename` and `import.meta.filename` code, which means you have the regular Node.js `__filename` and `import.meta.filename` behavior. The filename of the **output** file when run in a Node.js environment.
-- `'mock'`: The fixed value `'/index.js'`.
-- `'warn-mock'`: Use the fixed value of `'/index.js'` but show a warning.
-- `'node-module'`: Replace `__filename` in CommonJS modules and `import.meta.filename` code in ES modules to `fileURLToPath(import.meta.url)` when `output.module` is enabled.
-- `'eval-only'`: Defer the resolution of `__filename`/`import.meta.filename` to the Node.js runtime at execution time, but evaluate them in construction like `require`/`import` to properly resolve modules. Replace `__filename` with `import.meta.filename` and vice versa depending on the `output.module` option (if your environment does not support `import.meta.filename`, the fallback will be used using `import.meta.url` to get this value).
+- `true`: اسم ملفّ الإدخال (**input**) نسبةً إلى [خيار `context`](/configuration/entry-context/#context).
+- `false`: لن يمسّ webpack شيفرتك التي تستعمل `__filename` و`import.meta.filename`، أي ستحظى بالسلوك الاعتيادي لـ Node.js لهذين المتغيّرين. ويكون الاسم اسمَ ملفّ الإخراج (**output**) حين تُنفَّذ الشيفرة في بيئة Node.js.
+- `'mock'`: قيمة ثابتة `'/index.js'`.
+- `'warn-mock'`: يستعمل القيمة الثابتة `'/index.js'` لكن مع إظهار تحذير.
+- `'node-module'`: يستبدل `__filename` في وحدات CommonJS، و`import.meta.filename` في وحدات ES، بـ `fileURLToPath(import.meta.url)` حين يكون `output.module` مفعَّلاً.
+- `'eval-only'`: يُؤجِّل تحليل `__filename`/`import.meta.filename` إلى وقت التنفيذ ضمن Node.js، لكنه يُقيّمها أثناء البناء كما يفعل مع `require`/`import` من أجل تحليل الوحدات تحليلاً صحيحاً. كما يستبدل `__filename` بـ `import.meta.filename` والعكس بحسب الخيار `output.module` (وإن لم تكن بيئتك تدعم `import.meta.filename`، فسيُستعمَل البديل عبر `import.meta.url` للحصول على هذه القيمة).
 
-The default value can be affected by different [`target`](/configuration/target/):
+قد تتأثّر القيمة الافتراضية باختلاف [`target`](/configuration/target/):
 
-- Defaults to `'eval-only'` if [`target`](/configuration/target/) is set to `'node'` or node-like environments (`async-node`, `electron`) or mixed targets (`web` and `node` together).
-- Defaults to `'mock'` if [`target`](/configuration/target/) is set to `'web'` or web-like environments.
+- تكون افتراضياً `'eval-only'` إن كان [`target`](/configuration/target/) مضبوطاً على `'node'` أو على بيئات شبيهة بـ node (مثل `async-node` و`electron`) أو على أهداف مختلطة (مثل `web` و`node` معاً).
+- وتكون افتراضياً `'mock'` إن كان [`target`](/configuration/target/) مضبوطاً على `'web'` أو على بيئات شبيهة بالويب.
 
 ## node.\_\_dirname
 
 `boolean` `'mock' | 'warn-mock' | 'node-module' | 'eval-only'`
 
-Options:
+الخيارات:
 
-- `true`: The dirname of the **input** file relative to the [`context` option](/configuration/entry-context/#context).
-- `false`: Webpack won't touch your `__dirname` and `import.meta.dirname` code, which means you have the regular Node.js `__dirname` and `import.meta.dirname` behavior. The dirname of the **output** file when run in a Node.js environment.
-- `'mock'`: The fixed value `'/'`.
-- `'warn-mock'`: Use the fixed value of `'/'` but show a warning.
-- `'node-module'`: Replace `__dirname` in CommonJS modules to `fileURLToPath(import.meta.url + "/..")` when `output.module` is enabled.
-- `'eval-only'`: Defer the resolution of `__dirname`/`import.meta.dirname` to the Node.js runtime at execution time, but evaluate them in construction like `require`/`import` to properly resolve modules. Replace `__dirname` with `import.meta.dirname` and vice versa depending on the `output.module` option (if your environment does not support `import.meta.filename`, the fallback will be used using `import.meta.url` to get this value).
+- `true`: اسم مجلَّد ملفّ الإدخال (**input**) نسبةً إلى [خيار `context`](/configuration/entry-context/#context).
+- `false`: لن يمسّ webpack شيفرتك التي تستعمل `__dirname` و`import.meta.dirname`، أي ستحظى بالسلوك الاعتيادي لـ Node.js لهذين المتغيّرين. ويكون الاسم اسمَ مجلَّد ملفّ الإخراج (**output**) حين تُنفَّذ الشيفرة في بيئة Node.js.
+- `'mock'`: قيمة ثابتة `'/'`.
+- `'warn-mock'`: يستعمل القيمة الثابتة `'/'` لكن مع إظهار تحذير.
+- `'node-module'`: يستبدل `__dirname` في وحدات CommonJS بـ `fileURLToPath(import.meta.url + "/..")` حين يكون `output.module` مفعَّلاً.
+- `'eval-only'`: يُؤجِّل تحليل `__dirname`/`import.meta.dirname` إلى وقت التنفيذ ضمن Node.js، لكنه يُقيّمها أثناء البناء كما يفعل مع `require`/`import` من أجل تحليل الوحدات تحليلاً صحيحاً. كما يستبدل `__dirname` بـ `import.meta.dirname` والعكس بحسب الخيار `output.module` (وإن لم تكن بيئتك تدعم `import.meta.filename`، فسيُستعمَل البديل عبر `import.meta.url` للحصول على هذه القيمة).
 
-The default value can be affected by different [`target`](/configuration/target/):
+قد تتأثّر القيمة الافتراضية باختلاف [`target`](/configuration/target/):
 
-- Defaults to `'eval-only'` if [`target`](/configuration/target/) is set to `'node'` or node-like environments (`async-node`, `electron`) or mixed targets (`web` and `node` together).
-- Defaults to `'mock'` if [`target`](/configuration/target/) is set to `'web'` or web-like environments.
+- تكون افتراضياً `'eval-only'` إن كان [`target`](/configuration/target/) مضبوطاً على `'node'` أو على بيئات شبيهة بـ node (مثل `async-node` و`electron`) أو على أهداف مختلطة (مثل `web` و`node` معاً).
+- وتكون افتراضياً `'mock'` إن كان [`target`](/configuration/target/) مضبوطاً على `'web'` أو على بيئات شبيهة بالويب.
diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx
index 409237a60b50..90f1631b9494 100644
--- a/src/content/configuration/optimization.mdx
+++ b/src/content/configuration/optimization.mdx
@@ -2,40 +2,27 @@
 title: Optimization
 sort: 9
 contributors:
-  - EugeneHlushko
-  - jeremenichelli
-  - simon04
-  - byzyk
-  - madhavarshney
-  - dhurlburtusa
-  - jamesgeorge007
-  - anikethsaha
-  - snitin315
-  - pixel-ray
-  - chenxsan
-  - Roberto14
-  - hai-x
-  - shivxmsharma
+  - RlxChap2
 related:
-  - title: "webpack 4: Code Splitting, chunk graph and the splitChunks optimization"
+  - title: "webpack 4: تقسيم code، وchunk graph، وsplitChunks optimization"
     url: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
 ---
 
-Webpack runs optimizations for you depending on the chosen [`mode`](/configuration/mode/), still all optimizations are available for manual configuration and overrides.
+يقوم webpack بإجراء تحسينات لك اعتمادًا على [`mode`](/configuration/mode/) الذي تم اختياره، ولا تزال جميع التحسينات متاحة للتخصيص اليدوي والتجاوزات.
 
 ## optimization.checkWasmTypes
 
 `boolean`
 
-Tells webpack to check the incompatible types of WebAssembly modules when they are imported/exported.
+يخبر webpack بالتحقق من الأنواع غير المتوافقة من WebAssembly modules عند استيرادها/تصديرها.
 
-The default value of `optimization.checkWasmTypes` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.checkWasmTypes` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -53,33 +40,33 @@ export default {
 `boolean: false`
 `string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'`
 
-- `false`: disable webpack's built-in chunk id algorithm
-- one of the following values:
+- `false`: تعطيل خوارزمية معرف chunk المضمنة في webpack
+- إحدى القيم التالية:
   - `'natural'`
   - `'named'`
   - `'size'`
   - `'total-size'`
   - `'deterministic'`
 
-Tells Webpack which algorithm to use for chunk IDs. Setting `optimization.chunkIds` to `false` tells webpack that none of built-in algorithms should be used, as custom one can be provided via plugin. There are a couple of defaults for `optimization.chunkIds`:
+يخبر webpack أي الخوارزمية يجب استخدامها لمعرفات chunk. يؤدي ضبط `optimization.chunkIds` إلى `false` إلى إخبار webpack بأنه لا ينبغي استخدام أي من الخوارزميات المضمنة، حيث يمكن توفير خوارزمية مخصصة عبر plugin. هناك بضعة إعدادات افتراضية لـ `optimization.chunkIds`:
 
-The default value of `optimization.chunkIds` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.chunkIds` على [`mode`](/configuration/mode/):
 
-| Mode            | Default           |
+| Mode            | الافتراضي           |
 | --------------- | ----------------- |
-| `"production"`  | `'deterministic'` |
-| `"development"` | `'named'`         |
-| `"none"`        | `'natural'`       |
+| `"production"` | `'deterministic'` |
+| `"development"` | `'named'` |
+| `"none"` | `'natural'` |
 
-The following string values are supported:
+يتم دعم قيم string التالية:
 
-| Option            | Description                                                                                                                           |
+| الخيار            | الوصف                                                                                                                           |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `'natural'`       | Numeric ids in order of usage.                                                                                                        |
-| `'named'`         | Readable ids for better debugging.                                                                                                    |
-| `'deterministic'` | Short numeric ids which will not be changing between compilation. Good for long term caching. Enabled by default for production mode. |
-| `'size'`          | Numeric ids focused on minimal initial download size.                                                                                 |
-| `'total-size'`    | numeric ids focused on minimal total download size.                                                                                   |
+| `'natural'`       | معرفات رقمية حسب ترتيب الاستخدام.                                                                                                        |
+| `'named'`         | معرفات قابلة للقراءة لتحسين التصحيح.                                                                                                    |
+| `'deterministic'` | معرفات رقمية قصيرة لن تتغير بين compilation. جيد على المدى الطويل caching. يتم تمكينه افتراضيًا لوضع الإنتاج. |
+| `'size'`          | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الأولي.                                                                                 |
+| `'total-size'`    | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الإجمالي.                                                                                   |
 
 **webpack.config.js**
 
@@ -92,7 +79,7 @@ export default {
 };
 ```
 
-By default, a minimum length of 3 digits is used when `optimization.chunkIds` is set to `'deterministic'`. To override the default behaviour, set `optimization.chunkIds` to `false` and use the `webpack.ids.DeterministicChunkIdsPlugin`.
+افتراضيًا، يتم استخدام الحد الأدنى لطول 3 أرقام عند ضبط `optimization.chunkIds` على `'deterministic'`. لتجاوز السلوك الافتراضي، اضبط `optimization.chunkIds` على `false` واستخدم `webpack.ids.DeterministicChunkIdsPlugin`.
 
 **webpack.config.js**
 
@@ -114,15 +101,15 @@ export default {
 
 `boolean`
 
-Tells webpack to find segments of the module graph which can be safely concatenated into a single module. Depends on [`optimization.providedExports`](#optimizationprovidedexports) and [`optimization.usedExports`](#optimizationusedexports).
+يخبر webpack بالعثور على أجزاء من الرسم البياني module والتي يمكن ربطها بأمان في module واحد. يعتمد على [`optimization.providedExports`](#optimizationprovidedexports) و[`optimization.usedExports`](#optimizationusedexports).
 
-The default value of `optimization.concatenateModules` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.concatenateModules` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -139,15 +126,15 @@ export default {
 
 `boolean`
 
-Use the `optimization.emitOnErrors` to emit assets whenever there are errors while compiling. This ensures that erroring assets are emitted. Critical errors are emitted into the generated code and will cause errors at runtime.
+استخدم `optimization.emitOnErrors` لإصدار assets عندما تكون هناك أخطاء أثناء التجميع. وهذا يضمن انبعاث الخطأ assets. يتم إصدار أخطاء فادحة في التعليمات البرمجية التي تم إنشاؤها وسوف تسبب أخطاء في runtime.
 
-The default value of `optimization.emitOnErrors` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.emitOnErrors` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `false` |
-| `"development"` | `true`  |
-| `"none"`        | `true`  |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `true` |
 
 **webpack.config.js**
 
@@ -160,7 +147,7 @@ export default {
 };
 ```
 
-W> If you are using webpack [CLI](/api/cli/), the webpack process will not exit with an error code while this plugin is enabled. If you want webpack to "fail" when using the CLI, please check out the [`bail` option](/api/cli/#advanced-options).
+W> إذا كنت تستخدم webpack [CLI](/api/cli/)، فلن يتم الخروج من عملية webpack برمز خطأ أثناء تمكين plugin. إذا كنت تريد أن "يفشل" webpack عند استخدام CLI، فيرجى مراجعة [`bail` الخيار](/api/cli/#advanced-options).
 
 ## optimization.avoidEntryIife
 
@@ -170,17 +157,17 @@ W> If you are using webpack [CLI](/api/cli/), the webpack process will not exit
 
 T> IIFE ...
 
-Use `optimization.avoidEntryIife` ...
+استخدم `optimization.avoidEntryIife` ...
 
-Currently, `optimization.avoidEntryIife` can only optimize a single entry module along with other modules.
+في الوقت الحالي، يمكن لـ `optimization.avoidEntryIife` فقط تحسين entry module مع modules أخرى.
 
-The default value of `optimization.avoidEntryIife` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.avoidEntryIife` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -193,21 +180,21 @@ export default {
 };
 ```
 
-W> The `optimization.avoidEntryIife` option can negatively affect build performance. If you prioritize build performance over these optimizations, consider disabling this option.
+W> يمكن أن يؤثر خيار `optimization.avoidEntryIife` سلبًا على build performance. إذا أعطيت الأولوية build performance على هذه التحسينات، ففكر في تعطيل هذا الخيار.
 
 ## optimization.flagIncludedChunks
 
 `boolean`
 
-Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don't have to be loaded when the bigger chunk has been already loaded.
+يخبر webpack بتحديد ووضع علامة على chunks وهي مجموعات فرعية من chunks أخرى بطريقة لا يلزم تحميل المجموعات الفرعية عندما يكون chunk الأكبر قد تم تحميله بالفعل.
 
-The default value of `optimization.flagIncludedChunks` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.flagIncludedChunks` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -224,15 +211,15 @@ export default {
 
 `boolean`
 
-`optimization.innerGraph` tells webpack whether to conduct inner graph analysis for unused exports.
+`optimization.innerGraph` يخبر webpack ما إذا كان سيتم إجراء تحليل الرسم البياني الداخلي للصادرات غير المستخدمة.
 
-The default value of `optimization.innerGraph` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.innerGraph` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -249,24 +236,24 @@ export default {
 
 `boolean` `string: 'deterministic' | 'size'`
 
-`optimization.mangleExports` allows to control export mangling.
+`optimization.mangleExports` يسمح بالتحكم في تشويه التصدير.
 
-The default value of `optimization.mangleExports` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.mangleExports` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
-The following values are supported:
+يتم دعم القيم التالية:
 
-| Option            | Description                                                                                                          |
+| الخيار            | الوصف                                                                                                          |
 | ----------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `'size'`          | Short names - usually a single char - focused on minimal download size.                                              |
-| `'deterministic'` | Short names - usually two chars - which will not change when adding or removing exports. Good for long term caching. |
-| `true`            | Same as `'deterministic'`                                                                                            |
-| `false`           | Keep original name. Good for readability and debugging.                                                              |
+| `'size'`          | الأسماء المختصرة - عادةً ما تكون عبارة عن حرف واحد - تركز على الحد الأدنى لحجم التنزيل.                                              |
+| `'deterministic'` | الأسماء المختصرة - عادةً ما تكون مكونة من حرفين - والتي لن تتغير عند إضافة الصادرات أو إزالتها. جيد على المدى الطويل caching. |
+| `true`            | نفس `'deterministic'`                                                                                            |
+| `false`           | احتفظ بالاسم الأصلي. جيد لسهولة القراءة وتصحيح الأخطاء.                                                              |
 
 **webpack.config.js**
 
@@ -283,7 +270,7 @@ export default {
 
 `boolean = false`
 
-When set to `true` tells webpack to reduce the size of WASM by changing imports to shorter strings. It mangles module and export names.
+عند التعيين على `true`، يطلب من webpack تقليل حجم WASM عن طريق تغيير الواردات إلى سلاسل أقصر. إنه يشوه module ويصدر الأسماء.
 
 **webpack.config.js**
 
@@ -300,7 +287,7 @@ export default {
 
 `boolean = true`
 
-Tells webpack to merge chunks which contain the same modules. Setting `optimization.mergeDuplicateChunks` to `false` will disable this optimization.
+يخبر webpack بدمج chunks التي تحتوي على نفس modules. سيؤدي ضبط `optimization.mergeDuplicateChunks` على `false` إلى تعطيل optimization هذا.
 
 **webpack.config.js**
 
@@ -317,15 +304,15 @@ export default {
 
 `boolean`
 
-Tell webpack to minimize the bundle using the [MinimizerPlugin](/plugins/minimizer-webpack-plugin/) or the plugin(s) specified in [`optimization.minimizer`](#optimizationminimizer).
+أخبر webpack بتصغير bundle باستخدام [MinimizerPlugin](/plugins/minimizer-webpack-plugin/) أو plugin(s) المحددة في [`optimization.minimizer`](#optimizationminimizer).
 
-The default value of `optimization.minimize` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.minimize` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -338,13 +325,13 @@ export default {
 };
 ```
 
-T> Learn how [mode](/configuration/mode/) works.
+T> تعرف على كيفية عمل [الوضع](/configuration/mode/).
 
 ## optimization.minimizer
 
-`[MinimizerPlugin]` and or `[function (compiler)]` or `undefined | null | 0 | false | ""`
+`[MinimizerPlugin]` و أو `[function (compiler)]` أو `undefined | null | 0 | false | ""`
 
-Allows you to override the default minimizer by providing a different one or more customized [MinimizerPlugin](/plugins/minimizer-webpack-plugin/) instances. Starting with webpack 5.87.0 falsy values can be used to conditionally disable specific minimizers.
+يسمح لك بتجاوز أداة التصغير الافتراضية من خلال توفير مثيلات مختلفة أو أكثر مخصصة من [MinimizerPlugin](/plugins/minimizer-webpack-plugin/). بدءًا من webpack 5.87.0، يمكن استخدام القيم الزائفة لتعطيل أدوات تصغير محددة بشكل مشروط.
 
 **webpack.config.js**
 
@@ -365,7 +352,7 @@ export default {
 };
 ```
 
-Or, as function:
+أو function:
 
 ```js
 import MinimizerPlugin from "minimizer-webpack-plugin";
@@ -383,7 +370,7 @@ export default {
 };
 ```
 
-By default, webpack would set `optimization.minimizer` to [the following value](https://github.com/webpack/webpack/blob/4b4ca3bb53f36a5b8fc6bc1bd976ed7af161bd80/lib/config/defaults.js#L1160-L1174):
+افتراضيًا، يقوم webpack بتعيين `optimization.minimizer` على [القيمة التالية](https://github.com/webpack/webpack/blob/4b4ca3bb53f36a5b8fc6bc1bd976ed7af161bd80/lib/config/defaults.js#L1160-L1174):
 
 ```js
 import MinimizerPlugin from "minimizer-webpack-plugin";
@@ -403,7 +390,7 @@ const minimizer = [
 ];
 ```
 
-Which can be accessed with `'...'` in case you want to keep it when customizing `optimization.minimizer`:
+والتي يمكن الوصول إليها باستخدام `'...'` في حالة رغبتك في الاحتفاظ بها عند تخصيص `optimization.minimizer`:
 
 ```js
 export default {
@@ -413,30 +400,30 @@ export default {
 };
 ```
 
-Basically, `'...'` is [a shortcut to access the default configuration value](https://github.com/webpack/webpack/blob/4b4ca3bb53f36a5b8fc6bc1bd976ed7af161bd80/lib/config/defaults.js#L98-L108) webpack would otherwise set for us.
+في الأساس، `'...'` هو [اختصار للوصول إلى قيمة التخصيص الافتراضية](https://github.com/webpack/webpack/blob/4b4ca3bb53f36a5b8fc6bc1bd976ed7af161bd80/lib/config/defaults.js#L98-L108) webpack الذي سيتم تعيينه لنا.
 
 ## optimization.moduleIds
 
 `boolean: false` `string: 'natural' | 'named' | 'deterministic' | 'size'`
 
-Tells webpack which algorithm to use when choosing module ids. Setting `optimization.moduleIds` to `false` tells webpack that none of built-in algorithms should be used, as custom one can be provided via plugin.
+يخبر webpack بالخوارزمية التي يجب استخدامها عند اختيار معرفات module. يؤدي ضبط `optimization.moduleIds` إلى `false` إلى إخبار webpack بأنه لا ينبغي استخدام أي من الخوارزميات المضمنة، حيث يمكن توفير خوارزمية مخصصة عبر plugin.
 
-The default value of `optimization.moduleIds` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.moduleIds` على [`mode`](/configuration/mode/):
 
-| Mode            | Default           |
+| Mode            | الافتراضي           |
 | --------------- | ----------------- |
-| `"production"`  | `'deterministic'` |
-| `"development"` | `'named'`         |
-| `"none"`        | `'natural'`       |
+| `"production"` | `'deterministic'` |
+| `"development"` | `'named'` |
+| `"none"` | `'natural'` |
 
-The following string values are supported:
+يتم دعم قيم string التالية:
 
-| Option          | Description                                           |
+| الخيار          | الوصف                                           |
 | --------------- | ----------------------------------------------------- |
-| `natural`       | Numeric ids in order of usage.                        |
-| `named`         | Readable ids for better debugging.                    |
-| `deterministic` | Module names are hashed into small numeric values.    |
-| `size`          | Numeric ids focused on minimal initial download size. |
+| `natural`       | معرفات رقمية حسب ترتيب الاستخدام.                        |
+| `named`         | معرفات قابلة للقراءة لتحسين التصحيح.                    |
+| `deterministic` | يتم تجزئة أسماء Module إلى قيم رقمية صغيرة.    |
+| `size`          | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الأولي. |
 
 **webpack.config.js**
 
@@ -449,7 +436,7 @@ export default {
 };
 ```
 
-The `deterministic` option is useful for long term caching, but still results in smaller bundles compared to `hashed`. Length of the numeric value is chosen to fill a maximum of 80% of the id space. By default a minimum length of 3 digits is used when `optimization.moduleIds` is set to `deterministic`. To override the default behaviour set `optimization.moduleIds` to `false` and use the `webpack.ids.DeterministicModuleIdsPlugin`.
+يعد خيار `deterministic` مفيدًا على المدى الطويل caching، ولكنه لا يزال ينتج عنه bundles أصغر مقارنة بـ `hashed`. يتم اختيار طول القيمة الرقمية لملء 80% من مساحة المعرف كحد أقصى. افتراضيًا، يتم استخدام الحد الأدنى لطول 3 أرقام عند ضبط `optimization.moduleIds` على `deterministic`. لتجاوز السلوك الافتراضي، قم بتعيين `optimization.moduleIds` إلى `false` واستخدم `webpack.ids.DeterministicModuleIdsPlugin`.
 
 **webpack.config.js**
 
@@ -467,28 +454,28 @@ export default {
 };
 ```
 
-W> `moduleIds: 'deterministic'` was added in webpack 5 and `moduleIds: 'hashed'` is deprecated in favor of it.
+W> تمت إضافة `moduleIds: 'deterministic'` في webpack 5 وتم إهمال `moduleIds: 'hashed'` لصالحه.
 
-W> `moduleIds: total-size` has been removed in webpack 5.
+W> تمت إزالة `moduleIds: total-size` في webpack 5.
 
 ## optimization.nodeEnv
 
 `boolean: false` `string`
 
-Tells webpack to set `process.env.NODE_ENV` to a given string value. `optimization.nodeEnv` uses [DefinePlugin](/plugins/define-plugin/) unless set to `false`.
+يخبر webpack بضبط `process.env.NODE_ENV` على قيمة string معينة. يستخدم `optimization.nodeEnv` [DefinePlugin](/plugins/define-plugin/) ما لم يتم ضبطه على `false`.
 
-The default value of `optimization.nodeEnv` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.nodeEnv` على [`mode`](/configuration/mode/):
 
-| Mode            | Default         |
+| Mode            | الافتراضي         |
 | --------------- | --------------- |
-| `"production"`  | `'production'`  |
+| `"production"` | `'production'` |
 | `"development"` | `'development'` |
-| `"none"`        | `false`         |
+| `"none"` | `false` |
 
-Possible values:
+القيم المحتملة:
 
-- any string: the value to set `process.env.NODE_ENV` to.
-- false: do not modify/set the value of `process.env.NODE_ENV`.
+- أي string: القيمة المراد ضبط `process.env.NODE_ENV` عليها.
+- خطأ: لا تقم بتعديل/ضبط قيمة `process.env.NODE_ENV`.
 
 **webpack.config.js**
 
@@ -501,15 +488,15 @@ export default {
 };
 ```
 
-T> When [mode](/configuration/mode/) is set to `'none'`, `optimization.nodeEnv` defaults to `false`.
+T> عند ضبط [الوضع](/configuration/mode/) على `'none'`، يكون `optimization.nodeEnv` افتراضيًا على `false`.
 
 ## optimization.portableRecords
 
 `boolean`
 
-`optimization.portableRecords` tells webpack to generate records with relative paths to be able to move the context folder.
+`optimization.portableRecords` يخبر webpack بإنشاء سجلات ذات مسارات نسبية لتتمكن من نقل مجلد السياق.
 
-By default `optimization.portableRecords` is disabled. Automatically enabled if at least one of the records options provided to webpack config: [`recordsPath`](/configuration/other-options/#recordspath), [`recordsInputPath`](/configuration/other-options/#recordsinputpath), [`recordsOutputPath`](/configuration/other-options/#recordsoutputpath).
+بشكل افتراضي، يتم تعطيل `optimization.portableRecords`. يتم تمكينه تلقائيًا إذا تم توفير خيار واحد على الأقل من خيارات السجلات لتخصيص webpack: [`recordsPath`](/configuration/other-options/#recordspath)، [`recordsInputPath`](/configuration/other-options/#recordsinputpath)، [`recordsOutputPath`](/configuration/other-options/#recordsoutputpath).
 
 **webpack.config.js**
 
@@ -526,7 +513,7 @@ export default {
 
 `boolean`
 
-Tells webpack to figure out which exports are provided by modules to generate more efficient code for `export * from ...`. By default `optimization.providedExports` is enabled.
+يخبر webpack بمعرفة عمليات التصدير التي يتم توفيرها بواسطة modules لإنشاء تعليمات برمجية أكثر كفاءة لـ `export * from ...`. بشكل افتراضي، يتم تمكين `optimization.providedExports`.
 
 **webpack.config.js**
 
@@ -543,15 +530,15 @@ export default {
 
 `boolean`
 
-Adds an additional hash compilation pass after the assets have been processed to get the correct asset content hashes. If `realContentHash` is set to `false`, internal data is used to calculate the hash and it can change when assets are identical.
+يضيف تمريرة hash compilation إضافية بعد معالجة assets للحصول على تجزئات محتوى asset الصحيحة. إذا تم ضبط `realContentHash` على `false`، فسيتم استخدام البيانات الداخلية لحساب hash ويمكن أن تتغير عندما يكون assets متطابقًا.
 
-The default value of `optimization.realContentHash` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.realContentHash` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -568,7 +555,7 @@ export default {
 
 `boolean = false`
 
-Tells webpack to detect and remove modules from chunks when these modules are already included in all parents. Setting `optimization.removeAvailableModules` to `true` will enable this optimization.
+يخبر webpack باكتشاف وإزالة modules من chunks عندما تكون هذه modules مدرجة بالفعل في جميع الآباء. سيؤدي ضبط `optimization.removeAvailableModules` على `true` إلى تمكين optimization هذا.
 
 **webpack.config.js**
 
@@ -581,13 +568,13 @@ export default {
 };
 ```
 
-W> `optimization.removeAvailableModules` reduces the performance of webpack.
+W> `optimization.removeAvailableModules` يقلل performance لـ webpack.
 
 ## optimization.removeEmptyChunks
 
 `boolean = true`
 
-Tells webpack to detect and remove chunks which are empty. Setting `optimization.removeEmptyChunks` to `false` will disable this optimization.
+يخبر webpack باكتشاف وإزالة chunks الفارغة. سيؤدي ضبط `optimization.removeEmptyChunks` على `false` إلى تعطيل optimization هذا.
 
 **webpack.config.js**
 
@@ -604,7 +591,7 @@ export default {
 
 `object` `string` `boolean`
 
-Setting `optimization.runtimeChunk` to `true` or `'multiple'` adds an additional chunk containing only the runtime to each entrypoint. This setting is an alias for:
+يؤدي ضبط `optimization.runtimeChunk` إلى `true` أو `'multiple'` إلى إضافة chunk إضافي يحتوي على runtime فقط لكل نقطة إدخال. هذا الإعداد هو اسم مستعار لـ:
 
 **webpack.config.js**
 
@@ -619,7 +606,7 @@ export default {
 };
 ```
 
-The value `'single'` instead creates a runtime file to be shared for all generated chunks. This setting is an alias for:
+بدلاً من ذلك، تقوم القيمة `'single'` بإنشاء ملف runtime لمشاركته مع كافة ملفات chunks التي تم إنشاؤها. هذا الإعداد هو اسم مستعار لـ:
 
 **webpack.config.js**
 
@@ -634,11 +621,11 @@ export default {
 };
 ```
 
-By setting `optimization.runtimeChunk` to `object` it is only possible to provide the `name` property which stands for the name or name factory for the runtime chunks.
+من خلال ضبط `optimization.runtimeChunk` على `object`، يكون من الممكن فقط توفير الخاصية `name` التي تمثل الاسم أو مصنع الاسم لـ runtime chunks.
 
-Default is `false`: each entry chunk embeds runtime.
+الافتراضي هو `false`: يقوم كل entry chunk بتضمين runtime.
 
-W> Imported modules are initialized for each runtime chunk separately, so if you include multiple entry points on a page, beware of this behavior. You will probably want to set it to `single` or use another configuration that allows you to only have one runtime instance.
+W> تتم تهيئة modules المستوردة لكل runtime chunk بشكل منفصل، لذلك إذا قمت بتضمين عدة entry points في الصفحة، فاحذر من هذا السلوك. ربما تريد تعيينه على `single` أو استخدام تخصيص آخر يسمح لك بالحصول على مثيل runtime واحد فقط.
 
 **webpack.config.js**
 
@@ -657,7 +644,7 @@ export default {
 
 `boolean` `string: 'flag'`
 
-Tells webpack to recognise the [`sideEffects`](https://github.com/webpack/webpack/blob/main/examples/side-effects/README.md) flag in `package.json` or rules to skip over modules which are flagged to contain no side effects when exports are not used.
+يخبر webpack بالتعرف على علامة [`sideEffects`](https://github.com/webpack/webpack/blob/main/examples/side-effects/README.md) في `package.json` أو قواعد التخطي فوق modules التي تم وضع علامة عليها بحيث لا تحتوي على أي آثار جانبية عند عدم استخدام عمليات التصدير.
 
 **package.json**
 
@@ -669,17 +656,17 @@ Tells webpack to recognise the [`sideEffects`](https://github.com/webpack/webpac
 }
 ```
 
-T> Please note that `sideEffects` should be in the npm module's `package.json` file and doesn't mean that you need to set `sideEffects` to `false` in your own project's `package.json` which requires that big module.
+T> يرجى ملاحظة أن `sideEffects` يجب أن يكون في ملف `package.json` الخاص بـ npm module ولا يعني ذلك أنك بحاجة إلى تعيين `sideEffects` على `false` في `package.json` الخاص بمشروعك والذي يتطلب هذا الحجم الكبير module.
 
-`optimization.sideEffects` depends on [`optimization.providedExports`](#optimizationprovidedexports) to be enabled. This dependency has a build time cost, but eliminating modules has positive impact on performance because of less code generation. Effect of this optimization depends on your codebase, try it for possible performance wins.
+يعتمد `optimization.sideEffects` على [`optimization.providedExports`](#optimizationprovidedexports) ليتم تمكينه. هذا dependency له تكلفة زمنية build، ولكن إزالة modules له تأثير إيجابي على performance بسبب انخفاض توليد التعليمات البرمجية. تأثير هذا optimization يعتمد على قاعدة التعليمات البرمجية الخاصة بك، جربه لاحتمال فوز performance.
 
-The default value of `optimization.sideEffects` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.sideEffects` على [`mode`](/configuration/mode/):
 
-| Mode            | Default  |
+| Mode            | الافتراضي  |
 | --------------- | -------- |
-| `"production"`  | `true`   |
+| `"production"` | `true` |
 | `"development"` | `'flag'` |
-| `"none"`        | `'flag'` |
+| `"none"` | `'flag'` |
 
 **webpack.config.js**
 
@@ -692,7 +679,7 @@ export default {
 };
 ```
 
-To only use the manual flag and do not analyse source code:
+لاستخدام العلامة اليدوية فقط وعدم تحليل كود المصدر:
 
 ```js
 export default {
@@ -703,28 +690,28 @@ export default {
 };
 ```
 
-T> `optimization.sideEffects` will also flag modules as side effect free when they contain only side effect free statements.
+T> سوف يقوم `optimization.sideEffects` أيضًا بوضع علامة على modules باعتباره خاليًا من الآثار الجانبية عندما يحتوي فقط على بيانات خالية من الآثار الجانبية.
 
 ## optimization.splitChunks
 
 `object`
 
-By default webpack v4+ provides new common chunks strategies out of the box for dynamically imported modules. See available options for configuring this behavior in the [SplitChunksPlugin](/plugins/split-chunks-plugin/) page.
+بشكل افتراضي، يوفر webpack v4+ إستراتيجيات chunks مشتركة جديدة خارج الصندوق لـ modules المستوردة ديناميكيًا. راجع الخيارات المتاحة لتخصيص هذا السلوك في صفحة [SplitChunksPlugin](/plugins/split-chunks-plugin/).
 
 ## optimization.usedExports
 
 `boolean` `string: 'global'`
 
-Tells webpack to determine used exports for each module. This depends on [`optimization.providedExports`](#optimizationprovidedexports). Information collected by `optimization.usedExports` is used by other optimizations or code generation i.e. exports are not generated for unused exports, export names are mangled to single char identifiers when all usages are compatible.
-Dead code elimination in minimizers will benefit from this and can remove unused exports.
+يخبر webpack لتحديد الصادرات المستخدمة لكل module. هذا يعتمد على [`optimization.providedExports`](#optimizationprovidedexports). يتم استخدام المعلومات التي تم جمعها بواسطة `optimization.usedExports` من خلال تحسينات أخرى أو إنشاء تعليمات برمجية، أي أنه لا يتم إنشاء الصادرات للصادرات غير المستخدمة، ويتم تشويه أسماء التصدير إلى معرفات حرف واحد عندما تكون جميع الاستخدامات متوافقة.
+ستستفيد عملية إزالة التعليمات البرمجية الميتة في أدوات التصغير من هذا ويمكنها إزالة عمليات التصدير غير المستخدمة.
 
-The default value of `optimization.usedExports` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `optimization.usedExports` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `true`  |
+| `"production"` | `true` |
 | `"development"` | `false` |
-| `"none"`        | `false` |
+| `"none"` | `false` |
 
 **webpack.config.js**
 
@@ -737,7 +724,7 @@ export default {
 };
 ```
 
-To opt-out from used exports analysis per runtime:
+لإلغاء الاشتراك في تحليل الصادرات المستخدمة لكل runtime:
 
 ```js
 export default {
diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx
index 3ee019fe4d2d..7805fcaf2942 100644
--- a/src/content/configuration/other-options.mdx
+++ b/src/content/configuration/other-options.mdx
@@ -2,35 +2,21 @@
 title: Other Options
 sort: 22
 contributors:
-  - sokra
-  - skipjack
-  - terinjokes
-  - byzyk
-  - liorgreenb
-  - vansosnin
-  - EugeneHlushko
-  - skovy
-  - rishabh3112
-  - niravasher
-  - Neob91
-  - chenxsan
-  - u01jmg3
-  - jamesgeorge007
-  - snitin315
+  - RlxChap2
 related:
-  - title: Using Records
+  - title: "استخدام Records"
     url: https://survivejs.com/webpack/optimizing/separating-manifest/#using-records
 ---
 
-These are the remaining configuration options supported by webpack.
+هذه هي خيارات التخصيص المتبقّية التي يدعمها webpack.
 
-W> Help Wanted: This page is still a work in progress. If you are familiar with any of the options for which the description or examples are incomplete, please create an issue and submit a PR at the [docs repo](https://github.com/webpack/webpack.js.org)!
+W> نحتاج إلى مُساهَمات: لا تزال هذه الصفحة قيد الإنجاز. فإن كنت ضليعاً في أيّ من الخيارات التي بقي وصفها أو أمثلتها ناقصاً، فأنشئ Issue وقدِّم PR في [مستودع التوثيق](https://github.com/webpack/webpack.js.org)!
 
-## amd
+## ايه ام دي
 
 `object` `boolean: false`
 
-Set the value of `require.amd` or `define.amd`. Setting `amd` to `false` will disable webpack's AMD support.
+اضبط قيمة `require.amd` أو `define.amd`. وإذا ضبطت `amd` على `false`، فسيُعطَّل دعم AMD في webpack.
 
 **webpack.config.js**
 
@@ -43,18 +29,17 @@ export default {
 };
 ```
 
-Certain popular modules written for AMD, most notably jQuery versions 1.7.0 to 1.9.1, will only register as an AMD module if the loader indicates it has taken [special allowances](https://github.com/amdjs/amdjs-api/wiki/jQuery-and-AMD) for multiple versions being included on a page.
+ثمّة وحدات مكتوبة لـ AMD ذائعة الانتشار، أبرزها إصدارات jQuery من 1.7.0 إلى 1.9.1، لا تُسجِّل نفسها بوصفها وحدة AMD إلا إن أشار الـ loader إلى أنّه قد اتّخذ [تنازلات خاصّة](https://github.com/amdjs/amdjs-api/wiki/jQuery-and-AMD) لإدراج إصدارات متعدّدة في الصفحة الواحدة.
 
-The allowances were the ability to restrict registrations to a specific version or to support different sandboxes with different defined modules.
+وتمثَّلت هذه التنازلات في إمكانية قصر التسجيلات على إصدار بعينه، أو في دعم بيئات معزولة (sandboxes) مختلفة تحوي وحدات مُعرَّفة مختلفة.
 
-This option allows you to set the key your module looks for to a truthy value.
-As it happens, the AMD support in webpack ignores the defined name anyways.
+ويُتيح لك هذا الخيار أن تضبط المفتاح الذي تبحث عنه وحدتك على قيمة صادقة (truthy). وعلى أيّ حال، فإنّ دعم AMD في webpack يتجاهل الاسم المُعرَّف.
 
-## bail
+## الكفالة
 
 `boolean = false`
 
-Fail out on the first error instead of tolerating it. By default webpack will log these errors in red in the terminal, as well as the browser console when using HMR, but continue bundling. To enable it:
+يفشل عند أوّل خطأ بدلاً من التجاوز عنه. افتراضياً، يُسجِّل webpack هذه الأخطاء بلون أحمر في الطرفية، وكذلك في وحدة تحكّم المتصفّح عند استعمال HMR، لكنه يتابع الحزم. ولتفعيله:
 
 **webpack.config.js**
 
@@ -65,22 +50,22 @@ export default {
 };
 ```
 
-This will force webpack to exit its bundling process.
+سيُجبر هذا webpack على إنهاء عملية الحزم.
 
-W> Avoid using `bail` option in [`watch`](/configuration/watch) mode, as it will force webpack to exit as soon as possible when an error is found.
+W> تجنّب استعمال الخيار `bail` في وضع [`watch`](/configuration/watch)، لأنّه سيُجبر webpack على الخروج في أقرب فرصة عند العثور على خطأ.
 
 ## dependencies
 
 `[string]`
 
-A list of [`name`](#name) defining all sibling configurations it depends on. Dependent configurations need to be compiled first.
+قائمة [`name`](#name) تُعرِّف كلّ التخصيصات المُجاورة التي يعتمد عليها هذا التخصيص. ولا بدّ أن تُصرَّف التخصيصات المُعتمَد عليها أوّلاً.
 
-In watch mode dependencies will invalidate the compiler when:
+في وضع المراقبة، تُبطل الاعتماديات (invalidate) عملَ المُصرِّف حين:
 
-1.  the dependency has changed
-2.  a dependency is currently compiling or invalid
+1. تتغيّر الاعتمادية.
+2. تكون الاعتمادية قيد التصريف أو في حالة إبطال.
 
-Remember that current configuration will not compile until its dependencies are done.
+تذكَّر أنّ التخصيص الحالي لن يُصرَّف حتى تنتهي اعتمادياته.
 
 **webpack.config.js**
 
@@ -99,24 +84,24 @@ export default [
 ];
 ```
 
-## ignoreWarnings
+## تجاهل التحذيرات
 
 `[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]`
 
-Tells webpack to ignore specific warnings. This can be done with a `RegExp`, a custom `function` to select warnings based on the raw warning instance which is getting `WebpackError` and `Compilation` as arguments and returns a `boolean`, an `object` with the following properties:
+يُخبر webpack أن يتجاهل تحذيرات بعينها. ويمكن أن يكون ذلك عبر `RegExp`، أو عبر `function` مخصَّصة تختار التحذيرات استناداً إلى نسخة التحذير الخام، وتتلقّى `WebpackError` و `Compilation` بوصفهما وسيطين، وتُرجع قيمة `boolean`، أو عبر `object` يحمل الخصائص الآتية:
 
-- `file` : A RegExp to select the origin file for the warning.
-- `message` : A RegExp to select the warning message.
-- `module` : A RegExp to select the origin module for the warning.
+- `file` — RegExp لانتقاء الملفّ الذي صدر منه التحذير.
+- `message` — RegExp لانتقاء رسالة التحذير.
+- `module` — RegExp لانتقاء الوحدة التي صدر منها التحذير.
 
-`ignoreWarnings` must be an `array` of any or all of the above.
+يجب أن يكون `ignoreWarnings` `array` يحوي أيّاً من القيم السابقة أو كلّها.
 
 ```js
 export default {
   // ...
   ignoreWarnings: [
     {
-      module: /module2\.js\?[34]/, // A RegExp
+      module: /module2\.js\?[34]/, // RegExp
     },
     {
       module: /[13]/,
@@ -132,9 +117,9 @@ export default {
 
 `object`
 
-Expose custom values into the [loader context](/api/loaders/#the-loader-context).
+اكشف قيماً مخصَّصة داخل [سياق الـ loader](/api/loaders/#the-loader-context).
 
-For example, you can define a new variable in the loader context:
+فمثلاً، يمكنك تعريف متغيّر جديد ضمن سياق الـ loader:
 
 **webpack.config.js**
 
@@ -147,27 +132,27 @@ export default {
 };
 ```
 
-Then use `this.answer` to get its value in the loader:
+ثمّ تستعمل `this.answer` للوصول إلى قيمته داخل الـ loader:
 
 **custom-loader.js**
 
 ```js
 export default function (source) {
   // ...
-  console.log(this.answer); // will log `42` here
+  console.log(this.answer); // ستُطبَع هنا `42`
   return source;
 }
 ```
 
-T> You can override properties in the loader context as webpack copies all properties that are defined in the `loader` to the loader context.
+T> يمكنك تجاوز الخصائص في سياق الـ loader، لأنّ webpack ينسخ كلّ ما يُعرَّف في `loader` إلى سياق الـ loader.
 
-## name
+## اسم
 
 `string`
 
-Name of the configuration. Used when loading multiple configurations.
+اسم التخصيص. يُستعمَل عند تحميل عدّة تخصيصات.
 
-This is especially useful when exporting an array of configurations. webpack uses `name` to identify each config in logs and stats output.
+وهذا مفيد بوجه خاصّ عند تصدير مصفوفة تخصيصات، إذ يستعمل webpack `name` للتمييز بين كلّ تخصيص في السجلّات وفي مخرَجات stats.
 
 **webpack.config.js**
 
@@ -178,7 +163,7 @@ export default {
 };
 ```
 
-For multi-configuration builds:
+ولبُنى متعدّدة التخصيص:
 
 ```js
 export default [
@@ -195,13 +180,13 @@ export default [
 ];
 ```
 
-## parallelism
+## التوازي
 
 `number = 100`
 
-Limit the number of parallel processed modules. Can be used to fine tune performance or to get more reliable profiling results.
+يُحدِّد سقفاً لعدد الوحدات التي تُعالَج بالتوازي. ويمكن استعماله لضبط الأداء بدقّة أو للحصول على نتائج profiling أكثر موثوقية.
 
-Lower values reduce concurrent work and memory pressure, but may increase total build time. Higher values can improve throughput on powerful machines.
+تُقلِّل القيم المنخفضة العمل المتزامن والضغط على الذاكرة، لكنها قد تُطيل زمن البناء الإجمالي. أمّا القيم المرتفعة فقد تُحسِّن الإنتاجية على الأجهزة القوية.
 
 **webpack.config.js**
 
@@ -212,16 +197,16 @@ export default {
 };
 ```
 
-Use cases:
+حالات الاستخدام:
 
-- Reduce `parallelism` when builds hit memory limits (for example in constrained CI runners).
-- Increase it when you have enough CPU and memory and want to maximize build throughput.
+- قلِّل `parallelism` حين تصطدم بُناك بحدود الذاكرة (كما في مُشغِّلات CI المُقيَّدة).
+- ارفعه حين تتوفّر لك معالجة وذاكرة كافيتان وتريد أن تُعظِّم إنتاجية البناء.
 
-## profile
+## الملف الشخصي
 
 `boolean`
 
-Capture a "profile" of the application, including statistics and hints, which can then be dissected using the [Analyze](https://webpack.github.io/analyse/) tool. It will also log out a summary of module timings.
+التقط "profile" للتطبيق، يشمل إحصاءات وتلميحات يمكن تحليلها لاحقاً عبر أداة [Analyze](https://webpack.github.io/analyse/). كما أنّه سيُسجِّل ملخّصاً عن أزمنة الوحدات.
 
 **webpack.config.js**
 
@@ -232,15 +217,15 @@ export default {
 };
 ```
 
-T> Combine `profile: true` with `parallelism: 1` to get correct timings. Note that this will slow down the build as well.
+T> اجمع بين `profile: true` و `parallelism: 1` للحصول على أزمنة صحيحة. لاحظ أنّ هذا سيُبطئ البناء أيضاً.
 
-## recordsInputPath
+## RecordsInputPath
 
 `string`
 
-Specify the file from which to read the last set of records. This can be used to rename a records file. See the example below.
+حدِّد الملفّ الذي يقرأ منه webpack آخر مجموعة من السجلّات. وهذا يُستعمَل لإعادة تسمية ملفّ السجلّات. انظر المثال أدناه.
 
-When this option is set, webpack reads previously generated records from this path and uses them as input for stable module/chunk id tracking.
+حين يُضبط هذا الخيار، يقرأ webpack السجلّات المُولَّدة سابقاً من هذا المسار، ويُوظِّفها مدخلاً لتعقّب معرّفات الوحدات والـ chunks تعقّباً مستقرّاً.
 
 **webpack.config.js**
 
@@ -258,11 +243,11 @@ export default {
 };
 ```
 
-## recordsOutputPath
+## RecordsOutputPath
 
 `string`
 
-Specify where the records should be written. The following example shows how you might use this option in combination with `recordsInputPath` to rename a records file:
+حدِّد المسار الذي تُكتَب فيه السجلّات. يُبيِّن المثال الآتي كيف يمكن أن تستعمل هذا الخيار مع `recordsInputPath` لإعادة تسمية ملفّ السجلّات:
 
 **webpack.config.js**
 
@@ -280,11 +265,11 @@ export default {
 };
 ```
 
-## recordsPath
+## RecordsPath
 
 `string`
 
-Use this option to generate a JSON file containing webpack "records" – pieces of data used to store module identifiers across multiple builds. You can use this file to track how modules change between builds. To generate one, specify a location:
+استعمل هذا الخيار لتوليد ملفّ JSON يحوي "records" خاصّة بـ webpack، وهي قطع بيانات تُستعمَل لحفظ معرّفات الوحدات عبر بُنى متعدّدة. ويمكنك توظيف هذا الملفّ لتعقّب كيف تتغيّر الوحدات بين البُنى. ولتوليده، حدِّد موقعاً:
 
 **webpack.config.js**
 
@@ -301,17 +286,17 @@ export default {
 };
 ```
 
-Records are particularly useful if you have a complex setup that leverages [Code Splitting](/guides/code-splitting). The data can be used to ensure the split bundles are achieving the [caching](/guides/caching) behavior you need.
+تكون الـ records مفيدة بوجه خاص حين يكون لديك إعداد معقَّد يعتمد [تقسيم الشيفرة (Code Splitting)](/guides/code-splitting). وتُستعمَل بياناتها لضمان أنّ الحزم المُقسَّمة تحقِّق سلوك [التخزين المؤقَّت (caching)](/guides/caching) الذي تنشده.
 
-T> Note that although this file is generated by the compiler, you may still want to track it in source control to keep a history of how it has changed over time.
+T> لاحظ أنّه على الرغم من أنّ هذا الملفّ يُولِّده المُصرِّف، فقد تودّ تتبّعه في نظام التحكّم بالإصدار للاحتفاظ بسجلّ تاريخي يبيِّن كيف تغيّر عبر الزمن.
 
-W> Setting `recordsPath` will essentially set `recordsInputPath` and `recordsOutputPath` to the same location. This is usually all that's necessary unless you decide to change the name of the file containing the records. See below for an example.
+W> ضبط `recordsPath` يضبط عملياً كلاً من `recordsInputPath` و `recordsOutputPath` على المسار ذاته. وعادةً ما يكفيك هذا، إلا إن قرّرت تغيير اسم ملفّ السجلّات. انظر المثال أدناه.
 
-## snapshot
+## لقطة
 
 `object`
 
-`snapshot` options decide how the file system snapshots are created and invalidated.
+تُحدِّد خيارات `snapshot` كيفية إنشاء لقطات نظام الملفّات وكيفية إبطالها.
 
 **webpack.config.js**
 
@@ -350,42 +335,42 @@ export default {
 };
 ```
 
-### buildDependencies
+### buildDependeency
 
 `object = { hash boolean = true, timestamp boolean = true }`
 
-Snapshots for build dependencies when using the persistent cache.
+اللقطات الخاصّة باعتماديات البناء حين تُستعمَل ذاكرة التخزين المؤقَّت الدائمة.
 
-- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
-- `timestamp`: Compare timestamps to determine invalidation.
+- `hash` — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من `timestamp`، لكنه يتغيّر بوتيرة أقلّ).
+- `timestamp` — قارِن الطوابع الزمنية لتقرير الإبطال.
 
-Both `hash` and `timestamp` are optional.
+كلاهما اختياريّ.
 
-- `{ hash: true }`: Good for CI caching with a fresh checkout which doesn't keep timestamps and uses hashes.
-- `{ timestamp: true }`: Good for local development caching.
-- `{ timestamp: true, hash: true }`: Good for both cases mentioned above. Timestamps are compared first, which is cheap because webpack doesn't need to read files to compute their hashes. Content hashes will be compared only when timestamps are the same, which leads to a small performance hit for the initial build.
+- `{ hash: true }` — مناسب لـ CI caching مع checkout جديد لا يحفظ الطوابع الزمنية ويعتمد على hashes.
+- `{ timestamp: true }` — مناسب للتخزين المؤقَّت في التطوير المحلي.
+- `{ timestamp: true, hash: true }` — مناسب لكلتا الحالتين أعلاه. تُقارَن الطوابع الزمنية أوّلاً، وهو ما يكون رخيصاً لأنّ webpack لا يحتاج إلى قراءة الملفّات لحساب hashes لها. ثمّ تُقارَن hashes المحتوى لاحقاً حين تتطابق الطوابع الزمنية فقط، وهو ما يُكلِّف خسارة طفيفة في الأداء عند البناء الأوّل.
 
 ### immutablePaths
 
 `(RegExp | string)[]`
 
-An array of paths that are managed by a package manager and contain a version or a hash in their paths so that all files are immutable.
+مصفوفة من المسارات التي يُديرها مدير حزم، وتتضمّن إصداراً أو hash في مساراتها بحيث تكون جميع ملفّاتها غير قابلة للتغيير.
 
-Make sure to wrap the path in a capture group if you use regular expressions.
+تأكّد من تغليف المسار في مجموعة التقاط (capture group) إن استعملت تعابير نمطية.
 
-### managedPaths
+### ManagedPaths
 
 `(RegExp | string)[]`
 
-An array of paths that are managed by a package manager and can be trusted to not be modified otherwise.
+مصفوفة من المسارات التي يُديرها مدير حزم ويمكن الثقة بأنها لن تُعدَّل بطرق أخرى.
 
-Make sure you wrap the path in a capture group if you are using regular expressions so webpack can extract the path, for example, here's a RegExp webpack internally uses to match the `node_modules` directory:
+تأكّد من تغليف المسار في مجموعة التقاط (capture group) إن استعملت تعابير نمطية حتى يستطيع webpack استخراج المسار. ومن أمثلة ذلك RegExp التي يستعملها webpack داخلياً لمطابقة مجلَّد `node_modules`:
 
 ```text
 /^(.+?[\\/]node_modules)[\\/]/
 ```
 
-A common use case for `managedPaths` would be to exclude some folders from `node_modules`, e.g. you want webpack to know that files in the `node_modules/@azure/msal-browser` folder are expected to change, which can be done with a regular expression like the one below:
+ومن حالات الاستخدام الشائعة لـ `managedPaths` استثناء بعض المجلَّدات من `node_modules`، فمثلاً قد ترغب في أن يعلم webpack أنّ الملفّات في مجلَّد `node_modules/@azure/msal-browser` يُتوقَّع تغيُّرها، وذلك يمكن إنجازه بتعبير نمطي كالآتي:
 
 ```js
 export default {
@@ -397,48 +382,48 @@ export default {
 };
 ```
 
-### unmanagedPaths
+### مسارات غير مُدارة
 
 <Badge text="5.90.0+" />
 
 `(RegExp | string)[]`
 
-An array of paths that are not managed by a package manager and the contents are subject to change.
+مصفوفة من المسارات التي لا يُديرها مدير حزم، ومحتوياتها قابلة للتغيُّر.
 
-Make sure to wrap the path in a capture group if you use regular expressions.
+تأكّد من تغليف المسار في مجموعة التقاط (capture group) إن استعملت تعابير نمطية.
 
 ### module
 
 `object = {hash boolean = true, timestamp boolean = true}`
 
-Snapshots for building modules.
+اللقطات الخاصّة ببناء الوحدات.
 
-- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
-- `timestamp`: Compare timestamps to determine invalidation.
+- `hash` — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من `timestamp`، لكنه يتغيّر بوتيرة أقلّ).
+- `timestamp` — قارِن الطوابع الزمنية لتقرير الإبطال.
 
 ### contextModule
 
 `object = {hash boolean = true, timestamp boolean = true}`
 
-Snapshots for building context modules.
+اللقطات الخاصّة ببناء وحدات السياق (context modules).
 
-- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
-- `timestamp`: Compare timestamps to determine invalidation.
+- `hash` — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من `timestamp`، لكنه يتغيّر بوتيرة أقلّ).
+- `timestamp` — قارِن الطوابع الزمنية لتقرير الإبطال.
 
 ### resolve
 
 `object = {hash boolean = true, timestamp boolean = true}`
 
-Snapshots for resolving of requests.
+اللقطات الخاصّة بتحليل الطلبات.
 
-- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
-- `timestamp`: Compare timestamps to determine invalidation.
+- `hash` — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من `timestamp`، لكنه يتغيّر بوتيرة أقلّ).
+- `timestamp` — قارِن الطوابع الزمنية لتقرير الإبطال.
 
-### resolveBuildDependencies
+### ResolveBuildDependeency
 
 `object = {hash boolean = true, timestamp boolean = true}`
 
-Snapshots for resolving of build dependencies when using the persistent cache.
+اللقطات الخاصّة بتحليل اعتماديات البناء حين تُستعمَل ذاكرة التخزين المؤقَّت الدائمة.
 
-- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often).
-- `timestamp`: Compare timestamps to determine invalidation.
+- `hash` — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من `timestamp`، لكنه يتغيّر بوتيرة أقلّ).
+- `timestamp` — قارِن الطوابع الزمنية لتقرير الإبطال.
diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx
index 29b97b485654..aa563e973f52 100644
--- a/src/content/configuration/output.mdx
+++ b/src/content/configuration/output.mdx
@@ -2,53 +2,24 @@
 title: Output
 sort: 6
 contributors:
-  - sokra
-  - skipjack
-  - tomasAlabes
-  - mattce
-  - irth
-  - fvgs
-  - dhurlburtusa
-  - MagicDuck
-  - fadysamirsadek
-  - byzyk
-  - madhavarshney
-  - harshwardhansingh
-  - eemeli
-  - EugeneHlushko
-  - g-plane
-  - smelukov
-  - Neob91
-  - anikethsaha
-  - jamesgeorge007
-  - hiroppy
-  - chenxsan
-  - snitin315
-  - QC-L
-  - anshumanv
-  - mrzalyaul
-  - JakobJingleheimer
-  - long76
-  - ahabhgk
-  - tanyabouman
-  - shivxmsharma
+  - RlxChap2
 ---
 
-The top-level `output` key contains a set of options instructing webpack on how and where it should output your bundles, assets, and anything else you bundle or load with webpack.
+يحتوي مفتاح المستوى الأعلى `output` على مجموعة خيارات ترشد webpack إلى كيفية ومكان إخراج bundles وassets، وأي شيء آخر تعمل له bundle أو تحمّله عبر webpack.
 
 ## output.assetModuleFilename
 
 `string = '[hash][ext][query]'` `function (pathData, assetInfo) => string`
 
-The same as [`output.filename`](#outputfilename) but for [Asset Modules](/guides/asset-modules/).
+نفس [`output.filename`](#outputfilename) ولكن بالنسبة لـ [Asset Modules](/guides/asset-modules/).
 
-`[name]`, `[file]`, `[query]`, `[fragment]`, `[base]`, and `[path]` are set to an empty string for the assets built from data URI replacements.
+تُضبط `[name]`، و`[file]`، و`[query]`، و`[fragment]`، و`[base]`، و`[path]` على string فارغ عند بناء assets من بدائل data URI.
 
 ## output.asyncChunks
 
 `boolean = true`
 
-Create async chunks that are loaded on demand.
+أنشئ async chunks تُحمّل عند الطلب.
 
 **webpack.config.js**
 
@@ -64,11 +35,11 @@ export default {
 
 ## output.auxiliaryComment
 
-W> Prefer to use [`output.library.auxiliaryComment`](#outputlibraryauxiliarycomment) instead.
+W> يُفضل استخدام [`output.library.auxiliaryComment`](#outputlibraryauxiliarycomment) بدلاً من ذلك.
 
 `string` `object`
 
-When used in tandem with [`output.library`](#outputlibrary) and [`output.libraryTarget`](#outputlibrarytarget), this option allows users to insert comments within the export wrapper. To insert the same comment for each `libraryTarget` type, set `auxiliaryComment` to a string:
+عند استخدامه جنبًا إلى جنب مع [`output.library`](#outputlibrary) و[`output.libraryTarget`](#outputlibrarytarget)، يتيح هذا الخيار للمستخدمين إدراج التعليقات داخل غلاف التصدير. لإدراج نفس التعليق لكل نوع `libraryTarget`، اضبط `auxiliaryComment` على string:
 
 **webpack.config.js**
 
@@ -84,25 +55,25 @@ export default {
 };
 ```
 
-which will yield the following:
+وسينتج عنه ما يلي:
 
 **someLibName.js**
 
 ```js
 (function webpackUniversalModuleDefinition(root, factory) {
-  // Test Comment
+  // تعليق الاختبار
   if (typeof exports === "object" && typeof module === "object") {
     module.exports = factory(require("lodash"));
   }
-  // Test Comment
+  // تعليق الاختبار
   else if (typeof define === "function" && define.amd) {
     define(["lodash"], factory);
   }
-  // Test Comment
+  // تعليق الاختبار
   else if (typeof exports === "object") {
     exports.someLibName = factory(require("lodash"));
   }
-  // Test Comment
+  // تعليق الاختبار
   else {
     root.someLibName = factory(root._);
   }
@@ -111,7 +82,7 @@ which will yield the following:
 });
 ```
 
-For fine-grained control over each `libraryTarget` comment, pass an object:
+للتحكم الدقيق في كل تعليق `libraryTarget`، مرّر object:
 
 **webpack.config.js**
 
@@ -134,19 +105,19 @@ export default {
 
 `boolean = true`
 
-Tells webpack to add `charset="utf-8"` to the HTML `<script>` tag.
+يخبر webpack بإضافة `charset="utf-8"` إلى HTML `<script>` tag.
 
-T> Although the `charset` attribute for `<script>` tag was [deprecated](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Deprecated_attributes), webpack still adds it by default for compatibility with non-modern browsers.
+T> على الرغم من أن السمة `charset` في `<script>` tag كانت [مهملة](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Deprecated_attributes)، إلا أن webpack لا تزال تضيفها افتراضيًا للتوافق مع browsers غير الحديثة.
 
 ## output.chunkFilename
 
 `string = '[id].js'` `function (pathData, assetInfo) => string`
 
-This option determines the name of non-initial chunk files. See [`output.filename`](#outputfilename) option for details on the possible values.
+يحدد هذا الخيار اسم ملفات chunk غير الأولية. راجع الخيار [`output.filename`](#outputfilename) للحصول على تفاصيل حول القيم المحتملة.
 
-Note that these filenames need to be generated at runtime to send the requests for chunks. Because of this, placeholders like `[name]` and `[chunkhash]` need to add a mapping from chunk id to placeholder value to the output bundle with the webpack runtime. This increases the size and may invalidate the bundle when placeholder value for any chunk changes.
+لاحظ أنه يجب إنشاء أسماء الملفات هذه في runtime لإرسال طلبات chunks. ولهذا السبب، تحتاج العناصر النائبة مثل `[name]` و`[chunkhash]` إلى إضافة تعيين من معرف chunk إلى قيمة العنصر النائب إلى output bundle مع webpack runtime. يؤدي هذا إلى زيادة الحجم وقد يؤدي إلى إبطال bundle عند تغيير قيمة العنصر النائب لأي chunk.
 
-By default `[id].js` is used or a value inferred from [`output.filename`](#outputfilename) (`[name]` is replaced with `[id]` or `[id].` is prepended).
+افتراضيًا، يتم استخدام `[id].js` أو يتم استنتاج قيمة من [`output.filename`](#outputfilename) (يتم استبدال `[name]` بـ `[id]` أو يتم إضافة `[id].` مسبقًا).
 
 **webpack.config.js**
 
@@ -160,7 +131,7 @@ export default {
 };
 ```
 
-Usage as a function:
+الاستخدام كـ function:
 
 **webpack.config.js**
 
@@ -174,15 +145,15 @@ export default {
 };
 ```
 
-T> If the `output.filename` is defined as a string containing placeholder such as `[name]`, `[id]`, [`contenthash`], or [`chunkhash`], the default value for `output.chunkFilename` will be derived from the `output.filename`. Otherwise, `[id].js` will be used as the default value.
+T> إذا تم تعريف `output.filename` على أنه string يحتوي على عنصر نائب مثل `[name]`، `[id]`، [`contenthash`]، أو [`chunkhash`]، فسيتم اشتقاق القيمة الافتراضية لـ `output.chunkFilename` من `output.filename`. وإلا، سيتم استخدام `[id].js` كقيمة افتراضية.
 
 ## output.chunkFormat
 
 `false` `string: 'array-push' | 'commonjs' | 'module' | <any string>`
 
-The format of chunks (formats included by default are `'array-push'` (web/WebWorker), `'commonjs'` (node.js), `'module'` (ESM), but others might be added by plugins).
+تنسيق chunks (التنسيقات المضمنة افتراضيًا هي `'array-push'` (web/WebWorker)، `'commonjs'` (node.js)، `'module'` (ESM)، ولكن يمكن إضافة تنسيقات أخرى بواسطة plugins).
 
-T> The default value of this option depends on the [`target`](/configuration/target/) and [`output.module`](#outputmodule) setting. For more details, search for `"chunkFormat"` [in the webpack defaults](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js).
+T> تعتمد القيمة الافتراضية لهذا الخيار على الإعداد [`target`](/configuration/target/) و[`output.module`](#outputmodule). لمزيد من التفاصيل، ابحث عن `"chunkFormat"` [في إعدادات webpack الافتراضية](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js).
 
 **webpack.config.js**
 
@@ -200,7 +171,7 @@ export default {
 
 `number = 120000`
 
-The Number of milliseconds before chunk request expires. This option is supported since webpack 2.6.0.
+عدد المللي ثانية قبل انتهاء صلاحية طلب chunk. هذا الخيار مدعوم منذ webpack 2.6.0.
 
 **webpack.config.js**
 
@@ -218,7 +189,7 @@ export default {
 
 `string = 'webpackChunkwebpack'`
 
-The global variable is used by webpack for loading chunks.
+يستخدم webpack المتغيّر global لتحميل chunks.
 
 **webpack.config.js**
 
@@ -236,9 +207,9 @@ export default {
 
 `false` `string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | <any string>`
 
-The method to load chunks (methods included by default are `'jsonp'` (web), `'import'` (ESM), `'importScripts'` (WebWorker), `'require'` (sync node.js), `'async-node'` (async node.js), but others might be added by plugins).
+طريقة تحميل chunks. الطرق المضمّنة افتراضياً هي `'jsonp'` (web)، و`'import'` (ESM)، و`'importScripts'` (WebWorker)، و`'require'` (sync Node.js)، و`'async-node'` (async Node.js)، ويمكن أن تضيف plugins طرقاً أخرى.
 
-T> The default value of this option depends on the [`target`](/configuration/target/) and [`chunkFormat `](#outputchunkformat) setting. For more details, search for `"chunkLoading"` [in the webpack defaults](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js).
+T> تعتمد القيمة الافتراضية لهذا الخيار على الإعداد [`target`](/configuration/target/) و[`chunkFormat `](#outputchunkformat). لمزيد من التفاصيل، ابحث عن `"chunkLoading"` [في إعدادات webpack الافتراضية](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js).
 
 **webpack.config.js**
 
@@ -302,7 +273,7 @@ export default {
 };
 ```
 
-You can also use it with hook:
+يمكنك أيضًا استخدامه مع الخطاف:
 
 ```js
 webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
@@ -317,9 +288,9 @@ webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
 
 `boolean = true`
 
-Tells webpack to check if to be emitted file already exists and has the same content before writing to the output file system.
+يخبر webpack بالتحقق مما إذا كان الملف المطلوب إرساله موجود بالفعل ويحتوي على نفس المحتوى قبل الكتابة إلى نظام الملفات output.
 
-W> webpack will not write output file when file already exists on disk with the same content.
+W> webpack لن يكتب ملف output عندما يكون الملف موجودًا بالفعل على القرص بنفس المحتوى.
 
 ```js
 export default {
@@ -334,42 +305,42 @@ export default {
 
 `boolean = false` `string: 'anonymous' | 'use-credentials'`
 
-Tells webpack to enable [cross-origin](https://developer.mozilla.org/en/docs/Web/HTML/Element/script#attr-crossorigin) loading of chunks. Only takes effect when the [`target`](/configuration/target/) is set to `'web'`, which uses JSONP for loading on-demand chunks, by adding script tags.
+يطلب من webpack تمكين تحميل [الأصل المتقاطع](https://developer.mozilla.org/en/docs/Web/HTML/Element/script#attr-crossorigin) لـ chunks. يسري مفعوله فقط عند تعيين [`target`](/configuration/target/) على `'web'`، والذي يستخدم JSONP لتحميل chunks عند الطلب، عن طريق إضافة `<script>` tags.
 
-- `'anonymous'` - Enable cross-origin loading **without credentials**
-- `'use-credentials'` - Enable cross-origin loading **with credentials**
+- `'anonymous'` - تمكين التحميل عبر الأصل **بدون بيانات اعتماد**
+- `'use-credentials'` - تمكين التحميل المشترك **ببيانات الاعتماد**
 
 ## output.cssChunkFilename
 
 `string` `function (pathData, assetInfo) => string`
 
-This option determines the name of non-initial CSS output files on disk. See [`output.filename`](#outputfilename) option for details on the possible values.
+يحدد هذا الخيار اسم الملفات غير الأولية CSS output الموجودة على القرص. راجع الخيار [`output.filename`](#outputfilename) للحصول على تفاصيل حول القيم المحتملة.
 
-You **must not** specify an absolute path here. However, feel free to include folders separated by `'/'`. This specified path combines with the [`output.path`](#outputpath) value to pinpoint the location on the disk.
+**لا يجب عليك** تحديد مسار مطلق هنا. ومع ذلك، لا تتردد في تضمين المجلدات المفصولة بـ `'/'`. يتم دمج هذا المسار المحدد مع القيمة [`output.path`](#outputpath) لتحديد الموقع على القرص.
 
 ## output.cssFilename
 
 `string` `function (pathData, assetInfo) => string`
 
-This option determines the name of CSS output files on disk. See [`output.filename`](#outputfilename) option for details on the possible values.
+يحدد هذا الخيار اسم ملفات CSS output الموجودة على القرص. راجع الخيار [`output.filename`](#outputfilename) للحصول على تفاصيل حول القيم المحتملة.
 
-You **must not** specify an absolute path here. However, feel free to include folders separated by `'/'`. This specified path combines with the [`output.path`](#outputpath) value to pinpoint the location on the disk.
+**لا يجب عليك** تحديد مسار مطلق هنا. ومع ذلك، لا تتردد في تضمين المجلدات المفصولة بـ `'/'`. يتم دمج هذا المسار المحدد مع القيمة [`output.path`](#outputpath) لتحديد الموقع على القرص.
 
 ## output.devtoolFallbackModuleFilenameTemplate
 
 `string` `function (info)`
 
-A fallback is used when the template string or function above yields duplicates.
+يتم استخدام البديل عندما ينتج عن القالب string أو function أعلاه نسخ مكررة.
 
-See [`output.devtoolModuleFilenameTemplate`](#outputdevtoolmodulefilenametemplate).
+راجع [`output.devtoolModuleFilenameTemplate`](#outputdevtoolmodulefilenametemplate).
 
 ## output.devtoolModuleFilenameTemplate
 
 `string = 'webpack://[namespace]/[resource-path]?[loaders]'` `function (info) => string`
 
-This option is only used when [`devtool`](/configuration/devtool) uses an option that requires module names.
+يتم استخدام هذا الخيار فقط عندما يستخدم [`devtool`](/configuration/devtool) خيارًا يتطلب أسماء module.
 
-Customize the names used in each source map's `sources` array. This can be done by passing a template string or function. For example, when using `devtool: 'eval'`.
+قم بتخصيص الأسماء المستخدمة في كل خريطة مصدر `sources` array. يمكن القيام بذلك عن طريق تمرير القالب string أو function. على سبيل المثال، عند استخدام `devtool: 'eval'`.
 
 **webpack.config.js**
 
@@ -383,20 +354,20 @@ export default {
 };
 ```
 
-The following substitutions are available in template strings (via webpack's internal [`ModuleFilenameHelpers`](https://github.com/webpack/webpack/blob/main/lib/ModuleFilenameHelpers.js)):
+البدائل التالية متاحة في سلاسل القالب (عبر webpack الداخلي [`ModuleFilenameHelpers`](https://github.com/webpack/webpack/blob/main/lib/ModuleFilenameHelpers.js)):
 
-| Template                 | Description                                                                                         |
+| القالب                 | الوصف                                                                                         |
 | ------------------------ | --------------------------------------------------------------------------------------------------- |
-| [absolute-resource-path] | The absolute filename                                                                               |
-| [all-loaders]            | Automatic and explicit loaders and params up to the name of the first loader                        |
-| [hash]                   | The hash of the module identifier                                                                   |
-| [id]                     | The module identifier                                                                               |
-| [loaders]                | Explicit loaders and params up to the name of the first loader                                      |
-| [resource]               | The path used to resolve the file and any query params used on the first loader                     |
-| [resource-path]          | The path used to resolve the file without any query params                                          |
-| [namespace]              | The modules namespace. This is usually the library name when building as a library, empty otherwise |
+| [مسار المورد المطلق] | اسم الملف المطلق                                                                               |
+| [الكل-loaders]            | تلقائية وصريحة loaders ومعلمات تصل إلى الاسم الأول loader                        |
+| [hash]                   | hash للمعرف module                                                                   |
+| [id]                     | المعرف module                                                                               |
+| [loaders]                | صريح loaders ومعلمات تصل إلى اسم loader الأول                                      |
+| [المصدر]               | المسار المستخدم لـ resolve الملف وأي معلمات استعلام مستخدمة في loader الأول                     |
+| [مسار المورد]          | المسار المستخدم لـ resolve الملف بدون أي معلمات استعلام                                          |
+| [مساحة الاسم]              | مساحة الاسم modules. عادةً ما يكون هذا هو الاسم library عند البناء كـ library، وإلا فإنه يكون فارغًا |
 
-When using a function, the same options are available camel-cased via the `info` parameter:
+عند استخدام function، تتوفر نفس الخيارات في علبة الجمل عبر المعلمة `info`:
 
 ```js
 export default {
@@ -408,17 +379,17 @@ export default {
 };
 ```
 
-If multiple modules would result in the same name, [`output.devtoolFallbackModuleFilenameTemplate`](#outputdevtoolfallbackmodulefilenametemplate) is used instead for these modules.
+إذا كان modules المتعدد سيؤدي إلى نفس الاسم، فسيتم استخدام [`output.devtoolFallbackModuleFilenameTemplate`](#outputdevtoolfallbackmodulefilenametemplate) بدلاً من ذلك لـ modules.
 
 ## output.devtoolNamespace
 
 `string`
 
-This option determines the module's namespace used with the [`output.devtoolModuleFilenameTemplate`](#outputdevtoolmodulefilenametemplate). When not specified, it will default to the value of: [`output.uniqueName`](#outputuniquename). It's used to prevent source file path collisions in sourcemaps when loading multiple libraries built with webpack.
+يحدد هذا الخيار مساحة الاسم module المستخدمة مع [`output.devtoolModuleFilenameTemplate`](#outputdevtoolmodulefilenametemplate). عند عدم التحديد، سيتم تعيينه افتراضيًا على القيمة: [`output.uniqueName`](#outputuniquename). يتم استخدامه لمنع تصادمات مسار الملف المصدر في Source Maps عند تحميل مكتبات متعددة تم إنشاؤها باستخدام webpack.
 
-For example, if you have 2 libraries, with namespaces `library1` and `library2`, which both have a file `./src/index.js` (with potentially different contents), they will expose these files as `webpack://library1/./src/index.js` and `webpack://library2/./src/index.js`.
+على سبيل المثال، إذا كان لديك مكتبتان، بمساحات الأسماء `library1` و`library2`، وكلاهما يحتوي على ملف `./src/index.js` (مع محتويات محتملة مختلفة)، فسوف يعرضان هذه الملفات على أنها `webpack://library1/./src/index.js` و`webpack://library2/./src/index.js`.
 
-You can use template strings like `[name]` to dynamically generate namespaces based on the build context, providing additional flexibility.
+يمكنك استخدام سلاسل القالب مثل `[name]` لإنشاء مساحات أسماء ديناميكيًا استنادًا إلى سياق build، مما يوفر مرونة إضافية.
 
 **webpack.config.js**
 
@@ -438,7 +409,7 @@ export default {
 
 `[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>]`
 
-List of chunk loading types enabled for use by entry points. Will be automatically filled by webpack. Only needed when using a function as entry option and returning chunkLoading option from there.
+قائمة أنواع التحميل chunk الممكّنة للاستخدام بواسطة entry points. سيتم ملؤه تلقائيًا بواسطة webpack. مطلوب فقط عند استخدام خيار function كخيار entry وإرجاع خيارchunkLoading من هناك.
 
 **webpack.config.js**
 
@@ -456,7 +427,7 @@ export default {
 
 `[string]`
 
-List of library types enabled for use by entry points.
+قائمة أنواع library الممكّنة للاستخدام بواسطة entry points.
 
 ```js
 export default {
@@ -471,7 +442,7 @@ export default {
 
 `[string]`
 
-List of wasm loading types enabled for use by entry points.
+قائمة أنواع تحميل Wasm المُمكّنة للاستخدام بواسطة entry points.
 
 ```js
 export default {
@@ -484,44 +455,44 @@ export default {
 
 ## output.environment
 
-Tell webpack what kind of ES-features may be used in the generated runtime-code.
+أخبر webpack ما هو نوع ميزات ES التي يمكن استخدامها في كود runtime الذي تم إنشاؤه.
 
 ```js
 export default {
   output: {
     environment: {
-      // The environment supports arrow functions ('() => { ... }').
+      // تدعم البيئة وظائف الأسهم ('() => { ... }').
       arrowFunction: true,
-      // The environment supports async function and await ('async function () { await ... }').
+      // تدعم البيئة المزامنة function والانتظار ('async function () { انتظار ... }').
       asyncFunction: true,
-      // The environment supports BigInt as literal (123n).
+      // تدعم البيئة BigInt بشكل حرفي (123n).
       bigIntLiteral: false,
-      // The environment supports const and let for variable declarations.
+      // تدعم البيئة const وتسمح للإعلانات المتغيرة.
       const: true,
-      // The environment supports destructuring ('{ a, b } = obj').
+      // تدعم البيئة التدمير ('{ a, b } = obj').
       destructuring: true,
-      // The environment supports 'document' variable.
+      // تدعم البيئة متغير "المستند".
       document: true,
-      // The environment supports an async import() function to import EcmaScript modules.
+      // تدعم البيئة عملية `import()` غير المتزامن لاستيراد ECMAScript modules.
       dynamicImport: false,
-      // The environment supports an async import() when creating a worker, only for web targets at the moment.
+      // تدعم البيئة عملية الاستيراد غير المتزامنة () عند إنشاء worker، فقط للويب targets في الوقت الحالي.
       dynamicImportInWorker: false,
-      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+      // تدعم البيئة التكرار "for of" ("for (const x of array) { ... }").
       forOf: true,
-      // The environment supports 'globalThis'.
+      // البيئة تدعم "globalThis".
       globalThis: true,
-      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+      // تدعم البيئة بناء الجملة ECMAScript Module لاستيراد ECMAScript modules (استيراد ... من '...').
       module: false,
-      // The environment supports object method shorthand ('{ module() {} }').
+      // تدعم البيئة اختصار أسلوب object ('{ module() {} }').
       methodShorthand: true,
-      // Determines if the node: prefix is generated for core module imports in environments that support it.
-      // This is only applicable to Webpack runtime code.
+      // يحدد ما إذا تم إنشاء بادئة `node:` لاستيرادات module الأساسية في البيئات التي تدعمها.
+      // ينطبق هذا فقط على كود webpack runtime.
       nodePrefixForCoreModules: false,
-      // The environment supports optional chaining ('obj?.a' or 'obj?.()').
+      // تدعم البيئة التسلسل الاختياري ("obj?.a" أو "obj?.()").
       optionalChaining: true,
-      // The environment supports template literals.
+      // تدعم البيئة القيم الحرفية للقالب.
       templateLiteral: true,
-      // The environment supports `import.meta.dirname` and `import.meta.filename`.
+      // تدعم البيئة `import.meta.dirname` و`import.meta.filename`.
       importMetaDirnameAndFilename: false,
     },
   },
@@ -532,9 +503,9 @@ export default {
 
 `string` `function (pathData, assetInfo) => string`
 
-This option determines the name of each output bundle. The bundle is written to the directory specified by the [`output.path`](#outputpath) option.
+يحدد هذا الخيار اسم كل output bundle. تتم كتابة bundle إلى الدليل المحدد بواسطة الخيار [`output.path`](#outputpath).
 
-For a single [`entry`](/configuration/entry-context/#entry) point, this can be a static name.
+بالنسبة لنقطة [`entry`](/configuration/entry-context/#entry) واحدة، يمكن أن يكون هذا اسمًا ثابتًا.
 
 **webpack.config.js**
 
@@ -547,9 +518,9 @@ export default {
 };
 ```
 
-However, when creating multiple bundles via more than one entry point, code splitting, or various plugins, you should use one of the following substitutions to give each bundle a unique name...
+ومع ذلك، عند إنشاء عدة bundles عبر أكثر من entry point، أو تقسيم الكود، أو plugins مختلف، يجب عليك استخدام أحد البدائل التالية لمنح كل bundle اسمًا فريدًا...
 
-Using entry name:
+باستخدام اسم entry:
 
 **webpack.config.js**
 
@@ -562,7 +533,7 @@ export default {
 };
 ```
 
-Using internal chunk id:
+باستخدام معرف chunk الداخلي:
 
 **webpack.config.js**
 
@@ -575,7 +546,7 @@ export default {
 };
 ```
 
-Using hashes generated from the generated content:
+استخدام التجزئة التي تم إنشاؤها من المحتوى الذي تم إنشاؤه:
 
 **webpack.config.js**
 
@@ -588,7 +559,7 @@ export default {
 };
 ```
 
-Combining multiple substitutions:
+الجمع بين البدائل المتعددة:
 
 **webpack.config.js**
 
@@ -601,7 +572,7 @@ export default {
 };
 ```
 
-Using the function to return the filename:
+استخدام function لإرجاع اسم الملف:
 
 **webpack.config.js**
 
@@ -615,72 +586,72 @@ export default {
 };
 ```
 
-Make sure to read the [Caching guide](/guides/caching) for details. There are more steps involved than only setting this option.
+تأكد من قراءة [Caching الدليل](/guides/caching) للحصول على التفاصيل. هناك خطوات أكثر من مجرد تعيين هذا الخيار.
 
-Note this option is called filename but you are still allowed to use something like `'js/[name]/bundle.js'` to create a folder structure.
+لاحظ أن هذا الخيار يسمى اسم الملف ولكن لا يزال مسموحًا لك باستخدام شيء مثل `'js/[name]/bundle.js'` لإنشاء بنية المجلد.
 
-T> Note this option does not affect output files for on-demand-loaded chunks. It only affects output files that are initially loaded. For on-demand-loaded chunk files, the [`output.chunkFilename`](#outputchunkfilename) option is used. Files created by loaders also aren't affected. In this case, you would have to try the specific loader's available options.
+T> لاحظ أن هذا الخيار لا يؤثر على ملفات output الخاصة بـ chunks المحملة حسب الطلب. إنه يؤثر فقط على ملفات output التي تم تحميلها في البداية. بالنسبة لملفات chunk المحملة حسب الطلب، يتم استخدام الخيار [`output.chunkFilename`](#outputchunkfilename). ولا تتأثر أيضًا الملفات التي تم إنشاؤها بواسطة loaders. في هذه الحالة، سيكون عليك تجربة الخيارات المتاحة لـ loader المحددة.
 
-### Template strings
+### سلاسل القالب
 
-The following substitutions are available in template strings (via webpack's internal [`TemplatedPathPlugin`](https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js)):
+البدائل التالية متاحة في سلاسل القالب (عبر webpack الداخلي [`TemplatedPathPlugin`](https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js)):
 
-Substitutions available on Compilation-level:
+البدائل المتاحة على مستوى Compilation:
 
-| Template   | Description                  |
+| القالب   | الوصف                  |
 | ---------- | ---------------------------- |
-| [fullhash] | The full hash of compilation |
-| [hash]     | Same, but deprecated         |
+| [fullhash] | كامل hash من compilation |
+| [hash]     | نفسه، ولكن إهماله         |
 
-Substitutions available on Chunk-level:
+البدائل المتاحة على مستوى Chunk:
 
-| Template      | Description                                                                                                      |
+| القالب      | الوصف                                                                                                      |
 | ------------- | ---------------------------------------------------------------------------------------------------------------- |
-| [id]          | The ID of the chunk                                                                                              |
-| [name]        | The name of the chunk, if set, otherwise the ID of the chunk                                                     |
-| [chunkhash]   | The hash of the chunk, including all elements of the chunk                                                       |
-| [contenthash] | The hash of the chunk, including only elements of this content type (affected by `optimization.realContentHash`) |
+| [id]          | معرف chunk                                                                                              |
+| [الاسم]        | اسم chunk، إذا تم تعيينه، وإلا معرف chunk                                                     |
+| [chunkhash]   | hash لـ chunk، بما في ذلك جميع عناصر chunk                                                       |
+| [contenthash] | hash الخاص بـ chunk، بما في ذلك عناصر نوع المحتوى هذا فقط (المتأثرة بـ `optimization.realContentHash`) |
 
-Substitutions available on Module-level:
+البدائل المتاحة على مستوى Module:
 
-| Template      | Description                           |
+| القالب      | الوصف                           |
 | ------------- | ------------------------------------- |
-| [id]          | The ID of the module                  |
-| [moduleid]    | Same, but deprecated                  |
-| [hash]        | The hash of the module                |
-| [modulehash]  | Same, but deprecated                  |
-| [contenthash] | The hash of the content of the module |
+| [id]          | معرف module                  |
+| [مودوليد]    | نفسه، ولكن إهماله                  |
+| [hash]        | hash من module                |
+| [مودولهاش]  | نفسه، ولكن إهماله                  |
+| [contenthash] | hash لمحتوى module |
 
-Substitutions available on File-level:
+البدائل المتاحة على مستوى الملف:
 
-| Template   | Description                                                                       |
+| القالب   | الوصف                                                                       |
 | ---------- | --------------------------------------------------------------------------------- |
-| [file]     | Filename and path, without query or fragment                                      |
-| [query]    | Query with leading `?`                                                            |
-| [fragment] | Fragment with leading `#`                                                         |
-| [base]     | Only filename (including extensions), without path                                |
-| [filebase] | Same, but deprecated                                                              |
-| [path]     | Only path, without filename                                                       |
-| [name]     | Only filename without extension or path                                           |
-| [ext]      | Extension with leading `.` (not available for [output.filename](#outputfilename)) |
-
-Substitutions available on URL-level:
-
-| Template | Description |
+| [ملف]     | اسم الملف والمسار، بدون استعلام أو جزء                                      |
+| [استعلام]    | الاستعلام باستخدام البادئة `?`                                                            |
+| [جزء] | جزء ذو مسافة بادئة `#`                                                         |
+| [قاعدة]     | اسم الملف فقط (بما في ذلك الامتدادات)، بدون مسار                                |
+| [قاعدة الملفات] | نفسه، ولكن إهماله                                                              |
+| [المسار]     | المسار الوحيد، بدون اسم الملف                                                       |
+| [الاسم]     | اسم الملف فقط بدون ملحق أو مسار                                           |
+| [تحويلة]      | الامتداد بالبادئة `.` (غير متوفر لـ [output.filename](#outputfilename)) |
+
+البدائل المتاحة على مستوى URL:
+
+| القالب | الوصف |
 | -------- | ----------- |
-| [url]    | URL         |
+| [رابط]    | عنوان URL         |
 
-T> `[file]` equals `[path][base]`. `[base]` equals `[name][ext]`. The full path is `[path][name][ext][query][fragment]` or `[path][base][query][fragment]` or `[file][query][fragment]`.
+T> `[file]` يساوي `[path][base]`. `[base]` يساوي `[name][ext]`. المسار الكامل هو `[path][name][ext][query][fragment]` أو `[path][base][query][fragment]` أو `[file][query][fragment]`.
 
-The length of hashes (`[hash]`, `[contenthash]` or `[chunkhash]`) can be specified using `[hash:16]` (defaults to 20). Alternatively, specify [`output.hashDigestLength`](#outputhashdigestlength) to configure the length globally.
+يمكن تحديد طول التجزئات (`[hash]`، `[contenthash]` أو `[chunkhash]`) باستخدام `[hash:16]` (القيمة الافتراضية هي 20). وبدلاً من ذلك، حدد [`output.hashDigestLength`](#outputhashdigestlength) لتخصيص الطول بشكل عام.
 
-It is possible to filter out placeholder replacement when you want to use one of the placeholders in the actual file name. For example, to output a file `[name].js`, you have to escape the `[name]` placeholder by adding backslashes between the brackets. So that `[\name\]` generates `[name]` instead of getting replaced with the `name` of the asset.
+من الممكن تصفية استبدال العنصر النائب عندما تريد استخدام أحد العناصر النائبة في اسم الملف الفعلي. على سبيل المثال، بالنسبة إلى output ملف `[name].js`، يجب عليك الهروب من العنصر النائب `[name]` عن طريق إضافة خطوط مائلة عكسية بين الأقواس. بحيث يُنشئ `[\name\]` `[name]` بدلاً من استبداله بـ `name` الخاص بـ asset.
 
-Example: `[\id\]` generates `[id]` instead of getting replaced with the `id`.
+على سبيل المثال: يُنشئ `[\id\]` `[id]` بدلاً من استبداله بـ `id`.
 
-If using a function for this option, the function will be passed an object containing data for the substitutions in the table above.
-Substitutions will be applied to the returned string too.
-The passed object will have this type: (properties available depending on context)
+في حالة استخدام function لهذا الخيار، سيتم تمرير function إلى object يحتوي على بيانات للبدائل في الجدول أعلاه.
+سيتم تطبيق البدائل على string الذي تم إرجاعه أيضًا.
+سيكون للـ object الذي تم تمريره هذا النوع: (الخصائص المتاحة حسب السياق)
 
 ```ts
 type PathData = {
@@ -711,17 +682,17 @@ type ModulePathData = {
 };
 ```
 
-T> In some contexts properties will use JavaScript code expressions instead of raw values. In these cases, the `WithLength` variant is available and should be used instead of slicing the original value.
+T> في بعض السياقات، ستستخدم الخصائص تعبيرات التعليمات البرمجية JavaScript بدلاً من القيم الأولية. في هذه الحالات، يكون المتغير `WithLength` متاحًا ويجب استخدامه بدلاً من تقسيم القيمة الأصلية.
 
 ## output.globalObject
 
 `string = 'self'`
 
-When targeting a library, especially when `library.type` is `'umd'`, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set `output.globalObject` option to `'this'`. Defaults to `self` for Web-like targets.
+عند استهداف library، خاصة عندما يكون `library.type` هو `'umd'`، يشير هذا الخيار إلى ما هو object العام الذي سيتم استخدامه لتركيب library. لجعل UMD build متاحًا على كل من browsers وNode.js، اضبط خيار `output.globalObject` على `'this'`. الإعدادات الافتراضية هي `self` لـ targets المشابه للويب.
 
-The return value of your entry point will be assigned to the global object using the value of `output.library.name`. Depending on the value of the `type` option, the global object could change respectively, e.g., `self`, `global`, or `globalThis`.
+سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى object العامة باستخدام قيمة `output.library.name`. اعتمادًا على قيمة الخيار `type`، يمكن أن يتغير object العام على التوالي، على سبيل المثال، `self`، `global`، أو `globalThis`.
 
-For example:
+على سبيل المثال:
 
 **webpack.config.js**
 
@@ -743,22 +714,22 @@ export default {
 
 `string = 'hex'`
 
-The encoding to use when generating the hash. All encodings from Node.JS' [`hash.digest`](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) are supported. Using `'base64'` for filenames might be problematic since it has the character `/` in its alphabet. Likewise `'latin1'` could contain any character.
+الترميز الذي سيتم استخدامه عند إنشاء hash. جميع الترميزات من Node.JS '[`hash.digest`](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) مدعومة. قد يكون استخدام `'base64'` لأسماء الملفات مشكلة نظرًا لأنه يحتوي على الحرف `/` في أبجديته. وبالمثل، يمكن أن يحتوي `'latin1'` على أي حرف.
 
 <Badge text="5.104.0+" />
 
-In addition to the standard Node.js encodings, webpack also supports the following custom digest algorithms for generating shorter or URL-safe hash values:
+بالإضافة إلى ترميزات Node.js القياسية، يدعم webpack أيضًا خوارزميات الملخص المخصصة التالية لإنشاء قيم hash أقصر أو آمنة لعنوان URL:
 
-- `'base64url'` - URL-safe base64 encoding (RFC 4648), recommended for filenames
-- `'base62'` - Base62 encoding (0-9, A-Z, a-z)
-- `'base58'` - Base58 encoding (Bitcoin alphabet)
-- `'base52'` - Base52 encoding (A-Z, a-z)
-- `'base49'` - Base49 encoding
-- `'base36'` - Base36 encoding (0-9, A-Z)
-- `'base32'` - Base32 encoding (RFC 4648)
-- `'base25'` - Base25 encoding
+- `'base64url'` - ترميز base64 الآمن لعنوان URL (RFC 4648)، يوصى به لأسماء الملفات
+- `'base62'` - ترميز Base62 (0-9، A-Z، a-z)
+- `'base58'` - ترميز Base58 (أبجدية Bitcoin)
+- `'base52'` - ترميز Base52 (A-Z، a-z)
+- `'base49'` - ترميز Base49
+- `'base36'` - ترميز Base36 (0-9، A-Z)
+- `'base32'` - ترميز Base32 (RFC 4648)
+- `'base25'` - ترميز Base25
 
-These custom encodings are particularly useful for generating shorter hash values in filenames while maintaining URL safety.
+تعد هذه الترميزات المخصصة مفيدة بشكل خاص لإنشاء قيم hash أقصر في أسماء الملفات مع الحفاظ على أمان URL.
 
 **webpack.config.js**
 
@@ -774,15 +745,15 @@ export default {
 
 `number = 20`
 
-The prefix length of the hash digest to use.
+طول البادئة للملخص hash المطلوب استخدامه.
 
-T> For `webpack v5.65.0+`, `16` will be used as the default value for the `hashDigestLength` option when [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults) is enabled.
+T> بالنسبة إلى `webpack v5.65.0+`، سيتم استخدام `16` كقيمة افتراضية للخيار `hashDigestLength` عند تمكين [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
 
 ## output.hashFunction
 
 `string = 'md4'` `function`
 
-The hashing algorithm to use. All functions from Node.JS' [`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_options) are supported. Since `4.0.0-alpha2`, the `hashFunction` can now be a constructor to a custom hash function. You can provide a non-crypto hash function for performance reasons.
+خوارزمية التجزئة المستخدمة. جميع الوظائف من Node.JS '[`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_options) مدعومة. منذ `4.0.0-alpha2`، يمكن أن يكون `hashFunction` الآن مُنشئًا لـ hash function مخصص. يمكنك تقديم hash function غير مشفر لأسباب performance.
 
 ```js
 export default {
@@ -793,21 +764,21 @@ export default {
 };
 ```
 
-Make sure that the hashing function will have an `update` and `digest` methods available.
+تأكد من أن التجزئة function ستحتوي على طريقتين `update` و`digest` متاحة.
 
-T> Since `webpack v5.54.0+`, `hashFunction` supports `xxhash64` as a faster algorithm, which will be used as default when [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults) is enabled.
+T> نظرًا لأن `webpack v5.54.0+`، فإن `hashFunction` يدعم `xxhash64` كخوارزمية أسرع، والتي سيتم استخدامها كخوارزمية افتراضية عند تمكين [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
 
 ## output.hashSalt
 
-An optional salt to update the hash via Node.JS' [`hash.update`](https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding).
+ملح اختياري لتحديث hash عبر Node.JS' [`hash.update`](https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding).
 
 ## output.hotUpdateChunkFilename
 
 `string = '[id].[fullhash].hot-update.js'`
 
-Customize the filenames of hot update chunks. See [`output.filename`](#outputfilename) option for details on the possible values.
+قم بتخصيص أسماء ملفات التحديث الساخن chunks. راجع الخيار [`output.filename`](#outputfilename) للحصول على تفاصيل حول القيم المحتملة.
 
-The only placeholders allowed here are `[id]` and `[fullhash]`, the default being:
+العناصر النائبة الوحيدة المسموح بها هنا هي `[id]` و`[fullhash]`، والعنصر الافتراضي هو:
 
 **webpack.config.js**
 
@@ -820,31 +791,31 @@ export default {
 };
 ```
 
-T> Typically you don't need to change `output.hotUpdateChunkFilename`.
+T> عادةً لا تحتاج إلى تغيير `output.hotUpdateChunkFilename`.
 
 ## output.hotUpdateGlobal
 
 `string`
 
-Only used when [`target`](/configuration/target/) is set to `'web'`, which uses JSONP for loading hot updates.
+يُستخدم فقط عند ضبط [`target`](/configuration/target/) على `'web'`، والذي يستخدم JSONP لتحميل التحديثات الساخنة.
 
-A JSONP function is used to asynchronously load hot-update chunks.
+يتم استخدام JSONP function لتحميل التحديث السريع chunks بشكل غير متزامن.
 
-For details see [`output.chunkLoadingGlobal`](#outputchunkloadingglobal).
+للحصول على تفاصيل، راجع [`output.chunkLoadingGlobal`](#outputchunkloadingglobal).
 
 ## output.hotUpdateMainFilename
 
 `string = '[runtime].[fullhash].hot-update.json'` `function`
 
-Customize the main hot update filename. `[fullhash]` and `[runtime]` are available as placeholder.
+تخصيص اسم ملف التحديث الساخن الرئيسي. `[fullhash]` و`[runtime]` متاحان كعنصر نائب.
 
-T> Typically you don't need to change `output.hotUpdateMainFilename`.
+T> عادةً لا تحتاج إلى تغيير `output.hotUpdateMainFilename`.
 
 ## output.iife
 
 `boolean = true`
 
-Tells webpack to add [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) wrapper around emitted code.
+يخبر webpack بإضافة غلاف [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) حول الكود المنبعث.
 
 ```js
 export default {
@@ -861,7 +832,7 @@ export default {
 
 `boolean = false`
 
-Hide warnings from the browser console in production. This option does not affect the terminal/console output.
+إخفاء التحذيرات من وحدة التحكم browser في الإنتاج. لا يؤثر هذا الخيار على الوحدة الطرفية/وحدة التحكم output.
 
 **webpack.config.js**
 
@@ -878,7 +849,7 @@ export default {
 
 `string = 'import'`
 
-The name of the native `import()` function. Can be used for polyfilling, e.g. with [`dynamic-import-polyfill`](https://github.com/GoogleChromeLabs/dynamic-import-polyfill).
+اسم الموطن الأصلي `import()` function. يمكن استخدامها للحشو المتعدد، على سبيل المثال، مع [`dynamic-import-polyfill`](https://github.com/GoogleChromeLabs/dynamic-import-polyfill).
 
 **webpack.config.js**
 
@@ -895,7 +866,7 @@ export default {
 
 `string`
 
-The name of the native `import.meta` object (can be exchanged for a polyfill).
+الاسم الأصلي `import.meta` object (يمكن استبداله بـ polyfill).
 
 **webpack.config.js**
 
@@ -910,11 +881,11 @@ export default {
 
 ## output.library
 
-Output a library exposing the exports of your entry point.
+Output a library يعرض صادرات entry point.
 
-- Type: `string | string[] | object`
+- النوع: `string | string[] | object`
 
-Let's take a look at an example.
+دعونا نلقي نظرة على مثال.
 
 **webpack.config.js**
 
@@ -928,7 +899,7 @@ export default {
 };
 ```
 
-Say you have exported a function in your `src/index.js` entry:
+لنفترض أنك قمت بتصدير function في `src/index.js` entry:
 
 ```js
 export function hello(name) {
@@ -936,7 +907,7 @@ export function hello(name) {
 }
 ```
 
-Now the variable `MyLibrary` will be bound with the exports of your entry file, and here's how to consume the webpack bundled library:
+الآن سيتم ربط المتغير `MyLibrary` بصادرات ملف entry الخاص بك، وإليك كيفية استهلاك webpack المجمعة library:
 
 ```html
 <script src="https://example.org/path/to/my-library.js"></script>
@@ -945,9 +916,9 @@ Now the variable `MyLibrary` will be bound with the exports of your entry file,
 </script>
 ```
 
-In the above example, we're passing a single entry file to `entry`, however, webpack can accept [many kinds of entry point](/configuration/entry-context/#entry), e.g., an `array`, or an `object`.
+في المثال أعلاه، نقوم بتمرير ملف entry واحد إلى `entry`، ومع ذلك، يمكن أن يقبل webpack [العديد من أنواع entry point](/configuration/entry-context/#entry)، على سبيل المثال، `array`، أو `object`.
 
-1. If you provide an `array` as the `entry` point, only the last one in the array will be exposed.
+1. إذا قمت بتوفير `array` كنقطة `entry`، فسيتم عرض النقطة الأخيرة فقط في array.
 
    ```js
    export default {
@@ -959,7 +930,7 @@ In the above example, we're passing a single entry file to `entry`, however, web
    };
    ```
 
-2. If an `object` is provided as the `entry` point, all entries can be exposed using the `array` syntax of `library`:
+2. إذا تم توفير `object` كنقطة `entry`، فيمكن كشف جميع الإدخالات باستخدام بناء جملة `array` لـ `library`:
 
    ```js
    export default {
@@ -975,7 +946,7 @@ In the above example, we're passing a single entry file to `entry`, however, web
    };
    ```
 
-   Assuming that both `a.js` and `b.js` export a function `hello`, here's how to consume the libraries:
+بافتراض أن كلا من `a.js` و`b.js` يقومان بتصدير function `hello`، فإليك كيفية استهلاك المكتبات:
 
    ```html
    <script src="https://example.org/path/to/a.js"></script>
@@ -986,9 +957,9 @@ In the above example, we're passing a single entry file to `entry`, however, web
    </script>
    ```
 
-   See [this example](https://github.com/webpack/webpack/tree/main/examples/multi-part-library) for more.
+راجع [هذا المثال](https://github.com/webpack/webpack/tree/main/examples/multi-part-library) للمزيد.
 
-   Note that the above configuration won't work as expected if you're going to configure library options per entry point. Here is how to do it [under each of your entries](/concepts/entry-points/#entrydescription-object):
+لاحظ أن التخصيص أعلاه لن يعمل كما هو متوقع إذا كنت ستقوم بتخصيص خيارات library لكل entry point. إليك كيفية القيام بذلك [تحت كل إدخال من إدخالاتك](/concepts/entry-points/#entrydescription-object):
 
    ```js
    export default {
@@ -997,7 +968,7 @@ In the above example, we're passing a single entry file to `entry`, however, web
        main: {
          import: "./src/index.js",
          library: {
-           // all options under `output.library` can be used here
+           // يمكن استخدام جميع الخيارات ضمن `output.library` هنا
            name: "MyLibrary",
            type: "umd",
            umdNamedDefine: true,
@@ -1018,9 +989,9 @@ In the above example, we're passing a single entry file to `entry`, however, web
 
 <Badge text="5.78.0+" />
 
-Use a container(defined in global space) for calling `define`/`require` functions in an AMD module.
+استخدم حاوية (محددة في المساحة العالمية) للاتصال بوظائف `define`/`require` في AMD module.
 
-W> Note that the value of `amdContainer` **must be** set as a global variable.
+W> لاحظ أنه يجب تعيين قيمة `amdContainer` **كمتغير عام.
 
 ```js
 export default {
@@ -1034,7 +1005,7 @@ export default {
 };
 ```
 
-Which will result in the following bundle:
+مما سيؤدي إلى ما يلي bundle:
 
 ```js
 globalThis.clientContainer.define(/* define args */); // or 'amd-require' window['clientContainer'].require(/*require args*/);
@@ -1053,9 +1024,9 @@ export default {
 };
 ```
 
-Specify a name for the library.
+حدد اسمًا لـ library.
 
-- Type:
+- النوع:
 
   ```ts
   string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}
@@ -1063,19 +1034,19 @@ Specify a name for the library.
 
 ### output.library.type
 
-Configure how the library will be exposed.
+قم بتخصيص كيفية عرض library.
 
-- Type: `string`
+- النوع: `string`
 
-  Types included by default are `'var'`, `'module'`, `'modern-module'`, `'assign'`, `'assign-properties'`, `'this'`, `'window'`, `'self'`, `'global'`, `'commonjs'`, `'commonjs2'`, `'commonjs-module'`, `'commonjs-static'`, `'amd'`, `'amd-require'`, `'umd'`, `'umd2'`, `'jsonp'` and `'system'`, but others might be added by plugins.
+الأنواع المضمنة افتراضيًا هي `'var'`، `'module'`، `'modern-module'`، `'assign'`، `'assign-properties'`، `'this'`، `'window'`، `'self'`، `'global'`، `'commonjs'`، `'commonjs2'`، `'commonjs-module'`، `'commonjs-static'`، `'amd'`، `'amd-require'`، `'umd'`، `'umd2'`، `'jsonp'` و`'system'`، ولكن يمكن إضافة أشياء أخرى بواسطة plugins.
 
-For the following examples, we'll use `_entry_return_` to indicate the values returned by the entry point.
+بالنسبة للأمثلة التالية، سنستخدم `_entry_return_` للإشارة إلى القيم التي يتم إرجاعها بواسطة entry point.
 
-#### Expose a Variable
+#### فضح متغير
 
-These options assign the return value of the entry point (e.g. whatever the entry point exported) to the name provided by [`output.library.name`](#outputlibraryname) at whatever scope the bundle was included at.
+تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى الاسم المقدم بواسطة [`output.library.name`](#outputlibraryname) في أي نطاق تم تضمين bundle فيه.
 
-##### type: 'var'
+##### النوع: "فار"
 
 ```js
 export default {
@@ -1089,16 +1060,16 @@ export default {
 };
 ```
 
-When your library is loaded, the **return value of your entry point** will be assigned to a variable:
+عندما يتم تحميل library، سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى متغير:
 
 ```js
 const MyLibrary = _entry_return_;
 
-// In a separate script with `MyLibrary` loaded…
+// في برنامج نصي منفصل مع تحميل `MyLibrary`...
 MyLibrary.doSomething();
 ```
 
-##### type: 'assign'
+##### النوع: "تعيين"
 
 ```js
 export default {
@@ -1112,15 +1083,15 @@ export default {
 };
 ```
 
-This will generate an implied global which has the potential to reassign an existing value (use with caution):
+سيؤدي هذا إلى إنشاء عمومية ضمنية لديها القدرة على إعادة تعيين قيمة موجودة (استخدمها بحذر):
 
 ```js
 MyLibrary = _entry_return_;
 ```
 
-Be aware that if `MyLibrary` isn't defined earlier your library will be set in global scope.
+انتبه إلى أنه إذا لم يتم تعريف `MyLibrary` مسبقًا، فسيتم تعيين library في النطاق العام.
 
-##### type: 'assign-properties'
+##### النوع: 'assign-properties'
 
 <Badge text="5.16.0+" />
 
@@ -1136,29 +1107,29 @@ export default {
 };
 ```
 
-Similar to [`type: 'assign'`](#type-assign) but a safer option as it will reuse `MyLibrary` if it already exists:
+يشبه [`type: 'assign'`](#type-assign) ولكنه خيار أكثر أمانًا لأنه سيعيد استخدام `MyLibrary` إذا كان موجودًا بالفعل:
 
 ```js
-// only create MyLibrary if it doesn't exist
+// قم بإنشاء MyLibrary فقط إذا لم يكن موجودًا
 MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary;
-// then copy the return value to MyLibrary
-// similarly to what Object.assign does
+// ثم انسخ القيمة المرجعة إلى MyLibrary
+// بشكل مشابه لما يفعله Object.assistant
 
-// for instance, you export a `hello` function in your entry as follow
+// على سبيل المثال، يمكنك تصدير `hello` function في entry الخاص بك على النحو التالي
 export function hello(name) {
   console.log(`Hello ${name}`);
 }
 
-// In another script with MyLibrary loaded
-// you can run `hello` function like so
+// في برنامج نصي آخر مع MyLibrary تحميلها
+// يمكنك تشغيل `hello` function بهذه الطريقة
 MyLibrary.hello("World");
 ```
 
-#### Expose Via Object Assignment
+#### فضح عبر Object المهمة
 
-These options assign the return value of the entry point (e.g. whatever the entry point exported) to a specific object under the name defined by [`output.library.name`](#outputlibraryname).
+تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى object محدد تحت الاسم المحدد بواسطة [`output.library.name`](#outputlibraryname).
 
-##### type: 'this'
+##### اكتب: "هذا"
 
 ```js
 export default {
@@ -1172,17 +1143,17 @@ export default {
 };
 ```
 
-The **return value of your entry point** will be assigned to `this` under the property named by `output.library.name`. The meaning of `this` is up to you:
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `this` ضمن الخاصية المسماة بواسطة `output.library.name`. معنى `this` متروك لك:
 
 ```js
 this.MyLibrary = _entry_return_;
 
-// In a separate script...
+// في نص منفصل...
 this.MyLibrary.doSomething();
 MyLibrary.doSomething(); // if `this` is window
 ```
 
-##### type: 'window'
+##### النوع: "نافذة"
 
 ```js
 export default {
@@ -1196,7 +1167,7 @@ export default {
 };
 ```
 
-The **return value of your entry point** will be assigned to the `window` object using the `output.library.name` value.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `window` object باستخدام القيمة `output.library.name`.
 
 ```js
 globalThis.MyLibrary = _entry_return_;
@@ -1204,7 +1175,7 @@ globalThis.MyLibrary = _entry_return_;
 globalThis.MyLibrary.doSomething();
 ```
 
-##### type: 'global'
+##### النوع: "عالمي"
 
 ```js
 export default {
@@ -1218,7 +1189,7 @@ export default {
 };
 ```
 
-The **return value of your entry point** will be assigned to the global object using the `output.library.name` value. Depending on the [`target`](/configuration/target/) value, the global object could change respectively, e.g., `self`, `global` or `globalThis`.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى object العامة باستخدام القيمة `output.library.name`. اعتمادًا على قيمة [`target`](/configuration/target/)، يمكن أن تتغير القيمة العامة object على التوالي، على سبيل المثال، `self` أو `global` أو `globalThis`.
 
 ```js
 globalThis.MyLibrary = _entry_return_;
@@ -1226,7 +1197,7 @@ globalThis.MyLibrary = _entry_return_;
 globalThis.MyLibrary.doSomething();
 ```
 
-##### type: 'commonjs'
+##### النوع: "كومونجس"
 
 ```js
 export default {
@@ -1240,7 +1211,7 @@ export default {
 };
 ```
 
-The **return value of your entry point** will be assigned to the `exports` object using the `output.library.name` value. As the name implies, this is used in CommonJS environments.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `exports` object باستخدام القيمة `output.library.name`. كما يوحي الاسم، يتم استخدام هذا في بيئات CommonJS.
 
 ```js
 exports.MyLibrary = _entry_return_;
@@ -1248,13 +1219,13 @@ exports.MyLibrary = _entry_return_;
 require("MyLibrary").doSomething();
 ```
 
-W> Note that not setting a `output.library.name` will cause all properties returned by the entry point to be assigned to the given object; there are no checks against existing property names.
+W> لاحظ أن عدم تعيين `output.library.name` سيؤدي إلى تعيين جميع الخصائص التي يتم إرجاعها بواسطة entry point إلى object المحدد؛ لا توجد عمليات فحص ضد أسماء الممتلكات الموجودة.
 
-#### Module Definition Systems
+#### Module أنظمة التعريف
 
-These options will result in a bundle that comes with a complete header to ensure compatibility with various module systems. The `output.library.name` option will take on a different meaning under the following `output.library.type` options.
+ستؤدي هذه الخيارات إلى bundle الذي يأتي مع رأس كامل لضمان التوافق مع أنظمة module المختلفة. سيأخذ خيار `output.library.name` معنى مختلفًا ضمن خيارات `output.library.type` التالية.
 
-##### type: 'module'
+##### النوع: 'module'
 
 ```js
 export default {
@@ -1264,18 +1235,18 @@ export default {
   },
   output: {
     library: {
-      // do not specify a `name` here
+      // لا تحدد `name` هنا
       type: "module",
     },
   },
 };
 ```
 
-Output ES Module.
+Output كـ ES module.
 
-However this feature is still experimental and not fully supported yet, so make sure to enable [experiments.outputModule](/configuration/experiments/) beforehand. In addition, you can track the development progress in [this thread](https://github.com/webpack/webpack/issues/2933#issuecomment-774253975).
+ومع ذلك، لا تزال هذه الميزة تجريبية وغير مدعومة بشكل كامل حتى الآن، لذا تأكد من تمكين [experiments.outputModule](/configuration/experiments/) مسبقًا. بالإضافة إلى ذلك، يمكنك تتبع تقدم التطوير في [هذا الموضوع](https://github.com/webpack/webpack/issues/2933#issuecomment-774253975).
 
-##### type: 'modern-module'
+##### النوع: "حديث-module"
 
 <Badge text="v5.93.0+" />
 
@@ -1287,32 +1258,32 @@ export default {
   },
   output: {
     library: {
-      // do not specify a `name` here
+      // لا تحدد `name` هنا
       type: "modern-module",
     },
   },
 };
 ```
 
-This configuration generates tree-shakable output for ES Modules.
+ينشئ هذا التخصيص output شجرة قابلة للاهتزاز لـ ES Modules.
 
-However this feature is still experimental and not fully supported yet, so make sure to enable [experiments.outputModule](/configuration/experiments/) beforehand.
+ومع ذلك، لا تزال هذه الميزة تجريبية وغير مدعومة بشكل كامل حتى الآن، لذا تأكد من تمكين [experiments.outputModule](/configuration/experiments/) مسبقًا.
 
-##### type: 'commonjs2'
+##### النوع: "commonjs2"
 
 ```js
 export default {
   // …
   output: {
     library: {
-      // note there's no `name` here
+      // لاحظ أنه لا يوجد `name` هنا
       type: "commonjs2",
     },
   },
 };
 ```
 
-The **return value of your entry point** will be assigned to the `module.exports`. As the name implies, this is used in Node.js (CommonJS) environments:
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `module.exports`. كما يوحي الاسم، يُستخدم هذا في بيئات Node.js (CommonJS):
 
 ```js
 export default _entry_return_;
@@ -1320,15 +1291,15 @@ export default _entry_return_;
 require("MyLibrary").doSomething();
 ```
 
-If we specify `output.library.name` with `type: commonjs2`, the return value of your entry point will be assigned to the `module.exports.[output.library.name]`.
+إذا قمنا بتحديد `output.library.name` مع `type: commonjs2`، فسيتم تعيين القيمة المرجعة لـ entry point إلى `module.exports.[output.library.name]`.
 
-T> Wondering the difference between CommonJS and CommonJS2 is? While they are similar, there are some subtle differences between them that are not usually relevant in the context of webpack. (For further details, please [read this issue](https://github.com/webpack/webpack/issues/1114).)
+T> هل تتساءل عن الفرق بين CommonJS وCommonJS2؟ على الرغم من أنها متشابهة، إلا أن هناك بعض الاختلافات الدقيقة بينهما والتي لا تكون ذات صلة عادةً بسياق webpack. (لمزيد من التفاصيل، يرجى [قراءة هذا العدد](https://github.com/webpack/webpack/issues/1114).)
 
-##### type: 'commonjs-module'
+##### النوع: "commonjs-module"
 
-`commonjs-module` is equivalent to [`commonjs2`](#type-commonjs2). We may remove `commonjs-module` in future versions.
+`commonjs-module` يعادل [`commonjs2`](#type-commonjs2). قد نقوم بإزالة `commonjs-module` في الإصدارات المستقبلية.
 
-##### type: 'commonjs-static'
+##### النوع: "commonjs-static"
 
 <Badge text="5.66.0+" />
 
@@ -1337,16 +1308,16 @@ export default {
   // …
   output: {
     library: {
-      // note there's no `name` here
+      // لاحظ أنه لا يوجد `name` هنا
       type: "commonjs-static",
     },
   },
 };
 ```
 
-Individual exports will be set as properties on `module.exports`. The "static" in the name refers to the output being statically analysable, and thus named exports are importable into ESM via Node.js:
+سيتم تعيين الصادرات الفردية كخصائص على `module.exports`. تشير كلمة "ثابت" في الاسم إلى أن output قابل للتحليل بشكل ثابت، وبالتالي فإن الصادرات المسماة قابلة للاستيراد إلى ESM عبر Node.js:
 
-Input:
+الإدخال:
 
 ```js
 export function doSomething() {}
@@ -1362,27 +1333,27 @@ function doSomething() {}
 exports.doSomething = __webpack_exports__.doSomething;
 ```
 
-Consumption (CommonJS):
+الاستهلاك (CommonJS):
 
 ```js
 const { doSomething } = require("./output.cjs"); // doSomething => [Function: doSomething]
 ```
 
-Consumption (ESM):
+الاستهلاك (ESM):
 
 ```js
 import { doSomething } from "./output.cjs"; // doSomething => [Function: doSomething]
 ```
 
-T> This is useful when source code is written in ESM and the output should be compatible with both CJS and ESM. For further details, please [read this issue](https://github.com/webpack/webpack/issues/14998) or [this article](https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed) (specifically, [this section](https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed#publish-only-a-cjs-distribution-with-property-exports)).
+T> يكون هذا مفيدًا عند كتابة كود المصدر باللغة ESM ويجب أن يكون output متوافقًا مع كل من CJS وESM. لمزيد من التفاصيل، يرجى [قراءة هذه المشكلة](https://github.com/webpack/webpack/issues/14998) أو [هذه المقالة](https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed) (على وجه التحديد، [هذا القسم](https://dev.to/jakobjingleheimer/configuring-commonjs-es-modules-for-nodejs-12ed#publish-only-a-cjs-distribution-with-property-exports)).
 
-##### type: 'amd'
+##### النوع: "أيه إم دي"
 
-This will expose your library as an AMD module.
+سيؤدي هذا إلى كشف library باعتباره AMD module.
 
-AMD modules require that the entry chunk (e.g. the first script loaded by the `<script>` tag) be defined with specific properties, such as to `define` and `require` which is typically provided by RequireJS or any compatible loaders (such as almond). Otherwise, loading the resulting AMD bundle directly will result in an error like `define is not defined`.
+AMD modules يتطلب تعريف entry chunk (على سبيل المثال، أول script الذي تم تحميله بواسطة علامة `<script>`) بخصائص محددة، مثل `define` و`require` والتي يتم توفيرها عادةً بواسطة RequireJS أو أي loaders متوافق (مثل almond). وإلا فإن تحميل AMD bundle الناتج مباشرة سيؤدي إلى خطأ مثل `define is not defined`.
 
-With the following configuration...
+بالتخصيص التالي...
 
 ```js
 export default {
@@ -1396,29 +1367,29 @@ export default {
 };
 ```
 
-The generated output will be defined with the name `"MyLibrary"`, i.e.:
+سيتم تعريف output الذي تم إنشاؤه بالاسم `"MyLibrary"`، أي:
 
 ```js
 define("MyLibrary", [], () => _entry_return_);
 ```
 
-The bundle can be included as part of a script tag, and the bundle can be invoked like so:
+يمكن تضمين bundle كجزء من `<script>` tag، ويمكن استدعاء bundle كما يلي:
 
 ```js
 require(["MyLibrary"], (MyLibrary) => {
-  // Do something with the library...
+  // افعل شيئًا باستخدام library...
 });
 ```
 
-If `output.library.name` is undefined, the following is generated instead.
+إذا كان `output.library.name` غير محدد، فسيتم إنشاء ما يلي بدلاً من ذلك.
 
 ```js
 define(() => _entry_return_);
 ```
 
-This bundle will not work as expected, or not work at all (in the case of the almond loader) if loaded directly with a `<script>` tag. It will only work through a RequireJS compatible asynchronous module loader through the actual path to that file, so in this case, the `output.path` and `output.filename` may become important for this particular setup if these are exposed directly on the server.
+لن يعمل bundle كما هو متوقع، أو لن يعمل على الإطلاق (في حالة almond loader) إذا تم تحميله مباشرة بعلامة `<script>`. سيعمل فقط من خلال RequireJS غير المتزامن المتوافق module loader من خلال المسار الفعلي لهذا الملف، لذلك في هذه الحالة، قد يصبح `output.path` و`output.filename` مهمًا لهذا الإعداد المحدد إذا تم عرضهما مباشرة على server.
 
-##### type: 'amd-require'
+##### النوع: "يتطلب AMD"
 
 ```js
 export default {
@@ -1432,17 +1403,17 @@ export default {
 };
 ```
 
-This packages your output with an immediately executed AMD `require(dependencies, factory)` wrapper.
+هذا packages الخاص بك output مع غلاف AMD `require(dependencies, factory)` الذي تم تنفيذه على الفور.
 
-The `'amd-require'` type allows for the use of AMD dependencies without needing a separate later invocation. As with the `'amd'` type, this depends on the appropriate [`require` function](https://github.com/amdjs/amdjs-api/blob/master/require.md) being available in the environment in which the webpack output is loaded.
+يسمح النوع `'amd-require'` باستخدام AMD dependencies دون الحاجة إلى استدعاء لاحق منفصل. كما هو الحال مع النوع `'amd'`، يعتمد هذا على توفر [`require` function](https://github.com/amdjs/amdjs-api/blob/master/require.md) المناسب في البيئة التي يتم فيها تحميل webpack output.
 
-With this type, the library name can't be used.
+مع هذا النوع، لا يمكن استخدام الاسم library.
 
-##### type: 'umd'
+##### النوع: "أومد"
 
-This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD, and as global variable. Take a look at the [UMD Repository](https://github.com/umdjs/umd) to learn more.
+يؤدي هذا إلى كشف library الخاص بك تحت جميع تعريفات module، مما يسمح له بالعمل مع CommonJS، AMD، وكمتغير عام. ألقِ نظرة على [UMD المستودع](https://github.com/umdjs/umd) لمعرفة المزيد.
 
-In this case, you need the `library.name` property to name your module:
+في هذه الحالة، أنت بحاجة إلى الخاصية `library.name` لتسمية module الخاص بك:
 
 ```js
 export default {
@@ -1456,7 +1427,7 @@ export default {
 };
 ```
 
-And finally the output is:
+وأخيرًا output هو:
 
 ```js
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -1472,7 +1443,7 @@ And finally the output is:
 })(globalThis, () => _entry_return_);
 ```
 
-Note that omitting `library.name` will result in the assignment of all properties returned by the entry point be assigned directly to the root object, as documented under the [object assignment section](#expose-via-object-assignment). Example:
+لاحظ أن حذف `library.name` سيؤدي إلى تعيين كافة الخصائص التي يتم إرجاعها بواسطة entry point مباشرة إلى الجذر object، كما هو موثق ضمن [object قسم التعيين](#expose-via-object-assignment). مثال:
 
 ```js
 export default {
@@ -1483,7 +1454,7 @@ export default {
 };
 ```
 
-The output will be:
+سيكون output:
 
 ```js
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -1498,7 +1469,7 @@ The output will be:
 })(globalThis, () => _entry_return_);
 ```
 
-You may specify an object for `library.name` for differing names per targets:
+يمكنك تحديد object لـ `library.name` للأسماء المختلفة لكل targets:
 
 ```js
 export default {
@@ -1516,11 +1487,11 @@ export default {
 };
 ```
 
-##### type: 'system'
+##### النوع: "النظام"
 
-This will expose your library as a [`System.register`](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md) module. This feature was first released in [webpack 4.30.0](https://github.com/webpack/webpack/releases/tag/v4.30.0).
+سيؤدي هذا إلى كشف library كـ [`System.register`](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md) module. تم إصدار هذه الميزة لأول مرة في [webpack 4.30.0](https://github.com/webpack/webpack/releases/tag/v4.30.0).
 
-System modules require that a global variable `System` is present in the browser when the webpack bundle is executed. Compiling to `System.register` format allows you to `System.import('/bundle.js')` without additional configuration and has your webpack bundle loaded into the System module registry.
+يتطلب النظام modules وجود global variable `System` في browser عند تنفيذ webpack bundle. يتيح لك التجميع إلى تنسيق `System.register` إمكانية `System.import('/bundle.js')` بدون تخصيص إضافي ويتم تحميل webpack bundle في سجل النظام module.
 
 ```js
 export default {
@@ -1543,7 +1514,7 @@ System.register([], (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) => ({
 }));
 ```
 
-By adding `output.library.name` to configuration in addition to having `output.library.type` set to `system`, the output bundle will have the library name as an argument to `System.register`:
+بإضافة `output.library.name` إلى التخصيص بالإضافة إلى تعيين `output.library.type` على `system`، سيكون للـ output bundle اسم library كوسيطة لـ `System.register`:
 
 ```js
 System.register(
@@ -1557,9 +1528,9 @@ System.register(
 );
 ```
 
-#### Other Types
+#### أنواع أخرى
 
-##### type: 'jsonp'
+##### النوع: "jsonp"
 
 ```js
 export default {
@@ -1573,7 +1544,7 @@ export default {
 };
 ```
 
-This will wrap the return value of your entry point into a jsonp wrapper.
+سيؤدي هذا إلى تغليف القيمة المرجعة لـ entry point في غلاف jsonp.
 
 {/* eslint-disable new-cap */}
 
@@ -1581,17 +1552,17 @@ This will wrap the return value of your entry point into a jsonp wrapper.
 MyLibrary(_entry_return_);
 ```
 
-The dependencies for your library will be defined by the [`externals`](/configuration/externals/) config.
+سيتم تحديد dependencies لـ library من خلال التخصيص [`externals`](/configuration/externals/).
 
-T> Read the [authoring libraries guide](/guides/author-libraries/) guide for more information on `output.library.name` as well as `output.library.type`.
+T> اقرأ دليل [دليل مكتبات التأليف](/guides/author-libraries/) لمزيد من المعلومات حول `output.library.name` بالإضافة إلى `output.library.type`.
 
 ### output.library.export
 
-Specify which export should be exposed as a library.
+حدد التصدير الذي يجب عرضه كـ library.
 
-- Type: `string | string[]`
+- النوع: `string | string[]`
 
-It is `undefined` by default, which will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using [`output.library.type: 'var'`](#type-var).
+إنه `undefined` افتراضيًا، والذي سيقوم بتصدير (مساحة الاسم) بالكامل object. توضح الأمثلة أدناه تأثير هذا التخصيص عند استخدام [`output.library.type: 'var'`](#type-var).
 
 ```js
 export default {
@@ -1605,14 +1576,14 @@ export default {
 };
 ```
 
-The default export of your entry point will be assigned to the library name:
+سيتم تعيين التصدير الافتراضي لـ entry point إلى الاسم library:
 
 ```js
-// if your entry has a default export
+// إذا كان entry الخاص بك يحتوي على تصدير افتراضي
 const MyLibrary = _entry_return_.default;
 ```
 
-You can pass an array to `output.library.export` as well, it will be interpreted as a path to a module to be assigned to the library name:
+يمكنك تمرير array إلى `output.library.export` أيضًا، وسيتم تفسيره على أنه مسار إلى module ليتم تخصيصه لاسم library:
 
 ```js
 export default {
@@ -1626,7 +1597,7 @@ export default {
 };
 ```
 
-And here's the library code:
+وإليك الكود library:
 
 ```js
 const MyLibrary = _entry_return_.default.subModule;
@@ -1634,11 +1605,11 @@ const MyLibrary = _entry_return_.default.subModule;
 
 ### output.library.auxiliaryComment
 
-Add a comment in the UMD wrapper.
+أضف تعليقًا في غلاف UMD.
 
-- Type: `string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }`
+- النوع: `string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }`
 
-To insert the same comment for each `umd` type, set `auxiliaryComment` to a string:
+لإدراج نفس التعليق لكل نوع `umd`، اضبط `auxiliaryComment` على string:
 
 ```js
 export default {
@@ -1654,30 +1625,30 @@ export default {
 };
 ```
 
-which will yield the following:
+وسينتج عنه ما يلي:
 
 ```js
 (function webpackUniversalModuleDefinition(root, factory) {
-  // Test Comment
+  // تعليق الاختبار
   if (typeof exports === "object" && typeof module === "object") {
     module.exports = factory();
   }
-  // Test Comment
+  // تعليق الاختبار
   else if (typeof define === "function" && define.amd) {
     define([], factory);
   }
-  // Test Comment
+  // تعليق الاختبار
   else if (typeof exports === "object") {
     exports.MyLibrary = factory();
   }
-  // Test Comment
+  // تعليق الاختبار
   else {
     root.MyLibrary = factory();
   }
 })(globalThis, () => _entry_return_);
 ```
 
-For fine-grained control, pass an object:
+للتحكم الدقيق، مرّر object:
 
 ```js
 export default {
@@ -1702,7 +1673,7 @@ export default {
 
 `boolean`
 
-When using `output.library.type: "umd"`, setting `output.library.umdNamedDefine` to `true` will name the AMD module of the UMD build. Otherwise, an anonymous `define` is used.
+عند استخدام `output.library.type: "umd"`، سيؤدي ضبط `output.library.umdNamedDefine` إلى `true` إلى تسمية AMD module لـ UMD build. وبخلاف ذلك، يتم استخدام `define` مجهول.
 
 ```js
 export default {
@@ -1717,7 +1688,7 @@ export default {
 };
 ```
 
-The AMD module will be:
+AMD module سيكون:
 
 ```js
 define("MyLibrary", [], factory);
@@ -1725,34 +1696,34 @@ define("MyLibrary", [], factory);
 
 ## output.libraryExport
 
-W> We might drop support for this, so prefer to use [output.library.export](#outputlibraryexport) which works the same as `libraryExport`.
+W> قد نتوقف عن دعم هذا الأمر، لذا نفضل استخدام [output.library.export](#outputlibraryexport) الذي يعمل بنفس طريقة `libraryExport`.
 
 `string` `[string]`
 
-Configure which module or modules will be exposed via the `libraryTarget`. It is `undefined` by default, same behaviour will be applied if you set `libraryTarget` to an empty string e.g. `''` it will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using `libraryTarget: 'var'`.
+قم بتخصيص module أو modules الذي سيتم عرضه عبر `libraryTarget`. إنه `undefined` بشكل افتراضي، وسيتم تطبيق نفس السلوك إذا قمت بتعيين `libraryTarget` إلى string فارغ، على سبيل المثال، `''` سيتم تصدير (مساحة الاسم) بالكامل object. توضح الأمثلة أدناه تأثير هذا التخصيص عند استخدام `libraryTarget: 'var'`.
 
-The following configurations are supported:
+يتم دعم التخصيصات التالية:
 
-`libraryExport: 'default'` - The **default export of your entry point** will be assigned to the library target:
+`libraryExport: 'default'` - سيتم تعيين **التصدير الافتراضي لـ entry point** إلى library target:
 
 ```js
-// if your entry has a default export of `MyDefaultModule`
+// إذا كان entry يحتوي على تصدير افتراضي لـ `MyDefaultModule`
 const MyDefaultModule = _entry_return_.default;
 ```
 
-`libraryExport: 'MyModule'` - The **specified module** will be assigned to the library target:
+`libraryExport: 'MyModule'` - سيتم تعيين **module** المحدد إلى library target:
 
 ```js
 const { MyModule } = _entry_return_;
 ```
 
-`libraryExport: ['MyModule', 'MySubModule']` - The array is interpreted as a **path to a module** to be assigned to the library target:
+`libraryExport: ['MyModule', 'MySubModule']` - يتم تفسير array على أنه **مسار إلى module** ليتم تخصيصه إلى library target:
 
 ```js
 const { MySubModule } = _entry_return_.MyModule;
 ```
 
-With the `libraryExport` configurations specified above, the resulting libraries could be utilized as such:
+مع تخصيصات `libraryExport` المحددة أعلاه، يمكن استخدام المكتبات الناتجة على هذا النحو:
 
 ```js
 MyDefaultModule.doSomething();
@@ -1764,72 +1735,72 @@ MySubModule.doSomething();
 
 `string = 'var'`
 
-W> Please use [`output.library.type`](#outputlibrarytype) instead as we might drop support for `output.libraryTarget` in the future.
+W> الرجاء استخدام [`output.library.type`](#outputlibrarytype) بدلاً من ذلك لأننا قد نتوقف عن دعم `output.libraryTarget` في المستقبل.
 
-Configure how the library will be exposed. Any one of the following options can be used. Please note that this option works in conjunction with the value assigned to [`output.library`](#outputlibrary). For the following examples, it is assumed that the value of [`output.library`](#outputlibrary) is configured as `MyLibrary`.
+قم بتخصيص كيفية عرض library. يمكن استخدام أي من الخيارات التالية. يرجى ملاحظة أن هذا الخيار يعمل مع القيمة المخصصة لـ [`output.library`](#outputlibrary). بالنسبة للأمثلة التالية، من المفترض أن قيمة [`output.library`](#outputlibrary) تم تخصيصها كـ `MyLibrary`.
 
-T> Note that `_entry_return_` in the example code below is the value returned by the entry point. In the bundle itself, it is the output of the function that is generated by webpack from the entry point.
+T> لاحظ أن `_entry_return_` في رمز المثال أدناه هي القيمة التي يتم إرجاعها بواسطة entry point. في bundle نفسه، يتم إنشاء output لـ function بواسطة webpack من entry point.
 
-### Expose a Variable
+### فضح متغير
 
-These options assign the return value of the entry point (e.g. whatever the entry point exported) to the name provided by [`output.library`](#outputlibrary) at whatever scope the bundle was included at.
+تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى الاسم المقدم بواسطة [`output.library`](#outputlibrary) في أي نطاق تم تضمين bundle فيه.
 
-#### libraryTarget: 'var'
+#### libraryTarget: "فار"
 
-W> Prefer to use [`output.library.type: 'var'`](#type-var).
+W> يُفضل استخدام [`output.library.type: 'var'`](#type-var).
 
-When your library is loaded, the **return value of your entry point** will be assigned to a variable:
+عندما يتم تحميل library، سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى متغير:
 
 ```js
 const MyLibrary = _entry_return_;
 
-// In a separate script...
+// في نص منفصل...
 MyLibrary.doSomething();
 ```
 
-#### libraryTarget: 'assign'
+#### libraryTarget: "تعيين"
 
-W> Prefer to use [`output.library.type: 'assign'`](#type-assign).
+W> يُفضل استخدام [`output.library.type: 'assign'`](#type-assign).
 
-This will generate an implied global which has the potential to reassign an existing value (use with caution):
+سيؤدي هذا إلى إنشاء عمومية ضمنية لديها القدرة على إعادة تعيين قيمة موجودة (استخدمها بحذر):
 
 ```js
 MyLibrary = _entry_return_;
 ```
 
-Be aware that if `MyLibrary` isn't defined earlier your library will be set in the global scope.
+انتبه إلى أنه إذا لم يتم تعريف `MyLibrary` مسبقًا، فسيتم تعيين library في النطاق العام.
 
-#### libraryTarget: 'assign-properties'
+#### libraryTarget: 'تعيين الخصائص'
 
 <Badge text="5.16.0+" />
 
-W> Prefer to use [output.library.type: 'assign-properties'`](#type-assign-properties).
+W> يُفضل استخدام [output.library.type: 'تعيين الخصائص''](#type-assign-properties).
 
-Copy the return value to a target object if it exists, otherwise create the target object first:
+انسخ القيمة المرجعة إلى target object إذا كانت موجودة، وإلا قم بإنشاء target object أولاً:
 
 ```js
-// create the target object if it doesn't exist
+// أنشئ target object إذا لم يكن موجودًا
 MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary;
-// then copy the return value to MyLibrary
-// similarly to what Object.assign does
+// ثم انسخ القيمة المرجعة إلى MyLibrary
+// بشكل مشابه لما يفعله Object.assistant
 
-// for instance, you export a `hello` function in your entry as follow
+// على سبيل المثال، يمكنك تصدير `hello` function في entry الخاص بك على النحو التالي
 export function hello(name) {
   console.log(`Hello ${name}`);
 }
 
-// In another script running MyLibrary
-// you can run `hello` function like so
+// في برنامج نصي آخر يقوم بتشغيل MyLibrary
+// يمكنك تشغيل `hello` function بهذه الطريقة
 MyLibrary.hello("World");
 ```
 
-W> An empty string for the [`output.library`](#outputlibrary) is invalid, make sure you specify a valid identifier that could be assigned.
+W> إن string الفارغ لـ [`output.library`](#outputlibrary) غير صالح، تأكد من تحديد معرف صالح يمكن تعيينه.
 
-### Expose Via Object Assignment
+### فضح عبر Object المهمة
 
-These options assign the return value of the entry point (e.g. whatever the entry point exported) to a specific object under the name defined by `output.library`.
+تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى object محدد تحت الاسم المحدد بواسطة `output.library`.
 
-If `output.library` is not assigned a non-empty string, the default behavior is that all properties returned by the entry point will be assigned to the object as defined for the particular `output.libraryTarget`, via the following code fragment:
+إذا لم يتم تعيين `output.library` إلى string غير فارغ، فإن السلوك الافتراضي هو أن جميع الخصائص التي يتم إرجاعها بواسطة entry point سيتم تعيينها إلى object كما هو محدد لـ `output.libraryTarget` المعين، عبر جزء التعليمات البرمجية التالي:
 
 ```js
 (function (e, a) {
@@ -1839,27 +1810,27 @@ If `output.library` is not assigned a non-empty string, the default behavior is
 })(output.libraryTarget, _entry_return_);
 ```
 
-W> Note that not setting a `output.library` will cause all properties returned by the entry point to be assigned to the given object; there are no checks against existing property names.
+W> لاحظ أن عدم تعيين `output.library` سيؤدي إلى تعيين جميع الخصائص التي يتم إرجاعها بواسطة entry point إلى object المحدد؛ لا توجد عمليات فحص ضد أسماء الممتلكات الموجودة.
 
-#### libraryTarget: 'this'
+#### libraryTarget: "هذا"
 
-W> Prefer to use [`output.library.type: 'this'`](#type-this).
+W> يُفضل استخدام [`output.library.type: 'this'`](#type-this).
 
-The **return value of your entry point** will be assigned to this under the property named by `output.library`. The meaning of `this` is up to you:
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى هذا ضمن الخاصية المسماة بواسطة `output.library`. معنى `this` متروك لك:
 
 ```js
 this.MyLibrary = _entry_return_;
 
-// In a separate script...
+// في نص منفصل...
 this.MyLibrary.doSomething();
 MyLibrary.doSomething(); // if this is window
 ```
 
-#### libraryTarget: 'window'
+#### libraryTarget: "نافذة"
 
-W> Prefer to use [`output.library.type: 'window'`](#type-window).
+W> يُفضل استخدام [`output.library.type: 'window'`](#type-window).
 
-The **return value of your entry point** will be assigned to the `window` object using the `output.library` value.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `window` object باستخدام القيمة `output.library`.
 
 ```js
 globalThis.MyLibrary = _entry_return_;
@@ -1867,11 +1838,11 @@ globalThis.MyLibrary = _entry_return_;
 globalThis.MyLibrary.doSomething();
 ```
 
-#### libraryTarget: 'global'
+#### libraryTarget: "عالمي"
 
-W> Prefer to use [`output.library.type: 'global'`](#type-global).
+W> يُفضل استخدام [`output.library.type: 'global'`](#type-global).
 
-The **return value of your entry point** will be assigned to the `global` object using the `output.library` value.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `global` object باستخدام القيمة `output.library`.
 
 ```js
 globalThis.MyLibrary = _entry_return_;
@@ -1881,9 +1852,9 @@ globalThis.MyLibrary.doSomething();
 
 #### libraryTarget: 'commonjs'
 
-W> Prefer to use [`output.library.type: 'commonjs'`](#type-commonjs).
+W> يُفضل استخدام [`output.library.type: 'commonjs'`](#type-commonjs).
 
-The **return value of your entry point** will be assigned to the `exports` object using the `output.library` value. As the name implies, this is used in CommonJS environments.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `exports` object باستخدام القيمة `output.library`. كما يوحي الاسم، يتم استخدام هذا في بيئات CommonJS.
 
 ```js
 exports.MyLibrary = _entry_return_;
@@ -1891,23 +1862,23 @@ exports.MyLibrary = _entry_return_;
 require("MyLibrary").doSomething();
 ```
 
-### Module Definition Systems
+### Module أنظمة التعريف
 
-These options will result in a bundle that comes with a complete header to ensure compatibility with various module systems. The `output.library` option will take on a different meaning under the following `output.libraryTarget` options.
+ستؤدي هذه الخيارات إلى bundle الذي يأتي مع رأس كامل لضمان التوافق مع أنظمة module المختلفة. سيأخذ خيار `output.library` معنى مختلفًا ضمن خيارات `output.libraryTarget` التالية.
 
 #### libraryTarget: 'module'
 
-W> Prefer to use [`output.library.type: 'module'`](#type-module).
+W> يُفضل استخدام [`output.library.type: 'module'`](#type-module).
 
-Output ES Module. Make sure to enable [experiments.outputModule](/configuration/experiments/) beforehand.
+Output كـ ES module. تأكد من تمكين [experiments.outputModule](/configuration/experiments/) مسبقًا.
 
-Note that this feature is not fully supported yet, please track the progress in [this thread](https://github.com/webpack/webpack/issues/2933#issuecomment-774253975).
+لاحظ أن هذه الميزة غير مدعومة بشكل كامل حتى الآن، يرجى تتبع التقدم في [هذا الموضوع](https://github.com/webpack/webpack/issues/2933#issuecomment-774253975).
 
 #### libraryTarget: 'commonjs2'
 
-W> Prefer to use [`output.library.type: 'commonjs2'`](#type-commonjs2).
+W> يُفضل استخدام [`output.library.type: 'commonjs2'`](#type-commonjs2).
 
-The **return value of your entry point** will be assigned to the `module.exports`. As the name implies, this is used in CommonJS environments:
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `module.exports`. كما يوحي الاسم، يُستخدم هذا في بيئات CommonJS:
 
 ```js
 export default _entry_return_;
@@ -1915,19 +1886,19 @@ export default _entry_return_;
 require("MyLibrary").doSomething();
 ```
 
-Note that `output.library` can't be used with this particular `output.libraryTarget`, for further details, please [read this issue](https://github.com/webpack/webpack/issues/11800).
+لاحظ أنه لا يمكن استخدام `output.library` مع هذا `output.libraryTarget` بالتحديد، لمزيد من التفاصيل، يرجى [قراءة هذه المشكلة](https://github.com/webpack/webpack/issues/11800).
 
-T> Wondering the difference between CommonJS and CommonJS2 is? While they are similar, there are some subtle differences between them that are not usually relevant in the context of webpack. (For further details, please [read this issue](https://github.com/webpack/webpack/issues/1114).)
+T> هل تتساءل عن الفرق بين CommonJS وCommonJS2؟ على الرغم من أنها متشابهة، إلا أن هناك بعض الاختلافات الدقيقة بينهما والتي لا تكون ذات صلة عادةً بسياق webpack. (لمزيد من التفاصيل، يرجى [قراءة هذا العدد](https://github.com/webpack/webpack/issues/1114).)
 
-#### libraryTarget: 'amd'
+#### libraryTarget: 'أمد'
 
-W> Prefer to use [`output.library.type: 'amd'`](#type-amd).
+W> يُفضل استخدام [`output.library.type: 'amd'`](#type-amd).
 
-This will expose your library as an AMD module.
+سيؤدي هذا إلى كشف library باعتباره AMD module.
 
-AMD modules require that the entry chunk (e.g. the first script loaded by the `<script>` tag) be defined with specific properties, such as to `define` and `require` which is typically provided by RequireJS or any compatible loaders (such as almond). Otherwise, loading the resulting AMD bundle directly will result in an error like `define is not defined`.
+AMD modules يتطلب تعريف entry chunk (على سبيل المثال، أول script الذي تم تحميله بواسطة علامة `<script>`) بخصائص محددة، مثل `define` و`require` والتي يتم توفيرها عادةً بواسطة RequireJS أو أي loaders متوافق (مثل almond). وإلا فإن تحميل AMD bundle الناتج مباشرة سيؤدي إلى خطأ مثل `define is not defined`.
 
-With the following configuration...
+بالتخصيص التالي...
 
 ```js
 export default {
@@ -1939,45 +1910,45 @@ export default {
 };
 ```
 
-The generated output will be defined with the name "MyLibrary", i.e.
+سيتم تعريف output الذي تم إنشاؤه بالاسم "MyLibrary"، أي.
 
 ```js
 define("MyLibrary", [], () => _entry_return_);
 ```
 
-The bundle can be included as part of a script tag, and the bundle can be invoked like so:
+يمكن تضمين bundle كجزء من `<script>` tag، ويمكن استدعاء bundle كما يلي:
 
 ```js
 require(["MyLibrary"], (MyLibrary) => {
-  // Do something with the library...
+  // افعل شيئًا باستخدام library...
 });
 ```
 
-If `output.library` is undefined, the following is generated instead.
+إذا كان `output.library` غير محدد، فسيتم إنشاء ما يلي بدلاً من ذلك.
 
 ```js
 define([], () => _entry_return_);
 ```
 
-This bundle will not work as expected, or not work at all (in the case of the almond loader) if loaded directly with a `<script>` tag. It will only work through a RequireJS compatible asynchronous module loader through the actual path to that file, so in this case, the `output.path` and `output.filename` may become important for this particular setup if these are exposed directly on the server.
+لن يعمل bundle كما هو متوقع، أو لن يعمل على الإطلاق (في حالة almond loader) إذا تم تحميله مباشرة بعلامة `<script>`. سيعمل فقط من خلال RequireJS غير المتزامن المتوافق module loader من خلال المسار الفعلي لهذا الملف، لذلك في هذه الحالة، قد يصبح `output.path` و`output.filename` مهمًا لهذا الإعداد المحدد إذا تم عرضهما مباشرة على server.
 
-#### libraryTarget: 'amd-require'
+#### libraryTarget: "يتطلب AMD"
 
-W> Prefer to use [`output.library.type: 'amd-require'`](#type-amd-require).
+W> يُفضل استخدام [`output.library.type: 'amd-require'`](#type-amd-require).
 
-This packages your output with an immediately executed AMD `require(dependencies, factory)` wrapper.
+هذا packages الخاص بك output مع غلاف AMD `require(dependencies, factory)` الذي تم تنفيذه على الفور.
 
-The `'amd-require'` target allows for the use of AMD dependencies without needing a separate later invocation. As with the `'amd'` target, this depends on the appropriate [`require` function](https://github.com/amdjs/amdjs-api/blob/master/require.md) being available in the environment in which the webpack output is loaded.
+يسمح `'amd-require'` target باستخدام AMD dependencies دون الحاجة إلى استدعاء لاحق منفصل. كما هو الحال مع `'amd'` target، يعتمد هذا على توفر [`require` function](https://github.com/amdjs/amdjs-api/blob/master/require.md) المناسب في البيئة التي يتم فيها تحميل webpack output.
 
-With this target, the library name is ignored.
+مع هذا target، يتم تجاهل الاسم library.
 
-#### libraryTarget: 'umd'
+#### libraryTarget: "أومد"
 
-W> Prefer to use [`output.library.type: 'umd'`](#type-umd).
+W> يُفضل استخدام [`output.library.type: 'umd'`](#type-umd).
 
-This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as a global variable. Take a look at the [UMD Repository](https://github.com/umdjs/umd) to learn more.
+يؤدي هذا إلى كشف library الخاص بك تحت جميع تعريفات module، مما يسمح له بالعمل مع CommonJS، AMD وكمتغير عام. ألقِ نظرة على [UMD المستودع](https://github.com/umdjs/umd) لمعرفة المزيد.
 
-In this case, you need the `library` property to name your module:
+في هذه الحالة، أنت بحاجة إلى الخاصية `library` لتسمية module الخاص بك:
 
 ```js
 export default {
@@ -1989,7 +1960,7 @@ export default {
 };
 ```
 
-And finally the output is:
+وأخيرًا output هو:
 
 ```js
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -2008,7 +1979,7 @@ And finally the output is:
 );
 ```
 
-Note that omitting the `library` will result in the assignment of all properties returned by the entry point be assigned directly to the root object, as documented under the [object assignment section](#expose-via-object-assignment). Example:
+لاحظ أن حذف `library` سيؤدي إلى تعيين كافة الخصائص التي يتم إرجاعها بواسطة entry point مباشرةً إلى الجذر object، كما هو موثق ضمن [object قسم التعيين](#expose-via-object-assignment). مثال:
 
 ```js
 export default {
@@ -2019,7 +1990,7 @@ export default {
 };
 ```
 
-The output will be:
+سيكون output:
 
 ```js
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -2037,7 +2008,7 @@ The output will be:
 );
 ```
 
-Since webpack 3.1.0, you may specify an object for `library` for differing names per targets:
+منذ webpack 3.1.0، يمكنك تحديد object لـ `library` للأسماء المختلفة لكل targets:
 
 ```js
 export default {
@@ -2053,13 +2024,13 @@ export default {
 };
 ```
 
-#### libraryTarget: 'system'
+#### libraryTarget: "النظام"
 
-W> Prefer to use [`output.library.type: 'system'`](#type-system).
+W> يُفضل استخدام [`output.library.type: 'system'`](#type-system).
 
-This will expose your library as a [`System.register`](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md) module. This feature was first released in [webpack 4.30.0](https://github.com/webpack/webpack/releases/tag/v4.30.0).
+سيؤدي هذا إلى كشف library كـ [`System.register`](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md) module. تم إصدار هذه الميزة لأول مرة في [webpack 4.30.0](https://github.com/webpack/webpack/releases/tag/v4.30.0).
 
-System modules require that a global variable `System` is present in the browser when the webpack bundle is executed. Compiling to `System.register` format allows you to `System.import('/bundle.js')` without additional configuration and has your webpack bundle loaded into the System module registry.
+يتطلب النظام modules وجود global variable `System` في browser عند تنفيذ webpack bundle. يتيح لك التجميع إلى تنسيق `System.register` إمكانية `System.import('/bundle.js')` بدون تخصيص إضافي ويتم تحميل webpack bundle في سجل النظام module.
 
 ```js
 export default {
@@ -2081,7 +2052,7 @@ System.register([], (_export) => ({
 }));
 ```
 
-By adding `output.library` to configuration in addition to having `output.libraryTarget` set to `system`, the output bundle will have the library name as an argument to `System.register`:
+بإضافة `output.library` إلى التخصيص بالإضافة إلى تعيين `output.libraryTarget` على `system`، سيكون للـ output bundle اسم library كوسيطة لـ `System.register`:
 
 ```js
 System.register("my-library", [], (_export) => ({
@@ -2092,25 +2063,25 @@ System.register("my-library", [], (_export) => ({
 }));
 ```
 
-You can access [SystemJS context](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md#format-definition) via `__system_context__`:
+يمكنك الوصول إلى [SystemJS السياق](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md#format-definition) عبر `__system_context__`:
 
 ```js
-// Log the URL of the current SystemJS module
+// قم بتسجيل عنوان URL الحالي SystemJS module
 console.log(__system_context__.meta.url);
 
-// Import a SystemJS module, with the current SystemJS module's url as the parentUrl
+// قم باستيراد SystemJS module، باستخدام عنوان URL الحالي لـ SystemJS module باعتباره الأصل
 __system_context__.import("./other-file.js").then((m) => {
   console.log(m);
 });
 ```
 
-### Other Targets
+### أخرى Targets
 
 #### libraryTarget: 'jsonp'
 
-W> Prefer to use [`output.library.type: 'jsonp'`](#type-jsonp).
+W> يُفضل استخدام [`output.library.type: 'jsonp'`](#type-jsonp).
 
-This will wrap the return value of your entry point into a jsonp wrapper.
+سيؤدي هذا إلى تغليف القيمة المرجعة لـ entry point في غلاف jsonp.
 
 {/* eslint-disable new-cap */}
 
@@ -2118,17 +2089,17 @@ This will wrap the return value of your entry point into a jsonp wrapper.
 MyLibrary(_entry_return_);
 ```
 
-The dependencies for your library will be defined by the [`externals`](/configuration/externals/) config.
+سيتم تحديد dependencies لـ library من خلال التخصيص [`externals`](/configuration/externals/).
 
 ## output.module
 
 `boolean = false`
 
-Output JavaScript files as module type. Disabled by default as it's an experimental feature.
+Output JavaScript الملفات كنوع module. يتم تعطيله افتراضيًا لأنه ميزة تجريبية.
 
-When enabled, webpack will set [`output.iife`](#outputiife) to `false`, [`output.scriptType`](#outputscripttype) to `'module'` and `minimizerOptions.module` to `true` internally.
+عند التمكين، سيقوم webpack بتعيين [`output.iife`](#outputiife) إلى `false`، [`output.scriptType`](#outputscripttype) إلى `'module'` و`minimizerOptions.module` إلى `true` داخليًا.
 
-If you're using webpack to compile a library to be consumed by others, make sure to set [`output.libraryTarget`](#librarytarget-module) to `'module'` when `output.module` is `true`.
+إذا كنت تستخدم webpack لتجميع library ليستهلكه الآخرون، فتأكد من ضبط [`output.libraryTarget`](#librarytarget-module) على `'module'` عندما يكون `output.module` هو `true`.
 
 ```js
 export default {
@@ -2142,13 +2113,13 @@ export default {
 };
 ```
 
-W> `output.module` is an experimental feature and can only be enabled by setting [`experiments.outputModule`](/configuration/experiments/#experiments) to `true`. [One of the known problems](https://github.com/webpack/webpack/issues/11277#issuecomment-992565287) is that such a library can't be consumed by webpack4-based (and possibly other too) applications.
+W> `output.module` هي ميزة تجريبية ولا يمكن تمكينها إلا عن طريق ضبط [`experiments.outputModule`](/configuration/experiments/#experiments) على `true`. [إحدى المشكلات المعروفة](https://github.com/webpack/webpack/issues/11277#issuecomment-992565287) هي أن مثل هذا library لا يمكن استهلاكه بواسطة التطبيقات المستندة إلى webpack4 (وربما تطبيقات أخرى أيضًا).
 
 ## output.path
 
 `string = path.join(process.cwd(), 'dist')`
 
-The output directory as an **absolute** path.
+الدليل output كمسار **مطلق**.
 
 **webpack.config.js**
 
@@ -2167,25 +2138,25 @@ export default {
 };
 ```
 
-Note that `[fullhash]` in this parameter will be replaced with a hash of the compilation. See the [Caching guide](/guides/caching/) for details.
+لاحظ أنه سيتم استبدال `[fullhash]` في هذه المعلمة بـ hash من compilation. راجع [Caching الدليل](/guides/caching/) للحصول على التفاصيل.
 
-W> The path must not contain an exclamation mark (`!`) as it is reserved by webpack for [loader syntax](/concepts/loaders/#inline).
+W> يجب ألا يحتوي المسار على علامة تعجب (`!`) لأنه محجوز بواسطة webpack لـ [loader بناء الجملة](/concepts/loaders/#inline).
 
 ## output.pathinfo
 
 `boolean` `string: 'verbose'`
 
-Tells webpack to include comments in bundles with information about the contained modules. `'verbose'` shows more information like exports, runtime requirements and bailouts.
+يخبر webpack بتضمين التعليقات في bundles مع معلومات حول المحتوى المتضمن modules. يعرض `'verbose'` مزيدًا من المعلومات مثل الصادرات ومتطلبات runtime وعمليات الإنقاذ.
 
-The default value of `output.pathinfo` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `output.pathinfo` على [`mode`](/configuration/mode/):
 
-| Mode            | Default |
+| Mode            | الافتراضي |
 | --------------- | ------- |
-| `"production"`  | `false` |
-| `"development"` | `true`  |
-| `"none"`        | `false` |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `false` |
 
-W> While the data these comments can provide is useful during development when reading the generated code, it **should not** be used in production.
+W> على الرغم من أن البيانات التي يمكن أن توفرها هذه التعليقات مفيدة أثناء التطوير عند قراءة التعليمات البرمجية التي تم إنشاؤها، إلا أنه **لا**** يجب استخدامها في الإنتاج.
 
 **webpack.config.js**
 
@@ -2198,23 +2169,23 @@ export default {
 };
 ```
 
-T> It also adds some info about tree shaking to the generated bundle.
+T> كما أنه يضيف بعض المعلومات حول اهتزاز الشجرة إلى bundle الذي تم إنشاؤه.
 
 ## output.publicPath
 
-- Type:
+- النوع:
   - `function`
   - `string`
 
-    `output.publicPath` defaults to `'auto'` with `web` and `web-worker` targets, see [this guide](/guides/public-path/#automatic-publicpath) for its use cases.
+الإعدادات الافتراضية لـ `output.publicPath` هي `'auto'` مع `web` و`web-worker` targets، راجع [هذا الدليل](/guides/public-path/#automatic-publicpath) للتعرف على حالات الاستخدام الخاصة به.
 
-This is an important option when using on-demand-loading or loading external resources like images, files, etc. If an incorrect value is specified you'll receive 404 errors while loading these resources.
+يعد هذا خيارًا مهمًا عند استخدام التحميل حسب الطلب أو تحميل موارد external مثل الصور والملفات وما إلى ذلك. إذا تم تحديد قيمة غير صحيحة، فستتلقى أخطاء 404 أثناء تحميل هذه الموارد.
 
-This option specifies the **public URL** of the output directory when referenced in a browser. A relative URL is resolved relative to the HTML page (or `<base>` tag). Server-relative URLs, protocol-relative URLs or absolute URLs are also possible and sometimes required, i. e. when hosting assets on a CDN.
+يحدد هذا الخيار **عنوان URL العام** للدليل output عند الإشارة إليه في browser. يتم حل عنوان URL النسبي بالنسبة إلى صفحة HTML (أو علامة `<base>`). Server-عناوين URL النسبية أو عناوين URL ذات الصلة بالبروتوكول أو عناوين URL المطلقة ممكنة أيضًا ومطلوبة في بعض الأحيان، مثلاً عند استضافة assets على CDN.
 
-The value of the option is prefixed to every URL created by the runtime or loaders. Because of this **the value of this option ends with `/`** in most cases.
+تكون قيمة الخيار مسبوقة بكل عنوان URL تم إنشاؤه بواسطة runtime أو loaders. ولهذا السبب **تنتهي قيمة هذا الخيار بـ `/`** في معظم الحالات.
 
-A rule to consider: The URL of your [`output.path`](#outputpath) from the view of the HTML page.
+قاعدة يجب مراعاتها: عنوان URL الخاص بـ [`output.path`](#outputpath) من عرض صفحة HTML.
 
 **webpack.config.js**
 
@@ -2234,7 +2205,7 @@ export default {
 };
 ```
 
-For this configuration:
+لهذا التخصيص:
 
 **webpack.config.js**
 
@@ -2248,31 +2219,31 @@ export default {
 };
 ```
 
-A request to a chunk will look like `/assets/4.chunk.js`.
+سيبدو الطلب إلى chunk بالشكل `/assets/4.chunk.js`.
 
-A loader outputting HTML might emit something like this:
+قد يُصدر إخراج loader HTML شيئًا مثل هذا:
 
 ```html
 <link href="/assets/spinner.gif" />
 ```
 
-or when loading an image in CSS:
+أو عند تحميل صورة في CSS:
 
 ```css
 background-image: url(/assets/spinner.gif);
 ```
 
-The webpack-dev-server also takes a hint from `publicPath`, using it to determine where to serve the output files from.
+يأخذ webpack-dev-server أيضًا تلميحًا من `publicPath`، ويستخدمه لتحديد مكان خدمة ملفات output منه.
 
-Note that `[fullhash]` in this parameter will be replaced with a hash of the compilation. See the [Caching guide](/guides/caching) for details.
+لاحظ أنه سيتم استبدال `[fullhash]` في هذه المعلمة بـ hash من compilation. راجع [Caching الدليل](/guides/caching) للحصول على التفاصيل.
 
-Examples (one of the below):
+أمثلة (واحد مما يلي):
 
 ```js
 export default {
   // ...
   output: {
-    // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.
+    // فهو يحدد تلقائيًا المسار العام من `import.meta.url` أو `document.currentScript` أو `<script />` أو `self.location`.
     publicPath: "auto",
   },
 };
@@ -2282,7 +2253,7 @@ export default {
 export default {
   // ...
   output: {
-    // CDN (always HTTPS)
+    // CDN (HTTPS دائمًا)
     publicPath: "https://cdn.example.com/assets/",
   },
 };
@@ -2292,7 +2263,7 @@ export default {
 export default {
   // ...
   output: {
-    // CDN (same protocol)
+    // CDN (نفس البروتوكول)
     publicPath: "//cdn.example.com/assets/",
   },
 };
@@ -2302,7 +2273,7 @@ export default {
 export default {
   // ...
   output: {
-    // server-relative
+    // server-نسبي
     publicPath: "/assets/", // server-relative
   },
 };
@@ -2312,7 +2283,7 @@ export default {
 export default {
   // ...
   output: {
-    // relative to HTML page
+    // نسبة إلى صفحة HTML
     publicPath: "assets/",
   },
 };
@@ -2322,7 +2293,7 @@ export default {
 export default {
   // ...
   output: {
-    // relative to HTML page
+    // نسبة إلى صفحة HTML
     publicPath: "../assets/",
   },
 };
@@ -2332,29 +2303,29 @@ export default {
 export default {
   // ...
   output: {
-    // relative to HTML page (same directory)
+    // نسبة إلى صفحة HTML (نفس الدليل)
     publicPath: "",
   },
 };
 ```
 
-In cases where the `publicPath` of output files can't be known at compile time, it can be left blank and set dynamically at runtime in the entry file using the [free variable](https://stackoverflow.com/questions/12934929/what-are-free-variables) `__webpack_public_path__`.
+في الحالات التي لا يمكن فيها معرفة `publicPath` لملفات output في وقت الترجمة، يمكن تركها فارغة وتعيينها ديناميكيًا عند runtime في ملف entry باستخدام [المتغير الحر](https://stackoverflow.com/questions/12934929/what-are-free-variables) `__webpack_public_path__`.
 
 ```js
 __webpack_public_path__ = myRuntimePublicPath;
 
-// rest of your application entry
+// بقية طلبك entry
 ```
 
-See [this discussion](https://github.com/webpack/webpack/issues/2776#issuecomment-233208623) for more information on `__webpack_public_path__`.
+راجع [هذه المناقشة](https://github.com/webpack/webpack/issues/2776#issuecomment-233208623) لمزيد من المعلومات حول `__webpack_public_path__`.
 
 ## output.scriptType
 
 `string: 'module' | 'text/javascript'` `boolean = false`
 
-This option allows loading asynchronous chunks with a custom script type, such as `<script type="module" ...>`.
+يسمح هذا الخيار بتحميل chunks غير المتزامن بنوع برنامج نصي مخصص، مثل `<script type="module" ...>`.
 
-T> If [`output.module`](#outputmodule) is set to `true`, `output.scriptType` will default to `'module'` instead of `false`.
+T> إذا تم تعيين [`output.module`](#outputmodule) على `true`، فسيتم تعيين `output.scriptType` افتراضيًا على `'module'` بدلاً من `false`.
 
 ```js
 export default {
@@ -2369,15 +2340,15 @@ export default {
 
 `string = '[file].map[query]'`
 
-Configure how source maps are named. Only takes effect when [`devtool`](/configuration/devtool/) is set to `'source-map'`, which writes an output file.
+تخصيص كيفية تسمية Source Maps. يسري مفعوله فقط عند ضبط [`devtool`](/configuration/devtool/) على `'source-map'`، والذي يكتب ملف output.
 
-The `[name]`, `[id]`, `[fullhash]` and `[chunkhash]` substitutions from [`output.filename`](#outputfilename) can be used. In addition to those, you can use substitutions listed under Filename-level in [Template strings](/configuration/output/#template-strings).
+يمكن استخدام البدائل `[name]`، `[id]`، `[fullhash]` و`[chunkhash]` من [`output.filename`](#outputfilename). بالإضافة إلى تلك البدائل، يمكنك استخدام البدائل المدرجة ضمن مستوى اسم الملف في [سلاسل القالب](/configuration/output/#template-strings).
 
 ## output.sourcePrefix
 
 `string = ''`
 
-Change the prefix for each line in the output bundles.
+قم بتغيير البادئة لكل سطر في output bundles.
 
 **webpack.config.js**
 
@@ -2390,16 +2361,16 @@ export default {
 };
 ```
 
-T> Using some kind of indentation makes bundles look prettier, but will cause issues with multi-line strings.
+T> يؤدي استخدام نوع ما من المسافة البادئة إلى جعل bundles يبدو أجمل، ولكنه سيتسبب في حدوث مشكلات مع السلاسل متعددة الأسطر.
 
-T> Typically you don't need to change `output.sourcePrefix`.
+T> عادةً لا تحتاج إلى تغيير `output.sourcePrefix`.
 
 ## output.strictModuleErrorHandling
 
-Handle error in module loading as per EcmaScript Modules spec at a performance cost.
+تعامل مع الخطأ في تحميل module وفقًا لمواصفات ECMAScript Modules بتكلفة performance.
 
-- Type: `boolean`
-- Available: 5.25.0+
+- النوع: `boolean`
+- متاح: 5.25.0+
 
 ```js
 export default {
@@ -2412,35 +2383,35 @@ export default {
 
 ## output.strictModuleExceptionHandling
 
-W> Deprecated, use
-[`output.strictModuleErrorHandling`](#outputstrictmoduleerrorhandling) instead.
+W> إهمال، استخدام
+[`output.strictModuleErrorHandling`](#outputstrictmoduleerrorhandling) بدلاً من ذلك.
 
 `boolean = false`
 
-Tell webpack to remove a module from the module instance cache (`require.cache`) if it throws an exception when it is `require`d.
+اطلب من webpack إزالة module من مثيل module cache (`require.cache`) إذا ألقى استثناءً عندما يكون `require`d.
 
-It defaults to `false` for performance reasons.
+يتم تعيينه افتراضيًا على `false` لأسباب performance.
 
-When set to `false`, the module is not removed from cache, which results in the exception getting thrown only on the first `require` call (making it incompatible with node.js).
+عند التعيين على `false`، لا تتم إزالة module من cache، مما يؤدي إلى طرح الاستثناء فقط عند استدعاء `require` الأول (مما يجعله غير متوافق مع Node.js).
 
-For instance, consider `module.js`:
+على سبيل المثال، فكر في `module.js`:
 
 ```js
 throw new Error("error");
 ```
 
-With `strictModuleExceptionHandling` set to `false`, only the first `require` throws an exception:
+مع ضبط `strictModuleExceptionHandling` على `false`، فإن `require` الأول فقط يطرح استثناءً:
 
 ```js
-// with strictModuleExceptionHandling = false
+// مع الصارمModuleExceptionHandling = false
 require("node:module"); // <- throws
 require("node:module"); // <- doesn't throw
 ```
 
-Instead, with `strictModuleExceptionHandling` set to `true`, all `require`s of this module throw an exception:
+بدلاً من ذلك، مع تعيين `strictModuleExceptionHandling` على `true`، ستطرح جميع `require`s في module استثناءً:
 
 ```js
-// with strictModuleExceptionHandling = true
+// with الصارمModuleExceptionHandling = true
 require("node:module"); // <- throws
 require("node:module"); // <- also throws
 ```
@@ -2451,13 +2422,13 @@ require("node:module"); // <- also throws
 
 <Badge text="5.37.0+" />
 
-Controls [Trusted Types](https://web.dev/trusted-types) compatibility. When enabled, webpack will detect Trusted Types support and, if they are supported, use Trusted Types policies to create script URLs it loads dynamically. Use when the application runs under a [`require-trusted-types-for`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for) Content Security Policy directive.
+التحكم في التوافق [Trusted Types](https://web.dev/trusted-types). عند التمكين، سيكتشف webpack دعم Trusted Types، وإذا كان مدعومًا، استخدم سياسات Trusted Types لإنشاء عناوين URL للبرنامج النصي الذي يتم تحميله ديناميكيًا. يُستخدم عند تشغيل التطبيق بموجب التوجيه [`require-trusted-types-for`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for) Content Security Policy.
 
-It is disabled by default (no compatibility, script URLs are strings).
+يتم تعطيله افتراضيًا (لا يوجد توافق، عناوين URL للبرنامج النصي عبارة عن سلاسل).
 
-- When set to `true`, webpack will use [`output.uniqueName`](#outputuniquename) as the Trusted Types policy name.
-- When set to a non-empty string, its value will be used as a policy name.
-- When set to an object, the policy name is taken from the object's `policyName` property.
+- عند التعيين على `true`، سيستخدم webpack [`output.uniqueName`](#outputuniquename) كاسم السياسة Trusted Types.
+- عند التعيين على string غير فارغ، سيتم استخدام قيمته كاسم سياسة.
+- عند التعيين على object، يتم أخذ اسم السياسة من خاصية `policyName` الخاصة بـ object.
 
 **webpack.config.js**
 
@@ -2479,7 +2450,7 @@ export default {
 
 <Badge text="5.82.0+" />
 
-Determine whether to proceed with loading in anticipation that [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for) has not been enforced or to immediately fail when the call to `trustedTypes.createPolicy(...)` fails due to the policy name being absent from the CSP `trusted-types` list or being a duplicate.
+حدد ما إذا كنت تريد متابعة التحميل تحسبًا لعدم فرض [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for) أو الفشل فورًا عند فشل استدعاء `trustedTypes.createPolicy(...)` بسبب غياب اسم السياسة من قائمة CSP `trusted-types` أو كونه مكررًا.
 
 ```js
 export default {
@@ -2496,11 +2467,11 @@ export default {
 
 ## output.umdNamedDefine
 
-W> Prefer to use [`output.library.umdNamedDefine`](#outputlibraryumdnameddefine) instead.
+W> يُفضل استخدام [`output.library.umdNamedDefine`](#outputlibraryumdnameddefine) بدلاً من ذلك.
 
 `boolean`
 
-When using `libraryTarget: "umd"`, setting `output.umdNamedDefine` to `true` will name the AMD module of the UMD build. Otherwise an anonymous `define` is used.
+عند استخدام `libraryTarget: "umd"`، سيؤدي ضبط `output.umdNamedDefine` إلى `true` إلى تسمية AMD module لـ UMD build. وإلا فسيتم استخدام `define` مجهول.
 
 ```js
 export default {
@@ -2515,9 +2486,9 @@ export default {
 
 `string`
 
-A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to [`output.library`](/configuration/output/#outputlibrary) name or the package name from `package.json` in the context, if both aren't found, it is set to an `''`.
+اسم فريد لـ webpack build لتجنب تعارض أوقات تشغيل webpack المتعددة عند استخدام العناصر العالمية. يتم تعيينه افتراضيًا على اسم [`output.library`](/configuration/output/#outputlibrary) أو اسم package من `package.json` في السياق، وإذا لم يتم العثور على كليهما، فسيتم تعيينه على `''`.
 
-`output.uniqueName` will be used to generate unique globals for:
+سيتم استخدام `output.uniqueName` لإنشاء عوالم فريدة من أجل:
 
 - [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal)
 
@@ -2536,12 +2507,12 @@ export default {
 
 `false` `'fetch' | 'async-node'` `string`
 
-Option to set the method of loading WebAssembly Modules. Methods included by default are `'fetch'` (web/WebWorker), `'async-node'` (Node.js), but others might be added by plugins.
+خيار لضبط طريقة التحميل WebAssembly Modules. الأساليب المضمنة افتراضيًا هي `'fetch'` (web/WebWorker)، `'async-node'` (Node.js)، ولكن يمكن إضافة طرق أخرى بواسطة plugins.
 
-The default value can be affected by different [`target`](/configuration/target/):
+يمكن أن تتأثر القيمة الافتراضية بـ [`target`](/configuration/target/) مختلفة:
 
-- Defaults to `'fetch'` if [`target`](/configuration/target/) is set to `'web'`, `'webworker'`, `'electron-renderer'` or `'node-webkit'`.
-- Defaults to `'async-node'` if [`target`](/configuration/target/) is set to `'node'`, `'async-node'`, `'electron-main'` or `'electron-preload'`.
+- الافتراضي هو `'fetch'` إذا تم ضبط [`target`](/configuration/target/) على `'web'` أو `'webworker'` أو `'electron-renderer'` أو `'node-webkit'`.
+- الافتراضي هو `'async-node'` إذا تم ضبط [`target`](/configuration/target/) على `'node'` أو `'async-node'` أو `'electron-main'` أو `'electron-preload'`.
 
 ```js
 export default {
@@ -2556,7 +2527,7 @@ export default {
 
 `string = '[hash].module.wasm'`
 
-Specifies the filename of WebAssembly modules. It should be provided as a relative path within the `output.path` directory
+يحدد اسم الملف WebAssembly modules. يجب توفيره كمسار نسبي داخل الدليل `output.path`
 
 ```js
 export default {
@@ -2571,9 +2542,9 @@ export default {
 
 `string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false`
 
-The new option `workerChunkLoading` controls the chunk loading of workers.
+يتحكم الخيار الجديد `workerChunkLoading` في تحميل chunk لـ workers.
 
-T> The default value of this option depends on the [`target`](/configuration/target/) setting. For more details, search for `"workerChunkLoading"` [in the webpack defaults](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js).
+T> تعتمد القيمة الافتراضية لهذا الخيار على الإعداد [`target`](/configuration/target/). لمزيد من التفاصيل، ابحث عن `"workerChunkLoading"` [في إعدادات webpack الافتراضية](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js).
 
 **webpack.config.js**
 
@@ -2590,7 +2561,7 @@ export default {
 
 `string`
 
-Set a public path for Worker, defaults to value of [output.publicPath](#outputpublicpath). Only use this option if your worker scripts are located in a different path from your other scripts.
+قم بتعيين مسار عام لـ Worker، القيمة الافتراضية هي [output.publicPath](#outputpublicpath). استخدم هذا الخيار فقط إذا كانت worker scripts موجودة في مسار مختلف عن البرامج النصية الأخرى.
 
 **webpack.config.js**
 
@@ -2607,7 +2578,7 @@ export default {
 
 `false` `'fetch-streaming' | 'fetch' | 'async-node'` `string`
 
-Option to set the method of loading WebAssembly Modules in workers, defaults to the value of [output.wasmLoading](#outputwasmloading).
+خيار لضبط طريقة التحميل WebAssembly Modules في workers، القيمة الافتراضية هي [output.wasmLoading](#outputwasmloading).
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/performance.mdx b/src/content/configuration/performance.mdx
index 99cf19ba525f..421eeca812d0 100644
--- a/src/content/configuration/performance.mdx
+++ b/src/content/configuration/performance.mdx
@@ -2,28 +2,22 @@
 title: Performance
 sort: 21
 contributors:
-  - thelarkinn
-  - tbroadley
-  - byzyk
-  - madhavarshney
-  - EugeneHlushko
-  - shivxmsharma
+  - RlxChap2
 ---
 
-These options allows you to control how webpack notifies you of assets and entry points that exceed a specific file limit.
-This feature was inspired by the idea of [webpack Performance Budgets](https://github.com/webpack/webpack/issues/3216).
+تتيح لك هذه الخيارات التحكّم بالكيفية التي يُنبّهك بها webpack حين تتجاوز الـ assets أو نقاط الدخول حدّاً معيّناً من الحجم. وقد استوحينا هذه الميزة من فكرة [ميزانيات الأداء في webpack](https://github.com/webpack/webpack/issues/3216).
 
 ## `performance`
 
 `object`
 
-Configure how performance hints are shown. For example if you have an asset that is over 250kb, webpack will emit a warning notifying you of this.
+اضبط من هنا الطريقة التي تَظهر بها تلميحات الأداء. مثلاً، إن كان لديك asset يتجاوز 250 كيلوبايت، فإنّ webpack سيُطلق تحذيراً يُنبّهك إلى ذلك.
 
 ### performance.assetFilter
 
 `function(assetFilename) => boolean`
 
-This property allows webpack to control what files are used to calculate performance hints. The default function is:
+تمنح هذه الخاصية webpack القدرة على تحديد الملفات التي تدخل في حساب تلميحات الأداء. والدالّة الافتراضية هي:
 
 ```js
 function assetFilter(assetFilename) {
@@ -31,7 +25,7 @@ function assetFilter(assetFilename) {
 }
 ```
 
-You can override this property by passing your own function in:
+ويمكنك تجاوز هذه الخاصية بتمرير دالّتك الخاصة:
 
 ```js
 export default {
@@ -44,23 +38,23 @@ export default {
 };
 ```
 
-The example above will only give you performance hints based on `.js` files.
+في المثال السابق، لن تُعطى تلميحات الأداء إلا بناءً على ملفّات `.js` وحدها.
 
 ### performance.hints
 
 `string: 'error' | 'warning'` `boolean: false`
 
-Turns hints on/off. In addition, tells webpack to throw either an error or a warning when hints are found.
+يُفعّل التلميحات أو يُعطّلها. كذلك يُخبر webpack هل ينبغي إطلاق خطأ أم تحذير عند العثور على ما يستوجب تلميحاً.
 
-The default value of `performance.hints` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `performance.hints` على [`mode`](/configuration/mode/):
 
-| Mode            | Default     |
+| Mode            | الافتراضي    |
 | --------------- | ----------- |
-| `"production"`  | `'warning'` |
-| `"development"` | `false`     |
-| `"none"`        | `false`     |
+| `"production"` | `'warning'` |
+| `"development"` | `false` |
+| `"none"` | `false` |
 
-Given an asset is created that is over 250kb:
+لنفترض أنّ هناك asset حجمه يتعدّى 250 كيلوبايت:
 
 ```js
 export default {
@@ -71,7 +65,7 @@ export default {
 };
 ```
 
-No hint warnings or errors are shown.
+عندها لن تظهر تحذيرات ولا أخطاء.
 
 ```js
 export default {
@@ -82,7 +76,7 @@ export default {
 };
 ```
 
-A warning will be displayed notifying you of a large asset. We recommend something like this for development environments.
+سيُعرض تحذير يُنبّهك إلى أنّ هناك asset كبير الحجم. ونحن ننصح بهذا الإعداد في بيئات التطوير.
 
 ```js
 export default {
@@ -93,13 +87,13 @@ export default {
 };
 ```
 
-An error will be displayed notifying you of a large asset. We recommend using `hints: "error"` during production builds to help prevent deploying production bundles that are too large, impacting webpage performance.
+سيُعرض خطأ يُنبّهك إلى أنّ هناك asset ضخماً. ونحن نُفضّل أن تستخدم `hints: "error"` في بُنى الإنتاج، تجنّباً لنشر حزم إنتاج كبيرة الحجم تُؤثّر سلباً في أداء الصفحة.
 
 ### performance.maxAssetSize
 
 `number = 250000`
 
-An asset is any emitted file from webpack. This option controls when webpack emits a performance hint based on individual asset size in bytes.
+الـ asset هو أي ملف يُخرجه webpack. ويتحكّم هذا الخيار في اللحظة التي يُطلق فيها webpack تلميح أداء بناءً على حجم الـ asset الفردي بالبايتات.
 
 ```js
 export default {
@@ -114,7 +108,7 @@ export default {
 
 `number = 250000`
 
-An entry point represents all assets that would be utilized during initial load time for a specific entry. This option controls when webpack should emit performance hints based on the maximum entry point size in bytes.
+تُمثّل نقطة الدخول مجموع الـ assets التي ستُستخدم في وقت التحميل الأوّل لتلك النقطة بعينها. ويتحكّم هذا الخيار في اللحظة التي يُطلق فيها webpack تلميحات الأداء استناداً إلى الحدّ الأقصى لحجم نقطة الدخول بالبايتات.
 
 ```js
 export default {
diff --git a/src/content/configuration/plugins.mdx b/src/content/configuration/plugins.mdx
index f501981f5562..94b8b05b6474 100644
--- a/src/content/configuration/plugins.mdx
+++ b/src/content/configuration/plugins.mdx
@@ -2,23 +2,18 @@
 title: Plugins
 sort: 10
 contributors:
-  - sokra
-  - skipjack
-  - yatharthk
-  - byzyk
-  - EugeneHlushko
-  - snitin315
+  - RlxChap2
 ---
 
-The `plugins` option is used to customize the webpack build process in a variety of ways. Webpack comes with a variety built-in plugins available under `webpack.[plugin-name]`. See [Plugins page](/plugins) for a list of plugins and documentation but note that there are a lot more out in the community.
+يُستعمل الخيار `plugins` لتطويع عملية البناء في webpack وتشكيلها بطرق متعدّدة. ويأتي webpack مزوَّداً بمجموعة من الـ plugins المدمجة التي يمكن الوصول إليها عبر `webpack.[plugin-name]`. اطّلع على [صفحة Plugins](/plugins) لتجد قائمة بها مع توثيقها، مع ملاحظة أنّ هناك الكثير منها متاحاً ضمن مجتمع webpack.
 
-T> Note: This page only discusses using plugins, however if you are interested in writing your own please visit [Writing a Plugin](/contribute/writing-a-plugin/).
+T> ملاحظة: هذه الصفحة لا تتناول سوى كيفية استخدام الـ plugins، فإن كنت ترغب بكتابة plugin خاص بك فعُد إلى [كتابة Plugin](/contribute/writing-a-plugin/).
 
 ## plugins
 
 [`[Plugin]`](/plugins/)
 
-An array of webpack plugins. For example, [`DefinePlugin`](/plugins/define-plugin/) allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds. Starting with webpack 5.87.0 falsy values can be used to disable specific plugins conditionally.
+مصفوفة من plugins خاصة بـ webpack. فمثلاً، يتيح لك [`DefinePlugin`](/plugins/define-plugin/) إنشاء ثوابت عالمية يمكن ضبطها أثناء التصريف، وهو ما يُفيدك حين تريد سلوكاً مختلفاً بين بُنى التطوير وبُنى الإصدار. ومنذ webpack 5.87.0، صار بإمكانك استخدام القيم الكاذبة (falsy) لتعطيل plugins بعينها وفق شروط معيّنة.
 
 **webpack.config.js**
 
@@ -29,32 +24,32 @@ export default {
   // ...
   plugins: [
     new webpack.DefinePlugin({
-      // Definitions...
+      // التعريفات...
     }),
-    false && new webpack.IgnorePlugin(), // disabled conditionally
+    false && new webpack.IgnorePlugin(), // مُعطَّل وفق شرط
   ],
 };
 ```
 
-A more complex example, using multiple plugins, might look something like this:
+وفيما يلي مثال أكثر تركيباً يستخدم عدّة plugins:
 
 **webpack.config.js**
 
 ```js
 import webpack from "webpack";
-// importing plugins that do not come by default in webpack
+// استيراد plugins ليست مرفقة افتراضياً مع webpack
 import DashboardPlugin from "webpack-dashboard/plugin";
 
-// adding plugins to your configuration
+// إضافة plugins إلى تخصيصك
 export default {
   // ...
   plugins: [
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    // compile time plugins
+    // plugins تعمل وقت التصريف
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": '"production"',
     }),
-    // webpack-dev-server enhancement plugins
+    // plugins خاصة بتعزيز webpack-dev-server
     new DashboardPlugin(),
     new webpack.HotModuleReplacementPlugin(),
   ],
diff --git a/src/content/configuration/resolve.mdx b/src/content/configuration/resolve.mdx
index f0ee3def5a98..8ef0f319ff6f 100644
--- a/src/content/configuration/resolve.mdx
+++ b/src/content/configuration/resolve.mdx
@@ -2,34 +2,16 @@
 title: Resolve
 sort: 8
 contributors:
-  - sokra
-  - skipjack
-  - SpaceK33z
-  - pksjce
-  - sebastiandeutsch
-  - tbroadley
-  - byzyk
-  - numb86
-  - jgravois
-  - EugeneHlushko
-  - Aghassi
-  - myshov
-  - anikethsaha
-  - chenxsan
-  - jamesgeorge007
-  - snitin315
-  - sapenlei
-  - Mazen050
-  - tusharthakur04
+  - RlxChap2
 ---
 
-These options change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at [Module Resolution](/concepts/module-resolution) for more explanation of how the resolver works.
+تغير هذه الخيارات كيفية حل modules. يوفر webpack إعدادات افتراضية معقولة، ولكن من الممكن تغيير الحل بالتفصيل. قم بإلقاء نظرة على [Module القرار](/concepts/module-resolution) لمزيد من التوضيح حول كيفية عمل resolver.
 
 ## resolve
 
 `object`
 
-Configure how modules are resolved. For example, when calling `import 'lodash'` in ES2015, the `resolve` options can change where webpack goes to look for `'lodash'` (see [`modules`](#resolvemodules)).
+قم بتخصيص كيفية حل modules. على سبيل المثال، عند الاتصال بـ `import 'lodash'` في ES2015، يمكن أن تتغير خيارات `resolve` حيث يذهب webpack للبحث عن `'lodash'` (راجع [`modules`](#resolvemodules)).
 
 **webpack.config.js**
 
@@ -37,7 +19,7 @@ Configure how modules are resolved. For example, when calling `import 'lodash'`
 export default {
   // ...
   resolve: {
-    // configuration options
+    // خيارات التخصيص
   },
 };
 ```
@@ -46,7 +28,7 @@ export default {
 
 `object`
 
-Create aliases to `import` or `require` certain modules more easily. For example, to alias a bunch of commonly used `src/` folders:
+قم بإنشاء أسماء مستعارة لـ `import` أو `require` معينة modules بسهولة أكبر. على سبيل المثال، لإنشاء اسم مستعار لمجموعة من المجلدات `src/` شائعة الاستخدام:
 
 **webpack.config.js**
 
@@ -68,19 +50,19 @@ export default {
 };
 ```
 
-Now, instead of using relative paths when importing like so:
+الآن، بدلاً من استخدام المسارات النسبية عند الاستيراد بهذه الطريقة:
 
 ```js
 import Utility from "../../utilities/utility";
 ```
 
-you can use the alias:
+يمكنك استخدام الاسم المستعار:
 
 ```js
 import Utility from "Utilities/utility";
 ```
 
-A trailing `$` can also be added to the given object's keys to signify an exact match:
+يمكن أيضًا إضافة `يمكن أيضًا إضافة  زائدة إلى مفاتيح object المحددة للدلالة على التطابق التام:
 
 **webpack.config.js**
 
@@ -101,14 +83,14 @@ export default {
 };
 ```
 
-which would yield these results:
+والتي من شأنها أن تسفر عن هذه النتائج:
 
 ```js
 import Test1 from "xyz"; // Exact match, so path/to/file.js is resolved and imported
 import Test2 from "xyz/file.js"; // Not an exact match, normal resolution takes place
 ```
 
-You can also use wildcards (`*`) in your alias configuration to create more flexible mappings:
+يمكنك أيضًا استخدام أحرف البدل (`*`) في تخصيص الاسم المستعار الخاص بك لإنشاء تعيينات أكثر مرونة:
 
 **webpack.config.js**
 
@@ -129,40 +111,40 @@ export default {
 };
 ```
 
-This allows you to use imports like:
+يتيح لك هذا استخدام الواردات مثل:
 
 ```js
 import Component from "@components/Button";
 import utils from "@utils/helpers";
 ```
 
-The following table explains other cases:
+ويوضح الجدول التالي الحالات الأخرى:
 
-| `alias:`                           | `import 'xyz'`                        | `import 'xyz/file.js'`               |
+| `alias:` | `import 'xyz'` | `import 'xyz/file.js'` |
 | ---------------------------------- | ------------------------------------- | ------------------------------------ |
-| `{}`                               | `/abc/node_modules/xyz/index.js`      | `/abc/node_modules/xyz/file.js`      |
-| `{ xyz: '/abc/path/to/file.js' }`  | `/abc/path/to/file.js`                | error                                |
-| `{ xyz$: '/abc/path/to/file.js' }` | `/abc/path/to/file.js`                | `/abc/node_modules/xyz/file.js`      |
-| `{ xyz: './dir/file.js' }`         | `/abc/dir/file.js`                    | error                                |
-| `{ xyz$: './dir/file.js' }`        | `/abc/dir/file.js`                    | `/abc/node_modules/xyz/file.js`      |
-| `{ xyz: '/some/dir' }`             | `/some/dir/index.js`                  | `/some/dir/file.js`                  |
-| `{ xyz$: '/some/dir' }`            | `/some/dir/index.js`                  | `/abc/node_modules/xyz/file.js`      |
-| `{ xyz: './dir' }`                 | `/abc/dir/index.js`                   | `/abc/dir/file.js`                   |
-| `{ xyz: 'modu' }`                  | `/abc/node_modules/modu/index.js`     | `/abc/node_modules/modu/file.js`     |
-| `{ xyz$: 'modu' }`                 | `/abc/node_modules/modu/index.js`     | `/abc/node_modules/xyz/file.js`      |
-| `{ xyz: 'modu/some/file.js' }`     | `/abc/node_modules/modu/some/file.js` | error                                |
-| `{ xyz: 'modu/dir' }`              | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/modu/dir/file.js` |
-| `{ xyz$: 'modu/dir' }`             | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/xyz/file.js`      |
+| `{}` | `/abc/node_modules/xyz/index.js` | `/abc/node_modules/xyz/file.js` |
+| `{ xyz: '/abc/path/to/file.js' }`  | `/abc/path/to/file.js`                | خطأ                                |
+| `{ xyz$: '/abc/path/to/file.js' }` | `/abc/path/to/file.js` | `/abc/node_modules/xyz/file.js` |
+| `{ xyz: './dir/file.js' }`         | `/abc/dir/file.js`                    | خطأ                                |
+| `{ xyz$: './dir/file.js' }` | `/abc/dir/file.js` | `/abc/node_modules/xyz/file.js` |
+| `{ xyz: '/some/dir' }` | `/some/dir/index.js` | `/some/dir/file.js` |
+| `{ xyz$: '/some/dir' }` | `/some/dir/index.js` | `/abc/node_modules/xyz/file.js` |
+| `{ xyz: './dir' }` | `/abc/dir/index.js` | `/abc/dir/file.js` |
+| `{ xyz: 'modu' }` | `/abc/node_modules/modu/index.js` | `/abc/node_modules/modu/file.js` |
+| `{ xyz$: 'modu' }` | `/abc/node_modules/modu/index.js` | `/abc/node_modules/xyz/file.js` |
+| `{ xyz: 'modu/some/file.js' }`     | `/abc/node_modules/modu/some/file.js` | خطأ                                |
+| `{ xyz: 'modu/dir' }` | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/modu/dir/file.js` |
+| `{ xyz$: 'modu/dir' }` | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/xyz/file.js` |
 
-`index.js` may resolve to another file if defined in the `package.json`.
+`index.js` يجوز resolve إلى ملف آخر إذا تم تعريفه في `package.json`.
 
-`/abc/node_modules` may resolve in `/node_modules` too.
+`/abc/node_modules` قد resolve في `/node_modules` أيضًا.
 
-W> `resolve.alias` takes precedence over other module resolutions.
+W> `resolve.alias` له الأسبقية على قرارات module الأخرى.
 
-W> [`null-loader`](https://github.com/webpack-contrib/null-loader) is deprecated in webpack 5. use `alias: { xyz$: false }` or absolute path `alias: {[path.resolve(__dirname, './path/to/module')]: false }`
+W> تم إهمال [`null-loader`](https://github.com/webpack-contrib/null-loader) في webpack 5. استخدم `alias: { xyz$: false }` أو المسار المطلق `alias: {[path.resolve(__dirname, './path/to/module')]: false }`
 
-W> `[string]` values are supported since webpack 5.
+W> يتم دعم قيم `[string]` منذ webpack 5.
 
 ```js
 import path from "node:path";
@@ -184,7 +166,7 @@ export default {
 };
 ```
 
-Setting `resolve.alias` to `false` will tell webpack to ignore a module.
+سيؤدي ضبط `resolve.alias` على `false` إلى مطالبة webpack بتجاهل module.
 
 ```js
 export default {
@@ -198,13 +180,13 @@ export default {
 };
 ```
 
-T> To ignore modules based on a regex, you can use [IgnorePlugin](https://webpack.js.org/plugins/ignore-plugin/)
+T> لتجاهل modules استنادًا إلى التعبير العادي، يمكنك استخدام [IgnorePlugin](https://webpack.js.org/plugins/ignore-plugin/)
 
 ### resolve.aliasFields
 
 `[string]: ['browser']`
 
-Specify a field, such as `browser`, to be parsed according to [this specification](https://github.com/defunctzombie/package-browser-field-spec).
+حدد حقلاً، مثل `browser`، ليتم تحليله وفقًا لـ [هذه المواصفات](https://github.com/defunctzombie/package-browser-field-spec).
 
 **webpack.config.js**
 
@@ -219,10 +201,10 @@ export default {
 
 ### resolve.byDependency
 
-Configure resolve options by the type of module request.
+قم بتخصيص خيارات resolve حسب نوع الطلب module.
 
-- Type: `[type: string]: ResolveOptions`
-- Example:
+- النوع: `[type: string]: ResolveOptions`
+- مثال:
 
   ```js
   export default {
@@ -248,7 +230,7 @@ Configure resolve options by the type of module request.
 
 `boolean`
 
-Enables caching of successfully resolved requests, allowing cache entries to be revalidated.
+لتمكين caching من الطلبات التي تم حلها بنجاح، مما يسمح بإعادة التحقق من صحة إدخالات cache.
 
 **webpack.config.js**
 
@@ -265,7 +247,7 @@ export default {
 
 `function(module) => boolean`
 
-A function which decides whether a request should be cached or not. An object is passed to the function with `path` and `request` properties. It must return a boolean.
+function الذي يقرر ما إذا كان يجب تخزين الطلب مؤقتًا أم لا. يتم تمرير object إلى function باستخدام الخاصيتين `path` و`request`. يجب أن يُرجع boolean.
 
 **webpack.config.js**
 
@@ -274,7 +256,7 @@ export default {
   // ...
   resolve: {
     cachePredicate: (module) =>
-      // additional logic
+      // منطق إضافي
       true,
   },
 };
@@ -284,13 +266,13 @@ export default {
 
 `boolean`
 
-If unsafe cache is enabled, includes `request.context` in the cache key. This option is taken into account by the [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve/) module. `context` in resolve caching is ignored when resolve or resolveLoader plugins are provided. This addresses a performance regression.
+إذا تم تمكين cache غير الآمن، فسيتم تضمين `request.context` في المفتاح cache. يتم أخذ هذا الخيار في الاعتبار بواسطة [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve/) module. يتم تجاهل `context` في resolve caching عند توفير resolve أو ResolveLoader plugins. يعالج هذا انحدار performance.
 
 ### resolve.conditionNames
 
 `string[]`
 
-Condition names for [`exports` field](https://nodejs.org/api/packages.html#packages_exports) which defines entry points of a package.
+أسماء الشروط لـ [`exports` الحقل](https://nodejs.org/api/packages.html#packages_exports) التي تحدد entry points لـ package.
 
 **webpack.config.js**
 
@@ -303,55 +285,55 @@ export default {
 };
 ```
 
-Webpack will match [export conditions](https://nodejs.org/api/packages.html#conditional-exports) that are listed within the `resolve.conditionNames` array.
+سوف يتطابق webpack مع [شروط التصدير](https://nodejs.org/api/packages.html#conditional-exports) المدرجة ضمن `resolve.conditionNames` array.
 
-#### Default values
+#### القيم الافتراضية
 
-The default `conditionNames` are composed dynamically based on the [`mode`](/configuration/mode/) and [`target`](/configuration/target/) configuration:
+يتم تخصيص `conditionNames` الافتراضي ديناميكيًا استنادًا إلى تخصيصات [`mode`](/configuration/mode/) و[`target`](/configuration/target/):
 
-The base conditions always include:
+تتضمن الشروط الأساسية دائمًا ما يلي:
 
-- `"webpack"` — always present.
-- `"production"` or `"development"` — based on the current [`mode`](/configuration/mode/) (`"production"` is used when mode is `"none"` or `"production"`).
+- `"webpack"` — حاضر دائمًا.
+- `"production"` أو `"development"` — بناءً على التيار [`mode`](/configuration/mode/) (يتم استخدام `"production"` عندما يكون الوضع `"none"` أو `"production"`).
 
-Additional conditions are appended depending on the [`target`](/configuration/target/):
+يتم إلحاق شروط إضافية بناءً على [`target`](/configuration/target/):
 
-| Target property | Condition    |
+| Target خاصية | الحالة    |
 | --------------- | ------------ |
-| `webworker`     | `"worker"`   |
-| `node`          | `"node"`     |
-| `web`           | `"browser"`  |
-| `electron`      | `"electron"` |
-| `nwjs`          | `"nwjs"`     |
+| `webworker` | `"worker"` |
+| `node` | `"node"` |
+| `web` | `"browser"` |
+| `electron` | `"electron"` |
+| `nwjs` | `"nwjs"` |
 
-For example, with `target: "web"` (the default) and `mode: "production"`, the base `conditionNames` defaults to `["webpack", "production", "browser"]`.
+على سبيل المثال، مع `target: "web"` (الافتراضي) و`mode: "production"`، يكون الإعداد الافتراضي `conditionNames` هو `["webpack", "production", "browser"]`.
 
-#### Per-dependency type conditions
+#### شروط النوع لكل dependency
 
-Webpack further adjusts `conditionNames` through [`resolve.byDependency`](/configuration/resolve/#resolvebydependency) depending on how a module is imported. The `"..."` token inherits from the base conditions above.
+يقوم webpack بضبط `conditionNames` حتى [`resolve.byDependency`](/configuration/resolve/#resolvebydependency) اعتمادًا على كيفية استيراد module. يرث الرمز المميز `"..."` من الشروط الأساسية المذكورة أعلاه.
 
-| Dependency type                                     | `conditionNames`                                       | Used for                                             |
+| Dependency النوع                                     | `conditionNames`                                       | تستخدم ل                                             |
 | --------------------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------- |
-| `esm`, `wasm`, `loaderImport`                       | `["import", "module-sync", "module", "..."]`           | ESM `import` statements, WebAssembly, loader imports |
-| `commonjs`, `amd`, `loader`, `unknown`, `undefined` | `["require", "module-sync", "module", "..."]`          | `require()` calls, AMD, and other dependency types   |
-| `worker`                                            | `["worker", "import", "module-sync", "module", "..."]` | `new Worker()` expressions                           |
-| `css-import`                                        | `["webpack", <mode>, "style"]`                         | CSS `@import` statements                             |
+| `esm`، `wasm`، `loaderImport`                       | `["import", "module-sync", "module", "..."]`           | ESM `import` البيانات، WebAssembly، loader الواردات |
+| `commonjs`، `amd`، `loader`، `unknown`، `undefined` | `["require", "module-sync", "module", "..."]`          | مكالمات `require()` وAMD وأنواع dependency الأخرى   |
+| `worker`                                            | `["worker", "import", "module-sync", "module", "..."]` | `new Worker()` التعبيرات                           |
+| `css-import`                                        | `["webpack", <mode>, "style"]`                         | CSS `@import` البيانات                             |
 
-<Badge text="5.107.0+" /> `"module-sync"` is included in the default conditions
-to align with Node.js, which exposes the `module-sync` community condition for
-synchronously-loadable ESM. Packages that publish a `module-sync` export in
-their `package.json` are picked up automatically without additional
-configuration.
+يتم تضمين <Badge text="5.107.0+" /> `"module-sync"` في الشروط الافتراضية
+للتوافق مع Node.js، مما يعرض حالة مجتمع `module-sync` لـ
+قابل للتحميل بشكل متزامن ESM. Packages التي تنشر تصدير `module-sync` في
+يتم التقاط `package.json` الخاصة بهم تلقائيًا دون أي إضافة
+التخصيص.
 
-For instance, when a file uses `import` in a project with `target: "web"` and `mode: "production"`, the final resolved conditions are `["import", "module-sync", "module", "webpack", "production", "browser"]`.
+على سبيل المثال، عندما يستخدم ملف `import` في مشروع يحتوي على `target: "web"` و`mode: "production"`، فإن الشروط النهائية التي تم حلها هي `["import", "module-sync", "module", "webpack", "production", "browser"]`.
 
-T> The `resolveLoader` option uses different defaults for `conditionNames`: `["loader", "require", "node"]`. See [resolveLoader](#resolveloader).
+T> يستخدم الخيار `resolveLoader` إعدادات افتراضية مختلفة لـ `conditionNames`: `["loader", "require", "node"]`. راجع [resolveLoader](#resolveloader).
 
-#### Condition matching
+#### مطابقة الحالة
 
-The key order in the `exports` field is significant. During condition matching, earlier entries have higher priority and take precedence over later entries.
+يعد ترتيب المفاتيح في الحقل `exports` مهمًا. أثناء مطابقة الشرط، تتمتع الإدخالات السابقة بأولوية أعلى وتكون لها الأسبقية على الإدخالات اللاحقة.
 
-For example,
+على سبيل المثال،
 
 **package.json**
 
@@ -387,15 +369,15 @@ export default {
 };
 ```
 
-importing
+import
 
-- `'foo'` will resolve to `'foo/index-require.js'`
-- `'foo/bar'` will resolve to `'foo/bar-node.js'` as the `"node"` key comes before `"require"` key in the conditional exports object.
-- `'foo/baz'` will resolve to `'foo/baz-node.js'`
+- `'foo'` سوف resolve إلى `'foo/index-require.js'`
+- `'foo/bar'` سوف resolve إلى `'foo/bar-node.js'` حيث أن المفتاح `"node"` يأتي قبل مفتاح `"require"` في عمليات التصدير الشرطية object.
+- `'foo/baz'` سوف resolve إلى `'foo/baz-node.js'`
 
-#### Custom conditions
+#### شروط مخصصة
 
-If you want to add your custom field names while still retaining the default Webpack values, you can use `"..."`:
+إذا كنت تريد إضافة أسماء الحقول المخصصة الخاصة بك مع الاحتفاظ بالقيم الافتراضية webpack، فيمكنك استخدام `"..."`:
 
 **webpack.config.js**
 
@@ -408,7 +390,7 @@ export default {
 };
 ```
 
-Alternatively, to prioritize the default conditions first, then add your custom conditions:
+وبدلاً من ذلك، لتحديد أولوية الشروط الافتراضية أولاً، ثم قم بإضافة شروطك المخصصة:
 
 **webpack.config.js**
 
@@ -425,7 +407,7 @@ export default {
 
 `[string] = ['package.json']`
 
-The JSON files to use for descriptions.
+ملفات JSON المستخدمة للأوصاف.
 
 **webpack.config.js**
 
@@ -442,7 +424,7 @@ export default {
 
 `boolean = false`
 
-If `true`, it will not allow extension-less files. So by default `import foo from "./foo";`/`require('./foo')` works if `./foo` has a `.js` extension, but with this enabled only `import foo from "./foo.js"`/`require('./foo.js')` will work.
+إذا كان `true`، فلن يسمح بالملفات ذات الامتدادات الأقل. لذلك يعمل `import foo from "./foo";`/`require('./foo')` بشكل افتراضي إذا كان `./foo` له امتداد `.js`، ولكن مع تمكين هذا فقط `import foo from "./foo.js"`/`require('./foo.js')` سيعمل.
 
 **webpack.config.js**
 
@@ -459,7 +441,7 @@ export default {
 
 `[string] = ['exports']`
 
-Fields in package.json that are used for resolving module requests. See [package-exports guideline](/guides/package-exports/) for more information.
+الحقول الموجودة في package.json المستخدمة لحل طلبات module. راجع [package-إرشادات التصدير](/guides/package-exports/) لمزيد من المعلومات.
 
 **webpack.config.js**
 
@@ -476,7 +458,7 @@ export default {
 
 `object`
 
-An object which maps extension to extension aliases.
+object الذي يعيّن الامتداد للأسماء المستعارة للامتداد.
 
 **webpack.config.js**
 
@@ -496,7 +478,7 @@ export default {
 
 `[string] = ['.js', '.json', '.wasm']`
 
-Attempt to resolve these extensions in order. If multiple files share the same name but have different extensions, webpack will resolve the one with the extension listed first in the array and skip the rest.
+حاول resolve هذه الامتدادات بالترتيب. إذا كانت هناك ملفات متعددة تشترك في نفس الاسم ولكن لها امتدادات مختلفة، فإن webpack سوف resolve الملف ذو الامتداد المدرج أولاً في array ويتخطى الباقي.
 
 **webpack.config.js**
 
@@ -509,13 +491,13 @@ export default {
 };
 ```
 
-which is what enables users to leave off the extension when importing:
+وهو ما يمكّن المستخدمين من ترك الامتداد عند الاستيراد:
 
 ```js
 import File from "../path/to/file";
 ```
 
-Note that using `resolve.extensions` like above will **override the default array**, meaning that webpack will no longer try to resolve modules using the default extensions. However you can use `'...'` to access the default extensions:
+لاحظ أن استخدام `resolve.extensions` كما هو مذكور أعلاه سوف **يلغي الافتراضي array**، مما يعني أن webpack لن يحاول بعد الآن resolve modules باستخدام الامتدادات الافتراضية. ومع ذلك، يمكنك استخدام `'...'` للوصول إلى الامتدادات الافتراضية:
 
 ```js
 export default {
@@ -530,7 +512,7 @@ export default {
 
 `object`
 
-Redirect module requests when normal resolving fails.
+إعادة توجيه طلبات module عند فشل الحل العادي.
 
 **webpack.config.js**
 
@@ -552,7 +534,7 @@ export default {
 };
 ```
 
-Webpack 5 no longer polyfills Node.js core modules automatically which means if you use them in your code running in browsers or alike, you will have to install compatible modules from npm and include them yourself. Here is a list of polyfills webpack has used before webpack 5:
+webpack 5 لم تعد تملأ Node.js الأساسية modules تلقائيًا مما يعني أنه إذا كنت تستخدمها في التعليمات البرمجية الخاصة بك التي تعمل في browsers أو ما شابه ذلك، فسيتعين عليك تثبيت modules المتوافق من npm وتضمينها بنفسك. فيما يلي قائمة بالحشوات المتعددة التي استخدمها webpack قبل webpack 5:
 
 ```js
 import { createRequire } from "node:module";
@@ -595,7 +577,7 @@ export default {
 
 `boolean`
 
-When set to true, this option treats user-specified requests as fully specified. This means that no extensions are automatically added, and the mainFiles within directories are not resolved. It's important to note that this behavior does not affect requests made through `mainFields`, `aliasFields`, or `aliases`.
+عند التعيين على "صحيح"، يتعامل هذا الخيار مع الطلبات المحددة من قبل المستخدم على أنها محددة بالكامل. وهذا يعني أنه لا تتم إضافة أي ملحقات تلقائيًا، ولا يتم حل الملفات الرئيسية داخل الدلائل. من المهم ملاحظة أن هذا السلوك لا يؤثر على الطلبات المقدمة من خلال `mainFields`، أو `aliasFields`، أو `aliases`.
 
 **webpack.config.js**
 
@@ -612,7 +594,7 @@ export default {
 
 `[string]`
 
-Fields from `package.json` which are used to provide the internal requests of a package (requests starting with `#` are considered internal).
+الحقول من `package.json` والتي يتم استخدامها لتوفير الطلبات الداخلية لـ package (الطلبات التي تبدأ بـ `#` تعتبر داخلية).
 
 **webpack.config.js**
 
@@ -629,9 +611,9 @@ export default {
 
 `[string]`
 
-When importing from an npm package, e.g. `import * as D3 from 'd3'`, this option will determine which fields in its `package.json` are checked. The default values will vary based upon the [`target`](/concepts/targets) specified in your webpack configuration.
+عند الاستيراد من npm package، على سبيل المثال، `import * as D3 from 'd3'`، سيحدد هذا الخيار الحقول الموجودة في `package.json` التي تم تحديدها. ستختلف القيم الافتراضية بناءً على [`target`](/concepts/targets) المحدد في تخصيص webpack الخاص بك.
 
-When the `target` property is set to `webworker`, `web`, or left unspecified:
+عند ضبط الخاصية `target` على `webworker` أو `web` أو تركها غير محددة:
 
 **webpack.config.js**
 
@@ -644,7 +626,7 @@ export default {
 };
 ```
 
-For any other target (including `node`):
+لأي target أخرى (بما في ذلك `node`):
 
 **webpack.config.js**
 
@@ -657,7 +639,7 @@ export default {
 };
 ```
 
-For example, consider an arbitrary library called `upstream` with a `package.json` that contains the following fields:
+على سبيل المثال، ضع في الاعتبار library عشوائيًا يسمى `upstream` مع `package.json` الذي يحتوي على الحقول التالية:
 
 ```json
 {
@@ -666,13 +648,13 @@ For example, consider an arbitrary library called `upstream` with a `package.jso
 }
 ```
 
-When we `import * as Upstream from 'upstream'` this will actually resolve to the file in the `browser` property. The `browser` property takes precedence because it's the first item in `mainFields`. Meanwhile, a Node.js application bundled by webpack will first try to resolve using the file in the `module` field.
+عندما نقوم `import * as Upstream from 'upstream'` سيؤدي هذا في الواقع إلى resolve للملف الموجود في الخاصية `browser`. الخاصية `browser` لها الأولوية لأنها العنصر الأول في `mainFields`. وفي الوقت نفسه، سيحاول تطبيق Node.js المجمع بواسطة webpack أولاً resolve باستخدام الملف الموجود في الحقل `module`.
 
 ### resolve.mainFiles
 
 `[string] = ['index']`
 
-The filename to be used while resolving directories.
+اسم الملف الذي سيتم استخدامه أثناء حل الدلائل.
 
 **webpack.config.js**
 
@@ -689,13 +671,13 @@ export default {
 
 `[string] = ['node_modules']`
 
-Tell webpack what directories should be searched when resolving modules.
+أخبر webpack ما هي الأدلة التي يجب البحث فيها عند حل modules.
 
-Absolute and relative paths can both be used, but be aware that they will behave a bit differently.
+يمكن استخدام كل من المسارات المطلقة والنسبية، لكن انتبه إلى أن سلوكهما سيكون مختلفًا بعض الشيء.
 
-A relative path will be scanned similarly to how Node scans for `node_modules`, by looking through the current directory as well as its ancestors (i.e. `./node_modules`, `../node_modules`, and on).
+سيتم فحص المسار النسبي بشكل مشابه لكيفية فحص Node بحثًا عن `node_modules`، من خلال البحث في الدليل الحالي بالإضافة إلى أسلافه (أي `./node_modules`، `../node_modules`، وما إلى ذلك).
 
-With an absolute path, it will only search in the given directory.
+مع المسار المطلق، سيتم البحث فقط في الدليل المحدد.
 
 **webpack.config.js**
 
@@ -708,7 +690,7 @@ export default {
 };
 ```
 
-If you want to add a directory to search in that takes precedence over `node_modules/`:
+إذا كنت تريد إضافة دليل للبحث فيه فله الأولوية على `node_modules/`:
 
 **webpack.config.js**
 
@@ -731,14 +713,14 @@ export default {
 
 [`[Plugin | Function]`](/plugins/)
 
-A list of additional resolve plugins which should be applied.
+قائمة resolve plugins الإضافية التي يجب تطبيقها.
 
-Each entry can be either:
+يمكن أن يكون كل entry إما:
 
-- A plugin object with an `apply(resolver)` method
-- Or a function plugin, which will be called with the resolver as both `this` and the first argument
+- plugin object بطريقة `apply(resolver)`
+- أو function plugin، والذي سيتم استدعاؤه باستخدام resolver باعتباره `this` والوسيطة الأولى
 
-It allows plugins such as [`DirectoryNamedWebpackPlugin`](https://www.npmjs.com/package/directory-named-webpack-plugin).
+يسمح بـ plugins مثل [`DirectoryNamedWebpackPlugin`](https://www.npmjs.com/package/directory-named-webpack-plugin).
 
 **webpack.config.js**
 
@@ -747,14 +729,14 @@ export default {
   // ...
   resolve: {
     plugins: [
-      // Object-style plugin
+      // Object-نمط plugin
       {
         apply(resolver) {
-          // custom logic
+          // منطق مخصص
         },
       },
 
-      // Function-style plugin
+      // Function-نمط plugin
       function (resolver) {
         // `this` is also the resolver
       },
@@ -769,7 +751,7 @@ export default {
 
 <Badge text="5.13.0+" />
 
-Prefer absolute paths to [`resolve.roots`](#resolveroots) when resolving.
+تفضل المسارات المطلقة إلى [`resolve.roots`](#resolveroots) عند الحل.
 
 **webpack.config.js**
 
@@ -786,7 +768,7 @@ export default {
 
 `boolean`
 
-When enabled, webpack would prefer to resolve module requests as relative requests instead of using modules from `node_modules` directories.
+عند التمكين، يفضل webpack طلبات resolve module كطلبات نسبية بدلاً من استخدام modules من أدلة `node_modules`.
 
 **webpack.config.js**
 
@@ -804,7 +786,7 @@ export default {
 {/* eslint-disable */}
 
 ```js
-// let's say `src/logo.svg` exists
+// لنفترض أن `src/logo.svg` موجود
 import logo1 from "logo.svg"; // this is viable when `preferRelative` enabled
 import logo2 from "./logo.svg"; // otherwise you can only use relative path to resolve logo.svg
 
@@ -817,7 +799,7 @@ const a = new URL("./module/path", import.meta.url);
 
 `[string, RegExp]`
 
-A list of resolve restrictions to restrict the paths that a request can be resolved on.
+قائمة بقيود resolve لتقييد المسارات التي يمكن حل الطلب عليها.
 
 **webpack.config.js**
 
@@ -834,7 +816,7 @@ export default {
 
 `[string]`
 
-A list of directories where requests of server-relative URLs (starting with '/') are resolved, defaults to [`context` configuration option](/configuration/entry-context/#context). On non-Windows systems these requests are resolved as an absolute path first.
+قائمة بالأدلة التي يتم فيها حل طلبات عناوين URL ذات الصلة بـ server (التي تبدأ بـ '/')، والإعدادات الافتراضية هي [`context` خيار التخصيص](/configuration/entry-context/#context). في الأنظمة التي لا تعمل بنظام Windows، يتم حل هذه الطلبات كمسار مطلق أولاً.
 
 **webpack.config.js**
 
@@ -858,9 +840,9 @@ export default {
 
 `boolean = true`
 
-Whether to resolve symlinks to their symlinked location.
+ما إذا كان سيتم ربط resolve بالارتباطات الرمزية إلى موقع الارتباط الرمزي الخاص بها.
 
-When enabled, symlinked resources are resolved to their _real_ path, not their symlinked location. Note that this may cause module resolution to fail when using tools that symlink packages (like `npm link`).
+عند التمكين، يتم تحويل الموارد المرتبطة بالرمز إلى مسارها _الحقيقي، وليس إلى موقع الارتباط الرمزي الخاص بها. لاحظ أن هذا قد يتسبب في فشل دقة module عند استخدام الأدوات التي تربط packages (مثل `npm link`).
 
 **webpack.config.js**
 
@@ -877,7 +859,7 @@ export default {
 
 `object` `boolean = true`
 
-Enable aggressive, but **unsafe**, caching of modules. Passing `true` will cache everything.
+تمكين العدوانية، ولكن **غير الآمنة**، caching من modules. تمرير `true` سوف cache كل شيء.
 
 **webpack.config.js**
 
@@ -890,22 +872,22 @@ export default {
 };
 ```
 
-When an object is provided, webpack will use it as cache.
+عند توفير object، سيستخدمه webpack كـ cache.
 
-For example, you can supply a [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) instead of a regular one:
+على سبيل المثال، يمكنك توفير [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) بدلاً من الوكيل العادي:
 
 **webpack.config.js**
 
 ```js
-// copied from discussion here https://github.com/webpack/webpack/discussions/18089
+// منقول من المناقشة هنا https://github.com/webpack/webpack/discussions/18089
 const realUnsafeCache = {};
 const unsafeCacheHandler = {
   get(cache, key) {
     const cachedValue = cache[key];
 
-    // make sure the file exists on disk
+    // تأكد من وجود الملف على القرص
     if (cachedValue && !fs.existsSync(cachedValue.path)) {
-      // and if it doesn't, evict that cache entry.
+      // وإذا لم يحدث ذلك، قم بطرد cache entry.
       delete cache[key];
       return undefined;
     }
@@ -923,13 +905,13 @@ export default {
 };
 ```
 
-W> Changes to cached paths may cause failure in rare cases.
+W> قد تؤدي التغييرات في المسارات المخزنة مؤقتًا إلى فشل في حالات نادرة.
 
 ### resolve.useSyncFileSystemCalls
 
 `boolean`
 
-Use synchronous filesystem calls for the resolver.
+استخدم استدعاءات نظام الملفات المتزامنة لـ resolver.
 
 **webpack.config.js**
 
@@ -948,7 +930,7 @@ export default {
 
 `boolean` `string` `object`
 
-TypeScript config for paths mapping. This option replaces the need for `tsconfig-paths-webpack-plugin`. It reads `compilerOptions.baseUrl` and `compilerOptions.paths` from `tsconfig.json` and applies those aliases when resolving imports.
+TypeScript التخصيص لتعيين المسارات. يحل هذا الخيار محل الحاجة إلى `tsconfig-paths-webpack-plugin`. يقرأ `compilerOptions.baseUrl` و`compilerOptions.paths` من `tsconfig.json` ويطبق تلك الأسماء المستعارة عند حل عمليات الاستيراد.
 
 **webpack.config.js**
 
@@ -961,11 +943,11 @@ export default {
 };
 ```
 
-**Options:**
+**الخيارات:**
 
-- `false` - Disable TypeScript path mapping
-- `true` - Use the default `tsconfig.json` file (searches for it automatically)
-- `string` - Path to a `tsconfig.json` file (relative or absolute)
+- `false` - تعطيل تعيين المسار TypeScript
+- `true` - استخدم الملف `tsconfig.json` الافتراضي (يبحث عنه تلقائيًا)
+- `string` - المسار إلى ملف `tsconfig.json` (نسبي أو مطلق)
 
 **webpack.config.js**
 
@@ -978,7 +960,7 @@ export default {
 };
 ```
 
-- `object` - Object with `configFile` and `references` options
+- `object` - Object مع خيارات `configFile` و`references`
 
 **webpack.config.js**
 
@@ -994,12 +976,12 @@ export default {
 };
 ```
 
-**Object options:**
+**Object الخيارات:**
 
-- `configFile` (`string`): A path to the tsconfig file (relative or absolute)
-- `references` (`"auto"` | `string[]`): References to other tsconfig files. `"auto"` inherits from TypeScript config, or an array of relative/absolute paths
+- `configFile` (`string`): مسار إلى ملف tsconfig (نسبي أو مطلق)
+- `references` (`"auto"` | `string[]`): مراجع لملفات tsconfig الأخرى. `"auto"` يرث من تخصيص TypeScript، أو array من المسارات النسبية/المطلقة
 
-**Example tsconfig.json:**
+**مثال tsconfig.json:**
 
 ```json
 {
@@ -1013,20 +995,20 @@ export default {
 }
 ```
 
-Then in your code:
+ثم في الكود الخاص بك:
 
 ```ts
 import Button from "@/components/Button";
 import Header from "components/Header";
 ```
 
-T> This option is also available in `resolveLoader` with the same configuration options.
+T> يتوفر هذا الخيار أيضًا في `resolveLoader` بنفس خيارات التخصيص.
 
-## resolveLoader
+## ResolveLoader
 
 `object { modules [string] = ['node_modules'], extensions [string] = ['.js', '.json'], mainFields [string] = ['loader', 'main']}`
 
-This set of options is identical to the `resolve` property set above, but is used only to resolve webpack's [loader](/concepts/loaders) packages.
+مجموعة الخيارات هذه مطابقة للخاصية `resolve` المذكورة أعلاه، ولكنها تستخدم فقط لـ resolve webpack's [loader](/concepts/loaders) packages.
 
 **webpack.config.js**
 
@@ -1041,4 +1023,4 @@ export default {
 };
 ```
 
-T> Note that you can use alias here and other features familiar from resolve. For example `{ txt: 'raw-loader' }` would shim `txt!templates/demo.txt` to use `raw-loader`.
+T> لاحظ أنه يمكنك استخدام الاسم المستعار هنا والميزات الأخرى المألوفة في resolve. على سبيل المثال، سوف يقوم `{ txt: 'raw-loader' }` بتحريك `txt!templates/demo.txt` لاستخدام `raw-loader`.
diff --git a/src/content/configuration/stats.mdx b/src/content/configuration/stats.mdx
index 3905a0c919a0..974c27835bab 100644
--- a/src/content/configuration/stats.mdx
+++ b/src/content/configuration/stats.mdx
@@ -2,28 +2,14 @@
 title: Stats
 sort: 18
 contributors:
-  - SpaceK33z
-  - sallar
-  - jungomi
-  - ldrick
-  - jasonblanchard
-  - byzyk
-  - renjithspace
-  - Raiondesu
-  - EugeneHlushko
-  - grgur
-  - anshumanv
-  - pixel-ray
-  - snitin315
-  - u01jmg3
-  - grrizzly
+  - RlxChap2
 ---
 
 `object` `string`
 
-The `stats` option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you don't want to use `quiet` or `noInfo` because you want some bundle information, but not all of it.
+يتيح لك خيار `stats` التحكم الدقيق في المعلومات التي يتم عرضها bundle. يمكن أن يكون هذا حلاً وسطًا جيدًا إذا كنت لا تريد استخدام `quiet` أو `noInfo` لأنك تريد بعض معلومات bundle، ولكن ليس كلها.
 
-W> This option does not have any effect when using the [Node.js API](/api/node). You need to pass the stats options to the `stats.toString()` resp. `stats.toJson()` calls instead.
+W> ليس لهذا الخيار أي تأثير عند استخدام [Node.js API](/api/node). تحتاج إلى تمرير خيارات stats إلى `stats.toString()`. `stats.toJson()` يدعو بدلاً من ذلك.
 
 ```js
 export default {
@@ -32,30 +18,30 @@ export default {
 };
 ```
 
-## Stats Presets
+## Stats الإعدادات المسبقة
 
-Webpack comes with certain presets available for the stats output:
+يأتي webpack مزودًا ببعض الإعدادات المسبقة المتاحة لـ stats output:
 
-| Preset              | Alternative | Description                                                    |
+| محددة مسبقا              | بديل | الوصف                                                    |
 | ------------------- | ----------- | -------------------------------------------------------------- |
-| `'errors-only'`     | _none_      | Only output when errors happen                                 |
-| `'errors-warnings'` | _none_      | Only output errors and warnings happen                         |
-| `'minimal'`         | _none_      | Only output when errors or new compilation happen              |
-| `'none'`            | `false`     | Output nothing                                                 |
-| `'normal'`          | `true`      | Standard output                                                |
-| `'verbose'`         | _none_      | Output everything                                              |
-| `'detailed'`        | _none_      | Output everything except `chunkModules` and `chunkRootModules` |
-| `'summary'`         | _none_      | Output webpack version, warnings count and errors count        |
+| `'errors-only'`     | _لا شيء_      | فقط output عند حدوث أخطاء                                 |
+| `'errors-warnings'` | _لا شيء_      | تحدث أخطاء وتحذيرات output فقط                         |
+| `'minimal'`         | _لا شيء_      | فقط output عند حدوث أخطاء أو compilation جديدة              |
+| `'none'`            | `false`     | Output لا شيء                                                 |
+| `'normal'`          | `true`      | قياسي output                                                |
+| `'verbose'`         | _لا شيء_      | Output كل شيء                                              |
+| `'detailed'`        | _لا شيء_      | Output كل شيء ما عدا `chunkModules` و`chunkRootModules` |
+| `'summary'`         | _لا شيء_      | Output webpack الإصدار، عدد التحذيرات وعدد الأخطاء        |
 
-## Stats Options
+## Stats الخيارات
 
-It is possible to specify which information you want to see in the stats output.
+من الممكن تحديد المعلومات التي تريد رؤيتها في stats output.
 
-T> All of the options in the stats configuration object are optional.
+T> جميع الخيارات الموجودة في تخصيص stats object اختيارية.
 
 ### stats.all
 
-A fallback value for stats options when an option is not defined. It has precedence over local webpack defaults.
+قيمة احتياطية لخيارات stats عندما لا يتم تعريف الخيار. له الأسبقية على الإعدادات الافتراضية webpack المحلية.
 
 ```js
 export default {
@@ -70,7 +56,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to show the asset information. Set `stats.assets` to `false` to hide it.
+يخبر `stats` ما إذا كان سيتم عرض معلومات asset أم لا. اضبط `stats.assets` على `false` لإخفائه.
 
 ```js
 export default {
@@ -85,7 +71,7 @@ export default {
 
 `string = 'id'`
 
-Tells `stats` to sort the assets by a given field. All of the [sorting fields](#sorting-fields) are allowed to be used as values for `stats.assetsSort`. Use `!` prefix in the value to reverse the sort order by a given field.
+يخبر `stats` بفرز assets حسب حقل معين. يُسمح باستخدام كافة [حقول الفرز](#sorting-fields) كقيم لـ `stats.assetsSort`. استخدم البادئة `!` في القيمة لعكس ترتيب الفرز حسب حقل معين.
 
 ```js
 export default {
@@ -100,7 +86,7 @@ export default {
 
 `number = 15`
 
-Tells `stats` how many items of assets should be displayed (groups will be collapsed to fit this space).
+يخبر `stats` بعدد عناصر assets التي يجب عرضها (سيتم طي المجموعات لتناسب هذه المساحة).
 
 ```js
 export default {
@@ -115,7 +101,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add the build date and the build time information. Set `stats.builtAt` to `false` to hide it.
+يخبر `stats` ما إذا كان يجب إضافة التاريخ build ومعلومات الوقت build. اضبط `stats.builtAt` على `false` لإخفائه.
 
 ```js
 export default {
@@ -128,13 +114,13 @@ export default {
 
 ### stats.cached
 
-Old version of `stats.cachedModules`.
+الإصدار القديم من `stats.cachedModules`.
 
 ### stats.cachedAssets
 
 `boolean = true`
 
-Tells `stats` whether to add information about the cached assets. Setting `stats.cachedAssets` to `false` will tell `stats` to only show the emitted files (not the ones that were built).
+يخبر `stats` ما إذا كان سيتم إضافة معلومات حول المخزن المؤقت assets. سيؤدي ضبط `stats.cachedAssets` إلى `false` إلى مطالبة `stats` بإظهار الملفات المنبعثة فقط (وليس تلك التي تم إنشاؤها).
 
 ```js
 export default {
@@ -149,7 +135,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about cached (not built) modules.
+يخبر `stats` ما إذا كان سيتم إضافة معلومات حول ذاكرة التخزين المؤقت (غير المضمنة) modules.
 
 ```js
 export default {
@@ -164,7 +150,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the children.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول الأطفال.
 
 ```js
 export default {
@@ -179,7 +165,7 @@ export default {
 
 `boolean = true`
 
-Display auxiliary assets in chunk groups.
+عرض المساعد assets في مجموعات chunk.
 
 ```js
 export default {
@@ -194,7 +180,7 @@ export default {
 
 `boolean = true`
 
-Display children of the chunk groups (e.g. prefetched, preloaded chunks and assets).
+عرض مجموعات فرعية من chunk (على سبيل المثال، chunks وassets التي تم جلبها مسبقًا، وassets).
 
 ```js
 export default {
@@ -209,7 +195,7 @@ export default {
 
 `number`
 
-Limit of assets displayed in chunk groups.
+حد assets المعروض في مجموعات chunk.
 
 ```js
 export default {
@@ -224,7 +210,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the `namedChunkGroups`.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول `namedChunkGroups`.
 
 ```js
 export default {
@@ -239,7 +225,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the built modules to information about the chunk.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول modules المدمج إلى معلومات حول chunk.
 
 ```js
 export default {
@@ -254,7 +240,7 @@ export default {
 
 `number = 10`
 
-Tells `stats` how many items of chunk modules should be displayed (groups will be collapsed to fit this space).
+يخبر `stats` عدد عناصر chunk modules التي يجب عرضها (سيتم طي المجموعات لتناسب هذه المساحة).
 
 ```js
 export default {
@@ -269,7 +255,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the origins of chunks and chunk merging.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول أصول الدمج chunks وchunk.
 
 ```js
 export default {
@@ -284,7 +270,7 @@ export default {
 
 `boolean = false`
 
-Tells `stats` to display chunk parents, children and siblings.
+يخبر `stats` لعرض chunk الآباء والأطفال والأشقاء.
 
 ```js
 export default {
@@ -299,7 +285,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the chunk. Setting `stats.chunks` to `false` results in a less verbose output.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول chunk. يؤدي ضبط `stats.chunks` إلى `false` إلى output أقل تفصيلاً.
 
 ```js
 export default {
@@ -314,7 +300,7 @@ export default {
 
 `string = 'id'`
 
-Tells `stats` to sort the chunks by a given field. All of the [sorting fields](#sorting-fields) are allowed to be used as values for `stats.chunksSort`. Use `!` prefix in the value to reverse the sort order by a given field.
+يخبر `stats` بفرز chunks حسب حقل معين. يُسمح باستخدام كافة [حقول الفرز](#sorting-fields) كقيم لـ `stats.chunksSort`. استخدم البادئة `!` في القيمة لعكس ترتيب الفرز حسب حقل معين.
 
 ```js
 export default {
@@ -329,7 +315,7 @@ export default {
 
 `boolean = false` `{ bold?: string, cyan?: string, green?: string, magenta?: string, red?: string, yellow?: string }`
 
-Tells `stats` whether to output in the different colors.
+يخبر `stats` ما إذا كان يجب output بألوان مختلفة.
 
 ```js
 export default {
@@ -340,19 +326,19 @@ export default {
 };
 ```
 
-It is also available as a CLI flag:
+وهو متوفر أيضًا كعلامة CLI:
 
 ```bash
 npx webpack --stats-colors
 ```
 
-To disable:
+للتعطيل:
 
 ```bash
 npx webpack --no-stats-colors
 ```
 
-You can specify your own terminal output colors using [ANSI escape sequences](https://en.wikipedia.org/wiki/ANSI_escape_code)
+يمكنك تحديد ألوان output الطرفية الخاصة بك باستخدام [تسلسلات الهروب ANSI](https://en.wikipedia.org/wiki/ANSI_escape_code)
 
 ```js
 export default {
@@ -367,7 +353,7 @@ export default {
 
 `string`
 
-The stats base directory, an **absolute path** for shortening the request information.
+الدليل الأساسي stats، **المسار المطلق** لتقصير معلومات الطلب.
 
 ```js
 import path from "node:path";
@@ -384,13 +370,13 @@ export default {
 };
 ```
 
-By default, the value of [`context`](/configuration/entry-context/#context) or the Node.js current working directory is used.
+افتراضيًا، يتم استخدام قيمة [`context`](/configuration/entry-context/#context) أو دليل العمل الحالي Node.js.
 
 ### stats.dependentModules
 
 `boolean`
 
-Tells `stats` whether to show chunk modules that are dependencies of other modules of the chunk.
+يخبر `stats` ما إذا كان سيتم إظهار chunk modules التي هي dependencies من modules أخرى من chunk.
 
 ```js
 export default {
@@ -405,7 +391,7 @@ export default {
 
 `boolean = false`
 
-Tells `stats` whether to display the distance from the entry point for each module.
+يخبر `stats` ما إذا كان سيتم عرض المسافة من entry point لكل module.
 
 ```js
 export default {
@@ -420,7 +406,7 @@ export default {
 
 `boolean = true` `"auto"`
 
-Tells `stats` whether to display the entry points with the corresponding bundles.
+يخبر `stats` ما إذا كان سيتم عرض entry points مع bundles المقابل.
 
 ```js
 export default {
@@ -431,13 +417,13 @@ export default {
 };
 ```
 
-When `stats.entrypoints` is set to `'auto'`, webpack will decide automatically whether to display the entry points in the stats output.
+عند ضبط `stats.entrypoints` على `'auto'`، سيقرر webpack تلقائيًا ما إذا كان سيتم عرض entry points في stats output.
 
 ### stats.env
 
 `boolean = false`
 
-Tells `stats` whether to display the `--env` information.
+يخبر `stats` ما إذا كان سيتم عرض معلومات `--env` أم لا.
 
 ```js
 export default {
@@ -452,7 +438,7 @@ export default {
 
 `boolean` `"auto"`
 
-Tells `stats` whether to include the [`cause`](https://nodejs.org/en/blog/release/v16.9.0/#error-cause) property of errors in the output. It defaults to `true`.
+يخبر `stats` ما إذا كان سيتم تضمين خاصية [`cause`](https://nodejs.org/en/blog/release/v16.9.0/#error-cause) للأخطاء في output. الافتراضي هو `true`.
 
 ```js
 export default {
@@ -467,7 +453,7 @@ export default {
 
 `boolean` `"auto"`
 
-Tells `stats` whether to add the details to the errors. It defaults to `'auto'` which will show error details when there're only 2 or less errors.
+يخبر `stats` ما إذا كان يجب إضافة التفاصيل إلى الأخطاء أم لا. يتم تعيينه افتراضيًا على `'auto'` والذي سيعرض تفاصيل الخطأ عند وجود خطأين فقط أو أقل.
 
 ```js
 export default {
@@ -482,9 +468,9 @@ export default {
 
 `boolean` `"auto"`
 
-Tells `stats` whether to include the errors array from [`AggregateError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) instances in the output. It defaults to `true`.
+يخبر `stats` ما إذا كان سيتم تضمين الأخطاء array من مثيلات [`AggregateError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) في output. الافتراضي هو `true`.
 
-Useful when a single error is composed of multiple underlying errors, providing deeper visibility into grouped error structures.
+يكون مفيدًا عندما يتكون خطأ واحد من عدة أخطاء أساسية، مما يوفر رؤية أعمق لهياكل الأخطاء المجمعة.
 
 ```js
 export default {
@@ -499,7 +485,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to show stack trace of errors.
+يخبر `stats` ما إذا كان سيتم إظهار تتبع مكدس الأخطاء.
 
 ```js
 export default {
@@ -514,7 +500,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to display the errors.
+يخبر `stats` ما إذا كان سيتم عرض الأخطاء أم لا.
 
 ```js
 export default {
@@ -529,7 +515,7 @@ export default {
 
 `boolean = true`
 
-Add errors count.
+إضافة عدد الأخطاء.
 
 ```js
 export default {
@@ -546,7 +532,7 @@ export default {
 
 `number`
 
-Tells `stats` to limit the number of lines to allocate for displaying an error.
+يخبر `stats` بتحديد number للأسطر المخصصة لعرض الخطأ.
 
 ```js
 export default {
@@ -559,13 +545,13 @@ export default {
 
 ### stats.exclude
 
-See [`stats.excludeModules`](#statsexcludemodules).
+راجع [`stats.excludeModules`](#statsexcludemodules).
 
 ### stats.excludeAssets
 
 `array = []: string | RegExp | function (assetName) => boolean` `string` `RegExp` `function (assetName) => boolean`
 
-Tells `stats` to exclude the matching assets information. This can be done with a `string`, a `RegExp`, a `function` that is getting the assets name as an argument and returns a `boolean`. `stats.excludeAssets` can be an `array` of any of the above.
+يخبر `stats` باستبعاد معلومات assets المطابقة. يمكن القيام بذلك باستخدام `string`، و`RegExp`، و`function` الذي يحصل على اسم assets كوسيطة ويعيد `boolean`. `stats.excludeAssets` يمكن أن يكون `array` لأي مما سبق.
 
 ```js
 export default {
@@ -584,7 +570,7 @@ export default {
 
 `array = []: string | RegExp | function (assetName) => boolean` `string` `RegExp` `function (assetName) => boolean` `boolean: false`
 
-Tells `stats` to exclude the matching modules information. This can be done with a `string`, a `RegExp`, a `function` that is getting the module's source as an argument and returns a `boolean`. `stats.excludeModules` can be an `array` of any of the above. `stats.excludeModules`'s configuration [is merged](https://github.com/webpack/webpack/blob/main/lib/Stats.js#L215) with the `stats.exclude`'s configuration value.
+يخبر `stats` باستبعاد معلومات modules المطابقة. يمكن القيام بذلك باستخدام `string`، و`RegExp`، و`function` الذي يحصل على مصدر module كوسيطة ويعيد `boolean`. `stats.excludeModules` يمكن أن يكون `array` لأي مما سبق. تخصيص `stats.excludeModules` [تم دمجه](https://github.com/webpack/webpack/blob/main/lib/Stats.js#L215) مع قيمة تخصيص `stats.exclude`.
 
 ```js
 export default {
@@ -595,7 +581,7 @@ export default {
 };
 ```
 
-Setting `stats.excludeModules` to `false` will disable the exclude behaviour.
+سيؤدي ضبط `stats.excludeModules` على `false` إلى تعطيل سلوك الاستبعاد.
 
 ```js
 export default {
@@ -610,7 +596,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group assets by how their are related to chunks.
+يخبر `stats` ما إذا كان سيتم تجميع assets من خلال مدى ارتباطهم بـ chunks.
 
 ```js
 export default {
@@ -625,7 +611,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group assets by their status (emitted, compared for emit or cached).
+يخبر `stats` ما إذا كان سيتم تجميع assets حسب حالته (المنبعث، أو مقارنة بالإصدار، أو المخزن مؤقتًا).
 
 ```js
 export default {
@@ -640,7 +626,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group assets by their extension.
+يخبر `stats` ما إذا كان سيتم تجميع assets حسب امتداده.
 
 ```js
 export default {
@@ -655,7 +641,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group assets by their asset info (immutable, development, hotModuleReplacement, etc).
+يخبر `stats` ما إذا كان سيتم تجميع assets حسب معلومات asset الخاصة بهم (غير قابلة للتغيير، التطوير، hotModuleReplacement، إلخ).
 
 ```js
 export default {
@@ -670,7 +656,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group assets by their asset path.
+يخبر `stats` ما إذا كان سيتم تجميع assets حسب مسار asset الخاص بهم.
 
 ```js
 export default {
@@ -685,7 +671,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group modules by their attributes (errors, warnings, assets, optional, orphan, or dependent).
+يخبر `stats` ما إذا كان سيتم تجميع modules حسب سماتها (أخطاء، تحذيرات، assets، اختياري، معزول، أو تابع).
 
 ```js
 export default {
@@ -700,7 +686,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group modules by their cache status (cached or built and cacheable).
+يخبر `stats` ما إذا كان سيتم تجميع modules حسب حالتهم cache (مخزنة مؤقتًا أو مدمجة وقابلة للتخزين المؤقت).
 
 ```js
 export default {
@@ -715,7 +701,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group modules by their extension.
+يخبر `stats` ما إذا كان سيتم تجميع modules حسب امتداده.
 
 ```js
 export default {
@@ -730,7 +716,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group modules by their layer.
+يخبر `stats` ما إذا كان سيتم تجميع modules حسب طبقته.
 
 ```js
 export default {
@@ -745,7 +731,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group modules by their path.
+يخبر `stats` ما إذا كان سيتم تجميع modules حسب مساره.
 
 ```js
 export default {
@@ -760,7 +746,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to group modules by their type.
+يخبر `stats` ما إذا كان سيتم تجميع modules حسب نوعها.
 
 ```js
 export default {
@@ -777,7 +763,7 @@ export default {
 
 <Badge text="5.46.0+" />
 
-Group [`reasons`](#statsreasons) by their origin module to avoid large set of reasons.
+قم بتجميع [`reasons`](#statsreasons) حسب مصدرها module لتجنب مجموعة كبيرة من الأسباب.
 
 ```js
 export default {
@@ -792,7 +778,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the hash of the compilation.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول hash لـ compilation.
 
 ```js
 export default {
@@ -807,7 +793,7 @@ export default {
 
 `boolean = false`
 
-Tells `stats` to add IDs of modules and chunks.
+يخبر `stats` بإضافة معرفات modules وchunks.
 
 ```js
 export default {
@@ -822,14 +808,14 @@ export default {
 
 `string = 'info': 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'` `boolean`
 
-Tells `stats` whether to add logging output.
+يخبر `stats` ما إذا كان سيتم إضافة التسجيل output.
 
-- `'none'`, `false` - disable logging
-- `'error'` - errors only
-- `'warn'` - errors and warnings only
-- `'info'` - errors, warnings, and info messages
-- `'log'`, `true` - errors, warnings, info messages, log messages, groups, clears. Collapsed groups are displayed in a collapsed state.
-- `'verbose'` - log everything except debug and trace. Collapsed groups are displayed in expanded state.
+- `'none'`، `false` - تعطيل التسجيل
+- `'error'` - الأخطاء فقط
+- `'warn'` - الأخطاء والتحذيرات فقط
+- `'info'` - الأخطاء والتحذيرات ورسائل المعلومات
+- `'log'`، `true` - الأخطاء والتحذيرات ورسائل المعلومات ورسائل السجل والمجموعات والمسح. يتم عرض المجموعات المطوية في حالة مطوية.
+- `'verbose'` - قم بتسجيل كل شيء باستثناء التصحيح والتتبع. يتم عرض المجموعات المطوية في الحالة الموسعة.
 
 ```js
 export default {
@@ -844,7 +830,7 @@ export default {
 
 `array = []: string | RegExp | function (name) => boolean` `string` `RegExp` `function (name) => boolean`
 
-Tells `stats` to include the debug information of the specified loggers such as Plugins or Loaders. When [`stats.logging`](#statslogging) is set to `false`, `stats.loggingDebug` option is ignored.
+يخبر `stats` بتضمين معلومات التصحيح الخاصة بالمسجلين المحددين مثل Plugins أو loaders. عند ضبط [`stats.logging`](#statslogging) على `false`، يتم تجاهل الخيار `stats.loggingDebug`.
 
 ```js
 export default {
@@ -864,7 +850,7 @@ export default {
 
 `boolean = true`
 
-Enable stack traces in the logging output for errors, warnings and traces. Set `stats.loggingTrace` to hide the trace.
+تمكين تتبعات المكدس في التسجيل output للأخطاء والتحذيرات والتتبعات. اضبط `stats.loggingTrace` لإخفاء الأثر.
 
 ```js
 export default {
@@ -879,7 +865,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about assets inside modules. Set `stats.moduleAssets` to `false` to hide it.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول assets داخل modules. اضبط `stats.moduleAssets` على `false` لإخفائه.
 
 ```js
 export default {
@@ -894,7 +880,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to show dependencies and the origin of warnings/errors. `stats.moduleTrace` is available since webpack 2.5.0.
+يخبر `stats` لإظهار dependencies وأصل التحذيرات/الأخطاء. `stats.moduleTrace` متاح منذ webpack 2.5.0.
 
 ```js
 export default {
@@ -909,7 +895,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about the built modules.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول modules المدمج.
 
 ```js
 export default {
@@ -924,7 +910,7 @@ export default {
 
 `string = 'id'`
 
-Tells `stats` to sort the modules by a given field. All of the [sorting fields](#sorting-fields) are allowed to be used as values for `stats.modulesSort`. Use `!` prefix in the value to reverse the sort order by a given field.
+يخبر `stats` بفرز modules حسب حقل معين. يُسمح باستخدام كافة [حقول الفرز](#sorting-fields) كقيم لـ `stats.modulesSort`. استخدم البادئة `!` في القيمة لعكس ترتيب الفرز حسب حقل معين.
 
 ```js
 export default {
@@ -939,7 +925,7 @@ export default {
 
 `number = 15`
 
-Tells `stats` how many items of modules should be displayed (groups will be collapsed to fit this space).
+يخبر `stats` بعدد عناصر modules التي يجب عرضها (سيتم طي المجموعات لتناسب هذه المساحة).
 
 ```js
 export default {
@@ -954,7 +940,7 @@ export default {
 
 `boolean`
 
-Tells `stats` whether to add information about modules nested in other modules (like with module concatenation).
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول modules متداخلة في modules أخرى (مثل سلسلة module).
 
 ```js
 export default {
@@ -969,7 +955,7 @@ export default {
 
 `number = 10`
 
-Tells `stats` how many items of nested modules should be displayed (groups will be collapsed to fit this space).
+يخبر `stats` عدد عناصر modules المتداخلة التي يجب عرضها (سيتم طي المجموعات لتناسب هذه المساحة).
 
 ```js
 export default {
@@ -984,7 +970,7 @@ export default {
 
 `boolean`
 
-Tells `stats` to show the reasons why optimization bailed out for modules.
+يخبر `stats` لإظهار أسباب إنقاذ optimization لـ modules.
 
 ```js
 export default {
@@ -999,7 +985,7 @@ export default {
 
 `boolean = false`
 
-Tells `stats` whether to hide `orphan` modules. A module is an `orphan` if it is not included in any chunk. Orphan modules are hidden by default in `stats`.
+يخبر `stats` ما إذا كان سيتم إخفاء `orphan` modules. module هو `orphan` إذا لم يتم تضمينه في أي chunk. يتم إخفاء اليتيم modules بشكل افتراضي في `stats`.
 
 ```js
 export default {
@@ -1014,7 +1000,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to show the `outputPath`.
+يخبر `stats` لإظهار `outputPath`.
 
 ```js
 export default {
@@ -1029,7 +1015,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to show performance hint when the file size exceeds [`performance.maxAssetSize`](/configuration/performance/#performancemaxassetsize).
+يخبر `stats` بإظهار performance تلميح عندما يتجاوز حجم الملف [`performance.maxAssetSize`](/configuration/performance/#performancemaxassetsize).
 
 ```js
 export default {
@@ -1044,7 +1030,7 @@ export default {
 
 `string` `boolean: false`
 
-Sets the [preset](/configuration/stats/#stats-presets) for the type of information that gets displayed. It is useful for [extending stats behaviours](/configuration/stats/#extending-stats-behaviours).
+يضبط [الإعداد المسبق](/configuration/stats/#stats-presets) لنوع المعلومات التي يتم عرضها. إنه مفيد لـ [توسيع سلوكيات stats](/configuration/stats/#extending-stats-behaviours).
 
 ```js
 export default {
@@ -1055,13 +1041,13 @@ export default {
 };
 ```
 
-Setting value of `stats.preset` to `false` tells webpack to use `'none'` [stats preset](/configuration/stats/#stats-presets).
+يؤدي ضبط قيمة `stats.preset` إلى `false` إلى إخبار webpack باستخدام `'none'` [stats الإعداد المسبق](/configuration/stats/#stats-presets).
 
 ### stats.providedExports
 
 `boolean = false`
 
-Tells `stats` to show the exports of the modules.
+يخبر `stats` لإظهار صادرات modules.
 
 ```js
 export default {
@@ -1076,7 +1062,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to show the `publicPath`.
+يخبر `stats` لإظهار `publicPath`.
 
 ```js
 export default {
@@ -1091,7 +1077,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to add information about the reasons of why modules are included.
+يخبر `stats` بإضافة معلومات حول أسباب تضمين modules.
 
 ```js
 export default {
@@ -1108,7 +1094,7 @@ export default {
 
 <Badge text="5.46.0+" />
 
-Space to display [`reasons`](#statsreasons) (groups will be collapsed to fit this space).
+مساحة للعرض [`reasons`](#statsreasons) (سيتم طي المجموعات لتناسب هذه المساحة).
 
 ```js
 export default {
@@ -1119,13 +1105,13 @@ export default {
 };
 ```
 
-T> The [`detailed preset`](#stats-presets) limits [`modulesSpace`](#statsmodulesspace), [`assetsSpace`](#statsassetsspace), and [`reasonsSpace`](#statsreasonsspace) to 1000 by default.
+T> يحد [`detailed preset`](#stats-presets) [`modulesSpace`](#statsmodulesspace)، [`assetsSpace`](#statsassetsspace)، و[`reasonsSpace`](#statsreasonsspace) إلى 1000 بشكل افتراضي.
 
 ### stats.relatedAssets
 
 `boolean = false`
 
-Tells `stats` whether to add information about assets that are related to other assets (like SourceMaps for assets).
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول assets المرتبطة بـ assets أخرى (مثل Source Maps لـ assets).
 
 ```js
 export default {
@@ -1140,7 +1126,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` whether to add information about runtime modules.
+يخبر `stats` ما إذا كان يجب إضافة معلومات حول runtime modules.
 
 ```js
 export default {
@@ -1155,7 +1141,7 @@ export default {
 
 `boolean = false`
 
-Tells `stats` to add the source code of modules.
+يخبر `stats` بإضافة الكود المصدري لـ modules.
 
 ```js
 export default {
@@ -1170,7 +1156,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to add the timing information.
+يخبر `stats` بإضافة معلومات التوقيت.
 
 ```js
 export default {
@@ -1185,7 +1171,7 @@ export default {
 
 `boolean = false`
 
-Tells `stats` whether to show which exports of a module are used.
+يخبر `stats` ما إذا كان سيتم إظهار عمليات تصدير module المستخدمة أم لا.
 
 ```js
 export default {
@@ -1200,7 +1186,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to add information about the webpack version used.
+يخبر `stats` بإضافة معلومات حول إصدار webpack المستخدم.
 
 ```js
 export default {
@@ -1215,7 +1201,7 @@ export default {
 
 `boolean = true`
 
-Tells `stats` to add warnings.
+يخبر `stats` بإضافة تحذيرات.
 
 ```js
 export default {
@@ -1230,7 +1216,7 @@ export default {
 
 `boolean = true`
 
-Add warnings count.
+إضافة عدد التحذيرات.
 
 ```js
 export default {
@@ -1245,7 +1231,7 @@ export default {
 
 `array = []: string | RegExp | function (warning) => boolean` `string` `RegExp` `function (warning) => boolean`
 
-Tells `stats` to exclude the warnings that are matching given filters. This can be done with a `string`, a `RegExp`, a `function` that is getting a warning as an argument and returns a `boolean`. `stats.warningsFilter` can be an `array` of any of the above.
+يخبر `stats` باستبعاد التحذيرات التي تطابق المرشحات المحددة. يمكن القيام بذلك باستخدام `string`، و`RegExp`، و`function` الذي يحصل على تحذير كوسيطة ويعيد `boolean`. `stats.warningsFilter` يمكن أن يكون `array` لأي مما سبق.
 
 ```js
 export default {
@@ -1256,7 +1242,7 @@ export default {
 };
 ```
 
-W> `stats.warningsFilter` is deprecated in favor of [`ignoreWarnings`](/configuration/other-options/#ignorewarnings).
+W> تم إهمال `stats.warningsFilter` لصالح [`ignoreWarnings`](/configuration/other-options/#ignorewarnings).
 
 ### stats.warningsSpace
 
@@ -1264,7 +1250,7 @@ W> `stats.warningsFilter` is deprecated in favor of [`ignoreWarnings`](/configur
 
 `number`
 
-Tells `stats` to limit the number of lines to allocate for displaying a warning.
+يخبر `stats` بتحديد number للأسطر المخصصة لعرض التحذير.
 
 ```js
 export default {
@@ -1275,33 +1261,33 @@ export default {
 };
 ```
 
-### Sorting fields
+### فرز الحقول
 
-For `assetsSort`, `chunksSort`, and `modulesSort` there are several possible fields that you can sort items by:
+بالنسبة إلى `assetsSort` و`chunksSort` و`modulesSort` هناك العديد من الحقول المحتملة التي يمكنك فرز العناصر حسبها:
 
-- `'id'` - the item's id,
-- `'name'` - the item's name that was assigned to it upon importing,
-- `'size'` - the size of item in bytes,
-- `'chunks'` - what chunks the item originates from (for example, if there are multiple subchunks for one chunk: the subchunks will be grouped according to their main chunk),
-- `'errors'` - number of errors in items,
-- `'warnings'` - number of warnings in items,
-- `'failed'` - whether the item has failed compilation,
-- `'cacheable'` - whether the item is cacheable,
-- `'built'` - whether the asset has been built,
-- `'prefetched'` - whether the asset will be prefetched,
-- `'optional'` - whether the asset is optional.
-- `'identifier'` - identifier of the item.
-- `'index'` - item's processing index.
+- `'id'` - معرف العنصر،
+- `'name'` - اسم العنصر الذي تم تخصيصه له عند الاستيراد،
+- `'size'` - حجم العنصر بالبايت،
+- `'chunks'` - ما chunks الذي ينشأ منه العنصر (على سبيل المثال، إذا كان هناك عدة أجزاء فرعية لواحد chunk: سيتم تجميع الأجزاء الفرعية وفقًا لـ chunk الرئيسي)،
+- `'errors'` - number من الأخطاء في العناصر،
+- `'warnings'` - number من التحذيرات في العناصر،
+- `'failed'` - ما إذا كان العنصر قد فشل compilation،
+- `'cacheable'` - ما إذا كان العنصر قابلاً للتخزين المؤقت،
+- `'built'` - ما إذا كان قد تم بناء asset أم لا،
+- `'prefetched'` - ما إذا كان سيتم جلب asset مسبقًا أم لا،
+- `'optional'` - ما إذا كان asset اختياريًا.
+- `'identifier'` - معرف العنصر.
+- `'index'` - فهرس معالجة العنصر.
 - `'index2'`
 - `'profile'`
-- `'issuer'` - an identifier of the issuer.
-- `'issuerId'` - an id of the issuer.
-- `'issuerName'` - a name of the issuer.
-- `'issuerPath'` - a full issuer object. There's no real need to sort by this field.
+- `'issuer'` - معرف جهة الإصدار.
+- `'issuerId'` - معرف جهة الإصدار.
+- `'issuerName'` - اسم المُصدر.
+- `'issuerPath'` - مُصدر كامل object. ليست هناك حاجة حقيقية للفرز حسب هذا الحقل.
 
-### Extending stats behaviours
+### توسيع سلوكيات stats
 
-If you want to use one of the presets e.g. `'minimal'` but still override some of the rules: specify the desired `stats.preset` and add the customized or additional rules afterwards.
+إذا كنت تريد استخدام أحد الإعدادات المسبقة على سبيل المثال، `'minimal'` ولكن لا يزال يتجاوز بعض القواعد: حدد `stats.preset` المطلوب وأضف القواعد المخصصة أو الإضافية بعد ذلك.
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/target.mdx b/src/content/configuration/target.mdx
index 0d833b44b1d3..d9283e07c6b5 100644
--- a/src/content/configuration/target.mdx
+++ b/src/content/configuration/target.mdx
@@ -2,50 +2,40 @@
 title: Target
 sort: 13
 contributors:
-  - juangl
-  - sokra
-  - skipjack
-  - SpaceK33z
-  - pastelsky
-  - tbroadley
-  - byzyk
-  - EugeneHlushko
-  - smelukov
-  - chenxsan
-  - JamesHoran
+  - RlxChap2
 ---
 
-Webpack can compile for multiple environments or _targets_. To understand what a `target` is in detail, read through [the targets concept page](/concepts/targets/).
+يستطيع webpack أن يُصرّف لعدّة بيئات أو _targets_. ولفهم المقصود بـ `target` تفصيلاً، اقرأ [صفحة مفهوم الـ targets](/concepts/targets/).
 
 ## target
 
 `string` `[string]` `false`
 
-Instructs webpack to generate runtime code for a specific environment. Note that webpack runtime code is not the same as the user code you write, you should transpile that code with transpilers like Babel if you want to target specific environments, e.g, you have arrow functions in source code and want to run the bundled code in ES5 environments. Webpack won't transpile them automatically with a `target` configured.
+يأمر هذا الخيار webpack بتوليد شيفرة runtime مناسبة لبيئة بعينها. ولاحظ أنّ شيفرة runtime في webpack ليست هي شيفرة المستخدم التي تكتبها أنت، فإن كنت تريد استهداف بيئات معيّنة فعليك أن تُحوِّل شيفرتك بمُحوِّل كـ Babel. فإن كانت شيفرتك المصدرية فيها arrow functions وأردت تنفيذ الحزمة في بيئات ES5، فلن يُحوِّلها webpack تلقائياً لمجرّد أنّك ضبطت `target`.
 
-Defaults to `'browserslist'` or to `'web'` when no browserslist configuration was found.
+القيمة الافتراضية هي `'browserslist'`، أو `'web'` حين لا يُعثر على تخصيص browserslist.
 
 ### string
 
-The following string values are supported via [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js):
+تُدعَم القيم النصّية الآتية عبر [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js):
 
-| Option                     | Description                                                                                                                                                                                                                                                                                          |
+| الخيار                       | الوصف                                                                                                                                                                                                                                                                                                |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `async-node[[X].Y]`        | Compile for usage in a Node.js-like environment (uses `fs` and `vm` to load chunks asynchronously)                                                                                                                                                                                                   |
-| `electron[[X].Y]-main`     | Compile for [Electron](https://electronjs.org/) for main process.                                                                                                                                                                                                                                    |
-| `electron[[X].Y]-renderer` | Compile for [Electron](https://electronjs.org/) for renderer process, providing a target using `JsonpTemplatePlugin`, `FunctionModulePlugin` for browser environments and `NodeTargetPlugin` and `ExternalsPlugin` for CommonJS and Electron built-in modules.                                       |
-| `electron[[X].Y]-preload`  | Compile for [Electron](https://electronjs.org/) for renderer process, providing a target using `NodeTemplatePlugin` with `asyncChunkLoading` set to `true`, `FunctionModulePlugin` for browser environments and `NodeTargetPlugin` and `ExternalsPlugin` for CommonJS and Electron built-in modules. |
-| `node[[X].Y]`              | Compile for usage in a Node.js-like environment (uses Node.js `require` to load chunks)                                                                                                                                                                                                              |
-| `node-webkit[[X].Y]`       | Compile for usage in WebKit and uses JSONP for chunk loading. Allows importing of built-in Node.js modules and [`nw.gui`](http://docs.nwjs.io/en/latest/) (experimental)                                                                                                                             |
-| `nwjs[[X].Y]`              | The same as `node-webkit`                                                                                                                                                                                                                                                                            |
-| `web`                      | Compile for usage in a browser-like environment **(default)**                                                                                                                                                                                                                                        |
-| `webworker`                | Compile as WebWorker                                                                                                                                                                                                                                                                                 |
-| `esX`                      | Compile for specified ECMAScript version. Examples: es5, es2020.                                                                                                                                                                                                                                     |
-| `browserslist`             | Infer a platform and the ES-features from a browserslist-config **(default if browserslist config is available)**                                                                                                                                                                                    |
-
-For example, when the `target` is set to `"electron-main"`, webpack includes multiple electron specific variables.
-
-A version of `node` or `electron` may be optionally specified. This is denoted by the `[[X].Y]` in the table above.
+| `async-node[[X].Y]`        | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل `fs` و `vm` لتحميل الـ chunks بشكل غير متزامن).                                                                                                                                                                                                                                                  |
+| `electron[[X].Y]-main`     | تصريف لـ [Electron](https://electronjs.org/) خاصّ بالعملية الرئيسية (main process).                                                                                                                                                                                                                                    |
+| `electron[[X].Y]-renderer` | تصريف لـ [Electron](https://electronjs.org/) خاصّ بعملية العرض (renderer process)، ويُوفِّر هدفاً يستعمل `JsonpTemplatePlugin` و `FunctionModulePlugin` لبيئات المتصفّح، و `NodeTargetPlugin` و `ExternalsPlugin` لوحدات CommonJS ووحدات Electron المدمجة.                                       |
+| `electron[[X].Y]-preload`  | تصريف لـ [Electron](https://electronjs.org/) خاصّ بعملية العرض، ويُوفِّر هدفاً يستعمل `NodeTemplatePlugin` مع ضبط `asyncChunkLoading` على `true`، و `FunctionModulePlugin` لبيئات المتصفّح، و `NodeTargetPlugin` و `ExternalsPlugin` لوحدات CommonJS ووحدات Electron المدمجة. |
+| `node[[X].Y]`              | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل `require` الخاصة بـ Node.js لتحميل الـ chunks).                                                                                                                                                                                                                                                              |
+| `node-webkit[[X].Y]`       | تصريف للاستعمال في WebKit، ويستعمل JSONP لتحميل الـ chunks. ويُتيح استيراد وحدات Node.js المدمجة و [`nw.gui`](http://docs.nwjs.io/en/latest/) (تجريبي).                                                                                                                             |
+| `nwjs[[X].Y]`              | مثل `node-webkit` تماماً.                                                                                                                                                                                                                                                                            |
+| `web`                      | تصريف للاستعمال في بيئة شبيهة بالمتصفّح **(الافتراضي)**.                                                                                                                                                                                                                                                        |
+| `webworker`                | تصريف بوصفه WebWorker.                                                                                                                                                                                                                                                                                 |
+| `esX`                      | تصريف لإصدار ECMAScript المُحدَّد. أمثلة: es5، es2020.                                                                                                                                                                                                                                              |
+| `browserslist`             | استنتاج المنصّة وميزات ES من تخصيص browserslist **(افتراضي إن كان تخصيص browserslist متاحاً)**.                                                                                                                                                                                                    |
+
+فمثلاً، حين يكون `target` مضبوطاً على `"electron-main"`، يُضيف webpack عدّة متغيّرات خاصّة بـ electron.
+
+ويمكن اختياراً تحديد إصدار من `node` أو `electron`، وهو ما يُعبَّر عنه بـ `[[X].Y]` في الجدول أعلاه.
 
 **webpack.config.js**
 
@@ -56,26 +46,26 @@ export default {
 };
 ```
 
-It helps determinate ES-features that may be used to generate a runtime-code (all the chunks and modules are wrapped by runtime code).
+وهذا يُعين على تحديد ميزات ES التي قد تُستعمَل في توليد شيفرة runtime (إذ تُغلَّف جميع الـ chunks والوحدات داخل شيفرة runtime).
 
 #### browserslist
 
-If a project has a browserslist config, then webpack will use it for:
+إن كان للمشروع تخصيص browserslist، فإنّ webpack سيُوظِّفه في:
 
-- Determinate ES-features that may be used to generate a runtime-code.
-- Infer an environment (e.g: `last 2 node versions` the same as `target: "node"` with some [`output.environment`](/configuration/output/#outputenvironment) settings).
+- تحديد ميزات ES التي قد تُستعمَل في توليد شيفرة runtime.
+- استنتاج بيئة العمل (مثلاً: `last 2 node versions` تكافئ `target: "node"` مع بعض إعدادات [`output.environment`](/configuration/output/#outputenvironment)).
 
-Supported browserslist values:
+القيم المدعومة لـ browserslist:
 
-- `browserslist` - use automatically resolved browserslist config and environment (from the nearest `package.json` or `BROWSERSLIST` environment variable, see [browserslist documentation](https://github.com/browserslist/browserslist#queries) for details)
-- `browserslist:modern` - use `modern` environment from automatically resolved browserslist config
-- `browserslist:last 2 versions` - use an explicit browserslist query (config will be ignored)
-- `browserslist:/path/to/config` - explicitly specify browserslist config
-- `browserslist:/path/to/config:modern` - explicitly specify browserslist config and an environment
+- `browserslist` — استعمل تخصيص browserslist والبيئة المحلولين تلقائياً (من أقرب `package.json` أو من متغيّر البيئة `BROWSERSLIST`، انظر [توثيق browserslist](https://github.com/browserslist/browserslist#queries) للتفاصيل).
+- `browserslist:modern` — استعمل بيئة `modern` من تخصيص browserslist المحلول تلقائياً.
+- `browserslist:last 2 versions` — استعمل استعلام browserslist صريحاً (وسيُتجاهَل ملفّ التخصيص).
+- `browserslist:/path/to/config` — حدِّد ملفّ تخصيص browserslist صراحةً.
+- `browserslist:/path/to/config:modern` — حدِّد ملفّ تخصيص browserslist وبيئةً صراحةً.
 
 ### [string]
 
-When multiple targets are passed, then common subset of features will be used:
+حين تُمرَّر عدّة أهداف، فلن يُستعمَل إلا المشترك بين الميزات:
 
 **webpack.config.js**
 
@@ -86,9 +76,9 @@ export default {
 };
 ```
 
-Webpack will generate a runtime code for web platform and will use only ES5 features.
+سيُولِّد webpack شيفرة runtime لمنصّة الويب، ولن يستعمل سوى ميزات ES5.
 
-Not all targets may be mixed for now.
+وفي الوقت الحالي، لا يمكن مزج جميع الأهداف بحرّية.
 
 **webpack.config.js**
 
@@ -99,11 +89,11 @@ export default {
 };
 ```
 
-Will cause an error. Webpack does not support universal target for now.
+سيُسبِّب ذلك خطأً، إذ لا يدعم webpack حتى الآن هدفاً عمومياً (universal target).
 
-### false
+### خطأ شنيع
 
-Set `target` to `false` if none of the predefined targets from the list above meet your needs, no plugins will be applied.
+اضبط `target` على `false` إن لم تكفِ احتياجاتك أيّ من الأهداف المعرَّفة مُسبقاً، ولن يُطبَّق عندئذٍ أيّ plugin.
 
 **webpack.config.js**
 
@@ -114,7 +104,7 @@ export default {
 };
 ```
 
-Or you can apply specific plugins you want:
+أو يمكنك تطبيق ما تشاء من plugins بنفسك:
 
 **webpack.config.js**
 
@@ -131,4 +121,4 @@ export default {
 };
 ```
 
-When no information about the target or the [environment](/configuration/output/#outputenvironment) features is provided, then ES2015 will be used.
+وإن لم تُقدَّم أيّ معلومات عن الهدف أو عن ميزات [البيئة](/configuration/output/#outputenvironment)، فستُستعمَل ES2015.
diff --git a/src/content/configuration/watch.mdx b/src/content/configuration/watch.mdx
index b8594415cdaf..45c923c1e11b 100644
--- a/src/content/configuration/watch.mdx
+++ b/src/content/configuration/watch.mdx
@@ -2,25 +2,16 @@
 title: Watch and WatchOptions
 sort: 14
 contributors:
-  - sokra
-  - skipjack
-  - SpaceK33z
-  - EugeneHlushko
-  - byzyk
-  - spicalous
-  - Neob91
-  - Loonride
-  - snitin315
-  - chenxsan
+  - RlxChap2
 ---
 
-Webpack can watch files and recompile whenever they change. This page explains how to enable this and a couple of tweaks you can make if watching does not work properly for you.
+يستطيع webpack أن يُراقب الملفّات ويعيد التصريف كلّما تغيّرت. وتشرح لك هذه الصفحة كيف تُفعِّل هذه الميزة، وبعض التعديلات الصغيرة التي قد تحتاج إليها إن لم تعمل المراقبة على ما يُرام.
 
 ## watch
 
 `boolean = false`
 
-Turn on watch mode. This means that after the initial build, webpack will continue to watch for changes in any of the resolved files.
+يُفعِّل وضع المراقبة. أي أنّ webpack، بعد بنائه الأوّل، سيظلّ يُراقب أيّ تغيّر يطرأ على الملفّات التي حلّلها.
 
 **webpack.config.js**
 
@@ -31,13 +22,13 @@ export default {
 };
 ```
 
-T> In [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) watch mode is enabled by default.
+T> في [webpack-dev-server](https://github.com/webpack/webpack-dev-server) و[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) يكون وضع المراقبة مُفعَّلاً افتراضياً.
 
 ## watchOptions
 
 `object`
 
-A set of options used to customize watch mode:
+مجموعة خيارات تُستعمَل لتطويع وضع المراقبة:
 
 **webpack.config.js**
 
@@ -55,7 +46,7 @@ export default {
 
 `number = 20`
 
-Add a delay before rebuilding once the first file changed. This allows webpack to aggregate any other changes made during this time period into one rebuild. Pass a value in milliseconds:
+يُضيف تأخيراً قبل إعادة البناء بعد أوّل تغيّر يطرأ على ملفّ. وذلك حتى يُتاح لـ webpack تجميع التغييرات الأخرى التي تقع خلال هذه المهلة في عملية بناء واحدة. تُمرَّر القيمة بالميلي ثانية:
 
 ```js
 export default {
@@ -70,7 +61,7 @@ export default {
 
 `RegExp` `string` `[string]`
 
-For some systems, watching many files can result in a lot of CPU or memory usage. It is possible to exclude a huge folder like `node_modules` using a regular expression:
+قد تستنزف مراقبة كثير من الملفّات قدراً ملحوظاً من المعالج أو الذاكرة في بعض الأنظمة. ويمكنك استثناء مجلَّد ضخم كـ `node_modules` بتعبير نمطي:
 
 **webpack.config.js**
 
@@ -83,7 +74,7 @@ export default {
 };
 ```
 
-Alternatively, a glob pattern may be used:
+كما يمكنك استعمال نمط glob:
 
 **webpack.config.js**
 
@@ -96,7 +87,7 @@ export default {
 };
 ```
 
-It is also possible to use multiple glob patterns:
+أو حتى أنماط glob متعدّدة:
 
 **webpack.config.js**
 
@@ -109,7 +100,7 @@ export default {
 };
 ```
 
-In addition, you can specify an absolute path:
+وفضلاً عن ذلك، تستطيع تحديد مسار مطلق:
 
 ```js
 import path from "node:path";
@@ -126,15 +117,15 @@ export default {
 };
 ```
 
-When using glob patterns, we convert them to regular expressions with [`glob-to-regexp`](https://github.com/fitzgen/glob-to-regexp), so make sure to get yourself familiar with it before you use glob patterns for `watchOptions.ignored`.
+عند استعمال أنماط glob، فإننا نُحوِّلها إلى تعابير نمطية عبر [`glob-to-regexp`](https://github.com/fitzgen/glob-to-regexp)، لذا تأكّد من إلمامك بها قبل أن تستعملها في `watchOptions.ignored`.
 
-T> If you use `require.context`, webpack will watch your entire directory. You will need to ignore files and/or directories so that unwanted changes will not trigger a rebuild.
+T> إن كنت تستعمل `require.context`، فسيُراقب webpack مجلَّدك بأكمله، فستحتاج إلى تجاهل ملفّات أو مجلَّدات حتى لا تستثير التغييرات غير المرغوب فيها عمليّة إعادة بناء.
 
 ### watchOptions.poll
 
 `boolean = false` `number`
 
-Turn on [polling](<https://en.wikipedia.org/wiki/Polling_(computer_science)>) by passing `true` which would set the default poll interval to [`5007`](https://github.com/webpack/watchpack/blob/a54bcdb95759558ca5a9fc2819c4d71b771c162f/lib/DirectoryWatcher.js#L79), or specifying a poll interval in milliseconds:
+فعِّل [الاستطلاع (polling)](<https://en.wikipedia.org/wiki/Polling_(computer_science)>) بتمرير `true` فيُضبط فاصل الاستطلاع الافتراضي على [`5007`](https://github.com/webpack/watchpack/blob/a54bcdb95759558ca5a9fc2819c4d71b771c162f/lib/DirectoryWatcher.js#L79)، أو حدِّد فاصلاً مخصَّصاً بالميلي ثانية:
 
 **webpack.config.js**
 
@@ -142,19 +133,19 @@ Turn on [polling](<https://en.wikipedia.org/wiki/Polling_(computer_science)>) by
 export default {
   // ...
   watchOptions: {
-    poll: 1000, // Check for changes every second
+    poll: 1000, // افحص التغيّرات كلّ ثانية
   },
 };
 ```
 
-T> If watching does not work for you, try out this option. This may help issues with NFS and machines in VirtualBox, WSL, Containers, or Docker. In those cases, use a polling interval and ignore large folders like `/node_modules/` to keep CPU usage minimal.
+T> إن كانت المراقبة لا تعمل لديك، فجرّب هذا الخيار. قد يحلّ مشاكل NFS والأجهزة التي تعمل ضمن VirtualBox و WSL والحاويات و Docker. وفي هذه الحالات، يُفضَّل استعمال فاصل استطلاع مع تجاهل المجلَّدات الكبيرة كـ `/node_modules/` حتى يبقى استهلاك المعالج في أدنى مستوياته.
 
 ### watchOptions.followSymlinks
 
-Follow symbolic links while looking for a file. This is usually not needed as webpack already resolves symlinks with [`resolve.symlinks`](/configuration/resolve/#resolvesymlinks).
+تتبَّع الروابط الرمزية (symbolic links) أثناء البحث عن الملفّ. وهذا الخيار لا يُحتاج إليه عادةً، إذ أنّ webpack يُحلِّل هذه الروابط أصلاً عبر [`resolve.symlinks`](/configuration/resolve/#resolvesymlinks).
 
-- Type: `boolean`
-- Example:
+- النوع: `boolean`
+- مثال:
 
   ```js
   export default {
@@ -167,10 +158,10 @@ Follow symbolic links while looking for a file. This is usually not needed as we
 
 ### watchOptions.stdin
 
-Stop watching when stdin stream has ended.
+أوقف المراقبة عند انتهاء التيار stdin.
 
-- Type: `boolean`
-- Example:
+- النوع: `boolean`
+- مثال:
 
   ```js
   export default {
@@ -181,44 +172,44 @@ Stop watching when stdin stream has ended.
   };
   ```
 
-## Troubleshooting
+## استكشاف الأخطاء وحلّها
 
-If you are experiencing any issues, please see the following notes. There are a variety of reasons why webpack might miss a file change.
+إن واجهتك أيّ مشكلات، فعُد إلى الملاحظات الآتية، إذ هناك أسباب عدّة قد تجعل webpack يُفوّت تغيّراً في ملفّ.
 
-### Changes Seen But Not Processed
+### تغييرات يراها webpack لكنه لا يُعالجها
 
-Verify that webpack is not being notified of changes by running webpack with the --progress flag. If progress shows on save but no files are outputted, it is likely a configuration issue, not a file watching issue.
+تأكّد من أنّ webpack يصله إشعار بالتغييرات، وذلك بتشغيله مع الراية `--progress`. فإن ظهر التقدّم عند الحفظ ولم يُخرج ملفّات، فالأرجح أنّ المشكلة في التخصيص لا في مراقبة الملفّات.
 
 ```bash
 webpack --watch --progress
 ```
 
-### Not Enough Watchers
+### عدد الـ watchers لا يكفي
 
-Verify that you have enough available watchers in your system. If this value is too low, the file watcher in Webpack won't recognize the changes:
+تأكّد من أنّ لديك عدداً كافياً من الـ watchers المتاحة في نظامك. فإن كانت القيمة منخفضة، لن يلاحظ webpack التغييرات:
 
 ```bash
 cat /proc/sys/fs/inotify/max_user_watches
 ```
 
-Arch users, add `fs.inotify.max_user_watches=524288` to `/etc/sysctl.d/99-sysctl.conf` and then execute `sysctl --system`. Ubuntu users (and possibly others), execute: `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`.
+على مستخدمي Arch، أضف `fs.inotify.max_user_watches=524288` إلى `/etc/sysctl.d/99-sysctl.conf` ثمّ شغِّل `sysctl --system`. وعلى مستخدمي Ubuntu (وربما غيرهم)، شغِّل: `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`.
 
-### macOS fsevents Bug
+### علّة fsevents على macOS
 
-On macOS, folders can get corrupted in certain scenarios. See [this article](https://github.com/livereload/livereload-site/blob/master/livereload.com/_articles/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders.md).
+على macOS، قد تتلف بعض المجلَّدات في حالات معيّنة. اطّلع على [هذه المقالة](https://github.com/livereload/livereload-site/blob/master/livereload.com/_articles/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders.md).
 
-### Windows Paths
+### مسارات Windows
 
-Because webpack expects absolute paths for many configuration options such as `__dirname + '/app/folder'` the Windows `\` path separator can break some functionality.
+لمّا كان webpack ينتظر مسارات مطلقة في كثير من خيارات التخصيص مثل `__dirname + '/app/folder'`، فإنّ فاصل المسارات `\` في Windows قد يُخلّ ببعض الوظائف.
 
-Use the correct separators. I.e. `path.resolve(__dirname, 'app/folder')` or `path.join(__dirname, 'app', 'folder')`.
+استعمل الفواصل الصحيحة، أي `path.resolve(__dirname, 'app/folder')` أو `path.join(__dirname, 'app', 'folder')`.
 
-### Vim
+### همة
 
-On some machines Vim is preconfigured with the [backupcopy option](http://vimdoc.sourceforge.net/htmldoc/options.html#'backupcopy') set to `auto`. This could potentially cause problems with the system's file watching mechanism. Switching this option to `yes` will make sure a copy of the file is made and the original one overwritten on save.
+في بعض الأجهزة، يكون Vim مضبوطاً مُسبقاً مع الخيار [backupcopy](http://vimdoc.sourceforge.net/htmldoc/options.html#'backupcopy') على `auto`، وهذا قد يُسبِّب مشكلات مع آلية مراقبة الملفّات في النظام. فبتبديل هذا الخيار إلى `yes` تضمن إنشاء نسخة من الملفّ والكتابة فوق الأصلي عند الحفظ.
 
 `:set backupcopy=yes`
 
-### Saving in WebStorm
+### الحفظ في WebStorm
 
-When using the JetBrains WebStorm IDE, you may find that saving changed files does not trigger the watcher as you might expect. Try disabling the `Back up files before saving` option in the settings, which determines whether files are saved to a temporary location first before the originals are overwritten: uncheck `File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving`. On some versions of Webstorm, this option may be called `Use "safe write" (save changes to a temporary file first)`.
+عند استعمال بيئة JetBrains WebStorm، قد تجد أنّ حفظ الملفّات المُعدَّلة لا يُحرِّك المُراقب كما تتوقّع. جرِّب تعطيل خيار `Back up files before saving` في الإعدادات، وهو الخيار الذي يُحدِّد ما إذا كانت الملفّات تُحفظ في موقع مؤقَّت قبل الكتابة فوق الأصلي: ألغِ التأشير عن `File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving`. وفي بعض إصدارات WebStorm، قد يُسمَّى هذا الخيار `Use "safe write" (save changes to a temporary file first)`.

From 388f5537e0c6993af7f2d0bdeed8c1e84b1a0876 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 19 May 2026 17:11:41 +0300
Subject: [PATCH 03/35] docs(configuration): edited language terms

---
 src/content/configuration/other-options.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx
index 7805fcaf2942..6056cc423f33 100644
--- a/src/content/configuration/other-options.mdx
+++ b/src/content/configuration/other-options.mdx
@@ -12,7 +12,7 @@ related:
 
 W> نحتاج إلى مُساهَمات: لا تزال هذه الصفحة قيد الإنجاز. فإن كنت ضليعاً في أيّ من الخيارات التي بقي وصفها أو أمثلتها ناقصاً، فأنشئ Issue وقدِّم PR في [مستودع التوثيق](https://github.com/webpack/webpack.js.org)!
 
-## ايه ام دي
+## AMD
 
 `object` `boolean: false`
 

From 8c74c7ddb0dae4a787e1a0b29a1f54900f700477 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Wed, 20 May 2026 19:35:26 +0300
Subject: [PATCH 04/35] docs(ar): add final newlines

---
 src/content/blog/2020-10-10-webpack-5-release.mdx | 2 +-
 src/content/blog/2020-12-08-roadmap-2021.mdx      | 2 +-
 src/content/blog/2026-02-03-webpack-5-105.mdx     | 2 +-
 src/content/blog/2026-02-04-roadmap-2026.mdx      | 2 +-
 src/content/blog/2026-04-08-webpack-5-106.mdx     | 2 +-
 src/content/blog/index.mdx                        | 2 +-
 src/content/configuration/configuration-types.mdx | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/blog/2020-10-10-webpack-5-release.mdx b/src/content/blog/2020-10-10-webpack-5-release.mdx
index 29c1638ad42c..b8bf968a8f6d 100644
--- a/src/content/blog/2020-10-10-webpack-5-release.mdx
+++ b/src/content/blog/2020-10-10-webpack-5-release.mdx
@@ -1438,4 +1438,4 @@ module.exports = {
 - إضافة `Compilation.deleteAsset` لحذف الأصول (assets) والأصول غير المشتركة ذات الصلة بشكل صحيح
 - عرض `require("webpack-sources")` على هيئة `require("webpack").sources`
 - terser 5
-- يمكن كتابة Webpack بحرف W كبير عندما يكون في بداية جملة
\ No newline at end of file
+- يمكن كتابة Webpack بحرف W كبير عندما يكون في بداية جملة
diff --git a/src/content/blog/2020-12-08-roadmap-2021.mdx b/src/content/blog/2020-12-08-roadmap-2021.mdx
index c9d5e1db2026..97a5a1c14dba 100644
--- a/src/content/blog/2020-12-08-roadmap-2021.mdx
+++ b/src/content/blog/2020-12-08-roadmap-2021.mdx
@@ -230,4 +230,4 @@ W> استخدام شبكات CDN متعددة لـ ESM لن يعمل. هذا م
 
 هذه القائمة ليست مكتوبة على حجر.
 يتغير نظام الويب البيئي (web ecosystem) بسرعة كبيرة لدرجة أننا ربما ينتهي بنا الأمر بتنفيذ أشياء مختلفة تمامًا، والتي ربما لا نكون حتى على دراية بها في هذا الوقت.
-نحن لا نعرف حتى مقدار الوقت الذي يمكننا استثماره في webpack، بالنظر إلى وضع الرعاية الحالي لدينا.
\ No newline at end of file
+نحن لا نعرف حتى مقدار الوقت الذي يمكننا استثماره في webpack، بالنظر إلى وضع الرعاية الحالي لدينا.
diff --git a/src/content/blog/2026-02-03-webpack-5-105.mdx b/src/content/blog/2026-02-03-webpack-5-105.mdx
index 1e7b5e003c8f..bcfce43778cd 100644
--- a/src/content/blog/2026-02-03-webpack-5-105.mdx
+++ b/src/content/blog/2026-02-03-webpack-5-105.mdx
@@ -223,4 +223,4 @@ module.exports = {
 
 ## شكر
 
-شكر كبير لجميع المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring) الذين جعلوا Webpack 5.105 ممكنًا. دعمكم، سواء كان عبر المساهمة بالكود، أو التوثيق، أو الرعاية المالية، يساعد في استمرار تطور وتحسن Webpack للجميع.
\ No newline at end of file
+شكر كبير لجميع المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring) الذين جعلوا Webpack 5.105 ممكنًا. دعمكم، سواء كان عبر المساهمة بالكود، أو التوثيق، أو الرعاية المالية، يساعد في استمرار تطور وتحسن Webpack للجميع.
diff --git a/src/content/blog/2026-02-04-roadmap-2026.mdx b/src/content/blog/2026-02-04-roadmap-2026.mdx
index 6dfefde41552..75e7c72e6268 100644
--- a/src/content/blog/2026-02-04-roadmap-2026.mdx
+++ b/src/content/blog/2026-02-04-roadmap-2026.mdx
@@ -156,4 +156,4 @@ contributors:
 
 شكرًا لاهتمامك ولرغبتك في معرفة خارطة طريقنا لعام 2026. إذا كنت فضوليًا بشأن المساهمة في المنظمة سواء **ماليًا** أو بأي شكل آخر، فأرسل لنا رسالة خاصة أو عامة في [Discord](https://discord.com/invite/webpack)، أو تواصل معنا عبر [البريد الإلكتروني](mailto:webpack-security@openjsf.org) أو اتصل بأحد أعضاء [TSC](https://github.com/webpack/webpack?tab=readme-ov-file#tsc-technical-steering-committee).
 
-~ لجنة التوجيه الفني في webpack 💙
\ No newline at end of file
+~ لجنة التوجيه الفني في webpack 💙
diff --git a/src/content/blog/2026-04-08-webpack-5-106.mdx b/src/content/blog/2026-04-08-webpack-5-106.mdx
index ea3d5aa6885f..9e1d9527a246 100644
--- a/src/content/blog/2026-04-08-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-08-webpack-5-106.mdx
@@ -318,4 +318,4 @@ module.exports = {
 ## شكر
 
 شكر كبير لجميع المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
-الذين جعلوا Webpack 5.106 ممكنًا. دعمكم، سواء كان عبر المساهمة بالكود، أو التوثيق، أو الرعاية المالية، يساعد في استمرار تطور وتحسن Webpack للجميع.
\ No newline at end of file
+الذين جعلوا Webpack 5.106 ممكنًا. دعمكم، سواء كان عبر المساهمة بالكود، أو التوثيق، أو الرعاية المالية، يساعد في استمرار تطور وتحسن Webpack للجميع.
diff --git a/src/content/blog/index.mdx b/src/content/blog/index.mdx
index d1f396fdc99d..1d753b2b3cd3 100644
--- a/src/content/blog/index.mdx
+++ b/src/content/blog/index.mdx
@@ -8,4 +8,4 @@ contributors:
 
 اقرأ الإعلانات هنا.
 
-شاهد أحدث مقالات المدونة في الشريط الجانبي.
\ No newline at end of file
+شاهد أحدث مقالات المدونة في الشريط الجانبي.
diff --git a/src/content/configuration/configuration-types.mdx b/src/content/configuration/configuration-types.mdx
index 7af6f1caa370..95a39634f7e1 100644
--- a/src/content/configuration/configuration-types.mdx
+++ b/src/content/configuration/configuration-types.mdx
@@ -121,4 +121,4 @@ const config = [
 ];
 config.parallelism = 1;
 export default config;
-```
\ No newline at end of file
+```

From 65360012de5b265201e9a2d5fa77a917534af94c Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Wed, 20 May 2026 21:04:48 +0300
Subject: [PATCH 05/35] docs(concept): translated concepts files

---
 package-lock.json                             |  33 ---
 src/content/concepts/configuration.mdx        |  56 +++--
 src/content/concepts/dependency-graph.mdx     |  11 +-
 src/content/concepts/entry-points.mdx         | 113 ++++------
 .../concepts/hot-module-replacement.mdx       |  71 +++---
 src/content/concepts/index.mdx                | 114 +++++-----
 src/content/concepts/loaders.mdx              |  92 ++++----
 src/content/concepts/manifest.mdx             |  27 ++-
 src/content/concepts/module-federation.mdx    | 210 +++++++++---------
 src/content/concepts/module-resolution.mdx    |  63 +++---
 src/content/concepts/modules.mdx              |  56 +++--
 src/content/concepts/output.mdx               |  24 +-
 src/content/concepts/plugins.mdx              |  34 ++-
 src/content/concepts/targets.mdx              |  37 ++-
 src/content/concepts/under-the-hood.mdx       |  83 ++++---
 src/content/concepts/why-webpack.mdx          |  49 ++--
 16 files changed, 491 insertions(+), 582 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5440fc905745..e5f6e1777845 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27914,21 +27914,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/tagged-tag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
-      "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/tailwind-merge": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
@@ -28647,24 +28632,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/type-fest": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.6.0.tgz",
-      "integrity": "sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tagged-tag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
diff --git a/src/content/concepts/configuration.mdx b/src/content/concepts/configuration.mdx
index 34ce7c721cf3..3f5e7d5c4110 100644
--- a/src/content/concepts/configuration.mdx
+++ b/src/content/concepts/configuration.mdx
@@ -2,36 +2,32 @@
 title: Configuration
 sort: 5
 contributors:
-  - TheLarkInn
-  - simon04
-  - EugeneHlushko
-  - byzyk
-  - mr-baraiya
+  - RlxChap2
 ---
 
-You may have noticed that few webpack configurations look exactly alike. This is because **webpack's configuration file is a JavaScript file that exports a webpack [configuration](/configuration/).** This configuration is then processed by webpack based upon its defined properties.
+ربما لاحظت أن ملفات تكوين webpack نادرًا ما تبدو متطابقة تمامًا. والسبب أن **ملف تكوين webpack هو ملف JavaScript يصدّر [تكوينًا](/configuration/) خاصًا بـ webpack.** بعد ذلك يعالج webpack هذا التكوين بناءً على الخصائص المعرّفة فيه.
 
-Because it's a standard Node.js module, you **can do the following**:
+ولأنه وحدة Node.js قياسية، يمكنك **فعل الآتي**:
 
-- Import other files via `require(...)` **or** `import`
-- Use utilities on npm via `require(...)` **or** `import`
-- Use JavaScript control flow expressions (e.g. `?:`, `if`, `for`, etc.)
-- Use constants or variables for often used values
-- Write and execute functions to generate a part of the configuration
+- استيراد ملفات أخرى باستخدام `require(...)` **أو** `import`
+- استخدام أدوات من npm باستخدام `require(...)` **أو** `import`
+- استخدام تعبيرات التحكم في JavaScript مثل `?:` و `if` و `for` وغيرها
+- استخدام الثوابت أو المتغيرات للقيم التي تتكرر كثيرًا
+- كتابة دوال وتنفيذها لتوليد جزء من التكوين
 
-Use these features when appropriate.
+استخدم هذه الإمكانات عندما تكون مناسبة.
 
-While they are technically feasible, **the following practices should be avoided**:
+مع أنها ممكنة تقنيًا، **ينبغي تجنب الممارسات الآتية**:
 
-- Access CLI arguments, when using the webpack CLI. This can make your configuration non-portable and harder to maintain. Instead, write your own CLI, or [use `--env`](/api/cli/#env) to pass environment variables.
-- Export non-deterministic values (calling webpack twice should result in the same output files)
-- Write long configurations (instead split the configuration into multiple files)
+- الوصول إلى وسائط CLI عند استخدام webpack CLI. قد يجعل ذلك التكوين غير قابل للنقل وأصعب في الصيانة. بدلًا من ذلك، اكتب CLI خاصًا بك، أو [استخدم `--env`](/api/cli/#env) لتمرير متغيرات البيئة.
+- تصدير قيم غير حتمية؛ تشغيل webpack مرتين يجب أن ينتج الملفات نفسها.
+- كتابة تكوينات طويلة؛ من الأفضل تقسيم التكوين إلى عدة ملفات.
 
-T> The most important part to take away from this document is that there are many different ways to format and style your webpack configuration. The key is to stick with something consistent that you and your team can understand and maintain.
+T> أهم ما ينبغي الخروج به من هذه الصفحة هو أن هناك طرقًا كثيرة لتنسيق وكتابة تكوين webpack. المهم هو الالتزام بأسلوب ثابت تستطيع أنت وفريقك فهمه وصيانته.
 
-The examples below describe how webpack's configuration can be both expressive and configurable because _it is code_:
+توضح الأمثلة التالية كيف يمكن لتكوين webpack أن يكون معبرًا وقابلًا للضبط لأنه _كود_:
 
-## Introductory Configuration
+## تكوين تمهيدي
 
 **webpack.config.js**
 
@@ -52,13 +48,13 @@ export default {
 };
 ```
 
-_See_: [Configuration section](/configuration/) for all supported configuration options
+_راجع_: [قسم التكوين](/configuration/) للاطلاع على جميع خيارات التكوين المدعومة.
 
-## Using multiple configurations
+## استخدام عدة تكوينات
 
-Webpack supports exporting multiple configuration objects, which can be useful when building different targets or outputs (for example, separate client and server bundles).
+يدعم webpack تصدير عدة كائنات تكوين، وهذا مفيد عند بناء أهداف أو مخرجات مختلفة، مثل حزم منفصلة للعميل والخادم.
 
-While a single configuration is sufficient for many projects, multiple configurations can help organize more complex setups.
+مع أن تكوينًا واحدًا يكفي لكثير من المشاريع، تساعد التكوينات المتعددة على تنظيم الإعدادات الأكثر تعقيدًا.
 
 ```js
 module.exports = [
@@ -77,14 +73,14 @@ module.exports = [
 ];
 ```
 
-## Multiple Targets
+## أهداف متعددة
 
-Along with exporting a single configuration as an object, [function](/configuration/configuration-types/#exporting-a-function) or [Promise](/configuration/configuration-types/#exporting-a-promise), you can export multiple configurations.
+إلى جانب تصدير تكوين واحد على هيئة كائن أو [دالة](/configuration/configuration-types/#exporting-a-function) أو [Promise](/configuration/configuration-types/#exporting-a-promise)، يمكنك تصدير عدة تكوينات.
 
-_See_: [Exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations)
+_راجع_: [تصدير عدة تكوينات](/configuration/configuration-types/#exporting-multiple-configurations)
 
-## Using other Configuration Languages
+## استخدام لغات تكوين أخرى
 
-Webpack accepts configuration files written in multiple programming and data languages.
+يقبل webpack ملفات تكوين مكتوبة بعدة لغات برمجة ولغات بيانات.
 
-_See_: [Configuration Languages](/configuration/configuration-languages/)
+_راجع_: [لغات التكوين](/configuration/configuration-languages/)
diff --git a/src/content/concepts/dependency-graph.mdx b/src/content/concepts/dependency-graph.mdx
index 691190ff4f61..4f2bddd05433 100644
--- a/src/content/concepts/dependency-graph.mdx
+++ b/src/content/concepts/dependency-graph.mdx
@@ -2,8 +2,7 @@
 title: Dependency Graph
 sort: 9
 contributors:
-  - TheLarkInn
-  - EugeneHlushko
+  - RlxChap2
 related:
   - title: HTTP2 Aggressive Splitting Example
     url: https://github.com/webpack/webpack/tree/master/examples/http2-aggressive-splitting
@@ -11,9 +10,9 @@ related:
     url: https://medium.com/webpack/webpack-http-2-7083ec3f3ce6
 ---
 
-Any time one file depends on another, webpack treats this as a _dependency_. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as _dependencies_ for your application.
+كلما اعتمد ملف على ملف آخر، يتعامل webpack مع ذلك على أنه _تبعية_. يسمح هذا لـ webpack بأخذ أصول غير برمجية، مثل الصور أو خطوط الويب، وتقديمها أيضًا على أنها _تبعيات_ لتطبيقك.
 
-When webpack processes your application, it starts from a list of modules defined on the command line or in its configuration file.
-Starting from these [_entry points_](/concepts/entry-points/), webpack recursively builds a _dependency graph_ that includes every module your application needs, then bundles all of those modules into a small number of _bundles_ - often, only one - to be loaded by the browser.
+عندما يعالج webpack تطبيقك، يبدأ من قائمة وحدات معرّفة في سطر الأوامر أو في ملف التكوين.
+وانطلاقًا من [_نقاط الدخول_](/concepts/entry-points/)، يبني webpack بشكل تكراري _مخطط تبعيات_ يتضمن كل وحدة يحتاجها تطبيقك، ثم يجمع كل هذه الوحدات في عدد قليل من _الحزم_، وغالبًا في حزمة واحدة فقط، ليحمّلها المتصفح.
 
-T> Bundling your application is especially powerful for _HTTP/1.1_ clients, as it minimizes the number of times your app has to wait while the browser starts a new request. For _HTTP/2_, you can also use [Code Splitting](/guides/code-splitting/) to achieve best results.
+T> تجميع تطبيقك في حزم قوي خصوصًا لعملاء _HTTP/1.1_ لأنه يقلل عدد المرات التي ينتظر فيها التطبيق بدء المتصفح لطلب جديد. أما مع _HTTP/2_، فيمكنك أيضًا استخدام [تقسيم الكود](/guides/code-splitting/) للوصول إلى أفضل النتائج.
diff --git a/src/content/concepts/entry-points.mdx b/src/content/concepts/entry-points.mdx
index 7b6e33cb1b04..bb160c116367 100644
--- a/src/content/concepts/entry-points.mdx
+++ b/src/content/concepts/entry-points.mdx
@@ -2,38 +2,23 @@
 title: Entry Points
 sort: 1
 contributors:
-  - TheLarkInn
-  - chrisVillanueva
-  - byzyk
-  - sokra
-  - EugeneHlushko
-  - Zearin
-  - chenxsan
-  - adyjs
-  - anshumanv
-  - ritikbanger
-  - saishankar404
+  - RlxChap2
 ---
 
-As mentioned in [Getting Started](/guides/getting-started/#using-a-configuration), there are multiple ways to define the `entry` property in your webpack configuration. We will show you the ways you **can** configure the `entry` property, in addition to explaining why it may be useful to you.
+كما ذُكر في [دليل البدء](/guides/getting-started/#using-a-configuration)، توجد عدة طرق لتعريف خاصية `entry` في تكوين webpack. سنعرض الطرق التي **يمكنك** بها ضبط خاصية `entry`، إلى جانب شرح سبب فائدتها لك.
 
-In simple terms, an entry point tells webpack where to start building
-its internal dependency graph. Starting from this file, webpack
-recursively follows all imported modules and assets to determine
-what should be included in the final bundle.
+ببساطة، تخبر نقطة الدخول webpack من أين يبدأ بناء مخطط التبعيات الداخلي. انطلاقًا من هذا الملف، يتتبع webpack بشكل تكراري كل الوحدات والأصول المستوردة لتحديد ما يجب تضمينه في الحزمة النهائية.
 
-The result of this process is later written to disk according to the
-`output` configuration, which controls where and how the bundled
-files are emitted.
+تُكتب نتيجة هذه العملية لاحقًا إلى القرص وفقًا لتكوين `output`، الذي يتحكم في مكان وكيفية إصدار الملفات المجمعة.
 
-T> When running webpack without a configuration file, the entry defaults to `'./src/index.js'`. If that file is missing — even if your `src/` directory exists — webpack will throw: <br /> **`ERROR in Entry module not found: Error: Can't resolve './src'`** <br /><br /> The error says `'./src'` rather than `'./src/index.js'` because webpack resolves the directory first, then fails to find `index.js` inside it. To use a different entry filename, configure the `entry` option as shown in the sections below.
+T> عند تشغيل webpack بدون ملف تكوين، تكون نقطة الدخول الافتراضية هي `'./src/index.js'`. إذا كان هذا الملف غير موجود، حتى لو كان مجلد `src/` موجودًا، سيرمي webpack الخطأ: <br /> **`ERROR in Entry module not found: Error: Can't resolve './src'`** <br /><br /> تظهر الرسالة `'./src'` بدلًا من `'./src/index.js'` لأن webpack يحاول أولًا حلّ المجلد، ثم يفشل في إيجاد `index.js` داخله. لاستخدام اسم ملف دخول مختلف، اضبط خيار `entry` كما هو موضح في الأقسام التالية.
 
-## Single Entry (Shorthand) Syntax
+## صيغة نقطة دخول واحدة (مختصرة)
 
-Usage: `entry: string | [string]`
+الاستخدام: `entry: string | [string]`
 
-- `string`: a single entry file
-- `[string]`: multiple entry files
+- `string`: ملف دخول واحد
+- `[string]`: عدة ملفات دخول
 
 **webpack.config.js**
 
@@ -43,7 +28,7 @@ export default {
 };
 ```
 
-The single entry syntax for the `entry` property is a shorthand for:
+صيغة نقطة الدخول الواحدة لخاصية `entry` هي اختصار لما يلي:
 
 **webpack.config.js**
 
@@ -55,7 +40,7 @@ export default {
 };
 ```
 
-We can also pass an array of file paths to the `entry` property which creates what is known as a **"multi-main entry"**. This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".
+يمكننا أيضًا تمرير مصفوفة من مسارات الملفات إلى خاصية `entry`، وهذا ينشئ ما يُعرف باسم **"multi-main entry"**. يكون ذلك مفيدًا عندما تريد حقن عدة ملفات مترابطة معًا ورسم تبعياتها داخل "chunk" واحد.
 
 **webpack.config.js**
 
@@ -65,13 +50,12 @@ export default {
 };
 ```
 
-When an array is provided for an entry point, webpack still creates a **single entry chunk**.
-All modules in the array are loaded in the given order and combined into the same dependency graph.
+عند توفير مصفوفة لنقطة الدخول، لا يزال webpack ينشئ **entry chunk واحدًا**.
+تُحمّل كل الوحدات الموجودة في المصفوفة بالترتيب المعطى وتُدمج في مخطط التبعيات نفسه.
 
-This pattern is commonly used to inject additional code before the main application entry,
-such as polyfills or development-only tools, without manually importing them in the application source.
+يُستخدم هذا النمط غالبًا لحقن كود إضافي قبل نقطة دخول التطبيق الرئيسية، مثل polyfills أو أدوات خاصة بالتطوير، بدون استيرادها يدويًا في مصدر التطبيق.
 
-**Example: Injecting a polyfill**
+**مثال: حقن polyfill**
 
 ```js
 export default {
@@ -81,16 +65,16 @@ export default {
 };
 ```
 
-Single Entry Syntax is a great choice when you are looking to quickly set up a webpack configuration for an application or tool with one entry point (i.e. a library). However, there is not much flexibility in extending or scaling your configuration with this syntax.
+تُعد صيغة نقطة الدخول الواحدة خيارًا جيدًا عندما تريد إعداد تكوين webpack بسرعة لتطبيق أو أداة ذات نقطة دخول واحدة، مثل مكتبة. لكن هذه الصيغة لا تمنح مرونة كبيرة عند توسيع التكوين أو جعله قابلًا للنمو.
 
-## Object Syntax
+## صيغة الكائن
 
-Usage: `entry: { <entryChunkName> string | [string] } | {}`
+الاستخدام: `entry: { <entryChunkName> string | [string] } | {}`
 
-- `<entryChunkName>`: name of the entry chunk
-- `string`: single entry file
-- `[string]`: multiple entry files
-- `{}`: empty object
+- `<entryChunkName>`: اسم entry chunk
+- `string`: ملف دخول واحد
+- `[string]`: عدة ملفات دخول
+- `{}`: كائن فارغ
 
 **webpack.config.js**
 
@@ -103,23 +87,22 @@ export default {
 };
 ```
 
-The object syntax is more verbose. However, this is the most scalable way of defining entry/entries in your application.
+صيغة الكائن أكثر تفصيلًا، لكنها الطريقة الأكثر قابلية للتوسع لتعريف نقطة أو نقاط الدخول في تطبيقك.
 
-T> **"Scalable webpack configurations"** are ones that can be reused and combined with other partial configurations. This is a popular technique used to separate concerns by environment, build target, and runtime. They are then merged using specialized tools like [webpack-merge](https://github.com/survivejs/webpack-merge).
+T> **"تكوينات webpack القابلة للتوسع"** هي التكوينات التي يمكن إعادة استخدامها ودمجها مع تكوينات جزئية أخرى. هذه تقنية شائعة لفصل الاهتمامات حسب البيئة وهدف البناء ووقت التشغيل. بعد ذلك تُدمج باستخدام أدوات متخصصة مثل [webpack-merge](https://github.com/survivejs/webpack-merge).
 
-T> You can pass empty object `{}` to `entry` when you have only entry points generated by plugins.
+T> يمكنك تمرير كائن فارغ `{}` إلى `entry` عندما تكون لديك نقاط دخول يولدها plugins فقط.
 
-### EntryDescription object
+### كائن EntryDescription
 
-An object of entry point description. You can specify the following properties.
+هو كائن يصف نقطة الدخول. يمكنك تحديد الخصائص الآتية:
 
-- `dependOn`: The entry points that the current entry point depends on. They must be loaded before this entry point is loaded.
-- `filename`: Specifies the name of each output file on disk.
-- `import`: Module(s) that are loaded upon startup.
-- `library`: Specify [library options](/configuration/output/#outputlibrary) to bundle a library from current entry.
-- `runtime`: The name of the runtime chunk. When set, a new runtime chunk will be created. It can be set to `false` to avoid a new runtime chunk since webpack 5.43.0.
-
-- `publicPath`: Specify a public URL address for the output files of this entry when they are referenced in a browser. Also, see [output.publicPath](/configuration/output/#outputpublicpath).
+- `dependOn`: نقاط الدخول التي تعتمد عليها نقطة الدخول الحالية. يجب تحميلها قبل تحميل نقطة الدخول الحالية.
+- `filename`: يحدد اسم كل ملف إخراج على القرص.
+- `import`: الوحدة أو الوحدات التي تُحمّل عند بدء التشغيل.
+- `library`: يحدد [خيارات المكتبة](/configuration/output/#outputlibrary) لتجميع مكتبة من نقطة الدخول الحالية.
+- `runtime`: اسم runtime chunk. عند تعيينه، يُنشأ runtime chunk جديد. ويمكن تعيينه إلى `false` لتجنب إنشاء runtime chunk جديد منذ webpack 5.43.0.
+- `publicPath`: يحدد عنوان URL عام لملفات الإخراج الخاصة بنقطة الدخول هذه عندما يُشار إليها في المتصفح. راجع أيضًا [output.publicPath](/configuration/output/#outputpublicpath).
 
 **webpack.config.js**
 
@@ -135,7 +118,7 @@ export default {
 };
 ```
 
-`runtime` and `dependOn` should not be used together on a single entry, so the following config is invalid and would throw an error:
+لا ينبغي استخدام `runtime` و `dependOn` معًا في نقطة دخول واحدة، لذلك يكون التكوين التالي غير صالح وسيرمي خطأ:
 
 **webpack.config.js**
 
@@ -152,7 +135,7 @@ export default {
 };
 ```
 
-Make sure `runtime` must not point to an existing entry point name, for example the below config would throw an error:
+تأكد من أن `runtime` لا يشير إلى اسم نقطة دخول موجودة. على سبيل المثال، سيرمي التكوين التالي خطأ:
 
 ```js
 export default {
@@ -166,7 +149,7 @@ export default {
 };
 ```
 
-Also `dependOn` must not be circular, the following example again would throw an error:
+كذلك يجب ألا يكون `dependOn` دائريًا. المثال التالي سيرمي خطأ أيضًا:
 
 ```js
 export default {
@@ -183,11 +166,11 @@ export default {
 };
 ```
 
-## Scenarios
+## سيناريوهات
 
-Below is a list of entry configurations and their real-world use cases:
+فيما يلي قائمة بتكوينات entry واستخداماتها الواقعية:
 
-### Separate App and Vendor Entries
+### فصل مدخل التطبيق ومدخل vendor
 
 **webpack.config.js**
 
@@ -200,7 +183,7 @@ export default {
 };
 ```
 
-When building in `production` mode:
+عند البناء في وضع `production`:
 
 **webpack.prod.js**
 
@@ -212,7 +195,7 @@ export default {
 };
 ```
 
-When building in `development` mode:
+عند البناء في وضع `development`:
 
 **webpack.dev.js**
 
@@ -224,13 +207,13 @@ export default {
 };
 ```
 
-**What does this do?** We are telling webpack that we would like 2 separate entry points (like the above example).
+**ماذا يفعل هذا؟** نخبر webpack أننا نريد نقطتي دخول منفصلتين، كما في المثال أعلاه.
 
-**Why?** With this, you can import required libraries or files that aren't modified (e.g. Bootstrap, jQuery, images, etc) inside `vendor.js` and they will be bundled together into their own chunk. Content hash remains the same, which allows the browser to cache them separately thereby reducing load time.
+**لماذا؟** بهذه الطريقة يمكنك استيراد المكتبات أو الملفات المطلوبة التي لا تتغير كثيرًا، مثل Bootstrap و jQuery والصور وغيرها، داخل `vendor.js`، وسيتم تجميعها معًا في chunk خاص بها. يبقى content hash كما هو، مما يسمح للمتصفح بتخزينها مؤقتًا بشكل منفصل وبالتالي تقليل وقت التحميل.
 
-T> In webpack version < 4 it was common to add vendors as a separate entry point to compile it as a separate file (in combination with the `CommonsChunkPlugin`). <br /><br /> This is discouraged in webpack 4. Instead, the [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) option takes care of separating vendors and app modules and creating a separate file. **Do not** create an entry for vendors or other stuff that is not the starting point of execution.
+T> في إصدارات webpack الأقل من 4 كان من الشائع إضافة vendors كنقطة دخول منفصلة لترجمتها كملف مستقل، غالبًا مع `CommonsChunkPlugin`. <br /><br /> لا يُنصح بذلك في webpack 4. بدلًا من ذلك، يتولى خيار [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) فصل وحدات vendors ووحدات التطبيق وإنشاء ملف منفصل. **لا** تنشئ نقطة دخول لـ vendors أو لأي شيء آخر ليس نقطة بدء للتنفيذ.
 
-### Multi-Page Application
+### تطبيق متعدد الصفحات
 
 **webpack.config.js**
 
@@ -244,8 +227,8 @@ export default {
 };
 ```
 
-**What does this do?** We are telling webpack that we would like 3 separate dependency graphs (like the above example).
+**ماذا يفعل هذا؟** نخبر webpack أننا نريد ثلاثة مخططات تبعيات منفصلة، كما في المثال أعلاه.
 
-**Why?** In a multi-page application, the server is going to fetch a new HTML document for you. The page reloads this new document and assets are redownloaded. However, this gives us the unique opportunity to do things like using [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) to create bundles of shared application code between each page. Multi-page applications that reuse a lot of code/modules between entry points can greatly benefit from these techniques, as the number of entry points increases.
+**لماذا؟** في التطبيق متعدد الصفحات، سيجلب الخادم مستند HTML جديدًا لك. تعيد الصفحة تحميل هذا المستند الجديد وتُحمّل الأصول مرة أخرى. لكن هذا يمنحنا فرصة مميزة لاستخدام أشياء مثل [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) لإنشاء حزم من كود التطبيق المشترك بين كل صفحة. التطبيقات متعددة الصفحات التي تعيد استخدام قدر كبير من الكود أو الوحدات بين نقاط الدخول يمكن أن تستفيد كثيرًا من هذه التقنيات مع زيادة عدد نقاط الدخول.
 
-T> As a rule of thumb: Use exactly one entry point for each HTML document. See the issue [described here](https://bundlers.tooling.report/code-splitting/multi-entry/#webpack) for more details.
+T> كقاعدة عامة: استخدم نقطة دخول واحدة بالضبط لكل مستند HTML. راجع المشكلة [الموضحة هنا](https://bundlers.tooling.report/code-splitting/multi-entry/#webpack) لمزيد من التفاصيل.
diff --git a/src/content/concepts/hot-module-replacement.mdx b/src/content/concepts/hot-module-replacement.mdx
index 8c99a66a4063..5d2c473a6d59 100644
--- a/src/content/concepts/hot-module-replacement.mdx
+++ b/src/content/concepts/hot-module-replacement.mdx
@@ -2,68 +2,63 @@
 title: Hot Module Replacement
 sort: 12
 contributors:
-  - kryptokinght
-  - SpaceK33z
-  - sokra
-  - GRardB
-  - rouzbeh84
-  - skipjack
+  - RlxChap2
 ---
 
-Hot Module Replacement (HMR) exchanges, adds, or removes [modules](/concepts/modules/) while an application is running, without a full reload. This can significantly speed up development in a few ways:
+تقوم ميزة Hot Module Replacement أو (HMR) بتبديل [الوحدات](/concepts/modules/) أو إضافتها أو إزالتها أثناء تشغيل التطبيق، بدون إعادة تحميل كاملة. يمكن أن يسرّع ذلك التطوير بشكل ملحوظ بعدة طرق:
 
-- Retain application state which is lost during a full reload.
-- Save valuable development time by only updating what's changed.
-- Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools.
+- الاحتفاظ بحالة التطبيق التي تضيع عادةً عند إعادة التحميل الكامل.
+- توفير وقت تطوير ثمين عبر تحديث ما تغيّر فقط.
+- تحديث المتصفح فورًا عند إجراء تعديلات على CSS/JS في الكود المصدري، وهو قريب جدًا من تعديل التنسيقات مباشرة داخل أدوات المطور في المتصفح.
 
-## How It Works
+## كيف تعمل
 
-Let's go through some different viewpoints to understand exactly how HMR works...
+لننظر إلى HMR من عدة زوايا لفهم طريقة عملها بدقة.
 
-### In the Application
+### داخل التطبيق
 
-The following steps allow modules to be swapped in and out of an application:
+تسمح الخطوات التالية بتبديل الوحدات داخل التطبيق وخارجه:
 
-1. The application asks the HMR runtime to check for updates.
-2. The runtime asynchronously downloads the updates and notifies the application.
-3. The application then asks the runtime to apply the updates.
-4. The runtime synchronously applies the updates.
+1. يطلب التطبيق من HMR runtime التحقق من وجود تحديثات.
+2. يحمّل runtime التحديثات بشكل غير متزامن ويخطر التطبيق.
+3. يطلب التطبيق بعد ذلك من runtime تطبيق التحديثات.
+4. يطبق runtime التحديثات بشكل متزامن.
 
-You can set up HMR so that this process happens automatically, or you can choose to require user interaction for updates to occur.
+يمكنك إعداد HMR بحيث تحدث هذه العملية تلقائيًا، أو يمكنك اختيار طلب تفاعل المستخدم قبل حدوث التحديثات.
 
-### In the Compiler
+### داخل المترجم
 
-In addition to normal assets, the compiler needs to emit an "update" to allow updating from the previous version to the new version. The "update" consists of two parts:
+إلى جانب الأصول العادية، يحتاج المترجم إلى إصدار "تحديث" يسمح بالانتقال من الإصدار السابق إلى الإصدار الجديد. يتكون "التحديث" من جزأين:
 
-1. The updated [manifest](/concepts/manifest) (JSON)
-2. One or more updated chunks (JavaScript)
+1. [manifest](/concepts/manifest) محدث (JSON)
+2. واحد أو أكثر من chunks المحدثة (JavaScript)
 
-The manifest contains the new compilation hash and a list of all updated chunks. Each of these chunks contains the new code for all updated modules (or a flag indicating that the module was removed).
+يحتوي manifest على هاش الترجمة الجديد وقائمة بجميع chunks المحدثة. يحتوي كل chunk من هذه chunks على الكود الجديد لكل الوحدات المحدثة، أو على علامة تشير إلى إزالة الوحدة.
 
-The compiler ensures that module IDs and chunk IDs are consistent between these builds. It typically stores these IDs in memory (e.g. with [webpack-dev-server](/configuration/dev-server/)), but it's also possible to store them in a JSON file.
+يضمن المترجم ثبات معرفات الوحدات ومعرفات chunks بين هذه البنيات. عادةً يخزن هذه المعرفات في الذاكرة، مثلًا مع [webpack-dev-server](/configuration/dev-server/)، لكن يمكن أيضًا تخزينها في ملف JSON.
 
-### In a Module
+### داخل الوحدة
 
-HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the [`style-loader`](https://github.com/webpack/style-loader). In order for patching to work, the `style-loader` implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones.
+HMR ميزة اختيارية لا تؤثر إلا في الوحدات التي تحتوي كود HMR. مثال على ذلك تحديث التنسيقات عبر [`style-loader`](https://github.com/webpack/style-loader). لكي يعمل التحديث، ينفذ `style-loader` واجهة HMR؛ وعندما يتلقى تحديثًا عبر HMR، يستبدل التنسيقات القديمة بالجديدة.
 
-Similarly, when implementing the HMR interface in a module, you can describe what should happen when the module is updated. However, in most cases, it's not mandatory to write HMR code in every module. If a module has no HMR handlers, the update bubbles up. This means that a single handler can update a complete module tree. If a single module from the tree is updated, the entire set of dependencies is reloaded.
+وبالمثل، عند تنفيذ واجهة HMR داخل وحدة، يمكنك وصف ما يجب أن يحدث عند تحديث هذه الوحدة. لكن في معظم الحالات، لا يكون من الضروري كتابة كود HMR في كل وحدة. إذا لم تكن لدى الوحدة معالجات HMR، يصعد التحديث إلى الأعلى. هذا يعني أن معالجًا واحدًا يمكنه تحديث شجرة وحدات كاملة. وإذا حُدثت وحدة واحدة من الشجرة، يعاد تحميل مجموعة التبعيات بالكامل.
 
-See the [HMR API page](/api/hot-module-replacement) for details on the `module.hot` interface.
+راجع [صفحة HMR API](/api/hot-module-replacement) للتفاصيل حول واجهة `module.hot`.
 
-### In the Runtime
+### داخل وقت التشغيل
 
-Here things get a bit more technical... if you're not interested in the internals, feel free to jump to the [HMR API page](/api/hot-module-replacement) or [HMR guide](/guides/hot-module-replacement).
+هنا تصبح الأمور أكثر تقنية قليلًا. إذا لم تكن مهتمًا بالتفاصيل الداخلية، يمكنك الانتقال مباشرة إلى [صفحة HMR API](/api/hot-module-replacement) أو [دليل HMR](/guides/hot-module-replacement).
 
-For the module system runtime, additional code is emitted to track module `parents` and `children`. On the management side, the runtime supports two methods: `check` and `apply`.
+بالنسبة إلى runtime الخاص بنظام الوحدات، يُصدر كود إضافي لتتبع `parents` و `children` لكل وحدة. ومن جهة الإدارة، يدعم runtime طريقتين: `check` و `apply`.
 
-A `check` makes an HTTP request to the update manifest. If this request fails, there is no update available. If it succeeds, the list of updated chunks is compared to the list of currently loaded chunks. For each loaded chunk, the corresponding update chunk is downloaded. All module updates are stored in the runtime. When all update chunks have been downloaded and are ready to be applied, the runtime switches into the `ready` state.
+ينفذ `check` طلب HTTP إلى update manifest. إذا فشل الطلب، فهذا يعني عدم توفر تحديث. وإذا نجح، تُقارن قائمة chunks المحدثة بقائمة chunks المحملة حاليًا. لكل chunk محمل، يُحمّل update chunk المقابل. تُخزن كل تحديثات الوحدات في runtime. عندما تُحمّل كل update chunks وتصبح جاهزة للتطبيق، ينتقل runtime إلى حالة `ready`.
 
-The `apply` method flags all updated modules as invalid. For each invalid module, there needs to be an update handler in the module or in its parent(s). Otherwise, the invalid flag bubbles up and invalidates parent(s) as well. Each bubble continues until the app's entry point or a module with an update handler is reached (whichever comes first). If it bubbles up from an entry point, the process fails.
+تضع طريقة `apply` علامة invalid على كل الوحدات المحدثة. ولكل وحدة invalid يجب أن يكون هناك معالج تحديث في الوحدة أو في أحد آبائها. وإلا فإن علامة invalid تصعد إلى الأعلى وتبطل الآباء أيضًا. يستمر هذا الصعود حتى يصل إلى نقطة دخول التطبيق أو إلى وحدة لديها معالج تحديث، أيهما يأتي أولًا. إذا صعد من نقطة دخول، تفشل العملية.
 
-Afterwards, all invalid modules are disposed (via the dispose handler) and unloaded. The current hash is then updated and all `accept` handlers are called. The runtime switches back to the `idle` state and everything continues as normal.
+بعد ذلك، تُزال كل الوحدات invalid عبر dispose handler وتُفرغ من الذاكرة. ثم يُحدّث الهاش الحالي وتُستدعى كل معالجات `accept`. يعود runtime إلى حالة `idle` ويستمر كل شيء كالمعتاد.
 
-## Get Started
+## ابدأ
 
-HMR can be used in development as a LiveReload replacement. [webpack-dev-server](/configuration/dev-server/) supports a `hot` mode in which it tries to update with HMR before trying to reload the whole page. See the [Hot Module Replacement guide](/guides/hot-module-replacement) for details.
+يمكن استخدام HMR أثناء التطوير كبديل لـ LiveReload. يدعم [webpack-dev-server](/configuration/dev-server/) وضع `hot` الذي يحاول التحديث عبر HMR قبل محاولة إعادة تحميل الصفحة بالكامل. راجع [دليل Hot Module Replacement](/guides/hot-module-replacement) للتفاصيل.
 
-T> As with many other features, webpack's power lies in its customizability. There are _many_ ways of configuring HMR depending on the needs of a particular project. However, for most purposes, `webpack-dev-server` is a good fit and will allow you to get started with HMR quickly.
+T> كما هو الحال مع كثير من الميزات الأخرى، تكمن قوة webpack في قابليته للتخصيص. توجد _طرق كثيرة_ لضبط HMR بحسب احتياجات المشروع. لكن في معظم الاستخدامات، يكون `webpack-dev-server` خيارًا مناسبًا يسمح لك بالبدء مع HMR بسرعة.
diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
index 6657460d2e15..f89165bb2b29 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -2,34 +2,16 @@
 title: Concepts
 sort: -1
 contributors:
-  - TheLarkInn
-  - jhnns
-  - grgur
-  - johnstew
-  - jimrfenner
-  - TheDutchCoder
-  - adambraimbridge
-  - EugeneHlushko
-  - jeremenichelli
-  - arjunsajeev
-  - byzyk
-  - yairhaimo
-  - farskid
-  - LukeMwila
-  - Jalitha
-  - muhmushtaha
-  - chenxsan
-  - RyanGreyling2
-  - saishankar404
+  - RlxChap2
 ---
 
-At its core, **webpack** is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) from one or more _entry points_ and then combines every module your project needs into one or more _bundles_, which are static assets to serve your content from.
+في جوهره، **webpack** هو _مجمّع وحدات ثابت_ لتطبيقات JavaScript الحديثة. عندما يعالج webpack تطبيقك، يبني داخليًا [مخطط تبعيات](/concepts/dependency-graph/) من _نقطة دخول_ واحدة أو أكثر، ثم يجمع كل وحدة يحتاجها مشروعك في _حزمة_ واحدة أو أكثر، وهي أصول ثابتة تُستخدم لتقديم المحتوى.
 
-T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules).
+T> تعرّف أكثر على وحدات JavaScript ووحدات webpack [هنا](/concepts/modules).
 
-Since version 4.0.0, **webpack does not require a configuration file** to bundle your project. Nevertheless, it is [incredibly configurable](/configuration) to better fit your needs.
+منذ الإصدار 4.0.0، **لا يحتاج webpack إلى ملف تكوين** لتجميع مشروعك. ومع ذلك، فهو [قابل للتكوين بدرجة كبيرة](/configuration) حتى يلائم احتياجاتك بشكل أفضل.
 
-To get started you only need to understand its **Core Concepts**:
+للبدء، تحتاج فقط إلى فهم **المفاهيم الأساسية**:
 
 - [Entry](#entry)
 - [Output](#output)
@@ -38,19 +20,21 @@ To get started you only need to understand its **Core Concepts**:
 - [Mode](#mode)
 - [Browser Compatibility](#browser-compatibility)
 
-This document is intended to give a **high-level** overview of these concepts, while providing links to detailed concept-specific use cases.
+تهدف هذه الصفحة إلى تقديم نظرة عامة **عالية المستوى** على هذه المفاهيم، مع روابط إلى استخدامات مفصلة لكل مفهوم.
 
-For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:
+لفهم أفضل للأفكار التي تقف خلف مجمعات الوحدات وكيف تعمل داخليًا، راجع هذه الموارد:
 
 - [Manually Bundling an Application](https://www.youtube.com/watch?v=UNMkLHzofQI)
 - [Live Coding a Basic Module Bundler](https://www.youtube.com/watch?v=Gc9-7PBqOC8)
 - [Detailed Explanation of a Basic Module Bundler](https://github.com/ronami/minipack)
 
-## Entry
+<a id="entry"></a>
 
-An **entry point** indicates which module webpack should use to begin building out its internal [dependency graph](/concepts/dependency-graph/). Webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).
+## نقطة الدخول
 
-By default its value is `./src/index.js`, but you can specify a different (or multiple) entry points by setting an [`entry` property in the webpack configuration](/configuration/entry-context/#entry). For example:
+تحدد **نقطة الدخول** الوحدة التي يجب أن يستخدمها webpack ليبدأ بناء [مخطط التبعيات](/concepts/dependency-graph/) الداخلي. سيكتشف webpack الوحدات والمكتبات الأخرى التي تعتمد عليها نقطة الدخول، مباشرة أو غير مباشرة.
+
+القيمة الافتراضية هي `./src/index.js`، لكن يمكنك تحديد نقطة دخول مختلفة أو عدة نقاط دخول عبر تعيين [خاصية `entry` في تكوين webpack](/configuration/entry-context/#entry). على سبيل المثال:
 
 **webpack.config.js**
 
@@ -60,15 +44,17 @@ export default {
 };
 ```
 
-T> When running webpack without a configuration file, the entry defaults to `'./src/index.js'`. If that file does not exist — even if your `src/` directory does — webpack will throw: <br /> **`ERROR in Entry module not found: Error: Can't resolve './src'`** <br /><br /> The error says `'./src'` rather than `'./src/index.js'` because webpack resolves the directory first and then fails to find the default `index.js` inside it. To use a different entry filename, add a `webpack.config.js` as shown in the example above.
+T> عند تشغيل webpack بدون ملف تكوين، تكون نقطة الدخول الافتراضية هي `'./src/index.js'`. إذا لم يكن هذا الملف موجودًا، حتى لو كان مجلد `src/` موجودًا، سيرمي webpack الخطأ: <br /> **`ERROR in Entry module not found: Error: Can't resolve './src'`** <br /><br /> تظهر الرسالة `'./src'` بدلًا من `'./src/index.js'` لأن webpack يحاول حلّ المجلد أولًا، ثم يفشل في إيجاد `index.js` الافتراضي داخله. لاستخدام اسم ملف دخول مختلف، أضف `webpack.config.js` كما في المثال أعلاه.
+
+T> تعرّف أكثر في قسم [نقاط الدخول](/concepts/entry-points).
 
-T> Learn more in the [entry points](/concepts/entry-points) section.
+<a id="output"></a>
 
-## Output
+## الإخراج
 
-The **output** property tells webpack where to emit the _bundles_ it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file.
+تخبر خاصية **output** webpack بمكان إصدار _الحزم_ التي ينشئها وكيفية تسمية هذه الملفات. القيمة الافتراضية هي `./dist/main.js` لملف الإخراج الرئيسي و`./dist` لأي ملف آخر مولد.
 
-You can configure this part of the process by specifying an `output` field in your configuration:
+يمكنك ضبط هذا الجزء من العملية عبر تحديد حقل `output` في تكوينك:
 
 **webpack.config.js**
 
@@ -87,20 +73,22 @@ export default {
 };
 ```
 
-In the example above, we use the `output.filename` and the `output.path` properties to tell webpack the name of our bundle and where we want it to be emitted to. In case you're wondering about the path module being imported at the top, it is a core [Node.js module](https://nodejs.org/api/modules.html) that gets used to manipulate file paths.
+في المثال أعلاه، نستخدم خاصيتي `output.filename` و `output.path` لإخبار webpack باسم الحزمة والمكان الذي نريد إصدارها إليه. وإذا كنت تتساءل عن وحدة path المستوردة في الأعلى، فهي [وحدة Node.js](https://nodejs.org/api/modules.html) أساسية تُستخدم للتعامل مع مسارات الملفات.
+
+T> تحتوي خاصية `output` على [خيارات قابلة للتكوين أكثر بكثير](/configuration/output). إذا أردت معرفة المفاهيم خلفها، يمكنك [قراءة المزيد في قسم الإخراج](/concepts/output).
 
-T> The `output` property has [many more configurable features](/configuration/output). If you want to learn about the concepts behind it, you can [read more in the output section](/concepts/output).
+<a id="loaders"></a>
 
-## Loaders
+## المحمّلات
 
-Out of the box, webpack only understands JavaScript and JSON files. **Loaders** allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph.
+يفهم webpack مباشرة ملفات JavaScript و JSON فقط. تسمح **المحمّلات** لـ webpack بمعالجة أنواع ملفات أخرى وتحويلها إلى [وحدات](/concepts/modules) صالحة يمكن أن يستهلكها تطبيقك وتُضاف إلى مخطط التبعيات.
 
-W> One of webpack's specific features is the ability to `import` any type of module, e.g. `.css` files, which may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph.
+W> من الميزات الخاصة بـ webpack القدرة على `import` أي نوع من الوحدات، مثل ملفات `.css`، وهو أمر قد لا تدعمه مجمعات أو مشغلات مهام أخرى. نرى أن هذا التوسيع للغة مبرر لأنه يسمح للمطورين ببناء مخطط تبعيات أدق.
 
-At a high level, **loaders** have two properties in your webpack configuration:
+على مستوى عالٍ، تمتلك **المحمّلات** خاصيتين في تكوين webpack:
 
-1. The `test` property identifies which file or files should be transformed.
-2. The `use` property indicates which loader should be used to do the transforming.
+1. خاصية `test` تحدد أي ملف أو ملفات يجب تحويلها.
+2. خاصية `use` تحدد أي محمّل يجب استخدامه لإجراء التحويل.
 
 **webpack.config.js**
 
@@ -117,23 +105,25 @@ export default {
 };
 ```
 
-The configuration above has defined a `rules` property for a single module with two required properties: `test` and `use`. This tells webpack's compiler the following:
+عرّف التكوين أعلاه خاصية `rules` لوحدة واحدة بخصيصتين مطلوبتين: `test` و `use`. هذا يخبر مترجم webpack بما يلي:
 
-> "Hey webpack compiler, when you come across a path that resolves to a '.js' file inside of a `require()`/`import` statement, **use** the `babel-loader` to transform it before you add it to the bundle."
+> "يا مترجم webpack، عندما تصادف مسارًا ينتهي بملف '.js' داخل تعليمة `require()` أو `import`، **استخدم** `babel-loader` لتحويله قبل إضافته إلى الحزمة."
 
-W> It is important to remember that when defining rules in your webpack config, you are defining them under `module.rules` and not `rules`. For your benefit, webpack will warn you if this is done incorrectly.
+W> من المهم تذكر أنك عند تعريف القواعد في تكوين webpack تضعها تحت `module.rules` وليس `rules`. ولمساعدتك، سيحذرك webpack إذا فعلت ذلك بشكل غير صحيح.
 
-W> Keep in mind that when using regex to match files, you may not quote it. i.e `/\.txt$/` is not the same as `'/\.txt$/'` or `"/\.txt$/"`. The former instructs webpack to match any file that ends with .txt and the latter instructs webpack to match a single file with an absolute path '.txt'; this is likely not your intention.
+W> تذكر أنه عند استخدام regex لمطابقة الملفات، يجب ألا تضعه بين علامات اقتباس. أي أن `/\.txt$/` ليس مثل `'/\.txt$/'` أو `"/\.txt$/"`. الأول يطلب من webpack مطابقة أي ملف ينتهي بـ `.txt`، أما الأخيران فيطلبان مطابقة ملف واحد بمسار مطلق هو '.txt'، وهذا غالبًا ليس ما تريده.
 
-You can check further customization when including loaders in the [loaders section](/concepts/loaders).
+يمكنك الاطلاع على مزيد من التخصيص عند إدراج المحمّلات في [قسم المحمّلات](/concepts/loaders).
 
-## Plugins
+<a id="plugins"></a>
 
-While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
+## الإضافات
 
-T> Check out the [plugin interface](/api/plugins) and how to use it to extend webpack's capabilities.
+بينما تُستخدم المحمّلات لتحويل أنواع معينة من الوحدات، يمكن الاستفادة من الإضافات لتنفيذ نطاق أوسع من المهام مثل تحسين الحزم وإدارة الأصول وحقن متغيرات البيئة.
 
-In order to use a plugin, you need to `import` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with the `new` operator.
+T> راجع [واجهة الإضافات](/api/plugins) وكيفية استخدامها لتوسيع إمكانات webpack.
+
+لاستخدام إضافة، تحتاج إلى `import` لها وإضافتها إلى مصفوفة `plugins`. معظم الإضافات قابلة للتخصيص عبر الخيارات. وبما أنه يمكنك استخدام الإضافة نفسها عدة مرات في التكوين لأغراض مختلفة، تحتاج إلى إنشاء نسخة منها باستدعائها مع العامل `new`.
 
 **webpack.config.js**
 
@@ -149,15 +139,17 @@ export default {
 };
 ```
 
-In the example above, the `html-webpack-plugin` generates an HTML file for your application and automatically injects all your generated bundles into this file.
+في المثال أعلاه، تنشئ إضافة `html-webpack-plugin` ملف HTML لتطبيقك وتحقن فيه تلقائيًا كل الحزم المولدة.
+
+T> يوفر webpack كثيرًا من الإضافات مباشرة دون إعداد إضافي. راجع [قائمة الإضافات](/plugins).
 
-T> There are many plugins that webpack provides out of the box! Check out the [list of plugins](/plugins).
+استخدام الإضافات في تكوين webpack مباشر، لكن توجد حالات استخدام كثيرة تستحق استكشافًا أعمق. [تعرّف أكثر عنها هنا](/concepts/plugins).
 
-Using plugins in your webpack configuration is straightforward. However, there are many use cases that are worth further exploration. [Learn more about them here](/concepts/plugins).
+<a id="mode"></a>
 
-## Mode
+## الوضع
 
-By setting the `mode` parameter to either `development`, `production` or `none`, you can enable webpack's built-in optimizations that correspond to each environment. The default value is `production`.
+عبر تعيين معامل `mode` إلى `development` أو `production` أو `none`، يمكنك تفعيل التحسينات المدمجة في webpack والمناسبة لكل بيئة. القيمة الافتراضية هي `production`.
 
 ```js
 export default {
@@ -165,12 +157,14 @@ export default {
 };
 ```
 
-Learn more about the [mode configuration here](/configuration/mode) and what optimizations take place on each value.
+تعرّف أكثر على [تكوين mode هنا](/configuration/mode) وعلى التحسينات التي تحدث مع كل قيمة.
+
+<a id="browser-compatibility"></a>
 
-## Browser Compatibility
+## توافق المتصفحات
 
-Webpack supports all browsers that are [ES5-compliant](https://compat-table.github.io/compat-table/es5/) (IE8 and below are not supported). Webpack needs `Promise` for [`import()` and `require.ensure()`](/guides/code-splitting/#dynamic-imports). If you want to support older browsers, you will need to [load a polyfill](/guides/shimming/) before using these expressions.
+يدعم webpack كل المتصفحات [المتوافقة مع ES5](https://compat-table.github.io/compat-table/es5/)؛ لا يدعم IE8 وما قبله. يحتاج webpack إلى `Promise` من أجل [`import()` و `require.ensure()`](/guides/code-splitting/#dynamic-imports). إذا أردت دعم متصفحات أقدم، فستحتاج إلى [تحميل polyfill](/guides/shimming/) قبل استخدام هذه التعبيرات.
 
-## Environment
+## البيئة
 
-Webpack 5 requires Node.js version 10.13.0 or later.
+يتطلب webpack 5 إصدار Node.js 10.13.0 أو أحدث.
diff --git a/src/content/concepts/loaders.mdx b/src/content/concepts/loaders.mdx
index 0cba384bb635..5bee7368317c 100644
--- a/src/content/concepts/loaders.mdx
+++ b/src/content/concepts/loaders.mdx
@@ -2,34 +2,20 @@
 title: Loaders
 sort: 3
 contributors:
-  - manekinekko
-  - evenstensberg
-  - SpaceK33z
-  - gangachris
-  - TheLarkInn
-  - simon04
-  - jhnns
-  - byzyk
-  - debs-obrien
-  - EugeneHlushko
-  - wizardofhogwarts
-  - lukasgeiter
-  - furkle
-  - jamesgeorge007
-  - textbook
+  - RlxChap2
 ---
 
-Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you `import` or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like `import` CSS files directly from your JavaScript modules!
+المحمّلات هي تحويلات تُطبق على الكود المصدري للوحدة. تسمح لك بمعالجة الملفات مسبقًا أثناء `import` لها أو "تحميلها". لذلك تشبه المحمّلات "المهام" في أدوات البناء الأخرى، وتوفر طريقة قوية للتعامل مع خطوات بناء الواجهة الأمامية. يمكن للمحمّلات تحويل الملفات من لغة أخرى، مثل TypeScript، إلى JavaScript، أو تحميل الصور المضمنة كعناوين data URLs. بل تسمح لك المحمّلات بأشياء مثل `import` ملفات CSS مباشرة من وحدات JavaScript.
 
-## Example
+## مثال
 
-For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. To do this, you would start by installing the loaders you need:
+على سبيل المثال، يمكنك استخدام المحمّلات لإخبار webpack بتحميل ملف CSS أو تحويل TypeScript إلى JavaScript. للقيام بذلك، تبدأ بتثبيت المحمّلات التي تحتاجها:
 
 ```bash
 npm install --save-dev css-loader ts-loader
 ```
 
-And then instruct webpack to use the [`css-loader`](/loaders/css-loader) for every `.css` file and the [`ts-loader`](https://github.com/TypeStrong/ts-loader) for all `.ts` files:
+ثم تطلب من webpack استخدام [`css-loader`](/loaders/css-loader) لكل ملف `.css` و [`ts-loader`](https://github.com/TypeStrong/ts-loader) لكل ملفات `.ts`:
 
 **webpack.config.js**
 
@@ -44,23 +30,25 @@ export default {
 };
 ```
 
-T> While in the previous examples we used a loader to load CSS files, webpack has an experimental option ([`experiments.css`](https://webpack.js.org/configuration/experiments/)) that allows webpack to process CSS and automatically inject the styles into the webpage.
+T> في الأمثلة السابقة استخدمنا محمّلًا لتحميل ملفات CSS، لكن webpack يملك خيارًا تجريبيًا ([`experiments.css`](https://webpack.js.org/configuration/experiments/)) يسمح له بمعالجة CSS وحقن التنسيقات تلقائيًا في صفحة الويب.
 
-## Using Loaders
+## استخدام المحمّلات
 
-There are two ways to use loaders in your application:
+توجد طريقتان لاستخدام المحمّلات في تطبيقك:
 
-- [Configuration](#configuration) (recommended): Specify them in your **webpack.config.js** file.
-- [Inline](#inline): Specify them explicitly in each `import` statement.
+- [التكوين](#configuration) (موصى به): تحديدها في ملف **webpack.config.js**.
+- [Inline](#inline): تحديدها صراحة في كل تعليمة `import`.
 
-Note that loaders can be used from CLI under webpack v4, but the feature was deprecated in webpack v5.
+لاحظ أن المحمّلات يمكن استخدامها من CLI في webpack v4، لكن هذه الميزة أُهملت في webpack v5.
 
-### Configuration
+<a id="configuration"></a>
 
-[`module.rules`](/configuration/module/#modulerules) allows you to specify several loaders within your webpack configuration.
-This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader.
+### التكوين
 
-Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See ["Loader Features"](/concepts/loaders/#loader-features) for more information about loaders order.
+تسمح لك [`module.rules`](/configuration/module/#modulerules) بتحديد عدة محمّلات داخل تكوين webpack.
+هذه طريقة موجزة لعرض المحمّلات، وتساعد على الحفاظ على كود نظيف. كما تمنحك نظرة كاملة على كل محمّل.
+
+تُقيّم أو تُنفذ المحمّلات من اليمين إلى اليسار، أو من الأسفل إلى الأعلى. في المثال أدناه يبدأ التنفيذ بـ sass-loader، ثم يستمر مع css-loader، وينتهي أخيرًا بـ style-loader. راجع ["ميزات المحمّلات"](/concepts/loaders/#loader-features) لمزيد من المعلومات حول ترتيب المحمّلات.
 
 ```js
 export default {
@@ -84,54 +72,60 @@ export default {
 };
 ```
 
+<a id="inline"></a>
+
 ### Inline
 
-It's possible to specify loaders in an `import` statement, or any [equivalent "importing" method](/api/module-methods). Separate loaders from the resource with `!`. Each part is resolved relative to the current directory.
+يمكن تحديد المحمّلات داخل تعليمة `import` أو أي [طريقة "استيراد" مكافئة](/api/module-methods). افصل المحمّلات عن المورد باستخدام `!`. يُحل كل جزء نسبيًا إلى المجلد الحالي.
 
-T> The `loader1!loader2!./file` syntax is shown for illustration. In most projects, prefer configuring loaders via `module.rules` and importing styles for their side effects (e.g. `import "./styles.css"`).
+T> صيغة `loader1!loader2!./file` معروضة للتوضيح. في معظم المشاريع، يفضل تكوين المحمّلات عبر `module.rules` واستيراد التنسيقات من أجل آثارها الجانبية، مثل `import "./styles.css"`.
 
 ```js
 import * as styles from "style-loader!css-loader?modules!./styles.css";
 ```
 
-It's possible to override any loaders, preLoaders and postLoaders from the [configuration](/configuration) by prefixing the inline `import` statement:
+يمكن تجاوز أي محمّلات و preLoaders و postLoaders من [التكوين](/configuration) عبر بادئة في تعليمة `import` inline:
 
-- Prefixing with `!` will disable all configured normal loaders
+- البادئة `!` تعطل كل المحمّلات العادية المكوّنة.
 
   ```js
   import * as styles from "!style-loader!css-loader?modules!./styles.css";
   ```
 
-- Prefixing with `!!` will disable all configured loaders (preLoaders, loaders, postLoaders)
+- البادئة `!!` تعطل كل المحمّلات المكوّنة، بما في ذلك preLoaders و loaders و postLoaders.
 
   ```js
   import * as styles from "!!style-loader!css-loader?modules!./styles.css";
   ```
 
-- Prefixing with `-!` will disable all configured preLoaders and loaders but not postLoaders
+- البادئة `-!` تعطل كل preLoaders و loaders المكوّنة، لكنها لا تعطل postLoaders.
 
   ```js
   import * as styles from "-!style-loader!css-loader?modules!./styles.css";
   ```
 
-Options can be passed with a query parameter, e.g. `?key=value&foo=bar`, or a JSON object, e.g. `?{"key":"value","foo":"bar"}`.
+يمكن تمرير الخيارات باستخدام query parameter مثل `?key=value&foo=bar`، أو كائن JSON مثل `?{"key":"value","foo":"bar"}`.
+
+T> استخدم `module.rules` كلما أمكن، لأن ذلك يقلل التكرار في كودك المصدري ويسهل تصحيح محمّل أو العثور عليه عندما يحدث شيء غير متوقع.
+
+<a id="loader-features"></a>
 
-T> Use `module.rules` whenever possible, as this will reduce boilerplate in your source code and allow you to debug or locate a loader faster if something goes south.
+## ميزات المحمّلات
 
-## Loader Features
+- يمكن ربط المحمّلات في سلسلة. يطبق كل محمّل في السلسلة تحويلات على المورد الجاري معالجته. تُنفذ السلسلة بترتيب عكسي. يمرر أول محمّل نتيجته، أي المورد بعد تطبيق التحويلات، إلى المحمّل التالي، وهكذا. وفي النهاية يتوقع webpack أن يعيد آخر محمّل في السلسلة JavaScript.
+- يمكن أن تكون المحمّلات متزامنة أو غير متزامنة.
+- تعمل المحمّلات في Node.js ويمكنها فعل كل ما هو ممكن هناك.
+- يمكن تكوين المحمّلات باستخدام كائن `options`؛ ما زال استخدام معاملات `query` لضبط الخيارات مدعومًا لكنه أُهمل.
+- يمكن للوحدات العادية تصدير محمّل إضافة إلى `main` العادي عبر حقل `loader` في `package.json`.
+- يمكن للإضافات أن تمنح المحمّلات ميزات أكثر.
+- يمكن للمحمّلات إصدار ملفات إضافية عشوائية.
 
-- Loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain.
-- Loaders can be synchronous or asynchronous.
-- Loaders run in Node.js and can do everything that’s possible there.
-- Loaders can be configured with an `options` object (using `query` parameters to set options is still supported but has been deprecated).
-- Normal modules can export a loader in addition to the normal `main` via `package.json` with the `loader` field.
-- Plugins can give loaders more features.
-- Loaders can emit additional arbitrary files.
+توفر المحمّلات طريقة لتخصيص الإخراج عبر دوال المعالجة المسبقة. أصبح لدى المستخدمين مرونة أكبر لإدراج منطق دقيق مثل الضغط والتغليف وترجمات اللغة و[المزيد](/loaders).
 
-Loaders provide a way to customize the output through their preprocessing functions. Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and [more](/loaders).
+<a id="resolving-loaders"></a>
 
-## Resolving Loaders
+## حلّ المحمّلات
 
-Loaders follow the standard [module resolution](/concepts/module-resolution/). In most cases it will be loaded from the [module path](/concepts/module-resolution/#module-paths) (think `npm install`, `node_modules`).
+تتبع المحمّلات آلية [حلّ الوحدات](/concepts/module-resolution/) القياسية. في معظم الحالات ستُحمّل من [مسار الوحدة](/concepts/module-resolution/#module-paths)، مثل `npm install` و `node_modules`.
 
-A loader module is expected to export a function and be written in Node.js compatible JavaScript. They are most commonly managed with npm, but you can also have custom loaders as files within your application. By convention, loaders are usually named `xxx-loader` (e.g. `json-loader`). See ["Writing a Loader"](/contribute/writing-a-loader/) for more information.
+من المتوقع أن تصدر وحدة المحمّل دالة وأن تُكتب بلغة JavaScript متوافقة مع Node.js. غالبًا تُدار هذه المحمّلات باستخدام npm، لكن يمكنك أيضًا امتلاك محمّلات مخصصة كملفات داخل تطبيقك. وبحسب العرف، تُسمى المحمّلات عادة بالشكل `xxx-loader`، مثل `json-loader`. راجع ["كتابة محمّل"](/contribute/writing-a-loader/) لمزيد من المعلومات.
diff --git a/src/content/concepts/manifest.mdx b/src/content/concepts/manifest.mdx
index b167c80bb5dc..a7dc39e205ae 100644
--- a/src/content/concepts/manifest.mdx
+++ b/src/content/concepts/manifest.mdx
@@ -2,8 +2,7 @@
 title: The Manifest
 sort: 11
 contributors:
-  - skipjack
-  - EugeneHlushko
+  - RlxChap2
 related:
   - title: Separating a Manifest
     url: https://survivejs.com/webpack/optimizing/separating-manifest/
@@ -13,28 +12,28 @@ related:
     url: /guides/caching/
 ---
 
-In a typical application or site built with webpack, there are three main types of code:
+في تطبيق أو موقع نموذجي مبني باستخدام webpack، توجد ثلاثة أنواع رئيسية من الكود:
 
-1. The source code you, and maybe your team, have written.
-2. Any third-party library or "vendor" code your source is dependent on.
-3. A webpack runtime and **manifest** that conducts the interaction of all modules.
+1. الكود المصدري الذي كتبته أنت، وربما فريقك.
+2. أي مكتبة خارجية أو كود "vendor" يعتمد عليه كودك المصدري.
+3. webpack runtime و **manifest** الذي يدير تفاعل كل الوحدات.
 
-This article will focus on the last of these three parts: the runtime and, in particular, the manifest.
+سيركز هذا المقال على آخر جزء من هذه الأجزاء الثلاثة: runtime، وبشكل خاص manifest.
 
 ## Runtime
 
-The runtime, along with the manifest data, is all the code webpack needs to connect your modularized application while it's running in the browser. It contains the loading and resolving logic needed to connect your modules as they interact. This includes connecting modules that have already been loaded into the browser as well as logic to lazy-load the ones that haven't.
+runtime، مع بيانات manifest، هو كل الكود الذي يحتاجه webpack لربط تطبيقك المكوّن من وحدات أثناء تشغيله في المتصفح. يحتوي على منطق التحميل والحل اللازم لربط الوحدات أثناء تفاعلها. يشمل ذلك ربط الوحدات التي حُمّلت بالفعل في المتصفح، وكذلك منطق التحميل الكسول للوحدات التي لم تُحمّل بعد.
 
 ## Manifest
 
-Once your application hits the browser in the form of `index.html` file, some bundles and a variety of other assets required by your application must be loaded and linked somehow. That `/src` directory you meticulously laid out is now bundled, minified and maybe even split into smaller chunks for lazy-loading by webpack's [`optimization`](/configuration/optimization/). So how does webpack manage the interaction between all of your required modules? This is where the manifest data comes in...
+عندما يصل تطبيقك إلى المتصفح على هيئة ملف `index.html`، يجب تحميل بعض الحزم ومجموعة من الأصول الأخرى التي يحتاجها تطبيقك وربطها بطريقة ما. مجلد `/src` الذي رتّبته بعناية أصبح الآن مجمعًا ومصغرًا وربما مقسمًا إلى chunks أصغر للتحميل الكسول بواسطة [`optimization`](/configuration/optimization/) في webpack. فكيف يدير webpack التفاعل بين كل الوحدات المطلوبة؟ هنا يأتي دور بيانات manifest.
 
-As the compiler enters, resolves, and maps out your application, it keeps detailed notes on all your modules. This collection of data is called the "Manifest," and it's what the runtime will use to resolve and load modules once they've been bundled and shipped to the browser. No matter which [module syntax](/api/module-methods) you have chosen, those `import` or `require` statements have now become `__webpack_require__` methods that point to module identifiers. Using the data in the manifest, the runtime will be able to find out where to retrieve the modules behind the identifiers.
+بينما يدخل المترجم إلى تطبيقك ويحلّه ويرسم خريطته، يحتفظ بملاحظات تفصيلية حول كل وحداتك. تسمى هذه المجموعة من البيانات "Manifest"، وهي ما سيستخدمه runtime لحلّ الوحدات وتحميلها بعد تجميعها وشحنها إلى المتصفح. أيًا كانت [صيغة الوحدات](/api/module-methods) التي اخترتها، أصبحت تعليمات `import` أو `require` الآن طرق `__webpack_require__` تشير إلى معرفات الوحدات. باستخدام البيانات الموجودة في manifest، سيتمكن runtime من معرفة مكان جلب الوحدات خلف هذه المعرفات.
 
-## The Problem
+## المشكلة
 
-So now you have a little bit of insight about how webpack works behind the scenes. "But, how does this affect me?", you might ask. Most of the time, it doesn't. The runtime will do its thing, utilizing the manifest, and everything will appear to magically work once your application hits the browser. However, if you decide to improve the performance of your projects by utilizing browser caching, this process will all of a sudden become an important thing to understand.
+أصبح لديك الآن تصور بسيط عن طريقة عمل webpack خلف الكواليس. قد تسأل: "لكن كيف يؤثر هذا علي؟" في أغلب الوقت، لا يؤثر. سيقوم runtime بعمله مستخدمًا manifest، وسيبدو كل شيء وكأنه يعمل بسلاسة عندما يصل تطبيقك إلى المتصفح. لكن إذا قررت تحسين أداء مشاريعك باستخدام التخزين المؤقت في المتصفح، فستصبح هذه العملية فجأة شيئًا مهمًا يجب فهمه.
 
-By using content hashes within your bundle file names, you can indicate to the browser when the content of a file has changed, thus invalidating the cache. Once you start doing this though, you'll immediately notice some funny behavior. Certain hashes change even when their content apparently does not. This is caused by the injection of the runtime and manifest, which changes every build.
+باستخدام content hashes داخل أسماء ملفات الحزم، يمكنك إخبار المتصفح متى تغير محتوى ملف ما، وبالتالي إبطال cache. لكن بمجرد أن تبدأ بفعل ذلك، ستلاحظ فورًا سلوكًا غريبًا: بعض الهاشات تتغير حتى عندما لا يبدو أن محتواها تغير. يحدث ذلك بسبب حقن runtime و manifest، وهما يتغيران في كل build.
 
-See [the manifest section](/guides/output-management/#the-manifest) of our _Output management_ guide to learn how to extract the manifest, and read the guides below to learn more about the intricacies of long term caching.
+راجع [قسم manifest](/guides/output-management/#the-manifest) في دليل _إدارة الإخراج_ لتتعلم كيفية استخراج manifest، واقرأ الأدلة أدناه لمعرفة المزيد عن تفاصيل التخزين المؤقت طويل الأمد.
diff --git a/src/content/concepts/module-federation.mdx b/src/content/concepts/module-federation.mdx
index dffc3ec442da..f1cef6f665d1 100644
--- a/src/content/concepts/module-federation.mdx
+++ b/src/content/concepts/module-federation.mdx
@@ -2,17 +2,7 @@
 title: Module Federation
 sort: 8
 contributors:
-  - sokra
-  - chenxsan
-  - EugeneHlushko
-  - jamesgeorge007
-  - ScriptedAlchemy
-  - snitin315
-  - XiaofengXie16
-  - KyleBastien
-  - Alevale
-  - burhanuday
-  - RexSkz
+  - RlxChap2
 related:
   - title: "Webpack 5 Module Federation: A game-changer in JavaScript architecture"
     url: https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669
@@ -22,92 +12,106 @@ related:
     url: https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ
 ---
 
-## Motivation
+<a id="motivation"></a>
 
-Multiple separate builds should form a single application. These separate builds act like containers and can expose and consume code among themselves, creating a single, unified application.
+## الدافع
 
-This is often known as Micro-Frontends, but is not limited to that.
+ينبغي أن تشكل عدة builds منفصلة تطبيقًا واحدًا. تعمل هذه builds المنفصلة مثل containers، ويمكنها كشف الكود واستهلاكه فيما بينها، مما ينشئ تطبيقًا واحدًا موحدًا.
+
+يُعرف هذا غالبًا باسم Micro-Frontends، لكنه لا يقتصر عليها.
 
 <StackBlitzPreview
   example="module-federation?terminal=start&terminal="
-  description="Check out this live module federation example on StackBlitz."
+  description="تحقق من مثال حي لـ Module Federation على StackBlitz."
 />
 
-## Low-level concepts
+<a id="low-level-concepts"></a>
+
+## مفاهيم منخفضة المستوى
+
+نميز بين الوحدات المحلية والوحدات البعيدة. الوحدات المحلية هي وحدات عادية تُعد جزءًا من build الحالي. أما الوحدات البعيدة فهي وحدات ليست جزءًا من build الحالي، لكنها تُحمّل وقت التشغيل من remote container.
+
+يُعد تحميل الوحدات البعيدة عملية غير متزامنة. عند استخدام وحدة بعيدة، توضع هذه العمليات غير المتزامنة داخل عملية أو عمليات تحميل chunk التالية الواقعة بين الوحدة البعيدة ونقطة الدخول. لا يمكن استخدام وحدة بعيدة بدون عملية تحميل chunk.
+
+عادةً تكون عملية تحميل chunk عبارة عن استدعاء `import()`، لكن التركيبات الأقدم مثل `require.ensure` أو `require([...])` مدعومة أيضًا.
 
-We distinguish between local and remote modules. Local modules are regular modules that are part of the current build. Remote modules are modules that are not part of the current build but are loaded at runtime from a remote container.
+يُنشأ container عبر container entry، وهو يتيح وصولًا غير متزامن إلى الوحدات المحددة. ينقسم الوصول المكشوف إلى خطوتين:
 
-Loading remote modules is considered an asynchronous operation. When using a remote module, these asynchronous operations will be placed in the next chunk loading operation(s) that are between the remote module and the entrypoint. It's not possible to use a remote module without a chunk loading operation.
+1. تحميل الوحدة (غير متزامن)
+2. تقييم الوحدة (متزامن).
 
-A chunk loading operation is usually an `import()` call, but older constructs like `require.ensure` or `require([...])` are supported as well.
+تتم الخطوة الأولى أثناء تحميل chunk. وتتم الخطوة الثانية أثناء تقييم الوحدة بالتداخل مع الوحدات الأخرى، سواء كانت محلية أو بعيدة. بهذه الطريقة، لا يتأثر ترتيب التقييم عند تحويل وحدة من محلية إلى بعيدة أو العكس.
 
-A container is created through a container entry, which exposes asynchronous access to the specific modules. The exposed access is separated into two steps:
+يمكن تداخل containers. يمكن لـ containers استخدام وحدات من containers أخرى. كما أن التبعيات الدائرية بين containers ممكنة أيضًا.
 
-1. loading the module (asynchronous)
-2. evaluating the module (synchronous).
+<a id="high-level-concepts"></a>
 
-Step 1 will be done during the chunk loading. Step 2 will be done during the module evaluation interleaved with other (local and remote) modules. This way, evaluation order is unaffected by converting a module from local to remote or the other way around.
+## مفاهيم عالية المستوى
 
-It is possible to nest containers. Containers can use modules from other containers. Circular dependencies between containers are also possible.
+يعمل كل build كـ container ويستهلك أيضًا builds أخرى بوصفها containers. بهذه الطريقة، يستطيع كل build الوصول إلى أي وحدة مكشوفة أخرى عبر تحميلها من container الخاص بها.
 
-## High-level concepts
+الوحدات المشتركة هي وحدات قابلة للتجاوز وتُقدم أيضًا كتجاوزات إلى containers المتداخلة. غالبًا تشير إلى الوحدة نفسها في كل build، مثل المكتبة نفسها.
 
-Each build acts as a container and also consumes other builds as containers. This way, each build is able to access any other exposed module by loading it from its container.
+يسمح خيار `packageName` بتعيين اسم حزمة للبحث عن `requiredVersion`. يُستنتج ذلك تلقائيًا افتراضيًا لطلبات الوحدات، ويمكن تعيين `requiredVersion` إلى `false` عندما تريد تعطيل الاستنتاج التلقائي.
 
-Shared modules are modules that are both overridable and provided as overrides to nested containers. They usually point to the same module in each build, e.g., the same library.
+<a id="building-blocks"></a>
 
-The `packageName` option allows setting a package name to look for a `requiredVersion`. It is automatically inferred for the module requests by default, set `requiredVersion` to `false` when automatic infer should be disabled.
+## اللبنات الأساسية
 
-## Building blocks
+### ContainerPlugin (منخفض المستوى)
 
-### ContainerPlugin (low level)
+تنشئ هذه الإضافة container entry إضافيًا مع الوحدات المكشوفة المحددة.
 
-This plugin creates an additional container entry with the specified exposed modules.
+### ContainerReferencePlugin (منخفض المستوى)
 
-### ContainerReferencePlugin (low level)
+تضيف هذه الإضافة مراجع محددة إلى containers على هيئة externals، وتسمح باستيراد الوحدات البعيدة من هذه containers. كما تستدعي `override` API لهذه containers لتزويدها بالتجاوزات. تُقدم التجاوزات المحلية، عبر `__webpack_override__` أو `override` API عندما يكون build نفسه container، وكذلك التجاوزات المحددة إلى كل containers المشار إليها.
 
-This plugin adds specific references to containers as externals and allows to import remote modules from these containers. It also calls the `override` API of these containers to provide overrides to them. Local overrides (via `__webpack_override__` or `override` API when build is also a container) and specified overrides are provided to all referenced containers.
+### ModuleFederationPlugin (عالي المستوى)
 
-### ModuleFederationPlugin (high level)
+تجمع [`ModuleFederationPlugin`](/plugins/module-federation-plugin) بين `ContainerPlugin` و `ContainerReferencePlugin`.
 
-[`ModuleFederationPlugin`](/plugins/module-federation-plugin) combines `ContainerPlugin` and `ContainerReferencePlugin`.
+<a id="concept-goals"></a>
 
-## Concept goals
+## أهداف المفهوم
 
-- It should be possible to expose and consume any module type that webpack supports.
-- Chunk loading should load everything needed in parallel (web: single round-trip to server).
-- Control from consumer to container
-  - Overriding modules is a one-directional operation.
-  - Sibling containers cannot override each other's modules.
-- Concept should be environment-independent.
-  - Usable in web, Node.js, etc.
-- Relative and absolute request in shared:
-  - Will always be provided, even if not used.
-  - Will resolve relative to `config.context`.
-  - Does not use a `requiredVersion` by default.
-- Module requests in shared:
-  - Are only provided when they are used.
-  - Will match all used equal module requests in your build.
-  - Will provide all matching modules.
-  - Will extract `requiredVersion` from package.json at this position in the graph.
-  - Could provide and consume multiple different versions when you have nested node_modules.
-- Module requests with trailing `/` in shared will match all module requests with this prefix.
+- يجب أن يكون من الممكن كشف واستهلاك أي نوع وحدة يدعمه webpack.
+- يجب أن يحمّل chunk loading كل ما يلزم بالتوازي؛ على الويب يعني ذلك round-trip واحدًا إلى الخادم.
+- التحكم من المستهلك إلى container
+  - تجاوز الوحدات عملية باتجاه واحد.
+  - لا تستطيع sibling containers تجاوز وحدات بعضها.
+- يجب أن يكون المفهوم مستقلًا عن البيئة.
+  - قابل للاستخدام في الويب و Node.js وغيرها.
+- الطلبات النسبية والمطلقة في shared:
+  - ستُقدم دائمًا، حتى لو لم تُستخدم.
+  - ستُحل نسبيًا إلى `config.context`.
+  - لا تستخدم `requiredVersion` افتراضيًا.
+- طلبات الوحدات في shared:
+  - تُقدم فقط عندما تُستخدم.
+  - تطابق كل طلبات الوحدات المتساوية المستخدمة في build لديك.
+  - تقدم كل الوحدات المطابقة.
+  - تستخرج `requiredVersion` من package.json في هذا الموضع من المخطط.
+  - يمكنها تقديم واستهلاك عدة إصدارات مختلفة عندما تكون لديك node_modules متداخلة.
+- طلبات الوحدات التي تنتهي بـ `/` في shared ستطابق كل طلبات الوحدات التي تبدأ بهذه البادئة.
 
-## Use cases
+<a id="use-cases"></a>
 
-### Separate builds per page
+## حالات الاستخدام
 
-Each page of a Single Page Application is exposed from container build in a separate build. The application shell is also a separate build referencing all pages as remote modules. This way each page can be separately deployed. The application shell is deployed when routes are updated or new routes are added. The application shell defines commonly used libraries as shared modules to avoid duplication of them in the page builds.
+### builds منفصلة لكل صفحة
 
-### Components library as container
+تُكشف كل صفحة من تطبيق Single Page Application من container build في build منفصل. كما يكون application shell build منفصلًا يشير إلى كل الصفحات كوحدات بعيدة. بهذه الطريقة يمكن نشر كل صفحة بشكل منفصل. يُنشر application shell عندما تُحدّث المسارات أو تُضاف مسارات جديدة. يعرّف application shell المكتبات المستخدمة عمومًا كوحدات مشتركة لتجنب تكرارها في builds الصفحات.
 
-Many applications share a common components library which could be built as a container with each component exposed. Each application consumes components from the components library container. Changes to the components library can be separately deployed without the need to re-deploy all applications. The application automatically uses the up-to-date version of the components library.
+### مكتبة مكونات كـ container
+
+تشارك كثير من التطبيقات مكتبة مكونات مشتركة يمكن بناؤها كـ container مع كشف كل مكوّن. يستهلك كل تطبيق المكونات من container مكتبة المكونات. يمكن نشر تغييرات مكتبة المكونات بشكل منفصل دون الحاجة إلى إعادة نشر كل التطبيقات. وسيستخدم التطبيق تلقائيًا النسخة الأحدث من مكتبة المكونات.
+
+<a id="dynamic-remote-containers"></a>
 
 ## Dynamic Remote Containers
 
-The container interface supports `get` and `init` methods.
-`init` is an `async` compatible method that is called with one argument: the shared scope object. This object is used as a shared scope in the remote container and is filled with the provided modules from a host.
-It can be leveraged to connect remote containers to a host container dynamically at runtime.
+تدعم واجهة container طريقتي `get` و `init`.
+طريقة `init` متوافقة مع `async` وتُستدعى بمعامل واحد: كائن shared scope. يُستخدم هذا الكائن كـ shared scope في remote container ويُملأ بالوحدات المقدمة من host.
+يمكن الاستفادة من ذلك لربط remote containers بـ host container ديناميكيًا وقت التشغيل.
 
 **init.js**
 
@@ -122,15 +126,15 @@ It can be leveraged to connect remote containers to a host container dynamically
 })();
 ```
 
-T> A **container** is the remote container entry object exposed by a federated build, usually through that remote's `remoteEntry.js`. It provides the `get` and `init` methods shown here. In examples like `window[scope]` or `globalThis.someContainer`, the container is expected to exist only once the remote container script has already loaded.
+T> **container** هو كائن remote container entry الذي يكشفه build اتحادي، غالبًا عبر `remoteEntry.js` الخاص بذلك remote. يوفر طريقتي `get` و `init` الموضحتين هنا. في أمثلة مثل `window[scope]` أو `globalThis.someContainer`، يُتوقع أن يكون container موجودًا فقط بعد تحميل سكربت remote container بالفعل.
 
-The container tries to provide shared modules, but if the shared module has already been used, a warning and the provided shared module will be ignored. The container might still use it as a fallback.
+يحاول container تقديم الوحدات المشتركة، لكن إذا كانت الوحدة المشتركة قد استُخدمت بالفعل، فسيظهر تحذير وسيتم تجاهل الوحدة المشتركة المقدمة. قد يظل container يستخدمها كخيار احتياطي.
 
-This way you could dynamically load an A/B test which provides a different version of a shared module.
+بهذه الطريقة يمكنك تحميل اختبار A/B ديناميكيًا يقدم إصدارًا مختلفًا من وحدة مشتركة.
 
-T> Ensure you have loaded the container before attempting to dynamically connect a remote container.
+T> تأكد من تحميل container قبل محاولة ربط remote container ديناميكيًا.
 
-Example:
+مثال:
 
 **init.js**
 
@@ -151,11 +155,13 @@ function loadComponent(scope, module) {
 loadComponent("abtests", "test123");
 ```
 
-[See full implementation](https://github.com/module-federation/module-federation-examples/tree/master/advanced-api/dynamic-remotes)
+[راجع التنفيذ الكامل](https://github.com/module-federation/module-federation-examples/tree/master/advanced-api/dynamic-remotes)
+
+<a id="promise-based-dynamic-remotes"></a>
 
-## Promise Based Dynamic Remotes
+## Dynamic Remotes المعتمدة على Promise
 
-Generally, remotes are configured using URL's like in this example:
+عادةً تُكوّن remotes باستخدام عناوين URL كما في هذا المثال:
 
 ```js
 export default {
@@ -170,7 +176,7 @@ export default {
 };
 ```
 
-But you can also pass in a promise to this remote, which will be resolved at runtime. You should resolve this promise with any module that fits the `get/init` interface described above. For example, if you wanted to pass in which version of a federated module you should use, via a query parameter you could do something like the following:
+لكن يمكنك أيضًا تمرير promise لهذا remote، وسيُحل وقت التشغيل. يجب أن تحل هذا promise بكائن يناسب واجهة `get/init` الموضحة أعلاه. على سبيل المثال، إذا أردت تمرير إصدار الوحدة الاتحادية الذي يجب استخدامه عبر query parameter، فيمكنك فعل شيء مثل الآتي:
 
 ```js
 export default {
@@ -211,22 +217,24 @@ export default {
 };
 ```
 
-Note that when using this API you _have_ to resolve an object which contains the get/init API.
+لاحظ أنك عند استخدام هذه API _يجب_ أن تحل كائنًا يحتوي على API الخاصة بـ get/init.
+
+<a id="dynamic-public-path"></a>
 
 ## Dynamic Public Path
 
-### Offer a host API to set the publicPath
+### تقديم host API لتعيين publicPath
 
-One could allow the host to set the publicPath of a remote module at runtime by exposing a method from that remote module.
+يمكن السماح للـ host بتعيين publicPath لوحدة بعيدة وقت التشغيل عبر كشف طريقة من تلك الوحدة البعيدة.
 
-This approach is particularly helpful when you mount independently deployed child applications on the sub path of the host domain.
+هذا الأسلوب مفيد خصوصًا عندما تركّب تطبيقات فرعية منشورة بشكل مستقل على مسار فرعي من نطاق host.
 
-Scenario:
+السيناريو:
 
-You have a host app hosted on `https://my-host.com/app/*` and a child app hosted on `https://foo-app.com`. The child app is also mounted on the host domain, hence,
-`https://foo-app.com` is expected to be accessible via `https://my-host.com/app/foo-app` and `https://my-host.com/app/foo-app/*` requests are redirected to `https://foo-app.com/*` via a proxy.
+لديك تطبيق host مستضاف على `https://my-host.com/app/*` وتطبيق فرعي مستضاف على `https://foo-app.com`. التطبيق الفرعي مركب أيضًا على نطاق host، ولذلك يُتوقع أن يكون
+`https://foo-app.com` قابلًا للوصول عبر `https://my-host.com/app/foo-app` وأن تُعاد توجيه طلبات `https://my-host.com/app/foo-app/*` إلى `https://foo-app.com/*` عبر proxy.
 
-Example:
+مثال:
 
 **webpack.config.js (remote)**
 
@@ -262,11 +270,11 @@ publicPath.set("/your-public-path");
 //bootstrap app  e.g. import('./bootstrap.js')
 ```
 
-### Infer publicPath from script
+### استنتاج publicPath من السكربت
 
-One could infer the publicPath from the script tag from `document.currentScript.src` and set it with the [`__webpack_public_path__`](/api/module-variables/#__webpack_public_path__-webpack-specific) module variable at runtime.
+يمكن استنتاج publicPath من وسم script عبر `document.currentScript.src` وتعيينه باستخدام متغير [`__webpack_public_path__`](/api/module-variables/#__webpack_public_path__-webpack-specific) الخاص بالوحدة وقت التشغيل.
 
-Example:
+مثال:
 
 **webpack.config.js (remote)**
 
@@ -291,19 +299,21 @@ export default {
 __webpack_public_path__ = `${document.currentScript.src}/../`;
 ```
 
-T> There is also an `'auto'` value available to [`output.publicPath`](/configuration/output/#outputpublicpath) which automatically determines the publicPath for you.
+T> توجد أيضًا قيمة `'auto'` متاحة لـ [`output.publicPath`](/configuration/output/#outputpublicpath)، وهي تحدد publicPath تلقائيًا نيابة عنك.
+
+<a id="troubleshooting"></a>
 
-## Troubleshooting
+## استكشاف الأخطاء وإصلاحها
 
 ### `Uncaught Error: Shared module is not available for eager consumption`
 
-The application is eagerly executing an application that is operating as an omnidirectional host. There are options to choose from:
+ينفذ التطبيق بشكل eager تطبيقًا يعمل كـ host متعدد الاتجاهات. توجد عدة خيارات:
 
-You can set the dependency as eager inside the advanced API of Module Federation, which doesn’t put the modules in an async chunk, but provides them synchronously. This allows us to use these shared modules in the initial chunk. But be careful as all provided and fallback modules will always be downloaded. It’s recommended to provide it only at one point of your application, e.g. the shell.
+يمكنك تعيين التبعية كـ eager داخل API المتقدمة لـ Module Federation، وهذا لا يضع الوحدات داخل chunk غير متزامن، بل يقدمها بشكل متزامن. يسمح لنا ذلك باستخدام هذه الوحدات المشتركة في chunk الابتدائي. لكن انتبه لأن كل الوحدات المقدمة والاحتياطية ستُحمّل دائمًا. يُوصى بتقديمها في نقطة واحدة فقط من تطبيقك، مثل shell.
 
-We strongly recommend using an asynchronous boundary. It will split out the initialization code of a larger chunk to avoid any additional round trips and improve performance in general.
+نوصي بشدة باستخدام حد غير متزامن. سيؤدي ذلك إلى فصل كود التهيئة الخاص بـ chunk أكبر لتجنب أي round trips إضافية وتحسين الأداء عمومًا.
 
-For example, your entry looked like this:
+على سبيل المثال، كانت نقطة الدخول لديك تبدو هكذا:
 
 **index.js**
 
@@ -315,7 +325,7 @@ const root = createRoot(document.getElementById("root"));
 root.render(<App />);
 ```
 
-Let's create `bootstrap.js` file and move contents of the entry into it, and import that bootstrap into the entry:
+لننشئ ملف `bootstrap.js` وننقل محتويات نقطة الدخول إليه، ثم نستورد bootstrap في نقطة الدخول:
 
 **index.js**
 
@@ -337,9 +347,9 @@ Let's create `bootstrap.js` file and move contents of the entry into it, and imp
 + root.render(<App />);
 ```
 
-This method works but can have limitations or drawbacks.
+تعمل هذه الطريقة لكنها قد تملك بعض القيود أو الجوانب السلبية.
 
-Setting `eager: true` for dependency via the `ModuleFederationPlugin`
+تعيين `eager: true` للتبعية عبر `ModuleFederationPlugin`:
 
 **webpack.config.js**
 
@@ -357,9 +367,9 @@ new ModuleFederationPlugin({
 
 ### `Uncaught Error: Module "./Button" does not exist in container.`
 
-It likely does not say `"./Button"`, but the error message will look similar. This issue is typically seen if you are upgrading from webpack beta.16 to webpack beta.17.
+غالبًا لن تقول الرسالة `"./Button"` بالضبط، لكنها ستكون مشابهة. تظهر هذه المشكلة عادة عند الترقية من webpack beta.16 إلى webpack beta.17.
 
-Within ModuleFederationPlugin. Change the exposes from:
+داخل ModuleFederationPlugin، غيّر `exposes` من:
 
 ```diff
 new ModuleFederationPlugin({
@@ -372,16 +382,16 @@ new ModuleFederationPlugin({
 
 ### `Uncaught TypeError: fn is not a function`
 
-You are likely missing the remote container, make sure it's added.
-If you have the container loaded for the remote you are trying to consume, but still see this error, add the host container's remote container file to the HTML as well.
+غالبًا ينقصك remote container، تأكد من إضافته.
+إذا كان container محملًا للـ remote الذي تحاول استهلاكه وما زلت ترى هذا الخطأ، فأضف ملف remote container الخاص بالـ host إلى HTML أيضًا.
 
-### Setting `output.uniqueName`
+### تعيين `output.uniqueName`
 
-In a Module Federation setup, both the host and each remote must have a globally unique `output.uniqueName`. Webpack derives this value from the `name` field in `package.json` by default. This means two builds that share the same `package.json` `name` (a common pattern when splitting a remote out of an existing project) can silently collide at runtime.
+في إعداد Module Federation، يجب أن يكون لكل من host وكل remote قيمة `output.uniqueName` فريدة عالميًا. يشتق webpack هذه القيمة افتراضيًا من حقل `name` في `package.json`. هذا يعني أن buildين يشتركان في قيمة `name` نفسها داخل `package.json`، وهو نمط شائع عند فصل remote من مشروع قائم، يمكن أن يتصادما بصمت وقت التشغيل.
 
-One solution is to use a separate `package.json` with a distinct name for each configuration.
+أحد الحلول هو استخدام ملف `package.json` منفصل باسم مميز لكل تكوين.
 
-Alternatively, you can set `output.uniqueName` explicitly in each webpack config:
+بدلًا من ذلك، يمكنك تعيين `output.uniqueName` صراحة في كل تكوين webpack:
 
 **webpack.config.js (host)**
 
@@ -413,4 +423,4 @@ export default {
 };
 ```
 
-The value can be any string, as long as it is unique across every federated build loaded on a given page.
+يمكن أن تكون القيمة أي سلسلة، ما دامت فريدة بين كل builds الاتحادية المحملة على الصفحة نفسها.
diff --git a/src/content/concepts/module-resolution.mdx b/src/content/concepts/module-resolution.mdx
index 37bf938232ce..eacc5713d192 100644
--- a/src/content/concepts/module-resolution.mdx
+++ b/src/content/concepts/module-resolution.mdx
@@ -2,15 +2,11 @@
 title: Module Resolution
 sort: 7
 contributors:
-  - pksjce
-  - pastelsky
-  - byzyk
-  - EugeneHlushko
-  - wizardofhogwarts
+  - RlxChap2
 ---
 
-A resolver is a library which helps in locating a module by its absolute path.
-A module can be required as a dependency from another module as:
+المحلّل resolver هو مكتبة تساعد في العثور على وحدة من خلال مسارها المطلق.
+يمكن طلب وحدة تبعية من وحدة أخرى بهذا الشكل:
 
 ```js
 import foo from "path/to/module";
@@ -20,15 +16,14 @@ import foo from "path/to/module";
 require("path/to/module");
 ```
 
-The dependency module can be from the application code or a third-party library. The resolver helps
-webpack find the module code that needs to be included in the bundle for every such `require`/`import` statement.
-webpack uses [enhanced-resolve](https://github.com/webpack/enhanced-resolve) to resolve file paths while bundling modules.
+يمكن أن تأتي وحدة التبعية من كود التطبيق أو من مكتبة خارجية. يساعد resolver webpack في العثور على كود الوحدة الذي يجب تضمينه في الحزمة لكل تعليمة `require` أو `import`.
+يستخدم webpack مكتبة [enhanced-resolve](https://github.com/webpack/enhanced-resolve) لحل مسارات الملفات أثناء تجميع الوحدات.
 
-## Resolving rules in webpack
+## قواعد الحل في webpack
 
-Using `enhanced-resolve`, webpack can resolve three kinds of file paths:
+باستخدام `enhanced-resolve`، يستطيع webpack حل ثلاثة أنواع من مسارات الملفات:
 
-### Absolute paths
+### المسارات المطلقة
 
 {/* eslint-skip */}
 
@@ -38,48 +33,50 @@ import "/home/me/file";
 import "C:\\Users\\me\\file";
 ```
 
-Since we already have the absolute path to the file, no further resolution is required.
+بما أننا نملك المسار المطلق إلى الملف بالفعل، فلا حاجة إلى حل إضافي.
 
-### Relative paths
+### المسارات النسبية
 
 ```js
 import "../src/file1";
 import "./file2";
 ```
 
-In this case, the directory of the source file where the `import` or `require` occurs is taken to be the context directory. The relative path specified in the `import/require` is joined to this context path to produce the absolute path to the module.
+في هذه الحالة، يُعتبر مجلد الملف المصدري الذي تظهر فيه تعليمة `import` أو `require` هو مجلد السياق. يُدمج المسار النسبي المحدد في `import/require` مع مسار السياق هذا لإنتاج المسار المطلق للوحدة.
 
-### Module paths
+<a id="module-paths"></a>
+
+### مسارات الوحدات
 
 ```js
 import "my-module";
 import "my-module/lib/file";
 ```
 
-Modules are searched for inside all directories specified in [`resolve.modules`](/configuration/resolve/#resolvemodules).
-You can replace the original module path by an alternate path by creating an alias for it using the [`resolve.alias`](/configuration/resolve/#resolvealias) configuration option.
+يُبحث عن الوحدات داخل كل المجلدات المحددة في [`resolve.modules`](/configuration/resolve/#resolvemodules).
+يمكنك استبدال مسار الوحدة الأصلي بمسار بديل عبر إنشاء alias له باستخدام خيار التكوين [`resolve.alias`](/configuration/resolve/#resolvealias).
 
-- If the package contains a `package.json` file, then fields specified in [`resolve.exportsFields`](/configuration/resolve/#resolveexportsfields) configuration options are looked up in order, and the first such field in `package.json` determines the available exports from the package according to the [package exports guideline](/guides/package-exports/).
+- إذا كانت الحزمة تحتوي ملف `package.json`، فسيُبحث في الحقول المحددة في خيار [`resolve.exportsFields`](/configuration/resolve/#resolveexportsfields) بالترتيب، وأول حقل من هذا النوع داخل `package.json` يحدد الصادرات المتاحة من الحزمة وفقًا لـ [دليل package exports](/guides/package-exports/).
 
-Once the path is resolved based on the above rule, the resolver checks to see if the path points to a file or a directory. If the path points to a file:
+بعد حل المسار بناءً على القواعد أعلاه، يتحقق resolver مما إذا كان المسار يشير إلى ملف أو مجلد. إذا كان المسار يشير إلى ملف:
 
-- If the path has a file extension, then the file is bundled straightaway.
-- Otherwise, the file extension is resolved using the [`resolve.extensions`](/configuration/resolve/#resolveextensions) option, which tells the resolver which extensions are acceptable for resolution e.g. `.js`, `.jsx`.
+- إذا كان المسار يحتوي امتداد ملف، فسيُجمع الملف مباشرة.
+- وإلا، يُحل امتداد الملف باستخدام خيار [`resolve.extensions`](/configuration/resolve/#resolveextensions)، الذي يخبر resolver بالامتدادات المقبولة للحل، مثل `.js` و `.jsx`.
 
-If the path points to a folder, then the following steps are taken to find the right file with the right extension:
+إذا كان المسار يشير إلى مجلد، تُتبع الخطوات الآتية للعثور على الملف الصحيح بالامتداد الصحيح:
 
-- If the folder contains a `package.json` file, then fields specified in [`resolve.mainFields`](/configuration/resolve/#resolvemainfields) configuration option are looked up in order, and the first such field in `package.json` determines the file path.
-- If there is no `package.json` or if the [`resolve.mainFields`](/configuration/resolve/#resolvemainfields) do not return a valid path, file names specified in the [`resolve.mainFiles`](/configuration/resolve/#resolvemainfiles) configuration option are looked for in order, to see if a matching filename exists in the imported/required directory.
-- The file extension is then resolved in a similar way using the [`resolve.extensions`](/configuration/resolve/#resolveextensions) option.
+- إذا كان المجلد يحتوي ملف `package.json`، فسيُبحث في الحقول المحددة في خيار [`resolve.mainFields`](/configuration/resolve/#resolvemainfields) بالترتيب، وأول حقل من هذا النوع داخل `package.json` يحدد مسار الملف.
+- إذا لم يوجد `package.json` أو لم تُرجع [`resolve.mainFields`](/configuration/resolve/#resolvemainfields) مسارًا صالحًا، فسيُبحث عن أسماء الملفات المحددة في خيار [`resolve.mainFiles`](/configuration/resolve/#resolvemainfiles) بالترتيب لمعرفة ما إذا كان يوجد اسم ملف مطابق داخل المجلد المستورد أو المطلوب.
+- بعد ذلك يُحل امتداد الملف بالطريقة نفسها باستخدام خيار [`resolve.extensions`](/configuration/resolve/#resolveextensions).
 
-Webpack provides reasonable [defaults](/configuration/resolve) for these options depending on your build target.
+يوفر webpack [قيمًا افتراضية](/configuration/resolve) معقولة لهذه الخيارات بحسب هدف البناء.
 
-## Resolving Loaders
+## حلّ المحمّلات
 
-This follows the same rules as those specified for file resolution. But the [`resolveLoader`](/configuration/resolve/#resolveloader) configuration option can be used to have separate resolution rules for loaders.
+يتبع ذلك القواعد نفسها المحددة لحل الملفات. لكن يمكن استخدام خيار التكوين [`resolveLoader`](/configuration/resolve/#resolveloader) لتوفير قواعد حل منفصلة للمحمّلات.
 
-## Caching
+## التخزين المؤقت
 
-Every filesystem access is cached so that multiple parallel or serial requests to the same file occur faster. In [watch mode](/configuration/watch/#watch), only modified files are evicted from the cache. If watch mode is off, then the cache gets purged before every compilation.
+يُخزن كل وصول إلى نظام الملفات مؤقتًا حتى تتم الطلبات المتوازية أو المتسلسلة المتعددة إلى الملف نفسه بسرعة أكبر. في [وضع المراقبة](/configuration/watch/#watch)، تُخرج الملفات المعدلة فقط من cache. إذا كان وضع المراقبة معطلًا، فسيُفرغ cache قبل كل عملية ترجمة.
 
-See [Resolve API](/configuration/resolve) to learn more about the configuration options mentioned above.
+راجع [Resolve API](/configuration/resolve) لتتعلم المزيد عن خيارات التكوين المذكورة أعلاه.
diff --git a/src/content/concepts/modules.mdx b/src/content/concepts/modules.mdx
index fda4da5de7a4..ffb6f041fbaa 100644
--- a/src/content/concepts/modules.mdx
+++ b/src/content/concepts/modules.mdx
@@ -2,48 +2,44 @@
 title: Modules
 sort: 6
 contributors:
-  - TheLarkInn
-  - simon04
-  - rouzbeh84
-  - EugeneHlushko
-  - byzyk
+  - RlxChap2
 related:
   - title: JavaScript Module Systems Showdown
     url: https://auth0.com/blog/javascript-module-systems-showdown/
 ---
 
-In [modular programming](https://en.wikipedia.org/wiki/Modular_programming), developers break programs up into discrete chunks of functionality called a _module_.
+في [البرمجة المعيارية](https://en.wikipedia.org/wiki/Modular_programming)، يقسم المطورون البرامج إلى أجزاء مستقلة من الوظائف تسمى _وحدات_.
 
-Each module has a smaller surface area than a full program, making verification, debugging, and testing trivial.
-Well-written _modules_ provide solid abstractions and encapsulation boundaries, so that each module has a coherent design and a clear purpose within the overall application.
+تمتلك كل وحدة مساحة أصغر من البرنامج الكامل، مما يجعل التحقق منها وتصحيحها واختبارها أبسط.
+الوحدات المكتوبة جيدًا تقدم تجريدات متينة وحدود تغليف واضحة، بحيث يكون لكل وحدة تصميم متماسك وغرض واضح داخل التطبيق ككل.
 
-Node.js has supported modular programming almost since its inception.
-On the web, however, support for _modules_ has been slow to arrive.
-Multiple tools exist that support modular JavaScript on the web, with a variety of benefits and limitations.
-Webpack builds on lessons learned from these systems and applies the concept of _modules_ to any file in your project.
+يدعم Node.js البرمجة المعيارية منذ بداياته تقريبًا.
+أما على الويب، فقد تأخر دعم _الوحدات_ في الوصول.
+توجد أدوات متعددة تدعم JavaScript المعياري على الويب، ولكل منها فوائد وحدود مختلفة.
+يبني webpack على الدروس المستفادة من هذه الأنظمة ويطبق مفهوم _الوحدات_ على أي ملف في مشروعك.
 
-## What is a webpack Module
+## ما هي وحدة webpack
 
-In contrast to [Node.js modules](https://nodejs.org/api/modules.html), webpack _modules_ can express their _dependencies_ in a variety of ways. A few examples are:
+على عكس [وحدات Node.js](https://nodejs.org/api/modules.html)، يمكن لوحدات webpack التعبير عن _تبعياتها_ بطرق متعددة. من الأمثلة:
 
-- An [ES2015 `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) statement
-- A [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) `require()` statement
-- An [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) `define` and `require` statement
-- An [`@import` statement](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) inside of a css/sass/less file.
-- An image url in a stylesheet `url(...)` or HTML `<img src=...>` file.
+- تعليمة [ES2015 `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+- تعليمة [CommonJS](https://wiki.commonjs.org/wiki/Modules/1.1) `require()`
+- تعليمات [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) مثل `define` و `require`
+- تعليمة [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) داخل ملف css/sass/less.
+- رابط صورة في `url(...)` داخل ملف تنسيقات أو في ملف HTML يحتوي `<img src=...>`.
 
-## Supported Module Types
+## أنواع الوحدات المدعومة
 
-Webpack supports the following module types natively:
+يدعم webpack أنواع الوحدات التالية بشكل أصلي:
 
-- [ECMAScript modules](/guides/ecma-script-modules)
-- CommonJS modules
-- AMD modules
-- [Assets](/guides/asset-modules)
-- WebAssembly modules
+- [وحدات ECMAScript](/guides/ecma-script-modules)
+- وحدات CommonJS
+- وحدات AMD
+- [الأصول](/guides/asset-modules)
+- وحدات WebAssembly
 
-In addition to that webpack supports modules written in a variety of languages and preprocessors via _loaders_. _Loaders_ describe to webpack **how** to process non-native _modules_ and include these _dependencies_ into your _bundles_.
-The webpack community has built _loaders_ for a wide variety of popular languages and language processors, including:
+بالإضافة إلى ذلك، يدعم webpack الوحدات المكتوبة بلغات ومعالجات مسبقة متعددة عبر _المحمّلات_. تصف _المحمّلات_ لـ webpack **كيف** يعالج _الوحدات_ غير الأصلية ويدرج هذه _التبعيات_ داخل _الحزم_.
+بنى مجتمع webpack _محمّلات_ لمجموعة واسعة من اللغات ومعالجات اللغة الشائعة، ومنها:
 
 - [CoffeeScript](http://coffeescript.org)
 - [TypeScript](https://www.typescriptlang.org)
@@ -53,6 +49,6 @@ The webpack community has built _loaders_ for a wide variety of popular language
 - [Stylus](http://stylus-lang.com)
 - [Elm](https://elm-lang.org/)
 
-And many others! Overall, webpack provides a powerful and rich API for customization that allows one to use webpack for **any stack**, while staying **non-opinionated** about your development, testing, and production workflows.
+وغيرها الكثير. عمومًا، يقدم webpack واجهة API قوية وغنية للتخصيص، مما يسمح باستخدامه مع **أي مكدس تقني**، مع بقائه **غير متحيز** لطريقة التطوير أو الاختبار أو الإنتاج لديك.
 
-For a full list, see [**the list of loaders**](/loaders) or [**write your own**](/api/loaders).
+للاطلاع على القائمة الكاملة، راجع [**قائمة المحمّلات**](/loaders) أو [**اكتب محمّلًا خاصًا بك**](/api/loaders).
diff --git a/src/content/concepts/output.mdx b/src/content/concepts/output.mdx
index c78d277f89c2..2b61172054ea 100644
--- a/src/content/concepts/output.mdx
+++ b/src/content/concepts/output.mdx
@@ -2,20 +2,16 @@
 title: Output
 sort: 2
 contributors:
-  - TheLarkInn
-  - chyipin
-  - rouzbeh84
-  - byzyk
-  - EugeneHlushko
+  - RlxChap2
 ---
 
 import CodeBlockWithCopy from "../../components/CodeBlockWithCopy/CodeBlockWithCopy";
 
-Configuring the `output` configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple `entry` points, only one `output` configuration is specified.
+تحديد خيارات تكوين `output` يخبر webpack كيف يكتب الملفات المترجمة إلى القرص. لاحظ أنه يمكن وجود عدة نقاط `entry`، لكن لا يتم تحديد إلا تكوين `output` واحد.
 
-## Usage
+## الاستخدام
 
-The minimum requirement for the `output` property in your webpack configuration is to set its value to an object and provide an [`output.filename`](/configuration/output/#outputfilename) to use for the output file(s):
+الحد الأدنى المطلوب لخاصية `output` في تكوين webpack هو جعل قيمتها كائنًا وتوفير [`output.filename`](/configuration/output/#outputfilename) لاستخدامه اسمًا لملف أو ملفات الإخراج:
 
 **webpack.config.js**
 
@@ -27,11 +23,11 @@ export default {
 };
 ```
 
-This configuration would output a single `bundle.js` file into the `dist` directory.
+سيخرج هذا التكوين ملفًا واحدًا باسم `bundle.js` داخل مجلد `dist`.
 
-## Multiple Entry Points
+## نقاط دخول متعددة
 
-If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use [substitutions](/configuration/output/#outputfilename) to ensure that each file has a unique name.
+إذا كان تكوينك ينشئ أكثر من "chunk" واحد، كما يحدث مع نقاط الدخول المتعددة أو عند استخدام إضافات مثل CommonsChunkPlugin، فينبغي استخدام [الاستبدالات](/configuration/output/#outputfilename) لضمان حصول كل ملف على اسم فريد.
 
 ```js
 import path from "node:path";
@@ -54,9 +50,9 @@ export default {
 // writes to disk: ./dist/app.js, ./dist/search.js
 ```
 
-## Advanced
+## متقدم
 
-Here's a more complicated example of using a CDN and hashes for assets:
+إليك مثالًا أكثر تعقيدًا يستخدم CDN وهاشات للأصول:
 
 **config.js**
 
@@ -70,7 +66,7 @@ export default {
 };
 ```
 
-In cases where the eventual `publicPath` of output files isn't known at compile time, it can be left blank and set dynamically at runtime via the `__webpack_public_path__` variable in the entry point file:
+في الحالات التي لا يكون فيها `publicPath` النهائي لملفات الإخراج معروفًا وقت الترجمة، يمكن تركه فارغًا وتعيينه ديناميكيًا وقت التشغيل عبر المتغير `__webpack_public_path__` في ملف نقطة الدخول:
 
 ```js
 __webpack_public_path__ = myRuntimePublicPath;
diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx
index 1df8c6c7b218..50fadea2c9a8 100644
--- a/src/content/concepts/plugins.mdx
+++ b/src/content/concepts/plugins.mdx
@@ -2,24 +2,18 @@
 title: Plugins
 sort: 4
 contributors:
-  - TheLarkInn
-  - jhnns
-  - rouzbeh84
-  - johnstew
-  - MisterDev
-  - byzyk
-  - chenxsan
+  - RlxChap2
 ---
 
-**Plugins** are the [backbone](https://github.com/webpack/tapable) of webpack. Webpack itself is built on the **same plugin system** that you use in your webpack configuration!
+**الإضافات** هي [العمود الفقري](https://github.com/webpack/tapable) لـ webpack. فـ webpack نفسه مبني على **نظام الإضافات نفسه** الذي تستخدمه في تكوين webpack لديك.
 
-They also serve the purpose of doing **anything else** that a [loader](/concepts/loaders) cannot do. Webpack provides [many such plugins](/plugins/) out of the box.
+كما تؤدي الإضافات غرض تنفيذ **أي شيء آخر** لا يستطيع [المحمّل](/concepts/loaders) فعله. يوفر webpack [كثيرًا من هذه الإضافات](/plugins/) مباشرة.
 
-T> When consuming [`webpack-sources`](https://github.com/webpack/webpack-sources) package in plugins, prefer `compiler.webpack.sources` instead of importing from `webpack` or `webpack-sources` to avoid version conflicts for persistent caching.
+T> عند استخدام حزمة [`webpack-sources`](https://github.com/webpack/webpack-sources) داخل الإضافات، يفضل استخدام `compiler.webpack.sources` بدلًا من الاستيراد من `webpack` أو `webpack-sources` لتجنب تعارض الإصدارات مع التخزين المؤقت الدائم.
 
-## Anatomy
+## التشريح
 
-A webpack **plugin** is a JavaScript object that has an [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) method. This `apply` method is called by the webpack compiler, giving access to the **entire** compilation lifecycle.
+إضافة webpack هي كائن JavaScript يحتوي على طريقة [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply). يستدعي مترجم webpack طريقة `apply` هذه، مما يمنحها وصولًا إلى دورة حياة الترجمة **بالكامل**.
 
 **ConsoleLogOnBuildWebpackPlugin.js**
 
@@ -37,15 +31,15 @@ class ConsoleLogOnBuildWebpackPlugin {
 export default ConsoleLogOnBuildWebpackPlugin;
 ```
 
-It is recommended that the first parameter of the tap method of the compiler hook should be a camelized version of the plugin name. It is advisable to use a constant for this so it can be reused in all hooks.
+يوصى بأن يكون المعامل الأول لطريقة tap الخاصة بخطاف المترجم نسخة camelCase من اسم الإضافة. ومن الأفضل استخدام ثابت لهذا الاسم حتى يعاد استخدامه في كل hooks.
 
-## Usage
+## الاستخدام
 
-Since **plugins** can take arguments/options, you must pass a `new` instance to the `plugins` property in your webpack configuration.
+بما أن **الإضافات** يمكنها استقبال معاملات أو خيارات، يجب تمرير نسخة `new` إلى خاصية `plugins` في تكوين webpack.
 
-Depending on how you are using webpack, there are multiple ways to use plugins.
+اعتمادًا على طريقة استخدامك لـ webpack، توجد عدة طرق لاستخدام الإضافات.
 
-### Configuration
+### التكوين
 
 **webpack.config.js**
 
@@ -79,11 +73,11 @@ export default {
 };
 ```
 
-The `ProgressPlugin` is used to customize how progress should be reported during compilation, and `HtmlWebpackPlugin` will generate a HTML file including the `my-first-webpack.bundle.js` file using a `script` tag.
+تُستخدم `ProgressPlugin` لتخصيص طريقة الإبلاغ عن التقدم أثناء الترجمة، بينما تنشئ `HtmlWebpackPlugin` ملف HTML يتضمن ملف `my-first-webpack.bundle.js` باستخدام وسم `script`.
 
 ### Node API
 
-When using the Node API, you can also pass plugins via the `plugins` property in the configuration.
+عند استخدام Node API، يمكنك أيضًا تمرير الإضافات عبر خاصية `plugins` في التكوين.
 
 **some-node-script.js**
 
@@ -100,4 +94,4 @@ compiler.run((err, stats) => {
 });
 ```
 
-T> Did you know: The example seen above is extremely similar to the [webpack runtime itself!](https://github.com/webpack/webpack/blob/e7087ffeda7fa37dfe2ca70b5593c6e899629a2c/bin/webpack.js#L290-L292) There are lots of great usage examples hiding in the [webpack source code](https://github.com/webpack/webpack) that you can apply to your own configurations and scripts!
+T> هل تعلم؟ المثال السابق يشبه إلى حد كبير [webpack runtime نفسه](https://github.com/webpack/webpack/blob/e7087ffeda7fa37dfe2ca70b5593c6e899629a2c/bin/webpack.js#L290-L292). توجد أمثلة استخدام رائعة كثيرة مخفية في [كود webpack المصدري](https://github.com/webpack/webpack) يمكنك تطبيقها على تكويناتك وسكربتاتك.
diff --git a/src/content/concepts/targets.mdx b/src/content/concepts/targets.mdx
index 8180c0e55a6b..be1f13945fbc 100644
--- a/src/content/concepts/targets.mdx
+++ b/src/content/concepts/targets.mdx
@@ -2,21 +2,16 @@
 title: Targets
 sort: 10
 contributors:
-  - TheLarkInn
-  - rouzbeh84
-  - johnstew
-  - srilman
-  - byzyk
-  - EugeneHlushko
+  - RlxChap2
 ---
 
-Because JavaScript can be written for both server and browser, webpack offers multiple deployment _targets_ that you can set in your webpack [configuration](/configuration).
+لأن JavaScript يمكن كتابته لكل من الخادم والمتصفح، يوفر webpack عدة _أهداف_ نشر يمكنك ضبطها في [تكوين](/configuration) webpack.
 
-W> The webpack `target` property is not to be confused with the `output.libraryTarget` property. For more information see [our guide](/concepts/output/) on the `output` property.
+W> لا ينبغي الخلط بين خاصية `target` في webpack وخاصية `output.libraryTarget`. لمزيد من المعلومات، راجع [دليلنا](/concepts/output/) حول خاصية `output`.
 
-## Usage
+## الاستخدام
 
-To set the `target` property, you set the target value in your webpack config:
+لتعيين خاصية `target`، اضبط قيمة الهدف في تكوين webpack:
 
 **webpack.config.js**
 
@@ -26,15 +21,15 @@ export default {
 };
 ```
 
-In the example above, using `node` webpack will compile for usage in a Node.js-like environment (uses Node.js `require` to load chunks and not touch any built in modules like `fs` or `path`).
+في المثال أعلاه، سيترجم webpack الكود ليعمل في بيئة شبيهة بـ Node.js عند استخدام `node`، أي أنه يستخدم `require` الخاص بـ Node.js لتحميل chunks ولا يلمس الوحدات المدمجة مثل `fs` أو `path`.
 
-Each _target_ has a variety of deployment/environment specific additions, support to fit its needs. See what [targets are available](/configuration/target/).
+لكل _هدف_ إضافات ودعم خاص ببيئة النشر أو التشغيل التي يناسبها. راجع [الأهداف المتاحة](/configuration/target/).
 
-?> Further expansion for other popular target values
+?> توسعة لاحقة لقيم أهداف شائعة أخرى.
 
-## Multiple Targets
+## أهداف متعددة
 
-Although webpack does **not** support multiple strings being passed into the `target` property, you can create an isomorphic library by bundling two separate configurations:
+مع أن webpack **لا** يدعم تمرير عدة سلاسل إلى خاصية `target`، يمكنك إنشاء مكتبة isomorphic عبر تجميع تكوينين منفصلين:
 
 **webpack.config.js**
 
@@ -66,13 +61,13 @@ const clientConfig = {
 export default [serverConfig, clientConfig];
 ```
 
-The example above will create a `lib.js` and `lib.node.js` file in your `dist` folder.
+سينشئ المثال أعلاه ملفي `lib.js` و `lib.node.js` داخل مجلد `dist`.
 
-## Resources
+## موارد
 
-As seen from the options above, there are multiple deployment _targets_ that you can choose from. Below is a list of examples and resources that you can refer to.
+كما يظهر من الخيارات أعلاه، توجد عدة _أهداف_ نشر يمكنك الاختيار منها. فيما يلي قائمة بأمثلة وموارد يمكن الرجوع إليها.
 
-- **[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**: A great resource for testing and viewing different webpack _targets_. Also great for bug reporting.
-- **[Boilerplate of Electron-React Application](https://github.com/chentsulin/electron-react-boilerplate)**: A good example of a build process for electron's main process and renderer process.
+- **[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**: مورد ممتاز لاختبار أهداف webpack المختلفة واستعراضها، ومفيد أيضًا عند الإبلاغ عن الأخطاء.
+- **[Boilerplate of Electron-React Application](https://github.com/chentsulin/electron-react-boilerplate)**: مثال جيد على عملية بناء لتطبيق Electron يشمل العملية الرئيسية وعملية العارض.
 
-?> Need to find up to date examples of these webpack targets being used in live code or boilerplates.
+?> نحتاج إلى إيجاد أمثلة محدثة لاستخدام أهداف webpack هذه في كود حي أو قوالب جاهزة.
diff --git a/src/content/concepts/under-the-hood.mdx b/src/content/concepts/under-the-hood.mdx
index 8929b1d9f27e..985d1bc0f14a 100644
--- a/src/content/concepts/under-the-hood.mdx
+++ b/src/content/concepts/under-the-hood.mdx
@@ -2,21 +2,18 @@
 title: Under The Hood
 sort: 14
 contributors:
-  - smelukov
-  - EugeneHlushko
-  - chenxsan
-  - amirsaeed671
+  - RlxChap2
 ---
 
-> This section describes webpack internals and can be useful for plugin developers
+> يصف هذا القسم التفاصيل الداخلية لـ webpack، ويمكن أن يكون مفيدًا لمطوري الإضافات.
 
-The bundling is a function that takes some files and emits others.
+التجميع هو دالة تأخذ بعض الملفات وتصدر ملفات أخرى.
 
-But between input and output, it also has [modules](/concepts/modules/), [entry points](/concepts/entry-points/), chunks, chunk groups, and many other intermediate parts.
+لكن بين الإدخال والإخراج، توجد أيضًا [وحدات](/concepts/modules/) و[نقاط دخول](/concepts/entry-points/) و chunks و chunk groups وأجزاء وسيطة أخرى كثيرة.
 
-## The main parts
+## الأجزاء الرئيسية
 
-Every file used in your project is a [Module](/concepts/modules/)
+كل ملف مستخدم في مشروعك هو [وحدة](/concepts/modules/).
 
 **./index.js**
 
@@ -30,11 +27,11 @@ import app from "./app.js";
 export default "the app";
 ```
 
-By using each other, the modules form a graph (`ModuleGraph`).
+من خلال استخدام الوحدات لبعضها، تشكّل هذه الوحدات مخططًا (`ModuleGraph`).
 
-During the bundling process, modules are combined into chunks.
-Chunks combine into chunk groups and form a graph (`ChunkGraph`) interconnected through modules.
-When you describe an entry point - under the hood, you create a chunk group with one chunk.
+أثناء عملية التجميع، تُدمج الوحدات في chunks.
+وتُدمج chunks في chunk groups وتشكل مخططًا (`ChunkGraph`) مترابطًا عبر الوحدات.
+عندما تصف نقطة دخول، فأنت داخليًا تنشئ chunk group يحتوي chunk واحدًا.
 
 **./webpack.config.js**
 
@@ -44,10 +41,10 @@ export default {
 };
 ```
 
-One chunk group with the `main` name created (`main` is the default name for an entry point).
-This chunk group contains `./index.js` module. As the parser handles imports inside `./index.js` new modules are added into this chunk.
+يُنشأ chunk group واحد باسم `main`، وهو الاسم الافتراضي لنقطة الدخول.
+يحتوي هذا chunk group على وحدة `./index.js`. وبينما يعالج parser الاستيرادات داخل `./index.js`، تُضاف وحدات جديدة إلى هذا chunk.
 
-Another example:
+مثال آخر:
 
 **./webpack.config.js**
 
@@ -60,19 +57,19 @@ export default {
 };
 ```
 
-Two chunk groups with names `home` and `about` are created.
-Each of them has a chunk with a module - `./home.js` for `home` and `./about.js` for `about`
+يُنشأ chunk groupان باسمين `home` و `about`.
+لكل واحد منهما chunk يحتوي وحدة: `./home.js` لـ `home` و `./about.js` لـ `about`.
 
-> There might be more than one chunk in a chunk group. For example [SplitChunksPlugin](/plugins/split-chunks-plugin/) splits a chunk into one or more chunks.
+> قد يوجد أكثر من chunk داخل chunk group واحد. على سبيل المثال، يقوم [SplitChunksPlugin](/plugins/split-chunks-plugin/) بتقسيم chunk إلى chunk واحد أو أكثر.
 
 ## Chunks
 
-Chunks come in two forms:
+تأتي chunks في شكلين:
 
-- `initial` is the main chunk for the entry point. This chunk contains all the modules and their dependencies that you specify for an entry point.
-- `non-initial` is a chunk that may be lazy-loaded. It may appear when [dynamic import](/guides/code-splitting/#dynamic-imports) or [SplitChunksPlugin](/plugins/split-chunks-plugin/) is being used.
+- `initial`: هو chunk الرئيسي لنقطة الدخول. يحتوي هذا chunk على كل الوحدات وتبعياتها التي تحددها لنقطة دخول.
+- `non-initial`: هو chunk يمكن تحميله كسولًا. قد يظهر عند استخدام [dynamic import](/guides/code-splitting/#dynamic-imports) أو [SplitChunksPlugin](/plugins/split-chunks-plugin/).
 
-Each chunk has a corresponding **asset**. The assets are the output files - the result of bundling.
+لكل chunk **أصل** مقابل. الأصول هي ملفات الإخراج الناتجة عن التجميع.
 
 **webpack.config.js**
 
@@ -93,23 +90,23 @@ import("./app.jsx").then((App) => {
 });
 ```
 
-Initial chunk with name `main` is created. It contains:
+يُنشأ chunk ابتدائي باسم `main`. يحتوي على:
 
 - `./src/index.jsx`
 - `react`
 - `react-dom`
 
-and all their dependencies, except `./app.jsx`
+وكل تبعياتها، باستثناء `./app.jsx`.
 
-Non-initial chunk for `./app.jsx` is created as this module is imported dynamically.
+يُنشأ chunk غير ابتدائي لـ `./app.jsx` لأن هذه الوحدة مستوردة ديناميكيًا.
 
-**Output:**
+**الإخراج:**
 
-- `/dist/main.js` - an `initial` chunk
-- `/dist/394.js` - `non-initial` chunk
+- `/dist/main.js`: chunk من نوع `initial`
+- `/dist/394.js`: chunk من نوع `non-initial`
 
-By default, there is no name for `non-initial` chunks so that a unique ID is used instead of a name.
-When using dynamic import we may specify a chunk name explicitly by using a ["magic" comment](/api/module-methods/#magic-comments):
+افتراضيًا، لا يوجد اسم لـ chunks من نوع `non-initial`، لذلك يُستخدم معرف فريد بدلًا من الاسم.
+عند استخدام dynamic import يمكننا تحديد اسم chunk صراحة باستخدام تعليق ["سحري"](/api/module-methods/#magic-comments):
 
 ```jsx
 import(
@@ -121,21 +118,21 @@ import(
 });
 ```
 
-**Output:**
+**الإخراج:**
 
-- `/dist/main.js` - an `initial` chunk
-- `/dist/app.js` - `non-initial` chunk
+- `/dist/main.js`: chunk من نوع `initial`
+- `/dist/app.js`: chunk من نوع `non-initial`
 
-## Output
+## الإخراج
 
-The names of the output files are affected by the two fields in the config:
+تتأثر أسماء ملفات الإخراج بحقلين في التكوين:
 
-- [`output.filename`](/configuration/output/#outputfilename) - for `initial` chunk files
-- [`output.chunkFilename`](/configuration/output/#outputchunkfilename) - for `non-initial` chunk files
-- In some cases chunks are used `initial` and `non-initial`. In those cases `output.filename` is used.
+- [`output.filename`](/configuration/output/#outputfilename): لملفات chunks من نوع `initial`
+- [`output.chunkFilename`](/configuration/output/#outputchunkfilename): لملفات chunks من نوع `non-initial`
+- في بعض الحالات تُستخدم chunks كـ `initial` و `non-initial`. في هذه الحالات يُستخدم `output.filename`.
 
-A [few placeholders](/configuration/output/#template-strings) are available in these fields. Most often:
+توجد [عدة placeholders](/configuration/output/#template-strings) متاحة في هذه الحقول. الأكثر استخدامًا:
 
-- `[id]` - chunk id (e.g. `[id].js` -> `485.js`)
-- `[name]` - chunk name (e.g. `[name].js` -> `app.js`). If a chunk has no name, then its id will be used
-- `[contenthash]` - md4-hash of the output file content (e.g. `[contenthash].js` -> `4ea6ff1de66c537eb9b2.js`)
+- `[id]`: معرف chunk، مثل `[id].js` -> `485.js`
+- `[name]`: اسم chunk، مثل `[name].js` -> `app.js`. إذا لم يكن للـ chunk اسم، فسيُستخدم معرفه.
+- `[contenthash]`: هاش md4 لمحتوى ملف الإخراج، مثل `[contenthash].js` -> `4ea6ff1de66c537eb9b2.js`
diff --git a/src/content/concepts/why-webpack.mdx b/src/content/concepts/why-webpack.mdx
index 57782c51e050..1c1255a1af92 100644
--- a/src/content/concepts/why-webpack.mdx
+++ b/src/content/concepts/why-webpack.mdx
@@ -2,52 +2,49 @@
 title: Why webpack
 sort: 13
 contributors:
-  - debs-obrien
-  - montogeek
-  - jeremenichelli
-  - EugeneHlushko
+  - RlxChap2
 ---
 
-To understand why you should use webpack, let's recap how we used JavaScript on the web before bundlers were a thing.
+لفهم سبب استخدام webpack، دعنا نسترجع كيف كنا نستخدم JavaScript على الويب قبل ظهور المجمعات.
 
-There are two ways to run JavaScript in a browser. First, include a script for each functionality; this solution is hard to scale because loading too many scripts can cause a network bottleneck. The second option is to use a big `.js` file containing all your project code, but this leads to problems in scope, size, readability and maintainability.
+توجد طريقتان لتشغيل JavaScript في المتصفح. الأولى هي تضمين سكربت لكل وظيفة؛ وهذا حل يصعب توسيعه لأن تحميل عدد كبير من السكربتات قد يسبب اختناقًا في الشبكة. الخيار الثاني هو استخدام ملف `.js` كبير يحتوي كل كود مشروعك، لكن هذا يؤدي إلى مشكلات في النطاق والحجم وقابلية القراءة والصيانة.
 
-## IIFEs - Immediately invoked function expressions
+## IIFEs - تعبيرات الدوال المستدعاة فورًا
 
-IIFEs solve scoping issues for large projects; when script files are wrapped by an IIFE, you can safely concatenate or safely combine files without worrying about scope collision.
+تحل IIFEs مشكلات النطاق في المشاريع الكبيرة؛ عندما تُلف ملفات السكربت داخل IIFE، يمكنك دمج الملفات أو جمعها بأمان دون القلق من تصادم النطاقات.
 
-The use of IIFEs led to tools like Make, Gulp, Grunt, Broccoli or Brunch. These tools are known as task runners, and they concatenate all your project files together.
+أدى استخدام IIFEs إلى ظهور أدوات مثل Make و Gulp و Grunt و Broccoli و Brunch. تُعرف هذه الأدوات باسم مشغلات المهام، وهي تجمع كل ملفات مشروعك معًا.
 
-However, changing one file means you have to rebuild the whole thing. Concatenating makes it easier to reuse scripts across files but makes build optimizations more difficult. How can you find out if code is actually being used or not?
+لكن تغيير ملف واحد يعني أنك تحتاج إلى إعادة بناء كل شيء. يجعل الجمع إعادة استخدام السكربتات عبر الملفات أسهل، لكنه يجعل تحسينات البناء أصعب. كيف يمكنك معرفة ما إذا كان الكود مستخدمًا فعلًا أم لا؟
 
-Even if you only use a single function from lodash, you have to add the entire library and then squish it together. How do you treeshake the dependencies on your code? Lazy loading chunks of code can be hard to do at scale and requires a lot of manual work from the developer.
+حتى لو كنت تستخدم دالة واحدة فقط من lodash، يجب عليك إضافة المكتبة كاملة ثم ضغطها معًا. كيف تنفذ treeshaking لتبعيات كودك؟ قد يكون التحميل الكسول لأجزاء من الكود صعبًا على نطاق واسع ويتطلب الكثير من العمل اليدوي من المطور.
 
-## Birth of JavaScript Modules happened thanks to Node.js
+## ولادة وحدات JavaScript بفضل Node.js
 
-Webpack runs on Node.js, a JavaScript runtime that can be used in computers and servers outside a browser environment.
+يعمل webpack على Node.js، وهو runtime لـ JavaScript يمكن استخدامه في الحواسيب والخوادم خارج بيئة المتصفح.
 
-When Node.js was released a new era started, and it came with new challenges. Now that JavaScript is not running in a browser, how are Node applications supposed to load new chunks of code? There are no html files and script tags that can be added to it.
+عندما صدر Node.js بدأت حقبة جديدة، وجاءت معها تحديات جديدة. بما أن JavaScript لم تعد تعمل داخل المتصفح فقط، كيف يفترض بتطبيقات Node أن تحمل أجزاء جديدة من الكود؟ لا توجد ملفات HTML ولا وسوم script يمكن إضافتها إليها.
 
-CommonJS came out and introduced `require`, which allows you to load and use a module in the current file. This solved scope issues out of the box by importing each module as it was needed.
+ظهر CommonJS وقدم `require`، مما يسمح بتحميل وحدة واستخدامها داخل الملف الحالي. حلّ ذلك مشكلات النطاق مباشرة عبر استيراد كل وحدة عند الحاجة إليها.
 
-## npm + Node.js + modules – mass distribution
+## npm + Node.js + modules - توزيع واسع النطاق
 
-JavaScript is taking over the world as a language, as a platform and as a way to rapidly develop and create fast applications.
+تسيطر JavaScript على العالم كلغة ومنصة وطريقة لتطوير تطبيقات سريعة وإنشائها بسرعة.
 
-But there is no browser support for CommonJS. There are no [live bindings](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358). There are problems with circular references. Synchronous module resolution and loading is slow. While CommonJS was a great solution for Node.js projects, browsers didn't support modules, so bundlers and tools like Browserify, RequireJS and SystemJS were created, allowing us to write CommonJS modules that run in a browser.
+لكن المتصفحات لا تدعم CommonJS. لا توجد [live bindings](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358). توجد مشكلات مع المراجع الدائرية. كما أن حل الوحدات وتحميلها بشكل متزامن بطيء. ومع أن CommonJS كان حلًا رائعًا لمشاريع Node.js، لم تكن المتصفحات تدعم الوحدات، لذلك ظهرت مجمعات وأدوات مثل Browserify و RequireJS و SystemJS، مما سمح لنا بكتابة وحدات CommonJS تعمل في المتصفح.
 
-## ESM - ECMAScript Modules
+## ESM - وحدات ECMAScript
 
-The good news for web projects is that modules are becoming an official feature in the ECMAScript standard. However, browser support is incomplete and bundling is still faster and currently recommended over these early module implementations.
+الخبر الجيد لمشاريع الويب هو أن الوحدات أصبحت ميزة رسمية في معيار ECMAScript. لكن دعم المتصفحات ما زال غير مكتمل، وما زال التجميع أسرع وموصى به حاليًا مقارنة بهذه التطبيقات المبكرة للوحدات.
 
-## Automatic Dependency Collection
+## جمع التبعيات تلقائيًا
 
-Old school Task Runners and even Google Closure Compiler requires you to manually declare all dependencies upfront. While bundlers like webpack automatically build and infer your [dependency graph](/concepts/dependency-graph/) based on what is imported and exported. This along with other [plugins](/concepts/plugins/) and [loaders](/concepts/loaders/) make for a great developer experience.
+كانت مشغلات المهام القديمة، وحتى Google Closure Compiler، تتطلب منك إعلان كل التبعيات يدويًا مقدمًا. أما المجمعات مثل webpack فتبني وتستنتج [مخطط التبعيات](/concepts/dependency-graph/) تلقائيًا بناءً على ما يتم استيراده وتصديره. ومع [الإضافات](/concepts/plugins/) و[المحمّلات](/concepts/loaders/) الأخرى، ينتج عن ذلك تجربة تطوير ممتازة.
 
-## Wouldn't it be nice…
+## ألن يكون رائعًا...
 
-...to have something that will not only let us write modules but also support any module format (at least until we get to ESM) and handle resources and assets at the same time?
+...لو كان هناك شيء لا يسمح لنا بكتابة الوحدات فقط، بل يدعم أيضًا أي صيغة وحدات، على الأقل إلى أن نصل إلى ESM، ويتعامل مع الموارد والأصول في الوقت نفسه؟
 
-This is why webpack exists. It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.
+لهذا وُجد webpack. إنه أداة تسمح لك بتجميع تطبيقات JavaScript، مع دعم ESM و CommonJS، ويمكن توسيعها لدعم أصول مختلفة كثيرة مثل الصور والخطوط وملفات التنسيق.
 
-Webpack cares about performance and load times; it's always improving or adding new features, such as async chunk loading and prefetching, to deliver the best possible experience for your project and your users.
+يهتم webpack بالأداء وأوقات التحميل؛ فهو يتحسن دائمًا أو يضيف ميزات جديدة، مثل تحميل chunks بشكل غير متزامن و prefetching، لتقديم أفضل تجربة ممكنة لمشروعك ومستخدميك.

From 2b1905a9e880f33764dfcd19508635d04cb1bab9 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Thu, 21 May 2026 17:58:03 +0300
Subject: [PATCH 06/35] docs(ar): changing layout from ltr to rtl

---
 src/components/Markdown/Markdown.css          |  43 ++++---
 src/components/Navigation/Navigation.jsx      |   4 +-
 .../SidebarMobile/SidebarMobile.jsx           |  39 +++---
 src/components/Site/Site.jsx                  |   8 +-
 src/components/SplashViz/SplashViz.jsx        |   7 +-
 src/components/Sponsors/Sponsors.jsx          |   2 +-
 src/config/site.js                            |   2 +
 src/index.html                                |   2 +-
 src/server.jsx                                |   3 +-
 src/styles/index.css                          | 116 +++++++++++++++++-
 src/styles/tailwind.css                       |   4 +-
 11 files changed, 187 insertions(+), 43 deletions(-)
 create mode 100644 src/config/site.js

diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 3c0676f22c21..d6bd9a8beb87 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -67,7 +67,8 @@
     }
 
     a[aria-hidden="true"] {
-      @apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;
+      @apply text-[0.8em] h-[1em] opacity-0 invisible;
+      margin-inline-start: 0.5rem;
       transition: all 250ms;
     }
 
@@ -105,7 +106,7 @@
 
   ul,
   ol {
-    @apply pl-[30px];
+    padding-inline-start: 30px;
     list-style: revert;
 
     &:first-child {
@@ -141,7 +142,8 @@
   }
 
   aside {
-    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;
+    @apply border-solid py-[0.75em] px-[1em] text-gray-500;
+    border-inline-start: 4px solid var(--color-aside-border);
     > :first-child {
       margin-top: 0;
     }
@@ -152,7 +154,7 @@
     &.warning,
     &.preview,
     &.todo {
-      @apply border-l-[3px];
+      border-inline-start-width: 3px;
 
       .tip-content {
         @apply italic;
@@ -171,19 +173,23 @@
     }
 
     &.tip {
-      @apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;
+      @apply bg-aside-tip-bg text-aside-tip-text;
+      border-inline-start-color: var(--color-aside-tip-border);
     }
 
     &.warning {
-      @apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;
+      @apply bg-aside-warning-bg text-aside-warning-text;
+      border-inline-start-color: var(--color-aside-warning-border);
     }
 
     &.preview {
-      @apply bg-gray-100 text-aside-warning-text border-l-brand-blue;
+      @apply bg-gray-100 text-aside-warning-text;
+      border-inline-start-color: var(--color-brand-blue);
     }
 
     &.todo {
-      @apply bg-aside-todo-bg text-aside-todo-text border-l-aside-todo-border;
+      @apply bg-aside-todo-bg text-aside-todo-text;
+      border-inline-start-color: var(--color-aside-todo-border);
 
       .tip-content::before {
         content: "[TODO]: ";
@@ -193,7 +199,8 @@
   }
 
   blockquote {
-    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500 italic;
+    @apply border-solid py-[0.75em] px-[1em] text-gray-500 italic;
+    border-inline-start: 4px solid var(--color-aside-border);
 
     > :first-child {
       margin-top: 0;
@@ -227,10 +234,12 @@
   }
 
   th {
-    @apply font-bold text-left py-1.5 px-3 bg-table-header-bg border-r border-solid border-r-table-border;
+    @apply font-bold py-1.5 px-3 bg-table-header-bg border-solid;
+    border-inline-end: 1px solid var(--color-table-border);
+    text-align: start;
 
     &:last-child {
-      @apply border-r-0;
+      border-inline-end: 0;
     }
   }
 
@@ -252,7 +261,9 @@
   }
 
   td {
-    @apply py-1 px-3 border-r-0 grid grid-cols-2 text-left border-b border-solid border-b-gray-100;
+    @apply py-1 px-3 grid grid-cols-2 border-b border-solid border-b-gray-100;
+    border-inline-end: 0;
+    text-align: start;
     &::before {
       content: attr(data-th);
       @apply font-bold;
@@ -267,9 +278,10 @@
       &::before {
         content: none;
       }
-      @apply border-r border-r-table-border border-b-0;
+      @apply border-b-0;
+      border-inline-end: 1px solid var(--color-table-border);
       &:last-child {
-        @apply border-r-0;
+        border-inline-end: 0;
       }
     }
   }
@@ -391,7 +403,8 @@
 }
 
 .dark .markdown blockquote {
-  @apply border-l-dark-section-border text-dark-muted;
+  @apply text-dark-muted;
+  border-inline-start-color: var(--color-dark-section-border);
 }
 
 .dark .markdown blockquote.tip {
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 309080bb77ee..45a32c0fbab2 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -141,7 +141,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
               className="fill-current text-white"
             />
           </button>
-          <Link to="/" className="md:mr-auto">
+          <Link to="/" className="navigation__brand md:mr-auto">
             <Logo />
           </Link>
           <nav
@@ -205,7 +205,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
               ]}
             />
           </nav>
-          <div className="inline-flex items-center gap-x-[18px] ml-[18px]">
+          <div className="navigation__controls inline-flex items-center gap-x-[18px] ml-[18px]">
             <HelloDarkness />
             {mounted && (
               <DocSearch
diff --git a/src/components/SidebarMobile/SidebarMobile.jsx b/src/components/SidebarMobile/SidebarMobile.jsx
index cc6cb65cd002..c6edd6e93b98 100644
--- a/src/components/SidebarMobile/SidebarMobile.jsx
+++ b/src/components/SidebarMobile/SidebarMobile.jsx
@@ -5,6 +5,10 @@ import CloseIcon from "../../styles/icons/cross.svg";
 import Link from "../Link/Link.jsx";
 
 // TODO: Check to make sure all pages are shown and properly sorted
+function isRTL() {
+  return document.documentElement.dir === "rtl";
+}
+
 export default function SidebarMobile({ isOpen, toggle, sections }) {
   const containerRef = useRef(null);
   const openerRef = useRef(null);
@@ -52,22 +56,19 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
 
   const handleTouchEnd = useCallback((event) => {
     const threshold = 20;
+    const deltaX = lastTouchPosition.current.x - initialTouchPosition.current.x;
+    const shouldClose = isRTL() ? deltaX > threshold : deltaX < -threshold;
+    const shouldOpen = isRTL() ? deltaX < -threshold : deltaX > threshold;
 
     // Free up all the inline styling
     containerRef.current.classList.remove("!duration-0");
     containerRef.current.style.transform = "";
 
     // are we open?
-    if (
-      isOpenRef.current &&
-      initialTouchPosition.current.x - lastTouchPosition.current.x > threshold
-    ) {
+    if (isOpenRef.current && shouldClose) {
       // this is in top level nav callback
       toggleRef.current(false);
-    } else if (
-      !isOpenRef.current &&
-      lastTouchPosition.current.x - initialTouchPosition.current.x > threshold
-    ) {
+    } else if (!isOpenRef.current && shouldOpen) {
       toggleRef.current(true);
       event.preventDefault();
       event.stopPropagation();
@@ -80,28 +81,34 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
     const opener = openerRef.current;
 
     const handleTouchMove = (event) => {
-      const xDiff = initialTouchPosition.current.x - event.touches[0].pageX;
+      const deltaX = event.touches[0].pageX - initialTouchPosition.current.x;
       const yDiff = initialTouchPosition.current.y - event.touches[0].pageY;
-      const factor = Math.abs(yDiff / xDiff);
+      const xDistance = Math.abs(deltaX);
+      const closeDistance = isRTL() ? deltaX : -deltaX;
+      const factor = xDistance === 0 ? Infinity : Math.abs(yDiff / xDistance);
 
       // Factor makes sure horizontal and vertical scroll dont take place together
-      if (xDiff > 0 && factor < 0.8) {
+      if (closeDistance > 0 && factor < 0.8) {
         event.preventDefault();
-        container.style.transform = `translateX(-${xDiff}px)`;
+        container.style.transform = `translateX(${isRTL() ? closeDistance : -closeDistance}px)`;
         lastTouchPosition.current.x = event.touches[0].pageX;
         lastTouchPosition.current.y = event.touches[0].pageY;
       }
     };
 
     const handleOpenerTouchMove = (event) => {
-      const xDiff = event.touches[0].pageX - initialTouchPosition.current.x;
+      const deltaX = event.touches[0].pageX - initialTouchPosition.current.x;
       const yDiff = initialTouchPosition.current.y - event.touches[0].pageY;
-      const factor = Math.abs(yDiff / xDiff);
+      const xDistance = Math.abs(deltaX);
+      const openDistance = isRTL() ? -deltaX : deltaX;
+      const factor = xDistance === 0 ? Infinity : Math.abs(yDiff / xDistance);
 
       // Factor makes sure horizontal and vertical scroll dont take place together
-      if (xDiff > 0 && xDiff < 295 && factor < 0.8) {
+      if (openDistance > 0 && openDistance < 295 && factor < 0.8) {
         event.preventDefault();
-        container.style.transform = `translateX(calc(-100% + ${xDiff}px))`;
+        container.style.transform = isRTL()
+          ? `translateX(calc(100% - ${openDistance}px))`
+          : `translateX(calc(-100% + ${openDistance}px))`;
         lastTouchPosition.current.x = event.touches[0].pageX;
         lastTouchPosition.current.y = event.touches[0].pageY;
       }
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 20686fb6d286..09b0d1551c8f 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -15,6 +15,7 @@ import {
 import Content from "../../_content.json";
 import OgImage from "../../assets/icon-pwa-512x512.png";
 import Logo from "../../assets/logo-on-white-bg.svg";
+import { SITE_DIRECTION, SITE_LANGUAGE } from "../../config/site.js";
 import Favicon from "../../favicon.ico";
 import {
   extractPages,
@@ -216,9 +217,12 @@ function Site(props) {
   }, [location, navigate]);
 
   return (
-    <div className="flex flex-col min-h-screen bg-white dark:bg-gray-900">
+    <div
+      dir={SITE_DIRECTION}
+      className="flex flex-col min-h-screen bg-white dark:bg-gray-900"
+    >
       <Helmet>
-        <html lang="en" />
+        <html lang={SITE_LANGUAGE} dir={SITE_DIRECTION} />
         <meta charset="utf-8" />
         <meta name="theme-color" content="#2B3A42" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 1fc05d892c32..3f68de14386b 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -5,7 +5,10 @@ import HomeSVG from "./SplashVizSVG.mjs";
 
 export default function SplashViz() {
   return (
-    <section className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!">
+    <section
+      dir="ltr"
+      className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!"
+    >
       <h1 className="flex flex-wrap items-center justify-center text-white text-[33.178px] md:text-[39.813px] text-center font-[200] mt-[80px] md:mt-[90px] row-start-1 row-end-2">
         <span> bundle your</span>
         <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
@@ -16,7 +19,7 @@ export default function SplashViz() {
         </TextRotator>
       </h1>
       <div
-        className="absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] mx-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3 [&_img]:pt-4 [&_img]:w-full [&_img]:h-full"
+        className="splash-viz__art absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] mx-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3 [&_img]:pt-4 [&_img]:w-full [&_img]:h-full"
         dangerouslySetInnerHTML={{ __html: HomeSVG.body }}
       />
       <Cube
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index 9063e7399a91..303d257e9843 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -8,7 +8,7 @@ import Link from "../Link/Link.jsx";
 // Tailwind CSS is used for styling
 
 const Sponsors = () => (
-  <div className="absolute h-full w-[250px] ml-[-250px] mr-2.5">
+  <div className="sponsors-panel absolute h-full w-[250px] ml-[-250px] mr-2.5">
     <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 my-6 px-6 pb-12 overflow-hidden bg-transparent transition-colors duration-200 top-24">
       {/* AG Grid */}
       <div className="bg-white dark:bg-black shadow-lg rounded-lg m-2 transition-transform duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-105 dark:shadow-[0_0_40px_rgba(255,255,255,0.18)]">
diff --git a/src/config/site.js b/src/config/site.js
new file mode 100644
index 000000000000..e2a2d0737ef6
--- /dev/null
+++ b/src/config/site.js
@@ -0,0 +1,2 @@
+export const SITE_LANGUAGE = "ar";
+export const SITE_DIRECTION = "rtl";
diff --git a/src/index.html b/src/index.html
index 49f8fb48c543..514e4827b3d8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ar" dir="rtl">
   <head> </head>
   <body>
     <div id="root"></div>
diff --git a/src/server.jsx b/src/server.jsx
index aad994d5d50b..757b87b2b30c 100644
--- a/src/server.jsx
+++ b/src/server.jsx
@@ -7,6 +7,7 @@ import { StaticRouter } from "react-router";
 import assets from "../dist/prod-assets-manifest.json";
 import PrintScript from "./components/Print/PrintScript.jsx";
 import Site from "./components/Site/Site.jsx";
+import { SITE_DIRECTION, SITE_LANGUAGE } from "./config/site.js";
 
 function isPrintPage(url) {
   return url.includes("/printable");
@@ -42,5 +43,5 @@ export default (locals) => {
   const hoistedTags = headTagsMatch ? headTagsMatch[1] : "";
   const bodyHtml = renderedHtml.slice(hoistedTags.length);
 
-  return `<!DOCTYPE html><html><head>${css}${hoistedTags}</head><body><div id="root">${bodyHtml}</div>${scripts}</body></html>`;
+  return `<!DOCTYPE html><html lang="${SITE_LANGUAGE}" dir="${SITE_DIRECTION}"><head>${css}${hoistedTags}</head><body><div id="root">${bodyHtml}</div>${scripts}</body></html>`;
 };
diff --git a/src/styles/index.css b/src/styles/index.css
index b5b2b759ca09..de55b7699cd5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -10,6 +10,10 @@ html {
   @apply box-border;
 }
 
+html[dir="rtl"] {
+  direction: rtl;
+}
+
 body {
   font:
     400 1rem "Source Sans Pro",
@@ -22,10 +26,119 @@ body {
   @apply text-blue-800;
 }
 
+html[dir="rtl"] body {
+  text-align: right;
+}
+
 .dark body {
   @apply bg-dark-bg text-dark-text;
 }
 
+html[dir="rtl"] pre,
+html[dir="rtl"] code,
+html[dir="rtl"] kbd,
+html[dir="rtl"] samp {
+  direction: ltr;
+  text-align: left;
+  unicode-bidi: isolate;
+}
+
+html[dir="rtl"] .language-diff {
+  direction: ltr;
+}
+
+html[dir="rtl"] .navigation__brand {
+  margin-right: 0;
+}
+
+@media (min-width: 768px) {
+  html[dir="rtl"] .navigation__brand {
+    margin-left: auto;
+  }
+}
+
+html[dir="rtl"] .navigation__controls {
+  margin-left: 0;
+  margin-right: 18px;
+}
+
+html[dir="rtl"] .sidebar-mobile {
+  left: auto;
+  right: 0;
+}
+
+html[dir="rtl"] .sidebar-mobile:not(.sidebar-mobile--visible) {
+  transform: translate3d(calc(100% - 5px), 0, 0) !important;
+}
+
+html[dir="rtl"] .sidebar-mobile > div:first-of-type {
+  left: auto;
+  right: 285px;
+}
+
+html[dir="rtl"] .sidebar-mobile__close {
+  left: 22px;
+  right: auto;
+}
+
+html[dir="rtl"] [class~="group/item"] > button svg,
+html[dir="rtl"] [class~="group/item"] > svg {
+  margin-left: 0.5rem;
+  margin-right: 0;
+}
+
+html[dir="rtl"] [class~="group/item"] ul {
+  padding-left: 0;
+  padding-right: 1.5rem;
+}
+
+html[dir="rtl"] [class~="group/item"] ul::before {
+  border-left: 0;
+  border-right: 1px dashed #777676;
+  left: auto;
+  right: 1.5rem;
+}
+
+html[dir="rtl"] [class~="group/item"] li {
+  padding-left: 0;
+  padding-right: 1rem;
+}
+
+html[dir="rtl"] [class~="group/item"] li::before {
+  left: auto;
+  right: 0;
+}
+
+html[dir="rtl"] [role="progressbar"] > div {
+  transform-origin: right;
+}
+
+.splash-viz__art,
+.splash-viz__art svg {
+  direction: ltr;
+}
+
+.sponsors-panel {
+  direction: ltr;
+}
+
+html[dir="rtl"] .sponsors-panel {
+  left: calc(50% + 512px + 10px);
+  margin-left: 0;
+  margin-right: 0;
+  right: auto;
+}
+
+html[dir="rtl"] .sponsors-panel > div {
+  display: none;
+}
+
+@media (min-width: 1544px) {
+  html[dir="rtl"] .sponsors-panel > div {
+    display: flex;
+  }
+}
+
 .header-link {
   @apply inline-block w-[22px] h-[22px] bg-no-repeat bg-center bg-contain;
   background-image: url("../assets/link.svg");
@@ -42,7 +155,8 @@ body {
     @apply transition-colors duration-[250ms];
 
     &.icon-link {
-      @apply inline-block text-[0.7em] ml-[16px] -rotate-45 text-[#909090];
+      @apply inline-block text-[0.7em] -rotate-45 text-[#909090];
+      margin-inline-start: 16px;
 
       &:hover {
         @apply text-brand-link;
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9db5fb51dfaf..5eac0eed63a1 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -86,11 +86,11 @@
   @apply w-full float-left md:w-1/2 md:px-3.75;
 }
 .splash__left p {
-  @apply text-left;
+  text-align: start;
 }
 .splash__right {
   @apply w-full float-left md:w-1/2 md:px-3.75 mb-[1em];
 }
 .splash__right p {
-  @apply text-left;
+  text-align: start;
 }

From 4a205dee1b74a9951b9129b91d4b5390ac925dba Mon Sep 17 00:00:00 2001
From: Devon <167473386+arabpolice@users.noreply.github.com>
Date: Thu, 21 May 2026 19:47:54 +0000
Subject: [PATCH 07/35] feat(guides): guides arabic translation

---
 src/content/guides/asset-management.mdx       | 619 +++---------------
 src/content/guides/asset-modules.mdx          | 135 ++--
 src/content/guides/author-libraries.mdx       |  99 ++-
 src/content/guides/build-performance.mdx      | 156 +++--
 src/content/guides/caching.mdx                |  80 +--
 src/content/guides/code-splitting.mdx         | 205 +++---
 src/content/guides/csp.mdx                    |  29 +-
 src/content/guides/dependency-management.mdx  |  64 +-
 src/content/guides/development-vagrant.mdx    |  52 +-
 src/content/guides/development.mdx            | 143 ++--
 src/content/guides/ecma-script-modules.mdx    | 147 ++---
 src/content/guides/entry-advanced.mdx         |  20 +-
 src/content/guides/environment-variables.mdx  |  25 +-
 src/content/guides/getting-started.mdx        | 201 +++---
 src/content/guides/hot-module-replacement.mdx | 143 ++--
 src/content/guides/index.mdx                  |  12 +-
 src/content/guides/installation.mdx           |  45 +-
 src/content/guides/integrations.mdx           |  44 +-
 src/content/guides/lazy-loading.mdx           |  84 ++-
 src/content/guides/modern-web-platform.mdx    |  78 +--
 src/content/guides/native-css.mdx             | 110 ++--
 src/content/guides/output-management.mdx      | 114 ++--
 src/content/guides/package-exports.mdx        | 434 ++++++------
 src/content/guides/production.mdx             |  80 +--
 .../guides/progressive-web-application.mdx    |  54 +-
 src/content/guides/public-path.mdx            |  39 +-
 src/content/guides/shimming.mdx               | 167 +++--
 src/content/guides/tree-shaking.mdx           | 312 +++++----
 src/content/guides/typescript.mdx             | 157 +++--
 src/content/guides/web-workers.mdx            |  52 +-
 30 files changed, 1604 insertions(+), 2296 deletions(-)

diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx
index c0bdc3b1f6c2..0144ccba9f4d 100644
--- a/src/content/guides/asset-management.mdx
+++ b/src/content/guides/asset-management.mdx
@@ -1,30 +1,19 @@
 ---
-title: Asset Management
+title: إدارة الملفات (Assets)
 sort: 2
 contributors:
-  - skipjack
-  - michael-ciniawsky
-  - TheDutchCoder
-  - sudarsangp
-  - chenxsan
-  - EugeneHlushko
-  - AnayaDesign
-  - wizardofhogwarts
-  - astonizer
-  - snitin315
-  - Brennvo
-  - mr-baraiya
+  - arabpolice
 ---
 
-If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled.
+إذا كنت تتابع الأدلة من البداية، فمن المفترض أن لديك الآن مشروعًا صغيرًا يعرض النص "Hello webpack". والآن دعنا نحاول إضافة بعض الملفات الأخرى مثل الصور لنرى كيف يمكن التعامل معها.
 
-Prior to webpack, front-end developers would use tools like [grunt](https://gruntjs.com/) and [gulp](https://gulpjs.com/) to process these assets and move them from their `/src` folder into their `/dist` or `/build` directory. The same idea was used for JavaScript modules, but tools like webpack will **dynamically bundle** all dependencies (creating what's known as a [dependency graph](/concepts/dependency-graph)). This is great because every module now _explicitly states its dependencies_ and we'll avoid bundling modules that aren't in use.
+قبل webpack، كان مطورو الواجهة الأمامية يستخدمون أدوات مثل [grunt](https://gruntjs.com/) و [gulp](https://gulpjs.com/) لمعالجة هذه الملفات ونقلها من مجلد `/src` إلى مجلدات مثل `/dist` أو `/build`. وكانت الفكرة نفسها تُستخدم مع وحدات JavaScript، لكن أدوات مثل webpack تقوم **بتجميع جميع التبعيات بشكل ديناميكي** (مما يُنشئ ما يُعرف باسم [dependency graph](/concepts/dependency-graph)). وهذا رائع لأن كل وحدة تقوم الآن _بالتصريح عن تبعياتها بشكل واضح_، كما سنتجنب تجميع الوحدات غير المستخدمة.
 
-One of the coolest webpack features is that you can also _include any other type of file_, besides JavaScript, for which there is a loader or built-in [Asset Modules](/guides/asset-modules/) support. This means that the same benefits listed above for JavaScript (e.g. explicit dependencies) can be applied to everything used in building a website or web app. Let's start with CSS, as you may already be familiar with that setup.
+واحدة من أروع ميزات webpack هي أنه يمكنك أيضًا _تضمين أي نوع آخر من الملفات_ بجانب JavaScript، طالما يوجد loader مناسب أو دعم مدمج من خلال [Asset Modules](/guides/asset-modules/). هذا يعني أن نفس الفوائد المذكورة سابقًا لـ JavaScript (مثل التبعيات الواضحة) يمكن تطبيقها على كل شيء يُستخدم لبناء موقع أو تطبيق ويب. لنبدأ مع CSS لأنك غالبًا معتاد بالفعل على هذا النوع من الإعداد.
 
-## Setup
+## الإعداد
 
-Let's make a minor change to our project before we get started:
+لنقم بإجراء تعديل بسيط على المشروع قبل أن نبدأ:
 
 **dist/index.html**
 
@@ -34,14 +23,14 @@ Let's make a minor change to our project before we get started:
    <head>
      <meta charset="utf-8" />
 -    <title>Getting Started</title>
-+    <title>Asset Management</title>
++    <title>إدارة الملفات</title>
    </head>
    <body>
 -    <script src="main.js"></script>
 +    <script src="bundle.js"></script>
    </body>
  </html>
-```
+````
 
 **webpack.config.js**
 
@@ -62,9 +51,9 @@ Let's make a minor change to our project before we get started:
  };
 ```
 
-## Loading CSS
+## تحميل ملفات CSS
 
-In order to `import` a CSS file from within a JavaScript module, you need to install and add the [style-loader](/loaders/style-loader) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module):
+لكي تتمكن من `import` ملف CSS من داخل وحدة JavaScript، تحتاج إلى تثبيت وإضافة [style-loader](/loaders/style-loader) و [css-loader](/loaders/css-loader) إلى إعدادات [`module`](/configuration/module):
 
 ```bash
 npm install --save-dev style-loader css-loader
@@ -96,9 +85,9 @@ npm install --save-dev style-loader css-loader
  };
 ```
 
-Module loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order (right to left).
+يمكن ربط الـ loaders معًا في سلسلة. كل loader يقوم بتطبيق تحويلات على الملف الذي تتم معالجته. ويتم تنفيذ السلسلة بالعكس (من اليمين إلى اليسار).
 
-For example, given the following rule:
+على سبيل المثال:
 
 ```js
 export default {
@@ -113,9 +102,9 @@ export default {
 };
 ```
 
-Even though `postcss-loader` appears before `sass-loader` in the `use` array, webpack runs `sass-loader` first (compiling Sass into CSS), then runs `postcss-loader` on the result.
+بالرغم من أن `postcss-loader` يظهر قبل `sass-loader` داخل المصفوفة `use`، إلا أن webpack يقوم أولًا بتشغيل `sass-loader` (لتحويل Sass إلى CSS)، ثم يمرر النتيجة إلى `postcss-loader`.
 
-If this order is not maintained, webpack may throw errors.
+إذا لم يتم الحفاظ على هذا الترتيب، فقد يقوم webpack بإظهار أخطاء.
 
 **project**
 
@@ -160,34 +149,23 @@ If this order is not maintained, webpack may throw errors.
  document.body.appendChild(component());
 ```
 
-Now run your build command:
+الآن قم بتشغيل أمر البناء:
 
 ```bash
 $ npm run build
-
-...
-[webpack-cli] Compilation finished
-asset bundle.js 72.6 KiB [emitted] [minimized] (name: main) 1 related asset
-runtime modules 1000 bytes 5 modules
-orphan modules 326 bytes [orphan] 1 module
-cacheable modules 539 KiB
-  modules by path ./node_modules/ 538 KiB
-    ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
-    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
-  modules by path ./src/ 965 bytes
-    ./src/index.js + 1 modules 639 bytes [built] [code generated]
-    ./node_modules/css-loader/dist/cjs.js!./src/style.css 326 bytes [built] [code generated]
-webpack 5.x.x compiled successfully in 2231 ms
 ```
 
-Open up `dist/index.html` in your browser again and you should see that `Hello webpack` is now styled in red. To see what webpack did, inspect the page (don't view the page source, as it won't show you the result, because the `<style>` tag is dynamically created by JavaScript) and look at the page's head tags. It should contain the style block that we imported in `index.js`.
+افتح ملف `dist/index.html` في المتصفح مجددًا، وستلاحظ أن النص `Hello webpack` أصبح باللون الأحمر.
+
+إذا أردت رؤية ما فعله webpack، قم بفحص الصفحة باستخدام أدوات المطور (Developer Tools) وليس "عرض مصدر الصفحة"، لأن وسم `<style>` يتم إنشاؤه ديناميكيًا بواسطة JavaScript.
+
+لاحظ أنه يمكنك — وفي أغلب الحالات يجب عليك — [تصغير ملفات CSS](/plugins/mini-css-extract-plugin/#minimizing-for-production) لتحسين سرعة التحميل في بيئة الإنتاج. كما توجد loaders لمعظم تقنيات CSS مثل [postcss](/loaders/postcss-loader) و [sass](/loaders/sass-loader) و [less](/loaders/less-loader).
 
-Note that you can, and in most cases should, [minimize css](/plugins/mini-css-extract-plugin/#minimizing-for-production) for better load times in production. On top of that, loaders exist for pretty much any flavor of CSS you can think of – [postcss](/loaders/postcss-loader), [sass](/loaders/sass-loader), and [less](/loaders/less-loader) to name a few.
+## تحميل الصور
 
-## Loading Images
+الآن نحن نستورد CSS، لكن ماذا عن الصور مثل الخلفيات والأيقونات؟
 
-So now we're pulling in our CSS, but what about our images like backgrounds and icons? As of webpack 5, using the built-in [Asset Modules](/guides/asset-modules/) we can easily incorporate those in our system as well:
+ابتداءً من webpack 5، يمكننا استخدام [Asset Modules](/guides/asset-modules/) المدمجة للتعامل مع الصور بسهولة:
 
 **webpack.config.js**
 
@@ -219,9 +197,17 @@ So now we're pulling in our CSS, but what about our images like backgrounds and
  };
 ```
 
-Now, when you `import MyImage from './my-image.png'`, that image will be processed and added to your `output` directory _and_ the `MyImage` variable will contain the final url of that image after processing. When using the [css-loader](/loaders/css-loader), as shown above, a similar process will occur for `url('./my-image.png')` within your CSS. The loader will recognize this is a local file, and replace the `'./my-image.png'` path with the final path to the image in your `output` directory. The [html-loader](/loaders/html-loader) handles `<img src="./my-image.png" />` in the same manner.
+الآن، عندما تقوم بكتابة:
+
+```js
+import MyImage from './my-image.png'
+```
+
+سيقوم webpack بمعالجة الصورة وإضافتها إلى مجلد `output`، كما أن المتغير `MyImage` سيحتوي على الرابط النهائي للصورة بعد المعالجة.
 
-Let's add an image to our project and see how this works, you can use any image you like:
+عند استخدام [css-loader](/loaders/css-loader)، فإن `url('./my-image.png')` داخل CSS سيتم التعامل معه بالطريقة نفسها.
+
+لنقم بإضافة صورة إلى المشروع:
 
 **project**
 
@@ -254,7 +240,7 @@ Let's add an image to our project and see how this works, you can use any image
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
 
-+  // Add the image to our existing div.
++  // إضافة الصورة داخل العنصر الحالي
 +  const myIcon = new Image();
 +  myIcon.src = Icon;
 +
@@ -275,36 +261,25 @@ Let's add an image to our project and see how this works, you can use any image
  }
 ```
 
-Let's create a new build and open up the `index.html` file again:
+قم بإعادة البناء وافتح الملف مجددًا:
 
 ```bash
 $ npm run build
+```
+
+إذا سار كل شيء بشكل صحيح، فسترى الأيقونة كخلفية متكررة، بالإضافة إلى عنصر `img` بجانب النص `Hello webpack`.
+
+إذا قمت بفحص العنصر، ستلاحظ أن اسم الملف الحقيقي أصبح شيئًا مثل:
 
-...
-[webpack-cli] Compilation finished
-assets by status 9.88 KiB [cached] 1 asset
-asset bundle.js 73.4 KiB [emitted] [minimized] (name: main) 1 related asset
-runtime modules 1.82 KiB 6 modules
-orphan modules 326 bytes [orphan] 1 module
-cacheable modules 540 KiB (javascript) 9.88 KiB (asset)
-  modules by path ./node_modules/ 539 KiB
-    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB
-      ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
-      ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]
-    ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
-  modules by path ./src/ 1.45 KiB (javascript) 9.88 KiB (asset)
-    ./src/index.js + 1 modules 794 bytes [built] [code generated]
-    ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
-    ./node_modules/css-loader/dist/cjs.js!./src/style.css 648 bytes [built] [code generated]
-webpack 5.x.x compiled successfully in 1972 ms
+```txt
+29822eaa871e8eadeaa4.png
 ```
 
-If all went well, you should now see your icon as a repeating background, as well as an `img` element beside our `Hello webpack` text. If you inspect this element, you'll see that the actual filename has changed to something like `29822eaa871e8eadeaa4.png`. This means webpack found our file in the `src` folder and processed it!
+وهذا يعني أن webpack قام بمعالجة الملف بنجاح.
 
-## Loading Fonts
+## تحميل الخطوط
 
-So what about other assets like fonts? The Asset Modules will take any file you load through them and output it to your build directory. This means we can use them for any kind of file, including fonts. Let's update our `webpack.config.js` to handle font files:
+يمكن استخدام Asset Modules أيضًا للتعامل مع الخطوط (Fonts). لنقم بتحديث `webpack.config.js`:
 
 **webpack.config.js**
 
@@ -340,28 +315,14 @@ So what about other assets like fonts? The Asset Modules will take any file you
  };
 ```
 
-Add some font files to your project:
-
-**project**
+أضف بعض ملفات الخطوط إلى المشروع:
 
 ```diff
-  webpack-demo
-   ├── package.json
-   ├── package-lock.json
-   ├── webpack.config.js
-   ├── /dist
-   │   ├── bundle.js
-   │   └── index.html
-   ├── /src
 +  │   ├── my-font.woff
 +  │   ├── my-font.woff2
-   │   ├── icon.png
-   │   ├── style.css
-   │   └── index.js
-   └── /node_modules
 ```
 
-With the loader configured and fonts in place, you can incorporate them via an `@font-face` declaration. The local `url(...)` directive will be picked up by webpack, as it was with the image:
+يمكنك الآن استخدام `@font-face` داخل CSS:
 
 **src/style.css**
 
@@ -381,75 +342,29 @@ With the loader configured and fonts in place, you can incorporate them via an `
  }
 ```
 
-Now run a new build and let's see if webpack handled our fonts:
+قم بإعادة البناء وتحقق مما إذا تغير الخط.
 
-```bash
-$ npm run build
+## تحميل البيانات
 
-...
-[webpack-cli] Compilation finished
-assets by status 9.88 KiB [cached] 1 asset
-assets by info 33.2 KiB [immutable]
-  asset 55055dbfc7c6a83f60ba.woff 18.8 KiB [emitted] [immutable] [from: src/my-font.woff] (auxiliary name: main)
-  asset 8f717b802eaab4d7fb94.woff2 14.5 KiB [emitted] [immutable] [from: src/my-font.woff2] (auxiliary name: main)
-asset bundle.js 73.7 KiB [emitted] [minimized] (name: main) 1 related asset
-runtime modules 1.82 KiB 6 modules
-orphan modules 326 bytes [orphan] 1 module
-cacheable modules 541 KiB (javascript) 43.1 KiB (asset)
-  javascript modules 541 KiB
-    modules by path ./node_modules/ 539 KiB
-      modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB 2 modules
-      ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
-    modules by path ./src/ 1.98 KiB
-      ./src/index.js + 1 modules 794 bytes [built] [code generated]
-      ./node_modules/css-loader/dist/cjs.js!./src/style.css 1.21 KiB [built] [code generated]
-  asset modules 126 bytes (javascript) 43.1 KiB (asset)
-    ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
-    ./src/my-font.woff2 42 bytes (javascript) 14.5 KiB (asset) [built] [code generated]
-    ./src/my-font.woff 42 bytes (javascript) 18.8 KiB (asset) [built] [code generated]
-webpack 5.x.x compiled successfully in 2142 ms
-```
+نوع آخر مفيد من الملفات هو البيانات مثل JSON و CSV و TSV و XML.
 
-Open up `dist/index.html` again and see if our `Hello webpack` text has changed to the new font. If all is well, you should see the changes.
+دعم JSON مدمج بالفعل داخل webpack، لذلك:
 
-## Loading Data
+```js
+import Data from './data.json'
+```
 
-Another useful asset that can be loaded is data, like JSON files, CSVs, TSVs, and XML. Support for JSON is actually built-in, similar to NodeJS, meaning `import Data from './data.json'` will work by default. To import CSVs, TSVs, and XML you could use the [csv-loader](https://github.com/theplatapi/csv-loader) and [xml-loader](https://github.com/gisikw/xml-loader). Let's handle loading all three:
+سيعمل مباشرة.
+
+أما CSV و TSV و XML فتحتاج إلى loaders إضافية:
 
 ```bash
 npm install --save-dev csv-loader xml-loader
 ```
 
-**webpack.config.js**
+ثم أضفها إلى إعدادات webpack:
 
 ```diff
- import path from 'node:path';
- import { fileURLToPath } from 'node:url';
-
- const __filename = fileURLToPath(import.meta.url);
- const __dirname = path.dirname(__filename);
-
- export default {
-   entry: './src/index.js',
-   output: {
-     filename: 'bundle.js',
-     path: path.resolve(__dirname, 'dist'),
-   },
-   module: {
-     rules: [
-       {
-         test: /\.css$/i,
-         use: ['style-loader', 'css-loader'],
-       },
-       {
-         test: /\.(png|svg|jpg|jpeg|gif)$/i,
-         type: 'asset/resource',
-       },
-       {
-         test: /\.(woff|woff2|eot|ttf|otf)$/i,
-         type: 'asset/resource',
-       },
 +      {
 +        test: /\.(csv|tsv)$/i,
 +        use: ['csv-loader'],
@@ -458,273 +373,44 @@ npm install --save-dev csv-loader xml-loader
 +        test: /\.xml$/i,
 +        use: ['xml-loader'],
 +      },
-     ],
-   },
- };
-```
-
-Add some data files to your project:
-
-**project**
-
-```diff
-  webpack-demo
-   ├── package.json
-   ├── package-lock.json
-   ├── webpack.config.js
-   ├── /dist
-   │   ├── bundle.js
-   │   └── index.html
-   ├── /src
-+  │   ├── data.xml
-+  │   ├── data.csv
-   │   ├── my-font.woff
-   │   ├── my-font.woff2
-   │   ├── icon.png
-   │   ├── style.css
-   │   └── index.js
-   └── /node_modules
-```
-
-**src/data.xml**
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<note>
-  <to>Mary</to>
-  <from>John</from>
-  <heading>Reminder</heading>
-  <body>Call Cindy on Tuesday</body>
-</note>
 ```
 
-**src/data.csv**
-
-```csv
-to,from,heading,body
-Mary,John,Reminder,Call Cindy on Tuesday
-Zoe,Bill,Reminder,Buy orange juice
-Autumn,Lindsey,Letter,I miss you
-```
-
-Now you can `import` any one of those four types of data (JSON, CSV, TSV, XML) and the `Data` variable you import, will contain parsed JSON for consumption:
-
-**src/index.js**
-
-```diff
- import _ from 'lodash';
- import './style.css';
- import Icon from './icon.png';
-+import Data from './data.xml';
-+import Notes from './data.csv';
-
- function component() {
-   const element = document.createElement('div');
-
-   // Lodash, now imported by this script
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-   element.classList.add('hello');
-
-   // Add the image to our existing div.
-   const myIcon = new Image();
-   myIcon.src = Icon;
-
-   element.appendChild(myIcon);
-
-+  console.log(Data);
-+  console.log(Notes);
-+
-   return element;
- }
-
- document.body.appendChild(component());
-```
-
-Re-run the `npm run build` command and open `dist/index.html`. If you look at the console in your developer tools, you should be able to see your imported data being logged to the console!
-
-T> This can be especially helpful when implementing some sort of data visualization using a tool like [d3](https://github.com/d3). Instead of making an ajax request and parsing the data at runtime you can load it into your module during the build process so that the parsed data is ready to go as soon as the module hits the browser.
-
-W> Only the default export of JSON modules can be used without warning.
-
-```js
-// No warning
-import data from "./data.json";
-```
+بعدها يمكنك استيراد البيانات مثل أي ملف آخر:
 
 ```js
-// Warning shown, this is not allowed by the spec.
-import { foo } from "./data.json";
+import Data from './data.xml';
+import Notes from './data.csv';
 ```
 
-### Customize parser of JSON modules
+وستحصل على بيانات JSON جاهزة للاستخدام.
 
-It's possible to import any `toml`, `yaml` or `json5` files as a JSON module by using a [custom parser](/configuration/module/#ruleparserparse) instead of a specific webpack loader.
-
-Let's say you have a `data.toml`, a `data.yaml` and a `data.json5` files under `src` folder:
-
-**src/data.toml**
-
-```toml
-title = "TOML Example"
-
-[owner]
-name = "Tom Preston-Werner"
-organization = "GitHub"
-bio = "GitHub Cofounder & CEO\nLikes tater tots and beer."
-dob = 1979-05-27T07:32:00Z
-```
-
-**src/data.yaml**
-
-```yaml
-title: YAML Example
-owner:
-  name: Tom Preston-Werner
-  organization: GitHub
-  bio: |-
-    GitHub Cofounder & CEO
-    Likes tater tots and beer.
-  dob: 1979-05-27T07:32:00.000Z
-```
+## تخصيص محلل JSON
 
-**src/data.json5**
-
-```json5
-{
-  // comment
-  title: "JSON5 Example",
-  owner: {
-    name: "Tom Preston-Werner",
-    organization: "GitHub",
-    bio: "GitHub Cofounder & CEO\n\
-Likes tater tots and beer.",
-    dob: "1979-05-27T07:32:00.000Z",
-  },
-}
-```
+يمكنك أيضًا استيراد ملفات `toml` و `yaml` و `json5` باستخدام parser مخصص بدلًا من webpack loader.
 
-Install `toml`, `yamljs` and `json5` packages first:
+قم أولًا بتثبيت الحزم:
 
 ```bash
 npm install toml yamljs json5 --save-dev
 ```
 
-And configure them in your webpack configuration:
-
-**webpack.config.js**
+ثم أضف parsers مخصصة داخل `webpack.config.js`.
 
-```diff
- import path from 'node:path';
- import { fileURLToPath } from 'node:url';
-+import toml from 'toml';
-+import yaml from 'yamljs';
-+import json5 from 'json5';
+بعدها يمكنك الاستيراد بهذه الطريقة:
 
- const __filename = fileURLToPath(import.meta.url);
- const __dirname = path.dirname(__filename);
-
- export default {
-   entry: './src/index.js',
-   output: {
-     filename: 'bundle.js',
-     path: path.resolve(__dirname, 'dist'),
-   },
-   module: {
-     rules: [
-       {
-         test: /\.css$/i,
-         use: ['style-loader', 'css-loader'],
-       },
-       {
-         test: /\.(png|svg|jpg|jpeg|gif)$/i,
-         type: 'asset/resource',
-       },
-       {
-         test: /\.(woff|woff2|eot|ttf|otf)$/i,
-         type: 'asset/resource',
-       },
-       {
-         test: /\.(csv|tsv)$/i,
-         use: ['csv-loader'],
-       },
-       {
-         test: /\.xml$/i,
-         use: ['xml-loader'],
-       },
-+      {
-+        test: /\.toml$/i,
-+        type: 'json',
-+        parser: {
-+          parse: toml.parse,
-+        },
-+      },
-+      {
-+        test: /\.yaml$/i,
-+        type: 'json',
-+        parser: {
-+          parse: yaml.parse,
-+        },
-+      },
-+      {
-+        test: /\.json5$/i,
-+        type: 'json',
-+        parser: {
-+          parse: json5.parse,
-+        },
-+      },
-     ],
-   },
- };
+```js
+import toml from './data.toml';
+import yaml from './data.yaml';
+import json from './data.json5';
 ```
 
-**src/index.js**
-
-```diff
- import _ from 'lodash';
- import './style.css';
- import Icon from './icon.png';
- import Data from './data.xml';
- import Notes from './data.csv';
-+import toml from './data.toml';
-+import yaml from './data.yaml';
-+import json from './data.json5';
-+
-+console.log(toml.title); // output `TOML Example`
-+console.log(toml.owner.name); // output `Tom Preston-Werner`
-+
-+console.log(yaml.title); // output `YAML Example`
-+console.log(yaml.owner.name); // output `Tom Preston-Werner`
-+
-+console.log(json.title); // output `JSON5 Example`
-+console.log(json.owner.name); // output `Tom Preston-Werner`
-
- function component() {
-   const element = document.createElement('div');
-
-   // Lodash, now imported by this script
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-   element.classList.add('hello');
-
-   // Add the image to our existing div.
-   const myIcon = new Image();
-   myIcon.src = Icon;
-
-   element.appendChild(myIcon);
-
-   console.log(Data);
-   console.log(Notes);
-
-   return element;
- }
+وسيتم تحويل البيانات إلى كائنات JavaScript تلقائيًا.
 
- document.body.appendChild(component());
-```
+## الملفات العامة (Global Assets)
 
-Re-run the `npm run build` command and open `dist/index.html`. You should be able to see your imported data being logged to the console!
+أفضل جزء في هذا النظام هو أنه يسمح لك بتنظيم الملفات مع الكود المرتبط بها بدلًا من وضع كل شيء داخل مجلد `/assets` عام.
 
-## Global Assets
-
-The coolest part of everything mentioned above, is that loading assets this way allows you to group modules and assets in a more intuitive way. Instead of relying on a global `/assets` directory that contains everything, you can group assets with the code that uses them. For example, a structure like this can be useful:
+مثلًا:
 
 ```diff
 - ├── /assets
@@ -736,157 +422,28 @@ The coolest part of everything mentioned above, is that loading assets this way
 +         └── img.png
 ```
 
-This setup makes your code a lot more portable as everything that is closely coupled now lives together. Let's say you want to use `/my-component` in another project, copy or move it into the `/components` directory over there. As long as you've installed any _external dependencies_ and your _configuration has the same loaders_ defined, you should be good to go.
-
-However, let's say you're locked into your old ways or you have some assets that are shared between multiple components (views, templates, modules, etc.). It's still possible to store these assets in a base directory and even use [aliasing](/configuration/resolve/#resolvealias) to make them easier to `import`.
+هذا يجعل الكود أكثر قابلية للنقل وإعادة الاستخدام.
 
-## Wrapping up
+إذا أردت نقل `/my-component` إلى مشروع آخر، يكفي نسخ المجلد طالما أن التبعيات الخارجية والـ loaders المطلوبة موجودة.
 
-For the next guides we won't be using all the different assets we've used in this guide, so let's do some cleanup so we're prepared for the next piece of the guides [Output Management](https://webpack.js.org/guides/output-management/):
-
-**project**
+ومع ذلك، إذا كنت تفضل استخدام مجلد assets مركزي، فلا يزال ذلك ممكنًا، ويمكنك استخدام [aliasing](/configuration/resolve/#resolvealias) لتسهيل عمليات `import`.
 
-```diff
-  webpack-demo
-   ├── package.json
-   ├── package-lock.json
-   ├── webpack.config.js
-   ├── /dist
-   │   ├── bundle.js
-   │   └── index.html
-   ├── /src
--  │   ├── data.csv
--  │   ├── data.json5
--  │   ├── data.toml
--  │   ├── data.xml
--  │   ├── data.yaml
--  │   ├── icon.png
--  │   ├── my-font.woff
--  │   ├── my-font.woff2
--  │   ├── style.css
-   │   └── index.js
-   └── /node_modules
-```
+## إنهاء الدليل
 
-**webpack.config.js**
+في الأدلة القادمة لن نستخدم جميع الملفات التي أضفناها هنا، لذلك سنقوم ببعض التنظيف استعدادًا للدليل التالي [Output Management](https://webpack.js.org/guides/output-management/).
 
-```diff
- import path from 'node:path';
- import { fileURLToPath } from 'node:url';
--import toml from 'toml';
--import yaml from 'yamljs';
--import json5 from 'json5';
-
- const __filename = fileURLToPath(import.meta.url);
- const __dirname = path.dirname(__filename);
-
- export default {
-   entry: './src/index.js',
-   output: {
-     filename: 'bundle.js',
-     path: path.resolve(__dirname, 'dist'),
-   },
--  module: {
--    rules: [
--      {
--        test: /\.css$/i,
--        use: ['style-loader', 'css-loader'],
--      },
--      {
--        test: /\.(png|svg|jpg|jpeg|gif)$/i,
--        type: 'asset/resource',
--      },
--      {
--        test: /\.(woff|woff2|eot|ttf|otf)$/i,
--        type: 'asset/resource',
--      },
--      {
--        test: /\.(csv|tsv)$/i,
--        use: ['csv-loader'],
--      },
--      {
--        test: /\.xml$/i,
--        use: ['xml-loader'],
--      },
--      {
--        test: /\.toml$/i,
--        type: 'json',
--        parser: {
--          parse: toml.parse,
--        },
--      },
--      {
--        test: /\.yaml$/i,
--        type: 'json',
--        parser: {
--          parse: yaml.parse,
--        },
--      },
--      {
--        test: /\.json5$/i,
--        type: 'json',
--        parser: {
--          parse: json5.parse,
--        },
--      },
--    ],
--  },
- };
-```
-
-**src/index.js**
-
-```diff
- import _ from 'lodash';
--import './style.css';
--import Icon from './icon.png';
--import Data from './data.xml';
--import Notes from './data.csv';
--import toml from './data.toml';
--import yaml from './data.yaml';
--import json from './data.json5';
--
--console.log(toml.title); // output `TOML Example`
--console.log(toml.owner.name); // output `Tom Preston-Werner`
--
--console.log(yaml.title); // output `YAML Example`
--console.log(yaml.owner.name); // output `Tom Preston-Werner`
--
--console.log(json.title); // output `JSON5 Example`
--console.log(json.owner.name); // output `Tom Preston-Werner`
-
- function component() {
-   const element = document.createElement('div');
-
--  // Lodash, now imported by this script
-   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
--  element.classList.add('hello');
--
--  // Add the image to our existing div.
--  const myIcon = new Image();
--  myIcon.src = Icon;
--
--  element.appendChild(myIcon);
--
--  console.log(Data);
--  console.log(Notes);
-
-   return element;
- }
-
- document.body.appendChild(component());
-```
-
-And remove those dependencies we added before:
+قم بحذف الملفات والتعديلات التي أضفناها سابقًا، بالإضافة إلى إزالة التبعيات:
 
 ```bash
 npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs
 ```
 
-## Next guide
+## الدليل التالي
+
+لننتقل الآن إلى دليل [Output Management](https://webpack.js.org/guides/output-management/)
 
-Let's move on to [Output Management](https://webpack.js.org/guides/output-management/)
+## قراءة إضافية
 
-## Further Reading
+* [Loading Fonts](https://survivejs.com/webpack/loading/fonts/) على SurviveJS
 
-- [Loading Fonts](https://survivejs.com/webpack/loading/fonts/) on SurviveJS
+```
diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx
index 5e76628f4b62..5dc14149befb 100644
--- a/src/content/guides/asset-modules.mdx
+++ b/src/content/guides/asset-modules.mdx
@@ -1,37 +1,30 @@
 ---
-title: Asset Modules
+title: وحدات الأصول
 sort: 25
 contributors:
-  - smelukov
-  - EugeneHlushko
-  - chenxsan
-  - anshumanv
-  - spence-s
-  - dkdk225
-  - alexander-akait
-  - GreenUpOu
+  - arabpolice
 related:
-  - title: webpack 5 - Asset Modules
+  - title: webpack 5 - وحدات الأصول
     url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h
 ---
 
-Asset Modules allow one to use asset files (fonts, icons, etc) without configuring additional loaders.
+تتيح وحدات الأصول (Asset Modules) استخدام ملفات الأصول، مثل الخطوط والأيقونات وغيرها، دون إعداد loaders إضافية.
 
-Prior to webpack 5 it was common to use:
+قبل webpack 5 كان من الشائع استخدام:
 
-- [`raw-loader`](https://v4.webpack.js.org/loaders/raw-loader/) to import a file as a string
-- [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/) to inline a file into the bundle as a data URI
-- [`file-loader`](https://v4.webpack.js.org/loaders/file-loader/) to emit a file into the output directory
+- [`raw-loader`](https://v4.webpack.js.org/loaders/raw-loader/) لاستيراد ملف كسلسلة نصية
+- [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/) لتضمين ملف داخل الحزمة على هيئة data URI
+- [`file-loader`](https://v4.webpack.js.org/loaders/file-loader/) لإخراج ملف إلى مجلد المخرجات
 
-Asset Modules types replace all of these loaders by adding 5 new module types:
+تستبدل أنواع وحدات الأصول كل هذه الـ loaders بإضافة 5 أنواع جديدة من الوحدات:
 
-- `asset/resource` emits a separate file and exports the URL. Previously achievable by using `file-loader`.
-- `asset/inline` exports a data URI of the asset. Previously achievable by using `url-loader`.
-- `asset/source` exports the source code of the asset. Previously achievable by using `raw-loader`.
-- `asset/bytes` exports a [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) view of the asset.
-- `asset` automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using `url-loader` with asset size limit.
+- `asset/resource` يُخرج ملفًا منفصلًا ويُصدّر عنوان URL. كان يمكن تحقيق ذلك سابقًا باستخدام `file-loader`.
+- `asset/inline` يُصدّر data URI للأصل. كان يمكن تحقيق ذلك سابقًا باستخدام `url-loader`.
+- `asset/source` يُصدّر الكود المصدري للأصل. كان يمكن تحقيق ذلك سابقًا باستخدام `raw-loader`.
+- `asset/bytes` يُصدّر منظور [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) للأصل.
+- `asset` يختار تلقائيًا بين تصدير data URI وإخراج ملف منفصل. كان يمكن تحقيق ذلك سابقًا باستخدام `url-loader` مع حد لحجم الأصل.
 
-When using the old assets loaders (i.e. `file-loader`/`url-loader`/`raw-loader`) along with Asset Modules in webpack 5, you might want to stop Asset Modules from processing your assets again as that would result in asset duplication. This can be done by setting the asset's module type to `'javascript/auto'`.
+عند استخدام loaders الأصول القديمة (أي `file-loader`/`url-loader`/`raw-loader`) مع وحدات الأصول في webpack 5، قد ترغب في منع وحدات الأصول من معالجة أصولك مرة أخرى لأن ذلك سيؤدي إلى تكرار الأصول. يمكن فعل ذلك بتعيين نوع وحدة الأصل إلى `'javascript/auto'`.
 
 **webpack.config.js**
 
@@ -56,7 +49,7 @@ export default {
 }
 ```
 
-To exclude assets that came from new URL calls from the asset loaders add `dependency: { not: ['url'] }` to the loader configuration.
+لاستبعاد الأصول القادمة من استدعاءات `new URL` من loaders الأصول، أضف `dependency: { not: ['url'] }` إلى إعدادات الـ loader.
 
 **webpack.config.js**
 
@@ -81,19 +74,19 @@ export default {
 }
 ```
 
-## Public Path
+## المسار العام
 
-By default, under the hood, the `asset` type does `__webpack_public_path__ + import.meta`. This means that setting the `output.publicPath` in your config will allow you to override the URL from which the `asset` loads.
+افتراضيًا، وتحت الغطاء، ينفذ النوع `asset` التعبير `__webpack_public_path__ + import.meta`. هذا يعني أن ضبط `output.publicPath` في إعداداتك يتيح لك تجاوز عنوان URL الذي يُحمّل منه `asset`.
 
-### On The Fly Override
+### التجاوز أثناء التشغيل
 
-If you set the `__webpack_public_path__` in code, the way you need to achieve it so as not to break the `asset` loading logic is to make sure you run it as the first code in your app and not use a function to do so. An example of this would be having a file called `publicPath.js` with contents
+إذا عيّنت `__webpack_public_path__` داخل الكود، فالطريقة المطلوبة لتحقيق ذلك دون كسر منطق تحميل `asset` هي التأكد من تشغيله كأول كود في تطبيقك، وعدم استخدام دالة لفعل ذلك. مثال ذلك وجود ملف باسم `publicPath.js` بالمحتوى التالي:
 
 ```js
 __webpack_public_path__ = "https://cdn.url.com";
 ```
 
-And then in your `webpack.config.js` updating your `entry` field to look like
+ثم تحدّث حقل `entry` في `webpack.config.js` ليبدو كالتالي:
 
 ```js
 export default {
@@ -101,13 +94,13 @@ export default {
 };
 ```
 
-Alternatively, you can do the following in your `App.js` without modifying your webpack config. The only downside is you have to enforce ordering here and that can collide with some linting tools.
+بدلًا من ذلك، يمكنك فعل ما يلي داخل `App.js` دون تعديل إعدادات webpack. العيب الوحيد هو أنك ستحتاج إلى فرض ترتيب التنفيذ هنا، وقد يتعارض ذلك مع بعض أدوات linting.
 
 ```js
 import "./publicPath.js";
 ```
 
-## Resource type
+## نوع المورد
 
 **webpack.config.js**
 
@@ -143,13 +136,13 @@ import mainImage from "./images/main.png";
 img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'
 ```
 
-All `.png` files will be emitted to the output directory and their paths will be injected into the bundles, besides, you can customize [`outputPath`](/configuration/module/#rulegeneratoroutputpath) and [`publicPath`](/configuration/module/#rulegeneratorpublicpath) for them.
+سيتم إخراج جميع ملفات `.png` إلى مجلد المخرجات وحقن مساراتها داخل الحزم. بالإضافة إلى ذلك، يمكنك تخصيص [`outputPath`](/configuration/module/#rulegeneratoroutputpath) و[`publicPath`](/configuration/module/#rulegeneratorpublicpath) لها.
 
-### Custom output filename
+### اسم ملف مخرجات مخصص
 
-By default, `asset/resource` modules are emitting with `[hash][ext][query]` filename into output directory.
+افتراضيًا، تُخرج وحدات `asset/resource` الملفات إلى مجلد المخرجات باسم ملف على النمط `[hash][ext][query]`.
 
-You can modify this template by setting [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) in your webpack configuration:
+يمكنك تعديل هذا القالب بتعيين [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) في إعدادات webpack:
 
 **webpack.config.js**
 
@@ -178,7 +171,7 @@ export default {
 };
 ```
 
-Another case to customize output filename is to emit some kind of assets to a specified directory:
+حالة أخرى لتخصيص اسم ملف المخرجات هي إخراج نوع معيّن من الأصول إلى مجلد محدد:
 
 ```diff
 import path from "node:path";
@@ -208,11 +201,11 @@ export default {
 };
 ```
 
-With this configuration all the `html` files will be emitted into a `static` directory within the output directory.
+بهذه الإعدادات، سيتم إخراج جميع ملفات `html` إلى مجلد `static` داخل مجلد المخرجات.
 
-`Rule.generator.filename` is the same as [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) and works only with `asset` and `asset/resource` module types.
+`Rule.generator.filename` مماثل لـ [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename)، ويعمل فقط مع نوعي الوحدات `asset` و`asset/resource`.
 
-## Inlining assets
+## تضمين الأصول
 
 **webpack.config.js**
 
@@ -248,13 +241,13 @@ import metroMap from "./images/metro.svg";
 block.style.background = `url(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=)
 ```
 
-All `.svg` files will be injected into the bundles as data URI.
+سيتم حقن جميع ملفات `.svg` داخل الحزم على هيئة data URI.
 
-### Custom data URI generator
+### مولّد data URI مخصص
 
-By default, data URI emitted by webpack represents file contents encoded by using Base64 algorithm.
+افتراضيًا، تمثل data URI التي يُخرجها webpack محتوى الملف بعد ترميزه باستخدام خوارزمية Base64.
 
-If you want to use a custom encoding algorithm, you may specify a custom function to encode a file content:
+إذا أردت استخدام خوارزمية ترميز مخصصة، يمكنك تحديد دالة مخصصة لترميز محتوى الملف:
 
 **webpack.config.js**
 
@@ -290,9 +283,9 @@ export default {
 };
 ```
 
-Now all `.svg` files will be encoded by `mini-svg-data-uri` package.
+الآن سيتم ترميز جميع ملفات `.svg` بواسطة حزمة `mini-svg-data-uri`.
 
-## Source type
+## نوع المصدر
 
 **webpack.config.js**
 
@@ -320,7 +313,7 @@ export default {
 };
 ```
 
-T> You don't need to add rules when using `import text from './file.txt' with { type: "text" };` syntax.
+T> لا تحتاج إلى إضافة rules عند استخدام صيغة `import text from './file.txt' with { type: "text" };`.
 
 **src/example.txt**
 
@@ -336,7 +329,7 @@ import exampleText from "./example.txt";
 block.textContent = exampleText; // 'Hello world';
 ```
 
-Alternative usage:
+استخدام بديل:
 
 **src/index.js**
 
@@ -346,13 +339,13 @@ import exampleText from "./example.txt" with { type: "text" };
 block.textContent = exampleText; // 'Hello world';
 ```
 
-All `.txt` files will be injected into the bundles as UTF-8 strings.
+سيتم حقن جميع ملفات `.txt` داخل الحزم كسلاسل نصية بترميز UTF-8.
 
-## URL assets
+## أصول URL
 
-When using `new URL('./path/to/asset', import.meta.url)`, webpack creates an asset module too.
+عند استخدام `new URL('./path/to/asset', import.meta.url)`، ينشئ webpack وحدة أصول أيضًا.
 
-T> You don't need to add rules when using `const file = new URL('./file.ext', import.meta.url);` syntax.
+T> لا تحتاج إلى إضافة rules عند استخدام صيغة `const file = new URL('./file.ext', import.meta.url);`.
 
 **src/index.js**
 
@@ -360,7 +353,7 @@ T> You don't need to add rules when using `const file = new URL('./file.ext', im
 const logo = new URL("./logo.svg", import.meta.url);
 ```
 
-Depending on the [`target`](/configuration/target/) in your configuration, webpack would compile the above code into a different result:
+اعتمادًا على [`target`](/configuration/target/) في إعداداتك، سيترجم webpack الكود أعلاه إلى نتيجة مختلفة:
 
 ```js
 // target: web
@@ -380,11 +373,11 @@ new URL(
 ```
 
 ```js
-// any targets when ECMA modules output enabled
+// أي targets عند تفعيل مخرجات وحدات ECMA
 new URL(`${__webpack_public_path__}logo.svg`, import.meta.url);
 ```
 
-As of webpack 5.38.0, [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) are supported in `new URL()` as well:
+ابتداءً من webpack 5.38.0، أصبحت [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) مدعومة أيضًا داخل `new URL()`:
 
 **src/index.js**
 
@@ -395,7 +388,7 @@ console.log(url.protocol === "data:");
 console.log(url.pathname === ",");
 ```
 
-## Asset type
+## نوع الأصل
 
 **webpack.config.js**
 
@@ -423,9 +416,9 @@ export default {
 };
 ```
 
-Now webpack will automatically choose between `resource` and `inline` by following a default condition: a file with size less than 8kb will be treated as a `inline` module type and `resource` module type otherwise.
+الآن سيختار webpack تلقائيًا بين `resource` و`inline` وفق شرط افتراضي: الملف الذي يقل حجمه عن 8kb سيُعامل كنوع وحدة `inline`، وإلا فسيُعامل كنوع وحدة `resource`.
 
-You can change this condition by setting a [`Rule.parser.dataUrlCondition.maxSize`](/configuration/module/#ruleparserdataurlcondition) option on the module rule level of your webpack configuration:
+يمكنك تغيير هذا الشرط بتعيين خيار [`Rule.parser.dataUrlCondition.maxSize`](/configuration/module/#ruleparserdataurlcondition) على مستوى قاعدة الوحدة في إعدادات webpack:
 
 **webpack.config.js**
 
@@ -449,7 +442,7 @@ export default {
         type: 'asset',
 +       parser: {
 +         dataUrlCondition: {
-+           maxSize: 4 * 1024, // 4kb
++           maxSize: 4 * 1024, // 4 كيلوبايت
 +         },
 +       },
       },
@@ -458,9 +451,9 @@ export default {
 };
 ```
 
-Also you can [specify a function](/configuration/module/#ruleparserdataurlcondition) to decide to inlining a module or not.
+يمكنك أيضًا [تحديد دالة](/configuration/module/#ruleparserdataurlcondition) لتقرير ما إذا كان ينبغي تضمين الوحدة أم لا.
 
-## Bytes type
+## نوع البايتات
 
 **webpack.config.js**
 
@@ -488,7 +481,7 @@ export default {
 };
 ```
 
-T> You don't need to add rules when using `import data from './file.ext' with { type: "bytes" };` syntax.
+T> لا تحتاج إلى إضافة rules عند استخدام صيغة `import data from './file.ext' with { type: "bytes" };`.
 
 **src/example.txt**
 
@@ -507,7 +500,7 @@ const textString = decoder.decode(exampleText);
 block.textContent = textString; // 'Hello world';
 ```
 
-Alternative usage:
+استخدام بديل:
 
 **src/index.js**
 
@@ -520,22 +513,22 @@ const textString = decoder.decode(exampleText);
 block.textContent = textString; // 'Hello world';
 ```
 
-All `.txt` files will be injected into the bundles as raw bytes (Uint8Array), without any text encoding or transformation.
+سيتم حقن جميع ملفات `.txt` داخل الحزم كبايتات خام (Uint8Array)، دون أي ترميز نصي أو تحويل.
 
-## Replacing Inline Loader Syntax
+## استبدال صيغة الـ Inline Loader
 
-Before Asset Modules and Webpack 5, it was possible to use [inline syntax](https://webpack.js.org/concepts/loaders/#inline) with the legacy loaders mentioned above.
+قبل وحدات الأصول وWebpack 5، كان من الممكن استخدام [الصيغة المضمنة](https://webpack.js.org/concepts/loaders/#inline) مع الـ loaders القديمة المذكورة أعلاه.
 
-It is now recommended to remove all inline loader syntax and use a resourceQuery condition to mimic the functionality of the inline syntax.
+يوصى الآن بإزالة كل صيغ inline loader واستخدام شرط `resourceQuery` لمحاكاة وظيفة الصيغة المضمنة.
 
-For example, in the case of replacing `raw-loader` with `asset/source` type:
+على سبيل المثال، عند استبدال `raw-loader` بنوع `asset/source`:
 
 ```diff
 - import myModule from 'raw-loader!my-module';
 + import myModule from 'my-module?raw';
 ```
 
-and in the webpack configuration:
+وفي إعدادات webpack:
 
 ```diff
 module: {
@@ -549,7 +542,7 @@ module: {
   },
 ```
 
-and if you'd like to exclude raw assets from being processed by other loaders, use a negative condition:
+وإذا أردت استبعاد الأصول الخام من المعالجة بواسطة loaders أخرى، فاستخدم شرطًا سلبيًا:
 
 ```diff
 module: {
@@ -568,7 +561,7 @@ module: {
   },
 ```
 
-or a `oneOf` list of rules. Here only the first matching rule will be applied:
+أو قائمة قواعد `oneOf`. هنا سيتم تطبيق أول قاعدة مطابقة فقط:
 
 ```diff
 module: {
@@ -588,9 +581,9 @@ module: {
   },
 ```
 
-## Disable emitting assets
+## تعطيل إخراج الأصول
 
-For use cases like Server side rendering, you might want to disable emitting assets, which is feasible with [`emit`](/configuration/module/#rulegeneratoremit) option under `Rule.generator`:
+في حالات استخدام مثل التصيير من جهة الخادم (Server side rendering)، قد ترغب في تعطيل إخراج الأصول، وهذا ممكن باستخدام خيار [`emit`](/configuration/module/#rulegeneratoremit) تحت `Rule.generator`:
 
 ```js
 export default {
diff --git a/src/content/guides/author-libraries.mdx b/src/content/guides/author-libraries.mdx
index 10c8b92b6ecb..d7d83624f91d 100644
--- a/src/content/guides/author-libraries.mdx
+++ b/src/content/guides/author-libraries.mdx
@@ -1,27 +1,17 @@
 ---
-title: Authoring Libraries
+title: تأليف المكتبات
 sort: 7
 contributors:
-  - pksjce
-  - johnstew
-  - simon04
-  - 5angel
-  - marioacc
-  - byzyk
-  - EugeneHlushko
-  - AnayaDesign
-  - chenxsan
-  - wizardofhogwarts
-  - Debraj2024
+  - arabpolice
 ---
 
-Aside from applications, webpack can also be used to bundle JavaScript libraries. The following guide is meant for library authors looking to streamline their bundling strategy.
+إلى جانب التطبيقات، يمكن استخدام webpack أيضًا لتجميع مكتبات JavaScript. هذا الدليل موجه لمؤلفي المكتبات الذين يريدون تبسيط استراتيجية التجميع لديهم.
 
-## Authoring a Library
+## تأليف مكتبة
 
-Let's assume that we are writing a small library, `webpack-numbers`, that allows users to convert the numbers 1 through 5 from their numeric representation to a textual one and vice-versa, e.g. 2 to 'two'.
+لنفترض أننا نكتب مكتبة صغيرة باسم `webpack-numbers` تتيح للمستخدمين تحويل الأرقام من 1 إلى 5 من تمثيلها الرقمي إلى تمثيل نصي والعكس، مثل تحويل 2 إلى 'two'.
 
-The basic project structure would look like this:
+ستبدو بنية المشروع الأساسية هكذا:
 
 **project**
 
@@ -33,14 +23,14 @@ The basic project structure would look like this:
 +     └── ref.json
 ```
 
-Initialize the project with npm, then install `webpack`, `webpack-cli`, and `lodash` as development dependencies:
+قم بتهيئة المشروع باستخدام npm، ثم ثبّت `webpack` و`webpack-cli` و`lodash` كتبِعيات تطوير:
 
 ```bash
 npm init -y
 npm install --save-dev webpack webpack-cli lodash
 ```
 
-We install `lodash` as a `devDependency` because we will initially bundle it into our library. Since it is included in the final output, consumers of our library won't need to install it themselves.
+نثبّت `lodash` كـ `devDependency` لأننا سنقوم في البداية بتجميعها داخل مكتبتنا. وبما أنها ستكون مضمنة في المخرج النهائي، فلن يحتاج مستهلكو مكتبتنا إلى تثبيتها بأنفسهم.
 
 **src/ref.json**
 
@@ -96,9 +86,9 @@ export function wordToNum(word) {
 }
 ```
 
-## Webpack Configuration
+## إعدادات Webpack
 
-Let's start with this basic webpack configuration:
+لنبدأ بإعداد webpack الأساسي التالي:
 
 **webpack.config.js**
 
@@ -118,14 +108,11 @@ export default {
 };
 ```
 
-In the above example, we're telling webpack to bundle `src/index.js` into `dist/webpack-numbers.js`.
+في المثال أعلاه، نخبر webpack بتجميع `src/index.js` داخل `dist/webpack-numbers.js`.
 
-### Adding Source Maps
+### إضافة Source Maps
 
-When bundling a library, it is recommended to generate source maps. Source maps
-allow consumers of your library to debug your original source code rather than
-the minified bundle. This can be done using the
-[`devtool`](/configuration/devtool/) option:
+عند تجميع مكتبة، يوصى بتوليد source maps. تسمح source maps لمستهلكي مكتبتك بتصحيح الكود المصدري الأصلي بدلًا من الحزمة المصغّرة. يمكن فعل ذلك باستخدام خيار [`devtool`](/configuration/devtool/):
 
 **webpack.config.js**
 
@@ -146,13 +133,11 @@ the minified bundle. This can be done using the
   };
 ```
 
-T> Using `'source-map'` as the `devtool` value generates a separate `.map` file
-alongside your bundle. Make sure to also publish this `.map` file so consumers
-can use it for debugging.
+T> استخدام `'source-map'` كقيمة لـ `devtool` يولّد ملف `.map` منفصلًا بجانب حزمتك. تأكد أيضًا من نشر ملف `.map` هذا حتى يتمكن المستهلكون من استخدامه في التصحيح.
 
-## Expose the Library
+## كشف المكتبة
 
-So far everything should be the same as bundling an application, and here comes the different part – we need to expose exports from the entry point through [`output.library`](/configuration/output/#outputlibrary) option.
+حتى الآن، يجب أن يكون كل شيء مشابهًا لتجميع تطبيق، وهنا يأتي الجزء المختلف: نحتاج إلى كشف الصادرات من نقطة الدخول عبر خيار [`output.library`](/configuration/output/#outputlibrary).
 
 **webpack.config.js**
 
@@ -173,7 +158,7 @@ So far everything should be the same as bundling an application, and here comes
   };
 ```
 
-We exposed the entry point as `webpackNumbers` so users can use it through script tag:
+كشفنا نقطة الدخول باسم `webpackNumbers` حتى يتمكن المستخدمون من استخدامها عبر وسم script:
 
 ```html
 <script src="https://example.org/webpack-numbers.js"></script>
@@ -182,11 +167,11 @@ We exposed the entry point as `webpackNumbers` so users can use it through scrip
 </script>
 ```
 
-However it only works when it's referenced through script tag, it can't be used in other environments like CommonJS, AMD, Node.js, etc.
+لكن هذا يعمل فقط عند الإشارة إليها عبر وسم script، ولا يمكن استخدامها في بيئات أخرى مثل CommonJS أو AMD أو Node.js وغيرها.
 
-As a library author, we want it to be compatible in different environments, i.e., users should be able to consume the bundled library in multiple ways listed below:
+بصفتنا مؤلفي مكتبة، نريدها أن تكون متوافقة مع بيئات مختلفة، أي يجب أن يتمكن المستخدمون من استهلاك المكتبة المجمعة بعدة طرق كما يلي:
 
-- **CommonJS module require**:
+- **استدعاء وحدة CommonJS عبر require**:
 
   ```js
   const webpackNumbers = require("webpack-numbers");
@@ -195,7 +180,7 @@ As a library author, we want it to be compatible in different environments, i.e.
   webpackNumbers.wordToNum("Two");
   ```
 
-- **AMD module require**:
+- **استدعاء وحدة AMD عبر require**:
 
   ```js
   require(["webpackNumbers"], (webpackNumbers) => {
@@ -204,7 +189,7 @@ As a library author, we want it to be compatible in different environments, i.e.
   });
   ```
 
-- **script tag**:
+- **وسم script**:
 
   ```html
   <!DOCTYPE html>
@@ -213,16 +198,16 @@ As a library author, we want it to be compatible in different environments, i.e.
     <script src="https://example.org/webpack-numbers.js"></script>
     <script>
       // ...
-      // Global variable
+      // متغير عام
       webpackNumbers.wordToNum("Five");
-      // Property in the window object
+      // خاصية في كائن window
       window.webpackNumbers.wordToNum("Five");
       // ...
     </script>
   </html>
   ```
 
-Let's update the `output.library` option with its `type` set to [`'umd'`](/configuration/output/#type-umd):
+لنحدّث خيار `output.library` مع ضبط `type` الخاص به على [`'umd'`](/configuration/output/#type-umd):
 
 ```diff
  import path from 'node:path';
@@ -246,15 +231,15 @@ Let's update the `output.library` option with its `type` set to [`'umd'`](/confi
  };
 ```
 
-Now webpack will bundle a library that can work with CommonJS, AMD, and script tag.
+الآن سيجمع webpack مكتبة يمكنها العمل مع CommonJS وAMD ووسم script.
 
-T> Note that the `library` setup is tied to the `entry` configuration. For most libraries, specifying a single entry point is sufficient. While [multi-part libraries](https://github.com/webpack/webpack/tree/master/examples/multi-part-library) are possible, it is more straightforward to expose partial exports through an [index script](https://stackoverflow.com/questions/34072598/es6-exporting-importing-in-index-file) that serves as a single entry point. Using an `array` as an `entry` point for a library is **not recommended**.
+T> لاحظ أن إعداد `library` مرتبط بإعداد `entry`. بالنسبة إلى معظم المكتبات، يكفي تحديد نقطة دخول واحدة. ومع أن [المكتبات متعددة الأجزاء](https://github.com/webpack/webpack/tree/master/examples/multi-part-library) ممكنة، فإن كشف الصادرات الجزئية عبر [سكربت index](https://stackoverflow.com/questions/34072598/es6-exporting-importing-in-index-file) يعمل كنقطة دخول واحدة ويكون أوضح. لا يُوصى باستخدام `array` كنقطة `entry` لمكتبة.
 
-## Externalize Lodash
+## جعل Lodash خارجية
 
-Now, if you run `npx webpack`, you will find that a largish bundle is created. If you inspect the file, you'll see that lodash has been bundled along with your code. To avoid bundling `lodash` and bloating our library, we can configure webpack to treat it as an external module. Since we are no longer bundling it, the consumer will need to provide it. Therefore, you should move `lodash` from `devDependencies` to `dependencies` (or `peerDependencies`) so package managers will install it automatically for consumers of your library.
+الآن، إذا شغّلت `npx webpack`، فستجد أنه تم إنشاء حزمة كبيرة نسبيًا. وإذا فحصت الملف، سترى أن lodash جُمّعت مع كودك. لتجنب تجميع `lodash` وتضخيم مكتبتنا، يمكننا إعداد webpack للتعامل معها كوحدة خارجية. وبما أننا لم نعد نجمعها، سيحتاج المستهلك إلى توفيرها. لذلك، يجب نقل `lodash` من `devDependencies` إلى `dependencies` (أو `peerDependencies`) حتى تثبّتها مديري الحزم تلقائيًا لمستهلكي مكتبتك.
 
-This can be done using the [`externals`](/configuration/externals/) configuration:
+يمكن فعل ذلك باستخدام إعداد [`externals`](/configuration/externals/):
 
 **webpack.config.js**
 
@@ -286,11 +271,11 @@ This can be done using the [`externals`](/configuration/externals/) configuratio
   };
 ```
 
-This means that your library expects a dependency named `lodash` to be available in the consumer's environment.
+هذا يعني أن مكتبتك تتوقع توفر تبعية باسم `lodash` في بيئة المستهلك.
 
-### External Limitations
+### قيود الوحدات الخارجية
 
-For libraries that use several files from a dependency:
+بالنسبة إلى المكتبات التي تستخدم عدة ملفات من تبعية:
 
 ```js
 import A from "library/one";
@@ -299,7 +284,7 @@ import B from "library/two";
 // ...
 ```
 
-You won't be able to exclude them from the bundle by specifying `library` in the externals. You'll either need to exclude them one by one or by using a regular expression.
+لن تتمكن من استبعادها من الحزمة بتحديد `library` في `externals`. ستحتاج إما إلى استبعادها واحدة تلو الأخرى أو استخدام تعبير منتظم.
 
 ```js
 export default {
@@ -307,15 +292,15 @@ export default {
   externals: [
     "library/one",
     "library/two",
-    // Everything that starts with "library/"
+    // كل ما يبدأ بـ "library/"
     /^library\/.+$/,
   ],
 };
 ```
 
-## Final Steps
+## الخطوات النهائية
 
-Optimize your output for production by following the steps mentioned in the [production guide](/guides/production). Let's also add the path to your generated bundle as the package's `main` field in with the `package.json`
+حسّن مخرجاتك للإنتاج باتباع الخطوات المذكورة في [دليل الإنتاج](/guides/production). ولنضف أيضًا مسار الحزمة المولّدة إلى حقل `main` الخاص بالحزمة داخل `package.json`:
 
 **package.json**
 
@@ -327,7 +312,7 @@ Optimize your output for production by following the steps mentioned in the [pro
 }
 ```
 
-Or, to add it as a standard module as per [this guide](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage):
+أو لإضافتها كوحدة قياسية وفقًا لـ [هذا الدليل](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md#typical-usage):
 
 ```json
 {
@@ -337,10 +322,10 @@ Or, to add it as a standard module as per [this guide](https://github.com/dherma
 }
 ```
 
-The key `main` refers to the [standard from `package.json`](https://docs.npmjs.com/files/package.json#main), and `module` to [a](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md) [proposal](https://github.com/rollup/rollup/wiki/pkg.module) to allow the JavaScript ecosystem upgrade to use ES2015 modules without breaking backwards compatibility.
+يشير المفتاح `main` إلى [المعيار من `package.json`](https://docs.npmjs.com/files/package.json#main)، بينما يشير `module` إلى [اقتراح](https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md) [آخر](https://github.com/rollup/rollup/wiki/pkg.module) للسماح لمنظومة JavaScript بالترقية لاستخدام وحدات ES2015 دون كسر التوافق مع الإصدارات السابقة.
 
-W> The `module` property should point to a script that utilizes ES2015 module syntax but no other syntax features that aren't yet supported by browsers or node. This enables webpack to parse the module syntax itself, allowing for lighter bundles via [tree shaking](https://webpack.js.org/guides/tree-shaking/) if users are only consuming certain parts of the library.
+W> يجب أن تشير خاصية `module` إلى سكربت يستخدم صيغة وحدات ES2015، دون أي ميزات صياغية أخرى غير مدعومة بعد في المتصفحات أو node. يتيح ذلك لـ webpack تحليل صيغة الوحدات بنفسه، مما يسمح بحزم أخف عبر [tree shaking](https://webpack.js.org/guides/tree-shaking/) إذا كان المستخدمون يستهلكون أجزاء معينة فقط من المكتبة.
 
-Now you can [publish it as an npm package](https://docs.npmjs.com/getting-started/publishing-npm-packages) and find it at [unpkg.com](https://unpkg.com/#/) to distribute it to your users.
+يمكنك الآن [نشرها كحزمة npm](https://docs.npmjs.com/getting-started/publishing-npm-packages) والعثور عليها في [unpkg.com](https://unpkg.com/#/) لتوزيعها على المستخدمين.
 
-T> To expose stylesheets associated with your library, the [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin) should be used. Users can then consume and load these as they would any other stylesheet.
+T> لكشف ملفات الأنماط المرتبطة بمكتبتك، يجب استخدام [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin). بعد ذلك يمكن للمستخدمين استهلاكها وتحميلها كما يفعلون مع أي ملف أنماط آخر.
diff --git a/src/content/guides/build-performance.mdx b/src/content/guides/build-performance.mdx
index e7c8b683c989..c2f10a420d0a 100644
--- a/src/content/guides/build-performance.mdx
+++ b/src/content/guides/build-performance.mdx
@@ -1,35 +1,29 @@
 ---
-title: Build Performance
+title: أداء البناء
 sort: 9
 contributors:
-  - sokra
-  - tbroadley
-  - byzyk
-  - madhavarshney
-  - wizardofhogwarts
-  - anikethsaha
-  - Brennvo
+  - arabpolice
 ---
 
-This guide contains some useful tips for improving build/compilation performance.
+يحتوي هذا الدليل على بعض النصائح المفيدة لتحسين أداء البناء/الترجمة.
 
 ---
 
-## General
+## عام
 
-The following best practices should help, whether you're running build scripts in [development](/guides/development) or [production](/guides/production).
+ينبغي أن تساعد أفضل الممارسات التالية سواء كنت تشغّل سكربتات البناء في [التطوير](/guides/development) أو [الإنتاج](/guides/production).
 
-### Stay Up to Date
+### ابقَ محدّثًا
 
-Use the latest webpack version. We are always making performance improvements. The latest recommended version of webpack is:
+استخدم أحدث إصدار من webpack. نحن نعمل دائمًا على تحسينات في الأداء. أحدث إصدار موصى به من webpack هو:
 
 [![latest webpack version](https://img.shields.io/github/package-json/v/webpack/webpack.svg?label=webpack&style=flat-square&maxAge=3600)](https://github.com/webpack/webpack/releases)
 
-Staying up-to-date with **Node.js** can also help with performance. On top of this, keeping your package manager (e.g. `npm` or `yarn`) up-to-date can also help. Newer versions create more efficient module trees and increase resolving speed.
+يمكن أن يساعد البقاء محدّثًا مع **Node.js** أيضًا في الأداء. إضافة إلى ذلك، يمكن أن يساعد تحديث مدير الحزم لديك، مثل `npm` أو `yarn`. فالإصدارات الأحدث تُنشئ أشجار وحدات أكثر كفاءة وتزيد سرعة الحل.
 
 ### Loaders
 
-Apply loaders to the minimal number of modules necessary. Instead of:
+طبّق الـ loaders على أقل عدد ممكن من الوحدات الضرورية. بدلًا من:
 
 ```js
 export default {
@@ -45,7 +39,7 @@ export default {
 };
 ```
 
-Use the `include` field to only apply the loader modules that actually need to be transformed by it:
+استخدم الحقل `include` لتطبيق الـ loader فقط على الوحدات التي تحتاج فعليًا إلى تحويله لها:
 
 ```js
 import path from "node:path";
@@ -68,89 +62,89 @@ export default {
 };
 ```
 
-### Bootstrap
+### بدء التشغيل
 
-Each additional loader/plugin has a bootup time. Try to use as few tools as possible.
+لكل loader أو plugin إضافي وقت بدء تشغيل. حاول استخدام أقل عدد ممكن من الأدوات.
 
-### Resolving
+### الحل
 
-The following steps can increase resolving speed:
+يمكن للخطوات التالية زيادة سرعة الحل:
 
-- Minimize the number of items in `resolve.modules`, `resolve.extensions`, `resolve.mainFiles`, `resolve.descriptionFiles`, as they increase the number of filesystem calls.
-- Set `resolve.symlinks: false` if you don't use symlinks (e.g. `npm link` or `yarn link`).
-- Set `resolve.cacheWithContext: false` if you use custom resolving plugins, that are not context specific.
+- قلّل عدد العناصر في `resolve.modules` و`resolve.extensions` و`resolve.mainFiles` و`resolve.descriptionFiles`، لأنها تزيد عدد استدعاءات نظام الملفات.
+- اضبط `resolve.symlinks: false` إذا كنت لا تستخدم الروابط الرمزية، مثل `npm link` أو `yarn link`.
+- اضبط `resolve.cacheWithContext: false` إذا كنت تستخدم ملحقات حل مخصصة غير مرتبطة بسياق محدد.
 
 ### Dlls
 
-Use the `DllPlugin` to move code that is changed less often into a separate compilation. This will improve the application's compilation speed, although it does increase complexity of the build process.
+استخدم `DllPlugin` لنقل الكود الذي يتغير بوتيرة أقل إلى ترجمة منفصلة. سيحسّن ذلك سرعة ترجمة التطبيق، مع أنه يزيد تعقيد عملية البناء.
 
-### Smaller = Faster
+### الأصغر = الأسرع
 
-Decrease the total size of the compilation to increase build performance. Try to keep chunks small.
+خفّض الحجم الإجمالي للترجمة لزيادة أداء البناء. حاول إبقاء الأجزاء صغيرة.
 
-- Use fewer/smaller libraries.
-- Use the `SplitChunksPlugin` in Multi-Page Applications.
-- Use the `SplitChunksPlugin` in `async` mode in Multi-Page Applications.
-- Remove unused code.
-- Only compile the part of the code you are currently developing on.
+- استخدم مكتبات أقل أو أصغر.
+- استخدم `SplitChunksPlugin` في التطبيقات متعددة الصفحات.
+- استخدم `SplitChunksPlugin` في وضع `async` داخل التطبيقات متعددة الصفحات.
+- أزل الكود غير المستخدم.
+- ترجم فقط الجزء الذي تعمل على تطويره حاليًا من الكود.
 
-### Worker Pool
+### تجمع العمال
 
-The `thread-loader` can be used to offload expensive loaders to a worker pool.
+يمكن استخدام `thread-loader` لنقل الـ loaders المكلفة إلى تجمع عمال.
 
-W> Don't use too many workers, as there is a boot overhead for the Node.js runtime and the loader. Minimize the module transfers between worker and main process. IPC is expensive.
+W> لا تستخدم عددًا كبيرًا جدًا من العمال، لأن هناك كلفة بدء تشغيل لبيئة تشغيل Node.js ولـ loader. قلّل عمليات نقل الوحدات بين العامل والعملية الرئيسية. الاتصال بين العمليات IPC مكلف.
 
-### Persistent cache
+### التخزين المؤقت المستمر
 
-Use [`cache`](/configuration/cache) option in webpack configuration. Clear cache directory on `"postinstall"` in `package.json`.
+استخدم خيار [`cache`](/configuration/cache) في إعداد webpack. امسح مجلد التخزين المؤقت في `"postinstall"` داخل `package.json`.
 
-T> We support yarn PnP version 3 [`yarn 2 berry`](https://yarnpkg.com/features/pnp) for persistent caching.
+T> ندعم yarn PnP الإصدار 3 [`yarn 2 berry`](https://yarnpkg.com/features/pnp) للتخزين المؤقت المستمر.
 
-### Custom plugins/loaders
+### Plugins/Loaders مخصصة
 
-Profile them to not introduce a performance problem here.
+حلّل أداءها حتى لا تضيف مشكلة أداء هنا.
 
-### Progress plugin
+### ملحق التقدم
 
-It is possible to shorten build times by removing `ProgressPlugin` from webpack's configuration. Keep in mind, `ProgressPlugin` might not provide as much value for fast builds as well, so make sure you are leveraging the benefits of using it.
+يمكن تقصير أزمنة البناء بإزالة `ProgressPlugin` من إعداد webpack. ضع في الحسبان أن `ProgressPlugin` قد لا يقدم قيمة كبيرة في البناءات السريعة أيضًا، لذلك تأكد من أنك تستفيد فعلًا من استخدامه.
 
 ---
 
-## Development
+## التطوير
 
-The following steps are especially useful in _development_.
+الخطوات التالية مفيدة خصوصًا في _التطوير_.
 
-### Incremental Builds
+### البناءات التزايدية
 
-Use webpack's watch mode. Don't use other tools to watch your files and invoke webpack. The built-in watch mode will keep track of timestamps and passes this information to the compilation for cache invalidation.
+استخدم وضع المراقبة في webpack. لا تستخدم أدوات أخرى لمراقبة ملفاتك واستدعاء webpack. سيتتبع وضع المراقبة المدمج الطوابع الزمنية ويمرر هذه المعلومات إلى الترجمة لإبطال التخزين المؤقت.
 
-In some setups, watching falls back to polling mode. With many watched files, this can cause a lot of CPU load. In these cases, you can increase the polling interval with `watchOptions.poll`.
+في بعض الإعدادات، تعود المراقبة إلى وضع الاستطلاع. ومع وجود عدد كبير من الملفات المراقبة، قد يسبب ذلك حملًا كبيرًا على CPU. في هذه الحالات، يمكنك زيادة فاصل الاستطلاع باستخدام `watchOptions.poll`.
 
-### Compile in Memory
+### الترجمة في الذاكرة
 
-The following utilities improve performance by compiling and serving assets in memory rather than writing to disk:
+تحسن الأدوات التالية الأداء عبر ترجمة الأصول وتقديمها من الذاكرة بدلًا من الكتابة على القرص:
 
 - `webpack-dev-server`
 - `webpack-hot-middleware`
 - `webpack-dev-middleware`
 
-### stats.toJson speed
+### سرعة stats.toJson
 
-Webpack 4 outputs a large amount of data with its `stats.toJson()` by default. Avoid retrieving portions of the `stats` object unless necessary in the incremental step. `webpack-dev-server` after v3.1.3 contained a substantial performance fix to minimize the amount of data retrieved from the `stats` object per incremental build step.
+يُخرج Webpack 4 كمية كبيرة من البيانات باستخدام `stats.toJson()` افتراضيًا. تجنب استرجاع أجزاء من كائن `stats` ما لم يكن ذلك ضروريًا في الخطوة التزايدية. احتوى `webpack-dev-server` بعد v3.1.3 على إصلاح أداء مهم لتقليل كمية البيانات المسترجعة من كائن `stats` في كل خطوة بناء تزايدية.
 
 ### Devtool
 
-Be aware of the performance differences between the different `devtool` settings.
+كن واعيًا بفروق الأداء بين إعدادات `devtool` المختلفة.
 
-- `"eval"` has the best performance, but doesn't assist you for transpiled code.
-- The `cheap-source-map` variants are more performant if you can live with the slightly worse mapping quality.
-- Use a `eval-source-map` variant for incremental builds.
+- يملك `"eval"` أفضل أداء، لكنه لا يساعدك مع الكود المحوّل.
+- متغيرات `cheap-source-map` أكثر أداء إذا كان بإمكانك قبول جودة ربط أقل قليلًا.
+- استخدم أحد متغيرات `eval-source-map` للبناءات التزايدية.
 
-T> In most cases, `eval-cheap-module-source-map` is the best option.
+T> في معظم الحالات، يكون `eval-cheap-module-source-map` الخيار الأفضل.
 
-### Avoid Production Specific Tooling
+### تجنب أدوات الإنتاج الخاصة
 
-Certain utilities, plugins, and loaders only make sense when building for production. For example, it usually doesn't make sense to minify and mangle your code with the `MinimizerPlugin` while in development. These tools should typically be excluded in development:
+بعض الأدوات والملحقات والـ loaders لا تكون منطقية إلا عند البناء للإنتاج. على سبيل المثال، لا يكون تصغير الكود وتغيير أسمائه باستخدام `MinimizerPlugin` منطقيًا عادة أثناء التطوير. ينبغي غالبًا استبعاد هذه الأدوات في التطوير:
 
 - `MinimizerPlugin`
 - `[fullhash]`/`[chunkhash]`/`[contenthash]`
@@ -158,11 +152,11 @@ Certain utilities, plugins, and loaders only make sense when building for produc
 - `AggressiveMergingPlugin`
 - `ModuleConcatenationPlugin`
 
-### Minimal Entry Chunk
+### جزء إدخال صغير
 
-Webpack only emits updated chunks to the filesystem. For some configuration options, (HMR, `[name]`/`[chunkhash]`/`[contenthash]` in `output.chunkFilename`, `[fullhash]`) the entry chunk is invalidated in addition to the changed chunks.
+لا يصدر webpack إلى نظام الملفات إلا الأجزاء المحدّثة. في بعض خيارات الإعداد، مثل HMR و`[name]`/`[chunkhash]`/`[contenthash]` في `output.chunkFilename` و`[fullhash]`، يُبطل جزء الإدخال بالإضافة إلى الأجزاء التي تغيرت.
 
-Make sure the entry chunk is cheap to emit by keeping it small. The following configuration creates an additional chunk for the runtime code, so it's cheap to generate:
+تأكد من أن إصدار جزء الإدخال رخيص بإبقائه صغيرًا. ينشئ الإعداد التالي جزءًا إضافيًا لكود وقت التشغيل، لذلك يكون توليده رخيصًا:
 
 ```js
 export default {
@@ -173,9 +167,9 @@ export default {
 };
 ```
 
-### Avoid Extra Optimization Steps
+### تجنب خطوات التحسين الإضافية
 
-Webpack does extra algorithmic work to optimize the output for size and load performance. These optimizations are performant for smaller codebases, but can be costly in larger ones:
+ينفذ webpack عملًا خوارزميًا إضافيًا لتحسين الخرج من ناحية الحجم وأداء التحميل. هذه التحسينات ذات أداء جيد في قواعد الكود الأصغر، لكنها قد تكون مكلفة في القواعد الأكبر:
 
 ```js
 export default {
@@ -188,9 +182,9 @@ export default {
 };
 ```
 
-### Output Without Path Info
+### الإخراج من دون معلومات المسار
 
-Webpack has the ability to generate path info in the output bundle. However, this puts garbage collection pressure on projects that bundle thousands of modules. Turn this off in the `options.output.pathinfo` setting:
+لدى webpack القدرة على توليد معلومات المسار داخل الحزمة الناتجة. لكن ذلك يضع ضغطًا على جامع القمامة في المشاريع التي تجمع آلاف الوحدات. عطّل ذلك في الإعداد `options.output.pathinfo`:
 
 ```js
 export default {
@@ -201,15 +195,15 @@ export default {
 };
 ```
 
-### Node.js Versions 8.9.10-9.11.1
+### إصدارات Node.js 8.9.10-9.11.1
 
-There was a [performance regression](https://github.com/nodejs/node/issues/19769) in Node.js versions 8.9.10 - 9.11.1 in the ES2015 `Map` and `Set` implementations. Webpack uses those data structures liberally, so this regression affects compile times.
+كان هناك [تراجع في الأداء](https://github.com/nodejs/node/issues/19769) في إصدارات Node.js من 8.9.10 إلى 9.11.1 في تطبيقات ES2015 لـ `Map` و`Set`. يستخدم webpack هياكل البيانات هذه بكثرة، لذلك يؤثر هذا التراجع في أزمنة الترجمة.
 
-Earlier and later Node.js versions are not affected.
+لا تتأثر إصدارات Node.js الأقدم أو الأحدث.
 
 ### TypeScript Loader
 
-To improve the build time when using `ts-loader`, use the `transpileOnly` loader option. On its own, this option turns off type checking. To gain type checking again, use the [`ForkTsCheckerWebpackPlugin`](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin). This speeds up TypeScript type checking and ESLint linting by moving each to a separate process.
+لتحسين وقت البناء عند استخدام `ts-loader`، استخدم خيار loader المسمى `transpileOnly`. هذا الخيار يوقف فحص الأنواع بحد ذاته. لاستعادة فحص الأنواع، استخدم [`ForkTsCheckerWebpackPlugin`](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin). يسرّع ذلك فحص أنواع TypeScript وتدقيق ESLint بنقل كل منهما إلى عملية منفصلة.
 
 ```js
 export default {
@@ -226,36 +220,36 @@ export default {
 };
 ```
 
-T> There is a [full example](https://github.com/TypeStrong/ts-loader/tree/master/examples/fork-ts-checker-webpack-plugin) on the `ts-loader` GitHub repository.
+T> يوجد [مثال كامل](https://github.com/TypeStrong/ts-loader/tree/master/examples/fork-ts-checker-webpack-plugin) في مستودع `ts-loader` على GitHub.
 
 ---
 
-## Production
+## الإنتاج
 
-The following steps are especially useful in _production_.
+الخطوات التالية مفيدة خصوصًا في _الإنتاج_.
 
-W> **Don't sacrifice the quality of your application for small performance gains!** Keep in mind that optimization quality is, in most cases, more important than build performance.
+W> **لا تضحّ بجودة تطبيقك من أجل مكاسب أداء صغيرة!** تذكر أن جودة التحسين أهم، في معظم الحالات، من أداء البناء.
 
-### Source Maps
+### خرائط المصدر
 
-Source maps are really expensive. Do you really need them?
+خرائط المصدر مكلفة جدًا. هل تحتاج إليها فعلًا؟
 
 ---
 
-## Specific Tooling Issues
+## مشكلات أدوات محددة
 
-The following tools have certain problems that can degrade build performance:
+تعاني الأدوات التالية من مشكلات معينة قد تضعف أداء البناء:
 
 ### Babel
 
-- Minimize the number of preset/plugins
+- قلّل عدد الـ preset/plugins.
 
 ### TypeScript
 
-- Use the `fork-ts-checker-webpack-plugin` for typechecking in a separate process.
-- Configure loaders to skip typechecking.
-- Use the `ts-loader` in `happyPackMode: true` / `transpileOnly: true`.
+- استخدم `fork-ts-checker-webpack-plugin` لفحص الأنواع في عملية منفصلة.
+- اضبط الـ loaders لتخطي فحص الأنواع.
+- استخدم `ts-loader` في `happyPackMode: true` / `transpileOnly: true`.
 
 ### Sass
 
-- `node-sass` has a bug which blocks threads from the Node.js thread pool. When using it with the `thread-loader` set `workerParallelJobs: 2`.
+- تحتوي `node-sass` على علة تمنع الخيوط من تجمع خيوط Node.js. عند استخدامها مع `thread-loader` اضبط `workerParallelJobs: 2`.
diff --git a/src/content/guides/caching.mdx b/src/content/guides/caching.mdx
index dc23e2f68576..33ccfff0d6ca 100644
--- a/src/content/guides/caching.mdx
+++ b/src/content/guides/caching.mdx
@@ -1,35 +1,21 @@
 ---
-title: Caching
+title: التخزين المؤقت
 sort: 6
 contributors:
-  - okonet
-  - jouni-kantola
-  - skipjack
-  - dannycjones
-  - fadysamirsadek
-  - afontcu
-  - rosavage
-  - saiprasad2595
-  - EugeneHlushko
-  - AnayaDesign
-  - aholzner
-  - snitin315
-related:
-  - title: Issue 652
-    url: https://github.com/webpack/webpack.js.org/issues/652
+- arabpolice
 ---
 
-T> The examples in this guide stem from [getting started](/guides/getting-started), [output management](/guides/output-management) and [code splitting](/guides/code-splitting).
+T> الأمثلة الموجودة في هذا الدليل مبنية على [البدء](/guides/getting-started) و[إدارة المخرجات](/guides/output-management) و[تقسيم الكود](/guides/code-splitting).
 
-So we're using webpack to bundle our modular application which yields a deployable `/dist` directory. Once the contents of `/dist` have been deployed to a server, clients (typically browsers) will hit that server to grab the site and its assets. The last step can be time consuming, which is why browsers use a technique called [caching](<https://en.wikipedia.org/wiki/Cache_(computing)>). This allows sites to load faster with less unnecessary network traffic. However, it can also cause headaches when you need new code to be picked up.
+إذًا نحن نستخدم webpack لتجميع تطبيقنا المعياري مما ينتج مجلد `/dist` جاهزًا للنشر. بمجرد نشر محتويات `/dist` على خادم، سيقوم العملاء (عادةً المتصفحات) بالاتصال بهذا الخادم للحصول على الموقع وملفاته. الخطوة الأخيرة قد تستغرق وقتًا، ولهذا تستخدم المتصفحات تقنية تُسمى [التخزين المؤقت](https://en.wikipedia.org/wiki/Cache_%28computing%29). هذا يسمح للمواقع بالتحميل بشكل أسرع مع تقليل حركة الشبكة غير الضرورية. ومع ذلك، قد يسبب ذلك بعض المشاكل عندما تحتاج إلى تحميل كود جديد.
 
-This guide focuses on the configuration needed to ensure files produced by webpack compilation can remain cached unless their content has changed.
+يركز هذا الدليل على الإعدادات المطلوبة لضمان أن الملفات الناتجة من عملية تجميع webpack تبقى مخزنة مؤقتًا ما لم يتغير محتواها.
 
-## Output Filenames
+## أسماء ملفات المخرجات
 
-We can use the `output.filename` [substitutions](/configuration/output/#outputfilename) setting to define the names of our output files. Webpack provides a method of templating the filenames using bracketed strings called **substitutions**. The `[contenthash]` substitution will add a unique hash based on the content of an asset. When the asset's content changes, `[contenthash]` will change as well.
+يمكننا استخدام إعداد `output.filename` الخاص بـ [الاستبدالات](/configuration/output/#outputfilename) لتحديد أسماء ملفات المخرجات. يوفر webpack طريقة لإنشاء قوالب لأسماء الملفات باستخدام سلاسل محاطة بأقواس تُسمى **الاستبدالات**. الاستبدال `[contenthash]` سيضيف قيمة hash فريدة بناءً على محتوى الملف. وعندما يتغير محتوى الملف، فإن `[contenthash]` سيتغير أيضًا.
 
-Let's get our project set up using the example from [getting started](/guides/getting-started) with the `plugins` from [output management](/guides/output-management), so we don't have to deal with maintaining our `index.html` file manually:
+لنقم بإعداد مشروعنا باستخدام المثال من [البدء](/guides/getting-started) مع إضافة `plugins` من [إدارة المخرجات](/guides/output-management)، حتى لا نضطر إلى إدارة ملف `index.html` يدويًا:
 
 **project**
 
@@ -71,7 +57,7 @@ webpack-demo
  };
 ```
 
-Running our build script, `npm run build`, with this configuration should produce the following output:
+تشغيل أمر البناء `npm run build` بهذا الإعداد يجب أن ينتج المخرجات التالية:
 
 ```bash
 ...
@@ -81,7 +67,7 @@ main.7e2c49a622975ebd9b7e.js     544 kB       0  [emitted]  [big]  main
 ...
 ```
 
-As you can see the bundle's name now reflects its content (via the hash). If we run another build without making any changes, we'd expect that filename to stay the same. However, if we were to run it again, we may find that this is not the case:
+كما ترى، اسم الحزمة الآن يعكس محتواها (عبر قيمة الـ hash). إذا قمنا بتشغيل البناء مرة أخرى بدون أي تغييرات، فمن المفترض أن يبقى اسم الملف كما هو. ولكن إذا قمنا بالبناء مرة أخرى، فقد نجد أن هذا ليس صحيحًا:
 
 ```bash
 ...
@@ -91,13 +77,13 @@ main.205199ab45963f6a62ec.js     544 kB       0  [emitted]  [big]  main
 ...
 ```
 
-This is because webpack includes certain boilerplate, specifically the runtime and manifest, in the entry chunk.
+هذا لأن webpack يضمّن بعض الشيفرات الأساسية، وبالتحديد الـ runtime والـ manifest، داخل حزمة الإدخال.
 
-W> Output may differ depending on your current webpack version. Newer versions may not have all the same issues with hashing as some older versions, but we still recommend the following steps to be safe.
+W> قد تختلف المخرجات حسب إصدار webpack الحالي لديك. الإصدارات الأحدث قد لا تعاني من نفس مشاكل الـ hashing الموجودة في الإصدارات القديمة، لكننا لا نزال نوصي بالخطوات التالية لضمان الأمان.
 
-## Extracting Boilerplate
+## استخراج الشيفرات الأساسية
 
-As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) can be used to split modules out into separate bundles. Webpack provides an optimization feature to split runtime code into a separate chunk using the [`optimization.runtimeChunk`](/configuration/optimization/#optimizationruntimechunk) option. Set it to `single` to create a single runtime bundle for all chunks:
+كما تعلمنا في [تقسيم الكود](/guides/code-splitting)، يمكن استخدام [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) لفصل الوحدات إلى حزم منفصلة. يوفر webpack ميزة تحسين لتقسيم كود الـ runtime إلى حزمة منفصلة باستخدام الخيار [`optimization.runtimeChunk`](/configuration/optimization/#optimizationruntimechunk). قم بضبطه إلى `single` لإنشاء حزمة runtime واحدة لكل الحزم:
 
 **webpack.config.js**
 
@@ -127,7 +113,7 @@ As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlug
  };
 ```
 
-Let's run another build to see the extracted `runtime` bundle:
+لنقم بتشغيل البناء مرة أخرى لرؤية حزمة `runtime` المستخرجة:
 
 ```bash
 Hash: 82c9c385607b2150fab2
@@ -143,8 +129,8 @@ runtime.cc17ae2a94ec771e9221.js   1.42 KiB       0  [emitted]  runtime
     + 1 hidden module
 ```
 
-It's also good practice to extract third-party libraries, such as `lodash` or `react`, to a separate `vendor` chunk as they are less likely to change than our local source code. This step will allow clients to request even less from the server to stay up to date.
-This can be done by using the [`cacheGroups`](/plugins/split-chunks-plugin/#splitchunkscachegroups) option of the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) demonstrated in [Example 2 of SplitChunksPlugin](/plugins/split-chunks-plugin/#split-chunks-example-2). Lets add `optimization.splitChunks` with `cacheGroups` with next params and build:
+من الممارسات الجيدة أيضًا فصل المكتبات الخارجية مثل `lodash` أو `react` إلى حزمة `vendor` منفصلة لأنها أقل عرضة للتغيير مقارنة بالكود المحلي الخاص بنا. هذه الخطوة ستسمح للعملاء بطلب بيانات أقل من الخادم للبقاء محدثين.
+يمكن تنفيذ ذلك باستخدام خيار [`cacheGroups`](/plugins/split-chunks-plugin/#splitchunkscachegroups) الخاص بـ [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) كما هو موضح في [المثال 2 من SplitChunksPlugin](/plugins/split-chunks-plugin/#split-chunks-example-2). لنقم بإضافة `optimization.splitChunks` مع `cacheGroups` بالمعاملات التالية ثم نقوم بالبناء:
 
 **webpack.config.js**
 
@@ -183,7 +169,7 @@ This can be done by using the [`cacheGroups`](/plugins/split-chunks-plugin/#spli
  };
 ```
 
-Let's run another build to see our new `vendor` bundle:
+لنقم بالبناء مرة أخرى لرؤية حزمة `vendor` الجديدة:
 
 ```bash
 ...
@@ -195,11 +181,11 @@ vendors.a42c3ca0d742766d7a28.js   69.4 KiB       1  [emitted]  vendors
 ...
 ```
 
-We can now see that our `main` bundle does not contain `vendor` code from `node_modules` directory and is down in size to `240 bytes`!
+يمكننا الآن ملاحظة أن حزمة `main` لم تعد تحتوي على كود `vendor` من مجلد `node_modules` وأصبح حجمها `240 bytes` فقط!
 
-## Module Identifiers
+## معرفات الوحدات
 
-Let's add another module, `print.js`, to our project:
+لنقم بإضافة وحدة جديدة `print.js` إلى مشروعنا:
 
 **project**
 
@@ -242,7 +228,7 @@ webpack-demo
   document.body.appendChild(component());
 ```
 
-Running another build, we would expect only our `main` bundle's hash to change, however...
+عند تشغيل البناء مرة أخرى، نتوقع أن يتغير hash الخاص بحزمة `main` فقط، ولكن...
 
 ```bash
 ...
@@ -254,13 +240,13 @@ Running another build, we would expect only our `main` bundle's hash to change,
 ...
 ```
 
-... we can see that all three have. This is because each [`module.id`](/api/module-variables/#moduleid-commonjs) is incremented based on resolving order by default. Meaning when the order of resolving is changed, the IDs will be changed as well. To recap:
+... يمكننا رؤية أن الثلاثة جميعًا قد تغيروا. السبب هو أن كل [`module.id`](/api/module-variables/#moduleid-commonjs) يتم زيادته افتراضيًا بناءً على ترتيب التحليل. وهذا يعني أنه عندما يتغير ترتيب التحليل، ستتغير المعرفات أيضًا. للتلخيص:
 
-- The `main` bundle changed because of its new content.
-- The `vendor` bundle changed because its `module.id` was changed.
-- And, the `runtime` bundle changed because it now contains a reference to a new module.
+* حزمة `main` تغيرت بسبب محتواها الجديد.
+* حزمة `vendor` تغيرت لأن `module.id` الخاص بها تغير.
+* وحزمة `runtime` تغيرت لأنها تحتوي الآن على مرجع إلى وحدة جديدة.
 
-The first and last are expected, it's the `vendor` hash we want to fix. Let's use [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) with `'deterministic'` option:
+الأول والأخير متوقعان، لكننا نريد إصلاح hash الخاص بـ `vendor`. لنستخدم [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) مع الخيار `'deterministic'`:
 
 **webpack.config.js**
 
@@ -300,7 +286,7 @@ The first and last are expected, it's the `vendor` hash we want to fix. Let's us
  };
 ```
 
-Now, despite any new local dependencies, our `vendor` hash should stay consistent between builds:
+الآن، مهما أضفنا من تبعيات محلية جديدة، يجب أن يبقى hash الخاص بـ `vendor` ثابتًا بين عمليات البناء:
 
 ```bash
 ...
@@ -313,7 +299,7 @@ Entrypoint main = runtime.725a1a51ede5ae0cfde0.js vendors.55e79e5927a639d21a1b.j
 ...
 ```
 
-And let's modify our `src/index.js` to temporarily remove that extra dependency:
+والآن لنقم بتعديل `src/index.js` لإزالة تلك التبعية الإضافية مؤقتًا:
 
 **src/index.js**
 
@@ -336,7 +322,7 @@ And let's modify our `src/index.js` to temporarily remove that extra dependency:
   document.body.appendChild(component());
 ```
 
-And finally run our build again:
+وأخيرًا قم بتشغيل البناء مرة أخرى:
 
 ```bash
 ...
@@ -349,8 +335,8 @@ Entrypoint main = runtime.725a1a51ede5ae0cfde0.js vendors.55e79e5927a639d21a1b.j
 ...
 ```
 
-We can see that both builds yielded `55e79e5927a639d21a1b` in the `vendor` bundle's filename.
+يمكننا ملاحظة أن كلا عمليتي البناء استخدمتا القيمة `55e79e5927a639d21a1b` في اسم ملف حزمة `vendor`.
 
-## Conclusion
+## الخلاصة
 
-Caching can be complicated, but the benefit to application or site users makes it worth the effort. See the _Further Reading_ section below to learn more.
+قد يكون التخزين المؤقت معقدًا، لكن الفائدة التي يقدمها لمستخدمي التطبيق أو الموقع تجعل الجهد مستحقًا. راجع قسم *Further Reading* أدناه لمعرفة المزيد.
diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx
index 60d82ac4b45b..4eaab3566a40 100644
--- a/src/content/guides/code-splitting.mdx
+++ b/src/content/guides/code-splitting.mdx
@@ -1,64 +1,30 @@
 ---
-title: Code Splitting
+title: تقسيم الكود
 sort: 5
 contributors:
-  - pksjce
-  - pastelsky
-  - simon04
-  - jonwheeler
-  - johnstew
-  - shinxi
-  - tomtasche
-  - levy9527
-  - rahulcs
-  - chrisVillanueva
-  - rafde
-  - bartushek
-  - shaunwallace
-  - skipjack
-  - jakearchibald
-  - TheDutchCoder
-  - rouzbeh84
-  - shaodahong
-  - sudarsangp
-  - kcolton
-  - efreitasn
-  - EugeneHlushko
-  - Tiendo1011
-  - byzyk
-  - AnayaDesign
-  - wizardofhogwarts
-  - maximilianschmelzer
-  - smelukov
-  - chenxsan
-  - Adarah
-  - atesgoral
-  - snitin315
-  - artem-malko
-  - Brennvo
-  - ThierryRakotomanana
+  - arabpolice
 related:
-  - title: <link rel="prefetch/preload" /> in webpack
+  - title: <link rel="prefetch/preload" /> في webpack
     url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
-  - title: Preload, Prefetch And Priorities in Chrome
+  - title: التحميل المسبق (Preload)، والجلب المسبق (Prefetch)، والأولويات في Chrome
     url: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
-  - title: Preloading content with <link rel="preload" />
+  - title: التحميل المسبق للمحتوى باستخدام <link rel="preload" />
     url: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
 ---
 
-T> This guide extends the example provided in [Getting Started](/guides/getting-started). Please make sure you are at least familiar with the example provided there and the [Output Management](/guides/output-management/) chapter.
+T> هذا الدليل يوسّع المثال المقدم في [البدء](/guides/getting-started). يرجى التأكد من أنك على الأقل على دراية بالمثال المقدم هناك وبفصل [إدارة المخرجات](/guides/output-management/).
 
-Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.
+يُعد تقسيم الكود (Code Splitting) أحد أكثر ميزات webpack قوة وإقناعًا. تتيح لك هذه الميزة تقسيم الكود إلى حزم متعددة يمكن تحميلها عند الطلب أو بشكل متوازٍ. يمكن استخدام ذلك لتحقيق حزم أصغر والتحكم في أولوية تحميل الموارد، مما قد يكون له تأثير كبير على وقت التحميل إذا استُخدم بشكل صحيح.
 
-There are three general approaches to code splitting available:
+هناك ثلاث طرق عامة متاحة لتقسيم الكود:
 
-- **Entry Points**: Manually split code using [`entry`](/configuration/entry-context) configuration.
-- **Prevent Duplication**: Use [Entry dependencies](/configuration/entry-context/#dependencies) or [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) to dedupe and split chunks.
-- **Dynamic Imports**: Split code via inline function calls within modules.
+- **نقاط الإدخال (Entry Points)**: تقسيم الكود يدويًا باستخدام إعداد [`entry`](/configuration/entry-context).
+- **منع التكرار (Prevent Duplication)**: استخدام [اعتماديات الإدخال](/configuration/entry-context/#dependencies) أو [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) لإزالة التكرار وتقسيم الأجزاء.
+- **الاستيراد الديناميكي (Dynamic Imports)**: تقسيم الكود عبر استدعاءات دوال مضمّنة داخل الوحدات.
 
-## Entry Points
+## نقاط الإدخال
 
-This is by far the easiest and most intuitive way to split code. However, it is more manual and has some pitfalls we will go over. Let's take a look at how we might split another module from the main bundle:
+تُعد هذه أبسط وأكثر الطرق وضوحًا لتقسيم الكود. ومع ذلك فهي أكثر يدوية ولها بعض العيوب التي سنستعرضها. دعونا نلقِ نظرة على كيفية تقسيم وحدة أخرى من الحزمة الرئيسية:
 
 **project**
 
@@ -72,7 +38,7 @@ This is by far the easiest and most intuitive way to split code. However, it is
   │   ├── index.js
 + │   └── another-module.js
   └── /node_modules
-```
+````
 
 **another-module.js**
 
@@ -106,7 +72,7 @@ console.log(_.join(["Another", "module", "loaded!"], " "));
  };
 ```
 
-This will yield the following build result:
+سينتج عن ذلك نتيجة البناء التالية:
 
 ```bash
 ...
@@ -121,18 +87,18 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 245 ms
 ```
 
-As mentioned there are some pitfalls to this approach:
+كما ذُكر، توجد بعض العيوب في هذا الأسلوب:
 
-- If there are any duplicated modules between entry chunks they will be included in both bundles.
-- It isn't as flexible and can't be used to dynamically split code with the core application logic.
+* إذا كانت هناك وحدات مكررة بين أجزاء الإدخال، فسيتم تضمينها في كلتا الحزمتين.
+* ليس مرنًا جدًا ولا يمكن استخدامه لتقسيم الكود ديناميكيًا مع منطق التطبيق الأساسي.
 
-The first of these two points is definitely an issue for our example, as `lodash` is also imported within `./src/index.js` and will thus be duplicated in both bundles. Let's remove this duplication in next section.
+النقطة الأولى من هاتين النقطتين تُعد مشكلة فعلية في مثالنا، لأن `lodash` تم استيراده أيضًا داخل `./src/index.js` وبالتالي سيتم تكراره في كلتا الحزمتين. دعونا نزيل هذا التكرار في القسم التالي.
 
-## Prevent Duplication
+## منع التكرار
 
-### Entry dependencies
+### اعتماديات الإدخال
 
-The [`dependOn` option](/configuration/entry-context/#dependencies) allows to share the modules between the chunks:
+يسمح خيار [`dependOn`](/configuration/entry-context/#dependencies) بمشاركة الوحدات بين الأجزاء:
 
 **webpack.config.js**
 
@@ -165,7 +131,7 @@ The [`dependOn` option](/configuration/entry-context/#dependencies) allows to sh
  };
 ```
 
-If we're going to use multiple entry points on a single HTML page, `optimization.runtimeChunk: 'single'` is needed too, otherwise we could get into trouble described [here](https://bundlers.tooling.report/code-splitting/multi-entry/).
+إذا كنا سنستخدم عدة نقاط إدخال في صفحة HTML واحدة، فسنحتاج أيضًا إلى `optimization.runtimeChunk: 'single'`، وإلا فقد نواجه المشكلة الموضحة [هنا](https://bundlers.tooling.report/code-splitting/multi-entry/).
 
 **webpack.config.js**
 
@@ -199,7 +165,7 @@ If we're going to use multiple entry points on a single HTML page, `optimization
  };
 ```
 
-And here's the result of build:
+وهنا نتيجة البناء:
 
 ```bash
 ...
@@ -219,13 +185,13 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 249 ms
 ```
 
-As you can see there's another `runtime.bundle.js` file generated besides `shared.bundle.js`, `index.bundle.js` and `another.bundle.js`.
+كما ترى، تم إنشاء ملف إضافي باسم `runtime.bundle.js` بجانب `shared.bundle.js` و `index.bundle.js` و `another.bundle.js`.
 
-Although using multiple entry points per page is allowed in webpack, it should be avoided when possible in favor of an entry point with multiple imports: `entry: { page: ['./analytics', './app'] }`. This results in a better optimization and consistent execution order when using `async` script tags.
+على الرغم من أن استخدام عدة نقاط إدخال في الصفحة الواحدة مسموح به في webpack، فإنه يُفضل تجنبه متى أمكن لصالح نقطة إدخال واحدة تحتوي على عدة استيرادات: `entry: { page: ['./analytics', './app'] }`. ينتج عن ذلك تحسين أفضل وترتيب تنفيذ متسق عند استخدام وسوم `script` مع `async`.
 
 ### SplitChunksPlugin
 
-The [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) allows us to extract common dependencies into an existing entry chunk or an entirely new chunk. Let's use this to de-duplicate the `lodash` dependency from the previous example:
+تسمح لنا [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) باستخراج الاعتماديات المشتركة إلى جزء إدخال موجود أو إلى جزء جديد بالكامل. دعونا نستخدمها لإزالة تكرار اعتماد `lodash` من المثال السابق:
 
 **webpack.config.js**
 
@@ -254,9 +220,9 @@ The [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) allows us to extract co
   };
 ```
 
-With the [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimizationsplitchunks) configuration option in place, we should now see the duplicate dependency removed from our `index.bundle.js` and `another.bundle.js`. The plugin should notice that we've separated `lodash` out to a separate chunk and remove the dead weight from our main bundle. However, it's important to note that common dependencies are only extracted into a separate chunk if they meet the [size thresholds](/plugins/split-chunks-plugin/#splitchunksminsize) specified by webpack.
+بعد إضافة إعداد [`optimization.splitChunks`](/plugins/split-chunks-plugin/#optimizationsplitchunks)، ينبغي الآن إزالة الاعتماد المكرر من `index.bundle.js` و `another.bundle.js`. يجب أن يلاحظ الملحق أننا فصلنا `lodash` إلى جزء مستقل ويزيل الوزن الزائد من الحزمة الرئيسية. ومع ذلك، من المهم ملاحظة أن الاعتماديات المشتركة لن تُستخرج إلى جزء منفصل إلا إذا استوفت [حدود الحجم](/plugins/split-chunks-plugin/#splitchunksminsize) التي يحددها webpack.
 
-Let's do an `npm run build` to see if it worked:
+دعونا ننفذ `npm run build` لنرى إن كان ذلك قد نجح:
 
 ```bash
 ...
@@ -274,17 +240,17 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 241 ms
 ```
 
-Here are some other useful plugins and loaders provided by the community for splitting code:
+إليك بعض الملحقات والمحملات الأخرى المفيدة المقدمة من المجتمع لتقسيم الكود:
 
-- [`mini-css-extract-plugin`](/plugins/mini-css-extract-plugin): Useful for splitting CSS out from the main application.
+* [`mini-css-extract-plugin`](/plugins/mini-css-extract-plugin): مفيد لفصل CSS عن التطبيق الرئيسي.
 
-## Dynamic Imports
+## الاستيراد الديناميكي
 
-Two similar techniques are supported by webpack when it comes to dynamic code splitting. The first and recommended approach is to use the [`import()` syntax](/api/module-methods/#import-1) that conforms to the [ECMAScript proposal](https://github.com/tc39/proposal-dynamic-import) for dynamic imports. The legacy, webpack-specific approach is to use [`require.ensure`](/api/module-methods/#requireensure). Let's try using the first of these two approaches...
+يدعم webpack تقنيتين متشابهتين لتقسيم الكود الديناميكي. الطريقة الأولى والمُوصى بها هي استخدام صيغة [`import()`](/api/module-methods/#import-1) المتوافقة مع [اقتراح ECMAScript](https://github.com/tc39/proposal-dynamic-import) للاستيراد الديناميكي. الطريقة القديمة الخاصة بـ webpack هي استخدام [`require.ensure`](/api/module-methods/#requireensure). دعونا نجرب الطريقة الأولى...
 
-W> `import()` calls use [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `import()` with older browsers (e.g., IE 11), remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تستخدم استدعاءات `import()` [الوعود (Promises)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) داخليًا. إذا كنت تستخدم `import()` مع المتصفحات القديمة (مثل IE 11)، فتذكر تضمين `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
 
-Before we start, let's remove the extra [`entry`](/concepts/entry-points/) and [`optimization.splitChunks`](/plugins/split-chunks-plugin) from our configuration in the above example as they won't be needed for this next demonstration:
+قبل أن نبدأ، دعونا نزيل [`entry`](/concepts/entry-points/) الإضافي و [`optimization.splitChunks`](/plugins/split-chunks-plugin) من إعداداتنا في المثال السابق لأننا لن نحتاجهما في هذا العرض التالي:
 
 **webpack.config.js**
 
@@ -313,7 +279,7 @@ Before we start, let's remove the extra [`entry`](/concepts/entry-points/) and [
  };
 ```
 
-We'll also update our project to remove the now unused files:
+سنقوم أيضًا بتحديث مشروعنا لإزالة الملفات غير المستخدمة الآن:
 
 **project**
 
@@ -329,7 +295,7 @@ We'll also update our project to remove the now unused files:
   └── /node_modules
 ```
 
-Now, instead of statically importing `lodash`, we'll use dynamic importing to separate a chunk:
+الآن، بدلًا من استيراد `lodash` بشكل ثابت، سنستخدم الاستيراد الديناميكي لفصل جزء مستقل:
 
 **src/index.js**
 
@@ -351,7 +317,7 @@ Now, instead of statically importing `lodash`, we'll use dynamic importing to se
 -  return element;
 +      return element;
 +    })
-+    .catch((error) => 'An error occurred while loading the component');
++    .catch((error) => 'حدث خطأ أثناء تحميل المكوّن');
  }
 
 -document.body.appendChild(component());
@@ -360,9 +326,9 @@ Now, instead of statically importing `lodash`, we'll use dynamic importing to se
 +});
 ```
 
-The reason we need `default` is that since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of `module.exports`, it will instead create an artificial namespace object for the CommonJS module. For more information on the reason behind this, read [webpack 4: import() and CommonJs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655).
+السبب في حاجتنا إلى `default` هو أنه منذ webpack 4، عند استيراد وحدة CommonJS، لن يتم حل الاستيراد إلى قيمة `module.exports` مباشرة، بل سيتم إنشاء كائن namespace اصطناعي لوحدة CommonJS. لمزيد من المعلومات حول سبب ذلك، اقرأ [webpack 4: import() and CommonJs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655).
 
-Let's run webpack to see `lodash` separated out to a separate bundle:
+دعونا نشغّل webpack لنرى `lodash` منفصلة في حزمة مستقلة:
 
 ```bash
 ...
@@ -376,7 +342,7 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 268 ms
 ```
 
-T> You can also use magic comment `webpackExports` with `import()` to expose specific exports from a dynamically imported module:
+T> يمكنك أيضًا استخدام التعليق السحري `webpackExports` مع `import()` لكشف صادرات محددة من وحدة تم استيرادها ديناميكيًا:
 
 ```js
 import(
@@ -385,9 +351,9 @@ import(
 );
 ```
 
-This can help webpack tree shake other unused exports. See [Magic Comments](/api/module-methods/#magic-comments) for details.
+يمكن أن يساعد ذلك webpack في إزالة الصادرات غير المستخدمة (tree shaking). راجع [Magic Comments](/api/module-methods/#magic-comments) للمزيد من التفاصيل.
 
-As `import()` returns a promise, it can be used with [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here's how it would simplify the code:
+وبما أن `import()` تُرجع Promise، فيمكن استخدامها مع [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). إليك كيف يمكن أن تُبسّط الكود:
 
 **src/index.js**
 
@@ -415,32 +381,32 @@ As `import()` returns a promise, it can be used with [`async` functions](https:/
  });
 ```
 
-T> It is possible to provide a [dynamic expression](/api/module-methods/#dynamic-expressions-in-import) to `import()` when you might need to import specific module based on a computed variable later.
+T> من الممكن تمرير [تعبير ديناميكي](/api/module-methods/#dynamic-expressions-in-import) إلى `import()` عندما تحتاج إلى استيراد وحدة محددة بناءً على متغير محسوب لاحقًا.
 
-### Understanding ChunkLoadError
+### فهم ChunkLoadError
 
-When using dynamic `import()` or code splitting, webpack may throw a `ChunkLoadError` if a chunk fails to load at runtime.
+عند استخدام `import()` الديناميكي أو تقسيم الكود، قد يرمي webpack خطأ `ChunkLoadError` إذا فشل تحميل جزء أثناء وقت التشغيل.
 
-This error typically indicates that the requested chunk could not be executed or resolved properly. In some cases, the browser’s underlying network or script loading error may not be fully reflected in the `ChunkLoadError` message itself.
+يشير هذا الخطأ عادةً إلى أن الجزء المطلوب لم يتمكن من التنفيذ أو الحل بشكل صحيح. وفي بعض الحالات، قد لا ينعكس خطأ الشبكة أو تحميل السكربت الأساسي من المتصفح بالكامل داخل رسالة `ChunkLoadError` نفسها.
 
-If you encounter this error:
+إذا واجهت هذا الخطأ:
 
-- Verify that the chunk file is accessible via the network.
-- Check that the `publicPath` is correctly configured.
-- Inspect the browser console for additional script or network errors.
+* تحقق من أن ملف الجزء يمكن الوصول إليه عبر الشبكة.
+* تحقق من أن `publicPath` تم إعداده بشكل صحيح.
+* افحص وحدة التحكم في المتصفح للحصول على أخطاء إضافية تتعلق بالسكربت أو الشبكة.
 
-For more context, see related discussion in the webpack issue tracker.
+للمزيد من التفاصيل، راجع النقاش ذي الصلة في متتبع مشاكل webpack.
 
-## Prefetching/Preloading modules
+## الجلب المسبق/التحميل المسبق للوحدات
 
-Webpack 4.6.0+ adds support for prefetching and preloading.
+أضاف webpack 4.6.0+ دعمًا للجلب المسبق (prefetching) والتحميل المسبق (preloading).
 
-Using these inline directives while declaring your imports allows webpack to output “Resource Hint” which tells the browser that for:
+يسمح استخدام هذه التعليمات المضمّنة أثناء تعريف الاستيرادات لـ webpack بإخراج “Resource Hint” يُخبر المتصفح بما يلي:
 
-- **prefetch**: resource is probably needed for some navigation in the future
-- **preload**: resource will also be needed during the current navigation
+* **prefetch**: من المحتمل أن يكون المورد مطلوبًا لبعض التنقلات المستقبلية.
+* **preload**: سيكون المورد مطلوبًا أيضًا أثناء التنقل الحالي.
 
-An example of this is having a `HomePage` component, which renders a `LoginButton` component which then on demand loads a `LoginModal` component after being clicked.
+مثال على ذلك وجود مكوّن `HomePage` يعرض مكوّن `LoginButton` الذي يقوم عند الطلب بتحميل مكوّن `LoginModal` بعد النقر عليه.
 
 **LoginButton.js**
 
@@ -449,20 +415,20 @@ An example of this is having a `HomePage` component, which renders a `LoginButto
 import(/* webpackPrefetch: true */ "./path/to/LoginModal.js");
 ```
 
-This will result in `<link rel="prefetch" href="login-modal-chunk.js">` being appended in the head of the page, which will instruct the browser to prefetch in idle time the `login-modal-chunk.js` file.
+سينتج عن ذلك إضافة `<link rel="prefetch" href="login-modal-chunk.js">` داخل رأس الصفحة، مما يوجّه المتصفح لجلب ملف `login-modal-chunk.js` مسبقًا أثناء وقت الخمول.
 
-T> webpack will add the prefetch hint once the parent chunk has been loaded.
+T> سيضيف webpack تلميح prefetch بمجرد تحميل الجزء الأب.
 
-Preload directive has a bunch of differences compared to prefetch:
+يوجد عدة اختلافات بين preload و prefetch:
 
-- A preloaded chunk starts loading in parallel to the parent chunk. A prefetched chunk starts after the parent chunk finishes loading.
-- A preloaded chunk has medium priority and is instantly downloaded. A prefetched chunk is downloaded while the browser is idle.
-- A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.
-- Browser support is different.
+* يبدأ تحميل الجزء المحمّل مسبقًا بالتوازي مع الجزء الأب. بينما يبدأ تحميل الجزء المجلوِب مسبقًا بعد انتهاء تحميل الجزء الأب.
+* يمتلك الجزء المحمّل مسبقًا أولوية متوسطة ويتم تنزيله فورًا. بينما يتم تنزيل الجزء المجلوِب مسبقًا عندما يكون المتصفح في وضع الخمول.
+* يجب أن يُطلب الجزء المحمّل مسبقًا فورًا من قبل الجزء الأب. بينما يمكن استخدام الجزء المجلوِب مسبقًا في أي وقت مستقبلًا.
+* يختلف دعم المتصفحات بينهما.
 
-An example of this can be having a `Component` which always depends on a big library that should be in a separate chunk.
+يمكن أن يكون مثال ذلك وجود مكوّن `Component` يعتمد دائمًا على مكتبة ضخمة يجب وضعها في جزء منفصل.
 
-Let's imagine a component `ChartComponent` which needs a huge `ChartingLibrary`. It displays a `LoadingIndicator` when rendered and instantly does an on demand import of `ChartingLibrary`:
+لنتخيل مكوّنًا باسم `ChartComponent` يحتاج إلى مكتبة ضخمة اسمها `ChartingLibrary`. يعرض `LoadingIndicator` عند التصيير ويقوم مباشرة باستيراد `ChartingLibrary` عند الطلب:
 
 **ChartComponent.js**
 
@@ -471,23 +437,23 @@ Let's imagine a component `ChartComponent` which needs a huge `ChartingLibrary`.
 import(/* webpackPreload: true */ "ChartingLibrary");
 ```
 
-When a page which uses the `ChartComponent` is requested, the charting-library-chunk is also requested via `<link rel="preload">`. Assuming the page-chunk is smaller and finishes faster, the page will be displayed with a `LoadingIndicator`, until the already requested `charting-library-chunk` finishes. This will give a little load time boost since it only needs one round-trip instead of two. Especially in high-latency environments.
+عندما يتم طلب صفحة تستخدم `ChartComponent`، سيتم أيضًا طلب جزء charting-library عبر `<link rel="preload">`. وبافتراض أن جزء الصفحة أصغر وينتهي تحميله أسرع، فسيتم عرض الصفحة مع `LoadingIndicator` حتى ينتهي تحميل `charting-library-chunk` الذي تم طلبه مسبقًا. هذا يعطي تحسينًا بسيطًا في وقت التحميل لأنه يحتاج إلى رحلة اتصال واحدة بدلًا من اثنتين، خاصة في البيئات ذات زمن الوصول العالي.
 
-T> Using `webpackPreload` incorrectly can actually hurt performance, so be careful when using it.
+T> قد يؤدي استخدام `webpackPreload` بشكل غير صحيح إلى الإضرار بالأداء، لذا كن حذرًا عند استخدامه.
 
-Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streaming server side rendering.
+أحيانًا قد تحتاج إلى تحكمك الخاص في preload. على سبيل المثال، يمكن تنفيذ preload لأي استيراد ديناميكي عبر سكربت async. قد يكون هذا مفيدًا في حالة التصيير من جهة الخادم بشكل متدفق (streaming server side rendering).
 
 ```js
 const lazyComp = () =>
   import("DynamicComponent").catch((error) => {
-    // Do something with the error.
-    // For example, we can retry the request in case of any net error
+    // افعل شيئًا مع الخطأ.
+    // على سبيل المثال، يمكننا إعادة المحاولة في حال حدوث خطأ شبكي
   });
 ```
 
-If the script loading will fail before webpack starts loading of that script by itself (webpack creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.
+إذا فشل تحميل السكربت قبل أن يبدأ webpack بتحميله بنفسه (يقوم webpack بإنشاء وسم script لتحميل الكود إذا لم يكن السكربت موجودًا في الصفحة)، فلن يبدأ معالج `catch` حتى انتهاء مدة [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout). قد يكون هذا السلوك غير متوقع. لكنه قابل للتفسير — لأن webpack لا يستطيع رمي أي خطأ، إذ إنه لا يعلم أن السكربت قد فشل. سيضيف webpack معالج onerror للسكربت بعد حدوث الخطأ بالفعل.
 
-To prevent such problem you can add your own onerror handler, which removes the script in case of any error:
+لمنع هذه المشكلة يمكنك إضافة معالج onerror خاص بك يقوم بإزالة السكربت في حالة حدوث أي خطأ:
 
 ```html
 <script
@@ -497,19 +463,20 @@ To prevent such problem you can add your own onerror handler, which removes the
 ></script>
 ```
 
-In that case, errored script will be removed. Webpack will create its own script and any error will be processed without any timeouts.
+في هذه الحالة، سيتم إزالة السكربت الذي حدث به خطأ. وسيقوم webpack بإنشاء سكربته الخاص وستتم معالجة أي خطأ بدون أي مهلات زمنية.
+
+## تحليل الحزم
 
-## Bundle Analysis
+بمجرد أن تبدأ بتقسيم الكود، قد يكون من المفيد تحليل المخرجات لمعرفة أين انتهت الوحدات. تُعد [أداة التحليل الرسمية](https://github.com/webpack/analyse) مكانًا جيدًا للبدء. كما توجد بعض الخيارات الأخرى المدعومة من المجتمع:
 
-Once you start splitting your code, it can be useful to analyze the output to check where modules have ended up. The [official analyze tool](https://github.com/webpack/analyse) is a good place to start. There are some other community-supported options out there as well:
+* [webpack-chart](https://alexkuz.github.io/webpack-chart/): مخطط دائري تفاعلي لإحصائيات webpack.
+* [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): تصور وتحليل الحزم لمعرفة الوحدات التي تستهلك المساحة وأيها قد تكون مكررة.
+* [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer): ملحق وأداة CLI تمثل محتوى الحزمة على شكل خريطة شجرية تفاعلية قابلة للتكبير.
+* [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): تقوم هذه الأداة بتحليل الحزمة وتقديم اقتراحات عملية لتقليل حجم الحزمة.
+* [bundle-stats](https://github.com/bundle-stats/bundle-stats): إنشاء تقرير عن الحزمة (الحجم، الأصول، الوحدات) ومقارنة النتائج بين البنايات المختلفة.
+* [webpack-stats-viewer](https://github.com/moonrailgun/webpack-stats-viewer): ملحق مدمج لإحصائيات webpack يعرض معلومات أكثر عن تفاصيل الحزمة.
 
-- [webpack-chart](https://alexkuz.github.io/webpack-chart/): Interactive pie chart for webpack stats.
-- [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): Visualize and analyze your bundles to see which modules are taking up space and which might be duplicates.
-- [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer): A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
-- [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
-- [bundle-stats](https://github.com/bundle-stats/bundle-stats): Generate a bundle report(bundle size, assets, modules) and compare the results between different builds.
-- [webpack-stats-viewer](https://github.com/moonrailgun/webpack-stats-viewer): A plugin with build for webpack stats. Show more information about webpack bundle detail.
+## الخطوات التالية
 
-## Next Steps
+راجع [التحميل الكسول](/guides/lazy-loading/) للحصول على مثال عملي أكثر حول كيفية استخدام `import()` في تطبيق حقيقي، وراجع [التخزين المؤقت](/guides/caching/) لمعرفة كيفية تقسيم الكود بشكل أكثر فعالية.
 
-See [Lazy Loading](/guides/lazy-loading/) for a more concrete example of how `import()` can be used in a real application and [Caching](/guides/caching/) to learn how to split code more effectively.
diff --git a/src/content/guides/csp.mdx b/src/content/guides/csp.mdx
index 9fec967f7e67..ab2d6de83d48 100644
--- a/src/content/guides/csp.mdx
+++ b/src/content/guides/csp.mdx
@@ -1,29 +1,26 @@
 ---
-title: Content Security Policies
+title: سياسات أمان المحتوى
 sort: 10
 contributors:
-  - EugeneHlushko
-  - probablyup
-  - wizardofhogwarts
-  - koto
+  - arabpolice
 related:
-  - title: Nonce purpose explained
+  - title: شرح الغرض من Nonce
     url: https://stackoverflow.com/questions/42922784/what-s-the-purpose-of-the-html-nonce-attribute-for-script-and-style-elements
-  - title: On the Insecurity of Whitelists and the Future of Content Security Policy
+  - title: حول عدم أمان القوائم البيضاء ومستقبل سياسة أمان المحتوى
     url: https://ai.google/research/pubs/pub45542
-  - title: Locking Down Your Website Scripts with CSP, Hashes, Nonces and Report URI
+  - title: تأمين سكربتات موقعك باستخدام CSP والهاشات والـ Nonces وReport URI
     url: https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/
-  - title: CSP on MDN
+  - title: CSP على MDN
     url: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
   - title: Trusted Types
     url: https://web.dev/trusted-types
 ---
 
-Webpack is capable of adding a `nonce` to all scripts that it loads. To activate this feature, set a `__webpack_nonce__` variable and include it in your entry script. A unique hash-based `nonce` will then be generated and provided for each unique page view (this is why `__webpack_nonce__` is specified in the entry file and not in the configuration). Please note that the `__webpack_nonce__` should always be a base64-encoded string.
+يستطيع Webpack إضافة `nonce` إلى جميع السكربتات التي يحمّلها. لتفعيل هذه الميزة، عيّن متغير `__webpack_nonce__` وضمّنه في سكربت الإدخال. بعد ذلك سيتم توليد `nonce` فريد مبني على الهاش وتوفيره لكل عرض صفحة فريد (ولهذا السبب يُحدَّد `__webpack_nonce__` في ملف الإدخال وليس في الإعدادات). يرجى ملاحظة أن `__webpack_nonce__` يجب أن يكون دائمًا سلسلة مشفّرة بصيغة base64.
 
-## Examples
+## أمثلة
 
-In the entry file:
+في ملف الإدخال:
 
 ```js
 // ...
@@ -31,17 +28,17 @@ __webpack_nonce__ = "c29tZSBjb29sIHN0cmluZyB3aWxsIHBvcCB1cCAxMjM=";
 // ...
 ```
 
-## Enabling CSP
+## تفعيل CSP
 
-Please note that CSPs are not enabled by default. A corresponding header `Content-Security-Policy` or meta tag `<meta http-equiv="Content-Security-Policy" ...>` needs to be sent with the document to instruct the browser to enable the CSP. Here's an example of what a CSP header including a CDN allow-listed URL might look like:
+يرجى ملاحظة أن CSPs لا تكون مفعّلة افتراضيًا. يجب إرسال الترويسة المقابلة `Content-Security-Policy` أو وسم meta مثل `<meta http-equiv="Content-Security-Policy" ...>` مع المستند لتوجيه المتصفح إلى تفعيل CSP. فيما يلي مثال على شكل ترويسة CSP تتضمن عنوان CDN موجودًا في قائمة السماح:
 
 ```html
 Content-Security-Policy: default-src 'self'; script-src 'self'
 https://trusted.cdn.com;
 ```
 
-For more information on CSP and `nonce` attribute, please refer to **Further Reading** section at the bottom of this page.
+لمزيد من المعلومات حول CSP وخاصية `nonce`، راجع قسم **قراءات إضافية** في أسفل هذه الصفحة.
 
 ## Trusted Types
 
-Webpack is also capable of using Trusted Types to load dynamically constructed scripts, to adhere to CSP [`require-trusted-types-for`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for) directive restrictions. See [`output.trustedTypes`](/configuration/output/#outputtrustedtypes) configuration option.
+يستطيع Webpack أيضًا استخدام Trusted Types لتحميل السكربتات المبنية ديناميكيًا، وذلك للالتزام بقيود توجيه CSP [`require-trusted-types-for`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for). راجع خيار الإعداد [`output.trustedTypes`](/configuration/output/#outputtrustedtypes).
diff --git a/src/content/guides/dependency-management.mdx b/src/content/guides/dependency-management.mdx
index e1c822dbecca..25159fa0b365 100644
--- a/src/content/guides/dependency-management.mdx
+++ b/src/content/guides/dependency-management.mdx
@@ -1,20 +1,15 @@
 ---
-title: Dependency Management
+title: إدارة التبعيات
 sort: 12
 contributors:
-  - ndelangen
-  - chrisVillanueva
-  - sokra
-  - byzyk
-  - AnayaDesign
-  - ThierryRakotomanana
+  - arabpolice
 ---
 
-## Dynamic expressions in import() or require()
+## التعبيرات الديناميكية في import() أو require()
 
-A context is created if your request contains expressions, so the **exact** module is not known on compile time.
+يتم إنشاء سياق (context) إذا كان الطلب يحتوي على تعبيرات، لأن الوحدة **الدقيقة** لا تكون معروفة أثناء وقت التجميع.
 
-Example, given we have the following folder structure including `.ejs` files:
+على سبيل المثال، لنفترض أن لدينا بنية المجلدات التالية التي تتضمن ملفات `.ejs`:
 
 ```text
 example_directory
@@ -25,14 +20,14 @@ example_directory
         └── another.ejs
 ```
 
-When following `import()` or `require()` call is evaluated:
+عند تقييم استدعاء `import()` أو `require()` التالي:
 
 ```js
 import(`./template/${name}.ejs`);
 require(`./template/${name}.ejs`);
 ```
 
-Webpack parses the `import()` or `require()` call and extracts some information:
+يقوم Webpack بتحليل استدعاء `import()` أو `require()` واستخراج بعض المعلومات:
 
 ```text
 Directory: ./template
@@ -41,9 +36,9 @@ Regular expression: /^.*\.ejs$/
 
 **context module**
 
-A context module is generated. It contains references to **all modules in that directory** that can be required with a request matching the regular expression. The context module contains a map which translates requests to module ids.
+يتم إنشاء وحدة سياق (context module). تحتوي هذه الوحدة على مراجع إلى **كل الوحدات داخل ذلك المجلد** التي يمكن طلبها بطلب يطابق التعبير النمطي. تحتوي وحدة السياق على خريطة تحوّل الطلبات إلى معرفات الوحدات.
 
-Example map:
+مثال على الخريطة:
 
 ```json
 {
@@ -53,13 +48,13 @@ Example map:
 }
 ```
 
-The context module also contains some runtime logic to access the map.
+تحتوي وحدة السياق أيضًا على بعض منطق وقت التشغيل للوصول إلى الخريطة.
 
-This means dynamic calls are supported but will cause all matching modules to be included in the bundle.
+هذا يعني أن الاستدعاءات الديناميكية مدعومة، لكنها ستؤدي إلى تضمين كل الوحدات المطابقة داخل الحزمة.
 
 ## import.meta.webpackContext
 
-The ESM equivalent of `require.context` is `import.meta.webpackContext`.
+المكافئ في ESM لـ `require.context` هو `import.meta.webpackContext`.
 
 ```js
 import.meta.webpackContext(directory, {
@@ -69,18 +64,17 @@ import.meta.webpackContext(directory, {
 });
 ```
 
-W> The arguments passed to `import.meta.webpackContext` must be literals!
+W> يجب أن تكون الوسائط الممررة إلى `import.meta.webpackContext` قيمًا حرفية!
 
 ## require.context
 
-You can create your own context with the `require.context()` function.
+يمكنك إنشاء سياق خاص بك باستخدام الدالة `require.context()`.
 
-It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched
-too, and a regular expression to match files against.
+تتيح لك تمرير مجلد للبحث فيه، وعلامة تحدد ما إذا كان ينبغي البحث في المجلدات الفرعية أيضًا، وتعبيرًا نمطيًا لمطابقة الملفات.
 
-Webpack parses for `require.context()` in the code while building.
+يبحث Webpack عن `require.context()` داخل الكود أثناء عملية البناء.
 
-The syntax is as follows:
+الصيغة كما يلي:
 
 ```js
 require.context(
@@ -91,30 +85,30 @@ require.context(
 );
 ```
 
-Examples:
+أمثلة:
 
 ```js
 require.context("./test", false, /\.test\.js$/);
-// a context with files from the test directory that can be required with a request ending with `.test.js`.
+// سياق يحتوي على ملفات من مجلد test يمكن طلبها بطلب ينتهي بـ `.test.js`.
 ```
 
 ```js
 require.context("../", true, /\.stories\.js$/);
-// a context with all files in the parent folder and descending folders ending with `.stories.js`.
+// سياق يحتوي على كل الملفات في المجلد الأب والمجلدات المتفرعة عنه التي تنتهي بـ `.stories.js`.
 ```
 
-W> The arguments passed to `require.context` must be literals!
+W> يجب أن تكون الوسائط الممررة إلى `require.context` قيمًا حرفية!
 
-### context module API
+### واجهة API الخاصة بوحدة السياق
 
-A context module exports a (require) function that takes one argument: the request.
+تصدّر وحدة السياق دالة (require) تأخذ وسيطًا واحدًا: الطلب.
 
-The exported function has 3 properties: `resolve`, `keys`, `id`.
+تحتوي الدالة المصدّرة على ثلاث خصائص: `resolve` و `keys` و `id`.
 
-- `resolve` is a function and returns the module id of the parsed request.
-- `keys` is a function that returns an array of all possible requests that the context module can handle.
+- `resolve` هي دالة تُرجع معرف الوحدة للطلب الذي تم تحليله.
+- `keys` هي دالة تُرجع مصفوفة بكل الطلبات الممكنة التي تستطيع وحدة السياق التعامل معها.
 
-This can be useful if you want to require all files in a directory or matching a pattern, Example:
+قد يكون هذا مفيدًا إذا أردت طلب كل الملفات داخل مجلد أو كل الملفات المطابقة لنمط معين، مثال:
 
 {/* eslint-disable */}
 
@@ -144,7 +138,7 @@ importAll(
     regExp: /\.js$/,
   }),
 );
-// At build-time cache will be populated with all required modules.
+// أثناء وقت البناء سيتم ملء cache بكل الوحدات المطلوبة.
 ```
 
-- `id` is the module id of the context module. This may be useful for `import.meta.webpackHot.accept` or `module.hot.accept`.
+- `id` هو معرف الوحدة الخاص بوحدة السياق. قد يكون هذا مفيدًا مع `import.meta.webpackHot.accept` أو `module.hot.accept`.
diff --git a/src/content/guides/development-vagrant.mdx b/src/content/guides/development-vagrant.mdx
index fd856081027c..87f73eff7125 100644
--- a/src/content/guides/development-vagrant.mdx
+++ b/src/content/guides/development-vagrant.mdx
@@ -1,19 +1,15 @@
 ---
-title: Development - Vagrant
+title: التطوير - Vagrant
 sort: 11
 contributors:
-  - SpaceK33z
-  - chrisVillanueva
-  - byzyk
-  - wizardofhogwarts
-  - Brennvo
+  - arabpolice
 ---
 
-If you have a more advanced project and use [Vagrant](https://www.vagrantup.com/) to run your development environment in a Virtual Machine, you'll often want to also run webpack in the VM.
+إذا كان لديك مشروع أكثر تقدمًا وتستخدم [Vagrant](https://www.vagrantup.com/) لتشغيل بيئة التطوير داخل آلة افتراضية، فغالبًا ستحتاج أيضًا إلى تشغيل webpack داخل الآلة الافتراضية.
 
-## Configuring the Project
+## إعداد المشروع
 
-To start, make sure that the `Vagrantfile` has a static IP;
+للبدء، تأكد من أن ملف `Vagrantfile` يحتوي على عنوان IP ثابت:
 
 ```ruby
 Vagrant.configure("2") do |config|
@@ -21,13 +17,13 @@ Vagrant.configure("2") do |config|
 end
 ```
 
-Next, install `webpack`, `webpack-cli`, `@webpack-cli/serve`, and `webpack-dev-server` in your project;
+بعد ذلك، ثبّت `webpack` و`webpack-cli` و`@webpack-cli/serve` و`webpack-dev-server` في مشروعك:
 
 ```bash
 npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-server
 ```
 
-Make sure to have a `webpack.config.js` file. If you haven't already, use this as a minimal example to get started:
+تأكد من وجود ملف `webpack.config.js`. إذا لم يكن لديك واحد بعد، فاستخدم هذا المثال المصغّر للبدء:
 
 ```js
 import path from "node:path";
@@ -42,7 +38,7 @@ export default {
 };
 ```
 
-And create an `index.html` file. The script tag should point to your bundle. If `output.filename` is not specified in the config, this will be `bundle.js`.
+ثم أنشئ ملف `index.html`. يجب أن يشير وسم script إلى الحزمة الخاصة بك. إذا لم يتم تحديد `output.filename` في الإعدادات، فسيكون ذلك `bundle.js`.
 
 ```html
 <!DOCTYPE html>
@@ -56,30 +52,30 @@ And create an `index.html` file. The script tag should point to your bundle. If
 </html>
 ```
 
-Note that you also need to create an `app.js` file.
+لاحظ أنك تحتاج أيضًا إلى إنشاء ملف `app.js`.
 
-## Running the Server
+## تشغيل الخادم
 
-Now, let's run the server:
+الآن، دعنا نشغّل الخادم:
 
 ```bash
 webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll
 ```
 
-By default, the server will only be accessible from localhost. We'll be accessing it from our host PC, so we need to change `--host` to allow this.
+افتراضيًا، لن يكون الخادم متاحًا إلا من localhost. سنصل إليه من جهاز المضيف، لذلك نحتاج إلى تغيير `--host` للسماح بذلك.
 
-`webpack-dev-server` will include a script in your bundle that connects to a WebSocket to reload when a change in any of your files occurs.
-The `--client-web-socket-url` flag makes sure the script knows where to look for the WebSocket. The server will use port `8080` by default, so we should also specify that here.
+سيضمّن `webpack-dev-server` سكربتًا داخل حزمتك يتصل بـ WebSocket لإعادة التحميل عند حدوث تغيير في أي من ملفاتك.
+يضمن الخيار `--client-web-socket-url` أن يعرف السكربت أين يبحث عن WebSocket. سيستخدم الخادم المنفذ `8080` افتراضيًا، لذلك ينبغي أن نحدده هنا أيضًا.
 
-`--watch-options-poll` makes sure that webpack can detect changes in your files. By default, webpack listens to events triggered by the filesystem, but VirtualBox has many problems with this.
+يضمن `--watch-options-poll` أن webpack يستطيع اكتشاف التغييرات في ملفاتك. افتراضيًا، يستمع webpack إلى الأحداث التي يطلقها نظام الملفات، لكن VirtualBox لديه مشكلات كثيرة مع ذلك.
 
-The server should be accessible on `http://10.10.10.61:8080` now. If you make a change in `app.js`, it should live reload.
+ينبغي أن يكون الخادم متاحًا الآن على `http://10.10.10.61:8080`. إذا أجريت تغييرًا في `app.js`، فينبغي أن تتم إعادة التحميل مباشرةً.
 
-## Advanced Usage with nginx
+## الاستخدام المتقدم مع nginx
 
-To mimic a more production-like environment, it is also possible to proxy the `webpack-dev-server` with nginx.
+لمحاكاة بيئة أقرب إلى الإنتاج، من الممكن أيضًا تمرير `webpack-dev-server` عبر وكيل nginx.
 
-In your nginx configuration file, add the following:
+أضف ما يلي إلى ملف إعدادات nginx:
 
 ```nginx
 server {
@@ -98,16 +94,16 @@ server {
 }
 ```
 
-The `proxy_set_header` lines are important, because they allow the WebSockets to work correctly.
+أسطر `proxy_set_header` مهمة لأنها تسمح لـ WebSockets بالعمل بشكل صحيح.
 
-The command to start `webpack-dev-server` can then be changed to this:
+بعد ذلك يمكن تغيير أمر تشغيل `webpack-dev-server` إلى الآتي:
 
 ```bash
 webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll
 ```
 
-This makes the server only accessible on `127.0.0.1`, which is fine because nginx takes care of making it available on your host PC.
+هذا يجعل الخادم متاحًا فقط على `127.0.0.1`، وهذا مناسب لأن nginx يتولى إتاحته على جهاز المضيف لديك.
 
-## Conclusion
+## الخاتمة
 
-We made the Vagrant box accessible from a static IP, and then made `webpack-dev-server` publicly accessible so it is reachable from a browser. We then tackled a common problem that VirtualBox doesn't send out filesystem events, causing the server to not reload on file changes.
+جعلنا صندوق Vagrant متاحًا من خلال عنوان IP ثابت، ثم جعلنا `webpack-dev-server` متاحًا علنًا بحيث يمكن الوصول إليه من المتصفح. بعد ذلك عالجنا مشكلة شائعة وهي أن VirtualBox لا يرسل أحداث نظام الملفات، مما يؤدي إلى عدم إعادة تحميل الخادم عند تغيّر الملفات.
diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx
index 5a949c145a29..c847fd18e222 100644
--- a/src/content/guides/development.mdx
+++ b/src/content/guides/development.mdx
@@ -1,32 +1,17 @@
 ---
-title: Development
+title: التطوير
 sort: 4
 contributors:
-  - SpaceK33z
-  - rafde
-  - fvgs
-  - TheDutchCoder
-  - WojciechKo
-  - Calinou
-  - GAumala
-  - EugeneHlushko
-  - byzyk
-  - trivikr
-  - aholzner
-  - chenxsan
-  - maxloh
-  - snitin315
-  - f3ndot
-  - Brennvo
+  - arabpolice
 ---
 
-T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide.
+T> هذا الدليل يُكمل أمثلة الأكواد الموجودة في دليل [إدارة المخرجات](/guides/output-management).
 
-If you've been following the guides, you should have a solid understanding of some of the webpack basics. Before we continue, let's look into setting up a development environment to make our lives a little easier.
+إذا كنت تتابع الأدلة، فمن المفترض أن يكون لديك فهم قوي لبعض أساسيات webpack. قبل أن نكمل، دعنا نلقي نظرة على إعداد بيئة تطوير تجعل حياتنا أسهل قليلًا.
 
-W> The tools in this guide are **only meant for development**, please **avoid** using them in production!
+W> الأدوات الموجودة في هذا الدليل مخصصة **للتطوير فقط**، يرجى **تجنب** استخدامها في بيئة الإنتاج!
 
-Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-development) and `title` to `'Development'`.
+لنبدأ بتعيين [`mode` إلى `'development'`](/configuration/mode/#mode-development) و `title` إلى `'Development'`.
 
 **webpack.config.js**
 
@@ -56,17 +41,17 @@ Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-dev
      clean: true,
    },
  };
-```
+````
 
-## Using source maps
+## استخدام Source Maps
 
-When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files (`a.js`, `b.js`, and `c.js`) into one bundle (`bundle.js`) and one of the source files contains an error, the stack trace will point to `bundle.js`. This isn't always helpful as you probably want to know exactly which source file the error came from.
+عندما يقوم webpack بدمج الكود المصدري الخاص بك، قد يصبح من الصعب تتبع الأخطاء والتحذيرات إلى موقعها الأصلي. على سبيل المثال، إذا قمت بدمج ثلاثة ملفات مصدر (`a.js` و `b.js` و `c.js`) داخل ملف واحد (`bundle.js`) وكان أحد الملفات يحتوي على خطأ، فإن الـ stack trace سيشير إلى `bundle.js`. هذا ليس مفيدًا دائمًا لأنك غالبًا تريد معرفة الملف الأصلي الذي جاء منه الخطأ.
 
-In order to make it easier to track down errors and warnings, JavaScript offers [source maps](http://blog.teamtreehouse.com/introduction-source-maps), which map your compiled code back to your original source code. If an error originates from `b.js`, the source map will tell you exactly that.
+لتسهيل تتبع الأخطاء والتحذيرات، توفر JavaScript ما يسمى بـ [source maps](http://blog.teamtreehouse.com/introduction-source-maps)، والتي تقوم بربط الكود المترجم بالكود الأصلي. إذا كان الخطأ قادمًا من `b.js`، فإن source map ستخبرك بذلك بالضبط.
 
-There are a lot of [different options](/configuration/devtool) available when it comes to source maps. Be sure to check them out so you can configure them to your needs.
+هناك العديد من [الخيارات المختلفة](/configuration/devtool) المتاحة عندما يتعلق الأمر بالـ source maps. تأكد من الاطلاع عليها حتى تتمكن من ضبطها حسب احتياجاتك.
 
-For this guide, let's use the `inline-source-map` option, which is good for illustrative purposes (though not for production):
+في هذا الدليل، سنستخدم خيار `inline-source-map`، وهو مناسب لأغراض الشرح (لكن ليس للإنتاج):
 
 **webpack.config.js**
 
@@ -98,7 +83,7 @@ For this guide, let's use the `inline-source-map` option, which is good for illu
  };
 ```
 
-Now let's make sure we have something to debug, so let's create an error in our `print.js` file:
+الآن دعنا نتأكد أن لدينا شيئًا لنقوم بتصحيحه، لذلك سنقوم بإنشاء خطأ داخل ملف `print.js`:
 
 **src/print.js**
 
@@ -109,7 +94,7 @@ Now let's make sure we have something to debug, so let's create an error in our
  }
 ```
 
-Run an `npm run build`, it should compile to something like this:
+قم بتشغيل `npm run build`، ويجب أن يتم البناء بشيء مشابه لهذا:
 
 ```bash
 ...
@@ -125,34 +110,34 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 706 ms
 ```
 
-Now open the resulting `index.html` file in your browser. Click the button and look in your console where the error is displayed. The error should say something like this:
+الآن افتح ملف `index.html` الناتج داخل المتصفح. اضغط على الزر وانظر إلى الـ console حيث يتم عرض الخطأ. يجب أن يبدو الخطأ كالتالي:
 
 ```bash
 Uncaught ReferenceError: cosnole is not defined
    at HTMLButtonElement.printMe (print.js:2)
 ```
 
-We can see that the error also contains a reference to the file (`print.js`) and line number (2) where the error occurred. This is great because now we know exactly where to look in order to fix the issue.
+يمكننا أن نرى أن الخطأ يحتوي أيضًا على مرجع إلى الملف (`print.js`) ورقم السطر (2) الذي حدث فيه الخطأ. هذا رائع لأننا نعرف الآن بالضبط أين يجب أن ننظر لإصلاح المشكلة.
 
-## Choosing a Development Tool
+## اختيار أداة تطوير
 
-W> Some text editors have a "safe write" function that might interfere with some of the following tools. Read [Adjusting Your Text Editor](#adjusting-your-text-editor) for a solution to these issues.
+W> بعض محررات النصوص تحتوي على خاصية "safe write" والتي قد تتداخل مع بعض الأدوات التالية. اقرأ [ضبط محرر النصوص الخاص بك](#adjusting-your-text-editor) للحصول على حل لهذه المشاكل.
 
-It quickly becomes a hassle to manually run `npm run build` every time you want to compile your code.
+سرعان ما يصبح تشغيل `npm run build` يدويًا في كل مرة تريد فيها ترجمة الكود أمرًا مزعجًا.
 
-There are a couple of different options available in webpack that help you automatically compile your code whenever it changes:
+هناك عدة خيارات متاحة في webpack تساعدك على ترجمة الكود تلقائيًا كلما تم تغييره:
 
-1.  webpack's [Watch Mode](/configuration/watch/#watch)
-2.  [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
-3.  [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)
+1. [Watch Mode](/configuration/watch/#watch) الخاصة بـ webpack
+2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
+3. [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)
 
-In most cases, you probably would want to use `webpack-dev-server`, but let's explore all of the above options.
+في أغلب الحالات، ربما سترغب باستخدام `webpack-dev-server`، لكن دعنا نستعرض جميع الخيارات السابقة.
 
-### Using Watch Mode
+### استخدام Watch Mode
 
-You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually.
+يمكنك توجيه webpack لكي "يراقب" جميع الملفات داخل dependency graph الخاصة بك بحثًا عن التغييرات. إذا تم تعديل أحد هذه الملفات، فسيتم إعادة ترجمة الكود تلقائيًا حتى لا تضطر لتشغيل البناء يدويًا.
 
-Let's add an npm script that will start webpack's Watch Mode:
+دعنا نضيف npm script يقوم بتشغيل Watch Mode الخاصة بـ webpack:
 
 **package.json**
 
@@ -181,10 +166,10 @@ Let's add an npm script that will start webpack's Watch Mode:
  }
 ```
 
-Now run `npm run watch` from the command line and see how webpack compiles your code.
-You can see that it doesn't exit the command line because the script is currently watching your files.
+الآن قم بتشغيل `npm run watch` من سطر الأوامر ولاحظ كيف يقوم webpack بترجمة الكود.
+ستلاحظ أنه لا يغلق سطر الأوامر لأنه يراقب الملفات حاليًا.
 
-Now, while webpack is watching your files, let's remove the error we introduced earlier:
+الآن، بينما webpack يراقب ملفاتك، دعنا نزيل الخطأ الذي أضفناه سابقًا:
 
 **src/print.js**
 
@@ -195,19 +180,19 @@ Now, while webpack is watching your files, let's remove the error we introduced
  }
 ```
 
-Now save your file and check the terminal window. You should see that webpack automatically recompiles the changed module!
+الآن احفظ الملف وتحقق من نافذة الطرفية. يجب أن ترى أن webpack أعاد ترجمة الملف المعدل تلقائيًا!
 
-The only downside is that you have to refresh your browser in order to see the changes. It would be much nicer if that would happen automatically as well, so let's try `webpack-dev-server` which will do exactly that.
+العيب الوحيد هو أنك لا تزال بحاجة إلى تحديث المتصفح يدويًا لرؤية التغييرات. سيكون من الأفضل لو حدث ذلك تلقائيًا أيضًا، لذلك دعنا نجرب `webpack-dev-server` الذي يفعل ذلك بالضبط.
 
-### Using webpack-dev-server
+### استخدام webpack-dev-server
 
-The `webpack-dev-server` provides you with a rudimentary web server and the ability to use live reloading. Let's set it up:
+يوفر لك `webpack-dev-server` خادم ويب بسيط مع إمكانية إعادة التحميل التلقائي (live reloading). دعنا نقوم بإعداده:
 
 ```bash
 npm install --save-dev webpack-dev-server
 ```
 
-Change your configuration file to tell the dev server where to look for files:
+قم بتعديل ملف الإعدادات لإخبار dev server بمكان البحث عن الملفات:
 
 **webpack.config.js**
 
@@ -245,15 +230,15 @@ Change your configuration file to tell the dev server where to look for files:
  };
 ```
 
-This tells `webpack-dev-server` to serve the files from the `dist` directory on `localhost:8080`.
+هذا يخبر `webpack-dev-server` بأن يقوم بتقديم الملفات من مجلد `dist` على `localhost:8080`.
 
-T> The `optimization.runtimeChunk: 'single'` was added because in this example we have more than one entrypoint on a single HTML page. Without this, we could get into trouble described [here](https://bundlers.tooling.report/code-splitting/multi-entry/). Read the [Code Splitting](/guides/code-splitting/) chapter for more details.
+T> تمت إضافة `optimization.runtimeChunk: 'single'` لأنه في هذا المثال لدينا أكثر من entrypoint داخل صفحة HTML واحدة. بدون هذا قد نواجه المشاكل الموضحة [هنا](https://bundlers.tooling.report/code-splitting/multi-entry/). اقرأ فصل [Code Splitting](/guides/code-splitting/) لمزيد من التفاصيل.
 
-T> `webpack-dev-server` serves bundled files from the directory defined in [`output.path`](/configuration/output/#outputpath), i.e., files will be available under `http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]`.
+T> يقوم `webpack-dev-server` بتقديم الملفات المجمعة من المجلد المحدد في [`output.path`](/configuration/output/#outputpath)، أي أن الملفات ستكون متاحة عبر `http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]`.
 
-W> webpack-dev-server doesn't write any output files after compiling. Instead, it keeps bundle files in memory and serves them as if they were real files mounted at the server's root path. If your page expects to find the bundle files on a different path, you can change this with the [`devMiddleware.publicPath`](/configuration/dev-server/#devserverdevmiddleware) option in the dev server's configuration.
+W> لا يقوم webpack-dev-server بكتابة أي ملفات ناتجة بعد الترجمة. بدلًا من ذلك، يحتفظ بالملفات داخل الذاكرة ويقوم بتقديمها كما لو كانت ملفات حقيقية موجودة في المسار الجذري للسيرفر. إذا كانت صفحتك تتوقع وجود ملفات الـ bundle في مسار مختلف، يمكنك تغيير ذلك باستخدام خيار [`devMiddleware.publicPath`](/configuration/dev-server/#devserverdevmiddleware) في إعدادات dev server.
 
-Let's add a script to easily run the dev server as well:
+دعنا نضيف script لتشغيل dev server بسهولة:
 
 **package.json**
 
@@ -284,23 +269,23 @@ Let's add a script to easily run the dev server as well:
  }
 ```
 
-Now we can run `npm start` from the command line and we will see our browser automatically loading up our page. If you now change any of the source files and save them, the web server will automatically reload after the code has been compiled. Give it a try!
+الآن يمكننا تشغيل `npm start` من سطر الأوامر وسنرى أن المتصفح يفتح الصفحة تلقائيًا. إذا قمت الآن بتعديل أي من ملفات المصدر وحفظها، فسيقوم خادم الويب بإعادة التحميل تلقائيًا بعد ترجمة الكود. جرّب ذلك!
 
-The `webpack-dev-server` comes with many configurable options. Head over to the [documentation](/configuration/dev-server) to learn more.
+يحتوي `webpack-dev-server` على العديد من الخيارات القابلة للتخصيص. توجّه إلى [التوثيق](/configuration/dev-server) لمعرفة المزيد.
 
-T> Now that your server is working, you might want to give [Hot Module Replacement](/guides/hot-module-replacement) a try!
+T> الآن بعد أن أصبح السيرفر يعمل، قد ترغب في تجربة [Hot Module Replacement](/guides/hot-module-replacement)!
 
-### Using webpack-dev-middleware
+### استخدام webpack-dev-middleware
 
-`webpack-dev-middleware` is a wrapper that will emit files processed by webpack to a server. This is used in `webpack-dev-server` internally, however it's available as a separate package to allow more custom setups if desired. We'll take a look at an example that combines `webpack-dev-middleware` with an express server.
+`webpack-dev-middleware` هو wrapper يقوم بإرسال الملفات التي يعالجها webpack إلى السيرفر. يتم استخدامه داخليًا داخل `webpack-dev-server`، لكنه متاح أيضًا كحزمة مستقلة للسماح بإعدادات أكثر تخصيصًا عند الحاجة. سنلقي نظرة على مثال يجمع بين `webpack-dev-middleware` وسيرفر express.
 
-Let's install `express` and `webpack-dev-middleware` so we can get started:
+دعنا نثبت `express` و `webpack-dev-middleware` حتى نبدأ:
 
 ```bash
 npm install --save-dev express webpack-dev-middleware
 ```
 
-Now we need to make some adjustments to our webpack configuration file in order to make sure the middleware will function correctly:
+الآن نحتاج إلى إجراء بعض التعديلات على ملف إعدادات webpack لضمان عمل الـ middleware بشكل صحيح:
 
 **webpack.config.js**
 
@@ -336,7 +321,7 @@ Now we need to make some adjustments to our webpack configuration file in order
  };
 ```
 
-The `publicPath` will be used within our server script as well in order to make sure files are served correctly on `http://localhost:3000`. We'll specify the port number later. The next step is setting up our custom `express` server:
+سيتم استخدام `publicPath` داخل ملف السيرفر أيضًا لضمان تقديم الملفات بشكل صحيح على `http://localhost:3000`. سنحدد رقم المنفذ لاحقًا. الخطوة التالية هي إعداد سيرفر `express` المخصص:
 
 **project**
 
@@ -364,21 +349,21 @@ import config from "./webpack.config.js";
 const app = express();
 const compiler = webpack(config);
 
-// Tell express to use the webpack-dev-middleware and use the webpack.config.js
-// configuration file as a base.
+// أخبر express باستخدام webpack-dev-middleware
+// واستخدام ملف webpack.config.js كأساس للإعدادات.
 app.use(
   webpackDevMiddleware(compiler, {
     publicPath: config.output.publicPath,
   }),
 );
 
-// Serve the files on port 3000.
+// تقديم الملفات على المنفذ 3000.
 app.listen(3000, () => {
   console.log("Example app listening on port 3000!\n");
 });
 ```
 
-Now add an npm script to make it a little easier to run the server:
+الآن أضف npm script لتسهيل تشغيل السيرفر:
 
 **package.json**
 
@@ -412,7 +397,7 @@ Now add an npm script to make it a little easier to run the server:
  }
 ```
 
-Now in your terminal run `npm run server`, it should give you an output similar to this:
+الآن داخل الطرفية قم بتشغيل `npm run server`، ويجب أن تحصل على مخرجات مشابهة لهذا:
 
 ```bash
 Example app listening on port 3000!
@@ -434,20 +419,22 @@ Example app listening on port 3000!
 <i> [webpack-dev-middleware] Compiled successfully.
 ```
 
-Now fire up your browser and go to `http://localhost:3000`. You should see your webpack app running and functioning!
+الآن افتح متصفحك وانتقل إلى `http://localhost:3000`. يجب أن ترى تطبيق webpack الخاص بك يعمل بشكل صحيح!
+
+T> إذا كنت ترغب في معرفة المزيد حول كيفية عمل Hot Module Replacement، فنوصيك بقراءة دليل [Hot Module Replacement](/guides/hot-module-replacement/).
 
-T> If you would like to know more about how Hot Module Replacement works, we recommend you read the [Hot Module Replacement](/guides/hot-module-replacement/) guide.
+## ضبط محرر النصوص الخاص بك
 
-## Adjusting Your Text Editor
+عند استخدام الترجمة التلقائية للكود، قد تواجه مشاكل عند حفظ الملفات. بعض المحررات تحتوي على ميزة "safe write" والتي قد تتداخل مع إعادة الترجمة.
 
-When using automatic compilation of your code, you could run into issues when saving your files. Some editors have a "safe write" feature that can potentially interfere with recompilation.
+لتعطيل هذه الميزة في بعض المحررات الشائعة، راجع القائمة التالية:
 
-To disable this feature in some common editors, see the list below:
+* **Sublime Text 3**: أضف `atomic_save: 'false'` إلى تفضيلات المستخدم الخاصة بك.
+* **JetBrains IDEs (مثل WebStorm)**: قم بإلغاء تحديد "Use safe write" من `Preferences > Appearance & Behavior > System Settings`.
+* **Vim**: أضف `:set backupcopy=yes` إلى إعداداتك.
 
-- **Sublime Text 3**: Add `atomic_save: 'false'` to your user preferences.
-- **JetBrains IDEs (e.g. WebStorm)**: Uncheck "Use safe write" in `Preferences > Appearance & Behavior > System Settings`.
-- **Vim**: Add `:set backupcopy=yes` to your settings.
+## الخاتمة
 
-## Conclusion
+الآن بعد أن تعلمت كيفية ترجمة الكود تلقائيًا وتشغيل سيرفر تطوير، يمكنك الانتقال إلى الدليل التالي الذي سيغطي [Code Splitting](/guides/code-splitting/).
 
-Now that you've learned how to automatically compile your code and run a development server, you can check out the next guide, which will cover [Code Splitting](/guides/code-splitting/).
+```
diff --git a/src/content/guides/ecma-script-modules.mdx b/src/content/guides/ecma-script-modules.mdx
index b6bf736111b5..484fae6e2ac4 100644
--- a/src/content/guides/ecma-script-modules.mdx
+++ b/src/content/guides/ecma-script-modules.mdx
@@ -1,22 +1,21 @@
 ---
-title: ECMAScript Modules
+title: وحدات ECMAScript
 sort: 19
 contributors:
-  - sokra
-  - ryzrr
+  - arabpolice
 related:
-  - title: ECMAScript Modules in Node.js
+  - title: وحدات ECMAScript في Node.js
     url: https://nodejs.org/api/esm.html
 ---
 
-ECMAScript Modules (ESM) is a [specification](https://tc39.github.io/ecma262/#sec-modules) for using Modules in the Web.
-It's supported by all modern browsers and the recommended way of writing modular code for the Web.
+وحدات ECMAScript (ESM) هي [مواصفة](https://tc39.github.io/ecma262/#sec-modules) لاستخدام الوحدات على الويب.
+وهي مدعومة في جميع المتصفحات الحديثة، وتُعد الطريقة الموصى بها لكتابة كود وحدي للويب.
 
-Webpack supports processing ECMAScript Modules to optimize them.
+يدعم Webpack معالجة وحدات ECMAScript لتحسينها.
 
-## Exporting
+## التصدير
 
-The `export` keyword allows to expose things from an ESM to other modules:
+تتيح الكلمة المفتاحية `export` كشف عناصر من ESM إلى وحدات أخرى:
 
 {/* eslint-disable */}
 
@@ -24,8 +23,8 @@ The `export` keyword allows to expose things from an ESM to other modules:
 export const CONSTANT = 42;
 
 export let variable = 42;
-// only reading is exposed
-// it's not possible to modify the variable from outside
+// لا يُكشف إلا حق القراءة
+// لا يمكن تعديل المتغير من الخارج
 
 export function fun() {
   console.log("fun");
@@ -43,35 +42,35 @@ export { a, b, other as c };
 export default 1 + 2 + 3 + more();
 ```
 
-## Importing
+## الاستيراد
 
-The `import` keyword allows to get references to things from other modules into an ESM:
+تتيح الكلمة المفتاحية `import` الحصول داخل ESM على مراجع لعناصر من وحدات أخرى:
 
 ```js
-// import "bindings" to exports from another module
-// these bindings are live. The values are not copied,
-// instead accessing "variable" will get the current value
-// in the imported module
+// استيراد "ارتباطات" إلى صادرات من وحدة أخرى
+// هذه الارتباطات حية. لا يتم نسخ القيم،
+// بل إن الوصول إلى "variable" سيجلب القيمة الحالية
+// في الوحدة المستوردة
 import { CONSTANT, variable } from "./module.js";
 
-// shortcut to import the "default" export
+// اختصار لاستيراد الصادر "default"
 import theDefaultValue from "./module.js";
 
-// import the "namespace object" which contains all exports
+// استيراد "كائن namespace" الذي يحتوي على كل الصادرات
 import * as module from "./module.js";
 
 module.fun();
 ```
 
-When importing a namespace object from an ECMAScript Module, webpack follows the ESM convention of setting `Symbol.toStringTag` to "Module" on the namespace object.
+عند استيراد كائن namespace من وحدة ECMAScript، يتبع webpack عرف ESM بتعيين `Symbol.toStringTag` إلى "Module" على كائن namespace.
 
-## Flagging modules as ESM
+## تمييز الوحدات كـ ESM
 
-By default webpack will automatically detect whether a file is an ESM or a different module system.
+افتراضيًا، يكتشف webpack تلقائيًا ما إذا كان الملف ESM أم نظام وحدات مختلفًا.
 
-Node.js established a way of explicitly setting the module type of files by using a property in the `package.json`.
-Setting `"type": "module"` in a package.json does force all files below this package.json to be ECMAScript Modules.
-Setting `"type": "commonjs"` will instead force them to be CommonJS Modules.
+أرست Node.js طريقة لتعيين نوع وحدة الملفات صراحةً باستخدام خاصية في `package.json`.
+تعيين `"type": "module"` في package.json يفرض أن تكون جميع الملفات الموجودة أسفل ملف package.json هذا وحدات ECMAScript.
+أما تعيين `"type": "commonjs"` فيفرض أن تكون CommonJS Modules بدلًا من ذلك.
 
 ```json
 {
@@ -79,78 +78,77 @@ Setting `"type": "commonjs"` will instead force them to be CommonJS Modules.
 }
 ```
 
-In addition to that, files can set the module type by using `.mjs` or `.cjs` extension. `.mjs` will force them to be ESM, `.cjs` force them to be CommonJs.
+بالإضافة إلى ذلك، يمكن للملفات تعيين نوع الوحدة باستخدام الامتداد `.mjs` أو `.cjs`. الامتداد `.mjs` يفرض أن تكون ESM، بينما يفرض `.cjs` أن تكون CommonJs.
 
-In DataURIs using the `text/javascript` or `application/javascript` mime type will also force module type to ESM.
+في DataURIs، يؤدي استخدام نوع MIME `text/javascript` أو `application/javascript` أيضًا إلى فرض نوع الوحدة على ESM.
 
-In addition to the module format, flagging modules as ESM also affect the resolving logic, interop logic and the available symbols in modules.
+إلى جانب صيغة الوحدة، يؤثر تمييز الوحدات كـ ESM أيضًا في منطق الحل، ومنطق التوافق البيني، والرموز المتاحة داخل الوحدات.
 
-## import.meta in ESM
+## import.meta في ESM
 
-Webpack exposes several `import.meta` properties for use in ESM:
+يكشف Webpack عدة خصائص من `import.meta` لاستخدامها في ESM:
 
-| Property                     | Description                                                                                    |
-| ---------------------------- | ---------------------------------------------------------------------------------------------- |
-| `import.meta.url`            | The URL of the current module file - use it for `new Worker()` or `new URL()`                  |
-| `import.meta.webpack`        | The webpack major version number (e.g. `5`)                                                    |
-| `import.meta.webpackHot`     | Equivalent of `module.hot` - use for HMR in ESM                                                |
-| `import.meta.webpackContext` | [ESM equivalent of `require.context`](/guides/dependency-management/#importmetawebpackcontext) |
+| الخاصية                      | الوصف                                                                                     |
+| ---------------------------- | ----------------------------------------------------------------------------------------- |
+| `import.meta.url`            | عنوان URL لملف الوحدة الحالي - استخدمه مع `new Worker()` أو `new URL()`                   |
+| `import.meta.webpack`        | رقم الإصدار الرئيسي من webpack (مثل `5`)                                                  |
+| `import.meta.webpackHot`     | مكافئ `module.hot` - استخدمه لـ HMR داخل ESM                                              |
+| `import.meta.webpackContext` | [مكافئ ESM لـ `require.context`](/guides/dependency-management/#importmetawebpackcontext) |
 
-**Example - using `import.meta.url` for assets:**
+**مثال - استخدام `import.meta.url` للأصول:**
 
 ```js
-// Resolve a sibling file relative to the current module
+// حل ملف شقيق نسبةً إلى الوحدة الحالية
 const iconUrl = new URL("./icon.png", import.meta.url);
 const img = document.createElement("img");
 img.src = iconUrl.href;
 ```
 
-**Example - HMR in ESM:**
+**مثال - HMR داخل ESM:**
 
 ```js
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept("./module.js", () => {
-    // handle update
+    // تعامل مع التحديث
   });
 }
 ```
 
-## Top-Level Await
+## Await على المستوى الأعلى
 
-In ESM, you can use `await` at the top level of a module. Webpack treats the module
-as an async module automatically. Enabled by default since 5.83.0; the `experiments.topLevelAwait` option itself was removed in 5.102.0 (it just works).
+في ESM، يمكنك استخدام `await` على المستوى الأعلى من الوحدة. يتعامل webpack مع الوحدة كوحدة غير متزامنة تلقائيًا. هذه الميزة مفعّلة افتراضيًا منذ 5.83.0؛ أما خيار `experiments.topLevelAwait` نفسه فقد أزيل في 5.102.0 (إذ أصبح يعمل مباشرة).
 
-W> Avoid top-level await in your entry point when targeting the **browser**. It delays the entire module graph evaluation. Prefer `import()` for deferred loading. For Node.js, Electron, or Web Worker targets this restriction does not apply.
+W> تجنب استخدام await على المستوى الأعلى في نقطة الدخول عند استهداف **المتصفح**. فهو يؤخر تقييم كامل مخطط الوحدات. فضّل `import()` للتحميل المؤجل. بالنسبة إلى أهداف Node.js أو Electron أو Web Worker، لا ينطبق هذا القيد.
 
 ```js
-// user.js (async ESM module)
+// user.js (وحدة ESM غير متزامنة)
 const response = await fetch("/api/user");
 
 export const user = await response.json();
 ```
 
 ```js
-// index.js - importing an async module works as expected
+// index.js - يعمل استيراد وحدة غير متزامنة كما هو متوقع
 import { user } from "./user.js";
 
 console.log(user.name);
 ```
 
-## Fully Specified Imports
+## الاستيرادات كاملة التحديد
 
-Imports in ESM are resolved more strictly. Relative requests must include a file extension (e.g. `*.js` or `*.mjs`) following the Node.js convention when the file is flagged as ESM:
+تُحل الاستيرادات في ESM بصرامة أكبر. يجب أن تتضمن الطلبات النسبية امتداد الملف (مثل `*.js` أو `*.mjs`) وفق عرف Node.js عندما يكون الملف مميزًا كـ ESM:
 
 ```js
-// will fail - missing extension
+// سيفشل - الامتداد مفقود
 import { helper as missingExt } from "./utils";
 
-// correct in ESM
+// صحيح في ESM
 import { helper } from "./utils.js";
 ```
 
-T> Requests to packages e.g. `import "lodash"` are still supported.
+T> لا تزال طلبات الحزم مثل `import "lodash"` مدعومة.
 
-To disable this check (useful when migrating a large CJS codebase), you can use [`fullySpecified=false`](/configuration/module/#resolvefullyspecified):
+لتعطيل هذا الفحص، وهو مفيد عند ترحيل قاعدة كود CJS كبيرة، يمكنك استخدام [`fullySpecified=false`](/configuration/module/#resolvefullyspecified):
 
 ```js
 // webpack.config.js
@@ -168,62 +166,53 @@ export default {
 };
 ```
 
-## CommonJS Interop
+## التوافق البيني مع CommonJS
 
-CommonJS syntax is not available in ESM: `require`, `module`, `exports`, `__filename`, `__dirname`.
+صيغة CommonJS غير متاحة داخل ESM: `require` و`module` و`exports` و`__filename` و`__dirname`.
 
-When importing from a CommonJS module inside ESM, only the `default` export
-is available (the entire `module.exports` object):
+عند الاستيراد من وحدة CommonJS داخل ESM، لا يتوفر إلا الصادر `default` (كائن `module.exports` بالكامل):
 
 ```js
 // esm-consumer.js (ESM)
 import cjs from "./cjs-module.js";
-// named imports from CJS don't work
+// الاستيرادات المسماة من CJS لا تعمل
 import { foo } from "./cjs-module.js"; // undefined
 
 // cjs-module.js (CommonJS)
 module.exports = { foo: 1, bar: 2 };
 
-console.log(cjs.foo); // works - cjs is the whole exports object
+console.log(cjs.foo); // يعمل - cjs هو كائن الصادرات بالكامل
 ```
 
-This strict behavior applies when webpack treats the **imported** module as CommonJS.
-If that module itself uses ESM `export` syntax, webpack will auto-detect it as ESM
-and named imports will work normally. This commonly affects projects that mix `.js` files
-files in a project that has `"type": "module"` set - webpack may treat some files as
-ESM while third-party packages in `node_modules` remain CommonJS.
+ينطبق هذا السلوك الصارم عندما يتعامل webpack مع الوحدة **المستوردة** على أنها CommonJS.
+إذا كانت تلك الوحدة نفسها تستخدم صيغة `export` الخاصة بـ ESM، فسيكتشفها webpack تلقائيًا كـ ESM وستعمل الاستيرادات المسماة بشكل طبيعي. يحدث هذا كثيرًا في المشاريع التي تمزج ملفات `.js`
+داخل مشروع عُيّن فيه `"type": "module"`؛ فقد يتعامل webpack مع بعض الملفات كـ ESM بينما تبقى حزم الجهات الخارجية داخل `node_modules` على CommonJS.
 
-T> To get named exports from CommonJS modules, consider migrating to ESM
-T> or using [`@babel/plugin-transform-modules-commonjs`](https://babeljs.io/docs/babel-plugin-transform-modules-commonjs).
+T> للحصول على صادرات مسماة من وحدات CommonJS، فكّر في الترحيل إلى ESM
+T> أو استخدام [`@babel/plugin-transform-modules-commonjs`](https://babeljs.io/docs/babel-plugin-transform-modules-commonjs).
 
-## Common Migration Errors
+## أخطاء الترحيل الشائعة
 
 **`ReferenceError: require is not defined`**
 
-When a file is treated as ESM, CommonJS globals (`require`, `module`, `exports`,
-`__filename`, `__dirname`) are unavailable.
+عندما يُعامل ملف كـ ESM، لا تكون عموميات CommonJS (`require` و`module` و`exports` و`__filename` و`__dirname`) متاحة.
 
-_Fix_: Replace `require()` with `import` statements. For conditional or dynamic
-loading, use `import()`.
+_الإصلاح_: استبدل `require()` بتعليمات `import`. وللتحميل الشرطي أو الديناميكي، استخدم `import()`.
 
 ---
 
 **`Must use import to load ES Module`** (Node.js) / **`SyntaxError: Cannot use import
 statement in a module`** (browser)
 
-This happens when a file using ESM `import`/`export` syntax is not flagged as ESM -
-either `"type": "module"` is missing from `package.json`, or the file uses a `.js`
-extension instead of `.mjs`.
+يحدث هذا عندما يستخدم ملف صيغة `import`/`export` الخاصة بـ ESM دون أن يكون مميزًا كـ ESM، إما لأن `"type": "module"` مفقودة من `package.json`، أو لأن الملف يستخدم امتداد `.js` بدلًا من `.mjs`.
 
-_Fix_: Add `"type": "module"` to your `package.json`, or rename the file to `.mjs`.
+_الإصلاح_: أضف `"type": "module"` إلى `package.json`، أو أعد تسمية الملف إلى `.mjs`.
 
 ---
 
 **`Module not found: Error: Can't resolve './utils'` (missing extension)**
 
-In ESM, relative imports must include the file extension. Webpack follows the Node.js
-ESM convention here.
+في ESM، يجب أن تتضمن الاستيرادات النسبية امتداد الملف. يتبع webpack هنا عرف ESM الخاص بـ Node.js.
 
-_Fix_: Change `import { helper } from './utils'` to `import { helper } from './utils.js'`,
-or set [`fullySpecified: false`](/configuration/module/#resolvefullyspecified) in your
-webpack config to disable the check while migrating.
+_الإصلاح_: غيّر `import { helper } from './utils'` إلى `import { helper } from './utils.js'`،
+أو عيّن [`fullySpecified: false`](/configuration/module/#resolvefullyspecified) في إعدادات webpack لتعطيل الفحص أثناء الترحيل.
diff --git a/src/content/guides/entry-advanced.mdx b/src/content/guides/entry-advanced.mdx
index e1923392c905..042873df5ed6 100644
--- a/src/content/guides/entry-advanced.mdx
+++ b/src/content/guides/entry-advanced.mdx
@@ -1,15 +1,15 @@
 ---
-title: Advanced entry
+title: الإدخال المتقدم
 sort: 25
 contributors:
-  - EugeneHlushko
+  - arabpolice
 ---
 
-## Multiple file types per entry
+## أنواع ملفات متعددة لكل إدخال
 
-It is possible to provide different types of files when using an array of values for [entry](/configuration/entry-context/#entry) to achieve separate bundles for CSS and JavaScript (and other) files in applications that are not using `import` for styles in JavaScript (pre Single Page Applications or different reasons).
+من الممكن توفير أنواع مختلفة من الملفات عند استخدام مصفوفة من القيم مع [entry](/configuration/entry-context/#entry)، وذلك لإنشاء حزم منفصلة لملفات CSS وJavaScript (وغيرها) في التطبيقات التي لا تستخدم `import` لاستيراد الأنماط داخل JavaScript (مثل التطبيقات السابقة لنمط Single Page Applications أو لأسباب أخرى).
 
-Let's make an example. We have a PHP application with two page types: home and account. The home page has different layout and non-sharable JavaScript with the rest of the application (account page). We want to output `home.js` and `home.css` from our application files for the home page and `account.js` and `account.css` for account page.
+لنأخذ مثالًا. لدينا تطبيق PHP يحتوي على نوعين من الصفحات: home وaccount. تمتلك صفحة home تخطيطًا مختلفًا وJavaScript غير قابل للمشاركة مع بقية التطبيق (صفحة account). نريد إخراج `home.js` و`home.css` من ملفات التطبيق الخاصة بصفحة home، وكذلك `account.js` و`account.css` لصفحة account.
 
 **home.js**
 
@@ -20,7 +20,7 @@ console.log("home page type");
 **home.scss**
 
 ```scss
-// home page individual styles
+// أنماط منفردة لصفحة home
 ```
 
 **account.js**
@@ -32,10 +32,10 @@ console.log("account page type");
 **account.scss**
 
 ```scss
-// account page individual styles
+// أنماط منفردة لصفحة account
 ```
 
-We will use [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin/) in `production` mode for css as a best practice.
+سنستخدم [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin/) في وضع `production` مع css باعتبار ذلك ممارسة جيدة.
 
 **webpack.config.js**
 
@@ -56,7 +56,7 @@ export default {
       {
         test: /\.scss$/,
         use: [
-          // fallback to style-loader in development
+          // الرجوع إلى style-loader في وضع التطوير
           process.env.NODE_ENV !== "production"
             ? "style-loader"
             : MiniCssExtractPlugin.loader,
@@ -74,7 +74,7 @@ export default {
 };
 ```
 
-Running webpack with above configuration will output into `./dist` as we did not specify different output path. `./dist` directory will now contain four files:
+سيؤدي تشغيل webpack بالإعدادات أعلاه إلى الإخراج داخل `./dist` لأننا لم نحدد مسار إخراج مختلفًا. سيحتوي مجلد `./dist` الآن على أربعة ملفات:
 
 - home.js
 - home.css
diff --git a/src/content/guides/environment-variables.mdx b/src/content/guides/environment-variables.mdx
index 41531a2c942c..7d6f26e6f7e1 100644
--- a/src/content/guides/environment-variables.mdx
+++ b/src/content/guides/environment-variables.mdx
@@ -1,30 +1,23 @@
 ---
-title: Environment Variables
+title: متغيرات البيئة
 sort: 8
 contributors:
-  - simon04
-  - grisanu
-  - tbroadley
-  - legalcodes
-  - byzyk
-  - jceipek
-  - snitin315
-  - Brennvo
+  - arabpolice
 ---
 
-To disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production) you may use environment variables.
+للتمييز داخل `webpack.config.js` بين [التطوير](/guides/development) و[بناءات الإنتاج](/guides/production)، يمكنك استخدام متغيرات البيئة.
 
-T> webpack's environment variables are different from the [environment variables](https://en.wikipedia.org/wiki/Environment_variable) of operating system shells like `bash` and `CMD.exe`
+T> تختلف متغيرات البيئة الخاصة بـ webpack عن [متغيرات البيئة](https://en.wikipedia.org/wiki/Environment_variable) الخاصة بأصداف أنظمة التشغيل مثل `bash` و`CMD.exe`.
 
-The webpack command line [environment option](/api/cli/#environment-options) `--env` allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your `webpack.config.js`. For example, `--env production` or `--env goal=local`.
+يسمح لك [خيار البيئة](/api/cli/#environment-options) في سطر أوامر webpack، وهو `--env`، بتمرير أي عدد تريده من متغيرات البيئة. وستصبح هذه المتغيرات متاحة داخل `webpack.config.js`. على سبيل المثال: `--env production` أو `--env goal=local`.
 
 ```bash
 npx webpack --env goal=local --env production --progress
 ```
 
-T> Setting up your `env` variable without assignment, `--env production` sets `env.production` to `true` by default. There are also other syntaxes that you can use. See the [webpack CLI](/api/cli/#environment-options) documentation for more information.
+T> عند إعداد متغير `env` دون إسناد قيمة، فإن `--env production` يعيّن `env.production` إلى `true` افتراضيًا. توجد أيضًا صيغ أخرى يمكنك استخدامها. راجع توثيق [webpack CLI](/api/cli/#environment-options) لمزيد من المعلومات.
 
-There is one change that you will have to make to your webpack config. Typically, `export default` points to the configuration object. To use the `env` variable, you must make `export default` a function:
+هناك تغيير واحد ستحتاج إلى إجرائه في إعدادات webpack. عادةً يشير `export default` إلى كائن الإعدادات. لاستخدام متغير `env`، يجب أن تجعل `export default` دالة:
 
 **webpack.config.js**
 
@@ -36,7 +29,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export default (env) => {
-  // Use env.<YOUR VARIABLE> here:
+  // استخدم env.<YOUR VARIABLE> هنا:
   console.log("Goal:", env.goal); // 'local'
   console.log("Production:", env.production); // true
 
@@ -50,4 +43,4 @@ export default (env) => {
 };
 ```
 
-T> Webpack CLI offers some [built-in environment variables](/api/cli/#cli-environment-variables) which you can access inside a webpack configuration.
+T> يوفّر Webpack CLI بعض [متغيرات البيئة المدمجة](/api/cli/#cli-environment-variables) التي يمكنك الوصول إليها داخل إعدادات webpack.
diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx
index 62b146ecdb6d..ed843f909ed3 100644
--- a/src/content/guides/getting-started.mdx
+++ b/src/content/guides/getting-started.mdx
@@ -1,62 +1,38 @@
 ---
-title: Getting Started
-description: Learn how to bundle a JavaScript application with webpack 5.
+title: البدء
+description: تعلّم كيفية تجميع تطبيق JavaScript باستخدام webpack 5.
 sort: 1
 contributors:
-  - bebraw
-  - varunjayaraman
-  - cntanglijun
-  - chrisVillanueva
-  - johnstew
-  - simon04
-  - aaronang
-  - TheDutchCoder
-  - sudarsangp
-  - Vanguard90
-  - chenxsan
-  - EugeneHlushko
-  - ATGardner
-  - ayvarot
-  - bjarki
-  - ztomasze
-  - Spiral90210
-  - byzyk
-  - wizardofhogwarts
-  - myshov
-  - anshumanv
-  - d3lm
-  - snitin315
-  - Etheryen
-  - zowiebeha
+  - arabpolice
 ---
 
-Webpack is a good fit when your application needs a customizable build pipeline: bundling JavaScript modules, processing assets, integrating loaders and plugins, and shaping output for different environments. For a very small page with one or two scripts, a bundler may be unnecessary at first; for an application with shared dependencies, npm packages, assets, and production builds, webpack gives you explicit control over how everything is assembled.
+يُعتبر Webpack خيارًا ممتازًا عندما يحتاج تطبيقك إلى مسار بناء (Build Pipeline) قابل للتخصيص: مثل تجميع وحدات JavaScript، ومعالجة الملفات (assets)، ودمج الـ loaders والـ plugins، وتشكيل المخرجات لبيئات مختلفة. بالنسبة لصفحة صغيرة جدًا تحتوي على ملف أو ملفين JavaScript فقط، قد لا تحتاج إلى bundler في البداية؛ ولكن في التطبيقات التي تحتوي على تبعيات مشتركة، وحزم npm، وملفات assets، وبناءات للإنتاج (production builds)، فإن webpack يمنحك تحكمًا واضحًا بكيفية تجميع كل شيء.
 
-Webpack is used to efficiently compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community.
+يُستخدم Webpack لتجميع وحدات JavaScript بكفاءة. بعد [تثبيته](/guides/installation)، يمكنك التعامل معه إما من خلال [واجهة سطر الأوامر CLI](/api/cli) أو من خلال [واجهة API](/api/node). إذا كنت جديدًا على webpack، فننصحك بقراءة [المفاهيم الأساسية](/concepts) و[هذه المقارنة](/comparison) لتفهم لماذا قد تختاره بدلًا من الأدوات الأخرى الموجودة في المجتمع البرمجي.
 
-W> The examples in this guide use `webpack-cli` 7, which requires Node.js 20.9.0 or later.
+W> الأمثلة في هذا الدليل تستخدم `webpack-cli` الإصدار 7، والذي يتطلب Node.js بالإصدار 20.9.0 أو أحدث.
 
 <StackBlitzPreview example="getting-started?terminal=" />
 
-## Quick Start (Minimal Working Example)
+## البداية السريعة (مثال عملي بسيط)
 
-If you want to get a working webpack project up and running quickly, the easiest way is to scaffold one using `create-webpack-app`.
+إذا كنت تريد تشغيل مشروع webpack جاهز بسرعة، فإن أسهل طريقة هي إنشاء مشروع باستخدام `create-webpack-app`.
 
 ```bash
 npx create-webpack-app webpack-demo
 cd webpack-demo
-```
+````
 
-T> Need a CLI-based project setup or templates? See the [Init command](/api/cli/#init) for webpack's scaffolding flow.
+T> هل تحتاج إلى إعداد مشروع أو قوالب عبر CLI؟ اطلع على أمر [Init](/api/cli/#init) الخاص بإنشاء مشاريع webpack.
 
-T> This command generates a ready-to-use webpack project with a sensible default configuration. Continue below if you'd like to understand how to set up webpack manually step by step.
+T> هذا الأمر يُنشئ مشروع webpack جاهزًا للاستخدام مع إعدادات افتراضية مناسبة. تابع القراءة إذا كنت تريد فهم كيفية إعداد webpack يدويًا خطوة بخطوة.
 
-## Basic Setup
+## الإعداد الأساسي
 
-First let's create a directory, initialize npm, [install webpack locally](/guides/installation/#local-installation), and install the [`webpack-cli`](https://github.com/webpack/webpack-cli) (the tool used to run webpack on the command line):
+لنقم أولًا بإنشاء مجلد للمشروع، ثم تهيئة npm، و[تثبيت webpack محليًا](/guides/installation/#local-installation)، بالإضافة إلى تثبيت [`webpack-cli`](https://github.com/webpack/webpack-cli) (الأداة المستخدمة لتشغيل webpack من سطر الأوامر):
 
 ```bash
-# Run the commands for one package manager only.
+# نفّذ الأوامر الخاصة بمدير الحزم الذي تستخدمه فقط.
 
 mkdir webpack-demo
 cd webpack-demo
@@ -74,15 +50,15 @@ pnpm init
 pnpm add webpack webpack-cli -D
 ```
 
-Throughout the Guides we will use **`diff`** blocks to show you what changes we're making to directories, files, and code. For instance:
+خلال الأدلة سنستخدم كتل **`diff`** لتوضيح التغييرات التي نقوم بها على الملفات والمجلدات والكود. على سبيل المثال:
 
 ```diff
-+ this is a new line you shall copy into your code
-- and this is a line to be removed from your code
-  and this is a line not to touch.
++ هذا سطر جديد يجب عليك إضافته إلى الكود
+- وهذا سطر يجب حذفه من الكود
+  وهذا سطر لا يجب تعديله.
 ```
 
-Now we'll create the following directory structure, files and their contents:
+الآن سننشئ بنية المجلدات والملفات التالية:
 
 **project**
 
@@ -126,11 +102,11 @@ document.body.appendChild(component());
 </html>
 ```
 
-We also need to adjust our `package.json` file in order to make sure we mark our package as `private`, as well as removing the `main` entry. This is to prevent an accidental publish of your code.
+نحتاج أيضًا إلى تعديل ملف `package.json` للتأكد من تعيين الحزمة كـ `private`، بالإضافة إلى إزالة خاصية `main`. الهدف من ذلك هو منع نشر الكود بالخطأ.
 
-We also add `"type": "module"` so that Node.js treats `.js` files in this project as ES modules. That setting applies project-wide, including future Node.js scripts and webpack configuration files. If you would rather keep Node's default CommonJS behavior, omit `"type": "module"` and write the configuration later in this guide with `require(...)` and `module.exports` instead of `import` and `export default`.
+سنضيف أيضًا `"type": "module"` حتى يتعامل Node.js مع ملفات `.js` في المشروع على أنها ES Modules. هذا الإعداد يطبَّق على كامل المشروع، بما في ذلك ملفات إعداد webpack والسكريبتات المستقبلية الخاصة بـ Node.js. إذا كنت تفضل الإبقاء على سلوك CommonJS الافتراضي، يمكنك حذف `"type": "module"` واستخدام `require(...)` و `module.exports` بدلًا من `import` و `export default`.
 
-T> If you want to learn more about the inner workings of `package.json`, then we recommend reading the [npm documentation](https://docs.npmjs.com/files/package.json).
+T> إذا أردت معرفة المزيد عن طريقة عمل `package.json`، فنوصي بقراءة [توثيق npm](https://docs.npmjs.com/files/package.json).
 
 **package.json**
 
@@ -155,19 +131,24 @@ T> If you want to learn more about the inner workings of `package.json`, then we
  }
 ```
 
-In this example, there are implicit dependencies between the `<script>` tags. Our `index.js` file depends on `lodash` being included in the page before it runs. This creates an implicit dependency on a global variable (`_`), making script execution order critical and harder to maintain.
+في هذا المثال توجد تبعيات ضمنية بين وسوم `<script>`. ملف `index.js` يعتمد على وجود مكتبة `lodash` داخل الصفحة قبل تشغيله. هذا يُنشئ اعتمادًا ضمنيًا على متغير عام (`_`) مما يجعل ترتيب تنفيذ السكربتات مهمًا وصعب الصيانة.
+
+هناك عدة مشاكل في إدارة مشاريع JavaScript بهذه الطريقة:
+
+* ليس من الواضح مباشرة أن السكربت يعتمد على مكتبة خارجية.
+* إذا كانت إحدى التبعيات مفقودة أو تم تحميلها بترتيب خاطئ، فلن يعمل التطبيق بشكل صحيح.
+* إذا تم تحميل تبعية غير مستخدمة، سيضطر المتصفح إلى تنزيل كود غير ضروري.
 
-There are problems with managing JavaScript projects this way:
+يقوم Webpack بحل هذه المشاكل من خلال التصريح بالتبعيات بشكل واضح وتجميعها معًا. هذا يُزيل الاعتماد على المتغيرات العامة ويضمن تنفيذ السكربتات بالترتيب الصحيح.
 
-- It is not immediately apparent that the script depends on an external library.
-- If a dependency is missing, or included in the wrong order, the application will not function properly.
-- If a dependency is included but not used, the browser will be forced to download unnecessary code.
+## إنشاء Bundle
 
-Webpack solves these issues by explicitly declaring dependencies and bundling them together. This removes reliance on global variables and ensures scripts are executed in the correct order.
+سنقوم أولًا بتعديل بنية المشروع قليلًا، وذلك بفصل كود المصدر (`./src`) عن كود التوزيع (`./dist`).
 
-## Creating a Bundle
+* كود المصدر هو الكود الذي سنكتبه ونعدّله.
+* كود التوزيع هو المخرجات النهائية المصغّرة والمحسّنة الناتجة عن عملية البناء والتي سيتم تحميلها في المتصفح.
 
-First we'll tweak our directory structure slightly, separating the "source" code (`./src`) from our "distribution" code (`./dist`). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimized `output` of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows:
+قم بتعديل بنية المشروع كالتالي:
 
 **project**
 
@@ -182,12 +163,12 @@ First we'll tweak our directory structure slightly, separating the "source" code
        └── index.js
 ```
 
-The `dist` directory is build output, so you usually do not hand-edit files there in a mature project. We are moving `index.html` into `dist` for now only as temporary scaffolding, so the browser has an HTML file that loads the first generated bundle. Later on in [another guide](/guides/output-management/#setting-up-htmlwebpackplugin), we will generate `index.html` rather than edit it manually. Once this is done, it should be safe to empty the `dist` directory and regenerate all the files within it.
+مجلد `dist` يحتوي على مخرجات البناء، لذلك عادةً لا يتم تعديل الملفات بداخله يدويًا في المشاريع الحقيقية. نحن ننقل `index.html` إليه مؤقتًا فقط حتى يتمكن المتصفح من تحميل الـ bundle الأول الذي سيتم إنشاؤه. لاحقًا، في [دليل آخر](/guides/output-management/#setting-up-htmlwebpackplugin)، سنجعل webpack ينشئ ملف `index.html` تلقائيًا بدلًا من تعديله يدويًا.
 
-To bundle the `lodash` dependency with `index.js`, we'll need to install the library locally:
+لكي نقوم بتجميع تبعية `lodash` مع `index.js`، يجب علينا تثبيت المكتبة محليًا:
 
 ```bash
-# Run the command for one package manager only.
+# نفّذ الأمر الخاص بمدير الحزم الذي تستخدمه فقط.
 
 # npm
 npm install lodash
@@ -199,9 +180,9 @@ yarn add lodash
 pnpm add lodash
 ```
 
-T> With npm 5 and later, packages installed with `npm install <package>` are saved to `dependencies` by default. If you're installing a package for development purposes (e.g. a linter, testing libraries, etc.) then you should use `npm install --save-dev`. More information can be found in the [npm documentation](https://docs.npmjs.com/cli/install).
+T> ابتداءً من npm 5، الحزم التي يتم تثبيتها باستخدام `npm install <package>` تُحفظ تلقائيًا داخل `dependencies`. إذا كنت تثبّت حزمة لأغراض التطوير فقط (مثل أدوات lint أو الاختبارات)، استخدم `npm install --save-dev`.
 
-Now, let's import `lodash` in our script:
+الآن لنقم باستيراد `lodash` داخل السكربت:
 
 **src/index.js**
 
@@ -221,7 +202,7 @@ Now, let's import `lodash` in our script:
  document.body.appendChild(component());
 ```
 
-Now, since we'll be bundling our scripts, we have to update our `index.html` file. Let's remove the lodash `<script>`, as we now `import` it, and modify the other `<script>` tag to load the bundle, instead of the raw `./src` file:
+وبما أننا سنقوم الآن بتجميع السكربتات، يجب علينا تحديث ملف `index.html`. سنقوم بحذف وسم `<script>` الخاص بـ lodash لأننا نستوردها الآن باستخدام `import`، ثم سنعدّل الوسم الآخر ليحمّل الـ bundle بدلًا من ملف `./src` مباشرة:
 
 **dist/index.html**
 
@@ -240,14 +221,14 @@ Now, since we'll be bundling our scripts, we have to update our `index.html` fil
  </html>
 ```
 
-T> A couple other script loading strategies exist. Deferred loading is one such alternative to the above, where instead scripts are consolidated into the `<head>` and are given the `defer` attribute. This strategy downloads the external script resource(s) in parallel with document parsing, and will execute the scripts in order of document appearance after parsing has finished. This is in contrast to the above, in which the parser pauses to download and then execute the external resource synchronously. To learn more about this process, MDN has a nice [`reference guide`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#async_and_defer).
+T> توجد استراتيجيات أخرى لتحميل السكربتات، مثل استخدام `defer` داخل `<head>`. هذه الطريقة تقوم بتنزيل السكربتات بالتوازي مع تحليل الصفحة، ثم تنفذها بعد انتهاء التحليل. يمكنك قراءة المزيد من خلال دليل MDN المرجعي.
 
-In this setup, `index.js` explicitly requires `lodash` to be present, and binds it as `_` (no global scope pollution). By stating what dependencies a module needs, webpack can use this information to build a dependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order.
+في هذا الإعداد، يقوم `index.js` بطلب `lodash` بشكل صريح وربطها بالمتغير `_` بدون تلويث الـ global scope. من خلال التصريح بالتبعيات المطلوبة، يستطيع webpack بناء dependency graph ثم استخدامه لإنشاء bundle محسّن يتم تنفيذ السكربتات فيه بالترتيب الصحيح.
 
-With that said, let's run `npx webpack` from the project root. If webpack is installed locally, `npx` will run the local binary from `node_modules/.bin`; otherwise, it may download and execute it. This command takes our script at `src/index.js` as the [entry point](/concepts/entry-points) and generates `dist/main.js` as the [output](/concepts/output).
+الآن لنقم بتشغيل `npx webpack` من داخل مجلد المشروع. إذا كان webpack مثبتًا محليًا، فسيقوم `npx` بتشغيل النسخة الموجودة داخل `node_modules/.bin`.
 
 ```bash
-# Run the command for one package manager only.
+# نفّذ الأمر الخاص بمدير الحزم الذي تستخدمه فقط.
 
 # npm
 npx webpack
@@ -257,35 +238,33 @@ yarn webpack
 
 # pnpm
 pnpm exec webpack
-
-[webpack-cli] Compilation finished
-asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
-runtime modules 1000 bytes 5 modules
-cacheable modules 530 KiB
-  ./src/index.js 257 bytes [built] [code generated]
-  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.x.x compiled successfully in 1851 ms
 ```
 
-T> Your output may vary a bit, but if the build is successful then you are good to go.
+سيأخذ webpack الملف `src/index.js` كنقطة دخول ([entry point](/concepts/entry-points)) ويقوم بإنشاء `dist/main.js` كمخرج ([output](/concepts/output)).
+
+T> قد يختلف الناتج قليلًا لديك، لكن طالما أن البناء نجح فلا توجد مشكلة.
 
-T> Webpack runs in production mode by default when no mode is set, so the output above includes `[minimized]` and the generated `dist/main.js` will be optimized for browsers rather than easy reading. While learning, you can run `npx webpack --mode development`, `yarn webpack --mode development`, or `pnpm exec webpack --mode development` to produce a more readable bundle.
+T> يعمل Webpack افتراضيًا في وضع الإنتاج (production mode) عند عدم تحديد mode، لذلك يتم تحسين الملفات الناتجة للمتصفحات. أثناء التعلم يمكنك استخدام `--mode development` للحصول على bundle أسهل في القراءة.
 
-Open `index.html` from the `dist` directory in your browser and, if everything went right, you should see the following text: `'Hello webpack'`.
+افتح ملف `index.html` الموجود داخل `dist` باستخدام المتصفح، وإذا سار كل شيء بشكل صحيح فسترى النص التالي:
 
-## Modules
+```txt
+Hello webpack
+```
+
+## الوحدات (Modules)
 
-The [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements have been standardized in [ES2015](https://babeljs.io/docs/en/learn/). They are supported in most browsers at this moment, however there are some browsers that don't recognize the new syntax. But don't worry, webpack does support them out of the box.
+تم توحيد أوامر [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) و[`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) ضمن معيار [ES2015](https://babeljs.io/docs/en/learn/). وهي مدعومة حاليًا في أغلب المتصفحات، لكن بعض المتصفحات القديمة لا تتعرف على هذا الأسلوب الجديد. لا تقلق، webpack يدعمه بشكل افتراضي.
 
-Behind the scenes, webpack analyzes your module graph and bundles the modules into code that the browser can load in the right order. It handles module syntax such as `import` and `export`, and supports various other module syntaxes as well. See [Module API](/api/module-methods) for more information.
+خلف الكواليس، يقوم webpack بتحليل dependency graph الخاص بالمشروع وتجميع الوحدات بالترتيب الصحيح. كما يدعم عدة أنظمة للوحدات بالإضافة إلى `import` و `export`.
 
-Note that webpack will not alter any code other than `import` and `export` statements. If you are using other [ES2015 features](http://es6-features.org/), make sure to [use a transpiler](/loaders/#transpiling) such as [Babel](https://babeljs.io/) via webpack's [loader system](/concepts/loaders/).
+لاحظ أن webpack لا يقوم بتحويل أي كود آخر غير أوامر `import` و `export`. إذا كنت تستخدم ميزات أخرى من [ES2015](http://es6-features.org/)، فتأكد من [استخدام transpiler](/loaders/#transpiling) مثل [Babel](https://babeljs.io/) من خلال نظام الـ [loaders](/concepts/loaders/).
 
-## Using a Configuration
+## استخدام ملف إعدادات
 
-As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a [configuration file](/concepts/configuration). This is much more efficient than having to manually type in a lot of commands in the terminal, so let's create one:
+ابتداءً من الإصدار 4، لم يعد webpack يتطلب ملف إعدادات، لكن أغلب المشاريع تحتاج إلى إعدادات أكثر تعقيدًا، ولهذا يدعم webpack وجود [ملف إعدادات](/concepts/configuration).
 
-Webpack configuration files can be written using either CommonJS or ECMAScript modules. The examples below use modern ESM syntax.
+ملفات إعداد webpack يمكن كتابتها باستخدام CommonJS أو ECMAScript Modules. الأمثلة التالية تستخدم صيغة ESM الحديثة.
 
 **project**
 
@@ -321,11 +300,9 @@ export default {
 };
 ```
 
-Now, let's run the build again but instead using our new configuration file:
+الآن دعنا نعيد تشغيل البناء باستخدام ملف الإعدادات الجديد:
 
 ```bash
-# Run the command for one package manager only.
-
 # npm
 npx webpack --config webpack.config.js
 
@@ -334,23 +311,15 @@ yarn webpack --config webpack.config.js
 
 # pnpm
 pnpm exec webpack --config webpack.config.js
-
-[webpack-cli] Compilation finished
-asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
-runtime modules 1000 bytes 5 modules
-cacheable modules 530 KiB
-  ./src/index.js 257 bytes [built] [code generated]
-  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.x.x compiled successfully in 1934 ms
 ```
 
-T> If a `webpack.config.js` is present, the `webpack` command picks it up by default. We use the `--config` option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files.
+T> إذا كان ملف `webpack.config.js` موجودًا، فإن webpack سيستخدمه تلقائيًا. استخدمنا `--config` فقط لتوضيح أنه يمكنك تحديد أي اسم لملف الإعدادات.
 
-A configuration file allows far more flexibility than CLI usage. We can specify loader rules, plugins, resolve options and many other enhancements this way. See the [configuration documentation](/configuration) to learn more.
+يمنحك ملف الإعدادات مرونة أكبر بكثير مقارنة باستخدام CLI فقط، حيث يمكنك تحديد loaders و plugins وخيارات resolve وغير ذلك.
 
-## NPM Scripts
+## سكربتات NPM
 
-Given it's not particularly fun to run a local copy of webpack from the CLI, we can set up a little shortcut. Let's adjust our _package.json_ by adding an [npm script](https://docs.npmjs.com/misc/scripts):
+بدلًا من تشغيل webpack يدويًا في كل مرة، يمكننا إنشاء اختصار داخل `package.json` باستخدام [npm scripts](https://docs.npmjs.com/misc/scripts):
 
 **package.json**
 
@@ -378,37 +347,25 @@ Given it's not particularly fun to run a local copy of webpack from the CLI, we
  }
 ```
 
-Now the `npm run build` command can be used in place of the `npx` command we used earlier. Note that within `scripts` we can reference locally installed npm packages by name the same way we did with `npx`. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts.
-
-Now run the following command and see if your script alias works:
+الآن يمكنك استخدام الأمر:
 
 ```bash
-# Run the command for one package manager only.
-
-# npm
 npm run build
+```
 
-# yarn
-yarn build
+بدلًا من `npx webpack`.
 
-# pnpm
-pnpm run build
-...
-
-[webpack-cli] Compilation finished
-asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
-runtime modules 1000 bytes 5 modules
-cacheable modules 530 KiB
-  ./src/index.js 257 bytes [built] [code generated]
-  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.x.x compiled successfully in 1940 ms
+T> يمكنك تمرير خيارات إضافية إلى webpack باستخدام شرطتين `--` بعد الأمر، مثل:
+
+```bash
+npm run build -- --color
 ```
 
-T> Custom parameters can be passed to webpack by adding two dashes between the `npm run build` command and your parameters, e.g. `npm run build -- --color`.
+## الخاتمة
 
-## Conclusion
+الآن بعد أن أصبح لديك إعداد بناء أساسي، يمكنك الانتقال إلى الدليل التالي [`Asset Management`](/guides/asset-management) لتتعلم كيفية إدارة الصور والخطوط وبقية الملفات باستخدام webpack.
 
-Now that you have a basic build together, you should move on to the next guide [`Asset Management`](/guides/asset-management) to learn how to manage assets like images and fonts with webpack. At this point, your project should look like this:
+يجب أن تبدو بنية مشروعك الآن بالشكل التالي:
 
 **project**
 
@@ -425,6 +382,8 @@ webpack-demo
  └── /node_modules
 ```
 
-W> Do not compile untrusted code with webpack. It could lead to execution of malicious code on your computer, remote servers, or in the web browsers of the end users of your application.
+W> لا تقم بتجميع كود غير موثوق باستخدام webpack، لأن ذلك قد يؤدي إلى تنفيذ كود خبيث على جهازك أو على الخوادم أو حتى داخل متصفحات المستخدمين النهائيين.
 
-If you want to learn more about webpack's design, you can check out the [basic concepts](/concepts) and [configuration](/configuration) pages. Furthermore, the [API](/api) section digs into the various interfaces webpack offers.
+إذا كنت تريد معرفة المزيد عن تصميم webpack، يمكنك قراءة صفحات [المفاهيم الأساسية](/concepts) و[الإعدادات](/configuration)، بالإضافة إلى قسم [API](/api) الذي يشرح الواجهات المختلفة التي يوفرها webpack.
+
+```
diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx
index 0db246e82d23..6cf4839883c3 100644
--- a/src/content/guides/hot-module-replacement.mdx
+++ b/src/content/guides/hot-module-replacement.mdx
@@ -1,48 +1,29 @@
 ---
-title: Hot Module Replacement
+title: الاستبدال الساخن للوحدات
 sort: 15
 contributors:
-  - jmreidy
-  - jhnns
-  - sararubin
-  - rohannair
-  - joshsantos
-  - drpicox
-  - skipjack
-  - sbaidon
-  - gdi2290
-  - bdwain
-  - caryli
-  - xgirma
-  - EugeneHlushko
-  - AnayaDesign
-  - aviyacohen
-  - dhruvdutt
-  - wizardofhogwarts
-  - aholzner
-  - snitin315
-  - Brennvo
+  - arabpolice
 
 related:
-  - title: Concepts - Hot Module Replacement
+  - title: المفاهيم - الاستبدال الساخن للوحدات
     url: /concepts/hot-module-replacement
-  - title: API - Hot Module Replacement
+  - title: API - الاستبدال الساخن للوحدات
     url: /api/hot-module-replacement
 ---
 
-T> This guide extends on code examples found in the [Development](/guides/development) guide.
+T> هذا الدليل يوسّع أمثلة الكود الموجودة في دليل [التطوير](/guides/development).
 
-Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh. This page focuses on **implementation** while the [concepts page](/concepts/hot-module-replacement) gives more details on how it works and why it's useful.
+يُعد الاستبدال الساخن للوحدات (Hot Module Replacement أو HMR) أحد أكثر الميزات فائدة التي يقدمها webpack. فهو يسمح بتحديث جميع أنواع الوحدات أثناء وقت التشغيل دون الحاجة إلى تحديث كامل للصفحة. تركز هذه الصفحة على **التنفيذ**، بينما تقدم [صفحة المفاهيم](/concepts/hot-module-replacement) تفاصيل أكثر حول طريقة عمله وسبب فائدته.
 
-W> **HMR** is not intended for use in production, meaning it should only be used in development. See the [building for production guide](/guides/production) for more information.
+W> **HMR** غير مخصص للاستخدام في الإنتاج، أي يجب استخدامه في التطوير فقط. راجع [دليل البناء للإنتاج](/guides/production) لمزيد من المعلومات.
 
-## Enabling HMR
+## تفعيل HMR
 
-This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built-in HMR plugin. We'll also remove the entry point for `print.js` as it will now be consumed by the `index.js` module.
+هذه الميزة رائعة للإنتاجية. كل ما نحتاج إليه هو تحديث إعدادات [webpack-dev-server](https://github.com/webpack/webpack-dev-server)، واستخدام ملحق HMR المدمج في webpack. سنزيل أيضًا نقطة الإدخال الخاصة بـ `print.js` لأنها ستُستهلك الآن من خلال وحدة `index.js`.
 
-Since `webpack-dev-server` v4.0.0, Hot Module Replacement is enabled by default.
+ابتداءً من `webpack-dev-server` v4.0.0، يكون Hot Module Replacement مفعّلًا افتراضيًا.
 
-T> If you took the route of using `webpack-dev-middleware` instead of `webpack-dev-server`, please use the [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) package to enable HMR on your custom server or application.
+T> إذا اخترت استخدام `webpack-dev-middleware` بدلًا من `webpack-dev-server`، فاستخدم حزمة [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) لتفعيل HMR على الخادم أو التطبيق المخصص لديك.
 
 **webpack.config.js**
 
@@ -77,7 +58,7 @@ T> If you took the route of using `webpack-dev-middleware` instead of `webpack-d
   };
 ```
 
-you can also provide manual entry points for HMR:
+يمكنك أيضًا توفير نقاط إدخال يدوية لـ HMR:
 
 **webpack.config.js**
 
@@ -94,15 +75,15 @@ you can also provide manual entry points for HMR:
     entry: {
        app: './src/index.js',
 -      print: './src/print.js',
-+      // Runtime code for hot module replacement
++      // كود وقت التشغيل للاستبدال الساخن للوحدات
 +      hot: 'webpack/hot/dev-server.js',
-+      // Dev server client for web socket transport, hot and live reload logic
++      // عميل خادم التطوير لنقل web socket ومنطق hot و live reload
 +      client: 'webpack-dev-server/client/index.js?hot=true&live-reload=true',
     },
     devtool: 'inline-source-map',
     devServer: {
       static: './dist',
-+     // Dev server client for web socket transport, hot and live reload logic
++     // عميل خادم التطوير لنقل web socket ومنطق hot و live reload
 +     hot: false,
 +     client: false,
     },
@@ -110,7 +91,7 @@ you can also provide manual entry points for HMR:
       new HtmlWebpackPlugin({
         title: 'Hot Module Replacement',
       }),
-+     // Plugin for hot module replacement
++     // ملحق الاستبدال الساخن للوحدات
 +     new webpack.HotModuleReplacementPlugin(),
     ],
     output: {
@@ -121,9 +102,9 @@ you can also provide manual entry points for HMR:
   };
 ```
 
-T> You can use the CLI to modify the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration with the following command: `webpack serve --hot-only`.
+T> يمكنك استخدام CLI لتعديل إعدادات [webpack-dev-server](https://github.com/webpack/webpack-dev-server) بالأمر التالي: `webpack serve --hot-only`.
 
-Now let's update the `index.js` file so that when a change inside `print.js` is detected we tell webpack to accept the updated module.
+الآن دعنا نحدّث ملف `index.js` بحيث عندما يتم اكتشاف تغيير داخل `print.js` نخبر webpack بقبول الوحدة المحدّثة.
 
 **index.js**
 
@@ -155,7 +136,7 @@ Now let's update the `index.js` file so that when a change inside `print.js` is
 + }
 ```
 
-Start changing the `console.log` statement in `print.js`, and you should see the following output in the browser console (don't worry about that `button.onclick = printMe` output for now, we will also update that part later).
+ابدأ بتغيير تعليمة `console.log` في `print.js`، ويجب أن ترى الناتج التالي في وحدة تحكم المتصفح (لا تقلق الآن بشأن ناتج `button.onclick = printMe`، فسنحدّث هذا الجزء لاحقًا أيضًا).
 
 **print.js**
 
@@ -175,18 +156,18 @@ main.js:4395 [WDS] Hot Module Replacement enabled.
 + main.js:4395 [WDS] App hot update...
 + main.js:4330 [HMR] Checking for updates on the server...
 + main.js:10024 Accepting the updated printMe module!
-+ 0.4b8ee77….hot-update.js:10 Updating print.js...
++ 0.4b8ee77….hot-update.js:10 Updating print.js...
 + main.js:4330 [HMR] Updated modules:
 + main.js:4330 [HMR]  - 20
 ```
 
-## Via the Node.js API
+## عبر واجهة Node.js API
 
-When using Webpack Dev Server with the Node.js API, don't put the dev server options on the webpack configuration object. Instead, pass them as a second parameter upon creation. For example:
+عند استخدام Webpack Dev Server مع واجهة Node.js API، لا تضع خيارات خادم التطوير على كائن إعدادات webpack. بدلًا من ذلك، مررها كمعامل ثانٍ عند الإنشاء. على سبيل المثال:
 
 `new WebpackDevServer(options, compiler)`
 
-To enable HMR, you also need to modify your webpack configuration object to include the HMR entry points. Here's a small example of how that might look:
+لتفعيل HMR، تحتاج أيضًا إلى تعديل كائن إعدادات webpack ليتضمن نقاط إدخال HMR. إليك مثالًا صغيرًا على الشكل المحتمل لذلك:
 
 **dev-server.js**
 
@@ -203,16 +184,16 @@ const __dirname = path.dirname(__filename);
 const config = {
   mode: "development",
   entry: [
-    // Runtime code for hot module replacement
+    // كود وقت التشغيل للاستبدال الساخن للوحدات
     "webpack/hot/dev-server.js",
-    // Dev server client for web socket transport, hot and live reload logic
+    // عميل خادم التطوير لنقل web socket ومنطق hot و live reload
     "webpack-dev-server/client/index.js?hot=true&live-reload=true",
-    // Your entry
+    // نقطة الإدخال الخاصة بك
     "./src/index.js",
   ],
   devtool: "inline-source-map",
   plugins: [
-    // Plugin for hot module replacement
+    // ملحق الاستبدال الساخن للوحدات
     new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       title: "Hot Module Replacement",
@@ -226,7 +207,7 @@ const config = {
 };
 const compiler = webpack(config);
 
-// `hot` and `client` options are disabled because we added them manually
+// تم تعطيل خياري `hot` و `client` لأننا أضفناهما يدويًا
 const server = new WebpackDevServer({ hot: false, client: false }, compiler);
 
 try {
@@ -237,17 +218,17 @@ try {
 }
 ```
 
-See the [full documentation of `webpack-dev-server` Node.js API](/api/webpack-dev-server/).
+راجع [التوثيق الكامل لواجهة Node.js API الخاصة بـ `webpack-dev-server`](/api/webpack-dev-server/).
 
-T> If you're [using `webpack-dev-middleware`](/guides/development/#using-webpack-dev-middleware), check out the [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) package to enable HMR on your custom dev server.
+T> إذا كنت [تستخدم `webpack-dev-middleware`](/guides/development/#using-webpack-dev-middleware)، فراجع حزمة [`webpack-hot-middleware`](https://github.com/webpack/webpack-hot-middleware) لتفعيل HMR على خادم التطوير المخصص لديك.
 
-## Gotchas
+## ملاحظات مهمة
 
-Hot Module Replacement can be tricky. To show this, let's go back to our working example. If you go ahead and click the button on the example page, you will realize the console is printing the old `printMe` function.
+قد يكون Hot Module Replacement مربكًا أحيانًا. لتوضيح ذلك، دعنا نعود إلى مثالنا العامل. إذا نقرت الزر في صفحة المثال، ستلاحظ أن وحدة التحكم تطبع دالة `printMe` القديمة.
 
-This is happening because the button's `onclick` event handler is still bound to the original `printMe` function.
+يحدث ذلك لأن معالج حدث `onclick` الخاص بالزر لا يزال مرتبطًا بدالة `printMe` الأصلية.
 
-To make this work with HMR we need to update that binding to the new `printMe` function using `module.hot.accept`:
+لجعل هذا يعمل مع HMR، نحتاج إلى تحديث ذلك الربط إلى دالة `printMe` الجديدة باستخدام `module.hot.accept`:
 
 **index.js**
 
@@ -262,7 +243,7 @@ To make this work with HMR we need to update that binding to the new `printMe` f
     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
     btn.innerHTML = 'Click me and check the console!';
-    btn.onclick = printMe;  // onclick event is bind to the original printMe function
+    btn.onclick = printMe;  // حدث onclick مرتبط بدالة printMe الأصلية
 
     element.appendChild(btn);
 
@@ -270,7 +251,7 @@ To make this work with HMR we need to update that binding to the new `printMe` f
   }
 
 - document.body.appendChild(component());
-+ let element = component(); // Store the element to re-render on print.js changes
++ let element = component(); // خزّن العنصر لإعادة تصييره عند تغييرات print.js
 + document.body.appendChild(element);
 
   if (module.hot) {
@@ -278,25 +259,25 @@ To make this work with HMR we need to update that binding to the new `printMe` f
       console.log('Accepting the updated printMe module!');
 -     printMe();
 +     document.body.removeChild(element);
-+     element = component(); // Re-render the "component" to update the click handler
++     element = component(); // أعد تصيير "component" لتحديث معالج النقر
 +     document.body.appendChild(element);
     })
   }
 ```
 
-This is only one example, but there are many others that can easily trip people up. Luckily, there are a lot of loaders out there (some of which are mentioned below) that will make hot module replacement much easier.
+هذا مثال واحد فقط، لكن توجد حالات أخرى كثيرة يمكن أن توقع المطورين بسهولة. لحسن الحظ، توجد العديد من loaders (بعضها مذكور أدناه) التي تجعل الاستبدال الساخن للوحدات أسهل بكثير.
 
-## HMR with Stylesheets
+## HMR مع ملفات التنسيق
 
-Hot Module Replacement with CSS is actually fairly straightforward with the help of the `style-loader`. This loader uses `module.hot.accept` behind the scenes to patch `<style>` tags when CSS dependencies are updated.
+يُعد Hot Module Replacement مع CSS مباشرًا إلى حد كبير بمساعدة `style-loader`. يستخدم هذا loader `module.hot.accept` خلف الكواليس لتعديل وسوم `<style>` عند تحديث اعتماديات CSS.
 
-First let's install both loaders with the following command:
+أولًا، لنثبّت كلا الـ loaders بالأمر التالي:
 
 ```bash
 npm install --save-dev style-loader css-loader
 ```
 
-Now let's update the configuration file to make use of the loader.
+الآن دعنا نحدّث ملف الإعدادات لاستخدام الـ loader.
 
 **webpack.config.js**
 
@@ -338,20 +319,20 @@ Now let's update the configuration file to make use of the loader.
   };
 ```
 
-Hot loading stylesheets can be done by importing them into a module:
+يمكن تنفيذ التحميل الساخن لملفات التنسيق عبر استيرادها داخل وحدة:
 
 **project**
 
 ```diff
   webpack-demo
-  ├── package.json
-  ├── webpack.config.js
-  ├── /dist
-  │   └── bundle.js
-  └── /src
-      ├── index.js
-      ├── print.js
-+     └── styles.css
+   ├── package.json
+   ├── webpack.config.js
+   ├── /dist
+   │   └── bundle.js
+   └── /src
+       ├── index.js
+       ├── print.js
+ +     └── styles.css
 ```
 
 **styles.css**
@@ -376,7 +357,7 @@ body {
     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
     btn.innerHTML = 'Click me and check the console!';
-    btn.onclick = printMe;  // onclick event is bind to the original printMe function
+    btn.onclick = printMe;  // حدث onclick مرتبط بدالة printMe الأصلية
 
     element.appendChild(btn);
 
@@ -390,14 +371,14 @@ body {
     module.hot.accept('./print.js', function() {
       console.log('Accepting the updated printMe module!');
       document.body.removeChild(element);
-      element = component(); // Re-render the "component" to update the click handler
+      element = component(); // أعد تصيير "component" لتحديث معالج النقر
       document.body.appendChild(element);
     })
   }
 
 ```
 
-Change the style on `body` to `background: red;` and you should immediately see the page's background color change without a full refresh.
+غيّر التنسيق على `body` إلى `background: red;` ويجب أن ترى لون خلفية الصفحة يتغير فورًا دون تحديث كامل.
 
 **styles.css**
 
@@ -408,14 +389,14 @@ Change the style on `body` to `background: red;` and you should immediately see
   }
 ```
 
-## Other Code and Frameworks
+## كود وأطر عمل أخرى
 
-There are many other loaders and examples out in the community to make HMR interact smoothly with a variety of frameworks and libraries...
+توجد العديد من loaders والأمثلة الأخرى في المجتمع لجعل HMR يتفاعل بسلاسة مع أطر عمل ومكتبات متنوعة...
 
-- [React Hot Loader](https://github.com/gaearon/react-hot-loader): Tweak react components in real time.
-- [Vue Loader](https://github.com/vuejs/vue-loader): This loader supports HMR for vue components out of the box.
-- [Elm Hot webpack Loader](https://github.com/klazuka/elm-hot-webpack-loader): Supports HMR for the Elm programming language.
-- [Angular HMR](https://angular.io/cli/serve): No loader necessary! HMR support is built in the Angular CLI, add the `--hmr` flag to you `ng serve` command.
-- [Svelte Loader](https://github.com/sveltejs/svelte-loader): This loader supports HMR for Svelte components out of the box.
+- [React Hot Loader](https://github.com/gaearon/react-hot-loader): تعديل مكونات React في الوقت الحقيقي.
+- [Vue Loader](https://github.com/vuejs/vue-loader): يدعم هذا loader ميزة HMR لمكونات Vue مباشرةً.
+- [Elm Hot webpack Loader](https://github.com/klazuka/elm-hot-webpack-loader): يدعم HMR للغة البرمجة Elm.
+- [Angular HMR](https://angular.io/cli/serve): لا حاجة إلى loader! دعم HMR مدمج في Angular CLI، أضف العلم `--hmr` إلى أمر `ng serve` لديك.
+- [Svelte Loader](https://github.com/sveltejs/svelte-loader): يدعم هذا loader ميزة HMR لمكونات Svelte مباشرةً.
 
-T> If you know of any other loaders or plugins that help with or enhance HMR, please submit a pull request to add them to this list!
+T> إذا كنت تعرف أي loaders أو plugins أخرى تساعد في HMR أو تحسّنه، فيُرجى إرسال pull request لإضافتها إلى هذه القائمة!
diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx
index 58223642df9f..dc5007a06d99 100644
--- a/src/content/guides/index.mdx
+++ b/src/content/guides/index.mdx
@@ -1,14 +1,12 @@
 ---
-title: Guides
+title: الأدلة
 sort: -1
 contributors:
-  - skipjack
-  - EugeneHlushko
-  - benschac
+  - arabpolice
 ---
 
-This section contains guides for understanding and mastering the wide variety of tools and features that webpack offers. The first is a guide that takes you through [getting started](/guides/getting-started/).
+يحتوي هذا القسم على أدلة تساعدك على فهم وإتقان المجموعة الواسعة من الأدوات والميزات التي يوفرها webpack. أول دليل هو دليل يأخذك خطوة بخطوة في [البدء](/guides/getting-started/).
 
-The guides get more advanced as you go on. Most serve as a starting point, and once completed you should feel more comfortable diving into the actual [documentation](/configuration/).
+تصبح الأدلة أكثر تقدمًا كلما تابعت القراءة. معظمها يعمل كنقطة بداية، وبعد إكمالها ستشعر براحة أكبر عند التعمق في [التوثيق](/configuration/) الفعلي.
 
-W> The output shown from running webpack in the guides may differ slightly from the output of newer versions. This is to be expected. As long as the bundles look similar and run correctly, then there shouldn't be any issues. If you do come across an example that seems to be broken by a new version, please [create an issue](https://github.com/webpack/webpack.js.org/issues/new/choose) and we will do our best to resolve the discrepancy.
+W> قد يختلف الناتج المعروض عند تشغيل webpack في هذه الأدلة قليلًا عن الناتج في الإصدارات الأحدث. هذا أمر متوقع. طالما أن الحِزم (bundles) تبدو متشابهة وتعمل بشكل صحيح، فلا ينبغي أن تكون هناك أي مشاكل. إذا صادفت مثالًا يبدو أنه تعطل بسبب إصدار جديد، يرجى [إنشاء مشكلة](https://github.com/webpack/webpack.js.org/issues/new/choose) وسنبذل قصارى جهدنا لمعالجة هذا الاختلاف.
diff --git a/src/content/guides/installation.mdx b/src/content/guides/installation.mdx
index c1658ab85900..9a0d2c9b7fb8 100644
--- a/src/content/guides/installation.mdx
+++ b/src/content/guides/installation.mdx
@@ -1,44 +1,39 @@
 ---
-title: Installation
+title: التثبيت
 sort: 13
 contributors:
-  - pksjce
-  - bebraw
-  - simon04
-  - EugeneHlushko
-  - sibiraj-s
-  - chenxsan
+  - arabpolice
 ---
 
-This guide goes through the various methods used to install webpack.
+يستعرض هذا الدليل الطرق المختلفة المستخدمة لتثبيت webpack.
 
-## Prerequisites
+## المتطلبات المسبقة
 
-Before we begin, make sure you have a fresh version of [Node.js](https://nodejs.org/en/) installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require.
+قبل أن نبدأ، تأكد من تثبيت إصدار حديث من [Node.js](https://nodejs.org/en/). يُعد إصدار الدعم طويل الأمد (LTS) الحالي نقطة بداية مناسبة. قد تواجه مشكلات مختلفة مع الإصدارات الأقدم، لأنها قد تفتقد وظائف يحتاج إليها webpack و/أو الحزم المرتبطة به.
 
-## Local Installation
+## التثبيت المحلي
 
-The latest webpack release is:
+أحدث إصدار من webpack هو:
 
 [![GitHub release](https://img.shields.io/npm/v/webpack.svg?label=webpack&style=flat-square&maxAge=3600)](https://github.com/webpack/webpack/releases)
 
-To install the latest release or a specific version, run one of the following commands:
+لتثبيت أحدث إصدار أو إصدار محدد، نفّذ أحد الأوامر التالية:
 
 ```bash
 npm install --save-dev webpack
-# or specific version
+# أو إصدار محدد
 npm install --save-dev webpack@<version>
 ```
 
-T> Whether to use `--save-dev` or not depends on your use cases. Say you're using webpack only for bundling, then it's suggested that you install it with `--save-dev` option since you're not going to include webpack in your production build. Otherwise you can ignore `--save-dev`.
+T> يعتمد استخدام `--save-dev` من عدمه على حالة الاستخدام لديك. إذا كنت تستخدم webpack للتجميع فقط، فمن المقترح تثبيته باستخدام الخيار `--save-dev` لأنك لن تضمّن webpack داخل بناء الإنتاج. بخلاف ذلك يمكنك تجاهل `--save-dev`.
 
-If you're using webpack v4 or later and want to call `webpack` from the command line, you'll also need to install the [CLI](/api/cli/).
+إذا كنت تستخدم webpack v4 أو أحدث وتريد استدعاء `webpack` من سطر الأوامر، فستحتاج أيضًا إلى تثبيت [CLI](/api/cli/).
 
 ```bash
 npm install --save-dev webpack-cli
 ```
 
-Installing locally is what we recommend for most projects. This makes it easier to upgrade projects individually when breaking changes are introduced. Typically webpack is run via one or more [npm scripts](https://docs.npmjs.com/misc/scripts) which will look for a webpack installation in your local `node_modules` directory:
+التثبيت المحلي هو ما نوصي به لمعظم المشاريع. فهذا يجعل ترقية المشاريع كلٌّ على حدة أسهل عند إدخال تغييرات كاسرة. عادةً يتم تشغيل webpack عبر واحد أو أكثر من [npm scripts](https://docs.npmjs.com/misc/scripts)، وهي ستبحث عن تثبيت webpack داخل مجلد `node_modules` المحلي:
 
 ```json
 "scripts": {
@@ -46,26 +41,26 @@ Installing locally is what we recommend for most projects. This makes it easier
 }
 ```
 
-T> To run the local installation of webpack you can access its binary version as `node_modules/.bin/webpack`. Alternatively, if you are using npm v5.2.0 or greater, you can run `npx webpack` to do it.
+T> لتشغيل التثبيت المحلي من webpack يمكنك الوصول إلى الملف التنفيذي الخاص به عبر `node_modules/.bin/webpack`. وبدلًا من ذلك، إذا كنت تستخدم npm v5.2.0 أو أحدث، يمكنك تنفيذ `npx webpack`.
 
-## Global Installation
+## التثبيت العام
 
-The following NPM installation will make `webpack` available globally:
+سيجعل تثبيت NPM التالي الأمر `webpack` متاحًا على مستوى النظام:
 
 ```bash
 npm install --global webpack
 ```
 
-W> Note that this is **not a recommended practice**. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version.
+W> لاحظ أن هذه **ليست ممارسة موصى بها**. التثبيت العام يقيّدك بإصدار محدد من webpack وقد يفشل في المشاريع التي تستخدم إصدارًا مختلفًا.
 
-## Bleeding Edge
+## الإصدارات الأحدث قيد التطوير
 
-If you are enthusiastic about using the latest that webpack has to offer, you can install beta versions or even directly from the webpack repository using the following commands:
+إذا كنت متحمسًا لاستخدام أحدث ما يقدمه webpack، يمكنك تثبيت الإصدارات التجريبية أو التثبيت مباشرةً من مستودع webpack باستخدام الأوامر التالية:
 
 ```bash
 npm install --save-dev webpack@next
-# or a specific tag/branch
+# أو وسم/فرع محدد
 npm install --save-dev webpack/webpack#<tagname/branchname>
 ```
 
-W> Take caution when installing these bleeding edge releases! They may still contain bugs and therefore should not be used in production.
+W> توخَّ الحذر عند تثبيت هذه الإصدارات الأحدث قيد التطوير! فقد تظل تحتوي على أخطاء، ولذلك لا ينبغي استخدامها في الإنتاج.
diff --git a/src/content/guides/integrations.mdx b/src/content/guides/integrations.mdx
index 4d93e716f47a..8418b40581c2 100644
--- a/src/content/guides/integrations.mdx
+++ b/src/content/guides/integrations.mdx
@@ -1,35 +1,31 @@
 ---
-title: Integrations
+title: التكاملات
 sort: 24
 contributors:
-  - pksjce
-  - bebraw
-  - tashian
-  - skipjack
-  - AnayaDesign
+  - arabpolice
 ---
 
-Let's start by clearing up a common misconception. Webpack is a module bundler like [Browserify](http://browserify.org/) or [Brunch](https://brunch.io/). It is _not a task runner_ like [Make](https://www.gnu.org/software/make/), [Grunt](https://gruntjs.com/), or [Gulp](https://gulpjs.com/). Task runners handle automation of common development tasks such as linting, building, or testing your project. Compared to bundlers, task runners have a higher level focus. You can still benefit from their higher level tooling while leaving the problem of bundling to webpack.
+لنبدأ بتوضيح لبس شائع. Webpack هو مجمّع وحدات مثل [Browserify](http://browserify.org/) أو [Brunch](https://brunch.io/). وهو _ليس مشغّل مهام_ مثل [Make](https://www.gnu.org/software/make/) أو [Grunt](https://gruntjs.com/) أو [Gulp](https://gulpjs.com/). تتولى مشغلات المهام أتمتة مهام التطوير الشائعة مثل فحص الكود، أو بناء المشروع، أو اختباره. وبالمقارنة مع أدوات التجميع، يكون تركيز مشغلات المهام على مستوى أعلى. لا يزال بإمكانك الاستفادة من أدواتها عالية المستوى مع ترك مشكلة التجميع لـ webpack.
 
-Bundlers help you get your JavaScript and stylesheets ready for deployment, transforming them into a format that's suitable for the browser. For example, JavaScript can be [minified](/plugins/minimizer-webpack-plugin/) or [split into chunks](/guides/code-splitting) and [lazy-loaded](/guides/lazy-loading) to improve performance. Bundling is one of the most important challenges in web development, and solving it well can remove a lot of pain from the process.
+تساعدك أدوات التجميع على تجهيز JavaScript وملفات الأنماط للنشر، وذلك بتحويلها إلى صيغة مناسبة للمتصفح. على سبيل المثال، يمكن [تصغير](/plugins/minimizer-webpack-plugin/) JavaScript أو [تقسيمه إلى أجزاء](/guides/code-splitting) و[تحميله كسولًا](/guides/lazy-loading) لتحسين الأداء. يُعد التجميع أحد أهم تحديات تطوير الويب، وحلّه جيدًا يمكن أن يزيل كثيرًا من التعقيد من العملية.
 
-The good news is that, while there is some overlap, task runners and bundlers can play well together if approached in the right way. This guide provides a high-level overview of how webpack can be integrated into some of the more popular task runners.
+الخبر الجيد هو أنه رغم وجود بعض التداخل، يمكن لمشغلات المهام وأدوات التجميع العمل معًا بشكل جيد إذا تم التعامل معها بالطريقة المناسبة. يقدم هذا الدليل نظرة عامة عالية المستوى على كيفية دمج webpack مع بعض مشغلات المهام الأكثر شيوعًا.
 
-## NPM Scripts
+## سكربتات NPM
 
-Often webpack users use npm [`scripts`](https://docs.npmjs.com/misc/scripts) as their task runner. This is a good starting point. Cross-platform support can become a problem, but there are several workarounds for that. Many, if not most users, get by with npm `scripts` and various levels of webpack configuration and tooling.
+غالبًا ما يستخدم مستخدمو webpack [`scripts`](https://docs.npmjs.com/misc/scripts) الخاصة بـ npm كمشغّل مهام. هذه نقطة بداية جيدة. قد يصبح دعم المنصات المختلفة مشكلة، لكن توجد عدة حلول بديلة لذلك. كثير من المستخدمين، إن لم يكن معظمهم، يكتفون بـ npm `scripts` ومستويات مختلفة من إعدادات webpack وأدواته.
 
-So while webpack's core focus is bundling, there are a variety of extensions that can enable you to use it for jobs typical of a task runner. Integrating a separate tool adds complexity, so be sure to weigh the pros and cons before going forward.
+لذلك، ورغم أن تركيز webpack الأساسي هو التجميع، توجد مجموعة متنوعة من الإضافات التي تتيح لك استخدامه في أعمال معتادة لمشغلات المهام. إن دمج أداة منفصلة يضيف تعقيدًا، لذا احرص على موازنة المزايا والعيوب قبل المتابعة.
 
 ## Grunt
 
-For those using Grunt, we recommend the [`grunt-webpack`](https://www.npmjs.com/package/grunt-webpack) package. With `grunt-webpack` you can run webpack or [webpack-dev-server](https://github.com/webpack/webpack-dev-server) as a task, get access to stats within [template tags](https://gruntjs.com/api/grunt.template), split development and production configurations and more. Start by installing `grunt-webpack` as well as `webpack` itself if you haven't already:
+لمن يستخدمون Grunt، نوصي بحزمة [`grunt-webpack`](https://www.npmjs.com/package/grunt-webpack). باستخدام `grunt-webpack` يمكنك تشغيل webpack أو [webpack-dev-server](https://github.com/webpack/webpack-dev-server) كمهمة، والوصول إلى الإحصاءات داخل [وسوم القوالب](https://gruntjs.com/api/grunt.template)، وفصل إعدادات التطوير والإنتاج، وغير ذلك. ابدأ بتثبيت `grunt-webpack` وكذلك `webpack` نفسه إذا لم تكن قد ثبّته بعد:
 
 ```bash
 npm install --save-dev grunt-webpack webpack
 ```
 
-Then register a configuration and load the task:
+ثم سجّل الإعدادات وحمّل المهمة:
 
 **Gruntfile.js**
 
@@ -51,17 +47,17 @@ module.exports = function (grunt) {
 };
 ```
 
-For more information, please visit the [repository](https://github.com/danez/grunt-webpack).
+لمزيد من المعلومات، يُرجى زيارة [المستودع](https://github.com/danez/grunt-webpack).
 
 ## Gulp
 
-Gulp is also a fairly straightforward integration with the help of the [`webpack-stream`](https://github.com/shama/webpack-stream) package (a.k.a. `gulp-webpack`). In this case, it is unnecessary to install `webpack` separately as it is a direct dependency of `webpack-stream`:
+يُعد التكامل مع Gulp مباشرًا نسبيًا أيضًا بمساعدة حزمة [`webpack-stream`](https://github.com/shama/webpack-stream) (المعروفة أيضًا باسم `gulp-webpack`). في هذه الحالة، لا حاجة إلى تثبيت `webpack` بشكل منفصل لأنه تبعية مباشرة لـ `webpack-stream`:
 
 ```bash
 npm install --save-dev webpack-stream
 ```
 
-You can `require('webpack-stream')` instead of `webpack` and optionally pass it an configuration:
+يمكنك استخدام `require('webpack-stream')` بدلًا من `webpack` وتمرير إعدادات إليه اختياريًا:
 
 **gulpfile.js**
 
@@ -74,29 +70,29 @@ gulp.task("default", () =>
     .src("src/entry.js")
     .pipe(
       webpack({
-        // Any configuration options...
+        // أي خيارات إعدادات...
       }),
     )
     .pipe(gulp.dest("dist/")),
 );
 ```
 
-For more information, please visit the [repository](https://github.com/shama/webpack-stream).
+لمزيد من المعلومات، يُرجى زيارة [المستودع](https://github.com/shama/webpack-stream).
 
 ## Mocha
 
-The [`mocha-webpack`](https://github.com/zinserjan/mocha-webpack) utility can be used for a clean integration with Mocha. The repository offers more details on the pros and cons but essentially `mocha-webpack` is a simple wrapper that provides almost the same CLI as Mocha itself and provides various webpack functionality like an improved watch mode and improved path resolution. Here is a small example of how you would install it and use it to run a test suite (found within `./test`):
+يمكن استخدام أداة [`mocha-webpack`](https://github.com/zinserjan/mocha-webpack) لتكامل نظيف مع Mocha. يقدم المستودع تفاصيل أكثر حول المزايا والعيوب، لكن `mocha-webpack` في جوهره غلاف بسيط يوفر تقريبًا واجهة CLI نفسها الخاصة بـ Mocha، مع وظائف متعددة من webpack مثل وضع مراقبة محسّن وحل مسارات أفضل. إليك مثالًا صغيرًا على كيفية تثبيتها واستخدامها لتشغيل مجموعة اختبارات (موجودة داخل `./test`):
 
 ```bash
 npm install --save-dev webpack mocha mocha-webpack
 mocha-webpack 'test/**/*.js'
 ```
 
-For more information, please visit the [repository](https://github.com/zinserjan/mocha-webpack).
+لمزيد من المعلومات، يُرجى زيارة [المستودع](https://github.com/zinserjan/mocha-webpack).
 
 ## Karma
 
-The [`karma-webpack`](https://github.com/webpack-contrib/karma-webpack) package allows you to use webpack to pre-process files in [Karma](https://karma-runner.github.io/1.0/index.html).
+تتيح لك حزمة [`karma-webpack`](https://github.com/webpack-contrib/karma-webpack) استخدام webpack للمعالجة المسبقة للملفات داخل [Karma](https://karma-runner.github.io/1.0/index.html).
 
 ```bash
 npm install --save-dev webpack karma karma-webpack
@@ -117,11 +113,11 @@ export default function (config) {
       "test/**/*_test.js": ["webpack"],
     },
     webpack: {
-      // Any custom webpack configuration...
+      // أي إعدادات webpack مخصصة...
     },
     plugins: ["karma-webpack"],
   });
 }
 ```
 
-For more information, please visit the [repository](https://github.com/webpack-contrib/karma-webpack).
+لمزيد من المعلومات، يُرجى زيارة [المستودع](https://github.com/webpack-contrib/karma-webpack).
diff --git a/src/content/guides/lazy-loading.mdx b/src/content/guides/lazy-loading.mdx
index 015fe67ee24a..835042593c77 100644
--- a/src/content/guides/lazy-loading.mdx
+++ b/src/content/guides/lazy-loading.mdx
@@ -1,32 +1,24 @@
 ---
-title: Lazy Loading
+title: التحميل الكسول
 sort: 18
 contributors:
-  - iammerrick
-  - chrisVillanueva
-  - skipjack
-  - byzyk
-  - EugeneHlushko
-  - AnayaDesign
-  - tapanprakasht
-  - snitin315
-  - ThierryRakotomanana
+  - arabpolice
 related:
-  - title: Lazy Loading ES2015 Modules in the Browser
+  - title: التحميل الكسول لوحدات ES2015 في المتصفح
     url: https://dzone.com/articles/lazy-loading-es2015-modules-in-the-browser
-  - title: Asynchronous vs Deferred JavaScript
+  - title: JavaScript غير المتزامن مقابل المؤجل
     url: https://bitsofco.de/async-vs-defer/
 ---
 
-T> This guide is a small follow-up to [Code Splitting](/guides/code-splitting). If you have not yet read through that guide, please do so now.
+T> هذا الدليل متابعة قصيرة لدليل [تقسيم الكود](/guides/code-splitting). إذا لم تكن قد قرأت ذلك الدليل بعد، فيرجى القيام بذلك الآن.
 
-Lazy, or "on demand", loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code. This speeds up the initial load of the application and lightens its overall weight as some blocks may never even be loaded.
+يُعد التحميل الكسول، أو التحميل «عند الطلب»، طريقة ممتازة لتحسين موقعك أو تطبيقك. تقوم هذه الممارسة أساسًا على تقسيم الكود عند نقاط فصل منطقية، ثم تحميله عندما ينفذ المستخدم إجراءً يتطلب، أو سيتطلب، كتلة جديدة من الكود. يسرّع ذلك التحميل الأولي للتطبيق ويخفف وزنه الإجمالي، لأن بعض الكتل قد لا تُحمّل أصلًا.
 
-## Dynamic Import Example
+## مثال على الاستيراد الديناميكي
 
-Let's take the example from [Code Splitting](/guides/code-splitting/#dynamic-imports) and tweak it a bit to demonstrate this concept even more. The code there does cause a separate chunk, `lodash.bundle.js`, to be generated and technically "lazy-loads" it as soon as the script is run. The trouble is that no user interaction is required to load the bundle – meaning that every time the page is loaded, the request will fire. This doesn't help us too much and will impact performance negatively.
+لنأخذ المثال من [تقسيم الكود](/guides/code-splitting/#dynamic-imports) ونعدّله قليلًا لتوضيح هذا المفهوم بشكل أكبر. الكود هناك يؤدي فعلًا إلى إنشاء جزء مستقل، `lodash.bundle.js`، ويقوم تقنيًا بتحميله كسولًا بمجرد تشغيل السكربت. المشكلة أن تحميل الحزمة لا يتطلب أي تفاعل من المستخدم، أي أن الطلب سيُرسل في كل مرة تُحمّل فيها الصفحة. هذا لا يفيدنا كثيرًا، وسيؤثر سلبًا في الأداء.
 
-Let's try something different. We'll add an interaction to log some text to the console when the user clicks a button. However, we'll wait to load that code (`print.js`) until the interaction occurs for the first time. To do this we'll go back and rework the [final _Dynamic Imports_ example](/guides/code-splitting/#dynamic-imports) from _Code Splitting_ and leave `lodash` in the main chunk.
+لنجرب شيئًا مختلفًا. سنضيف تفاعلًا يطبع بعض النصوص في الكونسول عندما ينقر المستخدم زرًا. لكننا سنؤجل تحميل ذلك الكود (`print.js`) إلى أن يحدث التفاعل لأول مرة. للقيام بذلك، سنعود إلى [المثال النهائي لـ _الاستيراد الديناميكي_](/guides/code-splitting/#dynamic-imports) من دليل _تقسيم الكود_ ونعيد صياغته، مع إبقاء `lodash` داخل الجزء الرئيسي.
 
 **project**
 
@@ -71,8 +63,8 @@ export default () => {
 +   element.appendChild(br);
 +   element.appendChild(button);
 +
-+   // Note that because a network request is involved, some indication
-+   // of loading would need to be shown in a production-level site/app.
++   // لاحظ أنه بسبب وجود طلب شبكة، سيحتاج الموقع/التطبيق
++   // بمستوى إنتاج إلى إظهار مؤشر تحميل ما.
 +   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
 +     const print = module.default;
 +
@@ -88,9 +80,9 @@ export default () => {
 + document.body.appendChild(component());
 ```
 
-W> Note that when using `import()` on ES6 modules you must reference the `.default` property as it's the actual `module` object that will be returned when the promise is resolved.
+W> لاحظ أنه عند استخدام `import()` مع وحدات ES6، يجب الإشارة إلى الخاصية `.default` لأنها كائن `module` الفعلي الذي سيُعاد عند تحقق الوعد.
 
-Now let's run webpack and check out our new lazy-loading functionality:
+الآن لنشغّل webpack ونتحقق من وظيفة التحميل الكسول الجديدة:
 
 ```bash
 ...
@@ -101,21 +93,21 @@ index.bundle.js     548 kB       1  [emitted]  [big]  index
 ...
 ```
 
-## Defer Import Example
+## مثال على الاستيراد المؤجل
 
-W> This feature does not lazily "load" a module, but it lazily "evaluates" a module. This means that the module is still downloaded and parsed, but its evaluation is lazy.
+W> هذه الميزة لا «تحمّل» الوحدة كسولًا، لكنها «تقيّم» الوحدة كسولًا. هذا يعني أن الوحدة لا تزال تُنزّل وتُحلل، لكن تقييمها يكون مؤجلًا.
 
-In some cases, it might be annoying or hard to convert all uses of a module to asynchronous, since it enforces the unnecessary asyncification of all functions, without providing the ability to only defer the synchronous evaluation work.
+في بعض الحالات، قد يكون تحويل كل استخدامات الوحدة إلى أسلوب غير متزامن مزعجًا أو صعبًا، لأنه يفرض تحويلًا غير ضروري لكل الدوال إلى غير متزامنة، من دون توفير إمكانية تأجيل عمل التقييم المتزامن فقط.
 
-The TC39 proposal [Deferring Module Evaluation](https://github.com/tc39/proposal-defer-import-eval) is to solve this problem.
+يهدف مقترح TC39 بعنوان [Deferring Module Evaluation](https://github.com/tc39/proposal-defer-import-eval) إلى حل هذه المشكلة.
 
-> The proposal is to have a new syntactical import form which will only ever return a namespace exotic object. When used, the module and its dependencies would not be executed, but would be fully loaded to the point of being execution-ready before the module graph is considered loaded.
+> يقترح ذلك وجود صيغة استيراد نحوية جديدة لا تُعيد إلا كائن namespace exotic. عند استخدامها، لن تُنفّذ الوحدة ولا تبعياتها، لكنها ستُحمّل بالكامل إلى حد تصبح فيه جاهزة للتنفيذ قبل اعتبار مخطط الوحدات محمّلًا.
 >
-> _Only when accessing a property of this module, would the execution operations be performed (if needed)._
+> _لا تُنفذ عمليات التنفيذ إلا عند الوصول إلى خاصية من هذه الوحدة، إذا لزم ذلك._
 
-This feature is available by enabling [experiments.deferImport](/configuration/experiments/#experimentsdeferimport).
+تتوفر هذه الميزة بتفعيل [experiments.deferImport](/configuration/experiments/#experimentsdeferimport).
 
-W> This feature is still in the experimental stage and may change in future versions of webpack.
+W> لا تزال هذه الميزة في المرحلة التجريبية وقد تتغير في إصدارات webpack المستقبلية.
 
 **project**
 
@@ -161,12 +153,12 @@ export default () => {
 
 -   // Note that because a network request is involved, some indication
 -   // of loading would need to be shown in a production-level site/app.
-+   // In this example, the print module is downloaded but not evaluated,
-+   // so there is no network request involved after the button is clicked.
++   // في هذا المثال، تُنزّل وحدة print لكنها لا تُقيّم،
++   // لذلك لا يوجد طلب شبكة بعد النقر على الزر.
 -   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
 +   button.onclick = e => {
       const print = module.default;
-+     //                  ^ The module is evaluated here.
++     //                  ^ تُقيّم الوحدة هنا.
 
       print();
 -   });
@@ -181,7 +173,7 @@ export default () => {
   document.body.appendChild(component());
 ```
 
-This is similar to the CommonJS style of lazy loading:
+هذا مشابه لأسلوب CommonJS في التحميل الكسول:
 
 **src/index.js**
 
@@ -199,11 +191,11 @@ This is similar to the CommonJS style of lazy loading:
     element.appendChild(br);
     element.appendChild(button);
 
-    // In this example, the print module is downloaded but not evaluated,
-    // so there is no network request involved after the button is clicked.
+    // في هذا المثال، تُنزّل وحدة print لكنها لا تُقيّم،
+    // لذلك لا يوجد طلب شبكة بعد النقر على الزر.
     button.onclick = e => {
 +     const print = require('./print');
-+     //            ^ The module is evaluated here.
++     //            ^ تُقيّم الوحدة هنا.
       const print = module.default;
 -     //                  ^ The module is evaluated here.
 
@@ -219,13 +211,13 @@ This is similar to the CommonJS style of lazy loading:
   document.body.appendChild(component());
 ```
 
-### Using import.defer() with Context Modules
+### استخدام import.defer() مع وحدات السياق
 
 <Badge text="5.105.0+" />
 
-`import.defer()` also works with context modules - the import path can be a dynamic expression. Webpack includes all matching modules in the module graph, but evaluation of the selected module is deferred until a property on the namespace object is first accessed.
+يعمل `import.defer()` أيضًا مع وحدات السياق؛ إذ يمكن أن يكون مسار الاستيراد تعبيرًا ديناميكيًا. يُضمّن webpack كل الوحدات المطابقة في مخطط الوحدات، لكن تقييم الوحدة المحددة يؤجل إلى أن يُوصل أولًا إلى خاصية على كائن namespace.
 
-The following example demonstrates deferred evaluation of locale modules using a dynamic context path:
+يوضح المثال التالي التقييم المؤجل لوحدات اللغة باستخدام مسار سياق ديناميكي:
 
 **src/locales/en.js**
 
@@ -246,17 +238,17 @@ const language = navigator.language.split("-")[0]; // "en", "fr", etc.
 const locale = import.defer("./locales/" + language + ".js");
 
 document.getElementById("btn").addEventListener("click", () => {
-  // The locale module is evaluated here, on first property access.
+  // تُقيّم وحدة اللغة هنا، عند أول وصول إلى خاصية.
   document.getElementById("output").textContent = locale.greeting;
 });
 ```
 
-Webpack prepares all matching locale modules so they are ready for execution, but the selected module is only evaluated when `locale.greeting` is first accessed. This allows you to load multiple locale files without executing them immediately.
+يُحضّر webpack كل وحدات اللغة المطابقة بحيث تكون جاهزة للتنفيذ، لكن الوحدة المحددة لا تُقيّم إلا عند أول وصول إلى `locale.greeting`. يتيح لك ذلك تحميل عدة ملفات لغة من دون تنفيذها مباشرة.
 
-## Frameworks
+## الأطر
 
-Many frameworks and libraries have their own recommendations on how this should be accomplished within their methodologies. Here are a few examples:
+لدى كثير من الأطر والمكتبات توصياتها الخاصة حول كيفية إنجاز ذلك ضمن منهجياتها. فيما يلي بعض الأمثلة:
 
-- React: [Code Splitting and Lazy Loading](https://react.dev/learn/build-a-react-app-from-scratch#code-splitting)
-- Vue: [Dynamic Imports in Vue.js for better performance](https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/)
-- Angular: [Lazy Loading route configuration](https://angular.io/guide/router#milestone-6-asynchronous-routing) and [AngularJS + webpack = lazyLoad](https://medium.com/@var_bin/angularjs-webpack-lazyload-bb7977f390dd)
+- React: [تقسيم الكود والتحميل الكسول](https://react.dev/learn/build-a-react-app-from-scratch#code-splitting)
+- Vue: [الاستيرادات الديناميكية في Vue.js لتحسين الأداء](https://vuedose.tips/tips/dynamic-imports-in-vue-js-for-better-performance/)
+- Angular: [إعداد مسارات التحميل الكسول](https://angular.io/guide/router#milestone-6-asynchronous-routing) و[AngularJS + webpack = lazyLoad](https://medium.com/@var_bin/angularjs-webpack-lazyload-bb7977f390dd)
diff --git a/src/content/guides/modern-web-platform.mdx b/src/content/guides/modern-web-platform.mdx
index ba31c73fab32..8494a8f98bf9 100644
--- a/src/content/guides/modern-web-platform.mdx
+++ b/src/content/guides/modern-web-platform.mdx
@@ -1,24 +1,24 @@
 ---
-title: Modern Web Platform
-description: Web Components, import maps, and PWAs with webpack 5.
+title: منصة الويب الحديثة
+description: مكونات الويب، وخرائط الاستيراد، وتطبيقات PWA باستخدام webpack 5.
 sort: 26
 contributors:
-  - phoekerson
+  - arabpolice
 ---
 
-This guide describes practical webpack patterns for **Web Components**, **Import Maps**, and **Progressive Web Apps** (PWAs) with **Service Workers**. Each section states the problem, shows a minimal configuration you can copy, and notes current limits relative to future webpack improvements.
+يصف هذا الدليل أنماطًا عملية في webpack لكل من **مكونات الويب**، و**خرائط الاستيراد**، و**تطبيقات الويب التقدمية** (PWA) مع **Service Workers**. يوضح كل قسم المشكلة، ويعرض إعدادًا بسيطًا يمكنك نسخه، ثم يذكر الحدود الحالية مقارنة بالتحسينات المستقبلية في webpack.
 
-T> Familiarity with [code splitting](/guides/code-splitting/), [caching](/guides/caching/) (`[contenthash]`), and the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) helps.
+T> تساعدك المعرفة المسبقة بـ [تقسيم الكود](/guides/code-splitting/)، و[التخزين المؤقت](/guides/caching/) (`[contenthash]`)، و[`SplitChunksPlugin`](/plugins/split-chunks-plugin/).
 
-## Web Components with webpack
+## مكونات الويب مع webpack
 
-### Problem
+### المشكلة
 
-If more than one JavaScript bundle executes `customElements.define()` for the same tag name, the browser throws [`DOMException`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException): `Failed to execute 'define' on 'CustomElementRegistry'`. That often happens when the module that registers an element is duplicated: separate entry points or async chunks each contain a copy of the registration code, so two bundles both run `define` for the same tag.
+إذا نفذت أكثر من حزمة JavaScript واحدة `customElements.define()` لاسم الوسم نفسه، فسيطرح المتصفح [`DOMException`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException): `Failed to execute 'define' on 'CustomElementRegistry'`. يحدث ذلك غالبًا عندما تتكرر الوحدة التي تسجل العنصر: فقد تحتوي نقاط إدخال منفصلة أو أجزاء غير متزامنة على نسخة من كود التسجيل، فتشغّل حزمتان `define` للوسم نفسه.
 
-### Approach
+### النهج
 
-Use [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) so the module that defines the element lives in a **single shared chunk** loaded once. Adjust `cacheGroups` so your element definitions (or a dedicated folder such as `src/elements/`) are forced into one chunk. See [Prevent Duplication](/guides/code-splitting/#prevent-duplication) for the general idea.
+استخدم [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) بحيث تعيش الوحدة التي تعرّف العنصر داخل **جزء مشترك واحد** يُحمّل مرة واحدة. عدّل `cacheGroups` بحيث تُفرض تعريفات العناصر لديك، أو مجلد مخصص مثل `src/elements/`، داخل جزء واحد. راجع [منع التكرار](/guides/code-splitting/#prevent-duplication) للفكرة العامة.
 
 **webpack.config.js**
 
@@ -43,7 +43,7 @@ export default {
     splitChunks: {
       chunks: "all",
       cacheGroups: {
-        // Put shared custom element modules in one async chunk.
+        // ضع وحدات العناصر المخصصة المشتركة في جزء غير متزامن واحد.
         customElements: {
           test: /[\\/]src[\\/]elements[\\/]/,
           name: "custom-elements",
@@ -56,21 +56,21 @@ export default {
 };
 ```
 
-Ensure both entries import the same registration module (for example `./elements/my-element.js`) so webpack can emit one `custom-elements.js` chunk instead of inlining duplicate registration in `main` and `admin`.
+تأكد من أن نقطتي الإدخال تستوردان وحدة التسجيل نفسها، مثل `./elements/my-element.js`، حتى يتمكن webpack من إصدار جزء واحد باسم `custom-elements.js` بدلًا من تضمين تسجيل مكرر داخل `main` و`admin`.
 
-### Limitations and future work
+### القيود والعمل المستقبلي
 
-Splitting alone does not change **browser** rules: the tag name must still be registered exactly once per document. Webpack does not yet provide a first-class “register this custom element once” primitive beyond chunk graph control. Native support for deduplicating custom element registration across the build is **planned**; until then, rely on shared chunks and a single registration module.
+لا يغيّر التقسيم وحده قواعد **المتصفح**: يجب أن يُسجل اسم الوسم مرة واحدة بالضبط لكل مستند. لا يوفر webpack حتى الآن بدائية مدمجة من الدرجة الأولى بمعنى «سجّل هذا العنصر المخصص مرة واحدة» خارج التحكم في مخطط الأجزاء. دعم إزالة تكرار تسجيل العناصر المخصصة عبر البناء **مخطط له**؛ وحتى ذلك الحين، اعتمد على الأجزاء المشتركة ووحدة تسجيل واحدة.
 
-## Import Maps with webpack
+## خرائط الاستيراد مع webpack
 
-### Problem
+### المشكلة
 
-[Import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) let the browser resolve **bare specifiers** (`import "lodash-es"` from `importmap.json` or an inline `<script type="importmap">`). If webpack **bundles** those dependencies, you do not need an import map for them. If you want the **browser** to load a dependency from a URL (CDN or `/vendor/`) while your application code keeps bare imports, mark those modules as [`externals`](/configuration/externals/) so webpack emits `import` statements that match your map.
+تتيح [خرائط الاستيراد](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) للمتصفح حل **المحددات العارية** (`import "lodash-es"` من `importmap.json` أو من `<script type="importmap">` مضمن). إذا كان webpack **يجمع** تلك التبعيات، فلن تحتاج إلى خريطة استيراد لها. أما إذا أردت أن يحمّل **المتصفح** تبعية من عنوان URL، مثل CDN أو `/vendor/`، مع إبقاء كود التطبيق على الاستيرادات العارية، فميّز تلك الوحدات كـ [`externals`](/configuration/externals/) حتى يصدر webpack تعليمات `import` تطابق خريطتك.
 
-### Approach
+### النهج
 
-Enable [ES module output](/configuration/output/#outputmodule) (`experiments.outputModule` and `output.module`), set [`externalsType: "module"`](/configuration/externals/#externalstypemodule) for static imports, and list each bare specifier in `externals` with the same string the browser will resolve via the import map.
+فعّل [إخراج وحدات ES](/configuration/output/#outputmodule) عبر `experiments.outputModule` و`output.module`، واضبط [`externalsType: "module"`](/configuration/externals/#externalstypemodule) للاستيرادات الساكنة، ثم أدرج كل محدد عارٍ في `externals` بالسلسلة نفسها التي سيحلها المتصفح عبر خريطة الاستيراد.
 
 **webpack.config.js**
 
@@ -100,9 +100,9 @@ export default {
 };
 ```
 
-**importmap.json** (served alongside your HTML; URLs must match your deployment)
+**importmap.json** (يُقدّم بجانب ملف HTML؛ يجب أن تطابق عناوين URL طريقة النشر لديك)
 
-Local vendor file:
+ملف vendor محلي:
 
 ```json
 {
@@ -112,7 +112,7 @@ Local vendor file:
 }
 ```
 
-CDN (no self-hosting required):
+CDN (لا حاجة إلى الاستضافة الذاتية):
 
 ```json
 {
@@ -122,34 +122,34 @@ CDN (no self-hosting required):
 }
 ```
 
-The key `"lodash-es"` must match both the **`externals` key** and the **specifier** in your source (`import … from "lodash-es"`). The value is the URL the browser loads — either a local path or a CDN URL; webpack does not validate that file.
+يجب أن يطابق المفتاح `"lodash-es"` كلًا من **مفتاح `externals`** و**المحدد** في المصدر لديك (`import … from "lodash-es"`). أما القيمة فهي عنوان URL الذي يحمّله المتصفح، إما مسارًا محليًا أو عنوان CDN؛ ولا يتحقق webpack من ذلك الملف.
 
-**index.html** (order matters: import map before your bundle)
+**index.html** (الترتيب مهم: خريطة الاستيراد قبل الحزمة)
 
 ```html
 <script type="importmap" src="/importmap.json"></script>
 <script type="module" src="/dist/main.mjs"></script>
 ```
 
-W> [`experiments.outputModule`](/configuration/experiments/#experimentsoutputmodule) and [`output.module`](/configuration/output/#outputmodule) are still experimental. Check the latest [webpack release notes](https://github.com/webpack/webpack/releases) before relying on them in production.
+W> لا تزال [`experiments.outputModule`](/configuration/experiments/#experimentsoutputmodule) و[`output.module`](/configuration/output/#outputmodule) تجريبيتين. تحقق من أحدث [ملاحظات إصدارات webpack](https://github.com/webpack/webpack/releases) قبل الاعتماد عليهما في الإنتاج.
 
-### Limitations and future work
+### القيود والعمل المستقبلي
 
-Webpack **does not** emit or update `importmap.json` for you. You must maintain the map so specifiers and URLs stay aligned with `externals` and your server layout. Automatic import-map generation is **not** available in webpack 5 today; future tooling may reduce this manual step.
+لا يصدر webpack ملف `importmap.json` ولا يحدّثه نيابة عنك. يجب أن تحافظ على الخريطة بحيث تبقى المحددات وعناوين URL متوافقة مع `externals` وبنية الخادم لديك. إنشاء خرائط الاستيراد تلقائيًا **غير متاح** في webpack 5 اليوم؛ وقد تقلل الأدوات المستقبلية هذه الخطوة اليدوية.
 
-## Progressive Web Apps (PWA) and Service Workers
+## تطبيقات الويب التقدمية (PWA) وService Workers
 
-### Problem
+### المشكلة
 
-Long-lived caching requires **stable URLs** for HTML but **versioned URLs** for scripts and styles. Using [`[contenthash]`](/guides/caching/) in `output.filename` changes those URLs every build. A **service worker** precache list must list the **exact** URLs after each build, or offline shells will point at missing files.
+يتطلب التخزين المؤقت طويل الأمد **عناوين URL ثابتة** لملفات HTML، لكن **عناوين URL ذات إصدارات** للسكربتات والأنماط. يؤدي استخدام [`[contenthash]`](/guides/caching/) في `output.filename` إلى تغيير تلك العناوين في كل بناء. يجب أن تسرد قائمة التخزين المسبق في **service worker** عناوين URL **الدقيقة** بعد كل بناء، وإلا ستشير واجهات العمل دون اتصال إلى ملفات مفقودة.
 
-The [`workbox-webpack-plugin`](/guides/progressive-web-application/) **`GenerateSW`** plugin generates an entire service worker for you. That is convenient, but when you need **full control** over service worker code (custom routing, `skipWaiting` behavior, or coordination with `[contenthash]` and other plugins), **`InjectManifest`** is appropriate: you write the worker, and Workbox injects the precache manifest at build time from webpack’s asset list.
+ينشئ ملحق [`workbox-webpack-plugin`](/guides/progressive-web-application/) **`GenerateSW`** ملف service worker كاملًا نيابة عنك. هذا ملائم، لكن عندما تحتاج إلى **تحكم كامل** في كود service worker، مثل التوجيه المخصص، أو سلوك `skipWaiting`، أو التنسيق مع `[contenthash]` وملحقات أخرى، يكون **`InjectManifest`** مناسبًا: تكتب العامل بنفسك، ويحقن Workbox بيان التخزين المسبق وقت البناء من قائمة أصول webpack.
 
-### Approach
+### النهج
 
-Use `[contenthash]` for emitted assets and add **`InjectManifest`** from `workbox-webpack-plugin`. Your source template imports `workbox-precaching` and calls `precacheAndRoute(self.__WB_MANIFEST)`; the plugin replaces `self.__WB_MANIFEST` with the list of webpack assets (including hashed filenames).
+استخدم `[contenthash]` للأصول الصادرة، وأضف **`InjectManifest`** من `workbox-webpack-plugin`. يستورد قالب المصدر `workbox-precaching` ويستدعي `precacheAndRoute(self.__WB_MANIFEST)`؛ يستبدل الملحق `self.__WB_MANIFEST` بقائمة أصول webpack، بما في ذلك أسماء الملفات ذات الهاش.
 
-Install:
+التثبيت:
 
 ```bash
 npm install workbox-webpack-plugin workbox-precaching --save-dev
@@ -183,17 +183,17 @@ export default {
 };
 ```
 
-**src/service-worker.js** (precache template)
+**src/service-worker.js** (قالب التخزين المسبق)
 
 ```js
 import { precacheAndRoute } from "workbox-precaching";
 
-// Replaced at build time with webpack's precache manifest (hashed asset URLs).
+// يُستبدل وقت البناء ببيان التخزين المسبق الخاص بـ webpack (عناوين أصول ذات هاش).
 precacheAndRoute(globalThis.__WB_MANIFEST);
 ```
 
-Register the emitted `service-worker.js` from your app (for example in `src/index.js`) with `navigator.serviceWorker.register("/service-worker.js")`, served from `dist/` with the correct scope.
+سجّل ملف `service-worker.js` الصادر من تطبيقك، مثلًا في `src/index.js`، باستخدام `navigator.serviceWorker.register("/service-worker.js")`، مع تقديمه من `dist/` بالنطاق الصحيح.
 
-### Limitations and future work
+### القيود والعمل المستقبلي
 
-You must keep **`InjectManifest`** in sync with your output filenames and plugins; `GenerateSW` remains the simpler path when you do not need a custom worker. Webpack does not ship a built-in service worker precache generator; tighter integration with hashed assets may arrive in future releases. Until then, Workbox’s **`InjectManifest`** is a well-supported way to align `[contenthash]` output with precaching.
+يجب أن تبقي **`InjectManifest`** متزامنًا مع أسماء ملفات الإخراج والملحقات لديك؛ ويظل `GenerateSW` الطريق الأبسط عندما لا تحتاج إلى عامل مخصص. لا يشحن webpack مولّد تخزين مسبق مدمجًا لـ service worker؛ وقد يصل تكامل أوثق مع الأصول ذات الهاش في إصدارات مستقبلية. وحتى ذلك الحين، يُعد **`InjectManifest`** من Workbox طريقة مدعومة جيدًا لمواءمة خرج `[contenthash]` مع التخزين المسبق.
diff --git a/src/content/guides/native-css.mdx b/src/content/guides/native-css.mdx
index 278ef065f7b4..efc8f9b7ffd8 100644
--- a/src/content/guides/native-css.mdx
+++ b/src/content/guides/native-css.mdx
@@ -1,17 +1,17 @@
 ---
-title: Native CSS
+title: CSS الأصلي
 sort: 27
 contributors:
-  - phoekerson
+  - arabpolice
 ---
 
-This guide shows how to use webpack native CSS handling with `experiments.css`.
+يوضح هذا الدليل كيفية استخدام معالجة CSS الأصلية في webpack عبر `experiments.css`.
 
-T> `experiments.css` is still experimental. It is expected to become the default in webpack v6, but behavior can still change while development continues.
+T> ما يزال `experiments.css` تجريبيًا. من المتوقع أن يصبح السلوك الافتراضي في webpack v6، لكن قد يستمر السلوك في التغير أثناء متابعة التطوير.
 
-## Getting Started
+## البدء
 
-Enable native CSS support in your webpack configuration:
+فعّل دعم CSS الأصلي في إعدادات webpack:
 
 **webpack.config.js**
 
@@ -23,11 +23,11 @@ export default {
 };
 ```
 
-With this option enabled, webpack can process CSS without adding `css-loader` and `mini-css-extract-plugin` for the basic flow.
+مع تفعيل هذا الخيار، يستطيع webpack معالجة CSS دون إضافة `css-loader` و `mini-css-extract-plugin` في المسار الأساسي.
 
-## Importing CSS
+## استيراد CSS
 
-After enabling the experiment, import `.css` files directly from JavaScript:
+بعد تفعيل التجربة، استورد ملفات `.css` مباشرة من JavaScript:
 
 **src/index.js**
 
@@ -47,14 +47,14 @@ h1 {
 }
 ```
 
-Webpack will process the CSS and include it in the build output.
+سيعالج Webpack ملف CSS ويضمّنه في مخرجات البناء.
 
 ## CSS Modules
 
-Native CSS support also includes CSS Modules. The recommended approach is:
+يتضمن دعم CSS الأصلي أيضًا CSS Modules. الأسلوب الموصى به هو:
 
-- keep `type: "css/auto"` for mixed CSS handling,
-- use `.module.css` (or `.modules.css`) naming for CSS Modules files.
+- الإبقاء على `type: "css/auto"` لمعالجة CSS المختلطة،
+- استخدام تسمية `.module.css` (أو `.modules.css`) لملفات CSS Modules.
 
 **src/button.module.css**
 
@@ -79,9 +79,9 @@ button.textContent = "Click me";
 document.body.appendChild(button);
 ```
 
-T> CSS Modules class names are exported. By default, named exports are enabled for CSS modules.
+T> يتم تصدير أسماء الأصناف في CSS Modules. افتراضيًا، تكون الصادرات المسمّاة مفعّلة لوحدات CSS.
 
-You can customize CSS Modules behavior using parser and generator options:
+يمكنك تخصيص سلوك CSS Modules باستخدام خيارات parser و generator:
 
 **webpack.config.js**
 
@@ -106,32 +106,32 @@ export default {
 };
 ```
 
-## Production Build
+## بناء الإنتاج
 
-With `experiments.css: true`, webpack provides native CSS extraction and content hashing for CSS assets in production builds.
+مع `experiments.css: true`، يوفر webpack استخراج CSS أصليًا وتجزئة محتوى لملفات CSS في بناءات الإنتاج.
 
-Compared to the classic setup:
+بالمقارنة مع الإعداد الكلاسيكي:
 
-- Traditional approach: `css-loader` + `mini-css-extract-plugin`
-- Native approach: `experiments.css` with built-in extraction behavior
+- الأسلوب التقليدي: `css-loader` + `mini-css-extract-plugin`
+- الأسلوب الأصلي: `experiments.css` مع سلوك استخراج مضمّن
 
-This reduces configuration and keeps the CSS pipeline closer to webpack core features.
+يقلل هذا من حجم الإعدادات ويبقي مسار معالجة CSS أقرب إلى ميزات webpack الأساسية.
 
-## Experimental Status & Known Limitations
+## الحالة التجريبية والقيود المعروفة
 
-`experiments.css` is explicitly experimental, so treat it as opt-in and test carefully before broad rollout.
+يُعد `experiments.css` تجريبيًا صراحةً، لذلك تعامل معه كميزة اختيارية واختبره بعناية قبل تعميمه على نطاق واسع.
 
-Known points to keep in mind:
+نقاط معروفة يجب أخذها في الحسبان:
 
-- APIs and behavior may still evolve before webpack v6 defaults.
-- Some loader-specific options are not part of native CSS behavior (for example, loader-specific filters).
-- If your project relies on advanced loader chains, validate each part before migrating fully.
+- قد تستمر واجهات API والسلوك في التطور قبل أن تصبح افتراضية في webpack v6.
+- بعض الخيارات الخاصة بالـ loaders ليست جزءًا من سلوك CSS الأصلي (مثل المرشحات الخاصة بـ loader معين).
+- إذا كان مشروعك يعتمد على سلاسل loaders متقدمة، فتحقق من كل جزء قبل الانتقال الكامل.
 
-## Migration Guide
+## دليل الترحيل
 
-If you currently use `css-loader`, `mini-css-extract-plugin`, and `style-loader`, migrate in small steps.
+إذا كنت تستخدم حاليًا `css-loader` و `mini-css-extract-plugin` و `style-loader`، فانتقل على خطوات صغيرة.
 
-### 1) Start from a classic setup
+### 1) ابدأ من إعداد كلاسيكي
 
 **webpack.config.js**
 
@@ -151,7 +151,7 @@ export default {
 };
 ```
 
-### 2) Switch to native CSS
+### 2) انتقل إلى CSS الأصلي
 
 **webpack.config.js**
 
@@ -163,9 +163,9 @@ export default {
 };
 ```
 
-### 3) Migrate `css-loader` options first
+### 3) انقل خيارات `css-loader` أولًا
 
-Most CSS Modules-related options should move to native parser/generator config.
+ينبغي نقل معظم الخيارات المرتبطة بـ CSS Modules إلى إعدادات parser/generator الأصلية.
 
 **webpack.config.js**
 
@@ -194,17 +194,17 @@ export default {
 };
 ```
 
-Notes:
+ملاحظات:
 
-- `import` and `url` are native parser switches for CSS handling.
-- `namedExports` controls CSS Modules exports behavior.
-- `exportsConvention` and `localIdentName` provide class export/name shaping.
-- `localIdentName` supports hash placeholders (for example `[hash:base64:6]`); you can tune hashing globally with [`output.hashFunction`](/configuration/output/#outputhashfunction), [`output.hashDigest`](/configuration/output/#outputhashdigest), [`output.hashDigestLength`](/configuration/output/#outputhashdigestlength), and [`output.hashSalt`](/configuration/output/#outputhashsalt).
-- `css-loader` filter-style options are not available as direct equivalents; use webpack mechanisms such as `IgnorePlugin` when needed.
+- `import` و `url` هما مفتاحا parser أصليان لمعالجة CSS.
+- يتحكم `namedExports` في سلوك صادرات CSS Modules.
+- يوفر `exportsConvention` و `localIdentName` تشكيلًا لتصدير الأصناف وأسمائها.
+- يدعم `localIdentName` مواضع hash (مثل `[hash:base64:6]`)؛ يمكنك ضبط التجزئة عالميًا باستخدام [`output.hashFunction`](/configuration/output/#outputhashfunction) و [`output.hashDigest`](/configuration/output/#outputhashdigest) و [`output.hashDigestLength`](/configuration/output/#outputhashdigestlength) و [`output.hashSalt`](/configuration/output/#outputhashsalt).
+- لا تتوفر خيارات `css-loader` الشبيهة بالمرشحات كمكافئات مباشرة؛ استخدم آليات webpack مثل `IgnorePlugin` عند الحاجة.
 
-### 4) Replace `mini-css-extract-plugin`
+### 4) استبدل `mini-css-extract-plugin`
 
-When `experiments.css` is enabled, webpack provides native CSS extraction and content hash handling for CSS output files, so you can drop both `mini-css-extract-plugin` and `css-loader` from this basic setup.
+عند تفعيل `experiments.css`، يوفر webpack استخراج CSS أصليًا ومعالجة hash للمحتوى في ملفات CSS الناتجة، لذلك يمكنك إزالة كل من `mini-css-extract-plugin` و `css-loader` من هذا الإعداد الأساسي.
 
 **webpack.config.js**
 
@@ -219,14 +219,14 @@ When `experiments.css` is enabled, webpack provides native CSS extraction and co
  };
 ```
 
-You can remove:
+يمكنك إزالة:
 
-- the CSS loader chain (including `css-loader`) from `module.rules`,
-- the `new MiniCssExtractPlugin()` plugin instance.
+- سلسلة loaders الخاصة بـ CSS (بما في ذلك `css-loader`) من `module.rules`،
+- نسخة الملحق `new MiniCssExtractPlugin()`.
 
-### 5) Replace `style-loader` with `exportType: "style"`
+### 5) استبدل `style-loader` بـ `exportType: "style"`
 
-If you used `style-loader` for runtime style injection, keep `css/auto` and use module naming (`.module.css` or `.modules.css`), then set `exportType: "style"`:
+إذا كنت تستخدم `style-loader` لحقن الأنماط أثناء وقت التشغيل، فأبقِ `css/auto` واستخدم تسمية الوحدات (`.module.css` أو `.modules.css`)، ثم عيّن `exportType: "style"`:
 
 **webpack.config.js**
 
@@ -249,23 +249,23 @@ export default {
 };
 ```
 
-This mode injects a `<style>` element from the webpack runtime and covers the typical `style-loader` use case.
+يحقن هذا الوضع عنصر `<style>` من وقت تشغيل webpack ويغطي حالة الاستخدام المعتادة لـ `style-loader`.
 
-If you cannot rename files to the CSS Modules naming convention, you can use `type: "css/module"` directly for the relevant rule.
+إذا لم تستطع إعادة تسمية الملفات وفق اصطلاح تسمية CSS Modules، يمكنك استخدام `type: "css/module"` مباشرة للقاعدة المعنية.
 
-### 6) Keep imports unchanged
+### 6) أبقِ الاستيرادات دون تغيير
 
-Your JS imports can stay the same:
+يمكن أن تبقى استيرادات JS كما هي:
 
 ```js
 import "./styles.css";
 import * as styles from "./button.module.css";
 ```
 
-### 7) Validate output in development and production
+### 7) تحقق من المخرجات في التطوير والإنتاج
 
-Check that:
+تحقق مما يلي:
 
-- styles are applied correctly in development,
-- generated CSS files are emitted for production,
-- CSS Modules exports match your existing usage.
+- يتم تطبيق الأنماط بشكل صحيح في التطوير،
+- يتم إصدار ملفات CSS المولّدة للإنتاج،
+- تتطابق صادرات CSS Modules مع استخدامك الحالي.
diff --git a/src/content/guides/output-management.mdx b/src/content/guides/output-management.mdx
index 84b48ff7d73e..2ac29e939020 100644
--- a/src/content/guides/output-management.mdx
+++ b/src/content/guides/output-management.mdx
@@ -1,25 +1,17 @@
 ---
-title: Output Management
+title: إدارة المخرجات (Output Management)
 sort: 3
 contributors:
-  - skipjack
-  - TheDutchCoder
-  - sudarsangp
-  - JGJP
-  - EugeneHlushko
-  - AnayaDesign
-  - chenxsan
-  - snitin315
-  - Brennvo
+  - arabpolice
 ---
 
-T> This guide extends on code examples found in the [`Asset Management`](/guides/asset-management) guide.
+T> يعتمد هذا الدليل على أمثلة الكود الموجودة في دليل [`Asset Management`](/guides/asset-management).
 
-So far we've manually included all our assets in our `index.html` file, but as your application grows and once you start [using hashes in filenames](/guides/caching) and outputting [multiple bundles](/guides/code-splitting), it will be difficult to keep managing your `index.html` file manually. However, a few plugins exist that will make this process much easier to manage.
+حتى الآن كنا نقوم بإضافة جميع الملفات يدويًا داخل ملف `index.html`، لكن مع نمو التطبيق، وعند البدء في [استخدام الـ hashes داخل أسماء الملفات](/guides/caching)، أو إنشاء [عدة bundles](/guides/code-splitting)، ستصبح إدارة ملف `index.html` يدويًا أمرًا صعبًا. لحسن الحظ، توجد بعض الـ plugins التي تجعل هذه العملية أسهل بكثير.
 
-## Preparation
+## التحضير
 
-First, let's adjust our project a little bit:
+لنقم أولًا بتعديل بسيط على المشروع:
 
 **project**
 
@@ -33,9 +25,9 @@ First, let's adjust our project a little bit:
   │   ├── index.js
 + │   ├── print.js
   └── /node_modules
-```
+````
 
-Let's add some logic to our `src/print.js` file:
+لنضف بعض المنطق إلى ملف `src/print.js`:
 
 **src/print.js**
 
@@ -45,7 +37,7 @@ export default function printMe() {
 }
 ```
 
-And use that function in our `src/index.js` file:
+ثم نستخدم هذه الدالة داخل `src/index.js`:
 
 **src/index.js**
 
@@ -59,7 +51,7 @@ And use that function in our `src/index.js` file:
 
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
-+  btn.innerHTML = 'Click me and check the console!';
++  btn.innerHTML = 'اضغط هنا وتحقق من الـ console!';
 +  btn.onclick = printMe;
 +
 +  element.appendChild(btn);
@@ -70,7 +62,7 @@ And use that function in our `src/index.js` file:
  document.body.appendChild(component());
 ```
 
-Let's also update our `dist/index.html` file, in preparation for webpack to split out entries:
+دعنا أيضًا نحدّث ملف `dist/index.html` استعدادًا لأن يقوم webpack بفصل الـ entries:
 
 **dist/index.html**
 
@@ -80,7 +72,7 @@ Let's also update our `dist/index.html` file, in preparation for webpack to spli
    <head>
      <meta charset="utf-8" />
 -    <title>Asset Management</title>
-+    <title>Output Management</title>
++    <title>إدارة المخرجات</title>
 +    <script src="./print.bundle.js"></script>
    </head>
    <body>
@@ -90,7 +82,7 @@ Let's also update our `dist/index.html` file, in preparation for webpack to spli
  </html>
 ```
 
-Now adjust the config. We'll be adding our `src/print.js` as a new entry point (`print`) and we'll change the output as well, so that it will dynamically generate bundle names, based on the entry point names:
+والآن لنعدّل ملف الإعدادات. سنضيف `src/print.js` كنقطة دخول جديدة (`print`) وسنغيّر طريقة إنشاء أسماء الـ bundles بحيث يتم إنشاؤها ديناميكيًا اعتمادًا على أسماء نقاط الدخول:
 
 **webpack.config.js**
 
@@ -115,7 +107,13 @@ Now adjust the config. We'll be adding our `src/print.js` as a new entry point (
  };
 ```
 
-Let's run `npm run build` and see what this generates:
+لنقم الآن بتشغيل:
+
+```bash
+npm run build
+```
+
+وسنحصل على ناتج مشابه لهذا:
 
 ```bash
 ...
@@ -130,18 +128,20 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 1996 ms
 ```
 
-We can see that webpack generates our `print.bundle.js` and `index.bundle.js` files, which we also specified in our `index.html` file. if you open `index.html` in your browser, you can see what happens when you click the button.
+يمكننا أن نرى أن webpack قام بإنشاء الملفين `print.bundle.js` و `index.bundle.js`، وهما الملفان اللذان قمنا بإضافتهما داخل `index.html`.
+
+إذا فتحت `index.html` في المتصفح، يمكنك تجربة الضغط على الزر ورؤية ما يحدث.
 
-But what would happen if we changed the name of one of our entry points, or even added a new one? The generated bundles would be renamed on a build, but our `index.html` file would still reference the old names. Let's fix that with the [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin).
+لكن ماذا سيحدث إذا قمنا بتغيير اسم إحدى نقاط الدخول أو أضفنا نقطة دخول جديدة؟ سيقوم webpack بإعادة تسمية الملفات الناتجة أثناء البناء، لكن `index.html` سيبقى يشير إلى الأسماء القديمة. لحل هذه المشكلة سنستخدم [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin).
 
-T> If you inspected `print.bundle.js`, you might have noticed that it did not contain the `printMe` function. Instead, it contained only an [IIFE](/concepts/why-webpack/#iifes---immediately-invoked-function-expressions) with no observable side effects.<br /><br />
-This is because in our current setup, webpack treats each entry point as a standalone program that runs when the bundle is loaded. Because `print.js` only exports a function and never calls `printMe()`, executing it as its own entry does not require any executable runtime code. Thus, [webpack is able to omit that code as an optimization](/guides/tree-shaking/) since it would have no observable effect.<br /><br />
-In contrast, since `index.js` imports and uses `printMe`, webpack includes that function directly in `index.bundle.js`. Remember that webpack is a module _bundler_, so `index.bundle.js` contains all the code it needs to run rather than unresolved import statements.<br /><br />
-Multiple entry points are used here solely to demonstrate output management and the `HtmlWebpackPlugin`. In a real project, you would typically avoid creating a separate entry point for utility modules like this. If you do have multiple entry points that share dependencies, see [Prevent Duplication](/guides/code-splitting/#prevent-duplication) in the Code Splitting guide.
+T> إذا قمت بفحص `print.bundle.js`، ربما لاحظت أنه لا يحتوي على الدالة `printMe` نفسها، بل يحتوي فقط على [IIFE](/concepts/why-webpack/#iifes---immediately-invoked-function-expressions) بدون أي تأثير ظاهر.<br /><br />
+وذلك لأن webpack في الإعداد الحالي يتعامل مع كل entry point على أنها برنامج مستقل يتم تشغيله عند تحميل الـ bundle. وبما أن `print.js` يقوم فقط بتصدير دالة بدون استدعائها، فلا توجد أي تعليمات تنفيذية فعلية يحتاج webpack إلى تضمينها. لذلك يستطيع webpack حذف هذا الكود كنوع من التحسين ([optimization](/guides/tree-shaking/)).<br /><br />
+أما `index.js` فهو يستورد `printMe` ويستخدمها بالفعل، لذلك يقوم webpack بتضمينها داخل `index.bundle.js`.<br /><br />
+تم استخدام عدة entry points هنا فقط لشرح إدارة المخرجات و `HtmlWebpackPlugin`. في المشاريع الحقيقية، عادةً لن تقوم بإنشاء entry point مستقل لوحدات بسيطة كهذه. وإذا كان لديك عدة entry points تشترك في نفس التبعيات، راجع قسم [Prevent Duplication](/guides/code-splitting/#prevent-duplication) في دليل تقسيم الكود.
 
-## Setting up HtmlWebpackPlugin
+## إعداد HtmlWebpackPlugin
 
-First install the plugin and adjust the `webpack.config.js` file:
+قم أولًا بتثبيت الـ plugin ثم عدّل ملف `webpack.config.js`:
 
 ```bash
 npm install --save-dev html-webpack-plugin
@@ -174,7 +174,17 @@ npm install --save-dev html-webpack-plugin
  };
 ```
 
-Before we do a build, you should know that the `HtmlWebpackPlugin` by default will generate its own `index.html` file, even though we already have one in the `dist/` folder. This means that it will replace our `index.html` file with a newly generated one. Let's see what happens when we do an `npm run build`:
+قبل تشغيل البناء، يجب أن تعرف أن `HtmlWebpackPlugin` يقوم افتراضيًا بإنشاء ملف `index.html` خاص به، حتى لو كان لدينا ملف موجود مسبقًا داخل `dist/`.
+
+وهذا يعني أنه سيستبدل الملف القديم بملف جديد يتم إنشاؤه تلقائيًا.
+
+لنقم بتشغيل:
+
+```bash
+npm run build
+```
+
+وسيكون الناتج مشابهًا لهذا:
 
 ```bash
 ...
@@ -190,15 +200,19 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 2189 ms
 ```
 
-If you open `index.html` in your code editor, you'll see that the `HtmlWebpackPlugin` has created an entirely new file for you and that all the bundles are automatically added.
+إذا فتحت `index.html` داخل محرر الأكواد، ستلاحظ أن `HtmlWebpackPlugin` قام بإنشاء ملف جديد بالكامل وأضاف جميع الـ bundles تلقائيًا.
 
-If you want to learn more about all the features and options that the `HtmlWebpackPlugin` provides, then you should read up on it on the [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) repo.
+إذا أردت معرفة المزيد عن جميع الميزات والإعدادات التي يوفرها `HtmlWebpackPlugin`، يمكنك زيارة مستودعه الرسمي.
 
-## Cleaning up the `/dist` folder
+## تنظيف مجلد `/dist`
 
-As you might have noticed over the past guides and code example, our `/dist` folder has become quite cluttered. Webpack will generate the files and put them in the `/dist` folder for you, but it doesn't keep track of which files are actually in use by your project.
+كما لاحظت في الأدلة السابقة، أصبح مجلد `/dist` مليئًا بالملفات القديمة.
 
-In general it's good practice to clean the `/dist` folder before each build, so that only used files will be generated. Let's take care of that with [`output.clean`](/configuration/output/#outputclean) option.
+Webpack يقوم بإنشاء الملفات داخل `/dist` لكنه لا يحذف الملفات القديمة غير المستخدمة تلقائيًا.
+
+لذلك من الأفضل تنظيف مجلد `/dist` قبل كل عملية build حتى يبقى فقط ما يحتاجه المشروع.
+
+يمكننا فعل ذلك باستخدام الخيار [`output.clean`](/configuration/output/#outputclean).
 
 **webpack.config.js**
 
@@ -228,16 +242,30 @@ In general it's good practice to clean the `/dist` folder before each build, so
  };
 ```
 
-Now run an `npm run build` and inspect the `/dist` folder. If everything went well you should now only see the files generated from the build and no more old files!
+الآن قم بتشغيل:
+
+```bash
+npm run build
+```
+
+ثم افحص مجلد `/dist`، وستلاحظ أن webpack قام بحذف الملفات القديمة وأبقى فقط الملفات الحالية الناتجة عن البناء.
 
-## The Manifest
+## ملف Manifest
 
-You might be wondering how webpack and its plugins seem to "know" what files are being generated. The answer is in the manifest that webpack keeps to track how all the modules map to the output bundles. If you're interested in managing webpack's [`output`](/configuration/output) in other ways, the manifest would be a good place to start.
+قد تتساءل كيف يعرف webpack والـ plugins الخاصة به الملفات التي يتم إنشاؤها.
 
-The manifest data can be extracted into a json file for consumption using the [`ManifestPlugin`](/plugins/manifest-plugin/).
+الإجابة تكمن في ملف الـ manifest الذي يحتفظ به webpack لتتبع العلاقة بين الوحدات (modules) والـ bundles الناتجة.
 
-We won't go through a full example of how to use this plugin within your projects, but you can read up on [the concept page](/concepts/manifest) and the [caching guide](/guides/caching) to find out how this ties into long term caching.
+إذا كنت مهتمًا بإدارة [`output`](/configuration/output) بطرق متقدمة، فإن الـ manifest يُعتبر نقطة بداية ممتازة.
 
-## Conclusion
+يمكن استخراج بيانات الـ manifest إلى ملف JSON باستخدام [`ManifestPlugin`](/plugins/manifest-plugin/).
 
-Now that you've learned about dynamically adding bundles to your HTML, let's dive into the [development guide](/guides/development). Or, if you want to dig into more advanced topics, we would recommend heading over to the [code splitting guide](/guides/code-splitting).
+لن نتعمق هنا في مثال كامل، لكن يمكنك قراءة صفحة [manifest concept](/concepts/manifest) ودليل [caching](/guides/caching) لمعرفة كيف يتم استخدامه مع التخزين المؤقت طويل المدى.
+
+## الخاتمة
+
+الآن بعد أن تعلمت كيفية إضافة الـ bundles إلى HTML بشكل ديناميكي، يمكنك الانتقال إلى [دليل التطوير](/guides/development).
+
+أو إذا كنت ترغب في التعمق أكثر في المواضيع المتقدمة، فنوصي بالانتقال إلى [دليل تقسيم الكود](/guides/code-splitting).
+
+```
diff --git a/src/content/guides/package-exports.mdx b/src/content/guides/package-exports.mdx
index e745a3e41eab..197fea035404 100644
--- a/src/content/guides/package-exports.mdx
+++ b/src/content/guides/package-exports.mdx
@@ -1,31 +1,28 @@
 ---
-title: Package exports
+title: صادرات الحزمة
 sort: 25
 contributors:
-  - sokra
+  - arabpolice
 related:
-  - title: Package entry points in Node.js
+  - title: نقاط إدخال الحزم في Node.js
     url: https://nodejs.org/api/packages.html#packages_package_entry_points
 ---
 
-The `exports` field in the `package.json` of a package allows to declare
-which module should be used when using module requests like `import "package"` or `import "package/sub/path"`.
-It replaces the default implementation that returns `main` field resp. `index.js` files for `"package"` and
-the file system lookup for `"package/sub/path"`.
+يسمح حقل `exports` في ملف `package.json` الخاص بالحزمة بالتصريح بالوحدة التي يجب استخدامها عند استعمال طلبات وحدات مثل `import "package"` أو `import "package/sub/path"`.
+وهو يستبدل السلوك الافتراضي الذي يعيد حقل `main` أو ملفات `index.js` لطلب `"package"`، ويستبدل البحث في نظام الملفات لطلب `"package/sub/path"`.
 
-When the `exports` field is specified, only these module requests are available.
-Any other requests will lead to a ModuleNotFound Error.
+عند تحديد حقل `exports`، ستكون طلبات الوحدات هذه فقط متاحة.
+أي طلبات أخرى ستؤدي إلى خطأ ModuleNotFound.
 
-## General syntax
+## الصيغة العامة
 
-In general the `exports` field should contain an object
-where each properties specifies a sub path of the module request.
-For the examples above the following properties could be used:
-`"."` for `import "package"` and `"./sub/path"` for `import "package/sub/path"`.
-Properties ending with a `/` will forward a request with this prefix to the old file system lookup algorithm.
-For properties ending with `*`, `*` may take any value and any `*` in the property value is replaced with the taken value.
+عمومًا يجب أن يحتوي حقل `exports` على كائن تحدد كل خاصية فيه مسارًا فرعيًا من طلب الوحدة.
+بالنسبة إلى الأمثلة أعلاه يمكن استخدام الخصائص التالية:
+`"."` من أجل `import "package"` و `"./sub/path"` من أجل `import "package/sub/path"`.
+الخصائص التي تنتهي بـ `/` ستمرر الطلب الذي يحمل هذه السابقة إلى خوارزمية البحث القديمة في نظام الملفات.
+أما الخصائص التي تنتهي بـ `*`، فيمكن أن يأخذ `*` أي قيمة، وسيُستبدل كل `*` في قيمة الخاصية بالقيمة المأخوذة.
 
-An example:
+مثال:
 
 ```json
 {
@@ -39,23 +36,23 @@ An example:
 }
 ```
 
-| Module request                      | Result                                           |
+| طلب الوحدة                          | النتيجة                                          |
 | ----------------------------------- | ------------------------------------------------ |
 | `package`                           | `.../package/main.js`                            |
 | `package/sub/path`                  | `.../package/secondary.js`                       |
 | `package/prefix/some/file.js`       | `.../package/directory/some/file.js`             |
 | `package/prefix/deep/file.js`       | `.../package/other-directory/file.js`            |
 | `package/other-prefix/deep/file.js` | `.../package/yet-another/deep/file/deep/file.js` |
-| `package/main.js`                   | Error                                            |
+| `package/main.js`                   | خطأ                                              |
 
-## Alternatives
+## البدائل
 
-Instead of providing a single result, the package author may provide a list of results.
-In such a scenario this list is tried in order and the first valid result will be used.
+بدلًا من تقديم نتيجة واحدة، يمكن لمؤلف الحزمة تقديم قائمة نتائج.
+في هذا السيناريو تُجرَّب هذه القائمة بالترتيب، وستُستخدم أول نتيجة صالحة.
 
-Note: Only the first valid result will be used, not all valid results.
+ملاحظة: ستُستخدم أول نتيجة صالحة فقط، وليس كل النتائج الصالحة.
 
-Example:
+مثال:
 
 ```json
 {
@@ -65,11 +62,11 @@ Example:
 }
 ```
 
-Here `package/things/apple` might be found in `.../package/good-things/apple` or in `.../package/bad-things/apple`.
+هنا قد يُعثر على `package/things/apple` في `.../package/good-things/apple` أو في `.../package/bad-things/apple`.
 
-W> As of version 5.94.0, webpack's behavior has been updated to align with Node's behavior. It now selects the first valid path without attempting further resolutions and throws an error if the path cannot be resolved.
+W> ابتداءً من الإصدار 5.94.0، تم تحديث سلوك webpack ليتوافق مع سلوك Node. فهو الآن يختار أول مسار صالح دون محاولة حلول إضافية، ويرمي خطأ إذا تعذر حل المسار.
 
-For example, given the following configuration:
+على سبيل المثال، عند وجود الإعداد التالي:
 
 ```json
 {
@@ -79,21 +76,21 @@ For example, given the following configuration:
 }
 ```
 
-Webpack 5.94.0+ will now throw an error since `non-existent.js` is not found while the previous behavior would have resolved to `existent.js`.
+سيرمي Webpack 5.94.0+ الآن خطأ لأن `non-existent.js` غير موجود، بينما كان السلوك السابق سيحل الطلب إلى `existent.js`.
 
-## Conditional syntax
+## الصيغة الشرطية
 
-Instead of providing results directly in the `exports` field,
-the package author may let the module system choose one based on conditions about the environment.
+بدلًا من تقديم النتائج مباشرة داخل حقل `exports`،
+يمكن لمؤلف الحزمة أن يترك نظام الوحدات يختار نتيجة بناءً على شروط تخص البيئة.
 
-In this case an object mapping conditions to results should be used.
-Conditions are tried in object order.
-Conditions that contain invalid results are skipped.
-Conditions might be nested to create a logical AND.
-The last condition in the object might be the special `"default"` condition,
-which is always matched.
+في هذه الحالة يجب استخدام كائن يربط الشروط بالنتائج.
+تُجرَّب الشروط حسب ترتيبها داخل الكائن.
+يتم تخطي الشروط التي تحتوي على نتائج غير صالحة.
+يمكن تداخل الشروط لإنشاء AND منطقي.
+وقد يكون الشرط الأخير في الكائن هو الشرط الخاص `"default"`،
+والذي يطابق دائمًا.
 
-Example:
+مثال:
 
 ```json
 {
@@ -111,7 +108,7 @@ Example:
 }
 ```
 
-This translates to something like:
+يمكن ترجمة ذلك إلى ما يشبه:
 
 ```ts
 if (red && valid("./stop.js")) return "./stop.js";
@@ -124,11 +121,11 @@ if (valid("./drive-carefully.js")) return "./drive-carefully.js";
 throw new ModuleNotFoundError();
 ```
 
-The available conditions vary depending on the module system and tool used.
+تختلف الشروط المتاحة بحسب نظام الوحدات والأداة المستخدمة.
 
-## Abbreviation
+## الاختصار
 
-When only a single entry (`"."`) into the package should be supported the `{ ".": ... }` object nesting can be omitted:
+عندما تكون هناك حاجة لدعم إدخال واحد فقط (`"."`) داخل الحزمة، يمكن حذف تداخل الكائن `{ ".": ... }`:
 
 ```json
 {
@@ -145,93 +142,91 @@ When only a single entry (`"."`) into the package should be supported the `{ "."
 }
 ```
 
-## Notes about ordering
+## ملاحظات حول الترتيب
 
-In an object where each key is a condition, order of properties is significant. Conditions are handled in the order they are specified.
+في الكائن الذي يكون كل مفتاح فيه شرطًا، يكون ترتيب الخصائص مهمًا. تُعالَج الشروط بالترتيب الذي حُددت به.
 
-Example: `{ "red": "./stop.js", "green": "./drive.js" }` != `{ "green": "./drive.js", "red": "./stop.js" }` (when both `red` and `green` conditions are set, first property will be used)
+مثال: `{ "red": "./stop.js", "green": "./drive.js" }` != `{ "green": "./drive.js", "red": "./stop.js" }` (عند تعيين الشرطين `red` و `green`، ستُستخدم الخاصية الأولى)
 
-In an object where each key is a subpath, order of properties (subpaths) is not significant. More specific paths are preferred over less specific ones.
+في الكائن الذي يكون كل مفتاح فيه مسارًا فرعيًا، لا يكون ترتيب الخصائص (المسارات الفرعية) مهمًا. تُفضَّل المسارات الأكثر تحديدًا على الأقل تحديدًا.
 
-Example: `{ "./a/": "./x/", "./a/b/": "./y/", "./a/b/c": "./z" }` == `{ "./a/b/c": "./z", "./a/b/": "./y/", "./a/": "./x/" }` (order will always be: `./a/b/c` > `./a/b/` > `./a/`)
+مثال: `{ "./a/": "./x/", "./a/b/": "./y/", "./a/b/c": "./z" }` == `{ "./a/b/c": "./z", "./a/b/": "./y/", "./a/": "./x/" }` (سيكون الترتيب دائمًا: `./a/b/c` > `./a/b/` > `./a/`)
 
-`exports` field is preferred over other package entry fields like `main`, `module`, `browser` or custom ones.
+يُفضَّل حقل `exports` على حقول إدخال الحزمة الأخرى مثل `main` أو `module` أو `browser` أو الحقول المخصصة.
 
-## Support
+## الدعم
 
-| Feature                                | Supported by                                                                           |
-| -------------------------------------- | -------------------------------------------------------------------------------------- |
-| `"."` property                         | Node.js, webpack, rollup, esinstall, wmr                                               |
-| normal property                        | Node.js, webpack, rollup, esinstall, wmr                                               |
-| property ending with `/`               | ~~Node.js<sup>(1)</sup>~~, webpack, rollup, esinstall<sup>(2)</sup>, wmr<sup>(3)</sup> |
-| property ending with `*`               | Node.js, webpack, rollup, esinstall                                                    |
-| Alternatives                           | Node.js, webpack, rollup, <strike>esinstall</strike><sup>(4)</sup>                     |
-| Abbreviation only path                 | Node.js, webpack, rollup, esinstall, wmr                                               |
-| Abbreviation only conditions           | Node.js, webpack, rollup, esinstall, wmr                                               |
-| Conditional syntax                     | Node.js, webpack, rollup, esinstall, wmr                                               |
-| Nested conditional syntax              | Node.js, webpack, rollup, wmr<sup>(5)</sup>                                            |
-| Conditions Order                       | Node.js, webpack, rollup, wmr<sup>(6)</sup>                                            |
-| `"default"` condition                  | Node.js, webpack, rollup, esinstall, wmr                                               |
-| Path Order                             | Node.js, webpack, rollup                                                               |
-| Error when not mapped                  | Node.js, webpack, rollup, esinstall, wmr<sup>(7)</sup>                                 |
-| Error when mixing conditions and paths | Node.js, webpack, rollup                                                               |
+| الميزة                         | مدعومة بواسطة                                                                          |
+| ------------------------------ | -------------------------------------------------------------------------------------- |
+| خاصية `"."`                    | Node.js، webpack، rollup، esinstall، wmr                                               |
+| الخاصية العادية                | Node.js، webpack، rollup، esinstall، wmr                                               |
+| الخاصية التي تنتهي بـ `/`      | ~~Node.js<sup>(1)</sup>~~، webpack، rollup، esinstall<sup>(2)</sup>، wmr<sup>(3)</sup> |
+| الخاصية التي تنتهي بـ `*`      | Node.js، webpack، rollup، esinstall                                                    |
+| البدائل                        | Node.js، webpack، rollup، <strike>esinstall</strike><sup>(4)</sup>                     |
+| اختصار المسار فقط              | Node.js، webpack، rollup، esinstall، wmr                                               |
+| اختصار الشروط فقط              | Node.js، webpack، rollup، esinstall، wmr                                               |
+| الصيغة الشرطية                 | Node.js، webpack، rollup، esinstall، wmr                                               |
+| الصيغة الشرطية المتداخلة       | Node.js، webpack، rollup، wmr<sup>(5)</sup>                                            |
+| ترتيب الشروط                   | Node.js، webpack، rollup، wmr<sup>(6)</sup>                                            |
+| شرط `"default"`                | Node.js، webpack، rollup، esinstall، wmr                                               |
+| ترتيب المسارات                 | Node.js، webpack، rollup                                                               |
+| الخطأ عند عدم وجود تعيين       | Node.js، webpack، rollup، esinstall، wmr<sup>(7)</sup>                                 |
+| الخطأ عند خلط الشروط والمسارات | Node.js، webpack، rollup                                                               |
 
-(1) Removed in Node.js 17. Use `*` instead.
+(1) أُزيلت في Node.js 17. استخدم `*` بدلًا منها.
 
-(2) `"./"` is intentionally ignored as key.
+(2) يتم تجاهل `"./"` عمدًا كمفتاح.
 
-(3) The property value is ignored and property key is used as target. Effectively only allowing mappings with key and value are identical.
+(3) يتم تجاهل قيمة الخاصية ويُستخدم مفتاح الخاصية كهدف. عمليًا يسمح ذلك فقط بالتعيينات التي يكون فيها المفتاح والقيمة متطابقين.
 
-(4) The syntax is supported, but always the first entry is used, which makes it unusable for any practical use case.
+(4) الصيغة مدعومة، لكن يُستخدم الإدخال الأول دائمًا، ما يجعلها غير قابلة للاستخدام في أي حالة عملية.
 
-(5) Fallback to alternative sibling parent conditions is handling incorrectly.
+(5) الرجوع إلى شروط الأصل الشقيقة البديلة يُعالَج بشكل غير صحيح.
 
-(6) For the `require` condition object order is handled incorrectly. This is intentionally as wmr doesn't differ between referencing syntax.
+(6) بالنسبة إلى شرط `require`، تتم معالجة ترتيب الكائن بشكل غير صحيح. هذا مقصود لأن wmr لا يميز بين صيغ الإشارة إلى الوحدة.
 
-(7) When using `"exports": "./file.js"` abbreviation, any request e. g. `package/not-existing` will resolve to that. When not using the abbreviation, direct file access e. g. `package/file.js` will not lead to an error.
+(7) عند استخدام الاختصار `"exports": "./file.js"`، سيُحل أي طلب مثل `package/not-existing` إلى ذلك. وعند عدم استخدام الاختصار، لن يؤدي الوصول المباشر إلى ملف مثل `package/file.js` إلى خطأ.
 
-## Conditions
+## الشروط
 
-### Reference syntax
+### صيغة الإشارة
 
-One of these conditions is set depending on the syntax used to reference the module:
+يُعيَّن أحد هذه الشروط بحسب الصيغة المستخدمة للإشارة إلى الوحدة:
 
-| Condition | Description                                                       | Supported by                                                         |
-| --------- | ----------------------------------------------------------------- | -------------------------------------------------------------------- |
-| `import`  | Request is issued from ESM syntax or similar.                     | Node.js, webpack, rollup, esinstall<sup>(1)</sup>, wmr<sup>(1)</sup> |
-| `require` | Request is issued from CommonJs/AMD syntax or similar.            | Node.js, webpack, rollup, esinstall<sup>(1)</sup>, wmr<sup>(1)</sup> |
-| `style`   | Request is issued from a stylesheet reference.                    |                                                                      |
-| `sass`    | Request is issued from a sass stylesheet reference.               |                                                                      |
-| `asset`   | Request is issued from a asset reference.                         |                                                                      |
-| `script`  | Request is issued from a normal script tag without module system. |                                                                      |
+| الشرط     | الوصف                                         | مدعوم بواسطة                                                         |
+| --------- | --------------------------------------------- | -------------------------------------------------------------------- |
+| `import`  | يصدر الطلب من صيغة ESM أو ما يشبهها.          | Node.js، webpack، rollup، esinstall<sup>(1)</sup>، wmr<sup>(1)</sup> |
+| `require` | يصدر الطلب من صيغة CommonJs/AMD أو ما يشبهها. | Node.js، webpack، rollup، esinstall<sup>(1)</sup>، wmr<sup>(1)</sup> |
+| `style`   | يصدر الطلب من إشارة داخل ورقة أنماط.          |                                                                      |
+| `sass`    | يصدر الطلب من إشارة داخل ورقة أنماط sass.     |                                                                      |
+| `asset`   | يصدر الطلب من إشارة إلى أصل.                  |                                                                      |
+| `script`  | يصدر الطلب من وسم script عادي دون نظام وحدات. |                                                                      |
 
-These conditions might also be set additionally:
+قد تُعيَّن هذه الشروط أيضًا بشكل إضافي:
 
-| Condition   | Description                                                                                                         | Supported by         |
-| ----------- | ------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| `module`    | All module syntax that allows to reference javascript supports ESM.<br />(only combined with `import` or `require`) | webpack, rollup, wmr |
-| `esmodules` | Always set by supported tools.                                                                                      | wmr                  |
-| `types`     | Request is issued from typescript that is interested in type declarations.                                          |                      |
+- `module`: كل صيغ الوحدات التي تسمح بالإشارة إلى javascript تدعم ESM. يُستخدم فقط مع `import` أو `require`. مدعوم بواسطة webpack وrollup وwmr.
+- `esmodules`: يُعيَّن دائمًا بواسطة الأدوات المدعومة. مدعوم بواسطة wmr.
+- `types`: يصدر الطلب من typescript مهتم بتصريحات الأنواع.
 
-(1) `import` and `require` are both set independent of referencing syntax. `require` has always lower priority.
+(1) يتم تعيين `import` و `require` معًا بغض النظر عن صيغة الإشارة. وتكون أولوية `require` دائمًا أقل.
 
 #### import
 
-The following syntax will set the `import` condition:
+الصيغ التالية ستعيّن شرط `import`:
 
-- ESM `import` declarations in ESM
-- JS `import()` expression
-- HTML `<script type="module">` in HTML
-- HTML `<link rel="preload/prefetch">` in HTML
+- تصريحات ESM `import` داخل ESM
+- تعبير JS `import()`
+- HTML `<script type="module">` داخل HTML
+- HTML `<link rel="preload/prefetch">` داخل HTML
 - JS `new Worker(..., { type: "module" })`
-- WASM `import` section
+- قسم WASM `import`
 - ESM HMR (webpack) `import.hot.accept/decline([...])`
 - JS `Worklet.addModule`
-- Using javascript as entrypoint
+- استخدام javascript كنقطة إدخال
 
 #### require
 
-The following syntax will set the `require` condition:
+الصيغ التالية ستعيّن شرط `require`:
 
 - CommonJs `require(...)`
 - AMD `define()`
@@ -244,14 +239,14 @@ The following syntax will set the `require` condition:
 
 #### style
 
-The following syntax will set the `style` condition:
+الصيغ التالية ستعيّن شرط `style`:
 
 - CSS `@import`
 - HTML `<link rel="stylesheet">`
 
 #### asset
 
-The following syntax will set the `asset` condition:
+الصيغ التالية ستعيّن شرط `asset`:
 
 - CSS `url()`
 - ESM `new URL(..., import.meta.url)`
@@ -259,112 +254,109 @@ The following syntax will set the `asset` condition:
 
 #### script
 
-The following syntax will set the `script` condition:
+الصيغ التالية ستعيّن شرط `script`:
 
 - HTML `<script src="...">`
 
-`script` should only be set when no module system is supported.
-When the script is preprocessed by a system supporting CommonJs
-it should set `require` instead.
+يجب تعيين `script` فقط عندما لا يكون أي نظام وحدات مدعومًا.
+إذا كان السكربت يُعالَج مسبقًا بواسطة نظام يدعم CommonJs،
+فيجب تعيين `require` بدلًا من ذلك.
 
-This condition should be used when looking for a javascript file that can be injected
-as script tag in a HTML page without additional preprocessing.
+يجب استخدام هذا الشرط عند البحث عن ملف javascript يمكن حقنه كوسم script في صفحة HTML دون معالجة مسبقة إضافية.
 
-### Optimizations
+### التحسينات
 
-The following conditions are set for various optimizations:
+تُعيَّن الشروط التالية لتحسينات مختلفة:
 
-| Condition     | Description                                                         | Supported by |
-| ------------- | ------------------------------------------------------------------- | ------------ |
-| `production`  | In a production environment.<br />No devtooling should be included. | webpack      |
-| `development` | In a development environment.<br />Devtooling should be included.   | webpack      |
+- `production`: في بيئة إنتاج. يجب ألا تُضمَّن أدوات التطوير. مدعوم بواسطة webpack.
+- `development`: في بيئة تطوير. يجب تضمين أدوات التطوير. مدعوم بواسطة webpack.
 
-Note: Since `production` and `development` is not supported by everyone, no assumption should be made when none of these is set.
+ملاحظة: بما أن `production` و `development` غير مدعومين من الجميع، يجب عدم افتراض أي شيء عندما لا يكون أي منهما معيّنًا.
 
-### Target environment
+### البيئة المستهدفة
 
-The following conditions are set depending on the target environment:
+تُعيَّن الشروط التالية بحسب البيئة المستهدفة:
 
-| Condition      | Description                                   | Supported by                        |
-| -------------- | --------------------------------------------- | ----------------------------------- |
-| `browser`      | Code will run in a browser.                   | webpack, esinstall, wmr             |
-| `electron`     | Code will run in electron.<sup>(1)</sup>      | webpack                             |
-| `worker`       | Code will run in a (Web)Worker.<sup>(1)</sup> | webpack                             |
-| `worklet`      | Code will run in a Worklet.<sup>(1)</sup>     |                                     |
-| `node`         | Code will run in Node.js.                     | Node.js, webpack, wmr<sup>(2)</sup> |
-| `deno`         | Code will run in Deno.                        |                                     |
-| `react-native` | Code will run in react-native.                |                                     |
+| الشرط          | الوصف                                     | مدعوم بواسطة                        |
+| -------------- | ----------------------------------------- | ----------------------------------- |
+| `browser`      | سيعمل الكود في متصفح.                     | webpack، esinstall، wmr             |
+| `electron`     | سيعمل الكود في electron.<sup>(1)</sup>    | webpack                             |
+| `worker`       | سيعمل الكود في (Web)Worker.<sup>(1)</sup> | webpack                             |
+| `worklet`      | سيعمل الكود في Worklet.<sup>(1)</sup>     |                                     |
+| `node`         | سيعمل الكود في Node.js.                   | Node.js، webpack، wmr<sup>(2)</sup> |
+| `deno`         | سيعمل الكود في Deno.                      |                                     |
+| `react-native` | سيعمل الكود في react-native.              |                                     |
 
-(1) `electron`, `worker` and `worklet` comes combined with either `node` or `browser`, depending on the context.
+(1) تأتي `electron` و `worker` و `worklet` مدمجة إما مع `node` أو `browser` بحسب السياق.
 
-(2) This is set for browser target environment.
+(2) يُعيَّن هذا لبيئة هدف المتصفح.
 
-Since there are multiple versions of each environment the following guidelines apply:
+بما أن لكل بيئة إصدارات متعددة، تنطبق الإرشادات التالية:
 
-- `node`: See `engines` field for compatibility.
-- `browser`: Compatible with current Spec and stage 4 proposals at time of publishing the package. Polyfilling resp. transpiling must be handled on consumer side.
-  - Features that are not possible to polyfill or transpile should be used carefully as it limits the possible usage.
+- `node`: راجع حقل `engines` لمعرفة التوافق.
+- `browser`: متوافق مع المواصفات الحالية ومقترحات المرحلة 4 وقت نشر الحزمة. يجب أن تُعالَج polyfilling أو transpiling من جهة المستهلك.
+  - يجب استخدام الميزات التي لا يمكن توفير polyfill أو transpile لها بحذر، لأنها تحد من إمكانات الاستخدام.
 - `deno`: TBD
 - `react-native`: TBD
 
-### Conditions: Preprocessor and runtimes
+### الشروط: المعالجات المسبقة وبيئات التشغيل
 
-The following conditions are set depending on which tool preprocesses the source code.
+تُعيَّن الشروط التالية بحسب الأداة التي تعالج الكود المصدري مسبقًا.
 
-| Condition | Description           | Supported by |
-| --------- | --------------------- | ------------ |
-| `webpack` | Processed by webpack. | webpack      |
+| الشرط     | الوصف                       | مدعوم بواسطة |
+| --------- | --------------------------- | ------------ |
+| `webpack` | تمت معالجته بواسطة webpack. | webpack      |
 
-Sadly there is no `node-js` condition for Node.js as runtime.
-This would simplify creating exceptions for Node.js.
+للأسف لا يوجد شرط `node-js` لـ Node.js كبيئة تشغيل.
+كان ذلك سيُسهّل إنشاء استثناءات لـ Node.js.
 
-### Conditions: Custom
+### الشروط: المخصصة
 
-The following tools support custom conditions:
+تدعم الأدوات التالية الشروط المخصصة:
 
-| Tool      | Supported | Notes                                                                                                    |
-| --------- | --------- | -------------------------------------------------------------------------------------------------------- |
-| Node.js   | yes       | Use [`--conditions`](https://nodejs.org/api/cli.html#cli_c_condition_conditions_condition) CLI argument. |
-| webpack   | yes       | Use [`resolve.conditionNames`](/configuration/resolve/#resolveconditionnames) configuration option.      |
-| rollup    | yes       | Use `exportConditions` option for `@rollup/plugin-node-resolve`                                          |
-| esinstall | no        |                                                                                                          |
-| wmr       | no        |                                                                                                          |
+| الأداة    | مدعوم | ملاحظات                                                                                                  |
+| --------- | ----- | -------------------------------------------------------------------------------------------------------- |
+| Node.js   | نعم   | استخدم وسيطة CLI [`--conditions`](https://nodejs.org/api/cli.html#cli_c_condition_conditions_condition). |
+| webpack   | نعم   | استخدم خيار الإعداد [`resolve.conditionNames`](/configuration/resolve/#resolveconditionnames).           |
+| rollup    | نعم   | استخدم خيار `exportConditions` في `@rollup/plugin-node-resolve`                                          |
+| esinstall | لا    |                                                                                                          |
+| wmr       | لا    |                                                                                                          |
 
-For custom conditions the following naming schema is recommended:
+يوصى باتباع نمط التسمية التالي للشروط المخصصة:
 
 `<company-name>:<condition-name>`
 
-Examples: `example-corp:beta`, `google:internal`.
+أمثلة: `example-corp:beta`، `google:internal`.
 
-## Common patterns
+## الأنماط الشائعة
 
-All patterns are explained with a single `"."` entry into the package, but they can be extended from multiple entries too, by repeating the pattern for each entry.
+تُشرح كل الأنماط باستخدام إدخال واحد `"."` داخل الحزمة، لكن يمكن توسيعها لتشمل عدة إدخالات أيضًا بتكرار النمط لكل إدخال.
 
-These pattern should be used as guide not as strict ruleset.
-They can be adapted to the individual packages.
+يجب استخدام هذه الأنماط كدليل إرشادي لا كقواعد صارمة.
+يمكن تكييفها مع الحزم الفردية.
 
-These pattern are based on the following list of goals/assumptions:
+تعتمد هذه الأنماط على قائمة الأهداف/الافتراضات التالية:
 
-- Packages are rotting.
-  - We assume at some point packages are no longer being maintained, but they are continued to be used.
-  - `exports` should be written to use fallbacks for unknown future cases. `default` condition can be used for that.
-  - As the future is unknown we assume an environment similar to browsers and module system similar to ESM.
-- Not all conditions are supported by every tool.
-  - Fallbacks should be used to handled these cases.
-  - We assume the following fallback make sense in general:
+- الحزم تتقادم.
+  - نفترض أن بعض الحزم ستتوقف في مرحلة ما عن الصيانة، لكنها ستستمر قيد الاستخدام.
+  - يجب كتابة `exports` بحيث تستخدم fallbacks للحالات المستقبلية غير المعروفة. يمكن استخدام شرط `default` لذلك.
+  - بما أن المستقبل غير معروف، نفترض بيئة مشابهة للمتصفحات ونظام وحدات مشابهًا لـ ESM.
+- ليست كل الشروط مدعومة من كل أداة.
+  - يجب استخدام fallbacks لمعالجة هذه الحالات.
+  - نفترض أن الـ fallback التالي منطقي عمومًا:
     - ESM > CommonJs
     - Production > Development
     - Browser > node.js
 
-Depending on the package intention maybe something else makes sense and in this case the patterns should be adopted to that. Example: For a command line tool a browser-like future and fallback doesn't make a lot of sense, and in this case node.js-like environments and fallbacks should be used instead.
+بحسب غرض الحزمة قد يكون خيار آخر أكثر منطقية، وعندها يجب تعديل الأنماط بما يناسب ذلك. مثال: بالنسبة إلى أداة سطر أوامر، لا يكون افتراض مستقبل مشابه للمتصفح وfallback شبيه به منطقيًا كثيرًا، وفي هذه الحالة يجب استخدام بيئات وfallbacks شبيهة بـ node.js بدلًا من ذلك.
 
-For complex use cases multiple patterns need to be combined by nesting these conditions.
+للحالات المعقدة يجب دمج عدة أنماط عبر تداخل هذه الشروط.
 
-### Target environment independent packages
+### الحزم المستقلة عن البيئة المستهدفة
 
-These patterns make sense for packages that do not use environment specific APIs.
+هذه الأنماط منطقية للحزم التي لا تستخدم واجهات API خاصة ببيئة معينة.
 
-#### Providing only an ESM version
+#### توفير إصدار ESM فقط
 
 ```json
 {
@@ -373,11 +365,11 @@ These patterns make sense for packages that do not use environment specific APIs
 }
 ```
 
-Note: Providing only a ESM comes with restrictions for node.js.
-Such a package would only work in Node.js >= 14 and only when using `import`.
-It won't work with `require()`.
+ملاحظة: توفير ESM فقط يأتي بقيود بالنسبة إلى node.js.
+مثل هذه الحزمة ستعمل فقط في Node.js >= 14 وفقط عند استخدام `import`.
+ولن تعمل مع `require()`.
 
-#### Providing CommonJs and ESM version (stateless)
+#### توفير إصداري CommonJs و ESM (بلا حالة)
 
 ```json
 {
@@ -392,21 +384,21 @@ It won't work with `require()`.
 }
 ```
 
-Most tools get the ESM version.
-Node.js is an exception here.
-It gets a CommonJs version when using `require()`.
-This will lead to two instances of these package when referencing it with `require()` and `import`, but that doesn't hurt as the package doesn't have state.
+تحصل معظم الأدوات على إصدار ESM.
+Node.js هو الاستثناء هنا.
+فهو يحصل على إصدار CommonJs عند استخدام `require()`.
+سيؤدي ذلك إلى وجود نسختين من هذه الحزمة عند الإشارة إليها باستخدام `require()` و `import`، لكن ذلك لا يضر ما دامت الحزمة لا تحتوي على حالة.
 
-The `module` condition is used as optimization when preprocessing node-targeted code with a tool that supports ESM for `require()` (like a bundler, when bundling for Node.js).
-For such a tool the exception is skipped.
-This is technically optional, but bundlers would include the package source code twice otherwise.
+يُستخدم شرط `module` كتحسين عند المعالجة المسبقة لكود يستهدف node بواسطة أداة تدعم ESM مع `require()` (مثل bundler عند التجميع لـ Node.js).
+بالنسبة إلى أداة كهذه، يتم تخطي الاستثناء.
+هذا اختياري من الناحية التقنية، لكن أدوات التجميع ستضمّن الكود المصدري للحزمة مرتين بدونه.
 
-You can also use the stateless pattern if you are able to isolate your package state in JSON files.
-JSON is consumable from CommonJs and ESM without polluting the graph with the other module system.
+يمكنك أيضًا استخدام نمط "بلا حالة" إذا كنت قادرًا على عزل حالة حزمتك في ملفات JSON.
+يمكن استهلاك JSON من CommonJs و ESM دون تلويث الرسم البياني بنظام الوحدات الآخر.
 
-Note that here stateless also means class instances are not tested with `instanceof` as there can be two different classes because of the double module instantiation.
+لاحظ أن "بلا حالة" هنا يعني أيضًا أن نسخ الأصناف لا تُختبر باستخدام `instanceof`، إذ قد توجد فئتان مختلفتان بسبب إنشاء نسختين من الوحدة.
 
-#### Providing CommonJs and ESM version (stateful)
+#### توفير إصداري CommonJs و ESM (مع حالة)
 
 ```json
 {
@@ -432,14 +424,14 @@ export const A = cjs.A;
 export const B = cjs.B;
 ```
 
-In a stateful package we must ensure that the package is never instantiated twice.
+في الحزمة ذات الحالة، يجب أن نضمن ألا تُنشأ الحزمة مرتين أبدًا.
 
-This isn't a problem for most tools, but Node.js is again an exception here.
-For Node.js we always use the CommonJs version and expose named exports in the ESM with a ESM wrapper.
+هذا لا يمثل مشكلة لمعظم الأدوات، لكن Node.js هو الاستثناء مرة أخرى.
+بالنسبة إلى Node.js، نستخدم إصدار CommonJs دائمًا ونكشف الصادرات المسماة في ESM عبر غلاف ESM.
 
-We use the `module` condition as optimization again.
+نستخدم شرط `module` كتحسين مرة أخرى.
 
-#### Providing only a CommonJs version
+#### توفير إصدار CommonJs فقط
 
 ```json
 {
@@ -448,9 +440,9 @@ We use the `module` condition as optimization again.
 }
 ```
 
-Providing `"type": "commonjs"` helps to statically detect CommonJs files.
+يساعد توفير `"type": "commonjs"` على اكتشاف ملفات CommonJs بشكل ساكن.
 
-#### Providing a bundled script version for direct browser consumption
+#### توفير إصدار سكربت مجمّع للاستهلاك المباشر في المتصفح
 
 ```json
 {
@@ -462,15 +454,15 @@ Providing `"type": "commonjs"` helps to statically detect CommonJs files.
 }
 ```
 
-Note that despite using `"type": "module"` and `.js` for `dist-bundle.js` this file is not in ESM format.
-It should use globals to allow direct consumption as script tag.
+لاحظ أنه على الرغم من استخدام `"type": "module"` وامتداد `.js` لـ `dist-bundle.js`، فإن هذا الملف ليس بصيغة ESM.
+يجب أن يستخدم المتغيرات العامة لإتاحة الاستهلاك المباشر كوسم script.
 
-### Providing devtools or production optimizations
+### توفير أدوات تطوير أو تحسينات إنتاج
 
-These patterns make sense when a package contains two versions, one for development and one for production.
-E. g. the development version could include additional code for better error message or additional warnings.
+هذه الأنماط منطقية عندما تحتوي الحزمة على إصدارين، أحدهما للتطوير والآخر للإنتاج.
+مثلًا، يمكن أن يتضمن إصدار التطوير كودًا إضافيًا لرسائل أخطاء أفضل أو تحذيرات إضافية.
 
-#### Without Node.js runtime detection
+#### دون اكتشاف بيئة تشغيل Node.js
 
 ```json
 {
@@ -482,10 +474,10 @@ E. g. the development version could include additional code for better error mes
 }
 ```
 
-When the `development` condition is supported we use the version enhanced for development.
-Otherwise, in production or when mode is unknown, we use the optimized version.
+عندما يكون شرط `development` مدعومًا، نستخدم الإصدار المحسّن للتطوير.
+وإلا، في الإنتاج أو عندما يكون الوضع مجهولًا، نستخدم الإصدار المحسّن.
 
-#### With Node.js runtime detection
+#### مع اكتشاف بيئة تشغيل Node.js
 
 ```json
 {
@@ -508,18 +500,18 @@ module.exports =
     : require("./index-with-devtools.cjs");
 ```
 
-We prefer static detection of production/development mode via the `production` or `development` condition.
+نفضّل الاكتشاف الساكن لوضع الإنتاج/التطوير عبر شرط `production` أو `development`.
 
-Node.js allows to detection production/development mode at runtime via `process.env.NODE_ENV`, so we use that as fallback in Node.js. Sync conditional importing ESM is not possible and we don't want to load the package twice, so we have to use CommonJs for the runtime detection.
+يسمح Node.js باكتشاف وضع الإنتاج/التطوير وقت التشغيل عبر `process.env.NODE_ENV`، لذلك نستخدم ذلك كـ fallback في Node.js. لا يمكن استيراد ESM شرطيًا بشكل متزامن، ولا نريد تحميل الحزمة مرتين، لذلك علينا استخدام CommonJs لاكتشاف وقت التشغيل.
 
-When it's not possible to detect mode we fallback to the production version.
+عندما لا يكون اكتشاف الوضع ممكنًا، نرجع إلى إصدار الإنتاج.
 
-### Providing different versions depending on target environment
+### توفير إصدارات مختلفة بحسب البيئة المستهدفة
 
-A fallback environment should be chosen that makes sense for the package to support future environments.
-In general a browser-like environment should be assumed.
+يجب اختيار بيئة fallback تكون منطقية للحزمة لدعم البيئات المستقبلية.
+عمومًا يجب افتراض بيئة شبيهة بالمتصفح.
 
-#### Providing Node.js, WebWorker and browser versions
+#### توفير إصدارات Node.js و WebWorker والمتصفح
 
 ```json
 {
@@ -532,7 +524,7 @@ In general a browser-like environment should be assumed.
 }
 ```
 
-#### Providing Node.js, browser and electron versions
+#### توفير إصدارات Node.js والمتصفح و electron
 
 ```json
 {
@@ -548,11 +540,11 @@ In general a browser-like environment should be assumed.
 }
 ```
 
-### Combining patterns
+### دمج الأنماط
 
-#### Example 1
+#### المثال 1
 
-This is an example for a package that has optimizations for production and development usage with runtime detection for `process.env` and also ships a CommonJs and ESM version
+هذا مثال لحزمة تحتوي على تحسينات لاستخدام الإنتاج والتطوير مع اكتشاف وقت التشغيل لـ `process.env`، كما أنها توفر إصداري CommonJs و ESM.
 
 ```json
 {
@@ -578,9 +570,9 @@ This is an example for a package that has optimizations for production and devel
 }
 ```
 
-#### Example 2
+#### المثال 2
 
-This is an example for a package that supports Node.js, browser and electron, has optimizations for production and development usage with runtime detection for `process.env` and also ships a CommonJs and ESM version.
+هذا مثال لحزمة تدعم Node.js والمتصفح و electron، وتحتوي على تحسينات لاستخدام الإنتاج والتطوير مع اكتشاف وقت التشغيل لـ `process.env`، كما أنها توفر إصداري CommonJs و ESM.
 
 ```json
 {
@@ -624,17 +616,17 @@ This is an example for a package that supports Node.js, browser and electron, ha
 }
 ```
 
-Looks complex, yes. We were already able to reduce some complexity due to a assumption we can make: Only `node` need a CommonJs version and can detect production/development with `process.env`.
+يبدو معقدًا، نعم. لقد تمكنا بالفعل من تقليل بعض التعقيد بفضل افتراض يمكننا اعتماده: فقط `node` يحتاج إلى إصدار CommonJs ويمكنه اكتشاف الإنتاج/التطوير باستخدام `process.env`.
 
-## Guidelines
+## إرشادات
 
-- Avoid the `default` export. It's handled differently between tooling. Only use named exports.
-- Never provide different APIs or semantics for different conditions.
-- Write your source code as ESM and transpile to CJS via babel, typescript or similar tools.
-- Either use `.cjs` or `type: "commonjs"` in package.json to clearly mark source code as CommonJs. This makes it statically detectable for tools if CommonJs or ESM is used. This is important for tools that only support ESM and no CommonJs.
-- ESM used in packages support the following types of requests:
-  - module requests are supported, pointing to other packages with a package.json.
-  - relative requests are supported, pointing to other files within the package.
-    - They must not point to files outside of the package.
-  - `data:` url requests are supported.
-  - other absolute or server-relative requests are not supported by default, but they might be supported by some tools or environments.
+- تجنب التصدير `default`. فهو يُعالَج بشكل مختلف بين الأدوات. استخدم الصادرات المسماة فقط.
+- لا تقدم أبدًا واجهات API أو دلالات مختلفة لشروط مختلفة.
+- اكتب كودك المصدري بصيغة ESM وحوّله إلى CJS عبر babel أو typescript أو أدوات مشابهة.
+- استخدم إما `.cjs` أو `type: "commonjs"` في package.json لتمييز الكود المصدري بوضوح على أنه CommonJs. هذا يجعله قابلًا للاكتشاف الساكن لدى الأدوات لمعرفة ما إذا كان CommonJs أو ESM مستخدمًا. هذا مهم للأدوات التي تدعم ESM فقط ولا تدعم CommonJs.
+- يدعم ESM المستخدم داخل الحزم أنواع الطلبات التالية:
+  - طلبات الوحدات مدعومة، وتشير إلى حزم أخرى تحتوي على package.json.
+  - الطلبات النسبية مدعومة، وتشير إلى ملفات أخرى داخل الحزمة.
+    - يجب ألا تشير إلى ملفات خارج الحزمة.
+  - طلبات URL من نوع `data:` مدعومة.
+  - الطلبات المطلقة الأخرى أو النسبية إلى الخادم غير مدعومة افتراضيًا، لكنها قد تكون مدعومة في بعض الأدوات أو البيئات.
diff --git a/src/content/guides/production.mdx b/src/content/guides/production.mdx
index bd546149ee6e..6fe534a8a7d2 100644
--- a/src/content/guides/production.mdx
+++ b/src/content/guides/production.mdx
@@ -1,43 +1,21 @@
 ---
-title: Production
+title: الإنتاج
 sort: 17
 contributors:
-  - henriquea
-  - rajagopal4890
-  - makuzaverite
-  - markerikson
-  - simon04
-  - kisnows
-  - chrisVillanueva
-  - swapnilmishra
-  - bring2dip
-  - redian
-  - skipjack
-  - xgqfrms
-  - kelset
-  - xgirma
-  - mehrdaad
-  - SevenOutman
-  - AnayaDesign
-  - wizardofhogwarts
-  - aholzner
-  - EugeneHlushko
-  - snitin315
-  - Brennvo
-  - ThierryRakotomanana
+  - arabpolice
 ---
 
-In this guide, we'll dive into some of the best practices and utilities for building a production site or application.
+في هذا الدليل، سنتعمق في بعض أفضل الممارسات والأدوات المساعدة لبناء موقع أو تطبيق للإنتاج.
 
-T> This walkthrough stems from [Tree Shaking](/guides/tree-shaking) and [Development](/guides/development). Please ensure you are familiar with the concepts/setup introduced in those guides before continuing on.
+T> يعتمد هذا الشرح على دليلي [إزالة الكود غير المستخدم](/guides/tree-shaking) و[التطوير](/guides/development). يرجى التأكد من أنك ملم بالمفاهيم والإعدادات المقدمة في هذين الدليلين قبل المتابعة.
 
-## Setup
+## الإعداد
 
-The goals of _development_ and _production_ builds differ greatly. In _development_, we want strong source mapping and a localhost server with live reloading or hot module replacement. In _production_, our goals shift to a focus on minified bundles, lighter weight source maps, and optimized assets to improve load time. With this logical separation at hand, we typically recommend writing **separate webpack configurations** for each environment.
+تختلف أهداف بناءات التطوير والإنتاج كثيرًا. في التطوير نريد خرائط مصدر قوية وخادمًا محليًا مع إعادة تحميل حية أو استبدال الوحدات الساخن. أما في الإنتاج فتتحول أهدافنا إلى التركيز على حزم مصغّرة، وخرائط مصدر أخف وزنًا، وأصول محسّنة لتحسين وقت التحميل. وبوجود هذا الفصل المنطقي، نوصي عادة بكتابة **إعدادات webpack منفصلة** لكل بيئة.
 
-While we will separate the _production_ and _development_ specific bits out, note that we'll still maintain a "common" configuration to keep things DRY. In order to merge these configurations together, we'll use a utility called [`webpack-merge`](https://github.com/survivejs/webpack-merge). With the "common" configuration in place, we won't have to duplicate code within the environment-specific configurations.
+مع أننا سنفصل الأجزاء الخاصة بالإنتاج والتطوير، لاحظ أننا سنبقي إعدادًا «مشتركًا» للحفاظ على مبدأ DRY. لدمج هذه الإعدادات معًا، سنستخدم أداة مساعدة تسمى [`webpack-merge`](https://github.com/survivejs/webpack-merge). بوجود الإعداد «المشترك»، لن نحتاج إلى تكرار الكود داخل الإعدادات الخاصة بكل بيئة.
 
-Let's start by installing `webpack-merge` and splitting out the bits we've already worked on in previous guides:
+لنبدأ بتثبيت `webpack-merge` وفصل الأجزاء التي عملنا عليها بالفعل في الأدلة السابقة:
 
 ```bash
 npm install --save-dev webpack-merge
@@ -113,13 +91,13 @@ npm install --save-dev webpack-merge
 + });
 ```
 
-In `webpack.common.js`, we now have setup our `entry` and `output` configuration and we've included any plugins that are required for both environments. In `webpack.dev.js`, we've set `mode` to `development`. Also, we've added the recommended `devtool` for that environment (strong source mapping), as well as our `devServer` configuration. Finally, in `webpack.prod.js`,`mode` is set to `production` which loads [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/), which was first introduced by the [tree shaking](/guides/tree-shaking/) guide.
+في `webpack.common.js` أصبح لدينا الآن إعدادا `entry` و`output`، وأضفنا أي ملحقات مطلوبة لكلتا البيئتين. في `webpack.dev.js` عيّنا `mode` إلى `development`. كذلك أضفنا خيار `devtool` الموصى به لتلك البيئة، وهو خرائط مصدر قوية، بالإضافة إلى إعداد `devServer`. وأخيرًا، في `webpack.prod.js`، عُيّن `mode` إلى `production`، مما يحمّل [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/) الذي قُدّم أول مرة في دليل [إزالة الكود غير المستخدم](/guides/tree-shaking/).
 
-Note the use of `merge()` calls in the environment-specific configurations to include our common configuration in `webpack.dev.js` and `webpack.prod.js`. The `webpack-merge` tool offers a variety of advanced features for merging but for our use case we won't need any of that.
+لاحظ استخدام استدعاءات `merge()` في الإعدادات الخاصة بكل بيئة لتضمين الإعداد المشترك داخل `webpack.dev.js` و`webpack.prod.js`. توفر أداة `webpack-merge` مجموعة من الميزات المتقدمة للدمج، لكننا لن نحتاج إلى أي منها في حالتنا.
 
-## NPM Scripts
+## سكربتات NPM
 
-Now, let's modify our npm scripts to use the new configuration files. For the `start` script, which runs `webpack-dev-server`, we will use `webpack.dev.js`, and for the `build` script, which runs `webpack` to create a production build, we will use `webpack.prod.js`:
+الآن، لنعدّل سكربتات npm لاستخدام ملفات الإعداد الجديدة. بالنسبة إلى سكربت `start`، الذي يشغّل `webpack-dev-server`، سنستخدم `webpack.dev.js`، وبالنسبة إلى سكربت `build`، الذي يشغّل `webpack` لإنشاء بناء إنتاج، سنستخدم `webpack.prod.js`:
 
 **package.json**
 
@@ -154,11 +132,11 @@ Now, let's modify our npm scripts to use the new configuration files. For the `s
   }
 ```
 
-Feel free to run those scripts and see how the output changes as we continue adding to our _production_ configuration.
+يمكنك تشغيل هذه السكربتات وملاحظة كيف يتغير الخرج بينما نواصل الإضافة إلى إعداد _الإنتاج_.
 
-## Specify the Mode
+## تحديد الوضع
 
-Many libraries will key off the `process.env.NODE_ENV` variable to determine what should be included in the library. For example, when `process.env.NODE_ENV` is not set to `'production'` some libraries may add additional logging and testing to make debugging easier. However, with `process.env.NODE_ENV` set to `'production'` they might drop or add significant portions of code to optimize how things run for your actual users. Since webpack v4, specifying [`mode`](/configuration/mode/) automatically configures `process.env.NODE_ENV` for you through [`DefinePlugin`](https://github.com/webpack/webpack/blob/fcccd192ce550210186f84a7ca59ee4cd47a8b2d/lib/WebpackOptionsApply.js#L565):
+تعتمد كثير من المكتبات على المتغير `process.env.NODE_ENV` لتحديد ما ينبغي تضمينه في المكتبة. على سبيل المثال، عندما لا تكون قيمة `process.env.NODE_ENV` مضبوطة على `'production'`، قد تضيف بعض المكتبات تسجيلًا واختبارات إضافية لتسهيل التصحيح. أما مع ضبط `process.env.NODE_ENV` إلى `'production'`، فقد تحذف أو تضيف أجزاء كبيرة من الكود لتحسين طريقة التشغيل للمستخدمين الفعليين. منذ webpack v4، يؤدي تحديد [`mode`](/configuration/mode/) إلى إعداد `process.env.NODE_ENV` تلقائيًا عبر [`DefinePlugin`](https://github.com/webpack/webpack/blob/fcccd192ce550210186f84a7ca59ee4cd47a8b2d/lib/WebpackOptionsApply.js#L565):
 
 **webpack.prod.js**
 
@@ -171,9 +149,9 @@ Many libraries will key off the `process.env.NODE_ENV` variable to determine wha
   });
 ```
 
-T> Technically, `NODE_ENV` is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, `process.env.NODE_ENV` is not set **within** the build script `webpack.config.js` automatically when running webpack. Thus, conditionals like `process.env.NODE_ENV === 'production' ? '[name].[contenthash].bundle.js' : '[name].bundle.js'` won't work in webpack configurations unless you specify `NODE_ENV` explicitly with `NODE_ENV=production` through CLI.
+T> من الناحية التقنية، `NODE_ENV` متغير بيئة نظام يعرّضه Node.js للسكربتات قيد التشغيل. ويُستخدم اصطلاحًا لتحديد سلوك التطوير مقابل الإنتاج في أدوات الخادم وسكربتات البناء ومكتبات جهة العميل. وخلافًا لما قد يُتوقع، لا تُضبط `process.env.NODE_ENV` **داخل** سكربت البناء `webpack.config.js` تلقائيًا عند تشغيل webpack. لذلك، لن تعمل الشروط مثل `process.env.NODE_ENV === 'production' ? '[name].[contenthash].bundle.js' : '[name].bundle.js'` داخل إعدادات webpack ما لم تحدد `NODE_ENV` صراحة باستخدام `NODE_ENV=production` عبر CLI.
 
-If you're using a library like [`react`](https://reactjs.org/), you should actually see a significant drop in bundle size after adding `DefinePlugin`. Also, note that any of our local `/src` code can key off of this as well, so the following check would be valid:
+إذا كنت تستخدم مكتبة مثل [`react`](https://reactjs.org/)، فينبغي أن تلاحظ انخفاضًا ملحوظًا في حجم الحزمة بعد إضافة `DefinePlugin`. ولاحظ أيضًا أن أي كود محلي داخل `/src` يمكنه الاعتماد على هذا المتغير كذلك، لذا سيكون الفحص التالي صالحًا:
 
 **src/index.js**
 
@@ -198,19 +176,19 @@ If you're using a library like [`react`](https://reactjs.org/), you should actua
   document.body.appendChild(component());
 ```
 
-## Minification
+## التصغير
 
-Webpack v4+ will minify your code by default in [`production mode`](/configuration/mode/#mode-production).
+سيقوم webpack v4+ بتصغير الكود افتراضيًا في [`وضع الإنتاج`](/configuration/mode/#mode-production).
 
-Note that while the [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/) is a great place to start for minification and being used by default, there are other options out there:
+لاحظ أنه مع أن [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/) نقطة بداية ممتازة للتصغير ويُستخدم افتراضيًا، فهناك خيارات أخرى متاحة:
 
 - [`ClosureWebpackPlugin`](https://github.com/webpack-contrib/closure-webpack-plugin)
 
-If you decide to try another minification plugin, make sure your new choice also drops dead code as described in the [tree shaking](/guides/tree-shaking) guide and provide it as the [`optimization.minimizer`](/configuration/optimization/#optimizationminimizer).
+إذا قررت تجربة ملحق تصغير آخر، فتأكد من أن اختيارك الجديد يحذف أيضًا الكود الميت كما هو موضح في دليل [إزالة الكود غير المستخدم](/guides/tree-shaking)، وقدّمه عبر [`optimization.minimizer`](/configuration/optimization/#optimizationminimizer).
 
-## Source Mapping
+## خرائط المصدر
 
-We encourage you to have source maps enabled in production, as they are useful for debugging as well as running benchmark tests. That said, you should choose one with a fairly quick build speed that's recommended for production use (see [`devtool`](/configuration/devtool)). For this guide, we'll use the `source-map` option in the _production_ as opposed to the `inline-source-map` we used in the _development_:
+نشجعك على تفعيل خرائط المصدر في الإنتاج، لأنها مفيدة للتصحيح وكذلك لتشغيل اختبارات القياس. ومع ذلك، ينبغي اختيار خيار بسرعة بناء معقولة وموصى به للاستخدام في الإنتاج، راجع [`devtool`](/configuration/devtool). في هذا الدليل سنستخدم خيار `source-map` في _الإنتاج_ بدلًا من `inline-source-map` الذي استخدمناه في _التطوير_:
 
 **webpack.prod.js**
 
@@ -224,14 +202,14 @@ We encourage you to have source maps enabled in production, as they are useful f
   });
 ```
 
-T> Avoid `inline-***` and `eval-***` use in production as they can increase bundle size and reduce the overall performance.
+T> تجنب استخدام `inline-***` و`eval-***` في الإنتاج، لأنها قد تزيد حجم الحزمة وتخفض الأداء العام.
 
-## Minimize CSS
+## تصغير CSS
 
-It is crucial to minimize your CSS for production. Please see the [Minimizing for Production](/plugins/mini-css-extract-plugin/#minimizing-for-production) section.
+من المهم جدًا تصغير CSS للإنتاج. يرجى مراجعة قسم [التصغير للإنتاج](/plugins/mini-css-extract-plugin/#minimizing-for-production).
 
-## CLI Alternatives
+## بدائل CLI
 
-Many of the options described above can be set as command line arguments. For example, [`optimization.minimize`](/configuration/optimization/#optimizationminimize) can be set with `--optimization-minimize`, and [`mode`](/configuration/mode/) can be set with `--mode`. Run `npx webpack --help=verbose` for a full list of CLI arguments.
+يمكن تعيين كثير من الخيارات الموضحة أعلاه كوسيطات في سطر الأوامر. على سبيل المثال، يمكن تعيين [`optimization.minimize`](/configuration/optimization/#optimizationminimize) باستخدام `--optimization-minimize`، ويمكن تعيين [`mode`](/configuration/mode/) باستخدام `--mode`. شغّل `npx webpack --help=verbose` للحصول على قائمة كاملة بوسيطات CLI.
 
-While these shorthand methods are useful, we recommend setting these options in a webpack configuration file for more configurability.
+مع أن هذه الطرق المختصرة مفيدة، فإننا نوصي بتعيين هذه الخيارات داخل ملف إعداد webpack للحصول على قابلية ضبط أكبر.
diff --git a/src/content/guides/progressive-web-application.mdx b/src/content/guides/progressive-web-application.mdx
index 29b52a2b5f62..5dbdec528a5a 100644
--- a/src/content/guides/progressive-web-application.mdx
+++ b/src/content/guides/progressive-web-application.mdx
@@ -1,25 +1,21 @@
 ---
-title: Progressive Web Application
+title: تطبيق ويب تقدمي
 sort: 22
 contributors:
-  - johnnyreilly
-  - chenxsan
-  - EugeneHlushko
-  - benschac
-  - aholzner
+  - arabpolice
 ---
 
-T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide.
+T> يوسّع هذا الدليل أمثلة الكود الموجودة في دليل [إدارة المخرجات](/guides/output-management).
 
-Progressive Web Applications (or PWAs) are web apps that deliver an experience similar to native applications. There are many things that can contribute to that. Of these, the most significant is the ability for an app to be able to function when **offline**. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/).
+تطبيقات الويب التقدمية (أو PWAs) هي تطبيقات ويب تقدم تجربة مشابهة للتطبيقات الأصلية. هناك عوامل كثيرة قد تساهم في ذلك، وأهمها قدرة التطبيق على العمل عند **انقطاع الاتصال**. يتحقق ذلك باستخدام تقنية ويب تُسمى [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/).
 
-This section will focus on adding an offline experience to our app. We'll achieve this using a Google project called [Workbox](https://github.com/GoogleChrome/workbox) which provides tools that help make offline support for web apps easier to setup.
+سيركز هذا القسم على إضافة تجربة عمل دون اتصال إلى تطبيقنا. سنحقق ذلك باستخدام مشروع من Google باسم [Workbox](https://github.com/GoogleChrome/workbox)، وهو يوفر أدوات تساعد على تسهيل إعداد دعم العمل دون اتصال لتطبيقات الويب.
 
-## We Don't Work Offline Now
+## لا نعمل دون اتصال حاليًا
 
-So far, we've been viewing the output by going directly to the local file system. Typically though, a real user accesses a web app over a network; their browser talking to a **server** which will serve up the required assets (e.g. `.html`, `.js`, and `.css` files).
+حتى الآن، كنا نعرض المخرجات بالوصول مباشرة إلى نظام الملفات المحلي. لكن عادةً يصل المستخدم الحقيقي إلى تطبيق الويب عبر الشبكة؛ حيث يتواصل المتصفح مع **خادم** يقدّم الملفات المطلوبة (مثل ملفات `.html` و `.js` و `.css`).
 
-So let's test what the current experience is like using a server with more basic features. Let's use the [http-server](https://www.npmjs.com/package/http-server) package: `npm install http-server --save-dev`. We'll also amend the `scripts` section of our `package.json` to add in a `start` script:
+لذلك دعنا نختبر التجربة الحالية باستخدام خادم بميزات أساسية. سنستخدم حزمة [http-server](https://www.npmjs.com/package/http-server): `npm install http-server --save-dev`. سنعدّل أيضًا قسم `scripts` في ملف `package.json` لإضافة سكربت `start`:
 
 **package.json**
 
@@ -35,9 +31,9 @@ So let's test what the current experience is like using a server with more basic
 }
 ```
 
-Note: [webpack DevServer](/configuration/dev-server/) writes in-memory by default. We'll need to enable [devserverdevmiddleware.writeToDisk](/configuration/dev-server/#devserverdevmiddleware) option in order for http-server to be able to serve files from `./dist` directory.
+ملاحظة: يكتب [webpack DevServer](/configuration/dev-server/) في الذاكرة افتراضيًا. سنحتاج إلى تفعيل خيار [devserverdevmiddleware.writeToDisk](/configuration/dev-server/#devserverdevmiddleware) حتى يتمكن http-server من خدمة الملفات من مجلد `./dist`.
 
-If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm start`. This should produce the following output:
+إذا لم تكن قد فعلت ذلك سابقًا، فنفّذ الأمر `npm run build` لبناء مشروعك. ثم نفّذ الأمر `npm start`. ينبغي أن ينتج عن ذلك المخرجات التالية:
 
 ```bash
 > http-server dist
@@ -50,13 +46,13 @@ Available on:
 Hit CTRL-C to stop the server
 ```
 
-If you open your browser to `http://localhost:8080` (i.e. `http://127.0.0.1`) you should see your webpack application being served from the `dist` directory. If you stop the server and refresh, the webpack application is no longer available.
+إذا فتحت المتصفح على `http://localhost:8080` (أي `http://127.0.0.1`) فينبغي أن ترى تطبيق webpack يُخدم من مجلد `dist`. إذا أوقفت الخادم ثم حدّثت الصفحة، فلن يكون تطبيق webpack متاحًا بعد ذلك.
 
-This is what we aim to change. Once we reach the end of this module we should be able to stop the server, hit refresh and still see our application.
+هذا ما نهدف إلى تغييره. عند الوصول إلى نهاية هذا القسم، ينبغي أن نتمكن من إيقاف الخادم، ثم تحديث الصفحة، ومع ذلك سنظل نرى تطبيقنا.
 
-## Adding Workbox
+## إضافة Workbox
 
-Let's add the Workbox webpack plugin and adjust the `webpack.config.js` file:
+لنضف ملحق Workbox الخاص بـ webpack ونعدّل ملف `webpack.config.js`:
 
 ```bash
 npm install workbox-webpack-plugin --save-dev
@@ -84,8 +80,8 @@ npm install workbox-webpack-plugin --save-dev
 +       title: 'Progressive Web Application',
       }),
 +     new WorkboxPlugin.GenerateSW({
-+       // these options encourage the ServiceWorkers to get in there fast
-+       // and not allow any straggling "old" SWs to hang around
++       // تشجع هذه الخيارات ServiceWorkers على العمل سريعًا
++       // ولا تسمح لأي SWs "قديمة" متأخرة بالبقاء
 +       clientsClaim: true,
 +       skipWaiting: true,
 +     }),
@@ -98,7 +94,7 @@ npm install workbox-webpack-plugin --save-dev
   };
 ```
 
-With that in place, let's see what happens when we do an `npm run build`:
+بعد ذلك، لنرَ ما يحدث عند تنفيذ `npm run build`:
 
 ```bash
 ...
@@ -111,13 +107,13 @@ precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js  268 bytes          [emitt
 ...
 ```
 
-As you can see, we now have 2 extra files being generated; `service-worker.js` and the more verbose `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. `service-worker.js` is the Service Worker file and `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` is a file that `service-worker.js` requires so it can run. Your own generated files will likely be different; but you should have a `service-worker.js` file there.
+كما ترى، أصبح لدينا الآن ملفان إضافيان يتم توليدهما: `service-worker.js` والملف الأطول اسمًا `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js`. ملف `service-worker.js` هو ملف Service Worker، أما `precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js` فهو ملف يحتاجه `service-worker.js` حتى يعمل. غالبًا ستكون الملفات المولّدة لديك مختلفة، لكن ينبغي أن تجد ملف `service-worker.js` هناك.
 
-So we're now at the happy point of having produced a Service Worker. What's next?
+إذن وصلنا الآن إلى مرحلة إنتاج Service Worker. ما الخطوة التالية؟
 
-## Registering Our Service Worker
+## تسجيل Service Worker الخاص بنا
 
-Let's allow our Service Worker to come out and play by registering it. We'll do that by adding the registration code below:
+لنسمح لـ Service Worker بالعمل عبر تسجيله. سنفعل ذلك بإضافة كود التسجيل التالي:
 
 **index.js**
 
@@ -136,14 +132,14 @@ Let's allow our Service Worker to come out and play by registering it. We'll do
 + }
 ```
 
-Once more `npm run build` to build a version of the app including the registration code. Then serve it with `npm start`. Navigate to `http://localhost:8080` and take a look at the console. Somewhere in there you should see:
+نفّذ `npm run build` مرة أخرى لبناء نسخة من التطبيق تتضمن كود التسجيل. ثم اخدمها باستخدام `npm start`. انتقل إلى `http://localhost:8080` وألقِ نظرة على وحدة التحكم. ينبغي أن ترى في مكان ما:
 
 ```bash
 SW registered
 ```
 
-Now to test it. Stop your server and refresh your page. If your browser supports Service Workers then you should still be looking at your application. However, it has been served up by your Service Worker and **not** by the server.
+والآن لنختبر ذلك. أوقف الخادم وحدّث الصفحة. إذا كان متصفحك يدعم Service Workers، فينبغي أن تظل ترى تطبيقك. لكنه هذه المرة تم تقديمه بواسطة Service Worker الخاص بك و**ليس** بواسطة الخادم.
 
-## Conclusion
+## الخاتمة
 
-You have built an offline app using the Workbox project. You've started the journey of turning your web app into a PWA. You may now want to think about taking things further. A good resource to help you with that can be found [here](https://web.dev/progressive-web-apps/).
+لقد بنيت تطبيقًا يعمل دون اتصال باستخدام مشروع Workbox. وبدأت رحلة تحويل تطبيق الويب الخاص بك إلى PWA. قد ترغب الآن في التفكير في خطوات أبعد. يمكنك العثور على مورد جيد يساعدك في ذلك [هنا](https://web.dev/progressive-web-apps/).
diff --git a/src/content/guides/public-path.mdx b/src/content/guides/public-path.mdx
index ad61105a47e5..08d581157491 100644
--- a/src/content/guides/public-path.mdx
+++ b/src/content/guides/public-path.mdx
@@ -1,29 +1,26 @@
 ---
-title: Public Path
+title: المسار العام
 sort: 23
 contributors:
-  - rafaelrinaldi
-  - chrisVillanueva
-  - gonzoyumo
-  - chenxsan
+  - arabpolice
 ---
 
-The [`publicPath`](/configuration/output/#outputpublicpath) configuration option can be quite useful in a variety of scenarios. It allows you to specify the base path for all the assets within your application.
+يمكن أن يكون خيار الإعداد [`publicPath`](/configuration/output/#outputpublicpath) مفيدًا جدًا في سيناريوهات متعددة. فهو يسمح لك بتحديد المسار الأساسي لجميع ملفات assets داخل تطبيقك.
 
-## Use Cases
+## حالات الاستخدام
 
-There are a few use cases in real applications where this feature becomes especially neat. Essentially, every file emitted to your `output.path` directory will be referenced from the `output.publicPath` location. This includes child chunks (created via [code splitting](/guides/code-splitting/)) and any other assets (e.g. images, fonts, etc.) that are a part of your dependency graph.
+توجد بعض حالات الاستخدام في التطبيقات الحقيقية حيث تصبح هذه الميزة مفيدة على نحو خاص. بشكل أساسي، كل ملف يتم إخراجه إلى مجلد `output.path` سيُشار إليه من موقع `output.publicPath`. يشمل ذلك الأجزاء الفرعية (التي تُنشأ عبر [تقسيم الكود](/guides/code-splitting/)) وأي ملفات assets أخرى (مثل الصور والخطوط وغيرها) تكون جزءًا من dependency graph الخاص بك.
 
-### Environment Based
+### بناءً على البيئة
 
-In development for example, we might have an `assets/` folder that lives on the same level of our index page. This is fine, but what if we wanted to host all these static assets on a CDN in production?
+في التطوير مثلًا، قد يكون لدينا مجلد `assets/` موجود على المستوى نفسه لصفحة index. هذا جيد، لكن ماذا لو أردنا استضافة كل هذه الملفات الثابتة على CDN في الإنتاج؟
 
-To approach this problem you can easily use a good old environment variable. Let's say we have a variable `ASSET_PATH`:
+لمعالجة هذه المشكلة يمكنك ببساطة استخدام متغير بيئة مألوف. لنفترض أن لدينا المتغير `ASSET_PATH`:
 
 ```js
 import webpack from "webpack";
 
-// Try the environment variable, otherwise use root
+// جرّب متغير البيئة، وإلا فاستخدم الجذر
 const ASSET_PATH = process.env.ASSET_PATH || "/";
 
 export default {
@@ -32,7 +29,7 @@ export default {
   },
 
   plugins: [
-    // This makes it possible for us to safely use env vars on our code
+    // يتيح لنا هذا استخدام متغيرات البيئة بأمان داخل الكود
     new webpack.DefinePlugin({
       "process.env.ASSET_PATH": JSON.stringify(ASSET_PATH),
     }),
@@ -40,19 +37,17 @@ export default {
 };
 ```
 
-### On The Fly
+### أثناء التشغيل
 
-Another possible use case is to set the `publicPath` on the fly. Webpack exposes a global variable called `__webpack_public_path__` that allows you to do that. In your application's entry point, you can do this:
+حالة استخدام أخرى ممكنة هي تعيين `publicPath` أثناء التشغيل. يوفّر Webpack متغيرًا عامًا باسم `__webpack_public_path__` يسمح لك بذلك. في نقطة إدخال تطبيقك، يمكنك فعل الآتي:
 
 ```js
 __webpack_public_path__ = process.env.ASSET_PATH;
 ```
 
-That's all you need. Since we're already using the `DefinePlugin` on our
-configuration, `process.env.ASSET_PATH` will always be defined so we can safely
-do that.
+هذا كل ما تحتاج إليه. وبما أننا نستخدم بالفعل `DefinePlugin` في إعداداتنا، فسيكون `process.env.ASSET_PATH` معرّفًا دائمًا، ولذلك يمكننا فعل ذلك بأمان.
 
-W> Be aware that if you use ES6 module imports in your entry file the `__webpack_public_path__` assignment will be done after the imports. In such cases, you'll have to move the public path assignment to its own dedicated module and then import it on top of your entry.js:
+W> انتبه إلى أنك إذا استخدمت استيرادات وحدات ES6 في ملف الإدخال، فسيتم تنفيذ إسناد `__webpack_public_path__` بعد الاستيرادات. في هذه الحالات، ستحتاج إلى نقل إسناد المسار العام إلى وحدة مخصصة، ثم استيرادها في أعلى ملف entry.js:
 
 ```js
 // entry.js
@@ -60,9 +55,9 @@ import "./public-path";
 import "./app";
 ```
 
-### Automatic publicPath
+### publicPath التلقائي
 
-There are chances that you don't know what the publicPath will be in advance, and webpack can handle it automatically for you by determining the public path from variables like [`import.meta.url`](/api/module-variables/#importmetaurl), [`document.currentScript`](https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript), `script.src` or `self.location`. What you need is to set [`output.publicPath`](/configuration/output/#outputpublicpath) to `'auto'`:
+قد لا تعرف مسبقًا ما ستكون قيمة publicPath، ويمكن لـ webpack التعامل مع ذلك تلقائيًا عبر تحديد المسار العام من متغيرات مثل [`import.meta.url`](/api/module-variables/#importmetaurl)، أو [`document.currentScript`](https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript)، أو `script.src`، أو `self.location`. ما تحتاج إليه هو تعيين [`output.publicPath`](/configuration/output/#outputpublicpath) إلى `'auto'`:
 
 **webpack.config.js**
 
@@ -74,4 +69,4 @@ export default {
 };
 ```
 
-Note that in cases where `document.currentScript` is not supported, e.g., IE browser, you will have to include a polyfill like [`currentScript Polyfill`](https://github.com/amiller-gh/currentScript-polyfill).
+لاحظ أنه في الحالات التي لا يكون فيها `document.currentScript` مدعومًا، مثل متصفح IE، ستحتاج إلى تضمين polyfill مثل [`currentScript Polyfill`](https://github.com/amiller-gh/currentScript-polyfill).
diff --git a/src/content/guides/shimming.mdx b/src/content/guides/shimming.mdx
index c5624d21a409..43b94ddeb2e0 100644
--- a/src/content/guides/shimming.mdx
+++ b/src/content/guides/shimming.mdx
@@ -1,59 +1,46 @@
 ---
-title: Shimming
+title: التلاؤم
 sort: 20
 contributors:
-  - pksjce
-  - jhnns
-  - simon04
-  - jeremenichelli
-  - svyandun
-  - byzyk
-  - EugeneHlushko
-  - AnayaDesign
-  - dhurlburtusa
-  - plr108
-  - NicolasLetellier
-  - wizardofhogwarts
-  - snitin315
-  - chenxsan
+  - arabpolice
 related:
-  - title: Reward modern browser users script
+  - title: سكربت مكافأة مستخدمي المتصفحات الحديثة
     url: https://medium.com/hackernoon/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7
-  - title: useBuiltIns in babel-preset-env
+  - title: useBuiltIns في babel-preset-env
     url: https://babeljs.io/docs/en/babel-preset-env#usebuiltins
 ---
 
-The `webpack` compiler can understand modules written as ES2015 modules, CommonJS or AMD. However, some third party libraries may expect global dependencies (e.g. `$` for `jQuery`). The libraries might also create globals which need to be exported. These "broken modules" are one instance where _shimming_ comes into play.
+يمكن لمصرّف `webpack` فهم الوحدات المكتوبة بصيغة ES2015 modules أو CommonJS أو AMD. ومع ذلك، قد تتوقع بعض المكتبات الخارجية اعتماديات عامة (مثل `$` لـ `jQuery`). وقد تنشئ هذه المكتبات أيضًا متغيرات عامة يجب تصديرها. هذه "الوحدات المكسورة" هي إحدى الحالات التي يظهر فيها دور _shimming_.
 
-W> **We don't recommend using globals!** The whole concept behind webpack is to allow more modular front-end development. This means writing isolated modules that are well contained and do not rely on hidden dependencies (e.g. globals). Please use these features only when necessary.
+W> **لا نوصي باستخدام المتغيرات العامة!** الفكرة الكاملة وراء webpack هي السماح بتطوير واجهات أمامية أكثر modularity. وهذا يعني كتابة وحدات معزولة ومحكمة لا تعتمد على اعتماديات مخفية (مثل المتغيرات العامة). يرجى استخدام هذه الميزات عند الضرورة فقط.
 
-Another instance where _shimming_ can be useful is when you want to [polyfill](https://en.wikipedia.org/wiki/Polyfill_%28programming%29) browser functionality to support more users. In this case, you may only want to deliver those polyfills to the browsers that need patching (i.e. load them on demand).
+هناك حالة أخرى يمكن أن يكون فيها _shimming_ مفيدًا، وهي عندما تريد [polyfill](https://en.wikipedia.org/wiki/Polyfill_%28programming%29) لوظائف المتصفح من أجل دعم عدد أكبر من المستخدمين. في هذه الحالة، قد ترغب في إرسال تلك polyfills فقط إلى المتصفحات التي تحتاج إلى ترقيع (أي تحميلها عند الطلب).
 
-The following article will walk through both of these use cases.
+ستعرض المقالة التالية هاتين الحالتين.
 
-T> For simplicity, this guide stems from the examples in [Getting Started](/guides/getting-started). Please make sure you are familiar with the setup there before moving on.
+T> للتبسيط، يستند هذا الدليل إلى الأمثلة في [البدء](/guides/getting-started). يُرجى التأكد من أنك ملم بالإعداد هناك قبل المتابعة.
 
-## Shimming Globals
+## تلاؤم المتغيرات العامة
 
-Let's start with the first use case of shimming global variables. Before we do anything let's take another look at our project:
+لنبدأ بحالة الاستخدام الأولى، وهي shimming للمتغيرات العامة. قبل أن نفعل أي شيء، دعنا نلقي نظرة أخرى على مشروعنا:
 
 **project**
 
 ```diff
 webpack-demo
- ├── package.json
- ├── package-lock.json
- ├── webpack.config.js
- ├── /dist
- │   └── index.html
- ├── /src
- │   └── index.js
- └── /node_modules
+ ├── package.json
+ ├── package-lock.json
+ ├── webpack.config.js
+ ├── /dist
+ │   └── index.html
+ ├── /src
+ │   └── index.js
+ └── /node_modules
 ```
 
-Remember that `lodash` package we were using? For demonstration purposes, let's say we wanted to instead provide this as a global throughout our application. To do this, we can use `ProvidePlugin`.
+تتذكر حزمة `lodash` التي كنا نستخدمها؟ لأغراض العرض، لنفترض أننا أردنا بدلًا من ذلك توفيرها كمتغير عام في كامل تطبيقنا. للقيام بذلك، يمكننا استخدام `ProvidePlugin`.
 
-The [`ProvidePlugin`](/plugins/provide-plugin) makes a package available as a variable in every module compiled through webpack. If webpack sees that variable used, it will include the given package in the final bundle. Let's go ahead by removing the `import` statement for `lodash` and instead provide it via the plugin:
+يجعل [`ProvidePlugin`](/plugins/provide-plugin) حزمةً ما متاحة كمتغير في كل وحدة يتم تجميعها عبر webpack. إذا رأى webpack استخدام ذلك المتغير، فسيُضمّن الحزمة المحددة في الحزمة النهائية. دعنا نمضي قدمًا بإزالة تعليمة `import` الخاصة بـ `lodash` وتوفيرها بدلًا من ذلك عبر الملحق:
 
 **src/index.js**
 
@@ -98,11 +85,11 @@ const __dirname = path.dirname(__filename);
  };
 ```
 
-What we've essentially done here is tell webpack...
+ما فعلناه فعليًا هنا هو إخبار webpack بما يلي...
 
-> If you encounter at least one instance of the variable `_`, include the `lodash` package and provide it to the modules that need it.
+> إذا صادفت أي استخدام للمتغير `_`، فضمّن حزمة `lodash` ووفّرها للوحدات التي تحتاج إليها.
 
-If we run a build, we should still see the same output:
+إذا شغّلنا البناء، فيجب أن نرى الناتج نفسه:
 
 ```bash
 $ npm run build
@@ -118,7 +105,7 @@ cacheable modules 530 KiB
 webpack 5.x.x compiled successfully in 2910 ms
 ```
 
-We can also use the `ProvidePlugin` to expose a single export of a module by configuring it with an "array path" (e.g. `[module, child, ...children?]`). So let's imagine we only wanted to provide the `join` method from `lodash` wherever it's invoked:
+يمكننا أيضًا استخدام `ProvidePlugin` لكشف تصدير واحد من وحدة عبر إعداده باستخدام "مسار مصفوفة" (مثل `[module, child, ...children?]`). لنتخيل أننا نريد فقط توفير دالة `join` من `lodash` أينما تم استدعاؤها:
 
 **src/index.js**
 
@@ -160,11 +147,11 @@ const __dirname = path.dirname(__filename);
  };
 ```
 
-This would go nicely with [Tree Shaking](/guides/tree-shaking) as the rest of the `lodash` library should get dropped.
+سيتوافق هذا جيدًا مع [Tree Shaking](/guides/tree-shaking)، إذ ينبغي إسقاط بقية مكتبة `lodash`.
 
-## Granular Shimming
+## Shimming دقيق
 
-Some legacy modules rely on `this` being the `window` object. Let's update our `index.js` so this is the case:
+تعتمد بعض الوحدات القديمة على أن تكون قيمة `this` هي كائن `window`. دعنا نحدّث `index.js` لدينا بحيث تكون هذه هي الحالة:
 
 ```diff
  function component() {
@@ -172,7 +159,7 @@ Some legacy modules rely on `this` being the `window` object. Let's update our `
 
    element.innerHTML = join(['Hello', 'webpack'], ' ');
 
-+  // Assume we are in the context of `window`
++  // افترض أننا داخل سياق `window`
 +  this.alert("Hmmm, this probably isn't a great idea...");
 +
    return element;
@@ -181,7 +168,7 @@ Some legacy modules rely on `this` being the `window` object. Let's update our `
  document.body.appendChild(component());
 ```
 
-This becomes a problem when the module is executed in a CommonJS context where `this` is equal to `module.exports`. In this case you can override `this` using the [`imports-loader`](/loaders/imports-loader/):
+يصبح هذا مشكلة عندما يتم تنفيذ الوحدة في سياق CommonJS حيث تكون قيمة `this` مساوية لـ `module.exports`. في هذه الحالة يمكنك تجاوز `this` باستخدام [`imports-loader`](/loaders/imports-loader/):
 
 **webpack.config.js**
 
@@ -215,22 +202,22 @@ This becomes a problem when the module is executed in a CommonJS context where `
  };
 ```
 
-## Global Exports
+## التصديرات العامة
 
-Let's say a library creates a global variable that it expects its consumers to use. We can add a small module to our setup to demonstrate this:
+لنفترض أن مكتبة تنشئ متغيرًا عامًا وتتوقع من المستهلكين استخدامه. يمكننا إضافة وحدة صغيرة إلى إعدادنا لتوضيح ذلك:
 
 **project**
 
 ```diff
   webpack-demo
-  ├── package.json
-  ├── package-lock.json
-  ├── webpack.config.js
-  ├── /dist
-  ├── /src
-  │   ├── index.js
-+ │   ├── globals.js
-  └── /node_modules
+  ├── package.json
+  ├── package-lock.json
+  ├── webpack.config.js
+  ├── /dist
+  ├── /src
+  │   ├── index.js
++ │   ├── globals.js
+  └── /node_modules
 ```
 
 **src/globals.js**
@@ -247,7 +234,7 @@ const helpers = {
 };
 ```
 
-Now, while you'd likely never do this in your own source code, you may encounter a dated library you'd like to use that contains similar code to what's shown above. In this case, we can use [`exports-loader`](/loaders/exports-loader/), to export that global variable as a normal module export. For instance, in order to export `file` as `file` and `helpers.parse` as `parse`:
+الآن، رغم أنك غالبًا لن تفعل هذا أبدًا في كود المصدر الخاص بك، فقد تصادف مكتبة قديمة تريد استخدامها وتحتوي على كود مشابه لما هو موضح أعلاه. في هذه الحالة، يمكننا استخدام [`exports-loader`](/loaders/exports-loader/) لتصدير ذلك المتغير العام كتصدير وحدة عادي. على سبيل المثال، لتصدير `file` باسم `file` و `helpers.parse` باسم `parse`:
 
 **webpack.config.js**
 
@@ -286,19 +273,19 @@ Now, while you'd likely never do this in your own source code, you may encounter
  };
 ```
 
-Now from within our entry script (i.e. `src/index.js`), we could use `const { file, parse } = require('./globals.js');` and all should work smoothly.
+الآن، من داخل سكربت الإدخال لدينا (أي `src/index.js`)، يمكننا استخدام `const { file, parse } = require('./globals.js');` ويجب أن يعمل كل شيء بسلاسة.
 
-## Loading Polyfills
+## تحميل Polyfills
 
-Almost everything we've discussed thus far has been in relation to handling legacy packages. Let's move on to our second topic: **polyfills**.
+كل ما ناقشناه تقريبًا حتى الآن كان متعلقًا بالتعامل مع الحزم القديمة. دعنا ننتقل إلى موضوعنا الثاني: **polyfills**.
 
-There's a lot of ways to load polyfills. For example, to include the [`babel-polyfill`](https://babeljs.io/docs/en/babel-polyfill/) we might:
+توجد طرق كثيرة لتحميل polyfills. على سبيل المثال، لتضمين [`babel-polyfill`](https://babeljs.io/docs/en/babel-polyfill/) قد نقوم بما يلي:
 
 ```bash
 npm install --save babel-polyfill
 ```
 
-and `import` it so as to include it in our main bundle:
+ونقوم بـ `import` له لتضمينه في الحزمة الرئيسية:
 
 **src/index.js**
 
@@ -310,7 +297,7 @@ and `import` it so as to include it in our main bundle:
 
    element.innerHTML = join(['Hello', 'webpack'], ' ');
 
-   // Assume we are in the context of `window`
+   // افترض أننا داخل سياق `window`
    this.alert("Hmmm, this probably isn't a great idea...");
 
    return element;
@@ -319,14 +306,14 @@ and `import` it so as to include it in our main bundle:
  document.body.appendChild(component());
 ```
 
-T> Note that we aren't binding the `import` to a variable. This is because polyfills run on their own, prior to the rest of the code base, allowing us to then assume certain native functionality exists.
+T> لاحظ أننا لا نربط `import` بمتغير. السبب أن polyfills تعمل وحدها قبل بقية قاعدة الكود، مما يسمح لنا بعد ذلك بافتراض وجود وظائف أصلية معينة.
 
-Note that this approach prioritizes correctness over bundle size. To be safe and robust, polyfills/shims must run **before all other code**, and thus either need to load synchronously, or, all app code needs to load after all polyfills/shims load.
-There are many misconceptions in the community, as well, that modern browsers "don't need" polyfills, or that polyfills/shims merely serve to add missing features - in fact, they often _repair broken implementations_, even in the most modern of browsers.
-The best practice thus remains to unconditionally and synchronously load all polyfills/shims, despite the bundle size cost this incurs.
+لاحظ أن هذا النهج يعطي الأولوية للصحة على حساب حجم الحزمة. لكي تكون polyfills/shims آمنة ومتينة، يجب أن تعمل **قبل كل الكود الآخر**، ولذلك تحتاج إما إلى التحميل بشكل متزامن، أو يجب تحميل كل كود التطبيق بعد اكتمال تحميل جميع polyfills/shims.
+توجد أيضًا مفاهيم خاطئة كثيرة في المجتمع مفادها أن المتصفحات الحديثة "لا تحتاج" إلى polyfills، أو أن polyfills/shims لا تفعل سوى إضافة ميزات مفقودة؛ في الواقع، كثيرًا ما تقوم _بإصلاح تنفيذات معطوبة_، حتى في أحدث المتصفحات.
+لذلك تبقى أفضل ممارسة هي تحميل كل polyfills/shims بلا شروط وبشكل متزامن، رغم تكلفة حجم الحزمة التي يسببها ذلك.
 
-If you feel that you have mitigated these concerns and wish to incur the risk of brokenness, here's one way you might do it:
-Let's move our `import` to a new file and add the [`whatwg-fetch`](https://github.com/github/fetch) polyfill:
+إذا كنت ترى أنك خففت هذه المخاوف وترغب في تحمل خطر التعطل، فإليك طريقة يمكن أن تفعل بها ذلك:
+دعنا ننقل `import` إلى ملف جديد ونضيف polyfill [`whatwg-fetch`](https://github.com/github/fetch):
 
 ```bash
 npm install --save whatwg-fetch
@@ -342,7 +329,7 @@ npm install --save whatwg-fetch
 
    element.innerHTML = join(['Hello', 'webpack'], ' ');
 
-   // Assume we are in the context of `window`
+   // افترض أننا داخل سياق `window`
    this.alert("Hmmm, this probably isn't a great idea...");
 
    return element;
@@ -355,15 +342,15 @@ npm install --save whatwg-fetch
 
 ```diff
   webpack-demo
-  ├── package.json
-  ├── package-lock.json
-  ├── webpack.config.js
-  ├── /dist
-  ├── /src
-  │   ├── index.js
-  │   ├── globals.js
-+ │   └── polyfills.js
-  └── /node_modules
+  ├── package.json
+  ├── package-lock.json
+  ├── webpack.config.js
+  ├── /dist
+  ├── /src
+  │   ├── index.js
+  │   ├── globals.js
++ │   └── polyfills.js
+  └── /node_modules
 ```
 
 **src/polyfills.js**
@@ -415,7 +402,7 @@ import "whatwg-fetch";
  };
 ```
 
-With that in place, we can add the logic to conditionally load our new `polyfills.bundle.js` file. How you make this decision depends on the technologies and browsers you need to support. We'll do some testing to determine whether our polyfills are needed:
+مع وجود ذلك، يمكننا إضافة المنطق لتحميل ملف `polyfills.bundle.js` الجديد شرطيًا. تعتمد طريقة اتخاذ هذا القرار على التقنيات والمتصفحات التي تحتاج إلى دعمها. سنجري بعض الاختبارات لتحديد ما إذا كانت polyfills مطلوبة:
 
 **dist/index.html**
 
@@ -444,7 +431,7 @@ With that in place, we can add the logic to conditionally load our new `polyfill
  </html>
 ```
 
-Now we can `fetch` some data within our entry script:
+الآن يمكننا تنفيذ `fetch` لبعض البيانات داخل سكربت الإدخال:
 
 **src/index.js**
 
@@ -454,7 +441,7 @@ Now we can `fetch` some data within our entry script:
 
    element.innerHTML = join(['Hello', 'webpack'], ' ');
 
-   // Assume we are in the context of `window`
+   // افترض أننا داخل سياق `window`
    this.alert("Hmmm, this probably isn't a great idea...");
 
    return element;
@@ -475,11 +462,11 @@ Now we can `fetch` some data within our entry script:
 +  );
 ```
 
-If we run our build, another `polyfills.bundle.js` file will be emitted and everything should still run smoothly in the browser. Note that this set up could likely be improved upon but it should give you a good idea of how you can provide polyfills only to the users that actually need them.
+إذا شغّلنا البناء، فسيتم إصدار ملف `polyfills.bundle.js` آخر ويجب أن يستمر كل شيء في العمل بسلاسة في المتصفح. لاحظ أن هذا الإعداد يمكن غالبًا تحسينه، لكنه يجب أن يعطيك فكرة جيدة عن كيفية توفير polyfills فقط للمستخدمين الذين يحتاجون إليها فعلًا.
 
-## Further Optimizations
+## تحسينات إضافية
 
-The `babel-preset-env` package uses [browserslist](https://github.com/browserslist/browserslist) to transpile only what is not supported in your browsers matrix. This preset comes with the [`useBuiltIns`](https://babeljs.io/docs/en/babel-preset-env#usebuiltins) option, `false` by default, which converts your global `babel-polyfill` import to a more granular feature by feature `import` pattern:
+تستخدم حزمة `babel-preset-env` مكتبة [browserslist](https://github.com/browserslist/browserslist) لتصيير ما لا تدعمه مصفوفة المتصفحات لديك فقط. يأتي هذا preset مع خيار [`useBuiltIns`](https://babeljs.io/docs/en/babel-preset-env#usebuiltins)، وقيمته الافتراضية `false`، والذي يحوّل استيراد `babel-polyfill` العام لديك إلى نمط `import` أكثر دقة، ميزةً بميزة:
 
 {/* eslint-skip */}
 
@@ -491,18 +478,18 @@ import "core-js/modules/web.immediate";
 import "core-js/modules/web.dom.iterable";
 ```
 
-See [the babel-preset-env documentation](https://babeljs.io/docs/en/babel-preset-env) for more information.
+راجع [توثيق babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) لمزيد من المعلومات.
 
-## Node Built-Ins
+## المدمجات الخاصة بـ Node
 
-Node built-ins, like `process`, can be polyfilled right directly from your configuration file without the use of any special loaders or plugins. See the [node configuration page](/configuration/node) for more information and examples.
+يمكن عمل polyfill للمدمجات الخاصة بـ Node، مثل `process`، مباشرةً من ملف الإعدادات دون استخدام أي loaders أو plugins خاصة. راجع [صفحة إعدادات node](/configuration/node) لمزيد من المعلومات والأمثلة.
 
-## Other Utilities
+## أدوات أخرى
 
-There are a few other tools that can help when dealing with legacy modules.
+توجد بعض الأدوات الأخرى التي يمكن أن تساعد عند التعامل مع الوحدات القديمة.
 
-When there is no AMD/CommonJS version of the module and you want to include the `dist`, you can flag this module in [`noParse`](/configuration/module/#modulenoparse). This will cause webpack to include the module without parsing it or resolving `import` and `require()` statements. This practice is also used to improve the build performance.
+عندما لا توجد نسخة AMD/CommonJS من الوحدة وتريد تضمين `dist`، يمكنك تعليم هذه الوحدة في [`noParse`](/configuration/module/#modulenoparse). سيؤدي ذلك إلى جعل webpack يضمّن الوحدة دون تحليلها أو حل تعليمات `import` و `require()`. تُستخدم هذه الممارسة أيضًا لتحسين أداء البناء.
 
-W> Any feature requiring the AST, like the `ProvidePlugin`, will not work.
+W> أي ميزة تتطلب AST، مثل `ProvidePlugin`، لن تعمل.
 
-Lastly, there are some modules that support multiple [module styles](/concepts/modules); e.g. a combination of AMD, CommonJS, and legacy. In most of these cases, they first check for `define` and then use some quirky code to export properties. In these cases, it could help to force the CommonJS path by setting `additionalCode=var%20define%20=%20false;` via the [`imports-loader`](/loaders/imports-loader/).
+أخيرًا، توجد بعض الوحدات التي تدعم عدة [أنماط للوحدات](/concepts/modules)، مثل مزيج من AMD و CommonJS والنمط القديم. في معظم هذه الحالات، تتحقق أولًا من `define` ثم تستخدم كودًا غريبًا بعض الشيء لتصدير الخصائص. في هذه الحالات، قد يساعد إجبار مسار CommonJS عبر تعيين `additionalCode=var%20define%20=%20false;` بواسطة [`imports-loader`](/loaders/imports-loader/).
diff --git a/src/content/guides/tree-shaking.mdx b/src/content/guides/tree-shaking.mdx
index 3f5f3c83423c..b6d94e1679cb 100644
--- a/src/content/guides/tree-shaking.mdx
+++ b/src/content/guides/tree-shaking.mdx
@@ -1,42 +1,24 @@
 ---
-title: Tree Shaking
+title: إزالة الكود غير المستخدم
 sort: 16
 contributors:
-  - simon04
-  - zacanger
-  - alexjoverm
-  - avant1
-  - MijaelWatts
-  - dmitriid
-  - probablyup
-  - gish
-  - lumo10
-  - byzyk
-  - pnevares
-  - EugeneHlushko
-  - AnayaDesign
-  - torifat
-  - rahul3v
-  - snitin315
-  - vansh5632
-  - Brennvo
-  - ThierryRakotomanana
+  - arabpolice
 related:
-  - title: Debugging Optimization Bailouts
+  - title: تتبع أسباب تعطّل التحسينات
     url: https://webpack.js.org/plugins/module-concatenation-plugin/#debugging-optimization-bailouts
-  - title: Issue 6074 - Add support for more complex selectors for sideEffects
+  - title: Issue 6074 - إضافة دعم لمحددات أكثر تعقيدًا لـ sideEffects
     url: https://github.com/webpack/webpack/issues/6074
 ---
 
-_Tree shaking_ is a term commonly used in the JavaScript context for dead-code elimination. It relies on the [static structure](http://exploringjs.com/es6/ch_modules.html#static-module-structure) of ES2015 module syntax, i.e. [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). The name and concept have been popularized by the ES2015 module bundler [rollup](https://github.com/rollup/rollup).
+_Tree shaking_ مصطلح شائع في سياق JavaScript ويُقصد به إزالة الكود الميت. يعتمد على [البنية الساكنة](http://exploringjs.com/es6/ch_modules.html#static-module-structure) لصيغة وحدات ES2015، أي [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) و [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). وقد شاع الاسم والمفهوم بفضل أداة تجميع وحدات ES2015 وهي [rollup](https://github.com/rollup/rollup).
 
-The webpack 2 release came with built-in support for ES2015 modules (alias _harmony modules_) as well as unused module export detection. The new webpack 4 release expands on this capability with a way to provide hints to the compiler via the `"sideEffects"` `package.json` property to denote which files in your project are "pure" and therefore safe to prune if unused.
+جاء إصدار webpack 2 بدعم مدمج لوحدات ES2015 (المعروفة أيضًا باسم _harmony modules_)، إضافةً إلى اكتشاف صادرات الوحدات غير المستخدمة. ويوسّع webpack 4 هذه القدرة بطريقة تتيح تقديم تلميحات للمصرّف عبر خاصية `"sideEffects"` في `package.json` لتحديد الملفات "النقية" في مشروعك، وبالتالي الآمنة للحذف إذا لم تكن مستخدمة.
 
-T> The remainder of this guide will stem from [Getting Started](/guides/getting-started). If you haven't read through that guide already, please do so now.
+T> سيبني ما تبقى من هذا الدليل على [دليل البدء](/guides/getting-started). إذا لم تكن قد قرأت ذلك الدليل بعد، فافعل ذلك الآن.
 
-## Add a Utility
+## إضافة أداة مساعدة
 
-Let's add a new utility file to our project, `src/math.js`, that exports two functions:
+لنضف ملف أداة مساعدة جديدًا إلى مشروعنا، `src/math.js`، يصدّر دالتين:
 
 **project**
 
@@ -66,7 +48,7 @@ export function cube(x) {
 }
 ```
 
-Set the `mode` configuration option to [development](/configuration/mode/#mode-development) to make sure that the bundle is not minified:
+عيّن خيار الإعداد `mode` إلى [development](/configuration/mode/#mode-development) للتأكد من أن الحزمة لن تُصغَّر:
 
 **webpack.config.js**
 
@@ -90,7 +72,7 @@ export default {
 };
 ```
 
-With that in place, let's update our entry script to utilize one of these new methods and remove `lodash` for simplicity:
+بعد ذلك، لنحدّث سكربت الإدخال لاستخدام إحدى هاتين الدالتين الجديدتين، ونزيل `lodash` للتبسيط:
 
 **src/index.js**
 
@@ -115,9 +97,9 @@ With that in place, let's update our entry script to utilize one of these new me
   document.body.appendChild(component());
 ```
 
-Note that we **did not `import` the `square` method** from the `src/math.js` module. That function is what's known as "dead code", meaning an unused `export` that should be dropped. Now let's run our npm script, `npm run build`, and inspect the output bundle:
+لاحظ أننا **لم نقم باستيراد الدالة `square`** من الوحدة `src/math.js`. هذه الدالة هي ما يُعرف بـ "الكود الميت"، أي `export` غير مستخدم يفترض إسقاطه. لنشغّل الآن سكربت npm، أي `npm run build`، ونفحص الحزمة الناتجة:
 
-**dist/bundle.js (around lines 90 - 100)**
+**dist/bundle.js (حول الأسطر 90 - 100)**
 
 {/* eslint-disable no-use-before-define */}
 
@@ -138,13 +120,13 @@ Note that we **did not `import` the `square` method** from the `src/math.js` mod
 });
 ```
 
-Note the `unused harmony export square` comment above. If you look at the code below it, you'll notice that `square` is not being imported, however, it is still included in the bundle. We'll fix that in the next section.
+لاحظ التعليق `unused harmony export square` أعلاه. إذا نظرت إلى الكود تحته، ستلاحظ أن `square` لا يتم استيرادها، ومع ذلك ما زالت موجودة داخل الحزمة. سنعالج ذلك في القسم التالي.
 
-## Mark the file as side-effect-free
+## وسم الملف بأنه خالٍ من الآثار الجانبية
 
-In a 100% ESM module world, identifying side effects is straightforward. However, we aren't there quite yet, so in the mean time it's necessary to provide hints to webpack's compiler on the "pureness" of your code.
+في عالم وحدات ESM بنسبة 100%، يكون تحديد الآثار الجانبية مباشرًا. لكننا لم نصل إلى ذلك تمامًا بعد، لذلك من الضروري في الوقت الحالي تقديم تلميحات إلى مصرّف webpack حول "نقاء" الكود.
 
-The way this is accomplished is the `"sideEffects"` package.json property.
+تتم هذه العملية عبر خاصية `"sideEffects"` في package.json.
 
 ```json
 {
@@ -153,11 +135,11 @@ The way this is accomplished is the `"sideEffects"` package.json property.
 }
 ```
 
-All the code noted above does not contain side effects, so we can mark the property as `false` to inform webpack that it can safely prune unused exports.
+كل الكود المذكور أعلاه لا يحتوي على آثار جانبية، لذلك يمكننا تعيين الخاصية إلى `false` لإبلاغ webpack بأنه يستطيع حذف الصادرات غير المستخدمة بأمان.
 
-T> A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.
+T> يُعرَّف "الأثر الجانبي" بأنه كود ينفذ سلوكًا خاصًا عند استيراده، غير كشف صادر واحد أو أكثر. مثال ذلك polyfills، فهي تؤثر في النطاق العام ولا توفر عادةً أي export.
 
-If your code did have some side effects though, an array can be provided instead:
+إذا كان كودك يحتوي على بعض الآثار الجانبية، فيمكن تقديم مصفوفة بدلًا من ذلك:
 
 ```json
 {
@@ -166,9 +148,9 @@ If your code did have some side effects though, an array can be provided instead
 }
 ```
 
-The array accepts simple glob patterns to the relevant files. It uses [glob-to-regexp](https://github.com/fitzgen/glob-to-regexp) under the hood (Supports: `*`, `**`, `{a,b}`, `[a-z]`). Patterns like `*.css`, which do not include a `/`, will be treated like `**/*.css`.
+تقبل المصفوفة أنماط glob بسيطة للملفات المعنية. وهي تستخدم [glob-to-regexp](https://github.com/fitzgen/glob-to-regexp) داخليًا (تدعم: `*`، `**`، `{a,b}`، `[a-z]`). الأنماط مثل `*.css`، التي لا تتضمن `/`، ستُعامل مثل `**/*.css`.
 
-T> Note that any imported file is subject to tree shaking. This means if you use something like `css-loader` in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode:
+T> لاحظ أن أي ملف مستورد يخضع لإزالة الكود غير المستخدم. هذا يعني أنك إذا استخدمت شيئًا مثل `css-loader` في مشروعك واستوردت ملف CSS، فيجب إضافته إلى قائمة الآثار الجانبية حتى لا يُحذف بالخطأ في وضع الإنتاج:
 
 ```json
 {
@@ -177,25 +159,25 @@ T> Note that any imported file is subject to tree shaking. This means if you use
 }
 ```
 
-Finally, `"sideEffects"` can also be set from the [`module.rules` configuration option](/configuration/module/#modulerules).
+أخيرًا، يمكن أيضًا تعيين `"sideEffects"` من خيار الإعداد [`module.rules`](/configuration/module/#modulerules).
 
-## Clarifying tree shaking and `sideEffects`
+## توضيح tree shaking و `sideEffects`
 
-The [`sideEffects`](/configuration/optimization/#optimizationsideeffects) and [`usedExports`](/configuration/optimization/#optimizationusedexports) (more known as tree shaking) optimizations are two different things.
+تحسينا [`sideEffects`](/configuration/optimization/#optimizationsideeffects) و [`usedExports`](/configuration/optimization/#optimizationusedexports) (المعروف أكثر باسم tree shaking) شيئان مختلفان.
 
-**`sideEffects` is much more effective** since it allows to skip whole modules/files and the complete subtree.
+**`sideEffects` أكثر فعالية بكثير** لأنه يسمح بتخطي وحدات/ملفات كاملة والشجرة الفرعية كاملة.
 
-`usedExports` relies on [terser](https://github.com/terser-js/terser) to detect side effects in statements. It is a difficult task in JavaScript and not as effective as straightforward `sideEffects` flag. It also can't skip subtree/dependencies since the spec says that side effects need to be evaluated. While exporting function works fine, React's Higher Order Components (HOC) are problematic in this regard.
+يعتمد `usedExports` على [terser](https://github.com/terser-js/terser) لاكتشاف الآثار الجانبية في العبارات. وهذه مهمة صعبة في JavaScript وليست بفعالية علم `sideEffects` المباشر. كما أنه لا يستطيع تخطي الشجرة الفرعية/التبعيات لأن المواصفة تقول إن الآثار الجانبية يجب أن تُقيَّم. وبينما يعمل تصدير الدوال جيدًا، فإن مكونات React ذات الرتبة الأعلى (HOC) تمثل مشكلة في هذا السياق.
 
-If you're using dynamic `import()`, you can also use the `webpackExports` magic comment to specify the exports that should be exposed, allowing webpack to tree shake the others. See [Magic Comments](/api/module-methods/#magic-comments).
+إذا كنت تستخدم `import()` الديناميكي، فيمكنك أيضًا استخدام التعليق السحري `webpackExports` لتحديد الصادرات التي يجب كشفها، ما يسمح لـ webpack بإزالة الصادرات الأخرى. راجع [Magic Comments](/api/module-methods/#magic-comments).
 
-Let's make an example:
+لنأخذ مثالًا:
 
 ```js
 import { Button } from "@shopify/polaris";
 ```
 
-The pre-bundled version looks like this:
+تبدو النسخة المجمعة مسبقًا هكذا:
 
 {/* eslint-disable @stylistic/spaced-comment, prefer-rest-params */}
 
@@ -250,23 +232,23 @@ export {
 };
 ```
 
-When `Button` is unused you can effectively remove the `export { Button$1 };` which leaves all the remaining code. So the question is "Does this code have any side effects or can it be safely removed?". Difficult to say, especially because of this line `withAppProvider()(Button)`. `withAppProvider` is called and the return value is also called. Are there any side effects when calling `merge` or `hoistStatics`? Are there side effects when assigning `WithProvider.contextTypes` (Setter?) or when reading `WrappedComponent.contextTypes` (Getter?).
+عندما لا يكون `Button` مستخدمًا، يمكنك فعليًا إزالة `export { Button$1 };`، لكن ذلك يترك كل الكود المتبقي. لذلك يصبح السؤال: "هل لهذا الكود أي آثار جانبية، أم يمكن حذفه بأمان؟". من الصعب الجزم، خصوصًا بسبب هذا السطر `withAppProvider()(Button)`. يتم استدعاء `withAppProvider`، ويتم أيضًا استدعاء القيمة المعادة. هل توجد آثار جانبية عند استدعاء `merge` أو `hoistStatics`؟ هل توجد آثار جانبية عند إسناد `WithProvider.contextTypes` (Setter؟) أو عند قراءة `WrappedComponent.contextTypes` (Getter؟).
 
-Terser actually tries to figure it out, but it doesn't know for sure in many cases. This doesn't mean that terser is not doing its job well because it can't figure it out. It's too difficult to determine it reliably in a dynamic language like JavaScript.
+يحاول Terser فعلًا معرفة ذلك، لكنه لا يعرف على وجه اليقين في كثير من الحالات. هذا لا يعني أن terser لا يؤدي عمله جيدًا لأنه لا يستطيع اكتشاف ذلك. الأمر صعب جدًا لتحديده على نحو موثوق في لغة ديناميكية مثل JavaScript.
 
-But we can help terser by using the `/*#__PURE__*/` annotation. It flags a statement as side effect free. So a small change would make it possible to tree-shake the code:
+لكن يمكننا مساعدة terser باستخدام التعليق `/*#__PURE__*/`. فهو يعلّم العبارة بأنها خالية من الآثار الجانبية. لذلك سيجعل تغيير صغير الكود قابلًا للإزالة عبر tree shaking:
 
 ```js
 const Button$1 = /* #__PURE__ */ withAppProvider()(Button);
 ```
 
-This would allow to remove this piece of code. But there are still questions with the imports which need to be included/evaluated because they could contain side effects.
+سيسمح ذلك بإزالة هذه القطعة من الكود. لكن ما زالت هناك أسئلة حول الاستيرادات التي يجب تضمينها/تقييمها لأنها قد تحتوي على آثار جانبية.
 
-To tackle this, we use the [`"sideEffects"`](/guides/tree-shaking/#mark-the-file-as-side-effect-free) property in `package.json`.
+لمعالجة ذلك، نستخدم خاصية [`"sideEffects"`](/guides/tree-shaking/#mark-the-file-as-side-effect-free) في `package.json`.
 
-It's similar to `/*#__PURE__*/` but on a module level instead of a statement level. It says (`"sideEffects"` property): "If no direct export from a module flagged with no-sideEffects is used, the bundler can skip evaluating the module for side effects.".
+هي مشابهة لـ `/*#__PURE__*/`، لكن على مستوى الوحدة بدلًا من مستوى العبارة. تقول خاصية `"sideEffects"`: "إذا لم يُستخدم أي export مباشر من وحدة موسومة بأنها بلا sideEffects، فيمكن للمجمّع تخطي تقييم الوحدة بحثًا عن آثار جانبية".
 
-In the Shopify's Polaris example, original modules look like this:
+في مثال Shopify Polaris، تبدو الوحدات الأصلية هكذا:
 
 **index.js**
 
@@ -300,40 +282,40 @@ export { default as ButtonGroup } from "./ButtonGroup";
 // ...
 ```
 
-For `import { Button } from "@shopify/polaris";` this has the following implications:
+بالنسبة إلى `import { Button } from "@shopify/polaris";`، يترتب على ذلك ما يلي:
 
-- include it: include the module, evaluate it and continue analysing dependencies
-- skip over: don't include it, don't evaluate it but continue analysing dependencies
-- exclude it: don't include it, don't evaluate it and don't analyse dependencies
+- include it: تضمين الوحدة، وتقييمها، ومتابعة تحليل التبعيات
+- skip over: عدم تضمينها وعدم تقييمها، مع متابعة تحليل التبعيات
+- exclude it: عدم تضمينها وعدم تقييمها وعدم تحليل تبعياتها
 
-Specifically per matching resource(s):
+وبشكل محدد لكل مورد مطابق:
 
-- `index.js`: No direct export is used, but flagged with sideEffects -> include it
-- `configure.js`: No export is used, but flagged with sideEffects -> include it
-- `types/index.js`: No export is used, not flagged with sideEffects -> exclude it
-- `components/index.js`: No direct export is used, not flagged with sideEffects, but reexported exports are used -> skip over
-- `components/Breadcrumbs.js`: No export is used, not flagged with sideEffects -> exclude it. This also excluded all dependencies like `components/Breadcrumbs.css` even if they are flagged with sideEffects.
-- `components/Button.js`: Direct export is used, not flagged with sideEffects -> include it
-- `components/Button.css`: No export is used, but flagged with sideEffects -> include it
+- `index.js`: لا يُستخدم أي export مباشر، لكنه موسوم بـ sideEffects -> تضمينه
+- `configure.js`: لا يُستخدم أي export، لكنه موسوم بـ sideEffects -> تضمينه
+- `types/index.js`: لا يُستخدم أي export، وليس موسومًا بـ sideEffects -> استبعاده
+- `components/index.js`: لا يُستخدم أي export مباشر، وليس موسومًا بـ sideEffects، لكن الصادرات المعاد تصديرها مستخدمة -> تخطيه
+- `components/Breadcrumbs.js`: لا يُستخدم أي export، وليس موسومًا بـ sideEffects -> استبعاده. يؤدي ذلك أيضًا إلى استبعاد كل التبعيات مثل `components/Breadcrumbs.css` حتى لو كانت موسومة بـ sideEffects.
+- `components/Button.js`: export مباشر مستخدم، وليس موسومًا بـ sideEffects -> تضمينه
+- `components/Button.css`: لا يُستخدم أي export، لكنه موسوم بـ sideEffects -> تضمينه
 
-In this case only 4 modules are included into the bundle:
+في هذه الحالة تُضمَّن 4 وحدات فقط في الحزمة:
 
-- `index.js`: pretty much empty
+- `index.js`: شبه فارغ
 - `configure.js`
 - `components/Button.js`
 - `components/Button.css`
 
-After this optimization, other optimizations can still apply. For example: `buttonFrom` and `buttonsFrom` exports from `Button.js` are unused too. `usedExports` optimization will pick it up and terser may be able to drop some statements from the module.
+بعد هذا التحسين، يمكن أن تُطبق تحسينات أخرى أيضًا. على سبيل المثال: الصادرات `buttonFrom` و `buttonsFrom` من `Button.js` غير مستخدمة أيضًا. سيلتقط تحسين `usedExports` ذلك، وقد يتمكن terser من حذف بعض العبارات من الوحدة.
 
-Module Concatenation also applies. So that these 4 modules plus the entry module (and probably more dependencies) can be concatenated. **`index.js` has no code generated in the end**.
+ينطبق Module Concatenation أيضًا. لذلك يمكن دمج هذه الوحدات الأربع مع وحدة الإدخال (وربما مزيد من التبعيات). **في النهاية لا يُولّد أي كود لـ `index.js`**.
 
-## Full Example: Understanding Side Effects with CSS Files
+## مثال كامل: فهم الآثار الجانبية مع ملفات CSS
 
-To better understand the impact of the `sideEffects` flag, let's look at a complete example of an npm package with CSS assets and how they might be affected during tree shaking. We'll create a fictional UI component library called "awesome-ui".
+لفهم تأثير علم `sideEffects` بشكل أفضل، لننظر إلى مثال كامل لحزمة npm تحتوي على أصول CSS وكيف قد تتأثر أثناء tree shaking. سننشئ مكتبة مكونات واجهة وهمية باسم "awesome-ui".
 
-### Package Structure
+### بنية الحزمة
 
-Our example package looks like this:
+تبدو حزمة المثال لدينا هكذا:
 
 ```bash
 awesome-ui/
@@ -356,7 +338,7 @@ awesome-ui/
         └── defaultTheme.css
 ```
 
-### Package Files Content
+### محتوى ملفات الحزمة
 
 **package.json**
 
@@ -387,10 +369,10 @@ export { default as Modal } from "./Modal";
 **dist/components/Button/index.js**
 
 ```js
-import "./Button.css"; // This has a side effect - it applies styles when imported!
+import "./Button.css"; // لهذا الاستيراد أثر جانبي: فهو يطبّق الأنماط عند استيراده!
 
 export default function Button(props) {
-  // Button component implementation
+  // تنفيذ مكوّن Button
   return {
     type: "button",
     ...props,
@@ -411,12 +393,12 @@ export default function Button(props) {
 }
 ```
 
-**dist/components/Card/index.js** and **dist/components/Modal/index.js** would have similar structure.
+سيكون لكل من **dist/components/Card/index.js** و **dist/components/Modal/index.js** بنية مشابهة.
 
 **dist/theme/index.js**
 
 ```js
-import "./defaultTheme.css"; // This has a side effect!
+import "./defaultTheme.css"; // لهذا الاستيراد أثر جانبي!
 
 export const themeColors = {
   primary: "#0078d7",
@@ -425,31 +407,31 @@ export const themeColors = {
 };
 ```
 
-### What Happens When Consuming This Package?
+### ماذا يحدث عند استهلاك هذه الحزمة؟
 
-Now, imagine a consumer application that only wants to use the Button component:
+تخيل الآن تطبيقًا مستهلكًا يريد استخدام مكوّن Button فقط:
 
 ```js
 import { Button } from "awesome-ui";
 
-// Use the Button component
+// استخدام مكوّن Button
 ```
 
-#### With `sideEffects: false` in package.json
+#### مع `sideEffects: false` في package.json
 
-When webpack processes this import with tree shaking enabled:
+عندما يعالج webpack هذا الاستيراد مع تفعيل tree shaking:
 
-1. It sees the import for only Button
-2. It looks at the package.json and sees `sideEffects: false`
-3. It determines it only needs to include the Button component code
-4. Since all files are marked as having no side effects, it will include **only** the JavaScript code for the Button
-5. **The CSS file import gets dropped!** Even though Button.css is imported in Button/index.js, webpack assumes this import has no side effects.
+1. يرى أن الاستيراد يخص Button فقط
+2. ينظر إلى package.json ويرى `sideEffects: false`
+3. يحدد أنه يحتاج إلى تضمين كود مكوّن Button فقط
+4. بما أن كل الملفات موسومة بأنها بلا آثار جانبية، فسيضمّن **فقط** كود JavaScript الخاص بـ Button
+5. **سيُحذف استيراد ملف CSS!** رغم أن Button.css مستورد في Button/index.js، يفترض webpack أن هذا الاستيراد لا يملك آثارًا جانبية.
 
-The result: The Button component will render, but without any styling since Button.css was eliminated during tree shaking.
+النتيجة: سيُصيَّر مكوّن Button، لكن دون أي تنسيق لأن Button.css أُزيل أثناء tree shaking.
 
-#### The Correct Configuration for This Package
+#### الإعداد الصحيح لهذه الحزمة
 
-To fix this, we need to update package.json to properly mark CSS files as having side effects:
+لإصلاح ذلك، يجب تحديث package.json لوسم ملفات CSS بشكل صحيح على أنها ذات آثار جانبية:
 
 ```json
 {
@@ -460,57 +442,57 @@ To fix this, we need to update package.json to properly mark CSS files as having
 }
 ```
 
-With this configuration:
+مع هذا الإعداد:
 
-1. Webpack still identifies that only the Button component is needed
-2. But now it recognizes that CSS files have side effects
-3. So, it includes Button.css when processing Button/index.js
+1. ما زال webpack يحدد أن مكوّن Button فقط مطلوب
+2. لكنه يدرك الآن أن ملفات CSS لها آثار جانبية
+3. لذلك يضمّن Button.css عند معالجة Button/index.js
 
-### The Decision Tree for Side Effects
+### شجرة القرار للآثار الجانبية
 
-Here's how webpack evaluates modules during tree shaking:
+هكذا يقيّم webpack الوحدات أثناء tree shaking:
 
-1. Is the export from this module used directly or indirectly?
-   - If yes: Include the module
-   - If no: Continue to step 2
+1. هل يُستخدم export من هذه الوحدة بشكل مباشر أو غير مباشر؟
+   - إذا نعم: ضمّن الوحدة
+   - إذا لا: انتقل إلى الخطوة 2
 
-2. Is the module marked with side effects?
-   - If yes (`sideEffects` includes this file or is `true`): Include the module
-   - If no (`sideEffects` is `false` or doesn't include this file): Exclude the module and its dependencies
+2. هل الوحدة موسومة بأنها ذات آثار جانبية؟
+   - إذا نعم (`sideEffects` يتضمن هذا الملف أو قيمته `true`): ضمّن الوحدة
+   - إذا لا (`sideEffects` قيمته `false` أو لا يتضمن هذا الملف): استبعد الوحدة وتبعياتها
 
-For our library's files with the proper sideEffects configuration:
+بالنسبة إلى ملفات مكتبتنا مع إعداد sideEffects الصحيح:
 
-- `dist/index.js`: No direct export used, no side effects -> Skip over
-- `dist/components/index.js`: No direct export used, no side effects -> Skip over
-- `dist/components/Button/index.js`: Direct export used -> Include
-- `dist/components/Button/Button.css`: No exports, has side effects -> Include
-- `dist/components/Card/*`: No exports used, no side effects -> Exclude
-- `dist/components/Modal/*`: No exports used, no side effects -> Exclude
-- `dist/theme/*`: No exports used, no side effects -> Exclude
+- `dist/index.js`: لا يُستخدم export مباشر، ولا آثار جانبية -> تخطيه
+- `dist/components/index.js`: لا يُستخدم export مباشر، ولا آثار جانبية -> تخطيه
+- `dist/components/Button/index.js`: export مباشر مستخدم -> تضمينه
+- `dist/components/Button/Button.css`: لا توجد exports، وله آثار جانبية -> تضمينه
+- `dist/components/Card/*`: لا توجد exports مستخدمة، ولا آثار جانبية -> استبعاده
+- `dist/components/Modal/*`: لا توجد exports مستخدمة، ولا آثار جانبية -> استبعاده
+- `dist/theme/*`: لا توجد exports مستخدمة، ولا آثار جانبية -> استبعاده
 
-### Real-World Impact
+### الأثر في العالم الحقيقي
 
-The impact of incorrect side effects configuration can be significant:
+قد يكون تأثير الإعداد الخاطئ للآثار الجانبية كبيرًا:
 
-1. **CSS not being included**: Components render without styles
-2. **Global JavaScript not running**: Polyfills or global configurations don't execute
-3. **Initialization code skipped**: Functions that register components or set up event listeners never run
+1. **عدم تضمين CSS**: تُصيَّر المكونات دون أنماط
+2. **عدم تشغيل JavaScript العام**: لا تُنفذ polyfills أو الإعدادات العامة
+3. **تخطي كود التهيئة**: لا تعمل الدوال التي تسجل المكونات أو تجهّز مستمعي الأحداث
 
-These issues can be particularly hard to debug because they often only appear in production builds when tree shaking is enabled.
+قد تكون هذه المشكلات صعبة التصحيح خصوصًا لأنها لا تظهر غالبًا إلا في بناءات الإنتاج عند تفعيل tree shaking.
 
-### Testing Side Effects Configuration
+### اختبار إعداد الآثار الجانبية
 
-A good way to test if your side effects configuration is correct:
+طريقة جيدة لاختبار صحة إعداد الآثار الجانبية:
 
-1. Create a minimal application that imports just one component
-2. Build it with production settings (with tree shaking enabled)
-3. Check if all necessary styles and behaviors work correctly
-4. Look at the generated bundle to confirm the right files are included
+1. أنشئ تطبيقًا بسيطًا يستورد مكوّنًا واحدًا فقط
+2. ابنِه بإعدادات الإنتاج (مع تفعيل tree shaking)
+3. تحقق من أن كل الأنماط والسلوكيات الضرورية تعمل بشكل صحيح
+4. انظر إلى الحزمة الناتجة للتأكد من تضمين الملفات الصحيحة
 
-## Mark a function call as side-effect-free
+## وسم استدعاء دالة بأنه خالٍ من الآثار الجانبية
 
-It is possible to tell webpack that a function call is side-effect-free (pure) by using the `/*#__PURE__*/` annotation. It can be put in front of function calls to mark them as side-effect-free. Arguments passed to the function are not being marked by the annotation and may need to be marked individually. When the initial value in a variable declaration of an unused variable is considered as side-effect-free (pure), it is getting marked as dead code, not executed and dropped by the minimizer.
-This behavior is enabled when [`optimization.innerGraph`](/configuration/optimization/#optimizationinnergraph) is set to `true`.
+يمكن إخبار webpack بأن استدعاء دالة خالٍ من الآثار الجانبية (نقي) باستخدام التعليق `/*#__PURE__*/`. يمكن وضعه قبل استدعاءات الدوال لوسمها بأنها خالية من الآثار الجانبية. لا تُوسَم الوسائط الممررة إلى الدالة بهذا التعليق وقد تحتاج إلى وسمها بشكل منفصل. عندما تُعد القيمة الابتدائية في تصريح متغير غير مستخدم خالية من الآثار الجانبية (نقية)، تُوسَم ككود ميت، ولا تُنفذ، ويحذفها المصغّر.
+يُفعَّل هذا السلوك عندما تكون [`optimization.innerGraph`](/configuration/optimization/#optimizationinnergraph) مضبوطة على `true`.
 
 **file.js**
 
@@ -518,11 +500,11 @@ This behavior is enabled when [`optimization.innerGraph`](/configuration/optimiz
 /* #__PURE__ */ double(55);
 ```
 
-## Mark a function declaration as side-effect-free
+## وسم تصريح دالة بأنه خالٍ من الآثار الجانبية
 
 <Badge text="5.107.0+" />
 
-Webpack also supports the [`#__NO_SIDE_EFFECTS__`](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-spec.md) annotation to mark a function declaration as pure. Calls to a function annotated this way can be eliminated from the bundle when their return value is unused, even if the function body is not statically analyzable as pure. This is useful for factory or builder functions whose call sites would otherwise need a `/*#__PURE__*/` annotation each time.
+يدعم Webpack أيضًا التعليق [`#__NO_SIDE_EFFECTS__`](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-spec.md) لوسم تصريح دالة بأنه نقي. يمكن حذف استدعاءات الدالة الموسومة بهذه الطريقة من الحزمة عندما تكون قيمتها المعادة غير مستخدمة، حتى لو لم يكن جسم الدالة قابلًا للتحليل الساكن على أنه نقي. هذا مفيد لدوال المصنع أو البناء التي كانت مواقع استدعائها ستحتاج بخلاف ذلك إلى تعليق `/*#__PURE__*/` في كل مرة.
 
 {/* eslint-disable */}
 
@@ -540,15 +522,15 @@ export function createLogger(prefix) {
 // app.js
 import { createLogger } from "./utils";
 
-// dropped, because `createLogger` is annotated and its result is unused
+// يُحذف لأن `createLogger` موسومة وقيمتها الناتجة غير مستخدمة
 const unused = createLogger("debug");
 ```
 
-W> The annotation currently only takes effect within the module where it is declared. Cross-module propagation is planned for a future release.
+W> لا يؤثر هذا التعليق حاليًا إلا داخل الوحدة التي صُرّح فيها. من المخطط دعم الانتشار عبر الوحدات في إصدار مستقبلي.
 
-## Minify the Output
+## تصغير المخرجات
 
-So we've cued up our "dead code" to be dropped by using the `import` and `export` syntax, but we still need to drop it from the bundle. To do that, set the `mode` configuration option to [`production`](/configuration/mode/#mode-production).
+لقد جهّزنا "الكود الميت" ليُحذف باستخدام صيغتي `import` و `export`، لكن ما زلنا بحاجة إلى حذفه من الحزمة. لفعل ذلك، اضبط خيار الإعداد `mode` على [`production`](/configuration/mode/#mode-production).
 
 **webpack.config.js**
 
@@ -573,60 +555,60 @@ export default {
 };
 ```
 
-T> Note that the `--optimize-minimize` flag can be used to enable `TerserPlugin` as well.
+T> لاحظ أنه يمكن استخدام العلم `--optimize-minimize` لتفعيل `TerserPlugin` أيضًا.
 
-With that squared away, we can run another `npm run build` and see if anything has changed.
+بعد ذلك، يمكننا تشغيل `npm run build` مرة أخرى ومعرفة ما إذا كان أي شيء قد تغير.
 
-Notice anything different about `dist/bundle.js`? The whole bundle is now minified and mangled, but, if you look carefully, you won't see the `square` function included but will see a mangled version of the `cube` function (`function r(e){return e*e*e}n.a=r`). With minification and tree shaking, our bundle is now a few bytes smaller! While that may not seem like much in this contrived example, tree shaking can yield a significant decrease in bundle size when working on larger applications with complex dependency trees.
+هل لاحظت شيئًا مختلفًا في `dist/bundle.js`؟ أصبحت الحزمة كلها مصغّرة ومشوّهة الأسماء، لكن إذا نظرت بعناية فلن ترى دالة `square` مضمنة، وسترى نسخة مشوّهة من دالة `cube` (`function r(e){return e*e*e}n.a=r`). مع التصغير و tree shaking، أصبحت حزمتنا أصغر ببضعة بايتات! قد لا يبدو ذلك كثيرًا في هذا المثال المصطنع، لكن tree shaking يمكن أن يحقق انخفاضًا ملحوظًا في حجم الحزمة عند العمل على تطبيقات أكبر ذات أشجار تبعيات معقدة.
 
-T> [`ModuleConcatenationPlugin`](/plugins/module-concatenation-plugin/) is needed for the tree shaking to work. It is added by `mode: 'production'`. If you are not using it, remember to add the [`ModuleConcatenationPlugin`](/plugins/module-concatenation-plugin/) manually.
+T> يلزم [`ModuleConcatenationPlugin`](/plugins/module-concatenation-plugin/) حتى يعمل tree shaking. تتم إضافته بواسطة `mode: 'production'`. إذا لم تكن تستخدمه، فتذكر إضافة [`ModuleConcatenationPlugin`](/plugins/module-concatenation-plugin/) يدويًا.
 
-## Common Pitfalls with Side Effects
+## مشكلات شائعة مع الآثار الجانبية
 
-When working with tree shaking and the `sideEffects` flag, there are several common pitfalls to avoid:
+عند العمل مع tree shaking وعلم `sideEffects`، توجد عدة مشكلات شائعة يجب تجنبها:
 
-### 1. Over-optimistic `sideEffects: false`
+### 1. التفاؤل الزائد مع `sideEffects: false`
 
-Setting `sideEffects: false` in your package.json is tempting for optimal tree shaking, but this can cause problems if your code actually does have side effects. Examples of hidden side effects:
+تعيين `sideEffects: false` في package.json مغرٍ للحصول على tree shaking مثالي، لكن هذا قد يسبب مشكلات إذا كان كودك يحتوي فعلًا على آثار جانبية. أمثلة على آثار جانبية مخفية:
 
-- CSS imports (as demonstrated above)
-- Polyfills that modify global objects
-- Libraries that register global event listeners
-- Code that modifies prototype chains
+- استيرادات CSS (كما أوضحنا أعلاه)
+- Polyfills التي تعدّل الكائنات العامة
+- مكتبات تسجل مستمعي أحداث عامة
+- كود يعدّل سلاسل prototype
 
-### 2. Re-exports with Side Effects
+### 2. إعادة التصدير مع آثار جانبية
 
-Consider this pattern:
+تأمل هذا النمط:
 
 ```js
-// This file has side effects that might be skipped
+// هذا الملف له آثار جانبية قد يتم تخطيها
 import "./polyfill";
 
-// Re-export components
+// إعادة تصدير المكونات
 export * from "./components";
 ```
 
-If a consumer only imports specific components, the polyfill import might be skipped entirely if not properly marked with side effects.
+إذا استورد مستهلك مكونات محددة فقط، فقد يتم تخطي استيراد polyfill بالكامل إذا لم يُوسَم بشكل صحيح بأنه ذو آثار جانبية.
 
-### 3. Forgetting about Nested Dependencies
+### 3. نسيان التبعيات المتداخلة
 
-Your package might correctly mark side effects, but if it depends on third-party packages that incorrectly mark their side effects, you might still encounter issues.
+قد توسِم حزمتك الآثار الجانبية بشكل صحيح، لكن إذا كانت تعتمد على حزم طرف ثالث توسِم آثارها الجانبية بشكل غير صحيح، فقد تظل تواجه مشكلات.
 
-### 4. Testing Only in Development Mode
+### 4. الاختبار في وضع التطوير فقط
 
-Tree shaking typically only fully activates in production mode. Testing only in development can hide tree shaking issues until deployment.
+عادةً لا يتفعّل tree shaking بالكامل إلا في وضع الإنتاج. الاختبار في التطوير فقط قد يخفي مشكلات tree shaking إلى حين النشر.
 
-## Conclusion
+## الخاتمة
 
-What we've learned is that in order to take advantage of _tree shaking_, you must...
+ما تعلمناه هو أنه للاستفادة من _tree shaking_، يجب عليك:
 
-- Use ES2015 module syntax (i.e. `import` and `export`).
-- Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the [documentation](https://babeljs.io/docs/en/babel-preset-env#modules) for more details).
-- Add a `"sideEffects"` property to your project's `package.json` file.
-- Be careful about correctly marking files with side effects, especially CSS imports.
-- Use the [`production`](/configuration/mode/#mode-production) `mode` configuration option to enable [various optimizations](/configuration/mode/#usage) including minification and tree shaking (side effects optimization is enabled in development mode using the flag value).
-- Make sure you set a correct value for [`devtool`](/configuration/devtool/#devtool) as some of them can't be used in `production` mode.
+- استخدام صيغة وحدات ES2015 (أي `import` و `export`).
+- التأكد من أن أي مصرّفات لا تحوّل صيغة وحدات ES2015 إلى وحدات CommonJS (هذا هو السلوك الافتراضي للحزمة الشائعة Babel preset @babel/preset-env؛ راجع [التوثيق](https://babeljs.io/docs/en/babel-preset-env#modules) لمزيد من التفاصيل).
+- إضافة خاصية `"sideEffects"` إلى ملف `package.json` الخاص بمشروعك.
+- الحذر عند وسم الملفات ذات الآثار الجانبية بشكل صحيح، خصوصًا استيرادات CSS.
+- استخدام خيار الإعداد [`production`](/configuration/mode/#mode-production) في `mode` لتفعيل [تحسينات متنوعة](/configuration/mode/#usage)، بما في ذلك التصغير و tree shaking (يتم تفعيل تحسين الآثار الجانبية في وضع التطوير باستخدام قيمة العلم).
+- التأكد من تعيين قيمة صحيحة لـ [`devtool`](/configuration/devtool/#devtool)، إذ لا يمكن استخدام بعض القيم في وضع `production`.
 
-You can imagine your application as a tree. The source code and libraries you actually use represent the green, living leaves of the tree. Dead code represents the brown, dead leaves of the tree that are consumed by autumn. In order to get rid of the dead leaves, you have to shake the tree, causing them to fall.
+يمكنك تخيل تطبيقك كشجرة. الكود المصدري والمكتبات التي تستخدمها فعلًا تمثل الأوراق الخضراء الحية في الشجرة. ويمثل الكود الميت الأوراق البنية الذابلة التي يستهلكها الخريف. للتخلص من الأوراق الميتة، عليك هز الشجرة لتسقط.
 
-If you are interested in more ways to optimize your output, please jump to the next guide for details on building for [production](/guides/production).
+إذا كنت مهتمًا بمزيد من طرق تحسين المخرجات، فانتقل إلى الدليل التالي لمزيد من التفاصيل حول البناء من أجل [الإنتاج](/guides/production).
diff --git a/src/content/guides/typescript.mdx b/src/content/guides/typescript.mdx
index cd2d1d9efde5..9e06416a8801 100644
--- a/src/content/guides/typescript.mdx
+++ b/src/content/guides/typescript.mdx
@@ -2,53 +2,44 @@
 title: TypeScript
 sort: 21
 contributors:
-  - morsdyce
-  - kkamali
-  - mtrivera
-  - byzyk
-  - EugeneHlushko
-  - chenxsan
-  - snitin315
-  - tusharthakur04
-  - ThierryRakotomanana
-  - valentina-buoro
+  - arabpolice
 ---
 
-T> This guide stems from the [_Getting Started_](/guides/getting-started/) guide.
+T> يستند هذا الدليل إلى دليل [_البدء_](/guides/getting-started/).
 
-[TypeScript](https://www.typescriptlang.org) is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate TypeScript with webpack.
+[TypeScript](https://www.typescriptlang.org) هو مجموعة عليا typed من JavaScript تُصرَّف إلى JavaScript عادية. في هذا الدليل سنتعلم كيفية دمج TypeScript مع webpack.
 
-## Basic Setup
+## الإعداد الأساسي
 
-First install the TypeScript compiler and loader by running:
+أولًا ثبّت مصرّف TypeScript والـ loader بتشغيل:
 
 ```bash
 npm install --save-dev typescript ts-loader
 ```
 
-Now we'll modify the directory structure & the configuration files:
+الآن سنعدّل بنية المجلدات وملفات الإعدادات:
 
 **project**
 
 ```diff
  webpack-demo
-  ├── package.json
-  ├── package-lock.json
-+ ├── tsconfig.json
-- ├── webpack.config.js
-+ ├── webpack.config.ts
-  ├── /dist
-  │   ├── bundle.js
-  │   └── index.html
-  ├── /src
-- │   ├── index.js
-+ │   └── index.ts
-  └── /node_modules
+   ├── package.json
+   ├── package-lock.json
++  ├── tsconfig.json
+-  ├── webpack.config.js
++  ├── webpack.config.ts
+   ├── /dist
+   │   ├── bundle.js
+   │   └── index.html
+   ├── /src
+-  │   ├── index.js
++  │   └── index.ts
+   └── /node_modules
 ```
 
 **tsconfig.json**
 
-Let's set up a configuration to support JSX and compile TypeScript down to ES5...
+دعنا نُعد إعدادًا يدعم JSX ويصرّف TypeScript إلى ES5...
 
 ```json
 {
@@ -66,13 +57,13 @@ Let's set up a configuration to support JSX and compile TypeScript down to ES5..
 }
 ```
 
-See [TypeScript's documentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) to learn more about `tsconfig.json` configuration options.
+راجع [توثيق TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) لمعرفة المزيد عن خيارات إعداد `tsconfig.json`.
 
-To learn more about webpack configuration, see the [configuration concepts](/concepts/configuration/).
+لمعرفة المزيد عن إعدادات webpack، راجع [مفاهيم الإعدادات](/concepts/configuration/).
 
-Now let's configure webpack to handle TypeScript:
+الآن دعنا نضبط webpack للتعامل مع TypeScript:
 
-First, install the required dependencies:
+أولًا، ثبّت الاعتماديات المطلوبة:
 
 ```bash
 npm install --save-dev ts-node @types/node
@@ -85,7 +76,7 @@ import path from "node:path";
 import { fileURLToPath } from "url";
 import webpack from "webpack";
 
-// in case you run into any TypeScript error when configuring `devServer`
+// في حال واجهت أي خطأ TypeScript عند إعداد `devServer`
 import "webpack-dev-server";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -114,18 +105,18 @@ const config: webpack.Configuration = {
 export default config;
 ```
 
-> For further refrence on how to write configuration in [Typescript file](https://webpack.js.org/configuration/configuration-languages/#typescript)
+> لمزيد من المراجع حول كيفية كتابة الإعدادات في [ملف Typescript](https://webpack.js.org/configuration/configuration-languages/#typescript)
 
-This will direct webpack to _enter_ through `./index.ts`, _load_ all `.ts` and `.tsx` files through the `ts-loader`, and _output_ a `bundle.js` file in our current directory.
+سيوجّه هذا webpack إلى الدخول عبر `./index.ts`، وتحميل جميع ملفات `.ts` و `.tsx` من خلال `ts-loader`، وإخراج ملف `bundle.js` في المجلد الحالي.
 
-Next, we need to adjust how we import `lodash` in our `./index.ts`. Since the lodash definitions don't include a default export, we'll need to update our import statement.
-First, make sure to install the [TypeScript definitions](#using-third-party-libraries):
+بعد ذلك، نحتاج إلى تعديل طريقة استيراد `lodash` في `./index.ts`. بما أن تعريفات lodash لا تتضمن تصديرًا افتراضيًا، سنحتاج إلى تحديث تعليمة الاستيراد.
+أولًا، تأكد من تثبيت [تعريفات TypeScript](#استخدام-مكتبات-خارجية):
 
 ```bash
 npm install --save-dev @types/lodash
 ```
 
-Then, update your import at the top of the file:
+ثم حدّث الاستيراد في أعلى الملف:
 
 **./index.ts**
 
@@ -144,21 +135,21 @@ Then, update your import at the top of the file:
   document.body.appendChild(component());
 ```
 
-T> To make imports do this by default and keep `import _ from 'lodash';` syntax in TypeScript, set `"allowSyntheticDefaultImports" : true` and `"esModuleInterop" : true` in your **tsconfig.json** file. This is related to TypeScript configuration and mentioned in our guide only for your information.
+T> لجعل الاستيرادات تفعل ذلك افتراضيًا مع الإبقاء على صيغة `import _ from 'lodash';` في TypeScript، عيّن `"allowSyntheticDefaultImports" : true` و `"esModuleInterop" : true` في ملف **tsconfig.json**. هذا متعلق بإعدادات TypeScript ومذكور في دليلنا للعلم فقط.
 
-## Ways to Use TypeScript in `webpack.config.ts`
+## طرق استخدام TypeScript في `webpack.config.ts`
 
-There are 3 ways to use TypeScript in `webpack.config.ts`:
+توجد 3 طرق لاستخدام TypeScript في `webpack.config.ts`:
 
-1. **Using webpack with built-in Node.js type stripping feature (recommended):**
+1. **استخدام webpack مع ميزة Node.js المدمجة لإزالة الأنواع (موصى به):**
 
    ```bash
    webpack -c ./webpack.config.ts
    ```
 
-   Will attempt to load the configuration using Node.js's built-in [type-stripping](https://nodejs.org/api/typescript.html#type-stripping), and then attempt to load the configuration file using `interpret` and `rechoir` (in this case you need to install `tsx` or `ts-node` or other tools).
+   سيحاول تحميل الإعدادات باستخدام [إزالة الأنواع](https://nodejs.org/api/typescript.html#type-stripping) المدمجة في Node.js، ثم سيحاول تحميل ملف الإعدادات باستخدام `interpret` و `rechoir` (في هذه الحالة تحتاج إلى تثبيت `tsx` أو `ts-node` أو أدوات أخرى).
 
-2. **Using custom `--import`/`--require` for Node.js:**
+2. **استخدام `--import`/`--require` مخصصين لـ Node.js:**
 
    ```bash
    NODE_OPTIONS='--import=tsx --no-experimental-strip-types'  webpack -c ./webpack.config.ts
@@ -168,35 +159,35 @@ There are 3 ways to use TypeScript in `webpack.config.ts`:
    NODE_OPTIONS='--require=ts-node/register --no-experimental-strip-types'  webpack -c ./webpack.config.ts
    ```
 
-   > The `--no-experimental-strip-types` flag is required starting with Node.js version 22.7.0.
+   > العلم `--no-experimental-strip-types` مطلوب ابتداءً من إصدار Node.js 22.7.0.
 
-3. **Using built-in Node.js transform types feature for Node.js ≥ v22.7.0:**
+3. **استخدام ميزة Node.js المدمجة لتحويل الأنواع في Node.js ≥ v22.7.0:**
 
-   To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties.
+   لتفعيل تحويل صياغة TypeScript غير القابلة للمحو، والتي تتطلب توليد كود JavaScript، مثل تصريحات enum وخصائص المعاملات.
 
    ```bash
    NODE_OPTIONS='--experimental-transform-types' webpack --disable-interpret -c ./webpack.config.ts
    ```
 
-## TypeScript Path Aliases
+## الأسماء المستعارة لمسارات TypeScript
 
 <Badge text="5.105.0+" />
 
-If you use [`compilerOptions.paths`](https://www.typescriptlang.org/tsconfig#paths) or `compilerOptions.baseUrl` in your `tsconfig.json` to create import aliases, starting with webpack 5.105, webpack can read these aliases directly via [`resolve.tsconfig`](/configuration/resolve/#resolvetsconfig). This replaces [`tsconfig-paths-webpack-plugin`](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin), which should no longer be used.
+إذا كنت تستخدم [`compilerOptions.paths`](https://www.typescriptlang.org/tsconfig#paths) أو `compilerOptions.baseUrl` في `tsconfig.json` لإنشاء أسماء مستعارة للاستيراد، فابتداءً من webpack 5.105 يمكن لـ webpack قراءة هذه الأسماء مباشرةً عبر [`resolve.tsconfig`](/configuration/resolve/#resolvetsconfig). هذا يستبدل [`tsconfig-paths-webpack-plugin`](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin)، والذي لم يعد ينبغي استخدامه.
 
-`resolve.tsconfig` accepts `boolean | string | object`:
+يقبل `resolve.tsconfig` القيم `boolean | string | object`:
 
 **webpack.config.ts**
 
 ```js
 export default {
   resolve: {
-    tsconfig: true, // automatically find tsconfig.json
+    tsconfig: true, // العثور تلقائيًا على tsconfig.json
   },
 };
 ```
 
-Pass a string to point at a specific file (useful in monorepos):
+مرّر string للإشارة إلى ملف محدد (مفيد في monorepos):
 
 ```js
 export default {
@@ -206,14 +197,14 @@ export default {
 };
 ```
 
-Pass an object to also resolve [TypeScript project references](https://www.typescriptlang.org/docs/handbook/project-references.html):
+مرّر كائنًا لحل [مراجع مشاريع TypeScript](https://www.typescriptlang.org/docs/handbook/project-references.html) أيضًا:
 
 ```js
 export default {
   resolve: {
     tsconfig: {
       configFile: "./tsconfig.json",
-      references: "auto", // inherit references from tsconfig, or pass an array of paths
+      references: "auto", // وراثة references من tsconfig، أو تمرير مصفوفة من المسارات
     },
   },
 };
@@ -232,11 +223,11 @@ export default {
 }
 ```
 
-With the above, `@/components/Button` resolves to `src/components/Button` without any additional plugins or duplicating aliases in `resolve.alias`.
+باستخدام ما سبق، يتم حل `@/components/Button` إلى `src/components/Button` دون أي plugins إضافية أو تكرار للأسماء المستعارة في `resolve.alias`.
 
-### Migrating from `tsconfig-paths-webpack-plugin`
+### الترحيل من `tsconfig-paths-webpack-plugin`
 
-If you're currently using `tsconfig-paths-webpack-plugin`, you can drop it in favor of the built-in `resolve.tsconfig` option:
+إذا كنت تستخدم حاليًا `tsconfig-paths-webpack-plugin`، فيمكنك الاستغناء عنه لصالح خيار `resolve.tsconfig` المدمج:
 
 ```diff
 - import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
@@ -244,38 +235,38 @@ If you're currently using `tsconfig-paths-webpack-plugin`, you can drop it in fa
   export default {
     resolve: {
 -     plugins: [new TsconfigPathsPlugin()],
-+     // Auto-find tsconfig.json in the project root
++     // العثور تلقائيًا على tsconfig.json في جذر المشروع
 +     tsconfig: true,
 +
-+     // Or explicitly point to one
++     // أو الإشارة صراحةً إلى ملف محدد
 +     // tsconfig: './tsconfig.app.json'
     },
   };
 ```
 
-You can then remove the package from your project:
+يمكنك بعد ذلك إزالة الحزمة من مشروعك:
 
 ```bash
 npm uninstall tsconfig-paths-webpack-plugin
 ```
 
-W> `resolve.tsconfig` only handles module resolution — it does not transpile TypeScript. You still need `ts-loader`, `babel-loader` with `@babel/preset-typescript`, or another transpilation step.
+W> يتعامل `resolve.tsconfig` مع حل الوحدات فقط، ولا يقوم بتصيير TypeScript. لا تزال بحاجة إلى `ts-loader` أو `babel-loader` مع `@babel/preset-typescript` أو خطوة تصيير أخرى.
 
 ## Loader
 
 [`ts-loader`](https://github.com/TypeStrong/ts-loader)
 
-We use `ts-loader` in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier.
+نستخدم `ts-loader` في هذا الدليل لأنه يجعل تفعيل ميزات webpack إضافية، مثل استيراد أصول ويب أخرى، أسهل قليلًا.
 
-W> `ts-loader` uses `tsc`, the TypeScript compiler, and relies on your `tsconfig.json` configuration. Make sure to avoid setting [`module`](https://www.typescriptlang.org/tsconfig#module) to "CommonJS", or webpack won't be able to [tree-shake your code](/guides/tree-shaking).
+W> يستخدم `ts-loader` أداة `tsc`، وهي مصرّف TypeScript، ويعتمد على إعدادات `tsconfig.json` لديك. تأكد من تجنب تعيين [`module`](https://www.typescriptlang.org/tsconfig#module) إلى "CommonJS"، وإلا فلن يتمكن webpack من [تنفيذ tree-shake للكود](/guides/tree-shaking).
 
-Note that if you're already using [`babel-loader`](https://github.com/babel/babel-loader) to transpile your code, you can use [`@babel/preset-typescript`](https://babeljs.io/docs/en/babel-preset-typescript) and let Babel handle both your JavaScript and TypeScript files instead of using an additional loader. Keep in mind that, contrary to `ts-loader`, the underlying [`@babel/plugin-transform-typescript`](https://babeljs.io/docs/en/babel-plugin-transform-typescript) plugin does not perform any type checking.
+لاحظ أنك إذا كنت تستخدم بالفعل [`babel-loader`](https://github.com/babel/babel-loader) لتصيير الكود، فيمكنك استخدام [`@babel/preset-typescript`](https://babeljs.io/docs/en/babel-preset-typescript) وترك Babel يتعامل مع ملفات JavaScript و TypeScript بدلًا من استخدام loader إضافي. ضع في اعتبارك أنه، بخلاف `ts-loader`، لا ينفذ الملحق الأساسي [`@babel/plugin-transform-typescript`](https://babeljs.io/docs/en/babel-plugin-transform-typescript) أي فحص للأنواع.
 
-## Source Maps
+## خرائط المصدر
 
-To learn more about source maps, see the [development guide](/guides/development).
+لمعرفة المزيد عن خرائط المصدر، راجع [دليل التطوير](/guides/development).
 
-To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files. The following line must be added to our TypeScript configuration:
+لتفعيل خرائط المصدر، يجب أن نضبط TypeScript لإخراج خرائط مصدر inline إلى ملفات JavaScript المصرّفة. يجب إضافة السطر التالي إلى إعدادات TypeScript:
 
 **tsconfig.json**
 
@@ -296,7 +287,7 @@ To enable source maps, we must configure TypeScript to output inline source maps
   }
 ```
 
-Now we need to tell webpack to extract these source maps and include in our final bundle:
+الآن نحتاج إلى إخبار webpack باستخراج خرائط المصدر هذه وتضمينها في الحزمة النهائية:
 
 **webpack.config.ts**
 
@@ -329,18 +320,18 @@ const __dirname = path.dirname(__filename);
   };
 ```
 
-See the [devtool documentation](/configuration/devtool/) for more information.
+راجع [توثيق devtool](/configuration/devtool/) لمزيد من المعلومات.
 
-## Client types
+## أنواع العميل
 
-It's possible to use webpack specific features in your TypeScript code, such as [`import.meta.webpack`](/api/module-variables/#importmetawebpack). And webpack provides types for them as well, add a TypeScript [`reference`](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) directive to declare it:
+من الممكن استخدام ميزات خاصة بـ webpack في كود TypeScript لديك، مثل [`import.meta.webpack`](/api/module-variables/#importmetawebpack). ويوفر webpack أنواعًا لها أيضًا؛ أضف توجيه [`reference`](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) في TypeScript للتصريح بها:
 
 ```ts
 /// <reference types="webpack/module" />
-console.log(import.meta.webpack); // without reference declared above, TypeScript will throw an error
+console.log(import.meta.webpack); // بدون reference المصرّح به أعلاه، سيرمي TypeScript خطأ
 ```
 
-To enable the types for the whole project, add `webpack/module` to `compilerOptions.types` in `tsconfig.json`:
+لتفعيل الأنواع للمشروع كاملًا، أضف `webpack/module` إلى `compilerOptions.types` في `tsconfig.json`:
 
 ```diff
   {
@@ -352,21 +343,21 @@ To enable the types for the whole project, add `webpack/module` to `compilerOpti
   }
 ```
 
-## Using Third Party Libraries
+## استخدام مكتبات خارجية
 
-When installing third party libraries from npm, it is important to remember to install the typing definition for that library.
+عند تثبيت مكتبات خارجية من npm، من المهم تذكّر تثبيت تعريفات الأنواع لتلك المكتبة.
 
-For example, if we want to use lodash, we should run the following command to install its type definitions:
+على سبيل المثال، إذا أردنا استخدام lodash، فيجب تشغيل الأمر التالي لتثبيت تعريفات الأنواع الخاصة بها:
 
 ```bash
 npm install --save-dev @types/lodash
 ```
 
-If the npm package already includes its declaration typings in the package bundle, downloading the corresponding `@types` package is not needed. For more information see the [TypeScript changelog blog](https://github.blog/changelog/2020-12-16-npm-displays-packages-with-bundled-typescript-declarations/).
+إذا كانت حزمة npm تتضمن بالفعل typings التصريحية داخل الحزمة، فلن تكون هناك حاجة إلى تنزيل حزمة `@types` المقابلة. لمزيد من المعلومات، راجع [مدونة سجل تغييرات TypeScript](https://github.blog/changelog/2020-12-16-npm-displays-packages-with-bundled-typescript-declarations/).
 
-## Importing Other Assets
+## استيراد أصول أخرى
 
-To use non-code assets with TypeScript, we need to defer the type for these imports. This requires a `custom.d.ts` file which signifies custom definitions for TypeScript in our project. Let's set up a declaration for `.svg` files:
+لاستخدام أصول غير كودية مع TypeScript، نحتاج إلى إرجاء النوع لهذه الاستيرادات. يتطلب ذلك ملف `custom.d.ts` يعبّر عن تعريفات مخصصة لـ TypeScript في مشروعنا. دعنا نعد تصريحًا لملفات `.svg`:
 
 **custom.d.ts**
 
@@ -377,10 +368,10 @@ declare module "*.svg" {
 }
 ```
 
-Here we declare a new module for SVGs by specifying any import that ends in `.svg` and defining the module's `content` as `any`. We could be more explicit about it being a url by defining the type as string. The same concept applies to other assets including CSS, SCSS, JSON and more.
+هنا نصرّح عن وحدة جديدة لـ SVGs من خلال تحديد أي استيراد ينتهي بـ `.svg` وتعريف `content` الخاص بالوحدة على أنه `any`. يمكننا أن نكون أكثر صراحة بشأن كونه url عبر تعريف النوع كسلسلة نصية. ينطبق المفهوم نفسه على الأصول الأخرى، بما في ذلك CSS و SCSS و JSON وغيرها.
 
-## Build Performance
+## أداء البناء
 
-W> This may degrade build performance.
+W> قد يؤدي هذا إلى تدهور أداء البناء.
 
-See the [Build Performance](/guides/build-performance/) guide on build tooling.
+راجع دليل [أداء البناء](/guides/build-performance/) حول أدوات البناء.
diff --git a/src/content/guides/web-workers.mdx b/src/content/guides/web-workers.mdx
index 45ffdd34e636..a23fe06acfec 100644
--- a/src/content/guides/web-workers.mdx
+++ b/src/content/guides/web-workers.mdx
@@ -1,35 +1,35 @@
 ---
-title: Web Workers
+title: عمال الويب
 sort: 21
 contributors:
-  - chenxsan
+  - arabpolice
 ---
 
-As of webpack 5, you can use [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) without [`worker-loader`](https://github.com/webpack-contrib/worker-loader).
+ابتداءً من webpack 5، يمكنك استخدام [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) دون [`worker-loader`](https://github.com/webpack-contrib/worker-loader).
 
-## Syntax
+## الصيغة
 
 ```js
 new Worker(new URL("./worker.js", import.meta.url));
 ```
 
 ```js
-// or customize the chunk name with magic comments
-// see https://webpack.js.org/api/module-methods/#magic-comments
+// أو خصّص اسم الجزء باستخدام التعليقات السحرية
+// راجع https://webpack.js.org/api/module-methods/#magic-comments
 new Worker(
   /* webpackChunkName: "foo-worker" */ new URL("./worker.js", import.meta.url),
 );
 ```
 
-The syntax was chosen to allow running code without bundler, it is also available in native ECMAScript modules in the browser.
+تم اختيار هذه الصيغة للسماح بتشغيل الكود دون bundler، وهي متاحة أيضًا في وحدات ECMAScript الأصلية داخل المتصفح.
 
-Note that while the [`Worker` API](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) suggests that `Worker` constructor would accept a string representing the URL of the script, in webpack 5 you can only use `URL` instead.
+لاحظ أنه رغم أن واجهة [`Worker` API](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) تشير إلى أن باني `Worker` يمكنه قبول سلسلة نصية تمثل عنوان URL للسكريبت، فإن webpack 5 لا يدعم هنا إلا استخدام `URL` بدلًا من ذلك.
 
 <Badge text="5.105.0+" />
 
-When using `new Worker()`, webpack can resolve worker modules by export condition names defined in the package's `exports` field. This allows packages to provide worker-specific versions of modules automatically.
+عند استخدام `new Worker()`، يستطيع webpack حل وحدات worker باستخدام أسماء شروط التصدير المعرفة في حقل `exports` الخاص بالحزمة. يتيح ذلك للحزم توفير نسخ مخصصة للـ worker من الوحدات تلقائيًا.
 
-**package.json** (in a dependency package):
+**package.json** (داخل حزمة تبعية):
 
 ```json
 {
@@ -43,18 +43,18 @@ When using `new Worker()`, webpack can resolve worker modules by export conditio
 }
 ```
 
-When you import this package inside a worker context:
+عند استيراد هذه الحزمة داخل سياق worker:
 
 ```js
-// Inside a worker file
+// داخل ملف worker
 import { someFunction } from "my-package";
 ```
 
-Webpack will automatically resolve to `index.worker.js` when the module is used in a worker context, without requiring any additional configuration.
+سيقوم Webpack تلقائيًا بحل الوحدة إلى `index.worker.js` عند استخدامها داخل سياق worker، دون الحاجة إلى أي إعدادات إضافية.
 
-W> Using a variable in the `Worker` constructor is not supported by webpack. For example, the following code will not work: `const url = new URL('./path/to/worker.ts', import.meta.url); const worker = new Worker(url);`. This is because webpack cannot analyse the syntax statically. It is important to be aware of this limitation when using `Worker` syntax with webpack.
+W> استخدام متغير داخل باني `Worker` غير مدعوم في webpack. على سبيل المثال، لن يعمل الكود التالي: `const url = new URL('./path/to/worker.ts', import.meta.url); const worker = new Worker(url);`. يعود ذلك إلى أن webpack لا يستطيع تحليل هذه الصيغة تحليلاً ساكنًا. من المهم الانتباه إلى هذا القيد عند استخدام صيغة `Worker` مع webpack.
 
-## Example
+## مثال
 
 **src/index.js**
 
@@ -79,11 +79,11 @@ globalThis.onmessage = ({ data: { question } }) => {
 };
 ```
 
-## Set a public path from a variable
+## تعيين public path من متغير
 
-When you set `__webpack_public_path__` from a variable, and use `publicPath` equal to `auto`, worker chunks will get a separate runtime, and Webpack runtime will set `publicPath` to automatically calculated public path, that is probably is not what you expect.
+عندما تعيّن `__webpack_public_path__` من متغير وتستخدم `publicPath` بقيمة `auto`، ستحصل أجزاء worker على وقت تشغيل منفصل، وسيعيّن وقت تشغيل Webpack قيمة `publicPath` إلى مسار عام محسوب تلقائيًا، وهذا على الأرجح ليس ما تتوقعه.
 
-To work around this issue, you need to set `__webpack_public_path__` from within the worker code. Here is an example:
+لتجاوز هذه المشكلة، تحتاج إلى تعيين `__webpack_public_path__` من داخل كود worker. إليك مثالًا:
 
 **worker.js**
 
@@ -93,7 +93,7 @@ globalThis.onmessage = ({ data: { publicPath, ...otherData } }) => {
     __webpack_public_path__ = publicPath;
   }
 
-  // rest of the worker code
+  // بقية كود worker
 };
 ```
 
@@ -105,19 +105,19 @@ const worker = new Worker(new URL("./worker.js", import.meta.url));
 worker.postMessage({ publicPath: globalThis.__MY_GLOBAL_PUBLIC_PATH_VAR__ });
 ```
 
-**When to use this:**
+**متى تستخدم هذا النمط:**
 
-This pattern is only required when a worker needs to load additional chunks and the asset base URL is determined at runtime (for example, when using a CDN or a multi-domain deployment).
+هذا النمط مطلوب فقط عندما يحتاج worker إلى تحميل أجزاء إضافية ويكون عنوان URL الأساسي للملفات محددًا أثناء وقت التشغيل (مثلًا عند استخدام CDN أو نشر متعدد النطاقات).
 
-Since workers run in an isolated global scope, the automatically detected public path may differ from the one used by the main thread. In such cases, the public path (`__webpack_public_path__`) must be explicitly passed to the worker and set inside the worker runtime.
+نظرًا لأن workers تعمل داخل نطاق عام معزول، فقد يختلف المسار العام المكتشف تلقائيًا عن المسار المستخدم من الخيط الرئيسي. في مثل هذه الحالات، يجب تمرير المسار العام (`__webpack_public_path__`) صراحةً إلى worker وتعيينه داخل وقت تشغيل worker.
 
-> Note: This is an advanced use case. If your worker does not load additional chunks or your assets are served from a static, same-origin path, you typically do not need to set `__webpack_public_path__` manually.
+> ملاحظة: هذه حالة استخدام متقدمة. إذا كان worker لا يحمّل أجزاء إضافية، أو كانت ملفاتك تُخدم من مسار ثابت من نفس الأصل، فعادةً لا تحتاج إلى تعيين `__webpack_public_path__` يدويًا.
 
 ## Node.js
 
-This section describes using Web Workers in a Node.js environment via the `worker_threads` module.
+يشرح هذا القسم استخدام Web Workers داخل بيئة Node.js عبر وحدة `worker_threads`.
 
-Similar syntax is supported in Node.js (>= 12.17.0):
+تُدعم صيغة مشابهة في Node.js (>= 12.17.0):
 
 ```js
 import { Worker } from "node:worker_threads";
@@ -125,4 +125,4 @@ import { Worker } from "node:worker_threads";
 new Worker(new URL("./worker.js", import.meta.url));
 ```
 
-Note that this is only available in ESM. `Worker` in CommonJS syntax is not supported by either webpack or Node.js.
+لاحظ أن هذا متاح فقط في ESM. صيغة `Worker` داخل CommonJS غير مدعومة لا من webpack ولا من Node.js.

From a8fd007146348dd63b361c8fe9ce47313e45eeed Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Thu, 21 May 2026 23:08:50 +0300
Subject: [PATCH 08/35] docs(guides): add contributors to getting started and
 index guides

---
 src/content/guides/getting-started.mdx | 1 +
 src/content/guides/index.mdx           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx
index ed843f909ed3..345f6fda9a57 100644
--- a/src/content/guides/getting-started.mdx
+++ b/src/content/guides/getting-started.mdx
@@ -4,6 +4,7 @@ description: تعلّم كيفية تجميع تطبيق JavaScript باستخد
 sort: 1
 contributors:
   - arabpolice
+  - semon009
 ---
 
 يُعتبر Webpack خيارًا ممتازًا عندما يحتاج تطبيقك إلى مسار بناء (Build Pipeline) قابل للتخصيص: مثل تجميع وحدات JavaScript، ومعالجة الملفات (assets)، ودمج الـ loaders والـ plugins، وتشكيل المخرجات لبيئات مختلفة. بالنسبة لصفحة صغيرة جدًا تحتوي على ملف أو ملفين JavaScript فقط، قد لا تحتاج إلى bundler في البداية؛ ولكن في التطبيقات التي تحتوي على تبعيات مشتركة، وحزم npm، وملفات assets، وبناءات للإنتاج (production builds)، فإن webpack يمنحك تحكمًا واضحًا بكيفية تجميع كل شيء.
diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx
index dc5007a06d99..8a03b4d10262 100644
--- a/src/content/guides/index.mdx
+++ b/src/content/guides/index.mdx
@@ -3,6 +3,7 @@ title: الأدلة
 sort: -1
 contributors:
   - arabpolice
+  - RlxChap2
 ---
 
 يحتوي هذا القسم على أدلة تساعدك على فهم وإتقان المجموعة الواسعة من الأدوات والميزات التي يوفرها webpack. أول دليل هو دليل يأخذك خطوة بخطوة في [البدء](/guides/getting-started/).

From a7219dbfcc58395c2a5725e41208c2386cdd9354 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 16:01:02 +0300
Subject: [PATCH 09/35] docs(ar): fix MDX lint issues

---
 .../blog/2020-10-10-webpack-5-release.mdx     |  1 +
 src/content/blog/2026-04-08-webpack-5-106.mdx | 28 +++++++++----------
 src/content/configuration/cache.mdx           | 22 +++++++--------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/content/blog/2020-10-10-webpack-5-release.mdx b/src/content/blog/2020-10-10-webpack-5-release.mdx
index b8bf968a8f6d..21c9a2b295b9 100644
--- a/src/content/blog/2020-10-10-webpack-5-release.mdx
+++ b/src/content/blog/2020-10-10-webpack-5-release.mdx
@@ -1049,6 +1049,7 @@ module.exports = {
 **الترحيل**: نظرًا لأن هذه وظيفة تم تقديمها حديثًا، فلا يوجد شيء لترحيله.
 
 ### التسجيل (Logging)
+
 تتضمن تصميمات webpack الداخلية بعض التسجيل (logging) الآن.
 يمكن استخدام خيارات `stats.logging` و `infrastructureLogging` لتمكين هذه الرسائل.
 
diff --git a/src/content/blog/2026-04-08-webpack-5-106.mdx b/src/content/blog/2026-04-08-webpack-5-106.mdx
index 9e1d9527a246..144b0bac3fa5 100644
--- a/src/content/blog/2026-04-08-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-08-webpack-5-106.mdx
@@ -10,15 +10,15 @@ contributors:
 
 اكتشف ما هو الجديد في هذا الإصدار:
 
-- [**التحقق من صحة الإضافات باستخدام `compiler.hooks.validate`**](#plugin-validation-with-compilerhooksvalidate)
-- [**CSS Modules مع حقن النمط في وقت التشغيل**](#css-modules-with-runtime-style-injection)
-- [**Tree Shaking أفضل لتفكيك CommonJS**](#better-tree-shaking-for-commonjs-destructuring)
-- [**استيرادات مرحلة المصدر لـ WebAssembly (تجريبي)**](#source-phase-imports-for-webassembly-experimental)
-- [**البدء مع `create-webpack-app`**](#getting-started-with-create-webpack-app)
-- [**دعم السياق لـ VirtualUrlPlugin**](#context-support-for-virtualurlplugin)
-- [**تحليل JavaScript تجريبي باستخدام `oxc-parser`**](#experimental-javascript-parsing-with-oxc-parser)
-- [**تحديثات النظام البيئي**](#ecosystem-updates)
-- [**إصلاحات الأخطاء**](#bug-fixes)
+- [**التحقق من صحة الإضافات باستخدام `compiler.hooks.validate`**](#التحقق-من-صحة-الإضافات-باستخدام-compilerhooksvalidate)
+- [**CSS Modules مع حقن النمط في وقت التشغيل**](#css-modules-مع-حقن-النمط-في-وقت-التشغيل)
+- [**Tree Shaking أفضل لتفكيك CommonJS**](#tree-shaking-أفضل-لتفكيك-commonjs)
+- [**استيرادات مرحلة المصدر لـ WebAssembly (تجريبي)**](#استيرادات-مرحلة-المصدر-لـ-webassembly-تجريبي)
+- [**البدء مع `create-webpack-app`**](#البدء-مع-create-webpack-app)
+- [**دعم السياق لـ VirtualUrlPlugin**](#دعم-السياق-لـ-virtualurlplugin)
+- [**تحليل JavaScript تجريبي باستخدام `oxc-parser`**](#تحليل-javascript-تجريبي-باستخدام-oxc-parser)
+- [**تحديثات النظام البيئي**](#تحديثات-النظام-البيئي)
+- [**إصلاحات الأخطاء**](#إصلاحات-الأخطاء)
 
 ## التحقق من صحة الإضافات باستخدام `compiler.hooks.validate`
 
@@ -36,11 +36,11 @@ module.exports = {
 تعتمد القيمة الافتراضية على وضع البناء:
 
 | Mode        | `experiments.futureDefaults` | الافتراضي لـ `validate` |
-| ----------- | :--------------------------: | :----------------: |
-| development |           `false`            |       `true`       |
-| development |            `true`            |       `true`       |
-| production  |           `false`            |       `true`       |
-| production  |            `true`            |      `false`       |
+| ----------- | :--------------------------: | :---------------------: |
+| development |           `false`            |         `true`          |
+| development |            `true`            |         `true`          |
+| production  |           `false`            |         `true`          |
+| production  |            `true`            |         `false`         |
 
 بالنسبة لمؤلفي الإضافات، يعد دمج التحقق أمرًا مباشرًا. قم بتسجيل tap على `compiler.hooks.validate`، وسيهتم webpack بالباقي، بما في ذلك تخطي التحقق تمامًا عندما يضبط المستخدم `validate: false`:
 
diff --git a/src/content/configuration/cache.mdx b/src/content/configuration/cache.mdx
index 1f4e998132ec..ff6f601d755c 100644
--- a/src/content/configuration/cache.mdx
+++ b/src/content/configuration/cache.mdx
@@ -13,11 +13,11 @@ contributors:
 
 تعتمد القيمة الافتراضية لـ `cache` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي               |
+| Mode            | الافتراضي            |
 | --------------- | -------------------- |
-| `"production"` | `false` |
+| `"production"`  | `false`              |
 | `"development"` | `{ type: 'memory' }` |
-| `"none"` | `false` |
+| `"none"`        | `false`              |
 
 **webpack.config.js**
 
@@ -39,10 +39,10 @@ export default {
 تعتمد القيمة الافتراضية لـ `cache.allowCollectingMemory` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `false` |
-| `"development"` | `true` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `false`   |
+| `"development"` | `true`    |
+| `"none"`        | `false`   |
 
 - <Badge text="5.35.0+" />
 
@@ -330,11 +330,11 @@ export default {
 
 تعتمد القيمة الافتراضية لـ `cache.maxMemoryGenerations` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي    |
+| Mode            | الافتراضي  |
 | --------------- | ---------- |
-| `"production"` | `Infinity` |
-| `"development"` | `5` |
-| `"none"` | `Infinity` |
+| `"production"`  | `Infinity` |
+| `"development"` | `5`        |
+| `"none"`        | `Infinity` |
 
 **webpack.config.js**
 

From 505b187b61ccc2c8a4e67749dd751367201237eb Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 16:01:14 +0300
Subject: [PATCH 10/35] feat(i18n): add language switcher

---
 .../LanguageSwitcher/LanguageSwitcher.jsx     | 54 +++++++++++++++++++
 .../LanguageSwitcher.test.jsx                 | 28 ++++++++++
 src/components/Navigation/Navigation.jsx      | 23 +-------
 3 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 src/components/LanguageSwitcher/LanguageSwitcher.jsx
 create mode 100644 src/components/LanguageSwitcher/LanguageSwitcher.test.jsx

diff --git a/src/components/LanguageSwitcher/LanguageSwitcher.jsx b/src/components/LanguageSwitcher/LanguageSwitcher.jsx
new file mode 100644
index 000000000000..e338bd07fcd0
--- /dev/null
+++ b/src/components/LanguageSwitcher/LanguageSwitcher.jsx
@@ -0,0 +1,54 @@
+import PropTypes from "prop-types";
+import { SITE_LANGUAGE } from "../../config/site.js";
+import Dropdown from "../Dropdown/Dropdown.jsx";
+
+const languages = [
+  {
+    lang: "ar",
+    title: "العربية",
+  },
+  {
+    lang: "en",
+    title: "English",
+    origin: "https://webpack.js.org",
+  },
+  {
+    lang: "zh",
+    title: "中文",
+    origin: "https://webpack.docschina.org",
+  },
+  {
+    lang: "ko",
+    title: "한국어",
+    origin: "https://webpack.kr",
+  },
+];
+
+function getLanguageUrl({ lang, origin }, pathname, hash) {
+  const path = `${pathname}${hash}`;
+
+  if (lang === SITE_LANGUAGE) {
+    return path;
+  }
+
+  return `${origin}${path}`;
+}
+
+export default function LanguageSwitcher({
+  className = "",
+  pathname = "/",
+  hash = "",
+}) {
+  const items = languages.map((language) => ({
+    ...language,
+    url: getLanguageUrl(language, pathname, hash),
+  }));
+
+  return <Dropdown className={className} items={items} />;
+}
+
+LanguageSwitcher.propTypes = {
+  className: PropTypes.string,
+  pathname: PropTypes.string,
+  hash: PropTypes.string,
+};
diff --git a/src/components/LanguageSwitcher/LanguageSwitcher.test.jsx b/src/components/LanguageSwitcher/LanguageSwitcher.test.jsx
new file mode 100644
index 000000000000..b6b178e10fcd
--- /dev/null
+++ b/src/components/LanguageSwitcher/LanguageSwitcher.test.jsx
@@ -0,0 +1,28 @@
+/**
+ * @jest-environment jsdom
+ */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { describe, expect, it } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import LanguageSwitcher from "./LanguageSwitcher.jsx";
+
+describe("LanguageSwitcher", () => {
+  it("keeps the current Arabic page relative and links other languages by origin", () => {
+    render(
+      <LanguageSwitcher pathname="/guides/getting-started/" hash="#npm" />,
+    );
+
+    expect(screen.getByText("العربية").closest("a").href).toBe(
+      "http://localhost/guides/getting-started/#npm",
+    );
+    expect(screen.getByText("English").closest("a").href).toBe(
+      "https://webpack.js.org/guides/getting-started/#npm",
+    );
+    expect(screen.getByText("中文").closest("a").href).toBe(
+      "https://webpack.docschina.org/guides/getting-started/#npm",
+    );
+    expect(screen.getByText("한국어").closest("a").href).toBe(
+      "https://webpack.kr/guides/getting-started/#npm",
+    );
+  });
+});
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 45a32c0fbab2..666f147ec05d 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -17,8 +17,8 @@ import GithubIcon from "../../styles/icons/github.svg";
 import Hamburger from "../../styles/icons/hamburger.svg";
 import StackOverflowIcon from "../../styles/icons/stack-overflow.svg";
 import XIcon from "../../styles/icons/x.svg";
-import Dropdown from "../Dropdown/Dropdown.jsx";
 import HelloDarkness from "../HelloDarkness.jsx";
+import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher.jsx";
 import Link from "../Link/Link.jsx";
 import Logo from "../Logo/Logo.jsx";
 import Tooltip from "../Tooltip/Tooltip.jsx";
@@ -184,26 +184,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 {children}
               </NavigationIcon>
             ))}
-            <Dropdown
-              className=""
-              items={[
-                {
-                  lang: "en",
-                  title: "English",
-                  url: `https://webpack.js.org${pathname}${locationHash}`,
-                },
-                {
-                  lang: "zh",
-                  title: "中文",
-                  url: `https://webpack.docschina.org${pathname}${locationHash}`,
-                },
-                {
-                  lang: "ko",
-                  title: "한국어",
-                  url: `https://webpack.kr${pathname}${locationHash}`,
-                },
-              ]}
-            />
+            <LanguageSwitcher pathname={pathname} hash={locationHash} />
           </nav>
           <div className="navigation__controls inline-flex items-center gap-x-[18px] ml-[18px]">
             <HelloDarkness />

From b28ccc1c4c38b904a0e94641f69622eda5a5a2b9 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 16:01:23 +0300
Subject: [PATCH 11/35] fix(ar): decode hash anchors

---
 src/components/Page/Page.jsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index 4cb7715d9cbd..d6f53c0ea4b1 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -13,6 +13,16 @@ import AdjacentPages from "./AdjacentPages.jsx";
 
 // Load Styling
 
+function getHashTargetId(hash) {
+  const targetId = hash.slice(1);
+
+  try {
+    return decodeURIComponent(targetId);
+  } catch {
+    return targetId;
+  }
+}
+
 export default function Page(props) {
   const {
     title,
@@ -60,17 +70,18 @@ export default function Page(props) {
     if (contentLoaded) {
       if (hash) {
         const target = document.querySelector("#md-content");
+        const targetId = getHashTargetId(hash);
         // two cases here
         // 1. server side rendered page, so hash target is already there
         // Note: Why this change because we use getElementById instead of querySelector(hash) here because
         // CSS selectors cannot start with a digit (e.g. #11-in-scope is invalid)
-        if (document.getElementById(hash.slice(1))) {
-          document.getElementById(hash.slice(1)).scrollIntoView();
+        if (document.getElementById(targetId)) {
+          document.getElementById(targetId).scrollIntoView();
         } else {
           // 2. dynamic loaded content
           // we need to observe the dom change to tell if hash exists
           observer = new MutationObserver(() => {
-            const element = document.getElementById(hash.slice(1));
+            const element = document.getElementById(targetId);
             if (element) {
               element.scrollIntoView();
               observer.disconnect();

From 6cdae0564c4f0c5141f39cdd3c2cf35d6496cf93 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 16:01:33 +0300
Subject: [PATCH 12/35] test(e2e): update Arabic assertions

---
 cypress/e2e/check-server-side-rendering.cy.js |  6 +++---
 cypress/e2e/offline.cy.js                     |  2 +-
 cypress/e2e/page-hash-navigation.cy.js        |  8 +++++---
 cypress/e2e/scroll.cy.js                      | 10 +++++-----
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/cypress/e2e/check-server-side-rendering.cy.js b/cypress/e2e/check-server-side-rendering.cy.js
index d2fe9bd93ef6..986d94564899 100644
--- a/cypress/e2e/check-server-side-rendering.cy.js
+++ b/cypress/e2e/check-server-side-rendering.cy.js
@@ -6,13 +6,13 @@ describe("server side rendered page", () => {
     cy.get('head meta[name="description"]').should(
       "have.attr",
       "content",
-      "Learn how to bundle a JavaScript application with webpack 5.",
+      "تعلّم كيفية تجميع تطبيق JavaScript باستخدام webpack 5.",
     );
   });
 
   it("should find html tag with lang", () => {
     cy.visit("/");
-    cy.get('html[lang="en"]');
+    cy.get('html[lang="ar"][dir="rtl"]');
   });
 
   it("should find meta charset", () => {
@@ -34,6 +34,6 @@ describe("server side rendered page", () => {
     cy.title().should("eq", "webpack");
 
     cy.visit("/guides/getting-started/");
-    cy.title().should("eq", "Getting Started | webpack");
+    cy.title().should("eq", "البدء | webpack");
   });
 });
diff --git a/cypress/e2e/offline.cy.js b/cypress/e2e/offline.cy.js
index 60e6b5f73815..810132c2ffb7 100644
--- a/cypress/e2e/offline.cy.js
+++ b/cypress/e2e/offline.cy.js
@@ -65,7 +65,7 @@ describe("offline", () => {
 
       // click `guides` link
       cy.get('a[title="guides"]').click();
-      cy.get("h1").contains("Guides");
+      cy.get("h1").contains("الأدلة");
     });
 
     it("open print dialog when accessing /printable url", () => {
diff --git a/cypress/e2e/page-hash-navigation.cy.js b/cypress/e2e/page-hash-navigation.cy.js
index efa0512dfeee..351ccfd0aa58 100644
--- a/cypress/e2e/page-hash-navigation.cy.js
+++ b/cypress/e2e/page-hash-navigation.cy.js
@@ -2,11 +2,13 @@
 
 describe("Page hash navigation", () => {
   it("scrolls to the element specified by the hash", () => {
-    cy.visit("/guides/getting-started/#basic-setup");
+    cy.visit(`/guides/getting-started/${encodeURI("#الإعداد-الأساسي")}`);
 
-    cy.location("hash").should("eq", "#basic-setup");
+    cy.location("hash").then((hash) => {
+      expect(decodeURIComponent(hash)).to.equal("#الإعداد-الأساسي");
+    });
 
-    cy.get("#basic-setup", { timeout: 10000 })
+    cy.get('[id="الإعداد-الأساسي"]', { timeout: 10000 })
       .should("exist")
       .then(($el) => {
         const rect = $el[0].getBoundingClientRect();
diff --git a/cypress/e2e/scroll.cy.js b/cypress/e2e/scroll.cy.js
index 001e6b40b50d..58a514e2a806 100644
--- a/cypress/e2e/scroll.cy.js
+++ b/cypress/e2e/scroll.cy.js
@@ -10,7 +10,7 @@ describe("Scroll Test", () => {
       // scroll to Contributors section
       cy.get('[data-testid="contributors"]').scrollIntoView();
 
-      cy.isNotInViewport("#basic-setup");
+      cy.isNotInViewport('[id="الإعداد-الأساسي"]');
 
       cy.visit("/guides/build-performance/");
       cy.isNotInViewport('[data-testid="contributors"]');
@@ -20,10 +20,10 @@ describe("Scroll Test", () => {
       cy.visit("/guides/getting-started");
       cy.get('[data-testid="contributors"]').scrollIntoView();
 
-      cy.visit("/guides/build-performance/#development");
-      // since we lazy load notification bar now, #development element is a little out of viewport now
-      cy.isInViewport("#compile-in-memory");
-      cy.isNotInViewport("#general");
+      cy.visit(`/guides/build-performance/${encodeURI("#التطوير")}`);
+      // since we lazy load notification bar now, #التطوير element is a little out of viewport now
+      cy.isInViewport('[id="الترجمة-في-الذاكرة"]');
+      cy.isNotInViewport('[id="عام"]');
     });
   }
 });

From cf426c0c6dba372ae2d13cd1a7f63b6dd1fd2a1f Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:01:46 +0300
Subject: [PATCH 13/35] fix(ar): encode heading anchors

---
 cypress/e2e/page-hash-navigation.cy.js        | 10 +++--
 cypress/e2e/scroll.cy.js                      | 12 ++++--
 src/components/Page/Page.jsx                  | 19 +++++----
 .../__snapshots__/index.test.mjs.snap         |  6 +++
 src/remark-plugins/remark-slug/index.mjs      |  5 +++
 src/remark-plugins/remark-slug/index.test.mjs | 16 +++++++
 src/utilities/content-tree-enhancers.mjs      | 13 +++++-
 src/utilities/content-tree-enhancers.test.mjs | 42 ++++++++++++++++++-
 8 files changed, 106 insertions(+), 17 deletions(-)

diff --git a/cypress/e2e/page-hash-navigation.cy.js b/cypress/e2e/page-hash-navigation.cy.js
index 351ccfd0aa58..f0f931e9f4f3 100644
--- a/cypress/e2e/page-hash-navigation.cy.js
+++ b/cypress/e2e/page-hash-navigation.cy.js
@@ -2,13 +2,15 @@
 
 describe("Page hash navigation", () => {
   it("scrolls to the element specified by the hash", () => {
-    cy.visit(`/guides/getting-started/${encodeURI("#الإعداد-الأساسي")}`);
+    const hash = encodeURI("#الإعداد-الأساسي");
 
-    cy.location("hash").then((hash) => {
-      expect(decodeURIComponent(hash)).to.equal("#الإعداد-الأساسي");
+    cy.visit(`/guides/getting-started/${hash}`);
+
+    cy.location("hash").then((locationHash) => {
+      expect(locationHash).to.equal(hash);
     });
 
-    cy.get('[id="الإعداد-الأساسي"]', { timeout: 10000 })
+    cy.get(`[id="${hash.slice(1)}"]`, { timeout: 10000 })
       .should("exist")
       .then(($el) => {
         const rect = $el[0].getBoundingClientRect();
diff --git a/cypress/e2e/scroll.cy.js b/cypress/e2e/scroll.cy.js
index 58a514e2a806..cae9ec3eda2b 100644
--- a/cypress/e2e/scroll.cy.js
+++ b/cypress/e2e/scroll.cy.js
@@ -1,6 +1,10 @@
 "use strict";
 
 const sizes = ["iphone-6", "macbook-15"];
+const basicSetupHash = encodeURI("#الإعداد-الأساسي");
+const compileInMemoryHash = encodeURI("#الترجمة-في-الذاكرة");
+const developmentHash = encodeURI("#التطوير");
+const generalHash = encodeURI("#عام");
 
 describe("Scroll Test", () => {
   for (const size of sizes) {
@@ -10,7 +14,7 @@ describe("Scroll Test", () => {
       // scroll to Contributors section
       cy.get('[data-testid="contributors"]').scrollIntoView();
 
-      cy.isNotInViewport('[id="الإعداد-الأساسي"]');
+      cy.isNotInViewport(`[id="${basicSetupHash.slice(1)}"]`);
 
       cy.visit("/guides/build-performance/");
       cy.isNotInViewport('[data-testid="contributors"]');
@@ -20,10 +24,10 @@ describe("Scroll Test", () => {
       cy.visit("/guides/getting-started");
       cy.get('[data-testid="contributors"]').scrollIntoView();
 
-      cy.visit(`/guides/build-performance/${encodeURI("#التطوير")}`);
+      cy.visit(`/guides/build-performance/${developmentHash}`);
       // since we lazy load notification bar now, #التطوير element is a little out of viewport now
-      cy.isInViewport('[id="الترجمة-في-الذاكرة"]');
-      cy.isNotInViewport('[id="عام"]');
+      cy.isInViewport(`[id="${compileInMemoryHash.slice(1)}"]`);
+      cy.isNotInViewport(`[id="${generalHash.slice(1)}"]`);
     });
   }
 });
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index d6f53c0ea4b1..156ffcb5bd5c 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -13,13 +13,13 @@ import AdjacentPages from "./AdjacentPages.jsx";
 
 // Load Styling
 
-function getHashTargetId(hash) {
+function getHashTargetIds(hash) {
   const targetId = hash.slice(1);
 
   try {
-    return decodeURIComponent(targetId);
+    return [targetId, decodeURIComponent(targetId)];
   } catch {
-    return targetId;
+    return [targetId];
   }
 }
 
@@ -70,18 +70,23 @@ export default function Page(props) {
     if (contentLoaded) {
       if (hash) {
         const target = document.querySelector("#md-content");
-        const targetId = getHashTargetId(hash);
+        const targetIds = getHashTargetIds(hash);
         // two cases here
         // 1. server side rendered page, so hash target is already there
         // Note: Why this change because we use getElementById instead of querySelector(hash) here because
         // CSS selectors cannot start with a digit (e.g. #11-in-scope is invalid)
-        if (document.getElementById(targetId)) {
-          document.getElementById(targetId).scrollIntoView();
+        const existingTarget = targetIds
+          .map((targetId) => document.getElementById(targetId))
+          .find(Boolean);
+        if (existingTarget) {
+          existingTarget.scrollIntoView();
         } else {
           // 2. dynamic loaded content
           // we need to observe the dom change to tell if hash exists
           observer = new MutationObserver(() => {
-            const element = document.getElementById(targetId);
+            const element = targetIds
+              .map((targetId) => document.getElementById(targetId))
+              .find(Boolean);
             if (element) {
               element.scrollIntoView();
               observer.disconnect();
diff --git a/src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap b/src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap
index 48c1ff10c59e..2f09b3c759d7 100644
--- a/src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap
+++ b/src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap
@@ -5,3 +5,9 @@ exports[`remark slug should add id 1`] = `
 <p>this is me.</p>
 "
 `;
+
+exports[`remark slug should encode non-ASCII ids 1`] = `
+"<h2 id="user-content-%D8%A7%D9%84%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A"><span id="user-content-%D8%A7%D9%84%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A"></span>الإعداد الأساسي</h2>
+<p>this is me.</p>
+"
+`;
diff --git a/src/remark-plugins/remark-slug/index.mjs b/src/remark-plugins/remark-slug/index.mjs
index b8b3a968f2e6..fb8a5eac07a9 100644
--- a/src/remark-plugins/remark-slug/index.mjs
+++ b/src/remark-plugins/remark-slug/index.mjs
@@ -11,6 +11,10 @@ import { visit } from "unist-util-visit";
 
 const slugs = new BananaSlug();
 
+function encodeSlug(slug) {
+  return encodeURI(slug);
+}
+
 /**
  * Plugin to add anchors headings using GitHub’s algorithm.
  *
@@ -26,6 +30,7 @@ export default function remarkSlug() {
       let { id } = props;
 
       id = id ? slugs.slug(String(id), true) : slugs.slug(toString(node));
+      id = encodeSlug(id);
 
       data.id = id;
       props.id = id;
diff --git a/src/remark-plugins/remark-slug/index.test.mjs b/src/remark-plugins/remark-slug/index.test.mjs
index 6d401ddbf7c1..dc487236a6ba 100644
--- a/src/remark-plugins/remark-slug/index.test.mjs
+++ b/src/remark-plugins/remark-slug/index.test.mjs
@@ -10,6 +10,22 @@ describe("remark slug", () => {
       .process(
         `## hello world
 
+this is me.
+`,
+        (err, { value: contents }) => {
+          expect(err).toBeUndefined();
+          expect(contents).toMatchSnapshot();
+        },
+      );
+  });
+
+  it("should encode non-ASCII ids", () => {
+    remark()
+      .use(Plugin)
+      .use(remarkHtml)
+      .process(
+        `## الإعداد الأساسي
+
 this is me.
 `,
         (err, { value: contents }) => {
diff --git a/src/utilities/content-tree-enhancers.mjs b/src/utilities/content-tree-enhancers.mjs
index f65ea262fa38..7d8ec0147f8b 100644
--- a/src/utilities/content-tree-enhancers.mjs
+++ b/src/utilities/content-tree-enhancers.mjs
@@ -10,6 +10,14 @@ import remarkHtml from "remark-html";
 import slug from "../../src/remark-plugins/remark-slug/index.mjs";
 import remarkRemoveHeadingId from "../remark-plugins/remark-remove-heading-id/index.mjs";
 
+function encodeAnchorId(id) {
+  try {
+    return encodeURI(decodeURI(id));
+  } catch {
+    return encodeURI(id);
+  }
+}
+
 export const enhance = (tree, options) => {
   // Normalize everything to forward slashes for cross-platform consistency
   const dir = path
@@ -58,7 +66,10 @@ export const enhance = (tree, options) => {
         }
       });
 
-    tree.anchors = anchors;
+    tree.anchors = anchors.map((anchor) => ({
+      ...anchor,
+      id: anchor.id ? encodeAnchorId(anchor.id) : anchor.id,
+    }));
 
     const dateRegex = /\((\d{4}-\d{2}-\d{2})\)/;
     const match = attributes.title ? attributes.title.match(dateRegex) : null;
diff --git a/src/utilities/content-tree-enhancers.test.mjs b/src/utilities/content-tree-enhancers.test.mjs
index dfb7d12da696..6a5ce4969f86 100644
--- a/src/utilities/content-tree-enhancers.test.mjs
+++ b/src/utilities/content-tree-enhancers.test.mjs
@@ -1,8 +1,19 @@
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { describe, expect } from "@jest/globals";
+import { afterEach, describe, expect } from "@jest/globals";
 import { restructure } from "./content-tree-enhancers.mjs";
 
 describe("restructure", () => {
+  const tempDirectories = [];
+
+  afterEach(() => {
+    for (const directory of tempDirectories.splice(0)) {
+      fs.rmSync(directory, { force: true, recursive: true });
+    }
+  });
+
   it("applies filter result back to children array", () => {
     const originalChildren = [
       {
@@ -54,4 +65,33 @@ describe("restructure", () => {
 
     expect(root.children.map((item) => item.title)).toEqual(["API", "Guides"]);
   });
+
+  it("encodes non-ASCII anchor ids", () => {
+    const directory = fs.mkdtempSync(
+      path.join(os.tmpdir(), "content-tree-enhancers-"),
+    );
+    tempDirectories.push(directory);
+
+    const file = path.join(directory, "getting-started.mdx");
+    fs.writeFileSync(
+      file,
+      `---
+title: Getting Started
+---
+
+## الإعداد الأساسي
+`,
+    );
+
+    const page = {
+      type: "file",
+      path: file,
+      name: "getting-started.mdx",
+      extension: ".mdx",
+    };
+
+    restructure(page, { dir: directory });
+
+    expect(page.anchors[0].id).toBe(encodeURI("الإعداد-الأساسي"));
+  });
 });

From 6dd7172b57f81d5842ada9f7ac3a1486d80e1323 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:02:00 +0300
Subject: [PATCH 14/35] docs(ar): fix links and lint

---
 .../blog/2020-10-10-webpack-5-release.mdx     |   4 +
 src/content/blog/2026-02-03-webpack-5-105.mdx |  18 ++
 src/content/concepts/entry-points.mdx         |   4 +
 src/content/concepts/why-webpack.mdx          |   2 +
 .../configuration/configuration-types.mdx     |   8 +
 src/content/configuration/dev-server.mdx      |  10 +-
 src/content/configuration/devtool.mdx         |  94 ++++-----
 src/content/configuration/entry-context.mdx   |   4 +
 src/content/configuration/experiments.mdx     |  22 ++-
 src/content/configuration/module.mdx          |  30 +--
 src/content/configuration/other-options.mdx   |   4 +
 src/content/configuration/output.mdx          | 178 ++++++++++--------
 src/content/configuration/stats.mdx           |  26 ++-
 src/content/guides/code-splitting.mdx         |  47 +++--
 src/content/guides/dependency-management.mdx  |   2 +
 src/content/guides/development.mdx            |  14 +-
 src/content/guides/ecma-script-modules.mdx    |   2 +
 src/content/guides/installation.mdx           |   2 +
 src/content/guides/lazy-loading.mdx           |   2 +
 src/content/guides/output-management.mdx      |   8 +-
 src/content/guides/production.mdx             |   2 +
 src/content/guides/public-path.mdx            |   2 +
 src/content/guides/tree-shaking.mdx           |   2 +
 23 files changed, 312 insertions(+), 175 deletions(-)

diff --git a/src/content/blog/2020-10-10-webpack-5-release.mdx b/src/content/blog/2020-10-10-webpack-5-release.mdx
index 21c9a2b295b9..b2dc43a938fc 100644
--- a/src/content/blog/2020-10-10-webpack-5-release.mdx
+++ b/src/content/blog/2020-10-10-webpack-5-release.mdx
@@ -644,6 +644,8 @@ module.exports = {
 
 ## تغييرات على التكوين (Configuration)
 
+<span id="changes-to-the-configuration"></span>
+
 ### تغييرات على الهيكل (Structure)
 
 - `entry: {}` يسمح بكائن فارغ الآن (للسماح باستخدام الإضافات لإضافة إدخالات)
@@ -951,6 +953,8 @@ module.exports = {
 
 #### وقت تشغيل نقطة الدخول (Entry point runtime)
 
+<span id="entry-point-runtime"></span>
+
 يسمح واصف الإدخال بتحديد `runtime` لكل إدخال.
 عند تحديده، يتم إنشاء حزمة بهذا الاسم والتي تحتوي فقط على كود وقت التشغيل للإدخال.
 عندما تحدد مدخلات متعددة نفس الـ `runtime`، ستحتوي تلك الحزمة على وقت تشغيل مشترك (common runtime) لجميع هذه المدخلات.
diff --git a/src/content/blog/2026-02-03-webpack-5-105.mdx b/src/content/blog/2026-02-03-webpack-5-105.mdx
index bcfce43778cd..feeb355a2c7e 100644
--- a/src/content/blog/2026-02-03-webpack-5-105.mdx
+++ b/src/content/blog/2026-02-03-webpack-5-105.mdx
@@ -22,6 +22,8 @@ contributors:
 
 ## إصلاح ثغرتين أمنيتين (CVEs) منخفضتي الخطورة في Webpack
 
+<span id="two-low-severity-cves-fixed-in-webpack"></span>
+
 تم إصلاح ونشر ثغرتين أمنيتين (CVEs) جديدتين منخفضتي الخطورة في Webpack.
 بشكل افتراضي، أنت في أمان؛ هذه المشاكل تؤثر فقط على مستخدمي الخيار التجريبي
 [`experiments.buildHttp`](/configuration/experiments/#experimentsbuildhttp).
@@ -46,6 +48,8 @@ contributors:
 
 ## تحليل الأسماء المستعارة في `tsconfig.json` دون الحاجة إلى إضافات (plugins)
 
+<span id="tsconfigjson-alias-resolution-without-requiring-plugins"></span>
+
 يمكن الآن تكوين تحليل الوحدات (Module resolution) لقراءة `compilerOptions.baseUrl` و `compilerOptions.paths` من ملف `tsconfig.json` وتطبيق تلك الأسماء المستعارة عند تحليل الواردات (imports). نتيجة لذلك، لم يعد من الضروري تثبيت وتكوين الإضافة الخارجية `tsconfig-paths-webpack-plugin` فقط لجعل الأسماء المستعارة لمسارات TypeScript تعمل أثناء الحزم (bundling).
 
 في تكوين webpack، يُستخدم الخيار `resolve.tsconfig` لتحديد ملف tsconfig الذي يجب استخدامه كمصدر (وهو مفيد أيضًا في المستودعات الأحادية monorepos أو الإعدادات التي تحتوي على ملفات tsconfig متعددة):
@@ -82,6 +86,8 @@ import Button from "@/components/Button";
 
 ## تحليل الوحدات (Module Resolution) التلقائي لـ Web Workers
 
+<span id="automatic-module-resolution-for-web-workers"></span>
+
 عند استيراد حزمة مخصصة لاستخدامها في Web Worker في Webpack، يمكن لتحليل الوحدات إعطاء الأولوية لملفات مثل `index.worker.js` بدلاً من `index.js` عند استخدام [الصادرات المشروطة (conditional exports)](https://nodejs.org/api/packages.html#conditional-exports) المعرفة في حقل `exports` في `package.json`.
 
 هذا يعني أنه إذا قمت بتحديد شروط مثل `"worker"` في صادرات حزمتك، سيقوم Webpack تلقائيًا بتحديد الإصدار المناسب، مثل `index.worker.js`، كلما تم استيراد الحزمة داخل سياق الـ worker. لا حاجة لتعديل خيار `resolve.conditionNames` أو إجراء تغييرات إضافية في تكوين Webpack؛ تحتاج فقط إلى تحديد الشروط بشكل صحيح في `package.json`.
@@ -115,6 +121,8 @@ const worker = new Worker(new URL("foo", import.meta.url), {
 
 ## دعم حارس محدد الاستيراد (Import Specifier Guard)
 
+<span id="support-import-specifier-guard"></span>
+
 تمت إضافة دعم لحراس محدد الاستيراد (import specifier guards)، وهو تحسين يساعد المحزم (bundler) على فهم النمط الشائع بشكل أفضل عند التحقق مما إذا كان التصدير موجودًا قبل استخدامه. في السابق، حتى لو كان الكود محميًا بشكل صحيح بواسطة عبارة if، كان من الممكن تفسير الوصول على أنه غير مشروط ويؤدي إلى تحذيرات مثل "export … was not found" (التصدير ... غير موجود).
 
 مع هذا التغيير، يُعترف بهذه التحققات كإشارة على أن الوصول مشروط، ويتم تعديل التحليل وفقًا لذلك. من الناحية العملية، يجعل هذا من الممكن كتابة كود متوافق بشكل أكبر عبر الإصدارات المختلفة لنفس المكتبة، حيث قد يوجد التصدير أو لا يوجد، دون تشويش غير ضروري أثناء التحويل البرمجي (compilation).
@@ -131,6 +139,8 @@ if (React.useId) {
 
 ## دعم `import.defer()` لوحدة السياق (Context Module)
 
+<span id="support-importdefer-for-context-module"></span>
+
 يدعم Webpack الآن `import.defer()` حتى عندما يكون الاستيراد وحدة سياق (context module) (أي عندما يتم بناء مسار الاستيراد ديناميكيًا ويحتاج webpack إلى تضمين مجموعة من الملفات المحتملة). عمليًا، يجعل هذا من الأسهل بكثير تأجيل تحميل الوحدة المحددة في وقت التشغيل، حتى عندما تأتي تلك الوحدة من تعبير ديناميكي يشير إلى مجلد. ويتيح هذا أنماطًا مثل "اختر بين a.js أو b.js وقم بتحميله فقط عند الحاجة"، مع توليد webpack للسياق المناسب لضمان عمل import.defer() بشكل صحيح.
 
 {/* eslint-disable */}
@@ -144,6 +154,8 @@ import.defer("./dir/" + file);
 
 ## الحفاظ على الخصائص المخصصة في `import.meta`
 
+<span id="preserving-custom-importmeta-properties"></span>
+
 يحافظ Webpack الآن على الخصائص المخصصة لـ `import.meta` أثناء الحزم عند تفعيل [`output.module`](/configuration/output/#outputmodule). في السابق، كان Webpack يقوم بإزالة أي خصائص `import.meta` غير معروفة (مثل `import.meta.customProp`)، مما يتسبب في فقدان المعلومات السياقية أو الخاصة بالأدوات في البناء.
 
 مع هذا التغيير، ستبقى أي خاصية غير قياسية تضيفها إلى `import.meta` سليمة في الكود المُولد، مما يسمح باستخدام المعلومات الوصفية (meta-information) المخصصة أو الإشارات الإضافية في التطبيقات الحديثة.
@@ -174,6 +186,8 @@ module.exports = {
 
 ## تحكم أفضل في خرائط المصدر (Source Maps) في `devtool`
 
+<span id="better-control-of-source-maps-in-devtool"></span>
+
 يسمح Webpack الآن لخيار `devtool` بقبول كل من **سلسلة نصية (string)** ومصفوفة من الكائنات (array of objects) للتكوينات المتقدمة.
 
 يمكن أن يتضمن كل كائن في المصفوفة:
@@ -211,10 +225,14 @@ module.exports = {
 
 ## مخرجات ESM أنظف لـ Node.js وعمليات البناء الحديثة
 
+<span id="cleaner-esm-output-for-nodejs-and-modern-builds"></span>
+
 يحسّن هذا التحسين في Webpack معالجة وتمثيل وحدات Node.js الأصلية (مثل `fs`, `path`, أو `crypto`) أثناء عملية الحزم، وخاصة عند استخدام الخيار [`output.module`](/configuration/output/#outputmodule) في التكوين. عند تفعيل `output.module: true`، يقوم Webpack الآن بتوليد استيرادات للوحدات الأصلية باستخدام صياغة ES module أي `import ... from "module"` بدلاً من `require("module")` الخاصة بـ CommonJS، بغض النظر عما إذا كان الكود سيعمل في بيئة الويب أو Node.js.
 
 ## تحسينات وإصلاحات أخرى
 
+<span id="other-improvements-and-bug-fixes"></span>
+
 - أصدر **Webpack-dev-server** إصدارًا جديدًا لتحديث التبعيات (dependencies) التي أُبلغ عن وجود ثغرات انتقالية بها، لذا يوصى بالتحديث. بالإضافة إلى ذلك، تمت إضافة خيار لإغلاق تراكب الخطأ (error overlay) بالضغط على مفتاح ESC، وتم إصلاح العديد من الأخطاء. تحقق من [الإصدار لمزيد من المعلومات](https://github.com/webpack/webpack-dev-server/releases/tag/v5.2.3).
 - تلقى **Webpack-bundle-analyzer** تحسينات وإصلاحات مهمة لتجربة المستخدم. تم حل المشكلات البصرية المتعلقة بـ tooltips في الوضع المظلم، وأصبح تحليل الحزم باستخدام IIFE أكثر قوة، مما يمنع الأخطاء. بالإضافة إلى ذلك، تمت إضافة دعم لضغط Zstandard، وهو متاح فقط في Node.js 22.15 أو أعلى. تحقق من [سجل التغييرات لمزيد من المعلومات](https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md).
 - يقدم **Mini-css-extract-plugin** ميزات جديدة وإصلاحات للأخطاء. من بين التغييرات الرئيسية، أصبحت الإضافة الآن تحترم الخيارين `output.cssFilename` و `output.cssChunkFilename`، مما يسمح بتحكم أدق في أسماء ملفات CSS المولدة. بالإضافة إلى ذلك، تم إصلاح خلل كان يمنع توليد `contentHash` للـ chunk عندما يكون حجم مجموعة وحدات CSS صفراً، مما يتجنب التجزئة (hashes) غير الضرورية في تلك الحالات. تحقق من [الإصدار لمزيد من المعلومات](https://github.com/webpack/mini-css-extract-plugin/releases/tag/v2.10.0).
diff --git a/src/content/concepts/entry-points.mdx b/src/content/concepts/entry-points.mdx
index bb160c116367..33ae6f3bc380 100644
--- a/src/content/concepts/entry-points.mdx
+++ b/src/content/concepts/entry-points.mdx
@@ -95,6 +95,8 @@ T> يمكنك تمرير كائن فارغ `{}` إلى `entry` عندما تكو
 
 ### كائن EntryDescription
 
+<span id="entrydescription-object"></span>
+
 هو كائن يصف نقطة الدخول. يمكنك تحديد الخصائص الآتية:
 
 - `dependOn`: نقاط الدخول التي تعتمد عليها نقطة الدخول الحالية. يجب تحميلها قبل تحميل نقطة الدخول الحالية.
@@ -172,6 +174,8 @@ export default {
 
 ### فصل مدخل التطبيق ومدخل vendor
 
+<span id="separate-app-and-vendor-entries"></span>
+
 **webpack.config.js**
 
 ```js
diff --git a/src/content/concepts/why-webpack.mdx b/src/content/concepts/why-webpack.mdx
index 1c1255a1af92..15133a9c36b2 100644
--- a/src/content/concepts/why-webpack.mdx
+++ b/src/content/concepts/why-webpack.mdx
@@ -11,6 +11,8 @@ contributors:
 
 ## IIFEs - تعبيرات الدوال المستدعاة فورًا
 
+<span id="iifes---immediately-invoked-function-expressions"></span>
+
 تحل IIFEs مشكلات النطاق في المشاريع الكبيرة؛ عندما تُلف ملفات السكربت داخل IIFE، يمكنك دمج الملفات أو جمعها بأمان دون القلق من تصادم النطاقات.
 
 أدى استخدام IIFEs إلى ظهور أدوات مثل Make و Gulp و Grunt و Broccoli و Brunch. تُعرف هذه الأدوات باسم مشغلات المهام، وهي تجمع كل ملفات مشروعك معًا.
diff --git a/src/content/configuration/configuration-types.mdx b/src/content/configuration/configuration-types.mdx
index 95a39634f7e1..9d5e22ebe658 100644
--- a/src/content/configuration/configuration-types.mdx
+++ b/src/content/configuration/configuration-types.mdx
@@ -9,6 +9,8 @@ contributors:
 
 ## تصدير دالّة
 
+<span id="exporting-a-function"></span>
+
 ستجد عاجلاً أم آجلاً حاجة إلى التمييز داخل `webpack.config.js` بين [بناء التطوير](/guides/development) و[بناء الإنتاج](/guides/production). وثمّة طرق متعددة لذلك. من بينها أن تُصدّر دالّة من ملف تخصيص webpack بدلاً من تصدير كائن. سيتمّ استدعاء هذه الدالّة بمعاملين:
 
 - بيئة (environment) بوصفها المعامل الأول. راجع [توثيق خيارات البيئة في الـ CLI](/api/cli/#environment-options) لأمثلة على الصياغة.
@@ -33,6 +35,8 @@ contributors:
 
 ## تصدير Promise
 
+<span id="exporting-a-promise"></span>
+
 سيُشغّل webpack الدالّة المُصدَّرة من ملف التخصيص، وينتظر منها إرجاع Promise. وهذا مفيد حين تحتاج إلى تحميل متغيّرات التخصيص بشكل غير متزامن.
 
 T> يمكنك تصدير عدّة Promises عبر تغليفها داخل `Promise.all([/* Promises الخاصة بك */])`.
@@ -53,6 +57,8 @@ W> إرجاع `Promise` يعمل فقط حين تستخدم webpack عبر ال
 
 ## تصدير تخصيصات متعددة
 
+<span id="exporting-multiple-configurations"></span>
+
 عوضاً عن تصدير كائن أو دالّة تخصيص واحدة، يمكنك تصدير عدّة تخصيصات (وقد دُعمت الدوال المتعددة منذ webpack 3.1.0). وعند تشغيل webpack، تُبنى كل التخصيصات معاً. وهذا مفيد مثلاً عند [حزم مكتبة](/guides/author-libraries) لعدّة [أهداف (targets)](/configuration/output/#outputlibrarytarget) كـ AMD و CommonJS:
 
 ```js
@@ -119,6 +125,8 @@ const config = [
     // التخصيص-2
   },
 ];
+
 config.parallelism = 1;
+
 export default config;
 ```
diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx
index 6b8fda6134cb..1bc93c00c889 100644
--- a/src/content/configuration/dev-server.mdx
+++ b/src/content/configuration/dev-server.mdx
@@ -284,11 +284,11 @@ npx webpack serve --no-client-overlay
 
 يمكنك توفير object بالخصائص التالية لمزيد من التحكم الدقيق:
 
-| الملكية        | شرح              |
-| --------------- | ------------------------ |
-| `errors`        | compilation أخطاء       |
+| الملكية         | شرح                           |
+| --------------- | ----------------------------- |
+| `errors`        | compilation أخطاء             |
 | `runtimeErrors` | أخطاء runtime لم تتم معالجتها |
-| `warnings`      | compilation تحذيرات     |
+| `warnings`      | compilation تحذيرات           |
 
 جميع الخصائص اختيارية وتكون افتراضيًا `true` عندما لا يتم توفيرها.
 
@@ -1506,6 +1506,8 @@ npx webpack serve --static assets --static css
 
 ### الدليل
 
+<span id="directory"></span>
+
 `string = path.join(process.cwd(), 'public')`
 
 أخبر server من أين سيتم تقديم المحتوى. يعد هذا ضروريًا فقط إذا كنت تريد تقديم ملفات ثابتة. سيتم استخدام [`static.publicPath`](#publicpath) لتحديد المكان الذي يجب تقديم bundles منه ويكون له الأولوية.
diff --git a/src/content/configuration/devtool.mdx b/src/content/configuration/devtool.mdx
index 753eb37ee390..e2a50a8efd95 100644
--- a/src/content/configuration/devtool.mdx
+++ b/src/content/configuration/devtool.mdx
@@ -47,49 +47,57 @@ T> يحتوي مستودع webpack على [مثال يوضح تأثير جميع
 
 T> بدلاً من استخدام الخيار `devtool` يمكنك أيضًا استخدام `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` مباشرة لأنه يحتوي على المزيد من الخيارات. لا تستخدم أبدًا الخيارين `devtool` وplugin معًا. يضيف خيار `devtool` plugin داخليًا بحيث ينتهي بك الأمر إلى تطبيق plugin مرتين.
 
-| devtool                                    | performance                                        | الإنتاج | الجودة        | تعليق                                                                               |
-| ------------------------------------------ | -------------------------------------------------- | ---------- | -------------- | ------------------------------------------------------------------------------------- |
-| (لا شيء)                                     | **build**: الأسرع<br /><br />**rebuild**: الأسرع | نعم        | bundle         | الاختيار الموصى به لإصدارات الإنتاج بحد أقصى performance.                    |
-| **`eval`**                                 | **build**: سريع<br /><br />**rebuild**: الأسرع    | no         | ولدت      | يُوصى باختيار التطوير بحد أقصى performance.                   |
-| `eval-cheap-source-map`                    | **build**: ok<br /><br />**rebuild**: سريع         | no         | تحولت    | خيار المقايضة للتنمية يبني.                                               |
-| `eval-cheap-module-source-map`             | **build**: بطيء<br /><br />**rebuild**: سريع       | no         | الخطوط الأصلية | خيار المقايضة للتنمية يبني.                                               |
-| **`eval-source-map`**                      | **build**: الأبطأ<br /><br />**rebuild**: حسنًا      | no         | original       | الاختيار الموصى به للتطوير يبني بجودة عالية Source Maps.               |
-| `cheap-source-map`                         | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    |                                                                                       |
-| `cheap-module-source-map`                  | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية |                                                                                       |
-| **`source-map`**                           | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | الاختيار الموصى به للإنتاج يبني بجودة عالية Source Maps.                |
-| `inline-cheap-source-map`                  | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    |                                                                                       |
-| `inline-cheap-module-source-map`           | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية |                                                                                       |
-| `inline-source-map`                        | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | no         | original       | الاختيار المحتمل عند نشر ملف واحد                                         |
-| `eval-nosources-cheap-source-map`          | **build**: ok<br /><br />**rebuild**: سريع         | no         | تحولت    | كود المصدر غير متضمن                                                              |
-| `eval-nosources-cheap-module-source-map`   | **build**: بطيء<br /><br />**rebuild**: سريع       | no         | الخطوط الأصلية | كود المصدر غير متضمن                                                              |
-| `eval-nosources-source-map`                | **build**: الأبطأ<br /><br />**rebuild**: حسنًا      | no         | original       | كود المصدر غير متضمن                                                              |
-| `inline-nosources-cheap-source-map`        | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | كود المصدر غير متضمن                                                              |
-| `inline-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | كود المصدر غير متضمن                                                              |
-| `inline-nosources-source-map`              | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | no         | original       | كود المصدر غير متضمن                                                              |
-| `nosources-cheap-source-map`               | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | كود المصدر غير متضمن                                                              |
-| `nosources-cheap-module-source-map`        | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | كود المصدر غير متضمن                                                              |
-| `nosources-source-map`                     | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | كود المصدر غير متضمن                                                              |
-| `hidden-nosources-cheap-source-map`        | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | لا يوجد مرجع، كود المصدر غير مدرج                                                |
-| `hidden-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | لا يوجد مرجع، كود المصدر غير مدرج                                                |
-| `hidden-nosources-source-map`              | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | لا يوجد مرجع، كود المصدر غير مدرج                                                |
-| `hidden-cheap-source-map`                  | **build**: ok<br /><br />**rebuild**: بطيء         | no         | تحولت    | لا مرجع                                                                          |
-| `hidden-cheap-module-source-map`           | **build**: بطيء<br /><br />**rebuild**: بطيء       | no         | الخطوط الأصلية | لا مرجع                                                                          |
-| `hidden-source-map`                        | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم        | original       | لا مرجع. الاختيار المحتمل عند استخدام Source Map فقط لأغراض الإبلاغ عن الأخطاء. |
-
-| الاختصار                | شرح                                                                                                                                                                                                                                                                                                       |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| performance: build      | كيف يتأثر performance الخاص بـ build الأولي بإعداد devtool؟                                                                                                                                                                                                                                      |
-| performance: rebuild    | كيف يتأثر performance الخاص بـ build المتزايد بإعداد devtool؟ قد تؤدي أدوات التطوير البطيئة إلى تقليل حلقة تعليقات التطوير في وضع watch. يختلف المقياس مقارنةً بـ build performance، حيث يتوقع المرء أن تكون عمليات إعادة البناء أسرع من عمليات الإنشاء.                                             |
-| الإنتاج              | هل يعقل استخدام هذا devtool لبناء الإنتاج؟ عادةً ما يكون `no` عندما يكون لـ devtool تأثير سلبي على تجربة المستخدم.                                                                                                                                                                        |
-| الجودة: المجمعة        | سترى كل التعليمات البرمجية التي تم إنشاؤها لـ chunk في كتلة واحدة من التعليمات البرمجية. هذا هو ملف output الخام بدون أي دعم لتطوير الأدوات                                                                                                                                                                                   |
-| الجودة: ولدت      | سترى الكود الذي تم إنشاؤه، ولكن يتم عرض كل module كملف تعليمات برمجية منفصل في أدوات التطوير browser.                                                                                                                                                                                                              |
-| الجودة: تحولت    | ستشاهد التعليمات البرمجية التي تم إنشاؤها بعد المعالجة المسبقة بواسطة loaders ولكن قبل تحويلات webpack الإضافية. سيتم تعيين خطوط المصدر فقط وسيتم تجاهل معلومات العمود بشكل متكرر. لم يتم إنشاؤها. يؤدي هذا إلى منع تعيين نقاط التوقف في منتصف الأسطر التي لا تعمل مع المصغر. |
-| الجودة: الخطوط الأصلية | سترى الكود الأصلي الذي كتبته، بافتراض أن كل loaders يدعم Source Mapping. سيتم تعيين خطوط المصدر فقط وسيتم تجاهل معلومات العمود بشكل متكرر. لم يتم إنشاؤها. يؤدي هذا إلى منع تعيين نقاط التوقف في منتصف الأسطر التي لا تعمل مع المصغر.                    |
-| الجودة: أصلية       | سترى الكود الأصلي الذي كتبته، بافتراض أن كل loaders يدعم Source Mapping.                                                                                                                                                                                                                        |
-| `eval-*` إضافة       | أنشئ Source Map لكل module وأرفقه عبر التقييم. موصى به للتطوير، بسبب تحسين rebuild performance. لاحظ أن هناك مشكلة في Windows Defender، والتي تسبب تباطؤًا كبيرًا بسبب فحص الفيروسات.                                                                                        |
-| `inline-*` إضافة     | قم بتضمين Source Map في الملف الأصلي بدلاً من إنشاء ملف منفصل.                                                                                                                                                                                                                                    |
-| `hidden-*` إضافة     | لم تتم إضافة أي إشارة إلى Source Map. عندما لا يتم نشر Source Map، ولكن لا يزال يتعين إنشاؤها، مثلاً لأغراض الإبلاغ عن الأخطاء.                                                                                                                                                                           |
-| `nosources-*` إضافة  | لم يتم تضمين كود المصدر في Source Map. يمكن أن يكون هذا مفيدًا عندما يجب الرجوع إلى الملفات الأصلية (تلزم خيارات تخصيص إضافية).                                                                                                                                                                        |
+{/* prettier-ignore-start */}
+
+| devtool | performance | الإنتاج | الجودة | تعليق |
+| --- | --- | --- | --- | --- |
+| (لا شيء) | **build**: الأسرع<br /><br />**rebuild**: الأسرع | نعم | bundle | الاختيار الموصى به لإصدارات الإنتاج بحد أقصى performance. |
+| **`eval`** | **build**: سريع<br /><br />**rebuild**: الأسرع | no | ولدت | يُوصى باختيار التطوير بحد أقصى performance. |
+| `eval-cheap-source-map` | **build**: ok<br /><br />**rebuild**: سريع | no | تحولت | خيار المقايضة للتنمية يبني. |
+| `eval-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: سريع | no | الخطوط الأصلية | خيار المقايضة للتنمية يبني. |
+| **`eval-source-map`** | **build**: الأبطأ<br /><br />**rebuild**: حسنًا | no | original | الاختيار الموصى به للتطوير يبني بجودة عالية Source Maps. |
+| `cheap-source-map` | **build**: ok<br /><br />**rebuild**: بطيء | no | تحولت | |
+| `cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء | no | الخطوط الأصلية | |
+| **`source-map`** | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم | original | الاختيار الموصى به للإنتاج يبني بجودة عالية Source Maps. |
+| `inline-cheap-source-map` | **build**: ok<br /><br />**rebuild**: بطيء | no | تحولت | |
+| `inline-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء | no | الخطوط الأصلية | |
+| `inline-source-map` | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | no | original | الاختيار المحتمل عند نشر ملف واحد |
+| `eval-nosources-cheap-source-map` | **build**: ok<br /><br />**rebuild**: سريع | no | تحولت | كود المصدر غير متضمن |
+| `eval-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: سريع | no | الخطوط الأصلية | كود المصدر غير متضمن |
+| `eval-nosources-source-map` | **build**: الأبطأ<br /><br />**rebuild**: حسنًا | no | original | كود المصدر غير متضمن |
+| `inline-nosources-cheap-source-map` | **build**: ok<br /><br />**rebuild**: بطيء | no | تحولت | كود المصدر غير متضمن |
+| `inline-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء | no | الخطوط الأصلية | كود المصدر غير متضمن |
+| `inline-nosources-source-map` | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | no | original | كود المصدر غير متضمن |
+| `nosources-cheap-source-map` | **build**: ok<br /><br />**rebuild**: بطيء | no | تحولت | كود المصدر غير متضمن |
+| `nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء | no | الخطوط الأصلية | كود المصدر غير متضمن |
+| `nosources-source-map` | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم | original | كود المصدر غير متضمن |
+| `hidden-nosources-cheap-source-map` | **build**: ok<br /><br />**rebuild**: بطيء | no | تحولت | لا يوجد مرجع، كود المصدر غير مدرج |
+| `hidden-nosources-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء | no | الخطوط الأصلية | لا يوجد مرجع، كود المصدر غير مدرج |
+| `hidden-nosources-source-map` | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم | original | لا يوجد مرجع، كود المصدر غير مدرج |
+| `hidden-cheap-source-map` | **build**: ok<br /><br />**rebuild**: بطيء | no | تحولت | لا مرجع |
+| `hidden-cheap-module-source-map` | **build**: بطيء<br /><br />**rebuild**: بطيء | no | الخطوط الأصلية | لا مرجع |
+| `hidden-source-map` | **build**: الأبطأ<br /><br />**rebuild**: الأبطأ | نعم | original | لا مرجع. الاختيار المحتمل عند استخدام Source Map فقط لأغراض الإبلاغ عن الأخطاء. |
+
+{/* prettier-ignore-end */}
+
+{/* prettier-ignore-start */}
+
+| الاختصار | شرح |
+| --- | --- |
+| performance: build | كيف يتأثر performance الخاص بـ build الأولي بإعداد devtool؟ |
+| performance: rebuild | كيف يتأثر performance الخاص بـ build المتزايد بإعداد devtool؟ قد تؤدي أدوات التطوير البطيئة إلى تقليل حلقة تعليقات التطوير في وضع watch. يختلف المقياس مقارنةً بـ build performance، حيث يتوقع المرء أن تكون عمليات إعادة البناء أسرع من عمليات الإنشاء. |
+| الإنتاج | هل يعقل استخدام هذا devtool لبناء الإنتاج؟ عادةً ما يكون `no` عندما يكون لـ devtool تأثير سلبي على تجربة المستخدم. |
+| الجودة: المجمعة | سترى كل التعليمات البرمجية التي تم إنشاؤها لـ chunk في كتلة واحدة من التعليمات البرمجية. هذا هو ملف output الخام بدون أي دعم لتطوير الأدوات |
+| الجودة: ولدت | سترى الكود الذي تم إنشاؤه، ولكن يتم عرض كل module كملف تعليمات برمجية منفصل في أدوات التطوير browser. |
+| الجودة: تحولت | ستشاهد التعليمات البرمجية التي تم إنشاؤها بعد المعالجة المسبقة بواسطة loaders ولكن قبل تحويلات webpack الإضافية. سيتم تعيين خطوط المصدر فقط وسيتم تجاهل معلومات العمود بشكل متكرر. لم يتم إنشاؤها. يؤدي هذا إلى منع تعيين نقاط التوقف في منتصف الأسطر التي لا تعمل مع المصغر. |
+| الجودة: الخطوط الأصلية | سترى الكود الأصلي الذي كتبته، بافتراض أن كل loaders يدعم Source Mapping. سيتم تعيين خطوط المصدر فقط وسيتم تجاهل معلومات العمود بشكل متكرر. لم يتم إنشاؤها. يؤدي هذا إلى منع تعيين نقاط التوقف في منتصف الأسطر التي لا تعمل مع المصغر. |
+| الجودة: أصلية | سترى الكود الأصلي الذي كتبته، بافتراض أن كل loaders يدعم Source Mapping. |
+| `eval-*` إضافة | أنشئ Source Map لكل module وأرفقه عبر التقييم. موصى به للتطوير، بسبب تحسين rebuild performance. لاحظ أن هناك مشكلة في Windows Defender، والتي تسبب تباطؤًا كبيرًا بسبب فحص الفيروسات. |
+| `inline-*` إضافة | قم بتضمين Source Map في الملف الأصلي بدلاً من إنشاء ملف منفصل. |
+| `hidden-*` إضافة | لم تتم إضافة أي إشارة إلى Source Map. عندما لا يتم نشر Source Map، ولكن لا يزال يتعين إنشاؤها، مثلاً لأغراض الإبلاغ عن الأخطاء. |
+| `nosources-*` إضافة | لم يتم تضمين كود المصدر في Source Map. يمكن أن يكون هذا مفيدًا عندما يجب الرجوع إلى الملفات الأصلية (تلزم خيارات تخصيص إضافية). |
+
+{/* prettier-ignore-end */}
 
 T> نتوقع نمطًا معينًا عند التحقق من صحة اسم devtool، انتبه ولا تخلط بين تسلسل devtool string. النمط هو: `[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map`.
 
diff --git a/src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.mdx
index e0465bd5af5f..795cad1ff9b8 100644
--- a/src/content/configuration/entry-context.mdx
+++ b/src/content/configuration/entry-context.mdx
@@ -57,6 +57,8 @@ export default {
 
 ### واصف نقطة الدخول
 
+<span id="entry-descriptor"></span>
+
 إن مُرِّر كائن، فقد تكون قيمة كلّ مفتاح نصّاً أو مصفوفة نصوص أو واصفاً:
 
 ```js
@@ -104,6 +106,8 @@ export default {
 
 ### الاعتماديات
 
+<span id="dependencies"></span>
+
 افتراضياً، يحتفظ كلّ chunk من chunks نقاط الدخول بجميع الوحدات التي يستعملها. ومع الخيار `dependOn` تستطيع مشاركة وحدات chunk نقطة دخولٍ مع غيرها:
 
 ```js
diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx
index 446769118d01..8522a05dc3d6 100644
--- a/src/content/configuration/experiments.mdx
+++ b/src/content/configuration/experiments.mdx
@@ -7,6 +7,8 @@ contributors:
 
 ## التجارب
 
+<span id="experiments"></span>
+
 `boolean: false`
 
 أُدخل الخيار `experiments` في webpack 5 ليُتيح للمستخدمين تفعيل الميزات التجريبية وتجربتها.
@@ -223,7 +225,9 @@ export default {
   }
   ```
 
-- <Badge text="5.87.0+" /> تحليل الحقول الخاصّة بـ style في ملفّات `package.json`: سيبحث webpack عن حقل `style` في ملفّات `package.json` ويستعمله إن وُجد للاستيراد داخل ملفّات CSS.
+- <Badge text="5.87.0+" /> تحليل الحقول الخاصّة بـ style في ملفّات
+  `package.json`: سيبحث webpack عن حقل `style` في ملفّات `package.json` ويستعمله
+  إن وُجد للاستيراد داخل ملفّات CSS.
 
   فمثلاً، إن أضفت `@import 'bootstrap';` إلى ملفّ CSS لديك، فسيبحث webpack عن `bootstrap` في `node_modules` ويستعمل حقل `style` من `package.json` هناك. وإن لم يجد حقل `style`، فسيستعمل حقل `main` بدلاً منه حفاظاً على التوافق العكسي.
 
@@ -232,9 +236,19 @@ export default {
 - استيرادات CSS: سيُضمِّن webpack استيرادات CSS داخل ملفّ CSS المُولَّد.
 - إعادة التحميل الساخن (HMR): يدعم webpack الـ HMR لملفّات CSS، أي أنّ التغييرات في ملفّات CSS ستظهر في المتصفّح من دون إعادة تحميل كاملة للصفحة.
 
-- <Badge text="5.107.0+" /> Scope hoisting (module concatenation) لـ CSS Modules. حين يُفعَّل [`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules)، فإنّ وحدات CSS التي يكون `exportType` لها `text` أو `css-style-sheet` أو `style` أو `link` تُدمَج في نسخة واحدة من الوحدة بدلاً من إبقائها نسخاً منفصلة عند الـ runtime. وهذا يُقلِّل الـ overhead ويُنتج مخرَجات أصغر للحزم الثقيلة بـ CSS.
-
-- <Badge text="5.107.0+" /> يمكن استعمال معرّفات `@value` بوصفها مسارَ معامل لـ `@import` وداخل مراجع `url()`، حتى يُعرَّف المسار أو الـ asset المشترك مرّة واحدة ويُعاد استعماله عبر عدّة أوراق أنماط. وتُقبل الصيغة المُغلَّفة بعلامتي اقتباس (`"./x"`, `'./x'`) والصيغة المُجرَّدة (`./x`)، وتُحلّ كلتاهما عبر مسار الـ assets الاعتيادي في webpack.
+- <Badge text="5.107.0+" /> Scope hoisting (module concatenation) لـ CSS
+  Modules. حين يُفعَّل
+  [`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules)،
+  فإنّ وحدات CSS التي يكون `exportType` لها `text` أو `css-style-sheet` أو
+  `style` أو `link` تُدمَج في نسخة واحدة من الوحدة بدلاً من إبقائها نسخاً منفصلة
+  عند الـ runtime. وهذا يُقلِّل الـ overhead ويُنتج مخرَجات أصغر للحزم الثقيلة
+  بـ CSS.
+
+- <Badge text="5.107.0+" /> يمكن استعمال معرّفات `@value` بوصفها مسارَ معامل لـ
+  `@import` وداخل مراجع `url()`، حتى يُعرَّف المسار أو الـ asset المشترك مرّة
+  واحدة ويُعاد استعماله عبر عدّة أوراق أنماط. وتُقبل الصيغة المُغلَّفة بعلامتي
+  اقتباس (`"./x"`, `'./x'`) والصيغة المُجرَّدة (`./x`)، وتُحلّ كلتاهما عبر مسار
+  الـ assets الاعتيادي في webpack.
 
   ```css
   @value path: "./other.module.css";
diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx
index 93c5f2344638..c2367bfd7d55 100644
--- a/src/content/configuration/module.mdx
+++ b/src/content/configuration/module.mdx
@@ -908,12 +908,12 @@ W> عندما يكون `output.module` هو `true`، يتم الاحتفاظ ب
 
 باستخدام هذا التخصيص، يتم الاحتفاظ بالخصائص المخصصة على `import.meta` التي تم تعيينها بواسطة الأداة build أو runtime في output الذي تم إنشاؤه:
 
-  ```js
-  // يتم تعيين import.meta.customProp خارجيًا (على سبيل المثال بواسطة أداة build أو runtime)
-  if (import.meta.customProp) {
-    console.log(import.meta.customProp);
-  }
-  ```
+```js
+// يتم تعيين import.meta.customProp خارجيًا (على سبيل المثال بواسطة أداة build أو runtime)
+if (import.meta.customProp) {
+  console.log(import.meta.customProp);
+}
+```
 
 #### module.parser.javascript.importMetaContext
 
@@ -1073,11 +1073,11 @@ export default {
 
 تعتمد القيمة الافتراضية لـ `module.parser.json.exportsDepth` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي    |
+| Mode            | الافتراضي  |
 | --------------- | ---------- |
-| `"production"` | `Infinity` |
-| `"development"` | `1` |
-| `"none"` | `Infinity` |
+| `"production"`  | `Infinity` |
+| `"development"` | `1`        |
+| `"none"`        | `Infinity` |
 
 - النوع: `number`
 - متاح: <Badge text='5.98.0+' />
@@ -1212,12 +1212,16 @@ array من [القواعد](#rule) والتي تتطابق مع الطلبات 
 
 ## القاعدة
 
+<span id="rule"></span>
+
 `object`
 
 يمكن تقسيم القاعدة إلى ثلاثة أجزاء - الشروط والنتائج والقواعد المتداخلة.
 
 ### شروط القاعدة
 
+<span id="rule-conditions"></span>
+
 هناك قيمتان مدخلتان للشروط:
 
 1. المورد: المسار المطلق للملف المطلوب. لقد تم حل المشكلة بالفعل وفقًا لـ [`resolve` القواعد](/configuration/resolve).
@@ -1251,6 +1255,8 @@ W> كن حذرا! المورد هو المسار _الذي تم حله_ للمل
 
 ## قواعد متداخلة
 
+<span id="nested-rules"></span>
+
 يمكن تحديد القواعد المتداخلة ضمن الخصائص [`rules`](#rulerules) و[`oneOf`](#ruleoneof).
 
 يتم تقييم هذه القواعد فقط عندما يتطابق شرط القاعدة الأصلية. يمكن أن تحتوي كل قاعدة متداخلة على شروطها الخاصة.
@@ -1433,7 +1439,7 @@ export default {
     rules: [
       {
         test: /\.m?js$/,
-        extractSource Map: true,
+        extractSourceMap: true,
       },
     ],
   },
@@ -2139,6 +2145,8 @@ import one from "./pkg-1.json" with { type: "json" };
 
 ## الحالة
 
+<span id="condition"></span>
+
 الشروط يمكن أن تكون واحدة من هذه:
 
 - أ string: لمطابقة الإدخال يجب أن يبدأ بـ string المقدم. أي. مسار الدليل المطلق، أو المسار المطلق للملف.
diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx
index 6056cc423f33..0c19ba2b2011 100644
--- a/src/content/configuration/other-options.mdx
+++ b/src/content/configuration/other-options.mdx
@@ -86,6 +86,8 @@ export default [
 
 ## تجاهل التحذيرات
 
+<span id="ignorewarnings"></span>
+
 `[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]`
 
 يُخبر webpack أن يتجاهل تحذيرات بعينها. ويمكن أن يكون ذلك عبر `RegExp`، أو عبر `function` مخصَّصة تختار التحذيرات استناداً إلى نسخة التحذير الخام، وتتلقّى `WebpackError` و `Compilation` بوصفهما وسيطين، وتُرجع قيمة `boolean`، أو عبر `object` يحمل الخصائص الآتية:
@@ -148,6 +150,8 @@ T> يمكنك تجاوز الخصائص في سياق الـ loader، لأنّ w
 
 ## اسم
 
+<span id="name"></span>
+
 `string`
 
 اسم التخصيص. يُستعمَل عند تحميل عدّة تخصيصات.
diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx
index aa563e973f52..7059fa2bca17 100644
--- a/src/content/configuration/output.mdx
+++ b/src/content/configuration/output.mdx
@@ -356,16 +356,16 @@ export default {
 
 البدائل التالية متاحة في سلاسل القالب (عبر webpack الداخلي [`ModuleFilenameHelpers`](https://github.com/webpack/webpack/blob/main/lib/ModuleFilenameHelpers.js)):
 
-| القالب                 | الوصف                                                                                         |
-| ------------------------ | --------------------------------------------------------------------------------------------------- |
-| [مسار المورد المطلق] | اسم الملف المطلق                                                                               |
-| [الكل-loaders]            | تلقائية وصريحة loaders ومعلمات تصل إلى الاسم الأول loader                        |
-| [hash]                   | hash للمعرف module                                                                   |
-| [id]                     | المعرف module                                                                               |
-| [loaders]                | صريح loaders ومعلمات تصل إلى اسم loader الأول                                      |
-| [المصدر]               | المسار المستخدم لـ resolve الملف وأي معلمات استعلام مستخدمة في loader الأول                     |
-| [مسار المورد]          | المسار المستخدم لـ resolve الملف بدون أي معلمات استعلام                                          |
-| [مساحة الاسم]              | مساحة الاسم modules. عادةً ما يكون هذا هو الاسم library عند البناء كـ library، وإلا فإنه يكون فارغًا |
+| القالب               | الوصف                                                                       |
+| -------------------- | --------------------------------------------------------------------------- |
+| [مسار المورد المطلق] | اسم الملف المطلق                                                            |
+| [الكل-loaders]       | تلقائية وصريحة loaders ومعلمات تصل إلى الاسم الأول loader                   |
+| [hash]               | hash للمعرف module                                                          |
+| [id]                 | المعرف module                                                               |
+| [loaders]            | صريح loaders ومعلمات تصل إلى اسم loader الأول                               |
+| [المصدر]             | المسار المستخدم لـ resolve الملف وأي معلمات استعلام مستخدمة في loader الأول |
+| [مسار المورد]        | المسار المستخدم لـ resolve الملف بدون أي معلمات استعلام                     |
+| [مساحة الاسم]        | مساحة اسم modules. غالبا اسم library عند البناء كـ library، أو تكون فارغة   |
 
 عند استخدام function، تتوفر نفس الخيارات في علبة الجمل عبر المعلمة `info`:
 
@@ -598,48 +598,48 @@ T> لاحظ أن هذا الخيار لا يؤثر على ملفات output ال
 
 البدائل المتاحة على مستوى Compilation:
 
-| القالب   | الوصف                  |
-| ---------- | ---------------------------- |
+| القالب     | الوصف                    |
+| ---------- | ------------------------ |
 | [fullhash] | كامل hash من compilation |
-| [hash]     | نفسه، ولكن إهماله         |
+| [hash]     | نفسه، ولكن إهماله        |
 
 البدائل المتاحة على مستوى Chunk:
 
-| القالب      | الوصف                                                                                                      |
-| ------------- | ---------------------------------------------------------------------------------------------------------------- |
-| [id]          | معرف chunk                                                                                              |
-| [الاسم]        | اسم chunk، إذا تم تعيينه، وإلا معرف chunk                                                     |
-| [chunkhash]   | hash لـ chunk، بما في ذلك جميع عناصر chunk                                                       |
+| القالب        | الوصف                                                                                                  |
+| ------------- | ------------------------------------------------------------------------------------------------------ |
+| [id]          | معرف chunk                                                                                             |
+| [الاسم]       | اسم chunk، إذا تم تعيينه، وإلا معرف chunk                                                              |
+| [chunkhash]   | hash لـ chunk، بما في ذلك جميع عناصر chunk                                                             |
 | [contenthash] | hash الخاص بـ chunk، بما في ذلك عناصر نوع المحتوى هذا فقط (المتأثرة بـ `optimization.realContentHash`) |
 
 البدائل المتاحة على مستوى Module:
 
-| القالب      | الوصف                           |
-| ------------- | ------------------------------------- |
-| [id]          | معرف module                  |
-| [مودوليد]    | نفسه، ولكن إهماله                  |
-| [hash]        | hash من module                |
-| [مودولهاش]  | نفسه، ولكن إهماله                  |
+| القالب        | الوصف              |
+| ------------- | ------------------ |
+| [id]          | معرف module        |
+| [مودوليد]     | نفسه، ولكن إهماله  |
+| [hash]        | hash من module     |
+| [مودولهاش]    | نفسه، ولكن إهماله  |
 | [contenthash] | hash لمحتوى module |
 
 البدائل المتاحة على مستوى الملف:
 
-| القالب   | الوصف                                                                       |
-| ---------- | --------------------------------------------------------------------------------- |
-| [ملف]     | اسم الملف والمسار، بدون استعلام أو جزء                                      |
-| [استعلام]    | الاستعلام باستخدام البادئة `?`                                                            |
-| [جزء] | جزء ذو مسافة بادئة `#`                                                         |
-| [قاعدة]     | اسم الملف فقط (بما في ذلك الامتدادات)، بدون مسار                                |
-| [قاعدة الملفات] | نفسه، ولكن إهماله                                                              |
-| [المسار]     | المسار الوحيد، بدون اسم الملف                                                       |
-| [الاسم]     | اسم الملف فقط بدون ملحق أو مسار                                           |
-| [تحويلة]      | الامتداد بالبادئة `.` (غير متوفر لـ [output.filename](#outputfilename)) |
+| القالب          | الوصف                                                                   |
+| --------------- | ----------------------------------------------------------------------- |
+| [ملف]           | اسم الملف والمسار، بدون استعلام أو جزء                                  |
+| [استعلام]       | الاستعلام باستخدام البادئة `?`                                          |
+| [جزء]           | جزء ذو مسافة بادئة `#`                                                  |
+| [قاعدة]         | اسم الملف فقط (بما في ذلك الامتدادات)، بدون مسار                        |
+| [قاعدة الملفات] | نفسه، ولكن إهماله                                                       |
+| [المسار]        | المسار الوحيد، بدون اسم الملف                                           |
+| [الاسم]         | اسم الملف فقط بدون ملحق أو مسار                                         |
+| [تحويلة]        | الامتداد بالبادئة `.` (غير متوفر لـ [output.filename](#outputfilename)) |
 
 البدائل المتاحة على مستوى URL:
 
-| القالب | الوصف |
-| -------- | ----------- |
-| [رابط]    | عنوان URL         |
+| القالب | الوصف     |
+| ------ | --------- |
+| [رابط] | عنوان URL |
 
 T> `[file]` يساوي `[path][base]`. `[base]` يساوي `[name][ext]`. المسار الكامل هو `[path][name][ext][query][fragment]` أو `[path][base][query][fragment]` أو `[file][query][fragment]`.
 
@@ -948,42 +948,42 @@ export function hello(name) {
 
 بافتراض أن كلا من `a.js` و`b.js` يقومان بتصدير function `hello`، فإليك كيفية استهلاك المكتبات:
 
-   ```html
-   <script src="https://example.org/path/to/a.js"></script>
-   <script src="https://example.org/path/to/b.js"></script>
-   <script>
-     MyLibrary.a.hello("webpack");
-     MyLibrary.b.hello("webpack");
-   </script>
-   ```
+```html
+<script src="https://example.org/path/to/a.js"></script>
+<script src="https://example.org/path/to/b.js"></script>
+<script>
+  MyLibrary.a.hello("webpack");
+  MyLibrary.b.hello("webpack");
+</script>
+```
 
 راجع [هذا المثال](https://github.com/webpack/webpack/tree/main/examples/multi-part-library) للمزيد.
 
 لاحظ أن التخصيص أعلاه لن يعمل كما هو متوقع إذا كنت ستقوم بتخصيص خيارات library لكل entry point. إليك كيفية القيام بذلك [تحت كل إدخال من إدخالاتك](/concepts/entry-points/#entrydescription-object):
 
-   ```js
-   export default {
-     // …
-     entry: {
-       main: {
-         import: "./src/index.js",
-         library: {
-           // يمكن استخدام جميع الخيارات ضمن `output.library` هنا
-           name: "MyLibrary",
-           type: "umd",
-           umdNamedDefine: true,
-         },
-       },
-       another: {
-         import: "./src/another.js",
-         library: {
-           name: "AnotherLibrary",
-           type: "commonjs2",
-         },
-       },
-     },
-   };
-   ```
+```js
+export default {
+  // …
+  entry: {
+    main: {
+      import: "./src/index.js",
+      library: {
+        // يمكن استخدام جميع الخيارات ضمن `output.library` هنا
+        name: "MyLibrary",
+        type: "umd",
+        umdNamedDefine: true,
+      },
+    },
+    another: {
+      import: "./src/another.js",
+      library: {
+        name: "AnotherLibrary",
+        type: "commonjs2",
+      },
+    },
+  },
+};
+```
 
 ### output.library.amdContainer
 
@@ -991,7 +991,7 @@ export function hello(name) {
 
 استخدم حاوية (محددة في المساحة العالمية) للاتصال بوظائف `define`/`require` في AMD module.
 
-W> لاحظ أنه يجب تعيين قيمة `amdContainer` **كمتغير عام.
+W> لاحظ أنه يجب تعيين قيمة `amdContainer` \*\*كمتغير عام.
 
 ```js
 export default {
@@ -1048,6 +1048,8 @@ export default {
 
 ##### النوع: "فار"
 
+<span id="type-var"></span>
+
 ```js
 export default {
   // …
@@ -1071,6 +1073,8 @@ MyLibrary.doSomething();
 
 ##### النوع: "تعيين"
 
+<span id="type-assign"></span>
+
 ```js
 export default {
   // …
@@ -1093,6 +1097,8 @@ MyLibrary = _entry_return_;
 
 ##### النوع: 'assign-properties'
 
+<span id="type-assign-properties"></span>
+
 <Badge text="5.16.0+" />
 
 ```js
@@ -1127,10 +1133,14 @@ MyLibrary.hello("World");
 
 #### فضح عبر Object المهمة
 
+<span id="expose-via-object-assignment"></span>
+
 تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى object محدد تحت الاسم المحدد بواسطة [`output.library.name`](#outputlibraryname).
 
 ##### اكتب: "هذا"
 
+<span id="type-this"></span>
+
 ```js
 export default {
   // …
@@ -1155,6 +1165,8 @@ MyLibrary.doSomething(); // if `this` is window
 
 ##### النوع: "نافذة"
 
+<span id="type-window"></span>
+
 ```js
 export default {
   // …
@@ -1177,6 +1189,8 @@ globalThis.MyLibrary.doSomething();
 
 ##### النوع: "عالمي"
 
+<span id="type-global"></span>
+
 ```js
 export default {
   // …
@@ -1199,6 +1213,8 @@ globalThis.MyLibrary.doSomething();
 
 ##### النوع: "كومونجس"
 
+<span id="type-commonjs"></span>
+
 ```js
 export default {
   // …
@@ -1227,6 +1243,8 @@ W> لاحظ أن عدم تعيين `output.library.name` سيؤدي إلى تع
 
 ##### النوع: 'module'
 
+<span id="type-module"></span>
+
 ```js
 export default {
   // …
@@ -1271,6 +1289,8 @@ export default {
 
 ##### النوع: "commonjs2"
 
+<span id="type-commonjs2"></span>
+
 ```js
 export default {
   // …
@@ -1349,6 +1369,8 @@ T> يكون هذا مفيدًا عند كتابة كود المصدر باللغ
 
 ##### النوع: "أيه إم دي"
 
+<span id="type-amd"></span>
+
 سيؤدي هذا إلى كشف library باعتباره AMD module.
 
 AMD modules يتطلب تعريف entry chunk (على سبيل المثال، أول script الذي تم تحميله بواسطة علامة `<script>`) بخصائص محددة، مثل `define` و`require` والتي يتم توفيرها عادةً بواسطة RequireJS أو أي loaders متوافق (مثل almond). وإلا فإن تحميل AMD bundle الناتج مباشرة سيؤدي إلى خطأ مثل `define is not defined`.
@@ -1391,6 +1413,8 @@ define(() => _entry_return_);
 
 ##### النوع: "يتطلب AMD"
 
+<span id="type-amd-require"></span>
+
 ```js
 export default {
   // ...
@@ -1411,6 +1435,8 @@ export default {
 
 ##### النوع: "أومد"
 
+<span id="type-umd"></span>
+
 يؤدي هذا إلى كشف library الخاص بك تحت جميع تعريفات module، مما يسمح له بالعمل مع CommonJS، AMD، وكمتغير عام. ألقِ نظرة على [UMD المستودع](https://github.com/umdjs/umd) لمعرفة المزيد.
 
 في هذه الحالة، أنت بحاجة إلى الخاصية `library.name` لتسمية module الخاص بك:
@@ -1489,6 +1515,8 @@ export default {
 
 ##### النوع: "النظام"
 
+<span id="type-system"></span>
+
 سيؤدي هذا إلى كشف library كـ [`System.register`](https://github.com/systemjs/systemjs/blob/master/docs/system-register.md) module. تم إصدار هذه الميزة لأول مرة في [webpack 4.30.0](https://github.com/webpack/webpack/releases/tag/v4.30.0).
 
 يتطلب النظام modules وجود global variable `System` في browser عند تنفيذ webpack bundle. يتيح لك التجميع إلى تنسيق `System.register` إمكانية `System.import('/bundle.js')` بدون تخصيص إضافي ويتم تحميل webpack bundle في سجل النظام module.
@@ -1532,6 +1560,8 @@ System.register(
 
 ##### النوع: "jsonp"
 
+<span id="type-jsonp"></span>
+
 ```js
 export default {
   // …
@@ -2151,12 +2181,12 @@ W> يجب ألا يحتوي المسار على علامة تعجب (`!`) لأن
 تعتمد القيمة الافتراضية لـ `output.pathinfo` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `false` |
-| `"development"` | `true` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `false`   |
+| `"development"` | `true`    |
+| `"none"`        | `false`   |
 
-W> على الرغم من أن البيانات التي يمكن أن توفرها هذه التعليقات مفيدة أثناء التطوير عند قراءة التعليمات البرمجية التي تم إنشاؤها، إلا أنه **لا**** يجب استخدامها في الإنتاج.
+W> على الرغم من أن البيانات التي يمكن أن توفرها هذه التعليقات مفيدة أثناء التطوير عند قراءة التعليمات البرمجية التي تم إنشاؤها، إلا أنه **لا\*\*** يجب استخدامها في الإنتاج.
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/stats.mdx b/src/content/configuration/stats.mdx
index 974c27835bab..70383c2fd558 100644
--- a/src/content/configuration/stats.mdx
+++ b/src/content/configuration/stats.mdx
@@ -20,18 +20,20 @@ export default {
 
 ## Stats الإعدادات المسبقة
 
+<span id="stats-presets"></span>
+
 يأتي webpack مزودًا ببعض الإعدادات المسبقة المتاحة لـ stats output:
 
-| محددة مسبقا              | بديل | الوصف                                                    |
-| ------------------- | ----------- | -------------------------------------------------------------- |
-| `'errors-only'`     | _لا شيء_      | فقط output عند حدوث أخطاء                                 |
-| `'errors-warnings'` | _لا شيء_      | تحدث أخطاء وتحذيرات output فقط                         |
-| `'minimal'`         | _لا شيء_      | فقط output عند حدوث أخطاء أو compilation جديدة              |
-| `'none'`            | `false`     | Output لا شيء                                                 |
-| `'normal'`          | `true`      | قياسي output                                                |
-| `'verbose'`         | _لا شيء_      | Output كل شيء                                              |
-| `'detailed'`        | _لا شيء_      | Output كل شيء ما عدا `chunkModules` و`chunkRootModules` |
-| `'summary'`         | _لا شيء_      | Output webpack الإصدار، عدد التحذيرات وعدد الأخطاء        |
+| محددة مسبقا         | بديل     | الوصف                                                   |
+| ------------------- | -------- | ------------------------------------------------------- |
+| `'errors-only'`     | _لا شيء_ | فقط output عند حدوث أخطاء                               |
+| `'errors-warnings'` | _لا شيء_ | تحدث أخطاء وتحذيرات output فقط                          |
+| `'minimal'`         | _لا شيء_ | فقط output عند حدوث أخطاء أو compilation جديدة          |
+| `'none'`            | `false`  | Output لا شيء                                           |
+| `'normal'`          | `true`   | قياسي output                                            |
+| `'verbose'`         | _لا شيء_ | Output كل شيء                                           |
+| `'detailed'`        | _لا شيء_ | Output كل شيء ما عدا `chunkModules` و`chunkRootModules` |
+| `'summary'`         | _لا شيء_ | Output webpack الإصدار، عدد التحذيرات وعدد الأخطاء      |
 
 ## Stats الخيارات
 
@@ -1263,6 +1265,8 @@ export default {
 
 ### فرز الحقول
 
+<span id="sorting-fields"></span>
+
 بالنسبة إلى `assetsSort` و`chunksSort` و`modulesSort` هناك العديد من الحقول المحتملة التي يمكنك فرز العناصر حسبها:
 
 - `'id'` - معرف العنصر،
@@ -1287,6 +1291,8 @@ export default {
 
 ### توسيع سلوكيات stats
 
+<span id="extending-stats-behaviours"></span>
+
 إذا كنت تريد استخدام أحد الإعدادات المسبقة على سبيل المثال، `'minimal'` ولكن لا يزال يتجاوز بعض القواعد: حدد `stats.preset` المطلوب وأضف القواعد المخصصة أو الإضافية بعد ذلك.
 
 **webpack.config.js**
diff --git a/src/content/guides/code-splitting.mdx b/src/content/guides/code-splitting.mdx
index 4eaab3566a40..46e38e47b6af 100644
--- a/src/content/guides/code-splitting.mdx
+++ b/src/content/guides/code-splitting.mdx
@@ -38,7 +38,7 @@ T> هذا الدليل يوسّع المثال المقدم في [البدء](/g
   │   ├── index.js
 + │   └── another-module.js
   └── /node_modules
-````
+```
 
 **another-module.js**
 
@@ -89,13 +89,15 @@ webpack 5.x.x compiled successfully in 245 ms
 
 كما ذُكر، توجد بعض العيوب في هذا الأسلوب:
 
-* إذا كانت هناك وحدات مكررة بين أجزاء الإدخال، فسيتم تضمينها في كلتا الحزمتين.
-* ليس مرنًا جدًا ولا يمكن استخدامه لتقسيم الكود ديناميكيًا مع منطق التطبيق الأساسي.
+- إذا كانت هناك وحدات مكررة بين أجزاء الإدخال، فسيتم تضمينها في كلتا الحزمتين.
+- ليس مرنًا جدًا ولا يمكن استخدامه لتقسيم الكود ديناميكيًا مع منطق التطبيق الأساسي.
 
 النقطة الأولى من هاتين النقطتين تُعد مشكلة فعلية في مثالنا، لأن `lodash` تم استيراده أيضًا داخل `./src/index.js` وبالتالي سيتم تكراره في كلتا الحزمتين. دعونا نزيل هذا التكرار في القسم التالي.
 
 ## منع التكرار
 
+<span id="prevent-duplication"></span>
+
 ### اعتماديات الإدخال
 
 يسمح خيار [`dependOn`](/configuration/entry-context/#dependencies) بمشاركة الوحدات بين الأجزاء:
@@ -242,10 +244,12 @@ webpack 5.x.x compiled successfully in 241 ms
 
 إليك بعض الملحقات والمحملات الأخرى المفيدة المقدمة من المجتمع لتقسيم الكود:
 
-* [`mini-css-extract-plugin`](/plugins/mini-css-extract-plugin): مفيد لفصل CSS عن التطبيق الرئيسي.
+- [`mini-css-extract-plugin`](/plugins/mini-css-extract-plugin): مفيد لفصل CSS عن التطبيق الرئيسي.
 
 ## الاستيراد الديناميكي
 
+<span id="dynamic-imports"></span>
+
 يدعم webpack تقنيتين متشابهتين لتقسيم الكود الديناميكي. الطريقة الأولى والمُوصى بها هي استخدام صيغة [`import()`](/api/module-methods/#import-1) المتوافقة مع [اقتراح ECMAScript](https://github.com/tc39/proposal-dynamic-import) للاستيراد الديناميكي. الطريقة القديمة الخاصة بـ webpack هي استخدام [`require.ensure`](/api/module-methods/#requireensure). دعونا نجرب الطريقة الأولى...
 
 W> تستخدم استدعاءات `import()` [الوعود (Promises)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) داخليًا. إذا كنت تستخدم `import()` مع المتصفحات القديمة (مثل IE 11)، فتذكر تضمين `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
@@ -391,20 +395,22 @@ T> من الممكن تمرير [تعبير ديناميكي](/api/module-method
 
 إذا واجهت هذا الخطأ:
 
-* تحقق من أن ملف الجزء يمكن الوصول إليه عبر الشبكة.
-* تحقق من أن `publicPath` تم إعداده بشكل صحيح.
-* افحص وحدة التحكم في المتصفح للحصول على أخطاء إضافية تتعلق بالسكربت أو الشبكة.
+- تحقق من أن ملف الجزء يمكن الوصول إليه عبر الشبكة.
+- تحقق من أن `publicPath` تم إعداده بشكل صحيح.
+- افحص وحدة التحكم في المتصفح للحصول على أخطاء إضافية تتعلق بالسكربت أو الشبكة.
 
 للمزيد من التفاصيل، راجع النقاش ذي الصلة في متتبع مشاكل webpack.
 
 ## الجلب المسبق/التحميل المسبق للوحدات
 
+<span id="prefetchingpreloading-modules"></span>
+
 أضاف webpack 4.6.0+ دعمًا للجلب المسبق (prefetching) والتحميل المسبق (preloading).
 
 يسمح استخدام هذه التعليمات المضمّنة أثناء تعريف الاستيرادات لـ webpack بإخراج “Resource Hint” يُخبر المتصفح بما يلي:
 
-* **prefetch**: من المحتمل أن يكون المورد مطلوبًا لبعض التنقلات المستقبلية.
-* **preload**: سيكون المورد مطلوبًا أيضًا أثناء التنقل الحالي.
+- **prefetch**: من المحتمل أن يكون المورد مطلوبًا لبعض التنقلات المستقبلية.
+- **preload**: سيكون المورد مطلوبًا أيضًا أثناء التنقل الحالي.
 
 مثال على ذلك وجود مكوّن `HomePage` يعرض مكوّن `LoginButton` الذي يقوم عند الطلب بتحميل مكوّن `LoginModal` بعد النقر عليه.
 
@@ -421,10 +427,10 @@ T> سيضيف webpack تلميح prefetch بمجرد تحميل الجزء ال
 
 يوجد عدة اختلافات بين preload و prefetch:
 
-* يبدأ تحميل الجزء المحمّل مسبقًا بالتوازي مع الجزء الأب. بينما يبدأ تحميل الجزء المجلوِب مسبقًا بعد انتهاء تحميل الجزء الأب.
-* يمتلك الجزء المحمّل مسبقًا أولوية متوسطة ويتم تنزيله فورًا. بينما يتم تنزيل الجزء المجلوِب مسبقًا عندما يكون المتصفح في وضع الخمول.
-* يجب أن يُطلب الجزء المحمّل مسبقًا فورًا من قبل الجزء الأب. بينما يمكن استخدام الجزء المجلوِب مسبقًا في أي وقت مستقبلًا.
-* يختلف دعم المتصفحات بينهما.
+- يبدأ تحميل الجزء المحمّل مسبقًا بالتوازي مع الجزء الأب. بينما يبدأ تحميل الجزء المجلوِب مسبقًا بعد انتهاء تحميل الجزء الأب.
+- يمتلك الجزء المحمّل مسبقًا أولوية متوسطة ويتم تنزيله فورًا. بينما يتم تنزيل الجزء المجلوِب مسبقًا عندما يكون المتصفح في وضع الخمول.
+- يجب أن يُطلب الجزء المحمّل مسبقًا فورًا من قبل الجزء الأب. بينما يمكن استخدام الجزء المجلوِب مسبقًا في أي وقت مستقبلًا.
+- يختلف دعم المتصفحات بينهما.
 
 يمكن أن يكون مثال ذلك وجود مكوّن `Component` يعتمد دائمًا على مكتبة ضخمة يجب وضعها في جزء منفصل.
 
@@ -467,16 +473,17 @@ const lazyComp = () =>
 
 ## تحليل الحزم
 
+<span id="bundle-analysis"></span>
+
 بمجرد أن تبدأ بتقسيم الكود، قد يكون من المفيد تحليل المخرجات لمعرفة أين انتهت الوحدات. تُعد [أداة التحليل الرسمية](https://github.com/webpack/analyse) مكانًا جيدًا للبدء. كما توجد بعض الخيارات الأخرى المدعومة من المجتمع:
 
-* [webpack-chart](https://alexkuz.github.io/webpack-chart/): مخطط دائري تفاعلي لإحصائيات webpack.
-* [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): تصور وتحليل الحزم لمعرفة الوحدات التي تستهلك المساحة وأيها قد تكون مكررة.
-* [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer): ملحق وأداة CLI تمثل محتوى الحزمة على شكل خريطة شجرية تفاعلية قابلة للتكبير.
-* [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): تقوم هذه الأداة بتحليل الحزمة وتقديم اقتراحات عملية لتقليل حجم الحزمة.
-* [bundle-stats](https://github.com/bundle-stats/bundle-stats): إنشاء تقرير عن الحزمة (الحجم، الأصول، الوحدات) ومقارنة النتائج بين البنايات المختلفة.
-* [webpack-stats-viewer](https://github.com/moonrailgun/webpack-stats-viewer): ملحق مدمج لإحصائيات webpack يعرض معلومات أكثر عن تفاصيل الحزمة.
+- [webpack-chart](https://alexkuz.github.io/webpack-chart/): مخطط دائري تفاعلي لإحصائيات webpack.
+- [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/): تصور وتحليل الحزم لمعرفة الوحدات التي تستهلك المساحة وأيها قد تكون مكررة.
+- [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer): ملحق وأداة CLI تمثل محتوى الحزمة على شكل خريطة شجرية تفاعلية قابلة للتكبير.
+- [webpack bundle optimize helper](https://webpack.jakoblind.no/optimize): تقوم هذه الأداة بتحليل الحزمة وتقديم اقتراحات عملية لتقليل حجم الحزمة.
+- [bundle-stats](https://github.com/bundle-stats/bundle-stats): إنشاء تقرير عن الحزمة (الحجم، الأصول، الوحدات) ومقارنة النتائج بين البنايات المختلفة.
+- [webpack-stats-viewer](https://github.com/moonrailgun/webpack-stats-viewer): ملحق مدمج لإحصائيات webpack يعرض معلومات أكثر عن تفاصيل الحزمة.
 
 ## الخطوات التالية
 
 راجع [التحميل الكسول](/guides/lazy-loading/) للحصول على مثال عملي أكثر حول كيفية استخدام `import()` في تطبيق حقيقي، وراجع [التخزين المؤقت](/guides/caching/) لمعرفة كيفية تقسيم الكود بشكل أكثر فعالية.
-
diff --git a/src/content/guides/dependency-management.mdx b/src/content/guides/dependency-management.mdx
index 25159fa0b365..1f1e6c962abd 100644
--- a/src/content/guides/dependency-management.mdx
+++ b/src/content/guides/dependency-management.mdx
@@ -7,6 +7,8 @@ contributors:
 
 ## التعبيرات الديناميكية في import() أو require()
 
+<span id="dynamic-expressions-in-import-or-require"></span>
+
 يتم إنشاء سياق (context) إذا كان الطلب يحتوي على تعبيرات، لأن الوحدة **الدقيقة** لا تكون معروفة أثناء وقت التجميع.
 
 على سبيل المثال، لنفترض أن لدينا بنية المجلدات التالية التي تتضمن ملفات `.ejs`:
diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx
index c847fd18e222..1d9085678307 100644
--- a/src/content/guides/development.mdx
+++ b/src/content/guides/development.mdx
@@ -41,7 +41,7 @@ W> الأدوات الموجودة في هذا الدليل مخصصة **للت
      clean: true,
    },
  };
-````
+```
 
 ## استخدام Source Maps
 
@@ -277,6 +277,8 @@ T> الآن بعد أن أصبح السيرفر يعمل، قد ترغب في ت
 
 ### استخدام webpack-dev-middleware
 
+<span id="using-webpack-dev-middleware"></span>
+
 `webpack-dev-middleware` هو wrapper يقوم بإرسال الملفات التي يعالجها webpack إلى السيرفر. يتم استخدامه داخليًا داخل `webpack-dev-server`، لكنه متاح أيضًا كحزمة مستقلة للسماح بإعدادات أكثر تخصيصًا عند الحاجة. سنلقي نظرة على مثال يجمع بين `webpack-dev-middleware` وسيرفر express.
 
 دعنا نثبت `express` و `webpack-dev-middleware` حتى نبدأ:
@@ -425,16 +427,16 @@ T> إذا كنت ترغب في معرفة المزيد حول كيفية عمل
 
 ## ضبط محرر النصوص الخاص بك
 
+<span id="adjusting-your-text-editor"></span>
+
 عند استخدام الترجمة التلقائية للكود، قد تواجه مشاكل عند حفظ الملفات. بعض المحررات تحتوي على ميزة "safe write" والتي قد تتداخل مع إعادة الترجمة.
 
 لتعطيل هذه الميزة في بعض المحررات الشائعة، راجع القائمة التالية:
 
-* **Sublime Text 3**: أضف `atomic_save: 'false'` إلى تفضيلات المستخدم الخاصة بك.
-* **JetBrains IDEs (مثل WebStorm)**: قم بإلغاء تحديد "Use safe write" من `Preferences > Appearance & Behavior > System Settings`.
-* **Vim**: أضف `:set backupcopy=yes` إلى إعداداتك.
+- **Sublime Text 3**: أضف `atomic_save: 'false'` إلى تفضيلات المستخدم الخاصة بك.
+- **JetBrains IDEs (مثل WebStorm)**: قم بإلغاء تحديد "Use safe write" من `Preferences > Appearance & Behavior > System Settings`.
+- **Vim**: أضف `:set backupcopy=yes` إلى إعداداتك.
 
 ## الخاتمة
 
 الآن بعد أن تعلمت كيفية ترجمة الكود تلقائيًا وتشغيل سيرفر تطوير، يمكنك الانتقال إلى الدليل التالي الذي سيغطي [Code Splitting](/guides/code-splitting/).
-
-```
diff --git a/src/content/guides/ecma-script-modules.mdx b/src/content/guides/ecma-script-modules.mdx
index 484fae6e2ac4..8a39d7e9c4c3 100644
--- a/src/content/guides/ecma-script-modules.mdx
+++ b/src/content/guides/ecma-script-modules.mdx
@@ -66,6 +66,8 @@ module.fun();
 
 ## تمييز الوحدات كـ ESM
 
+<span id="flagging-modules-as-esm"></span>
+
 افتراضيًا، يكتشف webpack تلقائيًا ما إذا كان الملف ESM أم نظام وحدات مختلفًا.
 
 أرست Node.js طريقة لتعيين نوع وحدة الملفات صراحةً باستخدام خاصية في `package.json`.
diff --git a/src/content/guides/installation.mdx b/src/content/guides/installation.mdx
index 9a0d2c9b7fb8..7e3309ee9518 100644
--- a/src/content/guides/installation.mdx
+++ b/src/content/guides/installation.mdx
@@ -13,6 +13,8 @@ contributors:
 
 ## التثبيت المحلي
 
+<span id="local-installation"></span>
+
 أحدث إصدار من webpack هو:
 
 [![GitHub release](https://img.shields.io/npm/v/webpack.svg?label=webpack&style=flat-square&maxAge=3600)](https://github.com/webpack/webpack/releases)
diff --git a/src/content/guides/lazy-loading.mdx b/src/content/guides/lazy-loading.mdx
index 835042593c77..b1fb8e084655 100644
--- a/src/content/guides/lazy-loading.mdx
+++ b/src/content/guides/lazy-loading.mdx
@@ -95,6 +95,8 @@ index.bundle.js     548 kB       1  [emitted]  [big]  index
 
 ## مثال على الاستيراد المؤجل
 
+<span id="defer-import-example"></span>
+
 W> هذه الميزة لا «تحمّل» الوحدة كسولًا، لكنها «تقيّم» الوحدة كسولًا. هذا يعني أن الوحدة لا تزال تُنزّل وتُحلل، لكن تقييمها يكون مؤجلًا.
 
 في بعض الحالات، قد يكون تحويل كل استخدامات الوحدة إلى أسلوب غير متزامن مزعجًا أو صعبًا، لأنه يفرض تحويلًا غير ضروري لكل الدوال إلى غير متزامنة، من دون توفير إمكانية تأجيل عمل التقييم المتزامن فقط.
diff --git a/src/content/guides/output-management.mdx b/src/content/guides/output-management.mdx
index 2ac29e939020..9880f5e40c0d 100644
--- a/src/content/guides/output-management.mdx
+++ b/src/content/guides/output-management.mdx
@@ -25,7 +25,7 @@ T> يعتمد هذا الدليل على أمثلة الكود الموجودة
   │   ├── index.js
 + │   ├── print.js
   └── /node_modules
-````
+```
 
 لنضف بعض المنطق إلى ملف `src/print.js`:
 
@@ -141,6 +141,8 @@ T> إذا قمت بفحص `print.bundle.js`، ربما لاحظت أنه لا ي
 
 ## إعداد HtmlWebpackPlugin
 
+<span id="setting-up-htmlwebpackplugin"></span>
+
 قم أولًا بتثبيت الـ plugin ثم عدّل ملف `webpack.config.js`:
 
 ```bash
@@ -252,6 +254,8 @@ npm run build
 
 ## ملف Manifest
 
+<span id="the-manifest"></span>
+
 قد تتساءل كيف يعرف webpack والـ plugins الخاصة به الملفات التي يتم إنشاؤها.
 
 الإجابة تكمن في ملف الـ manifest الذي يحتفظ به webpack لتتبع العلاقة بين الوحدات (modules) والـ bundles الناتجة.
@@ -267,5 +271,3 @@ npm run build
 الآن بعد أن تعلمت كيفية إضافة الـ bundles إلى HTML بشكل ديناميكي، يمكنك الانتقال إلى [دليل التطوير](/guides/development).
 
 أو إذا كنت ترغب في التعمق أكثر في المواضيع المتقدمة، فنوصي بالانتقال إلى [دليل تقسيم الكود](/guides/code-splitting).
-
-```
diff --git a/src/content/guides/production.mdx b/src/content/guides/production.mdx
index 6fe534a8a7d2..1858d11cd4dd 100644
--- a/src/content/guides/production.mdx
+++ b/src/content/guides/production.mdx
@@ -11,6 +11,8 @@ T> يعتمد هذا الشرح على دليلي [إزالة الكود غير
 
 ## الإعداد
 
+<span id="setup"></span>
+
 تختلف أهداف بناءات التطوير والإنتاج كثيرًا. في التطوير نريد خرائط مصدر قوية وخادمًا محليًا مع إعادة تحميل حية أو استبدال الوحدات الساخن. أما في الإنتاج فتتحول أهدافنا إلى التركيز على حزم مصغّرة، وخرائط مصدر أخف وزنًا، وأصول محسّنة لتحسين وقت التحميل. وبوجود هذا الفصل المنطقي، نوصي عادة بكتابة **إعدادات webpack منفصلة** لكل بيئة.
 
 مع أننا سنفصل الأجزاء الخاصة بالإنتاج والتطوير، لاحظ أننا سنبقي إعدادًا «مشتركًا» للحفاظ على مبدأ DRY. لدمج هذه الإعدادات معًا، سنستخدم أداة مساعدة تسمى [`webpack-merge`](https://github.com/survivejs/webpack-merge). بوجود الإعداد «المشترك»، لن نحتاج إلى تكرار الكود داخل الإعدادات الخاصة بكل بيئة.
diff --git a/src/content/guides/public-path.mdx b/src/content/guides/public-path.mdx
index 08d581157491..1fd3e25e3dec 100644
--- a/src/content/guides/public-path.mdx
+++ b/src/content/guides/public-path.mdx
@@ -57,6 +57,8 @@ import "./app";
 
 ### publicPath التلقائي
 
+<span id="automatic-publicpath"></span>
+
 قد لا تعرف مسبقًا ما ستكون قيمة publicPath، ويمكن لـ webpack التعامل مع ذلك تلقائيًا عبر تحديد المسار العام من متغيرات مثل [`import.meta.url`](/api/module-variables/#importmetaurl)، أو [`document.currentScript`](https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript)، أو `script.src`، أو `self.location`. ما تحتاج إليه هو تعيين [`output.publicPath`](/configuration/output/#outputpublicpath) إلى `'auto'`:
 
 **webpack.config.js**
diff --git a/src/content/guides/tree-shaking.mdx b/src/content/guides/tree-shaking.mdx
index b6d94e1679cb..cad5f015af73 100644
--- a/src/content/guides/tree-shaking.mdx
+++ b/src/content/guides/tree-shaking.mdx
@@ -124,6 +124,8 @@ export default {
 
 ## وسم الملف بأنه خالٍ من الآثار الجانبية
 
+<span id="mark-the-file-as-side-effect-free"></span>
+
 في عالم وحدات ESM بنسبة 100%، يكون تحديد الآثار الجانبية مباشرًا. لكننا لم نصل إلى ذلك تمامًا بعد، لذلك من الضروري في الوقت الحالي تقديم تلميحات إلى مصرّف webpack حول "نقاء" الكود.
 
 تتم هذه العملية عبر خاصية `"sideEffects"` في package.json.

From 46c72a34924db2fdf7180a57621a181b3a23edee Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:15:57 +0300
Subject: [PATCH 15/35] docs(ar): fix config lint issues

---
 .markdownlint.json                         |   1 +
 src/content/configuration/dotenv.mdx       |   3 +-
 src/content/configuration/externals.mdx    |  22 ++--
 src/content/configuration/mode.mdx         |   8 +-
 src/content/configuration/optimization.mdx | 144 ++++++++++-----------
 5 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/.markdownlint.json b/.markdownlint.json
index f7c39cd9aae5..afb81cb68c38 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -13,6 +13,7 @@
   "MD034": false,
   "MD036": false,
   "MD041": false,
+  "MD060": false,
   "MD059": false,
   "no-hard-tabs": false,
   "whitespace": false
diff --git a/src/content/configuration/dotenv.mdx b/src/content/configuration/dotenv.mdx
index da1f98f1233e..fe1f6b628d97 100644
--- a/src/content/configuration/dotenv.mdx
+++ b/src/content/configuration/dotenv.mdx
@@ -11,7 +11,8 @@ related:
 ---
 
 <Badge text="5.103.0+" />
-يُفعِّل الخيار `dotenv` ميزة تحميل متغيّرات البيئة المدمجة في webpack من ملفّات `.env`.
+يُفعِّل الخيار `dotenv` ميزة تحميل متغيّرات البيئة المدمجة في webpack من ملفّات
+`.env`.
 
 `boolean` `object`
 
diff --git a/src/content/configuration/externals.mdx b/src/content/configuration/externals.mdx
index f8fe2159f4ae..a2f0f1aa05d5 100644
--- a/src/content/configuration/externals.mdx
+++ b/src/content/configuration/externals.mdx
@@ -268,7 +268,7 @@ export default {
 };
 ```
 
-في هذه الحالة، أي dependency مسمى `jQuery`، سواء كان مكتوبًا بأحرف كبيرة أم لا، أو `في هذه الحالة، أي dependency مسمى `jQuery`، سواء كان مكتوبًا بأحرف كبيرة أم لا، أو  سيتم إضفاء الطابع الخارجي عليه.
+في هذه الحالة، سيتم التعامل مع أي dependency باسم `jQuery` أو `$` كـ external، بغض النظر عن حالة الأحرف.
 
 ### الجمع بين النحو
 
@@ -970,16 +970,16 @@ jq(".my-element").animate(/* ... */);
 
 تمكين الإعدادات المسبقة لـ externals لـ targets محدد.
 
-| الخيار             | الوصف                                                                                                                                                                                                     | نوع الإدخال |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `electron`         | تعامل مع الإلكترون المشترك المدمج modules في السياق الرئيسي وسياق التحميل المسبق مثل `electron` أو `ipc` أو `shell` كـ external وقم بتحميلها عبر `require()` عند الاستخدام.                                                       | boolean    |
-| `electronMain`     | تعامل مع الإلكترون المدمج modules في السياق الرئيسي مثل `app` أو `ipc-main` أو `shell` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                                      | boolean    |
-| `electronPreload`  | تعامل مع الإلكترون المدمج modules في سياق التحميل المسبق مثل `web-frame` أو `ipc-renderer` أو `shell` كـ external وقم بتحميلها عبر require() عند استخدامها.                                                           | boolean    |
-| `electronRenderer` | تعامل مع الإلكترون المدمج modules في سياق العارض مثل `web-frame` أو `ipc-renderer` أو `shell` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                        | boolean    |
-| `node`             | تعامل مع Node.js المضمنة modules مثل `fs` أو `path` أو `vm` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                                                                   | boolean    |
-| `nwjs`             | تعامل مع `NW.js` القديم `nw.gui` module كـ external وقم بتحميله عبر `require()` عند الاستخدام.                                                                                                                         | boolean    |
-| `web`              | تعامل مع الإشارات إلى `http(s)://...` و`std:...` على أنها external وقم بتحميلها عبر `import` عند استخدامها. **(لاحظ أن هذا يغير ترتيب التنفيذ حيث يتم تنفيذ externals قبل أي كود آخر في chunk)**.  | boolean    |
-| `webAsync`         | تعامل مع المراجع إلى `http(s)://...` و`std:...` على أنها external وقم بتحميلها عبر `async import()` عند استخدامها **(لاحظ أن هذا النوع external هو `async` module، والذي له تأثيرات مختلفة على التنفيذ)**. | boolean    |
+| الخيار             | الوصف                                                                                                                                                                                                      | نوع الإدخال |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `electron`         | تعامل مع الإلكترون المشترك المدمج modules في السياق الرئيسي وسياق التحميل المسبق مثل `electron` أو `ipc` أو `shell` كـ external وقم بتحميلها عبر `require()` عند الاستخدام.                                | boolean     |
+| `electronMain`     | تعامل مع الإلكترون المدمج modules في السياق الرئيسي مثل `app` أو `ipc-main` أو `shell` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                             | boolean     |
+| `electronPreload`  | تعامل مع الإلكترون المدمج modules في سياق التحميل المسبق مثل `web-frame` أو `ipc-renderer` أو `shell` كـ external وقم بتحميلها عبر require() عند استخدامها.                                                | boolean     |
+| `electronRenderer` | تعامل مع الإلكترون المدمج modules في سياق العارض مثل `web-frame` أو `ipc-renderer` أو `shell` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                      | boolean     |
+| `node`             | تعامل مع Node.js المضمنة modules مثل `fs` أو `path` أو `vm` كـ external وقم بتحميلها عبر `require()` عند استخدامها.                                                                                        | boolean     |
+| `nwjs`             | تعامل مع `NW.js` القديم `nw.gui` module كـ external وقم بتحميله عبر `require()` عند الاستخدام.                                                                                                             | boolean     |
+| `web`              | تعامل مع الإشارات إلى `http(s)://...` و`std:...` على أنها external وقم بتحميلها عبر `import` عند استخدامها. **(لاحظ أن هذا يغير ترتيب التنفيذ حيث يتم تنفيذ externals قبل أي كود آخر في chunk)**.          | boolean     |
+| `webAsync`         | تعامل مع المراجع إلى `http(s)://...` و`std:...` على أنها external وقم بتحميلها عبر `async import()` عند استخدامها **(لاحظ أن هذا النوع external هو `async` module، والذي له تأثيرات مختلفة على التنفيذ)**. | boolean     |
 
 لاحظ أنه إذا كنت ستنتقل إلى output ES Modules مع تلك الإعدادات المسبقة المرتبطة بـnode.js، فإن webpack سيعين الإعداد الافتراضي `externalsType` إلى [`node-commonjs`](#externalstypenode-commonjs) والذي سيستخدم `createRequire` لإنشاء طلب function بدلاً من استخدام `require()`.
 
diff --git a/src/content/configuration/mode.mdx b/src/content/configuration/mode.mdx
index 6b344864e9b2..385701957e82 100644
--- a/src/content/configuration/mode.mdx
+++ b/src/content/configuration/mode.mdx
@@ -30,11 +30,11 @@ webpack --mode=development
 
 القيم النصيّة المدعومة كالآتي:
 
-| الخيار        | الوصف                                                                                                                                                                                                                                                                       |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `development` | يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `development`، ويُفعِّل أسماءً وصفيّة مفيدة للوحدات والـ chunks.                                                                                                                                                       |
+| الخيار        | الوصف                                                                                                                                                                                                                                                                                       |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `development` | يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `development`، ويُفعِّل أسماءً وصفيّة مفيدة للوحدات والـ chunks.                                                                                                                                                                     |
 | `production`  | يضبط `process.env.NODE_ENV` على `DefinePlugin` بالقيمة `production`، ويُفعِّل أسماءً مُختصَرة حتميّة (deterministic mangled) للوحدات والـ chunks، إلى جانب `FlagDependencyUsagePlugin` و`FlagIncludedChunksPlugin` و`ModuleConcatenationPlugin` و`NoEmitOnErrorsPlugin` و`MinimizerPlugin`. |
-| `none`        | يصرف النظر عن أي خيارات تحسين افتراضية.                                                                                                                                                                                                                                      |
+| `none`        | يصرف النظر عن أي خيارات تحسين افتراضية.                                                                                                                                                                                                                                                     |
 
 إن لم تضبط هذا الخيار، فإنّ webpack يعدّ القيمة `production` هي الافتراضية لـ `mode`.
 
diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx
index 90f1631b9494..10520d74929d 100644
--- a/src/content/configuration/optimization.mdx
+++ b/src/content/configuration/optimization.mdx
@@ -19,10 +19,10 @@ related:
 تعتمد القيمة الافتراضية لـ `optimization.checkWasmTypes` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -52,21 +52,21 @@ export default {
 
 تعتمد القيمة الافتراضية لـ `optimization.chunkIds` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي           |
+| Mode            | الافتراضي         |
 | --------------- | ----------------- |
-| `"production"` | `'deterministic'` |
-| `"development"` | `'named'` |
-| `"none"` | `'natural'` |
+| `"production"`  | `'deterministic'` |
+| `"development"` | `'named'`         |
+| `"none"`        | `'natural'`       |
 
 يتم دعم قيم string التالية:
 
-| الخيار            | الوصف                                                                                                                           |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `'natural'`       | معرفات رقمية حسب ترتيب الاستخدام.                                                                                                        |
-| `'named'`         | معرفات قابلة للقراءة لتحسين التصحيح.                                                                                                    |
+| الخيار            | الوصف                                                                                                         |
+| ----------------- | ------------------------------------------------------------------------------------------------------------- |
+| `'natural'`       | معرفات رقمية حسب ترتيب الاستخدام.                                                                             |
+| `'named'`         | معرفات قابلة للقراءة لتحسين التصحيح.                                                                          |
 | `'deterministic'` | معرفات رقمية قصيرة لن تتغير بين compilation. جيد على المدى الطويل caching. يتم تمكينه افتراضيًا لوضع الإنتاج. |
-| `'size'`          | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الأولي.                                                                                 |
-| `'total-size'`    | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الإجمالي.                                                                                   |
+| `'size'`          | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الأولي.                                                    |
+| `'total-size'`    | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الإجمالي.                                                  |
 
 **webpack.config.js**
 
@@ -106,10 +106,10 @@ export default {
 تعتمد القيمة الافتراضية لـ `optimization.concatenateModules` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -131,10 +131,10 @@ export default {
 تعتمد القيمة الافتراضية لـ `optimization.emitOnErrors` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `false` |
-| `"development"` | `true` |
-| `"none"` | `true` |
+| --------------- | --------- |
+| `"production"`  | `false`   |
+| `"development"` | `true`    |
+| `"none"`        | `true`    |
 
 **webpack.config.js**
 
@@ -164,10 +164,10 @@ T> IIFE ...
 تعتمد القيمة الافتراضية لـ `optimization.avoidEntryIife` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -191,10 +191,10 @@ W> يمكن أن يؤثر خيار `optimization.avoidEntryIife` سلبًا عل
 تعتمد القيمة الافتراضية لـ `optimization.flagIncludedChunks` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -216,10 +216,10 @@ export default {
 تعتمد القيمة الافتراضية لـ `optimization.innerGraph` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -241,19 +241,19 @@ export default {
 تعتمد القيمة الافتراضية لـ `optimization.mangleExports` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 يتم دعم القيم التالية:
 
-| الخيار            | الوصف                                                                                                          |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `'size'`          | الأسماء المختصرة - عادةً ما تكون عبارة عن حرف واحد - تركز على الحد الأدنى لحجم التنزيل.                                              |
+| الخيار            | الوصف                                                                                                                         |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `'size'`          | الأسماء المختصرة - عادةً ما تكون عبارة عن حرف واحد - تركز على الحد الأدنى لحجم التنزيل.                                       |
 | `'deterministic'` | الأسماء المختصرة - عادةً ما تكون مكونة من حرفين - والتي لن تتغير عند إضافة الصادرات أو إزالتها. جيد على المدى الطويل caching. |
-| `true`            | نفس `'deterministic'`                                                                                            |
-| `false`           | احتفظ بالاسم الأصلي. جيد لسهولة القراءة وتصحيح الأخطاء.                                                              |
+| `true`            | نفس `'deterministic'`                                                                                                         |
+| `false`           | احتفظ بالاسم الأصلي. جيد لسهولة القراءة وتصحيح الأخطاء.                                                                       |
 
 **webpack.config.js**
 
@@ -309,10 +309,10 @@ export default {
 تعتمد القيمة الافتراضية لـ `optimization.minimize` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -410,19 +410,19 @@ export default {
 
 تعتمد القيمة الافتراضية لـ `optimization.moduleIds` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي           |
+| Mode            | الافتراضي         |
 | --------------- | ----------------- |
-| `"production"` | `'deterministic'` |
-| `"development"` | `'named'` |
-| `"none"` | `'natural'` |
+| `"production"`  | `'deterministic'` |
+| `"development"` | `'named'`         |
+| `"none"`        | `'natural'`       |
 
 يتم دعم قيم string التالية:
 
-| الخيار          | الوصف                                           |
-| --------------- | ----------------------------------------------------- |
-| `natural`       | معرفات رقمية حسب ترتيب الاستخدام.                        |
-| `named`         | معرفات قابلة للقراءة لتحسين التصحيح.                    |
-| `deterministic` | يتم تجزئة أسماء Module إلى قيم رقمية صغيرة.    |
+| الخيار          | الوصف                                                      |
+| --------------- | ---------------------------------------------------------- |
+| `natural`       | معرفات رقمية حسب ترتيب الاستخدام.                          |
+| `named`         | معرفات قابلة للقراءة لتحسين التصحيح.                       |
+| `deterministic` | يتم تجزئة أسماء Module إلى قيم رقمية صغيرة.                |
 | `size`          | تركز المعرفات الرقمية على الحد الأدنى لحجم التنزيل الأولي. |
 
 **webpack.config.js**
@@ -466,11 +466,11 @@ W> تمت إزالة `moduleIds: total-size` في webpack 5.
 
 تعتمد القيمة الافتراضية لـ `optimization.nodeEnv` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي         |
+| Mode            | الافتراضي       |
 | --------------- | --------------- |
-| `"production"` | `'production'` |
+| `"production"`  | `'production'`  |
 | `"development"` | `'development'` |
-| `"none"` | `false` |
+| `"none"`        | `false`         |
 
 القيم المحتملة:
 
@@ -535,10 +535,10 @@ export default {
 تعتمد القيمة الافتراضية لـ `optimization.realContentHash` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 
@@ -662,11 +662,11 @@ T> يرجى ملاحظة أن `sideEffects` يجب أن يكون في ملف `pa
 
 تعتمد القيمة الافتراضية لـ `optimization.sideEffects` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي  |
-| --------------- | -------- |
-| `"production"` | `true` |
-| `"development"` | `'flag'` |
-| `"none"` | `'flag'` |
+| Mode            | الافتراضي |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `'flag'`  |
+| `"none"`        | `'flag'`  |
 
 **webpack.config.js**
 
@@ -708,10 +708,10 @@ T> سوف يقوم `optimization.sideEffects` أيضًا بوضع علامة ع
 تعتمد القيمة الافتراضية لـ `optimization.usedExports` على [`mode`](/configuration/mode/):
 
 | Mode            | الافتراضي |
-| --------------- | ------- |
-| `"production"` | `true` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| --------------- | --------- |
+| `"production"`  | `true`    |
+| `"development"` | `false`   |
+| `"none"`        | `false`   |
 
 **webpack.config.js**
 

From 65067c193400df111ba26ad4afbcca535d197f61 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:20:59 +0300
Subject: [PATCH 16/35] docs(ar): format remaining config tables

---
 src/content/configuration/performance.mdx |  8 ++--
 src/content/configuration/resolve.mdx     | 54 +++++++++++------------
 src/content/configuration/target.mdx      | 24 +++++-----
 3 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/content/configuration/performance.mdx b/src/content/configuration/performance.mdx
index 421eeca812d0..bd39686e1008 100644
--- a/src/content/configuration/performance.mdx
+++ b/src/content/configuration/performance.mdx
@@ -48,11 +48,11 @@ export default {
 
 تعتمد القيمة الافتراضية لـ `performance.hints` على [`mode`](/configuration/mode/):
 
-| Mode            | الافتراضي    |
+| Mode            | الافتراضي   |
 | --------------- | ----------- |
-| `"production"` | `'warning'` |
-| `"development"` | `false` |
-| `"none"` | `false` |
+| `"production"`  | `'warning'` |
+| `"development"` | `false`     |
+| `"none"`        | `false`     |
 
 لنفترض أنّ هناك asset حجمه يتعدّى 250 كيلوبايت:
 
diff --git a/src/content/configuration/resolve.mdx b/src/content/configuration/resolve.mdx
index 8ef0f319ff6f..47e588af356b 100644
--- a/src/content/configuration/resolve.mdx
+++ b/src/content/configuration/resolve.mdx
@@ -62,7 +62,7 @@ import Utility from "../../utilities/utility";
 import Utility from "Utilities/utility";
 ```
 
-يمكن أيضًا إضافة `يمكن أيضًا إضافة  زائدة إلى مفاتيح object المحددة للدلالة على التطابق التام:
+يمكن أيضًا إضافة `يمكن أيضًا إضافة زائدة إلى مفاتيح object المحددة للدلالة على التطابق التام:
 
 **webpack.config.js**
 
@@ -120,21 +120,21 @@ import utils from "@utils/helpers";
 
 ويوضح الجدول التالي الحالات الأخرى:
 
-| `alias:` | `import 'xyz'` | `import 'xyz/file.js'` |
+| `alias:`                           | `import 'xyz'`                        | `import 'xyz/file.js'`               |
 | ---------------------------------- | ------------------------------------- | ------------------------------------ |
-| `{}` | `/abc/node_modules/xyz/index.js` | `/abc/node_modules/xyz/file.js` |
-| `{ xyz: '/abc/path/to/file.js' }`  | `/abc/path/to/file.js`                | خطأ                                |
-| `{ xyz$: '/abc/path/to/file.js' }` | `/abc/path/to/file.js` | `/abc/node_modules/xyz/file.js` |
-| `{ xyz: './dir/file.js' }`         | `/abc/dir/file.js`                    | خطأ                                |
-| `{ xyz$: './dir/file.js' }` | `/abc/dir/file.js` | `/abc/node_modules/xyz/file.js` |
-| `{ xyz: '/some/dir' }` | `/some/dir/index.js` | `/some/dir/file.js` |
-| `{ xyz$: '/some/dir' }` | `/some/dir/index.js` | `/abc/node_modules/xyz/file.js` |
-| `{ xyz: './dir' }` | `/abc/dir/index.js` | `/abc/dir/file.js` |
-| `{ xyz: 'modu' }` | `/abc/node_modules/modu/index.js` | `/abc/node_modules/modu/file.js` |
-| `{ xyz$: 'modu' }` | `/abc/node_modules/modu/index.js` | `/abc/node_modules/xyz/file.js` |
-| `{ xyz: 'modu/some/file.js' }`     | `/abc/node_modules/modu/some/file.js` | خطأ                                |
-| `{ xyz: 'modu/dir' }` | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/modu/dir/file.js` |
-| `{ xyz$: 'modu/dir' }` | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/xyz/file.js` |
+| `{}`                               | `/abc/node_modules/xyz/index.js`      | `/abc/node_modules/xyz/file.js`      |
+| `{ xyz: '/abc/path/to/file.js' }`  | `/abc/path/to/file.js`                | خطأ                                  |
+| `{ xyz$: '/abc/path/to/file.js' }` | `/abc/path/to/file.js`                | `/abc/node_modules/xyz/file.js`      |
+| `{ xyz: './dir/file.js' }`         | `/abc/dir/file.js`                    | خطأ                                  |
+| `{ xyz$: './dir/file.js' }`        | `/abc/dir/file.js`                    | `/abc/node_modules/xyz/file.js`      |
+| `{ xyz: '/some/dir' }`             | `/some/dir/index.js`                  | `/some/dir/file.js`                  |
+| `{ xyz$: '/some/dir' }`            | `/some/dir/index.js`                  | `/abc/node_modules/xyz/file.js`      |
+| `{ xyz: './dir' }`                 | `/abc/dir/index.js`                   | `/abc/dir/file.js`                   |
+| `{ xyz: 'modu' }`                  | `/abc/node_modules/modu/index.js`     | `/abc/node_modules/modu/file.js`     |
+| `{ xyz$: 'modu' }`                 | `/abc/node_modules/modu/index.js`     | `/abc/node_modules/xyz/file.js`      |
+| `{ xyz: 'modu/some/file.js' }`     | `/abc/node_modules/modu/some/file.js` | خطأ                                  |
+| `{ xyz: 'modu/dir' }`              | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/modu/dir/file.js` |
+| `{ xyz$: 'modu/dir' }`             | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/xyz/file.js`      |
 
 `index.js` يجوز resolve إلى ملف آخر إذا تم تعريفه في `package.json`.
 
@@ -298,13 +298,13 @@ export default {
 
 يتم إلحاق شروط إضافية بناءً على [`target`](/configuration/target/):
 
-| Target خاصية | الحالة    |
-| --------------- | ------------ |
-| `webworker` | `"worker"` |
-| `node` | `"node"` |
-| `web` | `"browser"` |
-| `electron` | `"electron"` |
-| `nwjs` | `"nwjs"` |
+| Target خاصية | الحالة       |
+| ------------ | ------------ |
+| `webworker`  | `"worker"`   |
+| `node`       | `"node"`     |
+| `web`        | `"browser"`  |
+| `electron`   | `"electron"` |
+| `nwjs`       | `"nwjs"`     |
 
 على سبيل المثال، مع `target: "web"` (الافتراضي) و`mode: "production"`، يكون الإعداد الافتراضي `conditionNames` هو `["webpack", "production", "browser"]`.
 
@@ -312,12 +312,12 @@ export default {
 
 يقوم webpack بضبط `conditionNames` حتى [`resolve.byDependency`](/configuration/resolve/#resolvebydependency) اعتمادًا على كيفية استيراد module. يرث الرمز المميز `"..."` من الشروط الأساسية المذكورة أعلاه.
 
-| Dependency النوع                                     | `conditionNames`                                       | تستخدم ل                                             |
-| --------------------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------- |
+| Dependency النوع                                    | `conditionNames`                                       | تستخدم ل                                            |
+| --------------------------------------------------- | ------------------------------------------------------ | --------------------------------------------------- |
 | `esm`، `wasm`، `loaderImport`                       | `["import", "module-sync", "module", "..."]`           | ESM `import` البيانات، WebAssembly، loader الواردات |
 | `commonjs`، `amd`، `loader`، `unknown`، `undefined` | `["require", "module-sync", "module", "..."]`          | مكالمات `require()` وAMD وأنواع dependency الأخرى   |
-| `worker`                                            | `["worker", "import", "module-sync", "module", "..."]` | `new Worker()` التعبيرات                           |
-| `css-import`                                        | `["webpack", <mode>, "style"]`                         | CSS `@import` البيانات                             |
+| `worker`                                            | `["worker", "import", "module-sync", "module", "..."]` | `new Worker()` التعبيرات                            |
+| `css-import`                                        | `["webpack", <mode>, "style"]`                         | CSS `@import` البيانات                              |
 
 يتم تضمين <Badge text="5.107.0+" /> `"module-sync"` في الشروط الافتراضية
 للتوافق مع Node.js، مما يعرض حالة مجتمع `module-sync` لـ
@@ -842,7 +842,7 @@ export default {
 
 ما إذا كان سيتم ربط resolve بالارتباطات الرمزية إلى موقع الارتباط الرمزي الخاص بها.
 
-عند التمكين، يتم تحويل الموارد المرتبطة بالرمز إلى مسارها _الحقيقي، وليس إلى موقع الارتباط الرمزي الخاص بها. لاحظ أن هذا قد يتسبب في فشل دقة module عند استخدام الأدوات التي تربط packages (مثل `npm link`).
+عند التمكين، يتم تحويل الموارد المرتبطة بالرمز إلى مسارها \_الحقيقي، وليس إلى موقع الارتباط الرمزي الخاص بها. لاحظ أن هذا قد يتسبب في فشل دقة module عند استخدام الأدوات التي تربط packages (مثل `npm link`).
 
 **webpack.config.js**
 
diff --git a/src/content/configuration/target.mdx b/src/content/configuration/target.mdx
index d9283e07c6b5..b2bb27bdbef4 100644
--- a/src/content/configuration/target.mdx
+++ b/src/content/configuration/target.mdx
@@ -19,19 +19,19 @@ contributors:
 
 تُدعَم القيم النصّية الآتية عبر [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js):
 
-| الخيار                       | الوصف                                                                                                                                                                                                                                                                                                |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `async-node[[X].Y]`        | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل `fs` و `vm` لتحميل الـ chunks بشكل غير متزامن).                                                                                                                                                                                                                                                  |
-| `electron[[X].Y]-main`     | تصريف لـ [Electron](https://electronjs.org/) خاصّ بالعملية الرئيسية (main process).                                                                                                                                                                                                                                    |
-| `electron[[X].Y]-renderer` | تصريف لـ [Electron](https://electronjs.org/) خاصّ بعملية العرض (renderer process)، ويُوفِّر هدفاً يستعمل `JsonpTemplatePlugin` و `FunctionModulePlugin` لبيئات المتصفّح، و `NodeTargetPlugin` و `ExternalsPlugin` لوحدات CommonJS ووحدات Electron المدمجة.                                       |
+| الخيار                     | الوصف                                                                                                                                                                                                                                                                         |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `async-node[[X].Y]`        | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل `fs` و `vm` لتحميل الـ chunks بشكل غير متزامن).                                                                                                                                                                              |
+| `electron[[X].Y]-main`     | تصريف لـ [Electron](https://electronjs.org/) خاصّ بالعملية الرئيسية (main process).                                                                                                                                                                                           |
+| `electron[[X].Y]-renderer` | تصريف لـ [Electron](https://electronjs.org/) خاصّ بعملية العرض (renderer process)، ويُوفِّر هدفاً يستعمل `JsonpTemplatePlugin` و `FunctionModulePlugin` لبيئات المتصفّح، و `NodeTargetPlugin` و `ExternalsPlugin` لوحدات CommonJS ووحدات Electron المدمجة.                    |
 | `electron[[X].Y]-preload`  | تصريف لـ [Electron](https://electronjs.org/) خاصّ بعملية العرض، ويُوفِّر هدفاً يستعمل `NodeTemplatePlugin` مع ضبط `asyncChunkLoading` على `true`، و `FunctionModulePlugin` لبيئات المتصفّح، و `NodeTargetPlugin` و `ExternalsPlugin` لوحدات CommonJS ووحدات Electron المدمجة. |
-| `node[[X].Y]`              | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل `require` الخاصة بـ Node.js لتحميل الـ chunks).                                                                                                                                                                                                                                                              |
-| `node-webkit[[X].Y]`       | تصريف للاستعمال في WebKit، ويستعمل JSONP لتحميل الـ chunks. ويُتيح استيراد وحدات Node.js المدمجة و [`nw.gui`](http://docs.nwjs.io/en/latest/) (تجريبي).                                                                                                                             |
-| `nwjs[[X].Y]`              | مثل `node-webkit` تماماً.                                                                                                                                                                                                                                                                            |
-| `web`                      | تصريف للاستعمال في بيئة شبيهة بالمتصفّح **(الافتراضي)**.                                                                                                                                                                                                                                                        |
-| `webworker`                | تصريف بوصفه WebWorker.                                                                                                                                                                                                                                                                                 |
-| `esX`                      | تصريف لإصدار ECMAScript المُحدَّد. أمثلة: es5، es2020.                                                                                                                                                                                                                                              |
-| `browserslist`             | استنتاج المنصّة وميزات ES من تخصيص browserslist **(افتراضي إن كان تخصيص browserslist متاحاً)**.                                                                                                                                                                                                    |
+| `node[[X].Y]`              | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل `require` الخاصة بـ Node.js لتحميل الـ chunks).                                                                                                                                                                              |
+| `node-webkit[[X].Y]`       | تصريف للاستعمال في WebKit، ويستعمل JSONP لتحميل الـ chunks. ويُتيح استيراد وحدات Node.js المدمجة و [`nw.gui`](http://docs.nwjs.io/en/latest/) (تجريبي).                                                                                                                       |
+| `nwjs[[X].Y]`              | مثل `node-webkit` تماماً.                                                                                                                                                                                                                                                     |
+| `web`                      | تصريف للاستعمال في بيئة شبيهة بالمتصفّح **(الافتراضي)**.                                                                                                                                                                                                                      |
+| `webworker`                | تصريف بوصفه WebWorker.                                                                                                                                                                                                                                                        |
+| `esX`                      | تصريف لإصدار ECMAScript المُحدَّد. أمثلة: es5، es2020.                                                                                                                                                                                                                        |
+| `browserslist`             | استنتاج المنصّة وميزات ES من تخصيص browserslist **(افتراضي إن كان تخصيص browserslist متاحاً)**.                                                                                                                                                                               |
 
 فمثلاً، حين يكون `target` مضبوطاً على `"electron-main"`، يُضيف webpack عدّة متغيّرات خاصّة بـ electron.
 

From d4b6bd6191993c2ea57251a91a456dec0808d077 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:28:04 +0300
Subject: [PATCH 17/35] docs(ar): fix asset guide lint

---
 src/content/guides/asset-management.mdx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx
index 0144ccba9f4d..961e474d0c86 100644
--- a/src/content/guides/asset-management.mdx
+++ b/src/content/guides/asset-management.mdx
@@ -30,7 +30,7 @@ contributors:
 +    <script src="bundle.js"></script>
    </body>
  </html>
-````
+```
 
 **webpack.config.js**
 
@@ -152,7 +152,7 @@ export default {
 الآن قم بتشغيل أمر البناء:
 
 ```bash
-$ npm run build
+npm run build
 ```
 
 افتح ملف `dist/index.html` في المتصفح مجددًا، وستلاحظ أن النص `Hello webpack` أصبح باللون الأحمر.
@@ -200,7 +200,7 @@ $ npm run build
 الآن، عندما تقوم بكتابة:
 
 ```js
-import MyImage from './my-image.png'
+import MyImage from "./my-image.png";
 ```
 
 سيقوم webpack بمعالجة الصورة وإضافتها إلى مجلد `output`، كما أن المتغير `MyImage` سيحتوي على الرابط النهائي للصورة بعد المعالجة.
@@ -264,7 +264,7 @@ import MyImage from './my-image.png'
 قم بإعادة البناء وافتح الملف مجددًا:
 
 ```bash
-$ npm run build
+npm run build
 ```
 
 إذا سار كل شيء بشكل صحيح، فسترى الأيقونة كخلفية متكررة، بالإضافة إلى عنصر `img` بجانب النص `Hello webpack`.
@@ -351,7 +351,7 @@ $ npm run build
 دعم JSON مدمج بالفعل داخل webpack، لذلك:
 
 ```js
-import Data from './data.json'
+import Data from "./data.json";
 ```
 
 سيعمل مباشرة.
@@ -378,8 +378,8 @@ npm install --save-dev csv-loader xml-loader
 بعدها يمكنك استيراد البيانات مثل أي ملف آخر:
 
 ```js
-import Data from './data.xml';
-import Notes from './data.csv';
+import Notes from "./data.csv";
+import Data from "./data.xml";
 ```
 
 وستحصل على بيانات JSON جاهزة للاستخدام.
@@ -399,9 +399,9 @@ npm install toml yamljs json5 --save-dev
 بعدها يمكنك الاستيراد بهذه الطريقة:
 
 ```js
-import toml from './data.toml';
-import yaml from './data.yaml';
-import json from './data.json5';
+import json from "./data.json5";
+import toml from "./data.toml";
+import yaml from "./data.yaml";
 ```
 
 وسيتم تحويل البيانات إلى كائنات JavaScript تلقائيًا.
@@ -444,6 +444,4 @@ npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs
 
 ## قراءة إضافية
 
-* [Loading Fonts](https://survivejs.com/webpack/loading/fonts/) على SurviveJS
-
-```
+- [Loading Fonts](https://survivejs.com/webpack/loading/fonts/) على SurviveJS

From 23cacbd945a4058860c7fbfb14a809e4d35c0437 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:31:36 +0300
Subject: [PATCH 18/35] docs(ar): fix guide lint issues

---
 src/content/guides/caching.mdx         | 10 +++++-----
 src/content/guides/getting-started.mdx | 14 ++++++--------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/content/guides/caching.mdx b/src/content/guides/caching.mdx
index 33ccfff0d6ca..55a97358327f 100644
--- a/src/content/guides/caching.mdx
+++ b/src/content/guides/caching.mdx
@@ -2,7 +2,7 @@
 title: التخزين المؤقت
 sort: 6
 contributors:
-- arabpolice
+  - arabpolice
 ---
 
 T> الأمثلة الموجودة في هذا الدليل مبنية على [البدء](/guides/getting-started) و[إدارة المخرجات](/guides/output-management) و[تقسيم الكود](/guides/code-splitting).
@@ -242,9 +242,9 @@ webpack-demo
 
 ... يمكننا رؤية أن الثلاثة جميعًا قد تغيروا. السبب هو أن كل [`module.id`](/api/module-variables/#moduleid-commonjs) يتم زيادته افتراضيًا بناءً على ترتيب التحليل. وهذا يعني أنه عندما يتغير ترتيب التحليل، ستتغير المعرفات أيضًا. للتلخيص:
 
-* حزمة `main` تغيرت بسبب محتواها الجديد.
-* حزمة `vendor` تغيرت لأن `module.id` الخاص بها تغير.
-* وحزمة `runtime` تغيرت لأنها تحتوي الآن على مرجع إلى وحدة جديدة.
+- حزمة `main` تغيرت بسبب محتواها الجديد.
+- حزمة `vendor` تغيرت لأن `module.id` الخاص بها تغير.
+- وحزمة `runtime` تغيرت لأنها تحتوي الآن على مرجع إلى وحدة جديدة.
 
 الأول والأخير متوقعان، لكننا نريد إصلاح hash الخاص بـ `vendor`. لنستخدم [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) مع الخيار `'deterministic'`:
 
@@ -339,4 +339,4 @@ Entrypoint main = runtime.725a1a51ede5ae0cfde0.js vendors.55e79e5927a639d21a1b.j
 
 ## الخلاصة
 
-قد يكون التخزين المؤقت معقدًا، لكن الفائدة التي يقدمها لمستخدمي التطبيق أو الموقع تجعل الجهد مستحقًا. راجع قسم *Further Reading* أدناه لمعرفة المزيد.
+قد يكون التخزين المؤقت معقدًا، لكن الفائدة التي يقدمها لمستخدمي التطبيق أو الموقع تجعل الجهد مستحقًا. راجع قسم _Further Reading_ أدناه لمعرفة المزيد.
diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx
index 345f6fda9a57..e354dc196fdf 100644
--- a/src/content/guides/getting-started.mdx
+++ b/src/content/guides/getting-started.mdx
@@ -22,7 +22,7 @@ W> الأمثلة في هذا الدليل تستخدم `webpack-cli` الإصد
 ```bash
 npx create-webpack-app webpack-demo
 cd webpack-demo
-````
+```
 
 T> هل تحتاج إلى إعداد مشروع أو قوالب عبر CLI؟ اطلع على أمر [Init](/api/cli/#init) الخاص بإنشاء مشاريع webpack.
 
@@ -136,9 +136,9 @@ T> إذا أردت معرفة المزيد عن طريقة عمل `package.json`
 
 هناك عدة مشاكل في إدارة مشاريع JavaScript بهذه الطريقة:
 
-* ليس من الواضح مباشرة أن السكربت يعتمد على مكتبة خارجية.
-* إذا كانت إحدى التبعيات مفقودة أو تم تحميلها بترتيب خاطئ، فلن يعمل التطبيق بشكل صحيح.
-* إذا تم تحميل تبعية غير مستخدمة، سيضطر المتصفح إلى تنزيل كود غير ضروري.
+- ليس من الواضح مباشرة أن السكربت يعتمد على مكتبة خارجية.
+- إذا كانت إحدى التبعيات مفقودة أو تم تحميلها بترتيب خاطئ، فلن يعمل التطبيق بشكل صحيح.
+- إذا تم تحميل تبعية غير مستخدمة، سيضطر المتصفح إلى تنزيل كود غير ضروري.
 
 يقوم Webpack بحل هذه المشاكل من خلال التصريح بالتبعيات بشكل واضح وتجميعها معًا. هذا يُزيل الاعتماد على المتغيرات العامة ويضمن تنفيذ السكربتات بالترتيب الصحيح.
 
@@ -146,8 +146,8 @@ T> إذا أردت معرفة المزيد عن طريقة عمل `package.json`
 
 سنقوم أولًا بتعديل بنية المشروع قليلًا، وذلك بفصل كود المصدر (`./src`) عن كود التوزيع (`./dist`).
 
-* كود المصدر هو الكود الذي سنكتبه ونعدّله.
-* كود التوزيع هو المخرجات النهائية المصغّرة والمحسّنة الناتجة عن عملية البناء والتي سيتم تحميلها في المتصفح.
+- كود المصدر هو الكود الذي سنكتبه ونعدّله.
+- كود التوزيع هو المخرجات النهائية المصغّرة والمحسّنة الناتجة عن عملية البناء والتي سيتم تحميلها في المتصفح.
 
 قم بتعديل بنية المشروع كالتالي:
 
@@ -386,5 +386,3 @@ webpack-demo
 W> لا تقم بتجميع كود غير موثوق باستخدام webpack، لأن ذلك قد يؤدي إلى تنفيذ كود خبيث على جهازك أو على الخوادم أو حتى داخل متصفحات المستخدمين النهائيين.
 
 إذا كنت تريد معرفة المزيد عن تصميم webpack، يمكنك قراءة صفحات [المفاهيم الأساسية](/concepts) و[الإعدادات](/configuration)، بالإضافة إلى قسم [API](/api) الذي يشرح الواجهات المختلفة التي يوفرها webpack.
-
-```

From 0f1c594c57bce3d20c9730d748c92f45677c8a1f Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Fri, 22 May 2026 17:36:14 +0300
Subject: [PATCH 19/35] fix(ar): lint site config module

---
 eslint.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 9d72898e188d..235884442daf 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -28,6 +28,7 @@ export default defineConfig([
     extends: [configs["browser/recommended-outdated-module"]],
     files: [
       "src/components/**/*.{js,jsx}",
+      "src/config/site.js",
       "src/utilities/test-local-storage.js",
       "src/*.jsx",
       "src/sw.js",

From 7c8963526a2ecdb481ae02e84294c5c174711460 Mon Sep 17 00:00:00 2001
From: semon009 <109869861+semon009@users.noreply.github.com>
Date: Sun, 24 May 2026 17:10:29 +0300
Subject: [PATCH 20/35] docs(contribute): translated contribute docs

---
 src/content/contribute/debugging.mdx       |  47 +++---
 src/content/contribute/index.mdx           |  80 +++++------
 src/content/contribute/plugin-patterns.mdx |  50 ++++---
 src/content/contribute/release-process.mdx |  13 +-
 src/content/contribute/writers-guide.mdx   | 158 ++++++++++-----------
 5 files changed, 166 insertions(+), 182 deletions(-)

diff --git a/src/content/contribute/debugging.mdx b/src/content/contribute/debugging.mdx
index e3d4893199e0..642487631aef 100644
--- a/src/content/contribute/debugging.mdx
+++ b/src/content/contribute/debugging.mdx
@@ -1,12 +1,8 @@
 ---
-title: Debugging
+title: تصحيح الأخطاء
 sort: 7
 contributors:
-  - skipjack
-  - tbroadley
-  - madhavarshney
-  - bhavya9107
-  - akaustav
+  - semon009
 related:
   - title: Learn and Debug webpack with Chrome DevTools!
     url: https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554
@@ -16,43 +12,44 @@ related:
     url: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
 ---
 
-When contributing to the core repo, writing a loader/plugin, or even working on a complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful.
+عند المساهمة في الـ core repo، أو كتابة loader/plugin، أو حتى العمل على مشروع معقد، تُعدّ أدوات تصحيح الأخطاء أساسية في سير عملك. سواءً أكانت المشكلة بطء الأداء في مشروع كبير أو تتبع أخطاء غير مفيد، فإن الأدوات المساعدة التالية تُسهّل عليك عملية تحديد المشكلة.
 
-- The [`stats` data](/api/stats) made available through [Node](/api/node/#stats-object) and the [CLI](/api/cli/#common-options).
-- Chrome **DevTools** and the latest Node.js version.
+- البيانات [`stats` data](/api/stats) المتاحة من خلال [Node](/api/node/#stats-object) و [CLI](/api/cli/#common-options).
+- **أدوات مطوري** Chrome وأحدث إصدار من Node.js.
 
-## Stats
+## الإحصائيات
 
-Whether you want to sift through [this data](/api/stats) manually or use a tool to process it, the `stats` data can be extremely useful when debugging build issues. We won't go in depth here as there's an [entire page](/api/stats) dedicated to its contents, but know that you can use it to find the following information:
+سواءً أردتَ تحليل هذه [البيانات](/api/stats) يدويًا أو استخدام أداة لمعالجتها، فإن بيانات `stats` تُعدّ مفيدة للغاية عند تصحيح أخطاء البناء. لن نتطرق إلى التفاصيل هنا لوجود صفحة كاملة مخصصة لمحتوياتها [الصفحة الكاملة](/api/stats)، ولكن اعلم أنه يمكنك استخدامها للعثور على المعلومات التالية:
 
-- The contents of every module.
-- The modules contained within every chunk.
-- Per module compilation and resolving stats.
-- Build errors and warnings.
-- The relationships between modules.
-- And much more...
+- محتويات كل module.
+- الـ modules الموجودة داخل كل جزء.
+- إحصائيات تجميع وحل كل module.
+- أخطاء البناء والتحذيرات.
+- العلاقات بين الـ modules.
+- وغير ذلك الكثير...
 
-On top of that, the official [analyze tool](https://github.com/webpack/analyse) and [various others](/guides/code-splitting/#bundle-analysis) will accept this data and visualize it in various ways.
+علاوة على ذلك، فإن [أداة التحليل](https://github.com/webpack/analyse) الرسمية و[أدوات أخرى متنوعة](/guides/code-splitting/#bundle-analysis) ستقبل هذه البيانات وتصورها بطرق مختلفة.
 
-## DevTools
+## أدوات المطورين
 
-While [`console`](https://nodejs.org/api/console.html) statements may work well in straightforward scenarios, sometimes a more robust solution is needed. As most front-end developers already know, Chrome DevTools are a life saver when debugging web applications, _but they don’t have to stop there_. As of Node v6.3.0+, developers can use the built-in `--inspect` flag to debug a node program in DevTools.
+على الرغم من أن عبارات [`console`](https://nodejs.org/api/console.html) قد تكون فعّالة في الحالات البسيطة، إلا أن الحاجة قد تدعو أحيانًا إلى حلول أكثر عملية. وكما يعلم معظم مطوري واجهات المستخدم، تُعد أدوات مطوري Chrome منقذة عند تصحيح أخطاء تطبيقات الويب، _ولكن استخدامها لا يقتصر على ذلك_. فمنذ إصدار Node v6.3.0 والإصدارات الأحدث، يُمكن للمطورين استخدام علامة `--inspect` المدمجة لتصحيح أخطاء برنامج Node في أدوات المطورين.
 
-Let's start by invoking webpack with the `node --inspect`.
+لنبدأ باستدعاء webpack باستخدام `node --inspect`.
 
-Note that we cannot run npm `scripts`, e.g. `npm run build`, so we'll have to specify the full `node_modules` path:
+لاحظ أنه لا يمكننا تشغيل الـ `scripts` الخاصة بـ npm، على سبيل المثال `npm run build`، لذلك سيتعين علينا تحديد المسار الكامل لـ `node_modules`:
 
 ```bash
 node --inspect ./node_modules/webpack/bin/webpack.js
 ```
 
-Which should output something like:
+والذي من المفترض أن يكون الـ Output شيئاً مثل:
 
 ```bash
 Debugger listening on ws://127.0.0.1:9229/c624201a-250f-416e-a018-300bbec7be2c
 For help see https://nodejs.org/en/docs/inspector
 ```
 
-Now jump to `chrome://inspect` in the browser and you should see any active scripts you've inspected under the _Remote Target_ header. Click the "inspect" link under each script to open a dedicated debugger or the _Open dedicated DevTools for Node_ link for a session that will connect automatically. You can also check out the [NiM extension](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj), a handy Chrome plugin that will automatically open a DevTools tab every time you `--inspect` a script.
+ننتقل الآن إلى `chrome://inspect` في المتصفح، وستجد جميع البرامج النصية النشطة التي قمت بفحصها ضمن عنوان "_Remote Target_". انقر على رابط "inspect" أسفل كل برنامج نصي لفتح مصحح أخطاء مخصص، أو انقر على رابط "_فتح أدوات مطوري Node المخصصة_" لجلسة تتصل تلقائيًا. يمكنك أيضًا تجربة إضافة [NiM extension](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj), وهي إضافة مفيدة لمتصفح Chrome تفتح تلقائيًا علامة تبويب أدوات المطورين في كل مرة تستخدم فيها الأمر `--inspect` لفحص برنامج نصي.
+
+نوصي باستخدام الخيار `--inspect-brk` الذي يُوقف التنفيذ عند أول سطر في البرنامج النصي، مما يسمح لك بتصفح الكود المصدري (The source code) لتعيين نقاط توقف وبدء/إيقاف عملية البناء حسب رغبتك. ولا تنسَ أنه لا يزال بإمكانك تمرير وسائط إلى البرنامج النصي. على سبيل المثال، إذا كان لديك عدة ملفات تهيئة، يمكنك تمرير `--config webpack.prod.js` لتحديد ملف التهيئة الذي ترغب في تصحيحه.
 
-We recommend using the `--inspect-brk` flag which will break on the first statement of the script allowing you to go through the source to set breakpoints and start/stop the build as you please. Also, don't forget that you can still pass arguments to the script. For example, if you have multiple configuration files you could pass `--config webpack.prod.js` to specify the configuration you'd like to debug.
diff --git a/src/content/contribute/index.mdx b/src/content/contribute/index.mdx
index a38487ec66a1..a8b4e0973b90 100644
--- a/src/content/contribute/index.mdx
+++ b/src/content/contribute/index.mdx
@@ -1,17 +1,11 @@
 ---
-title: Contribute
+title: المساهمون
 sort: -1
 contributors:
-  - rouzbeh84
-  - scottdj92
-  - harrynewsome
-  - dhedgecock
-  - tbroadley
-  - EugeneHlushko
-  - dkdk225
+  - semon009
 ---
 
-The people who contribute to webpack do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together. Because of our [Open Collective](https://opencollective.com/webpack) model for funding and transparency, we are able to funnel support and funds through contributors, dependent projects, and the contributor and core teams. To make a donation, click the button below...
+الأشخاص المساهمين في تطوير Webpack بدافع حبهم للمصادر المفتوحة، ومستخدمينا، والـecosystem، والأهم من ذلك، سعيهم المشترك لتطوير الويب. وبفضل نموذج التمويل والشفافية الذي نتبعه [Open Collective](https://opencollective.com/webpack)، نستطيع توجيه الدعم والتمويل عبر المساهمين، والمشاريع التابعة، وفرق العمل الأساسية والمساهمين. للتبرع، انقر على الزر أدناه...
 
 <div className="flex justify-center">
 
@@ -29,63 +23,63 @@ The people who contribute to webpack do so for the love of open source, our user
 
 </div>
 
-But what is the return on the investment?
+لكن ما هو العائد على الاستثمار؟
 
-## Developers
+## المبرمجون
 
-The biggest core feature we'd like to provide is an enjoyable development experience. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
+أهم ميزة أساسية نرغب في توفيرها هي تجربة تطوير ممتعة. يمكن للمطورين أمثالكم المساهمة في ذلك من خلال توثيق شامل وغني، وتقديم طلبات سحب لمساعدتنا في تغطية حالات استخدام متخصصة، ودعم ما تحبونه في Webpack.
 
-### How Can I Help?
+### كيف يمكنني المساعدة؟
 
-Anybody can help by doing any of the following:
+يمكن لأي شخص المساعدة من خلال القيام بأي مما يلي:
 
-- Ask your employer to use webpack in projects.
-- Help us write and maintain the content on this site (see the [writer's guide](/contribute/writers-guide/)).
-- Contribute to the [core repository](https://github.com/webpack/webpack).
-- Become a backer or sponsor on [open collective](https://opencollective.com/webpack#support).
+- اطلب من صاحب العمل استخدام Webpack في المشاريع.
+- ساعدنا في كتابة المحتوى الموجود على هذا الموقع والحفاظ عليه (انظر الى [دليل الكاتب](/contribute/writers-guide/)).
+- ساهم في [core repository](https://github.com/webpack/webpack).
+- كن داعمًا أو راعيًا على [open collective](https://opencollective.com/webpack#support).
 
-### Encouraging Employers
+### طلب من صاحب العمل
 
-You can ask your employer to improve your workflow by leveraging webpack: an all-in-one tool for fonts, images and image optimization, and json. Explain to them how webpack will attempt to bundle your code and assets the best it can for the smallest file size, leading to speedier sites and applications.
+يمكنك أن تطلب من صاحب العمل تحسين سير عملك باستخدام Webpack: أداة شاملة للخطوط والصور وتحسينها، بالإضافة إلى JSON. اشرح لهم كيف سيحاول Webpack تجميع التعليمات البرمجية والموارد بأفضل شكل ممكن للحصول على أصغر حجم ملف، مما يؤدي إلى مواقع وتطبيقات أسرع.
 
-### Your Contributions
+### مساهماتكم
 
-Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, if not thousands, of projects depend on webpack and contributing will make the ecosystem better for all the users.
+المساهمة في تطوير Webpack ليست انضمامًا إلى نادٍ حصري. بصفتك مطورًا، فأنت تُساهم في تعزيز صحة المشاريع الأخرى التي تعتمد عليه. تعتمد مئات، بل آلاف المشاريع، على Webpack، ومساهمتك ستجعل الـecosystem أفضل لجميع المستخدمين.
 
-The remainder of this section of the site is dedicated to developers such as yourself who would like to become a part of our ever-growing community:
+أما بقية هذا القسم من الموقع فهو مُخصّص للمطورين أمثالكم الراغبين في الانضمام إلى مجتمعنا المتنامي باستمرار.
 
-- [Writing a Loader](/contribute/writing-a-loader)
-- [Writing a Plugin](/contribute/writing-a-plugin)
-- [Plugin Patterns](/contribute/plugin-patterns)
-- [Release Process](/contribute/release-process)
+- [كتابة loader](/contribute/writing-a-loader)
+- [كتابة plugin](/contribute/writing-a-plugin)
+- [أنماط الإضافات](/contribute/plugin-patterns)
+- [عملية الإصدار](/contribute/release-process)
 
-## Executives
+## المديرين التنفيذيين
 
-CTO's, VPs, and owners can help too!
+يمكن للمديرين التقنيين ونواب الرئيس والمالكين المساعدة أيضاً!
 
-Webpack is an all-in-one tool for bundling your code. It can handle fonts, images, data and more with the help of community-driven plugins and loaders. Having all of your assets be handled by one tool is immensely helpful, as you or your team can spend less time making sure a machine with many moving parts is working correctly and more time building your product.
+Webpack أداة شاملة لتجميع التعليمات البرمجية. تدعم هذه الأداة الخطوط والصور والبيانات وغيرها، وذلك بفضل الإضافات والـloaders التي يطورها المجتمع. إن إدارة جميع مواردك بواسطة أداة واحدة أمرٌ في غاية الأهمية، إذ يُمكّنك أنت أو فريقك من تقليل الوقت المُستغرق في التأكد من سلامة عمل النظام، وتكريس المزيد من الوقت لتطوير منتجك.
 
-### Sponsorship
+### الرعاية
 
-Aside from monetary assistance, companies can support webpack by:
+إلى جانب المساعدة المالية، يمكن للشركات دعم Webpack من خلال:
 
-- Providing developers that are not actively working on a project.
-- Contributing computing power for improved CI and regression testing.
+- توفير مطورين غير منشغلين حاليًا بمشروع ما.
+- المساهمة بقدرات حاسوبية لتحسين التكامل المستمر (CI) وregression testing.
 
-You can also encourage your developers to contribute to the ecosystem by open-sourcing webpack loaders, plugins and other utilities. And, as mentioned above, we would greatly appreciate any help in increasing our CI/CD infrastructure.
+يمكنكم أيضاً تشجيع مطوريكم على المساهمة في ecosystem من خلال نشر أدوات تحميل Webpack والإضافات وغيرها من الأدوات المساعدة كمصادر مفتوحة. وكما ذكرنا سابقاً، سنكون ممتنين للغاية لأي مساعدة في تطوير (CI/CD) لدينا.
 
-### Anyone Else
+### أي شخص آخر
 
-To anyone else who is interested in helping our mission – e.g. venture capitalists, government entities, digital agencies, etc. – we would love for you to work with us, one of the top npm packages, to improve your product! Please don't hesitate to reach out with questions.
+إلى كل من يرغب في دعم مهمتنا - كالمستثمرين، والجهات الحكومية، والوكالات الرقمية، وغيرها - يسعدنا التعاون معكم، فنحن نقدم إحدى أفضل حزم npm، لتحسين منتجاتكم! لا تترددوا في التواصل معنا لطرح أي استفسارات.
 
-## Community
+## المجتمع
 
-Looking for help, have questions, or want to connect with fellow webpack contributors?
+هل تبحث عن مساعدة، أو لديك أسئلة، أو ترغب في التواصل مع زملائك المساهمين في Webpack؟
 
-Join our [Discord server](https://discord.com/invite/5sxFZPdx2k) for real-time support, discussions, and collaboration.
+انضم إلى [الـ Discord الخاص بنا](https://discord.com/invite/5sxFZPdx2k) للحصول على الدعم الفوري والمناقشات والتعاون.
 
 ## Pull requests
 
-Documentation of webpack features and changes is now being updated as webpack evolves. An automated issue creation integration was established and proven to be effective in the recent years.
-When a feature gets merged, an issue with a documentation request is created in our repository and we expect to resolve it in a timely manner. This means that there are features, changes and breaking changes awaiting to be documented, reviewed and released. That said, if Pull Request's author is abandoning it for more than 30 days, we may mark such Pull Request as stale. We may take over the work that is needed to finish it.
-If Pull Request author grants write access to their fork to the webpack Documentation team we will commit directly to your branch and finish the work. In other cases, we may have to start over by ourselves or by delegating it to willing community members. This may render your Pull Request redundant and it might get closed as a part of the cleanup process.
+يتم الآن تحديث توثيق ميزات وتغييرات Webpack باستمرار مع تطور Webpack. وقد تم إنشاء نظام آلي لإنشاء الاخطاء، وقد أثبت فعاليته في السنوات الأخيرة.
+عند دمج ميزة جديدة، يتم إنشاء مشكلة في مستودعنا تتضمن طلب توثيق، ونتوقع حلها في أسرع وقت ممكن. هذا يعني وجود ميزات وتغييرات، بما في ذلك التغييرات الجذرية، بانتظار التوثيق والمراجعة والإصدار. مع ذلك، إذا تخلى صاحب طلب السحب (الـpull request) عنه لأكثر من 30 يومًا، فقد نُصنّفه على أنه قديم. وقد نتولى العمل اللازم لإكماله.
+إذا منح صاحب طلب السحب فريق توثيق Webpack صلاحية الكتابة على فرعه، فسنقوم بالدمج مباشرةً في فرعك وإكمال العمل. في الحالات الأخرى، قد نضطر إلى البدء من جديد بأنفسنا أو بتفويض المهمة إلى أعضاء المجتمع الراغبين. قد يؤدي هذا إلى جعل طلب السحب (الـpull request) الخاص بك غير ضروري، وقد يتم إغلاقه كجزء من عملية التنظيف.
diff --git a/src/content/contribute/plugin-patterns.mdx b/src/content/contribute/plugin-patterns.mdx
index 4a2718c5a475..5eb2df48c0b3 100644
--- a/src/content/contribute/plugin-patterns.mdx
+++ b/src/content/contribute/plugin-patterns.mdx
@@ -1,18 +1,15 @@
 ---
-title: Plugin Patterns
+title: أنماط الإضافات (Plugins)
 sort: 5
 contributors:
-  - nveenjain
-  - EugeneHlushko
-  - benglynn
-  - raj-sapalya
+  - semon009
 ---
 
-Plugins grant unlimited opportunity to perform customizations within the webpack build system. This allows you to create custom asset types, perform unique build modifications, or even enhance the webpack runtime while using middleware. The following are some features of webpack that become useful while writing plugins.
+تتيح الإضافات إمكانية إجراء تعديلات غير محدودة على نظام بناء Webpack. وهذا يسمح بإنشاء أنواع أصول مخصصة (custom asset)، وإجراء تعديلات فريدة على عملية البناء، أو حتى تحسين بيئة تشغيل Webpack باستخدام البرمجيات الوسيطة. فيما يلي بعض ميزات Webpack التي تُصبح مفيدة عند كتابة الإضافات.
 
-## Exploring assets, chunks, modules, and dependencies
+## استكشاف الـ assets، والـ chunks ، والـ modules، والـ dependencies
 
-After a compilation is sealed, all structures within the compilation may be traversed.
+بمجرد إغلاق عملية التجميع، يمكن التنقل عبر جميع الهياكل الموجودة داخله.
 
 ```js
 class MyPlugin {
@@ -46,21 +43,22 @@ class MyPlugin {
 export default MyPlugin;
 ```
 
-- `compilation.modules`: A set of modules (built inputs) in the compilation. Each module manages the build of a raw file from your source library.
+- `compilation.modules`: مجموعة من الـ modules (built inputs) في عملية التجميع. تتولى كل module إدارة عملية بناء ملف خام من source library الخاصة بك.
 
-W> **Deprecation warning**: Array functions will still work.
+W> **تحذير بشأن الإهمال**: ستظل وظائف المصفوفات (Array) تعمل.
 
-- `module.fileDependencies`: An array of source file paths included into a module. This includes the source JavaScript file itself (ex: `index.js`), and all dependency asset files (stylesheets, images, etc) that it has required. Reviewing dependencies is useful for seeing what source files belong to a module.
-- `compilation.chunks`: A set of chunks (build outputs) in the compilation. Each chunk manages the composition of a final rendered assets.
+- `module.fileDependencies`: مصفوفة (array) بمسارات ملفات المصدر المُضمّنة في الـ module. يشمل ذلك ملف جافا سكريبت المصدر نفسه (مثال: `index.js`)، وجميع ملفات الأصول التابعة (stylesheets, images, الخ..) التي تتطلبها. تُفيد مراجعة التبعيات في معرفة ملفات المصدر التي تنتمي إلى الوحدة.
 
-W> **Deprecation warning**: Array functions will still work.
+- `compilation.chunks`: مجموعة من الأجزاء (build outputs) في عملية التجميع. يُدير كل جزء منها عملية تكوين الـ assets النهائية المُعالجة.
 
-- `chunk.getModules()`: An array of modules that are included into a chunk. By extension, you may look through each module's dependencies to see what raw source files fed into a chunk.
-- `chunk.files`: A Set of output filenames generated by the chunk. You may access these asset sources from the `compilation.assets` table.
+W> **تحذير بشأن الإهمال**: ستظل وظائف المصفوفات (Array) تعمل.
+
+- `chunk.getModules()`: مصفوفة (array) من الـ Modules المضمنة في الـ Chunk. وبالتالي، يمكنك البحث في تبعيات كل module لتعلم ما هي الـ source files الأولية التي يتم تغذيتها في الـ Chunk ما.
+- `chunk.files`: مجموعة من أسماء ملفات الـ output التي تم إنشاؤها بواسطة الـ chunk. يمكنك الوصول إلى مصادر الـ asset هذه من الجدول `compilation.assets`.
 
 ### Monitoring the watch graph
 
-While running webpack middleware, each compilation includes a `fileDependencies` `Set` (what files are being watched) and a `fileTimestamps` `Map` that maps watched file paths to a timestamp. These are extremely useful for detecting what files have changed within the compilation:
+أثناء تشغيل برنامج وسيط Webpack، تتضمن كل عملية تجميع مجموعة `fileDependencies` (التي تحدد الملفات التي تتم مراقبتها) والـ `fileTimestamps` `Map` التي تربط مسارات الملفات التي تتم مراقبتها بالطابع الزمني. تُعد هذه المجموعات مفيدة للغاية لاكتشاف الملفات التي تغيرت أثناء عملية التجميع.
 
 ```js
 class MyPlugin {
@@ -86,21 +84,21 @@ class MyPlugin {
 export default MyPlugin;
 ```
 
-You may also feed new file paths into the watch graph to receive compilation triggers when those files change. Add valid file paths into the `compilation.fileDependencies` `Set` to add them to the watched files.
+يمكنك أيضًا إدخال مسارات ملفات جديدة في الـ watch graph لتلقي إشعارات التجميع عند تغيير هذه الملفات. أضف مسارات الملفات الصالحة إلى `compilation.fileDependencies` `Set` لإضافتها إلى الـ watched files.
 
-T> The `fileDependencies` `Set` is rebuilt in each compilation, so your plugin must add its own watched dependencies into each compilation to keep them under watch.
+T> يُعاد بناء الـ `Set` الخاص بـ `fileDependencies` في كل عملية `compilation`، لذلك يجب على الـ `plugin` الخاص بك إضافة الـ `watched dependencies` التابعة له في كل عملية `compilation` لضمان استمرار مراقبتها.
 
-W> Since webpack 5, `compilation.fileDependencies`, `compilation.contextDependencies` and `compilation.missingDependencies` are now a `Set` instead of a `Sortable Set` and thus no longer sorted.
+W> منذ إصدار webpack 5، أصبحت `compilation.fileDependencies` و `compilation.contextDependencies` و `compilation.missingDependencies` الآن **عبارة عن** `Set` بدلاً من `Sortable Set` وبالتالي لم تعد مرتبة.
 
 ## Changed chunks
 
-Similar to the watch graph, you can monitor changed chunks within a compilation by tracking their content hashes.
+على غرار الـ `watch graph`، يمكنك مراقبة الـ `chunks` المتغيرة داخل الـ `compilation` من خلال تتبع الـ `content hashes` الخاصة بها.
 
-W> `compilation.chunks` is a `Set`, not an array. Calling `.filter()` or `.map()` directly on it throws a `TypeError`.
-Use `for...of` or spread it into an array first.
+W> `compilation.chunks` عبارة عن `Set`، وليست `array`. استدعاء `.filter()` أو `.map()` عليها مباشرةً يُسبب خطأ من نوع `TypeError`.
+استخدم `for...of` أو استخدم الـ `spread operator` لتحويلها إلى `array` أولاً.
 
-W> `chunk.hash` is not defined on chunk objects. Use `chunk.contentHash.javascript` instead.
-Accessing `chunk.hash` returns `undefined`, causing every chunk to appear changed on every rebuild.
+W> الـ `chunk.hash` غير مُعرّف على الـ `chunk objects`. استخدم `chunk.contentHash.javascript` بدلاً منه.
+الوصول إلى `chunk.hash` يُرجع `undefined`، وهذا يجعل كل `chunk` يظهر وكأنه قد تغيّر في كل عملية `rebuild`.
 
 ```js
 class MyPlugin {
@@ -141,5 +139,5 @@ class MyPlugin {
 export default MyPlugin;
 ```
 
-T> Use `chunk.id ?? chunk.name` as the tracking key. Some chunks have an `id` but no `name`, so relying on `chunk.name` alone can miss changes.
-CSS or other non-JS chunks may not have a `javascript` key in `contentHash` — the `continue` guard skips those safely.
+T> استخدم `chunk.id ?? chunk.name` كمفتاح تتبع (tracking key). بعض الـ `chunks` تحتوي على `id` ولكن ليس لها `name`، لذا فإن الاعتماد على `chunk.name` وحده قد يؤدي إلى تفويت (عدم رصد) بعض التغييرات.
+الـ `chunks` الخاصة بـ CSS أو غيرها من الملفات التي لا تحتوي على جافاسكربت (non JS) قد لا تمتلك المفتاح `javascript` داخل `contentHash` وهنا يقوم شرط التخطي (`continue` guard) بتجاوزها بأمان.
diff --git a/src/content/contribute/release-process.mdx b/src/content/contribute/release-process.mdx
index 490a094c2351..c6cd2d329f96 100644
--- a/src/content/contribute/release-process.mdx
+++ b/src/content/contribute/release-process.mdx
@@ -2,17 +2,14 @@
 title: Release Process
 sort: 6
 contributors:
-  - d3viant0ne
-  - sokra
-  - byzyk
-  - chenxsan
+  - semon009
 ---
 
-The release process for deploying webpack is actually quite painless. Read through the following steps, so you have a clear understanding of how it's done.
+عملية نشر Webpack سهلة للغاية. اقرأ الخطوات التالية لتفهم كيفية القيام بذلك بوضوح.
 
 ## Pull Requests
 
-When merging pull requests into the `main` branch, select the _Create Merge Commit_ option.
+عند دمج طلبات السحب (pull requests) في الـ`main`، حدد خيار _Create Merge Commit_.
 
 ## Releasing
 
@@ -22,6 +19,6 @@ npm version minor && git push --follow-tags && npm publish
 npm version major && git push --follow-tags && npm publish
 ```
 
-_This will increment the package version, commits the changes, cuts a **local tag**, push to github & publish the npm package._
+_سيؤدي هذا إلى زيادة رقم إصدار الحزمة، وتثبيت التغييرات، وإنشاء **local tag**، ورفع التغييرات إلى GitHub، ونشر حزمة npm._
 
-After that go to the github [releases page](https://github.com/webpack/webpack/releases) and write a Changelog for the new tag.
+بعد ذلك اذهب إلى صفحة الإصدارات على GitHub (https://github.com/webpack/webpack/releases) واكتب سجل التغييرات للـtag الجديدة.
diff --git a/src/content/contribute/writers-guide.mdx b/src/content/contribute/writers-guide.mdx
index 04581943be3d..3b1cd6c18385 100644
--- a/src/content/contribute/writers-guide.mdx
+++ b/src/content/contribute/writers-guide.mdx
@@ -2,22 +2,20 @@
 title: Writer's Guide
 sort: 1
 contributors:
-  - pranshuchittora
-  - EugeneHlushko
-  - shivxmsharma
+  - semon009
 ---
 
-The following sections contain all you need to know about editing and formatting the content within this site. Make sure to do some research before starting your edits or additions. Sometimes the toughest part is finding where the content should live and determining whether or not it already exists.
+تتضمن الأقسام التالية كل ما تحتاجه حول تعديل (editing) وتنسيق (formatting) المحتوى في هذا الموقع. تأكد من البحث قليلاً قبل البدء بتعديلاتك أو إضافاتك. أحيانا أصعب جزء هو العثور على المكان الصحيح للمحتوى وتحديد ما إذا كان موجودا مسبقا أو لا
 
-## Process
+## الخطوات
 
-1. Check related issue if an article links to one.
-2. Hit `edit` and expand on the structure.
-3. PR changes.
+1. تحقق من الـ `issue` (المشكلة) المرتبطة إذا كان المقال يحتوي على رابط له.
+2. اضغط على `edit` (التعديل) وقم بالتوسع في الهيكلية (`structure`).
+3. افتح `PR` (Pull Request) بالتغييرات.
 
 ## YAML Frontmatter
 
-Each article contains a small section at the top written in [YAML Frontmatter](https://jekyllrb.com/docs/frontmatter/):
+يحتوي كل مقال على قسم صغير في الأعلى مكتوب بصيغة [YAML Frontmatter](https://jekyllrb.com/docs/frontmatter/):
 
 ```yaml
 ---
@@ -32,34 +30,34 @@ related:
 ---
 ```
 
-Let's break these down:
+لنقم بتحليل هذه النقاط:
 
-- `title`: The name of the article.
-- `group`: The name of the sub-section
-- `sort`: The order of the article within its section (or) sub-section if it is present.
-- `contributors`: A list of GitHub usernames who have contributed to this article.
-- `related`: Any related reading or useful examples.
+- `title`: اسم أو عنوان المقال.
+- `group`: اسم القسم الفرعي (sub-section).
+- `sort`: ترتيب المقال داخل القسم الرئيسي، أو داخل القسم الفرعي (في حال وجوده).
+- `contributors`: قائمة بأسماء مستخدمي GitHub (GitHub usernames) الذين ساهموا في هذا المقال.
+- `related`: أي قراءات ذات صلة أو أمثلة مفيدة.
 
-Note that `related` will generate a **Further Reading** section at the bottom of the page and `contributors` will yield a **Contributors** section below it. If you edit an article and would like recognition, don't hesitate to add your GitHub username to the `contributors` list.
+يرجى ملاحظة أن حقل `related` سيقوم بتوليد قسم **"قراءات إضافية" (Further Reading)** في أسفل الصفحة، بينما سيقوم حقل `contributors` بتوليد قسم **"المساهمون" (Contributors)** أسفله مباشرةً. إذا قمت بتعديل مقال وترغب في الحصول على تقدير لجهدك، فلا تتردد في إضافة اسم مستخدم GitHub الخاص بك إلى قائمة الـ `contributors`.
 
-## Article Structure
+## هيكلية المقال (Article Structure)
 
-1. Brief Introduction - a paragraph or two so you get the basic idea about the what and why.
-2. Outline Remaining Content – how the content will be presented.
-3. Main Content - tell what you promised to tell.
-4. Conclusion - tell what you told and recap the main points.
+1. مقدمة موجزة (Brief Introduction): - فقرة أو فقرتان تمنح القارئ فكرة أساسية عن "ماذا" و"لماذا".
+2. مخطط بقية المحتوى (Outline Remaining Content): - توضيح لكيفية عرض وتقديم المحتوى.
+3. المحتوى الرئيسي (Main Content): - تقديم الشرح والمعلومات التي وعدت بتقديمها.
+4. الخاتمة (Conclusion): - تلخيص ما تم شرحه وإعادة تذكير بأهم النقاط.
 
-## Typesetting
+## التنسيق والكتابة (Typesetting)
 
-- Webpack can be written with a capital W at the beginning of a sentence. ([source](https://github.com/webpack/media#name))
-- loaders are enclosed in backticks and [kebab-cased](https://en.wikipedia.org/w/index.php?title=Kebab_case): `css-loader`, `ts-loader`, …
-- plugins are enclosed in backticks and [camel-cased](https://en.wikipedia.org/wiki/Camel_case): `BannerPlugin`, `NpmInstallWebpackPlugin`, …
-- Use "webpack 2" to refer to a specific webpack version (~~"webpack v2"~~)
-- Use ES5; ES2015, ES2016, … to refer to the ECMAScript standards (~~ES6~~, ~~ES7~~)
+- يمكن كتابة كلمة Webpack بحرف W كبير (Capital) في بداية الجملة. ([source](https://github.com/webpack/media#name))
+- يتم وضع الـ loaders داخل علامات اقتباس مائلة (backticks) وتُكتب بأسلوب [kebab-cased](https://en.wikipedia.org/w/index.php?title=Kebab_case): `css-loader`, `ts-loader`, …
+- يتم وضع الـ plugins داخل علامات اقتباس مائلة (backticks) وتُكتب بأسلوب [camel-cased](https://en.wikipedia.org/wiki/Camel_case): `BannerPlugin`, `NpmInstallWebpackPlugin`, …
+- استخدم "webpack 2" للإشارة إلى إصدار معين من webpack (تجنب كتابتها هكذا: ~~"webpack v2"~~).
+- استخدم المصطلحات ES5 و ES2015 و ES2016... للإشارة إلى معايير ECMAScript تجنب استخدام (~~ES6~~, ~~ES7~~).
 
-## Formatting
+## التنسيق (Formatting)
 
-### Code
+### الكود (Code) :
 
 **Syntax: \`\`\`js … \`\`\`**
 
@@ -71,54 +69,54 @@ function foo() {
 foo();
 ```
 
-#### Quotation
+#### علامات الاقتباس (Quotation)
 
-Use single quotes in code snippets and project files (`.jsx`, `.scss` etc):
+استخدم علامات الاقتباس المفردة (single quotes) في قصاصات البرمجية (code snippets) وملفات المشروع (مثل `.jsx` و `.scss` وغيرها):
 
 ```diff
 - import webpack from "webpack";
 + import webpack from 'webpack';
 ```
 
-And in inline backticks:
+وكذلك داخل علامات الاقتباس المائلة المضمنة (inline backticks):
 
-**correct**
+**صحيح (correct)**
 
-Set value to `'index.md'`...
+اجعل القيمة `'index.md'`...
 
-**incorrect**
+**غير صحيح (incorrect)**
 
-Set value to `"index.md"`...
+اجعل القيمة `"index.md"`...
 
-### Lists
+### القوائم (Lists)
 
 - Boo
 - Foo
 - Zoo
 
-Lists should be ordered alphabetically.
+يجب أن يتم ترتيب القوائم أبجديا (alphabetically).
 
-### Tables
+### الجداول (Tables)
 
-| Parameter  | Explanation                                      | Input Type | Default Value |
-| ---------- | ------------------------------------------------ | ---------- | ------------- |
-| --debug    | Switch loaders to debug mode                     | boolean    | false         |
-| --devtool  | Define source map type for the bundled resources | string     | -             |
-| --progress | Print compilation progress in percentage         | boolean    | false         |
+| المعامل (Parameter)    | الشرح (Explanation)                                          | نوع الإدخال (Input Type) | القيمة الافتراضية(Default Value) |
+| ----------------------- | --------------------------------------------------------------- | --------------------- | --------------------------------- |
+| --debug                 | تحويل الـ loaders إلى وضع التصحيح (debug mode)                |  Boolean              |  false                            |
+| --devtool               | تحديد نوع الـ source map للموارد المجمعة (bundled resources)  |  string               |  -                                |
+| --progress              | طباعة تقدم عملية الـ compilation كنسبة مئوية                  |  boolean              |  false                            |
 
-Tables should also be ordered alphabetically.
+يجب أيضاً ترتيب الجداول أبجديا (alphabetically).
 
-### Configuration Properties
+### خصائص الإعدادات (Configuration Properties)
 
-The [configuration](/configuration) properties should be ordered alphabetically as well:
+يجب أيضا ترتيب خصائص الإعدادات ([configuration](/configuration)) أبجديا:
 
 - `devServer.compress`
 - `devServer.hot`
 - `devServer.static`
 
-### Quotes
+### الاقتباسات (Quotes)
 
-#### Blockquote
+#### الاقتباس المضمن (Blockquote)
 
 **Syntax: \>**
 
@@ -138,81 +136,81 @@ W> This is a warning.
 
 ?> This is a todo.
 
-### Assumptions and simplicity
+### الافتراضات والبساطة (Assumptions and simplicity)
 
-Do not make assumptions when writing the documentation.
+لا تضع افتراضات مسبقة عند كتابة التوثيق.
 
 ```diff
 - You might already know how to optimize bundle for production...
 + As we've learned in [production guide](/guides/production/)...
 ```
 
-Please do not assume things are simple. Avoid words like 'just', 'simply'.
+من فضلك لا تفترض أن الأمور بسيطة. تجنب استخدام كلمات مثل 'فقط' ,'ببساطة'.
 
 ```diff
 - Simply run command...
 + Run the `command-name` command...
 ```
 
-### Configuration defaults and types
+### قيم الإعدادات الافتراضية وأنواعها (Configuration defaults and types)
 
-Always provide types and defaults to all of the documentation options in order to keep the documentation accessible and well-written. We are adding types and defaults after entitling the documented option:
+احرص دائماً على توفير الأنواع (types) والقيم الافتراضية (defaults) لجميع خيارات التوثيق، وذلك للحفاظ على سهولة الوصول للتوثيق وجودة كتابته. نقوم بإضافة الأنواع والقيم الافتراضية مباشرة بعد عنوان الخيار الموثّق:
 
 **configuration.example.option**
 
 `string = 'none'`
 
-Where `= 'none'` means that the default value is `'none'` for the given option.
+حيث تعني `= 'none'` أن القيمة الافتراضية لهذا الخيار المحدد هي `'none'`.
 
 `string = 'none': 'none' | 'development' | 'production'`
 
-Where `: 'none' | 'development' | 'production'` enumerates the possible type values, in this case, three strings are acceptable: `'none'`, `'development'`, and `'production'`.
+حيث تقوم الصيغة `: 'none' | 'development' | 'production'` بسرد قيم الأنواع المحتملة، وفي هذه الحالة، هناك ثلاث سلاسل نصية (strings) مقبولة: `'none'` و `'development'` و `'production'`.
 
-Use space between types to list all available types for the given option:
+استخدم مسافة (space) بين الأنواع لسرد جميع الأنواع المتاحة للخيار المحدد:
 
 `string = 'none': 'none' | 'development' | 'production'` `boolean`
 
-To mark an array, use square brackets:
+لإيضاح وجود مصفوفة (array)، استخدم الأقواس المربعة (square brackets):
 
 `string` `[string]`
 
-If multiple types are allowed in `array`, use comma:
+إذا كانت المصفوفة (`array`) تسمح بأنواع متعددة، استخدم الفاصلة:
 
 `string` `[string, RegExp, function(arg) => string]`
 
-To mark a function, also list arguments when they are available:
+لإيضاح وجود دالة (function)، قم أيضاً بسرد الوسائط (arguments) عندما تكون متاحة:
 
 `function (compilation, module, path) => boolean`
 
-Where `(compilation, module, path)` lists the arguments that the provided function will receive and `=> boolean` means that the return value of the function must be a `boolean`.
+حيث تسرد الصيغة `(compilation, module, path)` الوسائط التي ستتلقاها الدالة الممررة، وتعني الصيغة `=> boolean` أن القيمة المرجعة (return value) من الدالة يجب أن تكون من نوع `boolean`.
 
-To mark a Plugin as an available option value type, use the camel case title of the `Plugin`:
+لتحديد الـ Plugin كنوع قيمة متاح للخيار، استخدم اسم الـ `Plugin` بأسلوب الـ camel case:
 
 `MinimizerPlugin` `[MinimizerPlugin]`
 
-Which means that the option expects one or few `MinimizerPlugin` instances.
+وهذا يعني أن الخيار يتوقع نسخة واحدة (instance) أو بضع نسخ من `MinimizerPlugin`.
 
-To mark a number, use `number`:
+لتحديد رقم، استخدم `number`:
 
 `number = 15: 5, 15, 30`
 
-To mark an object, use `object`:
+لتحديد (object) استخدم `object`:
 
 `object = { prop1 string = 'none': 'none' | 'development' | 'production', prop2 boolean = false, prop3 function (module) => string }`
 
-When object's key can have multiple types, use `|` to list them. Here is an example, where `prop1` can be both a string and an array of strings:
+عندما يمكن لمفتاح الكائن (object's key) أن يقبل أنواعاً متعددة، استخدم الرمز `|` لسردها. إليك مثالاً يمكن أن تكون فيه الخاصية `prop1` عبارة عن سلسلة نصية (string) ومصفوفة من السلاسل النصية (array of strings) في آن واحد:
 
 `object = { prop1 string = 'none': 'none' | 'development' | 'production' | [string]}`
 
-This allows us to display the defaults, enumeration and other information.
+يسمح لنا هذا الأسلوب بعرض القيم الافتراضية والتعداد (enumeration) وغيرها من المعلومات.
 
-When an option has different defaults depending on the [`mode`](/configuration/mode/), use a defaults table instead of the inline `= value` syntax:
+عندما يمتلك خيار معين قيمًا افتراضية مختلفة بناءً على نمط التشغيل ([`mode`](/configuration/mode/))، استخدم جدول القيم الافتراضية بدلاً من كتابة الصيغة المضمنة `= value`:
 
 **configuration.example.option**
 
 `string: 'natural' | 'named' | 'deterministic'`
 
-The default value of `configuration.example.option` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `configuration.example.option` على نمط التشغيل ([`mode`](/configuration/mode/)):
 
 | Mode            | Default           |
 | --------------- | ----------------- |
@@ -220,13 +218,13 @@ The default value of `configuration.example.option` depends on the [`mode`](/con
 | `"development"` | `'named'`         |
 | `"none"`        | `'natural'`       |
 
-If an option has a boolean default that varies by mode:
+إذا كان الخيار يحتوي على قيمة افتراضية من نوع بولين (`boolean`) تختلف بناء على نمط التشغيل (mode):
 
 **configuration.example.flag**
 
 `boolean`
 
-The default value of `configuration.example.flag` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `configuration.example.flag` على نمط التشغيل ([`mode`](/configuration/mode/)):
 
 | Mode            | Default |
 | --------------- | ------- |
@@ -234,21 +232,21 @@ The default value of `configuration.example.flag` depends on the [`mode`](/confi
 | `"development"` | `false` |
 | `"none"`        | `false` |
 
-If the object's key is dynamic, user-defined, use `<key>` to describe it:
+إذا كان الـ (object's key) ديناميكيا ومحددا من قبل المستخدم (user-defined)، استخدم `<key>` لوصفه:
 
 `object = { <key> string }`
 
-### Options shortlists and their typing
+### القوائم المختصرة للخيارات وأنواعها (Options shortlists and their typing)
 
-Sometimes, we want to describe certain properties of objects and functions in lists. When applicable add typing directly to the list where properties are enlisted:
+في بعض الأحيان نرغب في وصف خصائص معينة للكائنات (objects) والدوال (functions) داخل قوائم عند انطباق ذلك، قم بإضافة النوع (typing) مباشرة إلى القائمة التي تسرد فيها هذه الخصائص:
 
-- `madeUp` (`boolean = true`): short description
-- `shortText` (`string = 'i am text'`): another short description
+- `madeUp` (`boolean = true`): وصف مختصر
+- `shortText` (`string = 'i am text'`): وصف مختصر آخر
 
-W> `:` is not a necessity here, note the property, type and default.
+W> `:` ليس ضروريا هنا انتبه للخاصية (property) والنوع (type) والقيمة الافتراضية (default).
 
-An example can be found on the [`options` section of the EvalSourceMapDevToolPlugin's page](/plugins/eval-source-map-dev-tool-plugin/#options).
+يمكنك العثور على مثال في [قسم الخيارات (`options` section) في صفحة EvalSourceMapDevToolPlugin](/plugins/eval-source-map-dev-tool-plugin/#options).
 
-### Adding links
+### إضافة الروابط (Adding links)
 
-Please use relative URLs (such as `/concepts/mode/`) to link our own content instead of absolute URLs (such as `https://webpack.js.org/concepts/mode/`).
+يرجى استخدام روابط URL نسبية (مثل `/concepts/mode/`) لربط المحتوى الخاص بنا بدلا من استخدام روابط URL مطلقة (مثل `https://webpack.js.org/concepts/mode/`).

From c87160f1b7958741758d51dd35f47705e048d557 Mon Sep 17 00:00:00 2001
From: MohaDev-69 <windysity869@gmail.com>
Date: Mon, 25 May 2026 09:50:05 +0300
Subject: [PATCH 21/35] docs: ar translation for plugins

---
 .../plugins/automatic-prefetch-plugin.mdx     |  9 ++--
 src/content/plugins/banner-plugin.mdx         | 41 +++++++++----------
 .../plugins/context-exclusion-plugin.mdx      |  9 ++--
 src/content/plugins/provide-plugin.mdx        | 40 +++++++++---------
 src/content/plugins/virtual-url-plugin.mdx    | 37 ++++++++---------
 src/content/plugins/watch-ignore-plugin.mdx   | 15 +++----
 6 files changed, 69 insertions(+), 82 deletions(-)

diff --git a/src/content/plugins/automatic-prefetch-plugin.mdx b/src/content/plugins/automatic-prefetch-plugin.mdx
index 5a155150406d..463527acc898 100644
--- a/src/content/plugins/automatic-prefetch-plugin.mdx
+++ b/src/content/plugins/automatic-prefetch-plugin.mdx
@@ -1,14 +1,13 @@
 ---
-title: AutomaticPrefetchPlugin
+title: إضافة إعادة التحميل التلقائي
 group: webpack
 contributors:
-  - sokra
-  - EugeneHlushko
+  - MohaDev-69
 ---
+`AutomaticPrefetchPlugin` تستكشف جميع المودلات من التجميعة مسبقاً بينما تنتظر التغييرات ، في محاولة تحسين اوقات البناء كونها في ارتفاع مستمر. مقارنةً ب[`PrefetchPlugin`](/plugins/prefetch-plugin/)  التي تستكشف مودل واحد مسبقاً
 
-The `AutomaticPrefetchPlugin` discovers **all modules** from the previous compilation upfront while watching for changes, trying to improve the incremental build times. Compared to [`PrefetchPlugin`](/plugins/prefetch-plugin/) which discovers a **single module** upfront.
 
-W> May or may not have a performance benefit since the incremental build times are pretty fast.
+ملاحظة> من غير المتوقع ان يكون لها فائدة فعلية بالنسبة للاداء كون اوقات البناء التدريجية سريعه.
 
 **webpack.config.js**
 
diff --git a/src/content/plugins/banner-plugin.mdx b/src/content/plugins/banner-plugin.mdx
index 74dd958e2148..095d20d976a2 100644
--- a/src/content/plugins/banner-plugin.mdx
+++ b/src/content/plugins/banner-plugin.mdx
@@ -1,23 +1,19 @@
 ---
-title: BannerPlugin
+title: اضافة البنر
 group: webpack
 contributors:
-  - simon04
-  - byzyk
-  - chenxsan
-  - snitin315
+  - MohaDev-69
 related:
   - title: banner-plugin-hashing test
     url: https://github.com/webpack/webpack/blob/main/test/configCases/plugins/banner-plugin-hashing/webpack.config.js
 ---
-
-Adds a banner to the top of each generated chunk.
+يضيف بنر  اعلى كل جزء تم توليده
 
 ```js
 import webpack from "webpack";
 
 new webpack.BannerPlugin(banner);
-// or
+// او
 new webpack.BannerPlugin(options);
 ```
 
@@ -25,14 +21,14 @@ new webpack.BannerPlugin(options);
 
 ```ts
 {
-  banner: string | function, // the banner as string or function, it will be wrapped in a comment
-  raw: boolean, // if true, banner will not be wrapped in a comment
-  entryOnly: boolean, // if true, the banner will only be added to the entry chunks
-  test: string | RegExp | [string, RegExp], // Include all modules that pass test assertion.
-  include: string | RegExp | [string, RegExp], // Include all modules matching any of these conditions.
-  exclude: string | RegExp | [string, RegExp], // Exclude all modules matching any of these conditions.
-  footer?: boolean, // if true, the banner will be placed at the end of the compilation
-  stage?: number, // the stage of the compilation in which the banner should be injected
+  banner: string | function, // البنر ك سترنق او دالة ، ستكون داخل تعليق
+  raw: boolean, // اذا كانت صحيحة ، البنر لن يكون داخل تعليق
+  entryOnly: boolean, // اذا كانت صحيحة ، سيكون البنر مُضاف الى اجزاء الادخال فقط
+  test: string | RegExp | [string, RegExp], // يتضمن جميع المودلات الذي نجحت في اختبار التأكيد
+  include: string | RegExp | [string, RegExp], // يتضمن جميع المودلات التي تطابق أي من هذه الحالات
+  exclude: string | RegExp | [string, RegExp], // استثناء جميع المولات التي تطابق أي من هذه الحالات
+  footer?: boolean, // اذا كانت صحيحة، سوف يتم وضع البنر في نهاية التجميعة
+  stage?: number, // المرحلة التي يجب فيها اضافة البنر اثناء عملية التجميع
 }
 ```
 
@@ -41,27 +37,28 @@ new webpack.BannerPlugin(options);
 ```js
 import webpack from "webpack";
 
-// string
+// سترنق
 new webpack.BannerPlugin({
   banner: "hello world",
 });
 
-// function
+// دالة
 new webpack.BannerPlugin({
   banner: (yourVariable) => `yourVariable: ${yourVariable}`,
 });
 
-// It will add the banner message after minimizers and any asset manipulation
+// سيتم اضافه رسالة البنر بعد التصغير واي تعديلات على الأصل
+It will add the banner message after minimizers and any asset manipulation
 new webpack.BannerPlugin({
   raw: true,
-  banner: "/* banner is a string */",
+  banner: "/* البنر عبارة عن سترنق */",
   stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
 });
 ```
 
-## Placeholders
+## المواضع
 
-Since webpack 2.5.0, placeholders are evaluated in the `banner` string:
+منذ webpack 2.5.0, يتم تقييم المواضع في سترنق `banner` 
 
 ```js
 import webpack from "webpack";
diff --git a/src/content/plugins/context-exclusion-plugin.mdx b/src/content/plugins/context-exclusion-plugin.mdx
index 673bb50cf61c..f3e20a20e1fc 100644
--- a/src/content/plugins/context-exclusion-plugin.mdx
+++ b/src/content/plugins/context-exclusion-plugin.mdx
@@ -1,13 +1,12 @@
 ---
-title: ContextExclusionPlugin
+title: إضافه سياق الإستثناء
 group: webpack
 contributors:
-  - jeffin
+  - MohaDev-69
 ---
 
-_Context_ refers to [dynamic expressions in import() or require()](/guides/dependency-management/#dynamic-expressions-in-import-or-require) such as `require('./locale/' + name + '.json')`.
-
-The `ContextExclusionPlugin` allows you to exclude context. Provide RegExp as an argument when initializing the Plugin to exclude all context that matches it.
+_السياق_ يشير الى [التعبيرات المنطقية الديناميكية في import() او require()](/guides/dependency-management/#dynamic-expressions-in-import-or-require) مثل `require('./locale/' + الاسم + '.json')`.
+`ContextExclusionPlugin`: تسمح لك بإستبعاد السياق، ارفق تعبيرات نمطية  كـسبب عند تشغيل الإضافه لتستبعد كل السياق الذي يطابقها
 
 **webpack.config.js**
 
diff --git a/src/content/plugins/provide-plugin.mdx b/src/content/plugins/provide-plugin.mdx
index 7e256d9e1864..6b155d92ccf1 100644
--- a/src/content/plugins/provide-plugin.mdx
+++ b/src/content/plugins/provide-plugin.mdx
@@ -1,15 +1,11 @@
 ---
-title: ProvidePlugin
+title: إضافة الإعطاء
 group: webpack
 contributors:
-  - sokra
-  - simon04
-  - re-fort
-  - byzyk
-  - seckin92
+  - MohaDev-69
 ---
 
-Automatically load modules instead of having to `import` or `require` them everywhere.
+تحميل المودلات تلقائياً بدلاً من استدعائهم ب `import` أو `require` في كل مكان.
 
 ```js
 new webpack.ProvidePlugin({
@@ -27,9 +23,9 @@ new webpack.ProvidePlugin({
 });
 ```
 
-By default, module resolution path is current folder (`./**)` and `node_modules`.
+بشكل افتراضي ، يكون مسار الوحدات في المجلد الحالي هو  (`./**)` و `node_modules`.
 
-It is also possible to specify full path:
+ايضاً بالأمكان تحديد مسار كامل:
 
 ```js
 import path from "node:path";
@@ -44,13 +40,14 @@ new webpack.ProvidePlugin({
 });
 ```
 
-Whenever the `identifier` is encountered as free variable in a module, the `module` is loaded automatically and the `identifier` is filled with the exports of the loaded `module` (or `property` in order to support named exports).
+عندما يتم مصادفه ال `معرف (identifier)` كمتغير حر في المودل، يتم تحميل `المودل` تلقائياً وال  `معرف (identifier)` يكون مملوء بصادرات المودل المحمل (او `الممتلكة` لدعم الصادرات المسماة) 
 
 For importing the default export of an ES2015 module, you have to specify the default property of module.
+لإستيراد الصادرات الافتراضية لمودل ES2015، يجب عليك ان تحدد الممتلكة الافتراضية للمودل
 
-## Usage: jQuery
+## الاستعمال : jQuery
 
-To automatically load `jquery` we can point both variables it exposes to the corresponding node module:
+لتحميل `jquery` بشكل تلقائي يمكننا توجيه كلا المتغيريين اللذين يعرضمها الى مودل node الحالي:
 
 ```js
 new webpack.ProvidePlugin({
@@ -59,18 +56,19 @@ new webpack.ProvidePlugin({
 });
 ```
 
-Then in any of our source code:
+ثم في اي مكان لدينا في الكود المصدري:
 
 ```js
-// in a module
-$("#item"); // <= works
-jQuery("#item"); // <= also works
-// $ is automatically set to the exports of module "jquery"
+// داخل المودل
+$("#item"); // <= يعمل
+jQuery("#item"); // <= ايضاً يعمل
+// $ يتم وضعها تلقائياً لصادرات المودل "jquery"
 ```
 
-## Usage: jQuery with Angular 1
+## الاستعمال: jQuery مع Angular 1
 
-Angular looks for `window.jQuery` in order to determine whether jQuery is present, see the [source code](https://github.com/angular/angular.js/blob/v1.5.9/src/Angular.js#L1821-L1823).
+Angular تبحث عن  `window.jQuery` ليمكنها تحديد ما اذا كانت Jquery موجودة
+إطلع على [الكود المصدري](https://github.com/angular/angular.js/blob/v1.5.9/src/Angular.js#L1821-L1823).
 
 ```js
 new webpack.ProvidePlugin({
@@ -78,7 +76,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-## Usage: Lodash Map
+## الاستعمال: Lodash Map
 
 ```js
 new webpack.ProvidePlugin({
@@ -86,7 +84,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-### Usage: Vue.js
+### الاستعمال: Vue.js
 
 ```js
 new webpack.ProvidePlugin({
diff --git a/src/content/plugins/virtual-url-plugin.mdx b/src/content/plugins/virtual-url-plugin.mdx
index 2a16e87626cb..f527da1140df 100644
--- a/src/content/plugins/virtual-url-plugin.mdx
+++ b/src/content/plugins/virtual-url-plugin.mdx
@@ -1,11 +1,11 @@
 ---
-title: VirtualUrlPlugin
+title: إضافه الرابط الافتراضي
 group: webpack
 contributors:
-  - xiaoxiaojx
+  - MohaDev-69
 ---
 
-Allow creating virtual modules of any type, such as `.ts`, `.json`, `.css`, etc. default is `.js`.
+يسمح بإنشاء مودلات افتراضية من اي نوع، على سبيل المثال:  `.ts`, `.json`, `.css` ، الافتراضي هو `js.`
 
 <Badge text="5.100.0+" />
 
@@ -13,7 +13,7 @@ Allow creating virtual modules of any type, such as `.ts`, `.json`, `.css`, etc.
 import webpack from "webpack";
 
 new webpack.experiments.schemes.VirtualUrlPlugin({
-  myModule: 'export const msg = "from virtual module"',
+  myModule: 'export const msg = "من مودل افتراضي"',
 });
 ```
 
@@ -25,9 +25,8 @@ import { msg } from "virtual:myModule";
 console.log(msg);
 ```
 
-## Basic Example
-
-Create a virtual module that generates build information
+## مثال مبدئي
+انشاء مودل افتراضي يقوم بإعطاء معلومات البناء (build)
 
 ```js
 import webpack from "webpack";
@@ -50,7 +49,7 @@ import { buildTime } from "virtual:buildInfo";
 console.log(`App version: ${buildTime}`);
 ```
 
-Use custom schema
+استعمال مخطط خاص
 
 ```js
 import webpack from "webpack";
@@ -71,9 +70,8 @@ import { msg } from "v:myModule";
 console.log(msg);
 ```
 
-## Advanced Example
-
-Create multiple virtual modules of different types
+## مثال متطور
+انشاء عدة مودلات افتراضية بمختلف الانواع
 
 ```js
 import webpack from "webpack";
@@ -97,7 +95,7 @@ import json from "virtual:myJsonModule";
 import "virtual:myCssModule";
 ```
 
-Virtualize the routing file
+محاكاة ملف التوجيه (routing)
 
 ```js
 import path from "node:path";
@@ -112,7 +110,7 @@ const watchDir = path.join(__dirname, "./src/routes");
 new webpack.experiments.schemes.VirtualUrlPlugin({
   routes: {
     source(loaderContext) {
-      // Use addContextDependency to monitor the addition or removal of subdirectories in watchDir to trigger the rebuilding of virtual modules.
+      // استعمل addContextDependency لمشاهدة الاضافات او الحذوفات من المحلدات الفرعية في watchDir لتحفيز إعادة بناء المودل الافتراضي
       loaderContext.addContextDependency(watchDir);
 
       const files = fs.readdirSync(watchDir);
@@ -132,14 +130,13 @@ new webpack.experiments.schemes.VirtualUrlPlugin({
 import { routes } from "virtual:routes";
 ```
 
-## Options
-
-- `module.type` (`string`): Content type of the virtual module.
+## الخيارات
 
-T> Make sure that these types have a loader set via [module.rules](https://webpack.js.org/configuration/module/#modulerules).
+- `module.type` (`string`): نوع محتوى المودل الافتراضي
 
-- `module.source` (`string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | string))`: Factory function for generating the content of virtual module.
+ملاحظة> تأكد ان هذه الانواع لديها مُحمِل خاص بها عن طريق [module.rules](https://webpack.js.org/configuration/module/#modulerules)
 
-- `module.version`(`boolean | string | () => string`): When a invalidate is triggered, the source function is called again if the value of the version is different from the previous one. If set to true it will always trigger.
+- `module.source` (`string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | string))`: دالة المصنع لتوليد محتوى المودل الافتراضي
 
-- `schema` (`string`): Customizable virtual module schema, default is `virtual`.
+- `module.version`(`boolean | string | () => string`): عند حدوث عملية إبطال ، يتم استدعاء مصدر الدالة مرةً أخرى إذا كانت قيمة الاصدار مختلفة عن القيمه السابقه، تفعيلها سيؤدي الى تحفيزه دائماً
+- `schema` (`string`): مودل افتراضي قابل للتخصيص ، الاعتيادي هو `virtual`
diff --git a/src/content/plugins/watch-ignore-plugin.mdx b/src/content/plugins/watch-ignore-plugin.mdx
index 7b83f6605805..7333a7e2b1ae 100644
--- a/src/content/plugins/watch-ignore-plugin.mdx
+++ b/src/content/plugins/watch-ignore-plugin.mdx
@@ -1,20 +1,17 @@
 ---
-title: WatchIgnorePlugin
+title: إضافة تجاهل المشاهدة
 group: webpack
 contributors:
-  - skipjack
-  - byzyk
-  - EugeneHlushko
+  - MohaDev-69
 ---
-
-Ignore the specified files, i.e. those matching the provided paths or regular expressions, while in [watch mode](/configuration/watch).
+يقوم بتجاهل ملفات محددة، على سبيل المثال هؤلاء الذين يطابقون المسار المُرفق  او تعبير نمطي معين، عندما يكونون في [وضع المشاهدة](/configuration/watch).
 
 ```js
 new webpack.WatchIgnorePlugin({ paths });
 ```
 
-## Options
+## الخيارات
 
-- `paths` (`Array<string | RegExp>`): A list of RegExps or absolute paths to directories or files that should be ignored.
+- `paths` (`Array<string | RegExp>`): - قائمة من التعبيرات النمطية او مسارات حتمية الى مجلدات او ملفات التي يُفترض ان يتم تجاهلها
 
-W> This plugin is deprecated in favor of [watchOptions.ignored](/configuration/watch/#watchoptionsignored) option.
+ملاحظة> تم ايقاف هذه الاضافه واستبدالها بخيار  [watchOptions.ignored](/configuration/watch/#watchoptionsignored)

From 556ccb1fc81ddedb6e74754a443b84ba3e768c17 Mon Sep 17 00:00:00 2001
From: MohaDev-69 <windysity869@gmail.com>
Date: Mon, 25 May 2026 11:29:44 +0300
Subject: [PATCH 22/35] feat: add plugin documentations

---
 src/content/plugins/NoEmitOnErrorsPlugin.mdx  |  9 ++----
 .../plugins/merge-duplicate-chunks-plugin.mdx | 15 +++++-----
 src/content/plugins/min-chunk-size-plugin.mdx | 14 ++++-----
 src/content/plugins/prefetch-plugin.mdx       | 14 ++++-----
 src/content/plugins/profiling-plugin.mdx      | 29 +++++++++----------
 5 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/src/content/plugins/NoEmitOnErrorsPlugin.mdx b/src/content/plugins/NoEmitOnErrorsPlugin.mdx
index d284d089f638..78a38721caaa 100644
--- a/src/content/plugins/NoEmitOnErrorsPlugin.mdx
+++ b/src/content/plugins/NoEmitOnErrorsPlugin.mdx
@@ -1,14 +1,11 @@
 ---
-title: NoEmitOnErrorsPlugin
+title: إضافة منع الاصدار عند وجود الاخطاء
 group: webpack
 contributors:
-  - jeffin
-  - chenxsan
-  - snitin315
+  - MohaDev-69
 ---
 
-The `NoEmitOnErrorsPlugin` allows you to avoid emitting assets when there are any errors. Enabled by default, you can disable using [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors)
-
+`NoEmitOnErrorsPlugin`: تسمح لك بتفادي اضافة الأصول عندما يكون هناك اي أخطاء. مفعلة افتراضياً، يمكنك تعطيلها بأستخدام [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors)
 **webpack.config.js**
 
 ```js
diff --git a/src/content/plugins/merge-duplicate-chunks-plugin.mdx b/src/content/plugins/merge-duplicate-chunks-plugin.mdx
index df46f0f6c9ab..b30af7c6043f 100644
--- a/src/content/plugins/merge-duplicate-chunks-plugin.mdx
+++ b/src/content/plugins/merge-duplicate-chunks-plugin.mdx
@@ -1,11 +1,10 @@
 ---
-title: MergeDuplicateChunksPlugin
+title: إضافة دمج الاجزاء المتكررة
 group: webpack
 contributors:
-  - shivxmsharma
+  - MohaDev-69
 ---
-
-Merges chunks that contain the same modules. This plugin is enabled by default as part of webpack's internal optimizations. Exporting it publicly allows developers to configure the `stage` at which merging occurs — useful when chunk merging needs to run after [`SplitChunksPlugin`](/plugins/split-chunks-plugin).
+دمج الاجزاء التي تحتوي على نفس المودلات، هذه الإضافه مفعلة افتراضياً وهي جزء من تحسينات webpack الداخلية. استخراجها علناً يسمح للمطورين بالتحكم بالـ`مرحلة (stage)` عند ماذا يحصل الدمج — مفيدة عندما تدمج الاجزاء المطلوبة للتشغيل بعد [`إضافة تقسيم الاجزاء`](/plugins/split-chunks-plugin)
 
 ```js
 new webpack.optimize.MergeDuplicateChunksPlugin({
@@ -13,13 +12,13 @@ new webpack.optimize.MergeDuplicateChunksPlugin({
 });
 ```
 
-## Options
+## الخيارات
 
 ### stage
 
-`number`
+`رقم`
 
-Controls the optimization stage at which duplicate chunk merging runs. By default, merging occurs before `SplitChunksPlugin`. Setting a higher `stage` value causes merging to run _after_ other optimizations such as `SplitChunksPlugin`.
+يتحكم بتحسين المرحلة، عند أي مرحلة يتم تشغيل هذه الإضافة، إفتراضياً, يحصل الدمج قبل `إضافه تقسيم الاجزاء`. وضع رقم اعلى للـ`مرحلة (stage)` يجعل الدمج يعمل بعد تحسينات اخرى مثل  `إضافه تقسيم الاجزاء`
 
 **webpack.config.js**
 
@@ -30,7 +29,7 @@ export default {
   // ...
   plugins: [
     new webpack.optimize.MergeDuplicateChunksPlugin({
-      stage: 10, // run after SplitChunksPlugin
+      stage: 10, // يعمل بعد اضافة تقسيم الاجزاء
     }),
   ],
 };
diff --git a/src/content/plugins/min-chunk-size-plugin.mdx b/src/content/plugins/min-chunk-size-plugin.mdx
index 85f0da53fa4a..be76474e2c41 100644
--- a/src/content/plugins/min-chunk-size-plugin.mdx
+++ b/src/content/plugins/min-chunk-size-plugin.mdx
@@ -1,22 +1,20 @@
 ---
-title: MinChunkSizePlugin
+title: إضافة الحد الأدنى للاجزاء
 group: webpack
 contributors:
-  - byzyk
-  - erykpiast
+  - MohaDev-69
 ---
-
-Keep chunk size above the specified limit by merging chunks that are smaller than the `minChunkSize`.
+ابقاء حجم الاجزاء فوق الحد المعين عن طريق دمج الاجزاء التي تكون اصغر من `minChunkSize`.
 
 ```js
 new webpack.optimize.MinChunkSizePlugin({
-  minChunkSize: 10000, // Minimum number of characters
+  minChunkSize: 10000, // اقل عدد من الحروف
 });
 ```
 
-## Usage via CLI
+## الأستعمال عن طريق واجهة الاوامر (CLI)
 
-This plugin and it's options can also be invoked via the [CLI](/api/cli/):
+هذه الاضافه واعداداتها يمكن التحكم فيها وادارتها عن طريق واجهة الأوامر  [CLI](/api/cli/):
 
 ```bash
 webpack --optimize-min-chunk-size 10000
diff --git a/src/content/plugins/prefetch-plugin.mdx b/src/content/plugins/prefetch-plugin.mdx
index bee95ea20b52..2a2560627ecf 100644
--- a/src/content/plugins/prefetch-plugin.mdx
+++ b/src/content/plugins/prefetch-plugin.mdx
@@ -1,12 +1,10 @@
 ---
-title: PrefetchPlugin
+title: إضافة الجلب المسبق
 group: webpack
 contributors:
-  - skipjack
-  - byzyk
+  - MohaDev-69
 ---
-
-Prefetch normal module requests, causing them to be resolved and built before the first `import` or `require` of that module occurs. Using this plugin can boost performance. Try to profile the build first to determine clever prefetching points.
+جلب مسبق اعتيادي لطلبات المودل، مما يؤدي الى حلها وبنائها قبل حدوث اول عملية `import` او  `require` لتلك المودل، استخدام هذه الإضافه يمكن ان يسرع الاداء. حاول تحليل البنية اولاً لتحديد نقاط الجلب المسبق الذكية
 
 ```js
 import webpack from "webpack";
@@ -14,7 +12,7 @@ import webpack from "webpack";
 new webpack.PrefetchPlugin([context], request);
 ```
 
-## Options
+## الخيارات
 
-- `context`: An absolute path to a directory
-- `request`: A request string for a normal module
+- `context`: مسار حتمي لمجلد
+- `request`: طلب من مودل عادية
diff --git a/src/content/plugins/profiling-plugin.mdx b/src/content/plugins/profiling-plugin.mdx
index 376389b7ad60..22e30bdf7d99 100644
--- a/src/content/plugins/profiling-plugin.mdx
+++ b/src/content/plugins/profiling-plugin.mdx
@@ -1,27 +1,25 @@
 ---
-title: ProfilingPlugin
+title: إضافة البروفايلات
 group: webpack
 contributors:
-  - EugeneHlushko
-  - byzyk
-  - akgupta0777
+  - MohaDev-69
 ---
 
-Generate Chrome profile file which includes timings of plugins execution. Outputs `events.json` file by default. It is possible to provide custom file path using `outputPath` option.
+انشاء ملف كروم يحتوي اوقات تنفيذ الإضافات، يُخرج ملف `events.json` إفتراضياً. من الممكن اضافة ملف مخصص بإستعمال خيار `outputPath`
 
-> Note : ProfilingPlugin accepts only absolute paths.
+> ملاحظة: إضافة البروفايلات تقبل فقط مسارات حتمية
 
-## Options
+## الخيارات
 
-- `outputPath`: An absolute path to a custom output file (json)
+- `outputPath`: مسار حتمي لملف مخصص بصيغة (json)
 
-## Usage: default
+## الاستعمال: إفتراضياً
 
 ```js
 new webpack.debug.ProfilingPlugin();
 ```
 
-## Usage: custom `outputPath`
+## الاستعمال: مخصص `outputPath`
 
 ```js
 import path from "node:path";
@@ -35,10 +33,11 @@ new webpack.debug.ProfilingPlugin({
 });
 ```
 
-In order to view the profile file:
+لعرض ملف البروفايل:
 
-1. Run webpack with `ProfilingPlugin`.
-2. Go to Chrome, open DevTools, and go to the `Performance` tab (formerly `Timeline`).
-3. Drag and drop generated file (`events.json` by default) into the profiler.
+1. شغل webpack مع `ProfilingPlugin`.
+2. افتح متصفح كروم، افتح ادوات المطور، اذهب الى نافذة `الأداء (Performance)` سابقاً (`Timeline`)
+3. اسحب وافلت الملف المولّد  (`events.json`افتراضياً) في ال profiler.
+
+   سيعرض الجدول الزمني الاحصائيات والاستدعاءات لكل اضافة!
 
-It will then display timeline stats and calls per plugin!

From cf4622823f13c2127a4e05002c9ccc0d98fdbcdf Mon Sep 17 00:00:00 2001
From: MohaDev-69 <windysity869@gmail.com>
Date: Mon, 25 May 2026 14:45:16 +0300
Subject: [PATCH 23/35] feat: add documentation for plugins

---
 src/content/plugins/banner-plugin.mdx         |  4 +--
 .../plugins/hot-module-replacement-plugin.mdx | 17 +++++------
 .../plugins/limit-chunk-count-plugin.mdx      | 29 ++++++++-----------
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/content/plugins/banner-plugin.mdx b/src/content/plugins/banner-plugin.mdx
index 095d20d976a2..005ce2292225 100644
--- a/src/content/plugins/banner-plugin.mdx
+++ b/src/content/plugins/banner-plugin.mdx
@@ -17,7 +17,7 @@ new webpack.BannerPlugin(banner);
 new webpack.BannerPlugin(options);
 ```
 
-## Options
+## الخيارات
 
 ```ts
 {
@@ -32,7 +32,7 @@ new webpack.BannerPlugin(options);
 }
 ```
 
-## Usage
+## الاستعمال
 
 ```js
 import webpack from "webpack";
diff --git a/src/content/plugins/hot-module-replacement-plugin.mdx b/src/content/plugins/hot-module-replacement-plugin.mdx
index 500dd52ba9d2..849fdd079fec 100644
--- a/src/content/plugins/hot-module-replacement-plugin.mdx
+++ b/src/content/plugins/hot-module-replacement-plugin.mdx
@@ -1,11 +1,8 @@
 ---
-title: HotModuleReplacementPlugin
+title: إضافة تبديل المودل اللحظي
 group: webpack
 contributors:
-  - skipjack
-  - byzyk
-  - chenxsan
-  - snitin315
+  - MohaDev-69
 related:
   - title: Concepts - Hot Module Replacement
     url: /concepts/hot-module-replacement
@@ -13,16 +10,16 @@ related:
     url: /api/hot-module-replacement
 ---
 
-Enables [Hot Module Replacement](/concepts/hot-module-replacement), otherwise known as HMR.
+يُفعل [تبديل المودل اللحظي](/concepts/hot-module-replacement) كما هو معروف ب HMR
 
-W> HMR should **never** be used in production.
+ملاحظة> لا يُنصح بإستخدامه **على الاطلاق** في الإنتاج
 
-## Basic Usage
+## الاستعمال المبدئي
 
-Enabling HMR is straightforward and in most cases no options are necessary.
+تفعيل HMR هو شيء مباشر وفي معظم الحالات لا يتطلب اي خيارات اضافية
 
 ```js
 new webpack.HotModuleReplacementPlugin({
-  // Options...
+  // خيارات...
 });
 ```
diff --git a/src/content/plugins/limit-chunk-count-plugin.mdx b/src/content/plugins/limit-chunk-count-plugin.mdx
index 6e91f3e280d0..f31d4f0850e4 100644
--- a/src/content/plugins/limit-chunk-count-plugin.mdx
+++ b/src/content/plugins/limit-chunk-count-plugin.mdx
@@ -1,32 +1,27 @@
 ---
-title: LimitChunkCountPlugin
+title: إضافة تحديد عدد الاجزاء
 group: webpack
 contributors:
-  - rouzbeh84
-  - skipjack
-  - tbroadley
-  - byzyk
-  - EugeneHlushko
-  - erykpiast
+  - MohaDev-69
 ---
-
-While writing your code, you may have already added many code split points to load stuff on demand. After compiling you might notice that some chunks are too small - creating larger HTTP overhead. `LimitChunkCountPlugin` can post-process your chunks by merging them.
+عندما تقوم بكتابة الكود، من المحتمل ان تكون بالفعل اضفت الكثير من نقاط الافتراق لتحميل اشياء حسب الحاجة. بعد جمع الكود (compile) ستلاحظ ان بعض الاجزاء صغيرة للغاية - مما ينشئ طلبات HTTP اكبر. 
+`LimitChunkCountPlugin` يمكنه معالجة الطلبات بشكل مسبق عن طريق دمج الاجزاء معاً
 
 ```js
 new webpack.optimize.LimitChunkCountPlugin({
-  // Options...
+  // خيارات...
 });
 ```
 
-## Options
+## الخيارات
 
-The following options are supported:
+الخيارات ادناه هي المدعومة:
 
 ### maxChunks
 
-`number`
+`رقم`
 
-Limit the maximum number of chunks using a value greater than or equal to `1`. Using `1` will prevent any additional chunks from being added as the entry/main chunk is also included in the count.
+تحديد عدد اقصى من الاجزاء بأستعمال قيمة اكبر او تساوي `1` استعمال `1` يمنع اي اجزاء اضافية من اضافتها كأجزاء/مداخل رئيسية وكذلك هي محسوبة في العدد
 
 **webpack.config.js**
 
@@ -45,11 +40,11 @@ export default {
 
 ### minChunkSize
 
-Keeping chunk size above the specified limit is no longer a feature of this plugin. Use [MinChunkSizePlugin](/plugins/min-chunk-size-plugin) instead.
+إبقاء عدد الاجزاء فوق الحد المسموح لم يعد ميزة خاصة بهذه الإضافة. استعمل [إضافة الحد الأدنى للاجزاء](/plugins/min-chunk-size-plugin) بدلاً عنها
 
-## Usage via CLI
+## الاستعمال عن طريق واجهة الأوامر (CLI)
 
-This plugin and it's options can also be invoked via the [CLI](/api/cli/):
+هذه الإضافة وخياراتها يمكن استعمالها عن طريق واجهة الاوامر [CLI](/api/cli/):
 
 ```bash
 webpack --optimize-max-chunks 15

From 70b6b0db792368c45e58b53b082d3c42ca8d6735 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 13:38:38 +0300
Subject: [PATCH 24/35] docs(api): translate api docs content

---
 src/content/api/cli.mdx                       | 378 +++++++++---------
 src/content/api/compilation-hooks.mdx         | 276 ++++++-------
 src/content/api/compilation-object.mdx        | 159 ++++----
 src/content/api/compiler-hooks.mdx            | 149 +++----
 .../api/contextmodulefactory-hooks.mdx        |  26 +-
 src/content/api/hot-module-replacement.mdx    | 213 +++++-----
 src/content/api/index.mdx                     |  42 +-
 src/content/api/loaders.mdx                   | 354 ++++++++--------
 src/content/api/logging.mdx                   |  73 ++--
 src/content/api/module-methods.mdx            | 261 ++++++------
 src/content/api/module-variables.mdx          | 212 +++++-----
 src/content/api/node.mdx                      | 188 +++------
 src/content/api/normalmodulefactory-hooks.mdx |  75 ++--
 src/content/api/parser.mdx                    | 124 +++---
 src/content/api/plugins.mdx                   |  98 ++---
 src/content/api/resolvers.mdx                 |  41 +-
 src/content/api/stats.mdx                     | 181 ++++-----
 src/content/api/webpack-dev-server.mdx        |  30 +-
 18 files changed, 1320 insertions(+), 1560 deletions(-)

diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx
index ad5b90f79d42..7f2568837288 100644
--- a/src/content/api/cli.mdx
+++ b/src/content/api/cli.mdx
@@ -1,24 +1,8 @@
 ---
-title: Command Line Interface
+title: واجهة سطر الأوامر
 sort: 1
 contributors:
-  - anshumanv
-  - rishabh3112
-  - snitin315
-  - evenstensberg
-  - simon04
-  - tbroadley
-  - chenxsan
-  - rencire
-  - madhavarshney
-  - EugeneHlushko
-  - byzyk
-  - wizardofhogwarts
-  - EslamHiko
-  - smelukov
-  - anikethsaha
-  - jamesgeorge007
-  - burhanuday
+  - RlxChap2
 related:
   - title: Analyzing Build Statistics
     url: https://survivejs.com/webpack/optimizing-build/analyzing-build-statistics/
@@ -30,37 +14,37 @@ related:
     url: https://medium.com/@nimgrg/analysing-and-minimising-the-size-of-client-side-bundle-with-webpack-and-source-map-explorer-41096559beca#.c3t2srr8x
 ---
 
-For proper usage and easier distribution of this configuration, webpack can be configured with `webpack.config.js`. Any parameters sent to the CLI will map to a corresponding parameter in the configuration file.
+لاستخدام أسهل وتوزيع أوضح للإعدادات، يمكن ضبط webpack عبر ملف `webpack.config.js`. أي parameters ترسلها إلى CLI سيتم ربطها بالـ parameter المقابل داخل ملف الإعدادات.
 
-Read the [installation guide](/guides/installation) if you don't already have webpack and CLI installed.
+اقرأ [دليل التثبيت](/guides/installation) إذا لم يكن webpack وCLI مثبتين لديك.
 
-W> `webpack-cli` v7.0.0+ requires node >= v20.9.0, `webpack >= v5.101.0`, and `webpack-dev-server >= v5.0.0`.
+W> يتطلب `webpack-cli` v7.0.0+ إصدار node >= v20.9.0، و`webpack >= v5.101.0`، و`webpack-dev-server >= v5.0.0`.
 
-W> If you want to run webpack using `npx` please make sure you have `webpack-cli` installed.
+W> إذا أردت تشغيل webpack باستخدام `npx` فتأكد من تثبيت `webpack-cli`.
 
 ## Commands
 
-webpack-cli offers a variety of commands to make working with webpack easier. By default webpack ships with
+يوفر webpack-cli مجموعة أوامر تجعل العمل مع webpack أسهل. افتراضيًا، يأتي webpack مع الأوامر التالية:
 
-| Command                     | Usage                                     | Description                                                                                        |
-| --------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| [`build`](#build)           | `build\|bundle\|b [entries...] [options]` | Run webpack (default command, can be omitted).                                                     |
-| [`configtest`](#configtest) | `configtest\|t [config-path]`             | Validate a webpack configuration.                                                                  |
-| [`help`](#help)             | `help\|h [command] [option]`              | Display help for commands and options.                                                             |
-| [`info`](#info)             | `info\|i [options]`                       | Outputs information about your system.                                                             |
-| [`serve`](#serve)           | `serve\|server\|s [options]`              | Run the `webpack-dev-server`.                                                                      |
-| [`version`](#version)       | `version\|v [commands...]`                | Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. |
-| [`watch`](#watch)           | `watch\|w [entries...] [options]`         | Run webpack and watch for files changes.                                                           |
+| Command                     | Usage                                     | الوصف                                                              |
+| --------------------------- | ----------------------------------------- | ------------------------------------------------------------------ |
+| [`build`](#build)           | `build\|bundle\|b [entries...] [options]` | يشغّل webpack، وهو الأمر الافتراضي ويمكن حذفه.                     |
+| [`configtest`](#configtest) | `configtest\|t [config-path]`             | يتحقق من إعدادات webpack.                                          |
+| [`help`](#help)             | `help\|h [command] [option]`              | يعرض المساعدة للأوامر والخيارات.                                   |
+| [`info`](#info)             | `info\|i [options]`                       | يطبع معلومات عن نظامك.                                             |
+| [`serve`](#serve)           | `serve\|server\|s [options]`              | يشغّل `webpack-dev-server`.                                        |
+| [`version`](#version)       | `version\|v [commands...]`                | يطبع رقم إصدار webpack وwebpack-cli وwebpack-dev-server وحزم أخرى. |
+| [`watch`](#watch)           | `watch\|w [entries...] [options]`         | يشغّل webpack ويراقب تغييرات الملفات.                              |
 
 ### Build
 
-Run webpack (default command, can be omitted).
+يشغّل webpack، وهو الأمر الافتراضي ويمكن حذفه.
 
 ```bash
 npx webpack build [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx webpack build --config ./webpack.config.js --stats verbose
@@ -68,19 +52,19 @@ npx webpack build --config ./webpack.config.js --stats verbose
 
 ### Init
 
-Used to initialize a new webpack project using `create-webpack-app`.
+يُستخدم لتهيئة مشروع webpack جديد باستخدام `create-webpack-app`.
 
 ```bash
 npx create-webpack-app [generation-path] [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx create-webpack-app ./my-app --force --template=default
 ```
 
-Alias to:
+اختصار لـ:
 
 ```bash
 npx create-webpack-app init ./my-app --force --template=default
@@ -88,7 +72,7 @@ npx create-webpack-app init ./my-app --force --template=default
 
 #### Generation Path
 
-Location of where to generate the configuration. Defaults to `process.cwd()`.
+المكان الذي سيتم توليد الإعدادات فيه. القيمة الافتراضية هي `process.cwd()`.
 
 #### Options
 
@@ -96,30 +80,30 @@ Location of where to generate the configuration. Defaults to `process.cwd()`.
 
 `string = 'default'`
 
-Name of template to generate.
+اسم القالب المراد توليده.
 
 **`-f`, `--force`**
 
 `boolean`
 
-To generate a project without questions. When enabled, the default answer for each question will be used.
+يولّد مشروعًا بدون أسئلة. عند تفعيله، سيتم استخدام الإجابة الافتراضية لكل سؤال.
 
-#### Templates supported
+#### القوالب المدعومة
 
-- `--template=default` - Default template with basic configuration.
-- `--template=react` - Template with React configuration.
-- `--template=vue` - Template with Vue configuration.
-- `--template=svelte` - Template with Svelte configuration.`
+- `--template=default` - القالب الافتراضي مع إعدادات أساسية.
+- `--template=react` - قالب بإعدادات React.
+- `--template=vue` - قالب بإعدادات Vue.
+- `--template=svelte` - قالب بإعدادات Svelte.
 
 ### Loader
 
-Scaffold a loader.
+ينشئ هيكل loader.
 
 ```bash
 npx create-webpack-app loader [output-path] [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx create-webpack-app loader ./my-loader --template=default
@@ -127,7 +111,7 @@ npx create-webpack-app loader ./my-loader --template=default
 
 #### Output Path
 
-Path to the output directory, e.g. `./loader-name`.
+المسار إلى مجلد output، مثل `./loader-name`.
 
 #### Options
 
@@ -135,17 +119,17 @@ Path to the output directory, e.g. `./loader-name`.
 
 `string = 'default'`
 
-Type of template.
+نوع القالب.
 
 ### Plugin
 
-Scaffold a plugin.
+ينشئ هيكل plugin.
 
 ```bash
 npx create-webpack-app plugin [output-path] [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx create-webpack-app plugin ./my-plugin --template=default
@@ -153,7 +137,7 @@ npx create-webpack-app plugin ./my-plugin --template=default
 
 #### Output Path
 
-Path to the output directory, e.g. `./plugin-name`.
+المسار إلى مجلد output، مثل `./plugin-name`.
 
 #### Options
 
@@ -161,33 +145,33 @@ Path to the output directory, e.g. `./plugin-name`.
 
 `string = 'default'`
 
-Type of template.
+نوع القالب.
 
-T> See the [full documentation of `create-webpack-app`](https://github.com/webpack/webpack-cli/blob/master/packages/create-webpack-app/README.md).
+T> راجع [التوثيق الكامل لـ `create-webpack-app`](https://github.com/webpack/webpack-cli/blob/master/packages/create-webpack-app/README.md).
 
 ### Info
 
-Outputs information about your system.
+يطبع معلومات عن نظامك.
 
 ```bash
 npx webpack info [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx webpack info --output json --addition-package postcss
 ```
 
-#### Options for info
+#### خيارات info
 
 **`-a`, `--additional-package`**
 
 `string`
 
-Adds additional packages to the output.
+يضيف حزمًا إضافية إلى output.
 
-**example**
+**مثال**
 
 ```bash
 npx webpack info --additional-package postcss
@@ -197,9 +181,9 @@ npx webpack info --additional-package postcss
 
 `string : 'json' | 'markdown'`
 
-To get the output in a specified format.
+للحصول على output بتنسيق محدد.
 
-**example**
+**مثال**
 
 ```bash
 npx webpack info --output markdown
@@ -207,13 +191,13 @@ npx webpack info --output markdown
 
 ### Configtest
 
-Validate a webpack configuration.
+يتحقق من إعدادات webpack.
 
 ```bash
 npx webpack configtest [config-path]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx webpack configtest ./webpack.config.js
@@ -221,33 +205,33 @@ npx webpack configtest ./webpack.config.js
 
 #### Config Path
 
-Path to your webpack configuration file. Defaults to `./webpack.config.js`.
+المسار إلى ملف إعدادات webpack. القيمة الافتراضية هي `./webpack.config.js`.
 
 ### Serve
 
-Run the webpack dev server.
+يشغّل webpack dev server.
 
 ```bash
 npx webpack serve [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx webpack serve --static --open
 ```
 
-T> See the [full list of options for `webpack serve` command](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md) and [related documentation for webpack-dev-server](/configuration/dev-server).
+T> راجع [القائمة الكاملة لخيارات أمر `webpack serve`](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md) و[توثيق webpack-dev-server](/configuration/dev-server) المرتبط به.
 
 ### Watch
 
-Run webpack and watch for files changes.
+يشغّل webpack ويراقب تغييرات الملفات.
 
 ```bash
 npx webpack watch [options]
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx webpack watch --mode development
@@ -255,52 +239,52 @@ npx webpack watch --mode development
 
 ## Flags
 
-By default webpack ships with the following flags:
-
-| Flag / Alias                            | Type            | Description                                                               |
-| --------------------------------------- | --------------- | ------------------------------------------------------------------------- |
-| [`--entry`](#entry)                     | string[]        | The entry point(s) of your application e.g. `./src/main.js`               |
-| [`--config, -c`](#config)               | string[]        | Provide path to a webpack configuration file e.g. `./webpack.config.js`   |
-| [`--config-name`](#config-name)         | string[]        | Name of the configuration to use                                          |
-| `--name`                                | string          | Name of the configuration. Used when loading multiple configurations      |
-| `--color`                               | boolean         | Enable colors on console                                                  |
-| [`--merge, -m`](#merge)                 | boolean         | Merge two or more configurations using `webpack-merge`                    |
-| [`--env`](#env)                         | string[]        | Environment passed to the configuration when it is a function             |
-| [`--config-node-env`](#config-node-env) | string          | Set `process.env.NODE_ENV` to the specified value                         |
-| [`--progress`](#progress)               | boolean, string | Print compilation progress during build                                   |
-| [`--help`](#help)                       | boolean         | Outputs list of supported flags and commands                              |
-| [`--output-path, -o`](#output-path)     | string          | Output location of the file generated by webpack e.g. `./dist`            |
-| `--target, -t`                          | string[]        | Sets the build target                                                     |
-| `--watch, -w`                           | boolean         | Watch for file changes                                                    |
-| `--watch-options-stdin`                 | boolean         | Stop watching when stdin stream has ended                                 |
-| `--devtool, -d`                         | string          | Controls if and how source maps are generated.                            |
-| [`--json, -j`](#json)                   | boolean, string | Prints result as JSON or store it in a file                               |
-| `--mode`                                | string          | Defines the mode to pass to webpack                                       |
-| [`--version, -v`](#version)             | boolean         | Get current version                                                       |
-| `--stats`                               | boolean, string | It instructs webpack on how to treat the stats                            |
-| `--disable-interpret`                   | boolean         | Disable interpret for loading the config file.                            |
-| `--fail-on-warnings`                    | boolean         | Stop webpack-cli process with non-zero exit code on warnings from webpack |
-| [`--analyze`](#analyzing-bundle)        | boolean         | It invokes `webpack-bundle-analyzer` plugin to get bundle information     |
-| [`--extends, -e`](#extends)             | string[]        | Extend an existing configuration                                          |
+افتراضيًا، يأتي webpack مع flags التالية:
+
+| Flag / Alias                            | النوع           | الوصف                                                                  |
+| --------------------------------------- | --------------- | ---------------------------------------------------------------------- |
+| [`--entry`](#entry)                     | string[]        | entry point أو أكثر لتطبيقك، مثل `./src/main.js`.                      |
+| [`--config, -c`](#config)               | string[]        | يحدد مسار ملف إعدادات webpack، مثل `./webpack.config.js`.              |
+| [`--config-name`](#config-name)         | string[]        | اسم الإعداد المراد استخدامه.                                           |
+| `--name`                                | string          | اسم الإعداد. يُستخدم عند تحميل عدة إعدادات.                            |
+| `--color`                               | boolean         | يفعّل الألوان في console.                                              |
+| [`--merge, -m`](#merge)                 | boolean         | يدمج إعدادين أو أكثر باستخدام `webpack-merge`.                         |
+| [`--env`](#env)                         | string[]        | environment تُمرر إلى الإعداد عندما يكون دالة.                         |
+| [`--config-node-env`](#config-node-env) | string          | يضبط `process.env.NODE_ENV` على القيمة المحددة.                        |
+| [`--progress`](#progress)               | boolean, string | يطبع تقدم compilation أثناء build.                                     |
+| [`--help`](#help)                       | boolean         | يطبع قائمة flags والأوامر المدعومة.                                    |
+| [`--output-path, -o`](#output-path)     | string          | مكان إخراج الملف الذي يولده webpack، مثل `./dist`.                     |
+| `--target, -t`                          | string[]        | يحدد هدف build.                                                        |
+| `--watch, -w`                           | boolean         | يراقب تغييرات الملفات.                                                 |
+| `--watch-options-stdin`                 | boolean         | يوقف watch عند انتهاء stdin stream.                                    |
+| `--devtool, -d`                         | string          | يتحكم فيما إذا كانت source maps ستُولّد وكيف ستُولّد.                  |
+| [`--json, -j`](#json)                   | boolean, string | يطبع النتيجة كـ JSON أو يحفظها في ملف.                                 |
+| `--mode`                                | string          | يحدد mode الذي سيُمرر إلى webpack.                                     |
+| [`--version, -v`](#version)             | boolean         | يعرض الإصدار الحالي.                                                   |
+| `--stats`                               | boolean, string | يوجه webpack لطريقة التعامل مع stats.                                  |
+| `--disable-interpret`                   | boolean         | يعطل interpret عند تحميل ملف الإعداد.                                  |
+| `--fail-on-warnings`                    | boolean         | يوقف webpack-cli بكود خروج غير صفري عند ظهور warnings من webpack.      |
+| [`--analyze`](#analyzing-bundle)        | boolean         | يشغّل plugin باسم `webpack-bundle-analyzer` للحصول على معلومات bundle. |
+| [`--extends, -e`](#extends)             | string[]        | يمدد إعدادًا موجودًا.                                                  |
 
 ### Negated Flags
 
-| Flag                       | Description                                                   |
-| -------------------------- | ------------------------------------------------------------- |
-| `--no-color`               | Disables any color on the console                             |
-| `--no-hot`                 | Disables hot reloading if you have it enabled via your config |
-| `--no-stats`               | Disables any compilation stats emitted by webpack             |
-| `--no-watch`               | Do not watch for file changes                                 |
-| `--no-devtool`             | Do not generate source maps                                   |
-| `--no-watch-options-stdin` | Do not stop watching when stdin stream has ended              |
+| Flag                       | الوصف                                           |
+| -------------------------- | ----------------------------------------------- |
+| `--no-color`               | يعطل أي ألوان في console.                       |
+| `--no-hot`                 | يعطل hot reloading إذا كان مفعّلًا من إعداداتك. |
+| `--no-stats`               | يعطل أي compilation stats يصدرها webpack.       |
+| `--no-watch`               | لا يراقب تغييرات الملفات.                       |
+| `--no-devtool`             | لا يولد source maps.                            |
+| `--no-watch-options-stdin` | لا يوقف watch عند انتهاء stdin stream.          |
 
 ### Core Flags
 
-Starting CLI v4 and webpack v5, CLI imports the entire configuration schema from webpack core to allow tuning almost every configuration option from the command line.
+ابتداءً من CLI v4 وwebpack v5، تستورد CLI كامل configuration schema من webpack core، حتى تتيح ضبط معظم خيارات الإعداد تقريبًا من سطر الأوامر.
 
-**Here's the list of all the core flags supported by webpack v5 with CLI v4 - [link](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md)**
+**هذه قائمة بكل core flags المدعومة في webpack v5 مع CLI v4 - [الرابط](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md)**
 
-For example if you want to enable performance hints in your project you'd use [this](https://webpack.js.org/configuration/performance/#performancehints) option in configuration, with core flags you can do -
+مثلًا، إذا أردت تفعيل performance hints في مشروعك، يمكنك استخدام [هذا](https://webpack.js.org/configuration/performance/#performancehints) الخيار في الإعدادات. ومع core flags يمكنك فعل ذلك بهذا الشكل:
 
 ```bash
 npx webpack --performance-hints warning
@@ -308,21 +292,21 @@ npx webpack --performance-hints warning
 
 ## Usage
 
-### With configuration file
+### مع ملف إعدادات
 
 ```bash
 npx webpack [--config webpack.config.js]
 ```
 
-See [configuration](/configuration) for the options in the configuration file.
+راجع [configuration](/configuration) لمعرفة الخيارات داخل ملف الإعدادات.
 
-### Without configuration file
+### بدون ملف إعدادات
 
 ```bash
 npx webpack --entry <entry> --output-path <output-path>
 ```
 
-**example**
+**مثال**
 
 ```bash
 npx webpack --entry ./first.js --entry ./second.js --output-path /build
@@ -330,8 +314,8 @@ npx webpack --entry ./first.js --entry ./second.js --output-path /build
 
 #### entry
 
-A filename or a set of named filenames which act as the entry point to build your project. You can pass multiple entries (every entry is loaded on startup).
-Following are the multiple ways of specifying entry file(s) via CLI -
+اسم ملف أو مجموعة أسماء ملفات تعمل كـ entry point لبناء مشروعك. يمكنك تمرير أكثر من entry، حيث يتم تحميل كل entry عند بدء التشغيل.
+توجد عدة طرق لتحديد ملف أو ملفات entry عبر CLI:
 
 ```bash
 npx webpack --entry-reset ./first-entry.js
@@ -349,17 +333,17 @@ npx webpack --entry-reset ./first-entry.js ./other-entry.js
 npx webpack --entry-reset --entry ./first-entry.js ./other-entry.js
 ```
 
-W> The `--entry-reset` option is required to replace the existing [entry](/configuration/entry-context/#entry) option, without it the `--entry` option will add another entry to the existing entries.
+W> خيار `--entry-reset` مطلوب لاستبدال خيار [entry](/configuration/entry-context/#entry) الموجود. بدونه سيضيف `--entry` entry أخرى إلى entries الموجودة.
 
-T> Use `webpack [command] --entry-reset [entries...] [option]` syntax because some options can accept multiple values so `webpack --target node ./entry.js` means `target: ['node', './entry.js']`
+T> استخدم صيغة `webpack [command] --entry-reset [entries...] [option]` لأن بعض الخيارات تقبل عدة قيم، فمثلًا `webpack --target node ./entry.js` تعني `target: ['node', './entry.js']`.
 
 #### output-path
 
-A path for the bundled file to be saved in. It will be mapped to the configuration options `output.path`.
+مسار حفظ الملف المحزم. يتم ربطه بخيار الإعداد `output.path`.
 
-**Example**
+**مثال**
 
-If your project structure is as follows -
+إذا كانت بنية مشروعك كالتالي:
 
 ```bash
 .
@@ -375,7 +359,7 @@ If your project structure is as follows -
 npx webpack ./src/index.js --output-path dist
 ```
 
-This will bundle your source code with entry as `index.js`, and the output bundle file will have a path of `dist`.
+سيتم تحزيم كود المصدر باستخدام `index.js` كـ entry، وسيكون مسار ملف output bundle هو `dist`.
 
 ```bash
 asset main.js 142 bytes [compared for emit] [minimized] (name: main)
@@ -388,7 +372,7 @@ webpack 5.1.0 compiled successfully in 187 ms
 npx webpack ./src/index.js ./src/others2.js --output-path dist/
 ```
 
-This will form the bundle with both the files as separate entry points.
+سيؤدي هذا إلى إنشاء bundle باستخدام الملفين كـ entry points منفصلة.
 
 ```bash
 asset main.js 142 bytes [compared for emit] [minimized] (name: main)
@@ -400,11 +384,11 @@ webpack 5.1.0 compiled successfully in 198 ms
 
 ## Default Configurations
 
-CLI will look for some default configurations in the path of your project, here are the config files picked up by CLI.
+تبحث CLI عن بعض ملفات الإعدادات الافتراضية داخل مسار مشروعك. هذه هي ملفات الإعداد التي تلتقطها CLI.
 
-This is the lookup priority in increasing order
+ترتيب البحث يكون حسب الأولوية التالية:
 
-> example - config file lookup will be in order of webpack.config.js > .webpack/webpack.config.js > .webpack/webpackfile.js
+> مثال: سيكون ترتيب البحث عن ملف الإعداد هكذا webpack.config.js > .webpack/webpack.config.js > .webpack/webpackfile.js
 
 ```text
 'webpack.config',
@@ -414,29 +398,29 @@ This is the lookup priority in increasing order
 
 ## Common Options
 
-W> Note that Command Line Interface has a higher precedence for the arguments you use it with than your configuration file. For instance, if you pass [`--mode="production"`](/configuration/mode/#usage) to webpack CLI and your configuration file uses `development`, `production` will be used.
+W> لاحظ أن Command Line Interface لها أولوية أعلى من ملف الإعدادات بالنسبة للـ arguments التي تستخدمها معها. مثلًا، إذا مررت [`--mode="production"`](/configuration/mode/#usage) إلى webpack CLI وكان ملف الإعدادات يستخدم `development`، فسيتم استخدام `production`.
 
 ### help
 
-**List basic commands and flags available on the cli**
+**عرض الأوامر والـ flags الأساسية المتاحة في cli**
 
-Both `webpack help [command] [option]` and `webpack [command] --help` are valid to get help:
+كل من `webpack help [command] [option]` و`webpack [command] --help` صالح للحصول على المساعدة:
 
 ```bash
 npx webpack --help
 
-# or
+# أو
 
 npx webpack help
 ```
 
-**List all supported commands and flags by cli**
+**عرض كل الأوامر والـ flags المدعومة من cli**
 
 ```bash
 npx webpack --help=verbose
 ```
 
-**See help for a specific command or option**
+**عرض المساعدة لأمر أو خيار محدد**
 
 ```bash
 npx webpack help --mode
@@ -444,26 +428,26 @@ npx webpack help --mode
 
 ### version
 
-**Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages**
+**يطبع رقم إصدار webpack وwebpack-cli وwebpack-dev-server وحزم أخرى**
 
-To inspect the version of `webpack` and `webpack-cli` you are using, run the command:
+لفحص إصدار `webpack` و`webpack-cli` الذي تستخدمه، شغّل:
 
 ```bash
 npx webpack --version
 
-# or
+# أو
 
 npx webpack version
 ```
 
-This will output the following result:
+سيطبع نتيجة مثل:
 
 ```bash
 webpack 5.31.2
 webpack-cli 4.6.0
 ```
 
-It will output the version of `webpack-dev-server` as well if you have it installed:
+وسيظهر إصدار `webpack-dev-server` أيضًا إذا كان مثبتًا لديك:
 
 ```bash
 webpack 5.31.2
@@ -473,9 +457,9 @@ webpack-dev-server 3.11.2
 
 ### config
 
-**Build source using a configuration file**
+**يبني source باستخدام ملف إعدادات**
 
-Specify a different [configuration](/configuration) file other than `webpack.config.js`, which is one of the defaults.
+حدد ملف [configuration](/configuration) مختلفًا عن `webpack.config.js`، وهو أحد الملفات الافتراضية.
 
 ```bash
 npx webpack --config example.config.js
@@ -483,9 +467,9 @@ npx webpack --config example.config.js
 
 ### config-name
 
-In case your configuration file exports multiple configurations, you can use `--config-name` to specify which configuration to run.
+إذا كان ملف الإعدادات يصدّر عدة إعدادات، يمكنك استخدام `--config-name` لتحديد الإعداد الذي تريد تشغيله.
 
-Consider the following `webpack.config.js`:
+تخيل ملف `webpack.config.js` التالي:
 
 ```js
 export default [
@@ -517,13 +501,13 @@ export default [
 ];
 ```
 
-To run only the `second` configuration:
+لتشغيل إعداد `second` فقط:
 
 ```bash
 npx webpack --config-name second
 ```
 
-You can also pass multiple values:
+يمكنك أيضًا تمرير عدة قيم:
 
 ```bash
 npx webpack --config-name first --config-name second
@@ -531,7 +515,7 @@ npx webpack --config-name first --config-name second
 
 ### merge
 
-You can merge two or more different webpack configurations with the help of `--merge`:
+يمكنك دمج إعدادين أو أكثر من إعدادات webpack باستخدام `--merge`:
 
 ```bash
 npx webpack --config ./first.js --config ./second.js --merge
@@ -541,35 +525,35 @@ npx webpack --config ./first.js --config ./second.js --merge
 
 <Badge text="webpack-cli v5.1.0+" />
 
-You can extend existing webpack configurations with the help of `--extends`:
+يمكنك تمديد إعدادات webpack موجودة باستخدام `--extends`:
 
 ```bash
 npx webpack --extends ./base.webpack.config.js
 ```
 
-Read more about it in [extending configurations](/configuration/extending-configurations/).
+اقرأ المزيد في [تمديد الإعدادات](/configuration/extending-configurations/).
 
 ### json
 
-**Print result of webpack as JSON**
+**يطبع نتيجة webpack كـ JSON**
 
 ```bash
 npx webpack --json
 ```
 
-**If you want to store stats as json instead of printing it, you can use -**
+**إذا أردت حفظ stats كـ json بدل طباعتها، يمكنك استخدام:**
 
 ```bash
 npx webpack --json stats.json
 ```
 
-In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option, the output can be a JSON object. This response is accepted by webpack's [analyse tool](https://webpack.github.io/analyse/), or chrisbateman's [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/), or th0r's [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer). The analyse tool will take in the JSON and provide all the details of the build in graphical form.
+في الحالات الأخرى، يطبع webpack مجموعة stats تعرض تفاصيل bundle وchunk والتوقيتات. باستخدام هذا الخيار، يمكن أن يكون output كائن JSON. تقبل هذه الاستجابة أداة [analyse](https://webpack.github.io/analyse/) الخاصة بـ webpack، أو [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/) من chrisbateman، أو [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer) من th0r. تأخذ أداة analyse ملف JSON وتعرض كل تفاصيل build بشكل رسومي.
 
-T> See the [stats data api](/api/stats) to read more about the stats generated here.
+T> راجع [stats data api](/api/stats) لقراءة المزيد عن stats التي يتم توليدها هنا.
 
 ## Environment Options
 
-When the webpack configuration [exports a function](/configuration/configuration-types/#exporting-a-function), an "environment" may be passed to it.
+عندما [تصدّر إعدادات webpack دالة](/configuration/configuration-types/#exporting-a-function)، يمكن تمرير "environment" إليها.
 
 ### env
 
@@ -577,9 +561,9 @@ When the webpack configuration [exports a function](/configuration/configuration
 npx webpack --env production    # env.production = true
 ```
 
-The `--env` argument accepts multiple values:
+يقبل argument المسمى `--env` عدة قيم:
 
-| Invocation                                                       | Resulting environment                          |
+| الاستدعاء                                                        | environment الناتج                             |
 | ---------------------------------------------------------------- | ---------------------------------------------- |
 | `npx webpack --env prod`                                         | `{ prod: true }`                               |
 | `npx webpack --env prod --env min`                               | `{ prod: true, min: true }`                    |
@@ -587,19 +571,19 @@ The `--env` argument accepts multiple values:
 | `npx webpack --env foo=bar=app`                                  | `{ foo: "bar=app"}`                            |
 | `npx webpack --env app.platform="staging" --env app.name="test"` | `{ app: { platform: "staging", name: "test" }` |
 
-T> If you want to explicitly set a variable to empty string (`""`), you may need to escape characters on terminal like `npx webpack --env foo=\"\"`
+T> إذا أردت ضبط متغير صراحةً كنص فارغ (`""`)، فقد تحتاج إلى تهريب بعض الأحرف في terminal مثل `npx webpack --env foo=\"\"`.
 
-T> See the [environment variables](/guides/environment-variables/) guide for more information on its usage.
+T> راجع دليل [environment variables](/guides/environment-variables/) لمزيد من المعلومات عن الاستخدام.
 
-In addition to the customized `env` showed above, there are some built-in ones under `env` to be used inside your webpack configuration:
+إضافة إلى `env` المخصص الموضح أعلاه، توجد بعض القيم المدمجة تحت `env` لاستخدامها داخل إعدادات webpack:
 
-| Environment Variable | Description                                  |
+| Environment Variable | الوصف                                        |
 | -------------------- | -------------------------------------------- |
-| `WEBPACK_SERVE`      | `true` if `serve\|server\|s` is being used.  |
-| `WEBPACK_BUILD`      | `true` if `build\|bundle\|b` is being used.  |
-| `WEBPACK_WATCH`      | `true` if `--watch\|watch\|w` is being used. |
+| `WEBPACK_SERVE`      | `true` إذا كان `serve\|server\|s` مستخدمًا.  |
+| `WEBPACK_BUILD`      | `true` إذا كان `build\|bundle\|b` مستخدمًا.  |
+| `WEBPACK_WATCH`      | `true` إذا كان `--watch\|watch\|w` مستخدمًا. |
 
-Note that you can not access those built-in environment variables inside the bundled code.
+لاحظ أنك لا تستطيع الوصول إلى environment variables المدمجة هذه داخل الكود المحزم.
 
 ```js
 export default (env, argv) => ({
@@ -611,90 +595,90 @@ export default (env, argv) => ({
 
 <Badge text="webpack-cli v6.0.0+" />
 
-Set `process.env.NODE_ENV` for your configuration:
+يضبط `process.env.NODE_ENV` داخل إعداداتك:
 
 ```bash
 npx webpack --config-node-env production   # process.env.NODE_ENV = 'production' in `webpack.config.js`
 ```
 
-When the `mode` option is not specified in the configuration, you can use the `--config-node-env` option to set the `mode`. For example, using `--config-node-env production` will set both `process.env.NODE_ENV` and `mode` to `'production'`.
+عندما لا يكون خيار `mode` محددًا داخل الإعدادات، يمكنك استخدام خيار `--config-node-env` لضبط `mode`. مثلًا، استخدام `--config-node-env production` سيضبط كلًا من `process.env.NODE_ENV` و`mode` على `'production'`.
 
-If your configuration exports a function, the value of `--config-node-env` is assigned to mode after the function returns. This means that `mode` will not be available in the function arguments (`env` and `argv`). However, the value of `--config-node-env` is accessible as `argv.nodeEnv` within the function and can be used accordingly.
+إذا كانت إعداداتك تصدّر دالة، يتم تعيين قيمة `--config-node-env` إلى mode بعد أن ترجع الدالة. هذا يعني أن `mode` لن يكون متاحًا داخل arguments الخاصة بالدالة، أي `env` و`argv`. لكن قيمة `--config-node-env` يمكن الوصول إليها عبر `argv.nodeEnv` داخل الدالة واستخدامها حسب الحاجة.
 
 ```js
 export default (env, argv) => {
-  console.log(argv.defineProcessEnvNodeEnv); // 'production' if --config-node-env production is used
+  console.log(argv.defineProcessEnvNodeEnv); // 'production' إذا استُخدم --config-node-env production
   return {
-    // your configuration
+    // إعداداتك
   };
 };
 ```
 
 ## Configuration Options
 
-| Parameter       | Explanation                                                    | Input type | Default                                             |
-| --------------- | -------------------------------------------------------------- | ---------- | --------------------------------------------------- |
-| `--config`      | Path to the configuration file                                 | string[]   | [Default Configs](/api/cli/#default-configurations) |
-| `--config-name` | Name of the configuration to use                               | string[]   |                                                     |
-| `--env`         | Environment passed to the configuration, when it is a function | string[]   |                                                     |
+| Parameter       | الشرح                                         | نوع الإدخال | الافتراضي                                           |
+| --------------- | --------------------------------------------- | ----------- | --------------------------------------------------- |
+| `--config`      | مسار ملف الإعدادات                            | string[]    | [Default Configs](/api/cli/#default-configurations) |
+| `--config-name` | اسم الإعداد المراد استخدامه                   | string[]    |                                                     |
+| `--env`         | environment تُمرر إلى الإعداد عندما يكون دالة | string[]    |                                                     |
 
 ## Analyzing Bundle
 
-You can also use `webpack-bundle-analyzer` to analyze your output bundles emitted by webpack. You can use `--analyze` flag to invoke it via CLI.
+يمكنك أيضًا استخدام `webpack-bundle-analyzer` لتحليل output bundles التي يصدرها webpack. يمكنك استخدام flag `--analyze` لتشغيله عبر CLI.
 
 ```bash
 npx webpack --analyze
 ```
 
-W> Make sure you have `webpack-bundle-analyzer` installed in your project else CLI will prompt you to install it.
+W> تأكد من تثبيت `webpack-bundle-analyzer` داخل مشروعك، وإلا ستطلب منك CLI تثبيته.
 
 ## Progress
 
-To check the progress of any webpack compilation you can use the `--progress` flag.
+لفحص تقدم أي webpack compilation، يمكنك استخدام flag `--progress`.
 
 ```bash
 npx webpack --progress
 ```
 
-To collect profile data for progress steps you can pass `profile` as value to `--progress` flag.
+لجمع profile data الخاصة بخطوات التقدم، يمكنك تمرير القيمة `profile` إلى flag `--progress`.
 
 ```bash
 npx webpack --progress=profile
 ```
 
-## Pass CLI arguments to Node.js
+## تمرير CLI arguments إلى Node.js
 
-To pass arguments directly to Node.js process, you can use the `NODE_OPTIONS` option.
+لتمرير arguments مباشرة إلى عملية Node.js، يمكنك استخدام خيار `NODE_OPTIONS`.
 
-For example, to increase the memory limit of Node.js process to 4 GB
+مثلًا، لزيادة حد ذاكرة عملية Node.js إلى 4 GB:
 
 ```bash
 NODE_OPTIONS="--max-old-space-size=4096" webpack
 ```
 
-Also, you can pass multiple options to Node.js process
+ويمكنك أيضًا تمرير عدة خيارات إلى عملية Node.js:
 
 ```bash
 NODE_OPTIONS="--max-old-space-size=4096 -r /path/to/preload/file.js" webpack
 ```
 
-## Exit codes and their meanings
+## أكواد الخروج ومعانيها
 
-| Exit Code | Description                                        |
-| --------- | -------------------------------------------------- |
-| `0`       | Success                                            |
-| `1`       | Errors from webpack                                |
-| `2`       | Configuration/options problem or an internal error |
+| Exit Code | الوصف                                    |
+| --------- | ---------------------------------------- |
+| `0`       | نجاح                                     |
+| `1`       | أخطاء من webpack                         |
+| `2`       | مشكلة في الإعدادات/الخيارات أو خطأ داخلي |
 
 ## CLI Environment Variables
 
-| Environment Variable                  | Description                                                         |
-| ------------------------------------- | ------------------------------------------------------------------- |
-| `WEBPACK_CLI_SKIP_IMPORT_LOCAL`       | when `true` it will skip using the local instance of `webpack-cli`. |
-| `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG`   | when `true` it will force load the ESM config.                      |
-| [`WEBPACK_PACKAGE`](#webpack_package) | Use a custom webpack version in CLI.                                |
-| `WEBPACK_DEV_SERVER_PACKAGE`          | Use a custom webpack-dev-server version in CLI.                     |
-| `WEBPACK_CLI_HELP_WIDTH`              | Use a custom width for help output.                                 |
+| Environment Variable                  | الوصف                                                                |
+| ------------------------------------- | -------------------------------------------------------------------- |
+| `WEBPACK_CLI_SKIP_IMPORT_LOCAL`       | عندما تكون `true`، سيتم تجاوز استخدام النسخة المحلية من webpack-cli. |
+| `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG`   | عندما تكون `true`، سيتم إجبار تحميل إعداد ESM.                       |
+| [`WEBPACK_PACKAGE`](#webpack_package) | يستخدم إصدارًا مخصصًا من webpack داخل CLI.                           |
+| `WEBPACK_DEV_SERVER_PACKAGE`          | يستخدم إصدارًا مخصصًا من webpack-dev-server داخل CLI.                |
+| `WEBPACK_CLI_HELP_WIDTH`              | يستخدم عرضًا مخصصًا لناتج help.                                      |
 
 ```bash
 WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm
@@ -702,7 +686,7 @@ WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm
 
 ### WEBPACK_PACKAGE
 
-Use a custom webpack version in CLI. Considering the following content in your `package.json`:
+يستخدم إصدارًا مخصصًا من webpack داخل CLI. بافتراض وجود المحتوى التالي في `package.json`:
 
 ```json
 {
@@ -712,13 +696,13 @@ Use a custom webpack version in CLI. Considering the following content in your `
 }
 ```
 
-To use `webpack v4.0.0`:
+لاستخدام `webpack v4.0.0`:
 
 ```bash
 npx webpack
 ```
 
-To use `webpack v5.32.0`:
+لاستخدام `webpack v5.32.0`:
 
 ```bash
 WEBPACK_PACKAGE=webpack-5 npx webpack
@@ -728,15 +712,15 @@ WEBPACK_PACKAGE=webpack-5 npx webpack
 
 ### TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts
 
-You might encounter this error in the case of using native ESM in TypeScript (i.e. `type: "module"` in `package.json`).
+قد تواجه هذا الخطأ عند استخدام ESM الأصلي في TypeScript، أي وجود `type: "module"` داخل `package.json`.
 
-`webpack-cli` supports configuration in both `CommonJS` and `ESM` format, at first it tries to load a configuration using `import()`, once it fails it would try to load the configuration using `require()`.
-However, the `import()` method won't work with `ts-node` without [loader hooks](https://nodejs.org/api/esm.html#esm_experimental_loaders) enabled (described at [`TypeStrong/ts-node#1007`](https://github.com/TypeStrong/ts-node/issues/1007)).
+يدعم `webpack-cli` الإعدادات بصيغتي `CommonJS` و`ESM`. في البداية يحاول تحميل الإعداد باستخدام `import()`، وإذا فشل يحاول تحميله باستخدام `require()`.
+لكن طريقة `import()` لن تعمل مع `ts-node` بدون تفعيل [loader hooks](https://nodejs.org/api/esm.html#esm_experimental_loaders)، كما هو موضح في [`TypeStrong/ts-node#1007`](https://github.com/TypeStrong/ts-node/issues/1007).
 
-To fix the error above use the following command:
+لإصلاح الخطأ السابق، استخدم الأمر التالي:
 
 ```bash
 NODE_OPTIONS="--import=data:text/javascript,import { register } from 'node:module'; import { pathToFileURL } from 'node:url'; register('ts-node/esm', pathToFileURL('./'));" npx webpack --entry ./src/index.js --mode production
 ```
 
-For more information, see our documentation on [writing a webpack configuration in `TypeScript`](/configuration/configuration-languages/#typescript).
+لمزيد من المعلومات، راجع توثيقنا عن [كتابة إعدادات webpack باستخدام `TypeScript`](/configuration/configuration-languages/#typescript).
diff --git a/src/content/api/compilation-hooks.mdx b/src/content/api/compilation-hooks.mdx
index b4016b6eb23e..8a53212206eb 100644
--- a/src/content/api/compilation-hooks.mdx
+++ b/src/content/api/compilation-hooks.mdx
@@ -3,41 +3,26 @@ title: Compilation Hooks
 group: Plugins
 sort: 10
 contributors:
-  - slavafomin
-  - byzyk
-  - madhavarshney
-  - misterdev
-  - wizardofhogwarts
-  - EugeneHlushko
-  - chenxsan
-  - jamesgeorge007
-  - snitin315
+  - RlxChap2
 ---
 
-The `Compilation` module is used by the `Compiler` to create new compilations
-(or builds). A `compilation` instance has access to all modules and their
-dependencies (most of which are circular references). It is the literal
-compilation of all the modules in the dependency graph of an application.
-During the compilation phase, modules are loaded, sealed, optimized, chunked,
-hashed and restored.
+يستخدم `Compiler` module المسمى `Compilation` لإنشاء compilations جديدة، أو builds جديدة. تملك instance من `compilation` وصولًا إلى كل modules وdependencies الخاصة بها، ومعظمها مراجع دائرية. وهي عمليًا compilation لكل modules الموجودة في dependency graph الخاص بالتطبيق. أثناء مرحلة compilation، يتم تحميل modules، وعمل seal لها، وتحسينها، وتقسيمها إلى chunks، وإنشاء hashes لها، واستعادتها.
 
-The `Compilation` class also extends `Tapable` and provides the following
-lifecycle hooks. They can be tapped the same way as compiler hooks:
+يرث الصنف `Compilation` أيضًا من `Tapable` ويوفر lifecycle hooks التالية. يمكن الدخول إليها بالطريقة نفسها المستخدمة مع compiler hooks:
 
 ```js
 compilation.hooks.someHook.tap(/* ... */);
 ```
 
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+وكما هو الحال مع `compiler`، قد تكون `tapAsync` و`tapPromise` متاحتين أيضًا بحسب نوع hook.
 
-W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+W> منذ webpack 5، لم تعد `hooks` قابلة للتمديد مباشرة. استخدم `WeakMap` لإضافة hooks مخصصة.
 
 ## buildModule
 
 `SyncHook`
 
-Triggered before a module build has started, can be used to modify the module.
+يُطلق قبل بدء build الخاص بـ module، ويمكن استخدامه لتعديل module.
 
 - Callback Parameters: `module`
 
@@ -54,7 +39,7 @@ compilation.hooks.buildModule.tap(
 
 `SyncHook`
 
-Fired before rebuilding a module.
+يُطلق قبل إعادة بناء module.
 
 - Callback Parameters: `module`
 
@@ -62,7 +47,7 @@ Fired before rebuilding a module.
 
 `SyncHook`
 
-Run when a module build has failed.
+يعمل عندما يفشل build الخاص بـ module.
 
 - Callback Parameters: `module` `error`
 
@@ -70,7 +55,7 @@ Run when a module build has failed.
 
 `SyncHook`
 
-Executed when a module has been built successfully.
+يُنفّذ عندما يتم بناء module بنجاح.
 
 - Callback Parameters: `module`
 
@@ -78,7 +63,7 @@ Executed when a module has been built successfully.
 
 `AsyncSeriesHook`
 
-Called when all modules have been built without errors.
+يُستدعى عندما يتم بناء كل modules بدون أخطاء.
 
 - Callback Parameters: `modules`
 
@@ -86,7 +71,7 @@ Called when all modules have been built without errors.
 
 `SyncHook`
 
-Executed when a module has been rebuilt, in case of both success or with errors.
+يُنفّذ عندما تنتهي إعادة بناء module، سواء نجحت أو انتهت بأخطاء.
 
 - Callback Parameters: `module`
 
@@ -94,19 +79,19 @@ Executed when a module has been rebuilt, in case of both success or with errors.
 
 `SyncHook`
 
-Fired when the compilation stops accepting new modules.
+يُطلق عندما يتوقف compilation عن قبول modules جديدة.
 
 ## unseal
 
 `SyncHook`
 
-Fired when a compilation begins accepting new modules.
+يُطلق عندما يبدأ compilation بقبول modules جديدة.
 
 ## optimizeDependencies
 
 `SyncBailHook`
 
-Fired at the beginning of dependency optimization.
+يُطلق في بداية تحسين dependencies.
 
 - Callback Parameters: `modules`
 
@@ -114,7 +99,7 @@ Fired at the beginning of dependency optimization.
 
 `SyncHook`
 
-Fired after the dependency optimization.
+يُطلق بعد تحسين dependencies.
 
 - Callback Parameters: `modules`
 
@@ -124,10 +109,10 @@ Fired after the dependency optimization.
 
 <Badge text="5.83.0+" />
 
-The `afterChunks` hook is invoked following the creation of the chunks and module graph, and prior to their optimization.
-This hook provides an opportunity to examine, analyze, and modify the chunk graph if necessary.
+يُستدعى hook المسمى `afterChunks` بعد إنشاء chunks وmodule graph، وقبل تحسينهما.
+يوفر هذا hook فرصة لفحص chunk graph وتحليله وتعديله عند الحاجة.
 
-Here's [an example](https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c5841a77025a6722f11bf/lib/wasm-sync/WebAssemblyModulesPlugin.js#L114-L137) of how to utilize the `compilation.hooks.afterChunks` hook.
+هذا [مثال](https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c5841a77025a6722f11bf/lib/wasm-sync/WebAssemblyModulesPlugin.js#L114-L137) على استخدام hook `compilation.hooks.afterChunks`.
 
 - Callback Parameters: `chunks`
 
@@ -135,13 +120,13 @@ Here's [an example](https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c
 
 `SyncHook`
 
-Triggered at the beginning of the optimization phase.
+يُطلق في بداية مرحلة optimization.
 
 ## optimizeModules
 
 `SyncBailHook`
 
-Called at the beginning of the module optimization phase. A plugin can tap into this hook to perform optimizations on modules.
+يُستدعى في بداية مرحلة تحسين modules. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسينات على modules.
 
 - Callback Parameters: `modules`
 
@@ -149,7 +134,7 @@ Called at the beginning of the module optimization phase. A plugin can tap into
 
 `SyncHook`
 
-Called after modules optimization has completed.
+يُستدعى بعد اكتمال تحسين modules.
 
 - Callback Parameters: `modules`
 
@@ -157,7 +142,7 @@ Called after modules optimization has completed.
 
 `SyncBailHook`
 
-Called at the beginning of the chunk optimization phase. A plugin can tap into this hook to perform optimizations on chunks.
+يُستدعى في بداية مرحلة تحسين chunks. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسينات على chunks.
 
 - Callback Parameters: `chunks`
 
@@ -165,7 +150,7 @@ Called at the beginning of the chunk optimization phase. A plugin can tap into t
 
 `SyncHook`
 
-Fired after chunk optimization has completed.
+يُطلق بعد اكتمال تحسين chunks.
 
 - Callback Parameters: `chunks`
 
@@ -173,7 +158,7 @@ Fired after chunk optimization has completed.
 
 `AsyncSeriesHook`
 
-Called before optimizing the dependency tree. A plugin can tap into this hook to perform a dependency tree optimization.
+يُستدعى قبل تحسين dependency tree. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسين على dependency tree.
 
 - Callback Parameters: `chunks` `modules`
 
@@ -181,7 +166,7 @@ Called before optimizing the dependency tree. A plugin can tap into this hook to
 
 `SyncHook`
 
-Called after the dependency tree optimization has completed with success.
+يُستدعى بعد اكتمال تحسين dependency tree بنجاح.
 
 - Callback Parameters: `chunks` `modules`
 
@@ -189,7 +174,7 @@ Called after the dependency tree optimization has completed with success.
 
 `SyncBailHook`
 
-Called after the tree optimization, at the beginning of the chunk modules optimization. A plugin can tap into this hook to perform optimizations of chunk modules.
+يُستدعى بعد تحسين tree، وفي بداية تحسين chunk modules. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسينات على chunk modules.
 
 - Callback Parameters: `chunks` `modules`
 
@@ -197,7 +182,7 @@ Called after the tree optimization, at the beginning of the chunk modules optimi
 
 `SyncHook`
 
-Called after the chunkmodules optimization has completed successfully.
+يُستدعى بعد اكتمال تحسين chunk modules بنجاح.
 
 - Callback Parameters: `chunks` `modules`
 
@@ -205,13 +190,13 @@ Called after the chunkmodules optimization has completed successfully.
 
 `SyncBailHook`
 
-Called to determine whether or not to store records. Returning anything `!== false` will prevent every other "record" hook from being executed ([`record`](#record), [`recordModules`](#recordmodules), [`recordChunks`](#recordchunks) and [`recordHash`](#recordhash)).
+يُستدعى لتحديد هل يجب تخزين records أم لا. إرجاع أي شيء `!== false` سيمنع تنفيذ بقية hooks الخاصة بـ records، وهي [`record`](#record) و[`recordModules`](#recordmodules) و[`recordChunks`](#recordchunks) و[`recordHash`](#recordhash).
 
 ## reviveModules
 
 `SyncHook`
 
-Restore module information from records.
+يستعيد معلومات module من records.
 
 - Callback Parameters: `modules` `records`
 
@@ -219,7 +204,7 @@ Restore module information from records.
 
 `SyncHook`
 
-Executed before assigning an `id` to each module.
+يُنفّذ قبل تعيين `id` لكل module.
 
 - Callback Parameters: `modules`
 
@@ -227,7 +212,7 @@ Executed before assigning an `id` to each module.
 
 `SyncHook`
 
-Called to assign an `id` to each module.
+يُستدعى لتعيين `id` لكل module.
 
 - Callback Parameters: `modules`
 
@@ -235,7 +220,7 @@ Called to assign an `id` to each module.
 
 `SyncHook`
 
-Called at the beginning of the modules `id` optimization.
+يُستدعى في بداية تحسين `id` الخاصة بـ modules.
 
 - Callback Parameters: `modules`
 
@@ -243,7 +228,7 @@ Called at the beginning of the modules `id` optimization.
 
 `SyncHook`
 
-Called when the modules `id` optimization phase has completed.
+يُستدعى عندما تكتمل مرحلة تحسين `id` الخاصة بـ modules.
 
 - Callback Parameters: `modules`
 
@@ -251,7 +236,7 @@ Called when the modules `id` optimization phase has completed.
 
 `SyncHook`
 
-Restore chunk information from records.
+يستعيد معلومات chunk من records.
 
 - Callback Parameters: `chunks` `records`
 
@@ -259,7 +244,7 @@ Restore chunk information from records.
 
 `SyncHook`
 
-Executed before assigning an `id` to each chunk.
+يُنفّذ قبل تعيين `id` لكل chunk.
 
 - Callback Parameters: `chunks`
 
@@ -267,7 +252,7 @@ Executed before assigning an `id` to each chunk.
 
 `SyncHook`
 
-Called to assign an `id` to each chunk.
+يُستدعى لتعيين `id` لكل chunk.
 
 - Callback Parameters: `chunks`
 
@@ -275,7 +260,7 @@ Called to assign an `id` to each chunk.
 
 `SyncHook`
 
-Called at the beginning of the chunks `id` optimization phase.
+يُستدعى في بداية مرحلة تحسين `id` الخاصة بـ chunks.
 
 - Callback Parameters: `chunks`
 
@@ -283,7 +268,7 @@ Called at the beginning of the chunks `id` optimization phase.
 
 `SyncHook`
 
-Triggered after chunk `id` optimization has finished.
+يُطلق بعد انتهاء تحسين `id` الخاصة بـ chunk.
 
 - Callback Parameters: `chunks`
 
@@ -291,7 +276,7 @@ Triggered after chunk `id` optimization has finished.
 
 `SyncHook`
 
-Store module info to the records. This is triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات module داخل records. يُطلق هذا hook إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
 
 - Callback Parameters: `modules` `records`
 
@@ -299,7 +284,7 @@ Store module info to the records. This is triggered if [`shouldRecord`](#shouldr
 
 `SyncHook`
 
-Store chunk info to the records. This is only triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات chunk داخل records. لا يُطلق إلا إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
 
 - Callback Parameters: `chunks` `records`
 
@@ -307,31 +292,31 @@ Store chunk info to the records. This is only triggered if [`shouldRecord`](#sho
 
 `SyncHook`
 
-Called before modules are hashed.
+يُستدعى قبل إنشاء hash للـ modules.
 
 ## afterModuleHash
 
 `syncHook`
 
-Called after modules are hashed.
+يُستدعى بعد إنشاء hash للـ modules.
 
 ## beforeHash
 
 `SyncHook`
 
-Called before the compilation is hashed.
+يُستدعى قبل إنشاء hash للـ compilation.
 
 ## afterHash
 
 `SyncHook`
 
-Called after the compilation is hashed.
+يُستدعى بعد إنشاء hash للـ compilation.
 
 ## recordHash
 
 `SyncHook`
 
-Store information about record hash to the `records`. This is only triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات record hash داخل `records`. لا يُطلق إلا إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
 
 - Callback Parameters: `records`
 
@@ -339,7 +324,7 @@ Store information about record hash to the `records`. This is only triggered if
 
 `SyncHook`
 
-Store information about the `compilation` to the `records`. This is only triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات عن `compilation` داخل `records`. لا يُطلق إلا إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
 
 - Callback Parameters: `compilation` `records`
 
@@ -347,15 +332,15 @@ Store information about the `compilation` to the `records`. This is only trigger
 
 `SyncHook`
 
-Executed before module assets creation.
+يُنفّذ قبل إنشاء module assets.
 
 ## additionalChunkAssets
 
 `SyncHook`
 
-W> `additionalChunkAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `additionalChunkAssets` مهمل. استخدم [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
 
-Create additional assets for the chunks.
+ينشئ assets إضافية للـ chunks.
 
 - Callback Parameters: `chunks`
 
@@ -363,22 +348,21 @@ Create additional assets for the chunks.
 
 `SyncBailHook`
 
-Called to determine whether or not generate chunks assets. Returning anything `!== false` will allow chunk assets generation.
+يُستدعى لتحديد هل يجب توليد chunk assets أم لا. إرجاع أي شيء `!== false` سيسمح بتوليد chunk assets.
 
 ## beforeChunkAssets
 
 `SyncHook`
 
-Executed before creating the chunks assets.
+يُنفّذ قبل إنشاء chunk assets.
 
 ## additionalAssets
 
 `AsyncSeriesHook`
 
-W> `additionalAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) hook instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `additionalAssets` مهمل. استخدم hook [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
 
-Create additional assets for the compilation. This hook can be used to download
-an image, for example:
+ينشئ assets إضافية للـ compilation. يمكن استخدام هذا hook لتنزيل صورة، مثلًا:
 
 ```js
 compilation.hooks.additionalAssets.tapAsync("MyPlugin", (callback) => {
@@ -399,15 +383,13 @@ compilation.hooks.additionalAssets.tapAsync("MyPlugin", (callback) => {
 
 `AsyncSeriesHook`
 
-W> `optimizeChunkAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `optimizeChunkAssets` مهمل. استخدم [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
 
-Optimize any chunk assets. The assets are stored in `compilation.assets`. A
-`Chunk` has a property `files` which points to all files created by a chunk.
-Any additional chunk assets are stored in `compilation.additionalChunkAssets`.
+يحسّن أي chunk assets. يتم تخزين assets داخل `compilation.assets`. يملك `Chunk` خاصية `files` تشير إلى كل الملفات التي أنشأها chunk. وأي chunk assets إضافية تُخزن داخل `compilation.additionalChunkAssets`.
 
 - Callback Parameters: `chunks`
 
-Here's an example that adds a banner to each chunk.
+هذا مثال يضيف banner لكل chunk.
 
 ```js
 compilation.hooks.optimizeChunkAssets.tapAsync(
@@ -432,13 +414,13 @@ compilation.hooks.optimizeChunkAssets.tapAsync(
 
 `SyncHook`
 
-W> `afterOptimizeChunkAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `afterOptimizeChunkAssets` مهمل. استخدم [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
 
-The chunk assets have been optimized.
+تم تحسين chunk assets.
 
 - Callback Parameters: `chunks`
 
-Here's an example plugin from [@boopathi](https://github.com/boopathi) that outputs exactly what went into each chunk.
+هذا مثال plugin من [@boopathi](https://github.com/boopathi) يطبع بالضبط ما دخل في كل chunk.
 
 ```js
 compilation.hooks.afterOptimizeChunkAssets.tap("MyPlugin", (chunks) => {
@@ -456,9 +438,9 @@ compilation.hooks.afterOptimizeChunkAssets.tap("MyPlugin", (chunks) => {
 
 `AsyncSeriesHook`
 
-W> `optimizeAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) hook instead)
+W> `optimizeAssets` مهمل. استخدم hook [Compilation.hook.processAssets](#processassets) بدلًا منه.
 
-Optimize all assets stored in `compilation.assets`.
+يحسّن كل assets المخزنة داخل `compilation.assets`.
 
 - Callback Parameters: `assets`
 
@@ -466,9 +448,9 @@ Optimize all assets stored in `compilation.assets`.
 
 `SyncHook`
 
-W> `afterOptimizeAssets` is deprecated (use the [Compilation.hook.afterProcessAssets](#afterprocessassets) hook instead)
+W> `afterOptimizeAssets` مهمل. استخدم hook [Compilation.hook.afterProcessAssets](#afterprocessassets) بدلًا منه.
 
-The assets have been optimized.
+تم تحسين assets.
 
 - Callback Parameters: `assets`
 
@@ -476,25 +458,25 @@ The assets have been optimized.
 
 `AsyncSeriesHook`
 
-Asset processing.
+معالجة assets.
 
 **Hook parameters:**
 
-- `name: string` — a name of the plugin
-- `stage: Stage` — a stage to tap into (see the [list of supported stages](#list-of-asset-processing-stages) below)
-- `additionalAssets?: true | (assets, [callback]) => (void | Promise<void>)` — a callback for additional assets ([see below](#additional-assets))
+- `name: string` — اسم plugin.
+- `stage: Stage` — المرحلة التي ستدخل إليها. راجع [قائمة المراحل المدعومة](#list-of-asset-processing-stages) أدناه.
+- `additionalAssets?: true | (assets, [callback]) => (void | Promise<void>)` — callback للـ assets الإضافية. راجع [أدناه](#additional-assets).
 
 **Callback parameters:**
 
-- `assets: { [pathname: string]: Source }` — a plain object, where key is the asset's pathname, and the value is data of the asset represented by the [`Source`](https://github.com/webpack/webpack-sources#source).
+- `assets: { [pathname: string]: Source }` — كائن عادي يكون مفتاحه pathname الخاص بالـ asset، وقيمته بيانات asset ممثلة بواسطة [`Source`](https://github.com/webpack/webpack-sources#source).
 
-**Example:**
+**مثال:**
 
 ```js
 compilation.hooks.processAssets.tap(
   {
     name: "MyPlugin",
-    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages
+    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // راجع أدناه لمراحل أكثر
   },
   (assets) => {
     console.log("List of assets and their sizes:");
@@ -507,11 +489,11 @@ compilation.hooks.processAssets.tap(
 
 ### Additional assets
 
-In addition to `name` and `stage`, you can pass an `additionalAssets` <Badge text='5.8.0+' /> option which accepts either a value of `true` or a callback function that receives `assets` as a first argument:
+بالإضافة إلى `name` و`stage`، يمكنك تمرير خيار `additionalAssets` <Badge text='5.8.0+' />، وهو يقبل إما القيمة `true` أو callback يستقبل `assets` كأول argument:
 
-1. `true` — run the provided callback again for assets added later by plugins.
+1. `true` — يشغّل callback المقدم مرة أخرى للـ assets التي تضيفها plugins لاحقًا.
 
-   In this mode, the callback will be called multiple times: once for assets added prior to the specified stage, and additional times for assets added by plugins later (on this or next stages).
+   في هذا الوضع، قد يُستدعى callback عدة مرات: مرة للـ assets المضافة قبل المرحلة المحددة، ومرات إضافية للـ assets التي تضيفها plugins لاحقًا في هذه المرحلة أو المراحل التالية.
 
    ```js
    compilation.hooks.processAssets.tap(
@@ -521,12 +503,12 @@ In addition to `name` and `stage`, you can pass an `additionalAssets` <Badge tex
        additionalAssets: true,
      },
      (assets) => {
-       // this function will be called multiple times with each bulk of assets
+       // ستُستدعى هذه الدالة عدة مرات مع كل دفعة من assets
      },
    );
    ```
 
-2. `(assets, [callback]) => (void | Promise<void>)` — run the specified callback against assets added by plugins later (on this or next stages). The callback must respect the type of the tap method used (e.g. when used with `tapPromise()`, it should return a promise).
+2. `(assets, [callback]) => (void | Promise<void>)` — يشغّل callback المحدد على assets التي تضيفها plugins لاحقًا في هذه المرحلة أو المراحل التالية. يجب أن يحترم callback نوع tap method المستخدمة؛ مثلًا عند استخدام `tapPromise()` يجب أن يرجع promise.
 
    ```js
    compilation.hooks.processAssets.tap(
@@ -534,40 +516,40 @@ In addition to `name` and `stage`, you can pass an `additionalAssets` <Badge tex
        name: "MyPlugin",
        stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
        additionalAssets: (assets) => {
-         // this function potentially could be called multiple times for assets added on later stages
+         // قد تُستدعى هذه الدالة عدة مرات للـ assets المضافة في مراحل لاحقة
        },
      },
      (assets) => {
-       // this function will be called once with assets added by plugins on prior stages
+       // ستُستدعى هذه الدالة مرة واحدة للـ assets التي أضافتها plugins في مراحل سابقة
      },
    );
    ```
 
 ### List of asset processing stages
 
-Here's a list of supported stages (in the order of processing):
-
-- `PROCESS_ASSETS_STAGE_ADDITIONAL` — add additional assets to the compilation.
-- `PROCESS_ASSETS_STAGE_PRE_PROCESS` — basic preprocessing of the assets.
-- `PROCESS_ASSETS_STAGE_DERIVED` — derive new assets from the existing assets.
-- `PROCESS_ASSETS_STAGE_ADDITIONS` — add additional sections to the existing assets e.g. banner or initialization code.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE` — optimize existing assets in a general way.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT` — optimize the count of existing assets, e.g. by merging them.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY` — optimize the compatibility of existing assets, e.g. add polyfills or vendor prefixes.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE` — optimize the size of existing assets, e.g. by minimizing or omitting whitespace.
-- `PROCESS_ASSETS_STAGE_DEV_TOOLING` — add development tooling to the assets, e.g. by extracting a source map.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE` <Badge text='5.8.0+' /> — optimize the numbers of existing assets, e.g. by inlining assets into other assets.
-- `PROCESS_ASSETS_STAGE_SUMMARIZE` — summarize the list of existing assets.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_HASH` — optimize the hashes of the assets, e.g. by generating real hashes of the asset content.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER` — optimize the transfer of existing assets, e.g. by preparing a compressed (gzip) file as separate asset.
-- `PROCESS_ASSETS_STAGE_ANALYSE` — analyze the existing assets.
-- `PROCESS_ASSETS_STAGE_REPORT` — creating assets for the reporting purposes.
+هذه قائمة بالمراحل المدعومة، مرتبة حسب ترتيب المعالجة:
+
+- `PROCESS_ASSETS_STAGE_ADDITIONAL` — إضافة assets إضافية إلى compilation.
+- `PROCESS_ASSETS_STAGE_PRE_PROCESS` — معالجة أولية أساسية للـ assets.
+- `PROCESS_ASSETS_STAGE_DERIVED` — اشتقاق assets جديدة من assets الموجودة.
+- `PROCESS_ASSETS_STAGE_ADDITIONS` — إضافة أقسام إضافية إلى assets الموجودة، مثل banner أو كود تهيئة.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE` — تحسين assets الموجودة بشكل عام.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT` — تحسين عدد assets الموجودة، مثل دمجها.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY` — تحسين توافق assets الموجودة، مثل إضافة polyfills أو vendor prefixes.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE` — تحسين حجم assets الموجودة، مثل التصغير أو حذف المسافات.
+- `PROCESS_ASSETS_STAGE_DEV_TOOLING` — إضافة أدوات تطوير إلى assets، مثل استخراج source map.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE` <Badge text='5.8.0+' /> — تحسين عدد assets الموجودة، مثل تضمين assets داخل assets أخرى.
+- `PROCESS_ASSETS_STAGE_SUMMARIZE` — تلخيص قائمة assets الموجودة.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_HASH` — تحسين hashes الخاصة بـ assets، مثل توليد hashes حقيقية من محتوى asset.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER` — تحسين نقل assets الموجودة، مثل تجهيز ملف مضغوط gzip كـ asset منفصل.
+- `PROCESS_ASSETS_STAGE_ANALYSE` — تحليل assets الموجودة.
+- `PROCESS_ASSETS_STAGE_REPORT` — إنشاء assets لأغراض التقارير.
 
 ### Assets info
 
-The "asset info" metadata is not automatically provided for this hook. If needed, you will have to resolve this metadata manually using the compilation instance and the provided asset pathname. This will be improved in a future version of the webpack.
+لا يتم توفير metadata الخاصة بـ "asset info" تلقائيًا لهذا hook. إذا احتجتها، فعليك حل هذه metadata يدويًا باستخدام instance الخاصة بـ compilation وpathname الخاص بالـ asset. سيتم تحسين هذا في إصدار مستقبلي من webpack.
 
-**Example:**
+**مثال:**
 
 ```js
 compilation.hooks.processAssets.tap(
@@ -577,7 +559,7 @@ compilation.hooks.processAssets.tap(
   (assets) => {
     for (const [pathname, source] of Object.entries(assets)) {
       const assetInfo = compilation.assetsInfo.get(pathname);
-      // @todo: do something with "pathname", "source" and "assetInfo"
+      // @todo: افعل شيئًا مع "pathname" و"source" و"assetInfo"
     }
   },
 );
@@ -587,25 +569,25 @@ compilation.hooks.processAssets.tap(
 
 `SyncHook`
 
-Called after the [`processAssets`](#processassets) hook had finished without error.
+يُستدعى بعد انتهاء hook [`processAssets`](#processassets) بدون خطأ.
 
 ## needAdditionalSeal
 
 `SyncBailHook`
 
-Called to determine if the compilation needs to be unsealed to include other files.
+يُستدعى لتحديد هل يحتاج compilation إلى unseal لإضافة ملفات أخرى.
 
 ## afterSeal
 
 `AsyncSeriesHook`
 
-Executed right after `needAdditionalSeal`.
+يُنفّذ مباشرة بعد `needAdditionalSeal`.
 
 ## chunkHash
 
 `SyncHook`
 
-Triggered to emit the hash for each chunk.
+يُطلق لإصدار hash لكل chunk.
 
 - Callback Parameters: `chunk` `chunkHash`
 
@@ -613,7 +595,7 @@ Triggered to emit the hash for each chunk.
 
 `SyncHook`
 
-Called when an asset from a module was added to the compilation.
+يُستدعى عندما تتم إضافة asset من module إلى compilation.
 
 - Callback Parameters: `module` `filename`
 
@@ -621,7 +603,7 @@ Called when an asset from a module was added to the compilation.
 
 `SyncHook`
 
-Triggered when an asset from a chunk was added to the compilation.
+يُطلق عندما تتم إضافة asset من chunk إلى compilation.
 
 - Callback Parameters: `chunk` `filename`
 
@@ -629,7 +611,7 @@ Triggered when an asset from a chunk was added to the compilation.
 
 `SyncWaterfallHook`
 
-Called to determine the path of an asset.
+يُستدعى لتحديد مسار asset.
 
 - Callback Parameters: `path` `options`
 
@@ -637,29 +619,29 @@ Called to determine the path of an asset.
 
 `SyncBailHook`
 
-Called to determine if an asset needs to be processed further after being emitted.
+يُستدعى لتحديد ما إذا كان asset يحتاج معالجة إضافية بعد إصداره.
 
 ## childCompiler
 
 `SyncHook`
 
-Executed after setting up a child compiler.
+يُنفّذ بعد إعداد child compiler.
 
 - Callback Parameters: `childCompiler` `compilerName` `compilerIndex`
 
 ## normalModuleLoader
 
-Since webpack v5 `normalModuleLoader` hook was removed. Now to access the loader use `NormalModule.getCompilationHooks(compilation).loader` instead.
+منذ webpack v5، تمت إزالة hook المسمى `normalModuleLoader`. للوصول إلى loader الآن، استخدم `NormalModule.getCompilationHooks(compilation).loader` بدلًا منه.
 
 ## statsPreset
 
 `HookMap`
 
-This HookMap is like a list of actions that gets triggered when a preset is used. It takes in an options object. When a plugin manages a preset, it should change settings in this object carefully without replacing existing ones.
+هذا HookMap يشبه قائمة إجراءات تُطلق عند استخدام preset. يستقبل كائن options. عندما يدير plugin preset، يجب أن يغير الإعدادات داخل هذا الكائن بحذر بدون استبدال الإعدادات الموجودة.
 
 - Callback Parameters: `options` `context`
 
-Here's an illustrative plugin example:
+هذا مثال توضيحي لـ plugin:
 
 ```js
 compilation.hooks.statsPreset.for("my-preset").tap("MyPlugin", (options) => {
@@ -667,17 +649,17 @@ compilation.hooks.statsPreset.for("my-preset").tap("MyPlugin", (options) => {
 });
 ```
 
-This plugin ensures that for the preset `'my-preset'`, if the `all` option is undefined, it defaults to true.
+يضمن هذا plugin أنه بالنسبة للـ preset المسمى `'my-preset'`، إذا كان خيار `all` غير معرّف، فستصبح قيمته الافتراضية `true`.
 
 ## statsNormalize
 
 `SyncHook`
 
-This hook is used to transform an options object into a consistent format that can be easily used by subsequent hooks. It also ensures that missing options are set to their default values.
+يُستخدم هذا hook لتحويل كائن options إلى صيغة متسقة يمكن استخدامها بسهولة بواسطة hooks اللاحقة. كما يضمن ضبط الخيارات الناقصة على قيمها الافتراضية.
 
 - Callback Parameters: `options` `context`
 
-Here's an illustrative plugin example:
+هذا مثال توضيحي لـ plugin:
 
 ```js
 compilation.hooks.statsNormalize.tap("MyPlugin", (options) => {
@@ -687,11 +669,11 @@ compilation.hooks.statsNormalize.tap("MyPlugin", (options) => {
 });
 ```
 
-In this plugin, if the `myOption` is missing, it sets it to an empty array. Additionally, it ensures that `myOption` is always an array even if it was originally defined as a single value.
+في هذا plugin، إذا كان `myOption` ناقصًا، يضبطه على array فارغة. كذلك يتأكد من أن `myOption` دائمًا array حتى لو كان معرّفًا في الأصل كقيمة واحدة.
 
 ## statsFactory
 
-This hook provides access to the [`StatsFactory` class](https://github.com/webpack/webpack/blob/main/lib/stats/StatsFactory.js) for specific options.
+يوفر هذا hook وصولًا إلى الصنف [`StatsFactory`](https://github.com/webpack/webpack/blob/main/lib/stats/StatsFactory.js) لخيارات محددة.
 
 - Callback Parameters: `statsFactory` `options`
 
@@ -701,9 +683,9 @@ This hook provides access to the [`StatsFactory` class](https://github.com/webpa
 
 - Callback Parameters: `object` `data` `context`
 
-`data` contains the class. object is an object to which properties should be added. `context` provides contextual information, such as classes on the path.
+تحتوي `data` على الصنف. أما `object` فهو الكائن الذي يجب إضافة الخصائص إليه. ويوفر `context` معلومات سياقية، مثل الأصناف الموجودة في المسار.
 
-Example:
+مثال:
 
 ```js
 compilation.hooks.statsFactory.tap("MyPlugin", (statsFactory, options) => {
@@ -719,13 +701,13 @@ compilation.hooks.statsFactory.tap("MyPlugin", (statsFactory, options) => {
 
 `HookMap`
 
-Called with the result on each level.
+يُستدعى مع النتيجة على كل مستوى.
 
 - Callback Parameters: `result` `context`
 
 ## statsPrinter
 
-This hook provides access to the [`StatsPrinter` class](https://github.com/webpack/webpack/blob/main/lib/stats/StatsPrinter.js) for specific options.
+يوفر هذا hook وصولًا إلى الصنف [`StatsPrinter`](https://github.com/webpack/webpack/blob/main/lib/stats/StatsPrinter.js) لخيارات محددة.
 
 - Callback Parameters: `statsPrinter` `options`
 
@@ -733,7 +715,7 @@ This hook provides access to the [`StatsPrinter` class](https://github.com/webpa
 
 `HookMap`
 
-This hook is called when a part should be printed.
+يُستدعى هذا hook عندما يجب طباعة جزء معين.
 
 - Callback Parameters: `object` `context`
 
@@ -741,13 +723,13 @@ This hook is called when a part should be printed.
 
 `HookMap`
 
-This hook is called for the resulting string for a part.
+يُستدعى هذا hook للنص الناتج عن جزء معين.
 
 - Callback Parameters: `result` `context`
 
 ## CssModulesPlugin.getCompilationHooks(compilation)
 
-When [`experiments.css`](/configuration/experiments/#experimentscss) is enabled, the internal `CssModulesPlugin` exposes a set of per-compilation hooks for plugin authors. Access them via the static `getCompilationHooks(compilation)` method:
+عند تفعيل [`experiments.css`](/configuration/experiments/#experimentscss)، يعرض `CssModulesPlugin` الداخلي مجموعة hooks لكل compilation لمؤلفي plugins. يمكنك الوصول إليها عبر static method باسم `getCompilationHooks(compilation)`:
 
 ```js
 const webpack = require("webpack");
@@ -757,13 +739,13 @@ class MyCssPlugin {
     compiler.hooks.thisCompilation.tap("MyCssPlugin", (compilation) => {
       const hooks =
         webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
-      // tap into hooks here
+      // ادخل إلى hooks هنا
     });
   }
 }
 ```
 
-W> These hooks are only registered when `experiments.css` is enabled and may evolve while the CSS feature is experimental.
+W> لا تُسجل هذه hooks إلا عند تفعيل `experiments.css`، وقد تتغير بينما ميزة CSS ما زالت تجريبية.
 
 ### orderModules
 
@@ -771,9 +753,9 @@ W> These hooks are only registered when `experiments.css` is enabled and may evo
 
 `SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`
 
-Called once per CSS source type (CSS imports and CSS modules) with the chunk's modules pre-sorted by full module name. Taps may return an ordered `Module[]` to override webpack's default import-order topological sort, or return `undefined` to keep the default order.
+يُستدعى مرة واحدة لكل نوع CSS source، أي CSS imports وCSS modules، مع modules الخاصة بالـ chunk مرتبة مسبقًا حسب full module name. يمكن لـ taps إرجاع `Module[]` مرتبة لتجاوز topological sort الافتراضي لترتيب imports في webpack، أو إرجاع `undefined` للإبقاء على الترتيب الافتراضي.
 
-The hook is the recommended escape hatch when webpack's topological sort surfaces a `Conflicting order between css ...` warning that cannot be resolved by restructuring imports. Returning the pre-sorted array (or any deterministic order) lets the build pick a stable order without changing application code.
+هذا hook هو المخرج الموصى به عندما يظهر ترتيب webpack الطوبولوجي تحذير `Conflicting order between css ...` ولا يمكن حله بإعادة هيكلة imports. إرجاع array المرتبة مسبقًا، أو أي ترتيب deterministic، يسمح للـ build باختيار ترتيب ثابت بدون تغيير كود التطبيق.
 
 - Callback Parameters: `chunk` `modules` `compilation`
 
@@ -788,9 +770,9 @@ class CssOrderByPathPlugin {
         const hooks =
           webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
 
-        // Modules arrive pre-sorted by full module name; return as-is to
-        // enforce a deterministic file-path order across rebuilds and
-        // side-step the conflicting-order warning.
+        // تصل modules مرتبة مسبقًا حسب full module name. أرجعها كما هي
+        // لفرض ترتيب deterministic حسب مسار الملف عبر rebuilds
+        // وتجنب تحذير conflicting-order.
         hooks.orderModules.tap(
           "CssOrderByPathPlugin",
           (_chunk, modules) => modules,
@@ -801,4 +783,4 @@ class CssOrderByPathPlugin {
 }
 ```
 
-The hook is a `SyncBailHook`, so the first tap to return a non-`undefined` value wins. Subsequent taps are not invoked for that call.
+الـ hook من نوع `SyncBailHook`، لذلك أول tap يرجع قيمة غير `undefined` يفوز. لا يتم استدعاء taps اللاحقة لذلك الاستدعاء.
diff --git a/src/content/api/compilation-object.mdx b/src/content/api/compilation-object.mdx
index e2b8e2ab0112..ea8703d4defa 100644
--- a/src/content/api/compilation-object.mdx
+++ b/src/content/api/compilation-object.mdx
@@ -1,230 +1,227 @@
 ---
-title: Compilation Object
+title: كائن Compilation
 group: Objects
 sort: 14
 contributors:
-  - EugeneHlushko
-  - wizardofhogwarts
-  - jamesgeorge007
-  - snitin315
+  - RlxChap2
 ---
 
-The Compilation object has many methods and hooks available. On this page, we will list the available methods and properties.
+يحتوي كائن Compilation على كثير من الدوال والـ hooks. في هذه الصفحة نعرض الدوال والخصائص المتاحة عليه.
 
-## compilation object methods
+## دوال كائن compilation
 
 ### getStats
 
 `function`
 
-Returns Stats object for the current compilation.
+ترجع كائن Stats الخاص بالـ compilation الحالي.
 
 ### addModule
 
 `function (module, callback)`
 
-Adds a module to the current compilation.
+تضيف module إلى compilation الحالي.
 
 Parameters:
 
-- `module` - module to be added
-- `callback` - a callback after the module has been added
+- `module` - الـ module المراد إضافته.
+- `callback` - callback تُستدعى بعد إضافة module.
 
 ### getModule
 
 `function (module)`
 
-Fetches a module from a compilation by its identifier.
+تجلب module من compilation باستخدام المعرّف الخاص به.
 
 Parameters:
 
-- `module` - module to be fetched. The identifier is extracted from the module by the compilation using `module.identifier()` method.
+- `module` - الـ module المراد جلبه. يستخرج compilation المعرّف من module باستخدام الدالة `module.identifier()`.
 
 ### findModule
 
 `function (module)`
 
-Attempts to search for a module by its identifier.
+تحاول البحث عن module باستخدام المعرّف الخاص به.
 
 Parameters:
 
-- `module` - module to be searched for. The identifier is extracted from the module by the compilation using `module.identifier()` method.
+- `module` - الـ module المراد البحث عنه. يستخرج compilation المعرّف من module باستخدام الدالة `module.identifier()`.
 
 ### buildModule
 
 `function (module, optional, origin, dependencies)`
 
-Builds the given module.
+تبني module المحدد.
 
 Parameters:
 
-- `module` - the module to be built.
-- `optional` - optional flag.
-- `origin` - origin module from which this module build was requested.
-- `dependencies` - optional dependencies of the module to be built.
+- `module` - الـ module المراد بناؤه.
+- `optional` - علامة اختيارية.
+- `origin` - الـ module الأصلي الذي طلب بناء هذا module.
+- `dependencies` - dependencies اختيارية للـ module المراد بناؤه.
 
 ### processModuleDependencies
 
 `function (module, callback)`
 
-Process the given module dependencies.
+تعالج dependencies الخاصة بالـ module المحدد.
 
 Parameters:
 
-- `module` - module to be processed for the dependencies.
-- `callback` - function to be invoked when dependencies of the module had been processed.
+- `module` - الـ module الذي ستُعالج dependencies الخاصة به.
+- `callback` - دالة تُستدعى بعد انتهاء معالجة dependencies الخاصة بالـ module.
 
 ### addEntry
 
 `function (context, entry, name, callback)`
 
-Adds an entry to the compilation.
+تضيف entry إلى compilation.
 
 Parameters:
 
-- `context` - context path for entry.
-- `entry` - entry dependency.
-- `name` - the name of entry.
-- `callback` - function to be invoked when addEntry finishes.
+- `context` - مسار context الخاص بالـ entry.
+- `entry` - اعتماد entry.
+- `name` - اسم entry.
+- `callback` - دالة تُستدعى عند انتهاء `addEntry`.
 
 ### rebuildModule
 
 `function (module, thisCallback)`
 
-Triggers a re-build of the module.
+تشغّل إعادة بناء للـ module.
 
 Parameters:
 
-- `module` - module to be rebuilt.
-- `thisCallback` - function to be invoked when the module finishes rebuilding.
+- `module` - الـ module المراد إعادة بنائه.
+- `thisCallback` - دالة تُستدعى عند انتهاء إعادة بناء module.
 
 ### finish
 
 `function (callback)`
 
-Finishes compilation and invokes the given callback.
+تنهي compilation وتستدعي callback المحددة.
 
 Parameters:
 
-- `callback` - function to be invoked when the compilation has been finished.
+- `callback` - دالة تُستدعى بعد انتهاء compilation.
 
 ### seal
 
 `function (callback)`
 
-Seals the compilation.
+تعمل seal للـ compilation.
 
 Parameters:
 
-- `callback` - function to be invoked when the compilation has been sealed.
+- `callback` - دالة تُستدعى بعد عمل seal للـ compilation.
 
 ### unseal
 
 `function`
 
-Unseals the compilation.
+تلغي seal الخاص بالـ compilation.
 
 Parameters:
 
-- `callback` - function to be invoked when the compilation has been unsealed.
+- `callback` - دالة تُستدعى بعد إلغاء seal للـ compilation.
 
 ### reportDependencyErrorsAndWarnings
 
 `function (module, blocks)`
 
-Adds errors and warnings of the given module to the compilation errors and warnings.
+تضيف أخطاء وتحذيرات module المحدد إلى أخطاء وتحذيرات compilation.
 
 Parameters:
 
-- `module` - the module whose errors and warnings are to be reported.
-- `blocks` - a set of dependency blocks to report from.
+- `module` - الـ module الذي سيتم الإبلاغ عن أخطائه وتحذيراته.
+- `blocks` - مجموعة dependency blocks سيتم الإبلاغ منها.
 
 ### addChunkInGroup
 
 `function (groupOptions, module, loc, request)`
 
-Adds module to an existing chunk group or creates a new one. Returns a `chunkGroup`.
+تضيف module إلى chunk group موجود، أو تنشئ chunk group جديدًا. ترجع `chunkGroup`.
 
 Parameters:
 
-- `groupOptions` - options for the chunk group.
-- `module` - a module that references the chunk group.
-- `loc` - the location from which the chunk group is referenced (inside of the module).
-- `request` - the request from which the chunk group is referenced.
+- `groupOptions` - خيارات chunk group.
+- `module` - module يشير إلى chunk group.
+- `loc` - المكان الذي تمت منه الإشارة إلى chunk group داخل module.
+- `request` - request الذي تمت منه الإشارة إلى chunk group.
 
 ### addChunk
 
 `function (name)`
 
-Creates and adds a new chunk to the `compilation.chunks`. Returns that `chunk`.
+تنشئ chunk جديدًا وتضيفه إلى `compilation.chunks`. ترجع ذلك `chunk`.
 
 Parameters:
 
-- `name` - the name of the chunk.
+- `name` - اسم chunk.
 
 ### assignDepth
 
 `function (module)`
 
-Assigns `depth` to the given module and its dependency blocks recursively.
+تعيّن `depth` للـ module المحدد ولـ dependency blocks الخاصة به بشكل متكرر.
 
 Parameters:
 
-- `module` - the module to assign depth to.
+- `module` - الـ module المراد تعيين depth له.
 
 ### getDependencyReference
 
 `function (module, dependency)`
 
-Returns the reference to the dependency from a given module.
+ترجع reference الخاص بالـ dependency من module محدد.
 
 Parameters:
 
-- `module` - the module at question.
-- `dependency` - the dependency to get reference to.
+- `module` - الـ module المعني.
+- `dependency` - الـ dependency المراد جلب reference له.
 
 ### processDependenciesBlocksForChunkGroups
 
 `function (inputChunkGroups)`
 
-Creates the `Chunk` graph from the `Module` graph. The process is done in two phases. Phase one: traverse the module graph and build a basic chunks graph in `chunkDependencies`. Phase two: traverse every possible way through the basic chunk graph and track the available modules. While traversing, `processDependenciesBlocksForChunkGroups` connects chunks with each other and `Blocks` with `Chunks`. It stops traversing when all modules for a chunk are already available and it doesn't connect unneeded chunks.
+تنشئ graph خاصًا بـ `Chunk` من graph الخاص بـ `Module`. تتم العملية على مرحلتين. في المرحلة الأولى، يتم المرور على module graph وبناء chunks graph أساسي داخل `chunkDependencies`. في المرحلة الثانية، يتم المرور على كل طريق ممكن داخل chunk graph الأساسي وتتبع modules المتاحة. أثناء المرور، تربط `processDependenciesBlocksForChunkGroups` بين chunks وبعضها، وبين `Blocks` و`Chunks`. وتتوقف عن المرور عندما تكون كل modules الخاصة بـ chunk متاحة بالفعل، ولا تربط chunks غير ضرورية.
 
 Parameters:
 
-- `inputChunkGroups` - chunk groups that are processed.
+- `inputChunkGroups` - chunk groups التي ستتم معالجتها.
 
 ### removeReasonsOfDependencyBlock
 
 `function (module, block)`
 
-Removes relation of the module to the dependency block.
+تزيل علاقة module مع dependency block.
 
 Parameters:
 
-- `module` - a module relationship to be removed.
+- `module` - علاقة module المراد إزالتها.
 - `block` - dependency block.
 
 ### patchChunksAfterReasonRemoval
 
 `function (module, chunk)`
 
-Patches ties of module and chunk after removing dependency reasons. Called automatically by `removeReasonsOfDependencyBlock`.
+تعدّل الروابط بين module وchunk بعد إزالة أسباب dependency. تُستدعى تلقائيًا بواسطة `removeReasonsOfDependencyBlock`.
 
 Parameters:
 
-- `module` - a module to patch tie.
-- `chunk` - a chunk to patch tie.
+- `module` - الـ module المراد تعديل رابطه.
+- `chunk` - الـ chunk المراد تعديل رابطه.
 
 ### removeChunkFromDependencies
 
 `function (block, chunk)`
 
-Removes given chunk from a dependencies block module and chunks after removing dependency reasons. Called automatically by `removeReasonsOfDependencyBlock`.
+تزيل chunk محددًا من dependency block module ومن chunks بعد إزالة أسباب dependency. تُستدعى تلقائيًا بواسطة `removeReasonsOfDependencyBlock`.
 
 Parameters:
 
-- `block` - block tie for `Chunk`.
-- `chunk` - a chunk to remove from dependencies.
+- `block` - رابط block الخاص بـ `Chunk`.
+- `chunk` - الـ chunk المراد إزالته من dependencies.
 
 ### sortItemsWithChunkIds
 
@@ -250,35 +247,35 @@ Parameters:
 
 `function (filename, data)`
 
-Returns the interpolated path.
+ترجع المسار بعد تطبيق قيم القوالب داخله.
 
 Parameters:
 
-- `filename` - used to get asset path with hash.
-- `data` - data object.
+- `filename` - يُستخدم للحصول على مسار asset مع hash.
+- `data` - كائن البيانات.
 
 ### getPathWithInfo
 
 `function (filename, data)`
 
-Returns interpolated path and asset information.
+ترجع المسار بعد تطبيق القيم، مع معلومات asset.
 
 Parameters:
 
-- `filename` - used to get asset path with hash.
-- `data` - data object.
+- `filename` - يُستخدم للحصول على مسار asset مع hash.
+- `data` - كائن البيانات.
 
 ### createChildCompiler
 
 `function (name, outputOptions, plugins)`
 
-Allows running another instance of webpack inside of webpack. However, as a child with different settings and configurations applied. It copies all hooks and plugins from the parent (or top-level compiler) and creates a child `Compiler` instance. Returns the created `Compiler`.
+تسمح بتشغيل instance أخرى من webpack داخل webpack، لكن كـ child بإعدادات وخيارات مختلفة. تنسخ كل hooks وplugins من parent أو top-level compiler، ثم تنشئ instance فرعية من `Compiler`. ترجع كائن `Compiler` الذي تم إنشاؤه.
 
 Parameters:
 
-- `name` - name for the child `Compiler`.
-- `outputOptions` - output options object.
-- `plugins` - webpack plugins that will be applied.
+- `name` - اسم `Compiler` الفرعي.
+- `outputOptions` - كائن خيارات output.
+- `plugins` - webpack plugins التي سيتم تطبيقها.
 
 ### checkConstraints
 
@@ -290,9 +287,9 @@ Parameters:
 
 Parameters:
 
-- `file` - file name of the asset
-- `source` - the source of the asset
-- `assetInfo` - additional asset information
+- `file` - اسم ملف asset.
+- `source` - مصدر asset.
+- `assetInfo` - معلومات إضافية عن asset.
 
 ### updateAsset
 
@@ -300,9 +297,9 @@ Parameters:
 
 Parameters:
 
-- `file` - file name of the asset
-- `newSourceOrFunction` - new asset source or function converting old to new
-- `assetInfoUpdateOrFunction` - new asset info or function converting old to new
+- `file` - اسم ملف asset.
+- `newSourceOrFunction` - مصدر asset الجديد، أو دالة تحول المصدر القديم إلى جديد.
+- `assetInfoUpdateOrFunction` - معلومات asset الجديدة، أو دالة تحول المعلومات القديمة إلى جديدة.
 
 ### deleteAsset
 
@@ -310,13 +307,13 @@ Parameters:
 
 Parameters:
 
-- `file` - file name of the asset
+- `file` - اسم ملف asset.
 
 ### getAssets
 
 `function`
 
-Returns array of all assets under the current compilation.
+ترجع array تحتوي على كل assets الموجودة تحت compilation الحالي.
 
 ### getAsset
 
@@ -324,4 +321,4 @@ Returns array of all assets under the current compilation.
 
 Parameters:
 
-- `name` - the name of the asset to return
+- `name` - اسم asset المطلوب إرجاعه.
diff --git a/src/content/api/compiler-hooks.mdx b/src/content/api/compiler-hooks.mdx
index d0ecb8d09794..2293ab28f6e9 100644
--- a/src/content/api/compiler-hooks.mdx
+++ b/src/content/api/compiler-hooks.mdx
@@ -3,39 +3,22 @@ title: Compiler Hooks
 group: Plugins
 sort: 9
 contributors:
-  - rishantagarwal
-  - byzyk
-  - madhavarshney
-  - misterdev
-  - EugeneHlushko
-  - superburrito
-  - chenxsan
-  - snitin315
+  - RlxChap2
 ---
 
-The `Compiler` module is the main engine that creates a compilation instance
-with all the options passed through the [CLI](/api/cli) or [Node API](/api/node). It extends the
-`Tapable` class in order to register and call plugins. Most user-facing plugins
-are first registered on the `Compiler`.
+يُعد module المسمى `Compiler` المحرك الرئيسي الذي ينشئ instance من compilation باستخدام كل الخيارات القادمة من [CLI](/api/cli) أو [Node API](/api/node). يرث `Compiler` من الصنف `Tapable` حتى يتمكن من تسجيل plugins واستدعائها. أغلب plugins التي يتعامل معها المستخدم تُسجل أولًا على `Compiler`.
 
-When developing a plugin for webpack, you might want to know where each hook is called. To learn this, search for `hooks.<hook name>.call` across the webpack source.
+عند تطوير plugin لـ webpack، قد تحتاج إلى معرفة أين يتم استدعاء كل hook. لمعرفة ذلك، ابحث عن `hooks.<hook name>.call` داخل مصدر webpack.
 
-W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+W> منذ webpack 5، لم تعد `hooks` قابلة للتمديد مباشرة. استخدم `WeakMap` لإضافة hooks مخصصة.
 
 ## Watching
 
-The `Compiler` supports [watching](/api/node/#watching) which monitors the file
-system and recompiles as files change. When in watch mode, the compiler will
-emit the additional events such as `watchRun`, `watchClose`, and `invalid`.
-This is typically used in [development](/guides/development), usually under
-the hood of tools like `webpack-dev-server`, so that the developer doesn't
-need to re-compile manually every time. Watch mode can also be entered via the
-[CLI](/api/cli/#watch-options).
+يدعم `Compiler` وضع [watching](/api/node/#watching)، وفيه يراقب نظام الملفات ويعيد compilation عند تغيّر الملفات. عند استخدام watch mode، يطلق compiler أحداثًا إضافية مثل `watchRun` و`watchClose` و`invalid`. يستخدم هذا غالبًا أثناء [development](/guides/development)، عادةً من خلال أدوات مثل `webpack-dev-server`، حتى لا يحتاج المطور إلى إعادة compilation يدويًا في كل مرة. ويمكن تفعيل watch mode أيضًا من [CLI](/api/cli/#watch-options).
 
 ## Hooks
 
-The following lifecycle hooks are exposed by the `compiler` and can be accessed
-as such:
+يعرض `compiler` hooks التالية ضمن دورة حياته، ويمكن الوصول إليها بهذا الشكل:
 
 ```js
 compiler.hooks.someHook.tap("MyPlugin", (params) => {
@@ -43,29 +26,29 @@ compiler.hooks.someHook.tap("MyPlugin", (params) => {
 });
 ```
 
-Depending on the hook type, `tapAsync` and `tapPromise` may also be available.
+بحسب نوع hook، قد تكون `tapAsync` و`tapPromise` متاحتين أيضًا.
 
-For the description of hook types, see [the Tapable docs](https://github.com/webpack/tapable#tapable).
+لوصف أنواع hooks، راجع [توثيق Tapable](https://github.com/webpack/tapable#tapable).
 
 ### environment
 
 `SyncHook`
 
-Called while preparing the compiler environment, right after initializing the plugins in the configuration file.
+يُستدعى أثناء تجهيز بيئة compiler، مباشرة بعد تهيئة plugins الموجودة في ملف الإعدادات.
 
 ### afterEnvironment
 
 `SyncHook`
 
-Called right after the `environment` hook, when the compiler environment setup is complete.
+يُستدعى مباشرة بعد hook المسمى `environment`، عندما يكتمل إعداد بيئة compiler.
 
 ### entryOption
 
 `SyncBailHook`
 
-Called after the [`entry` configuration](/configuration/entry-context/#entry) from webpack options has been processed.
+يُستدعى بعد معالجة [إعداد `entry`](/configuration/entry-context/#entry) من خيارات webpack.
 
-- Callback Parameters: [`context`](/configuration/entry-context/#context), [`entry`](/configuration/entry-context/#entry)
+- Parameters الخاصة بالـ callback: [`context`](/configuration/entry-context/#context)، [`entry`](/configuration/entry-context/#entry)
 
 ```js
 compiler.hooks.entryOption.tap("MyPlugin", (context, entry) => {
@@ -77,17 +60,17 @@ compiler.hooks.entryOption.tap("MyPlugin", (context, entry) => {
 
 `SyncHook`
 
-Called after setting up initial set of internal plugins.
+يُستدعى بعد إعداد المجموعة الأولية من plugins الداخلية.
 
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
 
 ### afterResolvers
 
 `SyncHook`
 
-Triggered after resolver setup is complete.
+يُطلق بعد اكتمال إعداد resolvers.
 
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
 
 ### validate
 
@@ -95,9 +78,9 @@ Triggered after resolver setup is complete.
 
 <Badge text="5.106.0+" />
 
-Called to register validation work for webpack configuration, plugins, and loaders. Plugin authors can tap this hook and use `compiler.validate(...)` to participate in webpack's built-in validation flow.
+يُستدعى لتسجيل أعمال التحقق من إعدادات webpack وplugins وloaders. يستطيع مؤلفو plugins استخدام هذا hook واستدعاء `compiler.validate(...)` للمشاركة في مسار التحقق المدمج داخل webpack.
 
-W> The hook is always available. `compiler.validate(...)` skips validation when `validate: false` is set. With `experiments.futureDefaults`, webpack keeps validation enabled by default in development and disables it by default in production.
+W> هذا hook متاح دائمًا. تتجاوز `compiler.validate(...)` عملية التحقق عند ضبط `validate: false`. ومع `experiments.futureDefaults`، يبقي webpack التحقق مفعّلًا افتراضيًا في development ويعطله افتراضيًا في production.
 
 ```js
 compiler.hooks.validate.tap("MyPlugin", () => {
@@ -114,57 +97,57 @@ compiler.hooks.validate.tap("MyPlugin", () => {
 
 `SyncHook`
 
-Called when a compiler object is initialized.
+يُستدعى عند تهيئة كائن compiler.
 
 ### beforeRun
 
 `AsyncSeriesHook`
 
-Adds a hook right before running the compiler.
+يضيف hook قبل تشغيل compiler مباشرة.
 
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
 
 ### run
 
 `AsyncSeriesHook`
 
-Hook into the compiler before it begins reading [`records`](/configuration/other-options/#recordspath).
+يدخل إلى compiler قبل أن يبدأ بقراءة [`records`](/configuration/other-options/#recordspath).
 
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
 
 ### watchRun
 
 `AsyncSeriesHook`
 
-Executes a plugin during watch mode after a new compilation is triggered but before the compilation is actually started.
+ينفّذ plugin أثناء watch mode بعد تشغيل compilation جديد، وقبل أن يبدأ compilation فعليًا.
 
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
 
 ### normalModuleFactory
 
 `SyncHook`
 
-Called after a [NormalModuleFactory](/api/normalmodulefactory-hooks) is created.
+يُستدعى بعد إنشاء [NormalModuleFactory](/api/normalmodulefactory-hooks).
 
-- Callback Parameters: `normalModuleFactory`
+- Parameters الخاصة بالـ callback: `normalModuleFactory`
 
 ### contextModuleFactory
 
 `SyncHook`
 
-Runs a plugin after a [ContextModuleFactory](/api/contextmodulefactory-hooks) is created.
+يشغّل plugin بعد إنشاء [ContextModuleFactory](/api/contextmodulefactory-hooks).
 
-- Callback Parameters: `contextModuleFactory`
+- Parameters الخاصة بالـ callback: `contextModuleFactory`
 
 ### beforeCompile
 
 `AsyncSeriesHook`
 
-Executes a plugin after compilation parameters are created.
+ينفّذ plugin بعد إنشاء parameters الخاصة بـ compilation.
 
-- Callback Parameters: `compilationParams`
+- Parameters الخاصة بالـ callback: `compilationParams`
 
-The `compilationParams` variable is initialized as follows:
+يتم تهيئة المتغير `compilationParams` بهذا الشكل:
 
 ```js
 compilationParams = {
@@ -173,7 +156,7 @@ compilationParams = {
 };
 ```
 
-This hook can be used to add/modify the compilation parameters:
+يمكن استخدام هذا hook لإضافة أو تعديل parameters الخاصة بـ compilation:
 
 ```js
 compiler.hooks.beforeCompile.tapAsync("MyPlugin", (params, callback) => {
@@ -186,55 +169,55 @@ compiler.hooks.beforeCompile.tapAsync("MyPlugin", (params, callback) => {
 
 `SyncHook`
 
-Called right after `beforeCompile`, before a new compilation is created. This hook is _not_ copied to child compilers.
+يُستدعى مباشرة بعد `beforeCompile`، وقبل إنشاء compilation جديد. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `compilationParams`
+- Parameters الخاصة بالـ callback: `compilationParams`
 
 ### thisCompilation
 
 `SyncHook`
 
-Executed while initializing the compilation, right before emitting the `compilation` event. This hook is _not_ copied to child compilers.
+يُنفّذ أثناء تهيئة compilation، مباشرة قبل إطلاق حدث `compilation`. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `compilation`, `compilationParams`
+- Parameters الخاصة بالـ callback: `compilation`, `compilationParams`
 
 ### compilation
 
 `SyncHook`
 
-Runs a plugin after a compilation has been created.
+يشغّل plugin بعد إنشاء compilation.
 
-- Callback Parameters: `compilation`, `compilationParams`
+- Parameters الخاصة بالـ callback: `compilation`, `compilationParams`
 
 ### make
 
 `AsyncParallelHook`
 
-Executed before finishing the compilation. This hook is _not_ copied to child compilers.
+يُنفّذ قبل إنهاء compilation. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
 
 ### afterCompile
 
 `AsyncSeriesHook`
 
-Called after finishing and sealing the compilation.
+يُستدعى بعد إنهاء compilation وعمل seal له.
 
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
 
 ### shouldEmit
 
 `SyncBailHook`
 
-Called before emitting assets. Should return a boolean telling whether to emit.
+يُستدعى قبل إخراج assets. يجب أن يرجع قيمة boolean توضّح هل سيتم الإخراج أم لا.
 
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
 
 ```js
 compiler.hooks.shouldEmit.tap(
   "MyPlugin",
   (compilation) =>
-    // return true to emit the output, otherwise false
+    // أرجع true لإخراج الملفات، أو false لمنع الإخراج
     true,
 );
 ```
@@ -243,27 +226,27 @@ compiler.hooks.shouldEmit.tap(
 
 `AsyncSeriesHook`
 
-Executed right before emitting assets to output dir. This hook is _not_ copied to child compilers.
+يُنفّذ مباشرة قبل إخراج assets إلى مجلد output. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
 
 ### afterEmit
 
 `AsyncSeriesHook`
 
-Called after emitting assets to output directory. This hook is _not_ copied to child compilers.
+يُستدعى بعد إخراج assets إلى مجلد output. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
 
 ### assetEmitted
 
 `AsyncSeriesHook`
 
-Executed when an asset has been emitted. Provides access to information about the emitted asset, such as its output path and byte content.
+يُنفّذ عندما يتم إخراج asset. يتيح الوصول إلى معلومات عن asset الذي أُخرج، مثل مسار الإخراج ومحتواه بالبايت.
 
-- Callback Parameters: `file`, `info`
+- Parameters الخاصة بالـ callback: `file`, `info`
 
-For example, you may access the asset's content buffer via `info.content`:
+مثلًا، يمكنك الوصول إلى buffer الخاص بمحتوى asset عبر `info.content`:
 
 ```js
 compiler.hooks.assetEmitted.tap(
@@ -278,56 +261,56 @@ compiler.hooks.assetEmitted.tap(
 
 `AsyncSeriesHook`
 
-Executed when the compilation has completed. This hook is _not_ copied to child compilers.
+يُنفّذ عندما يكتمل compilation. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `stats`
+- Parameters الخاصة بالـ callback: `stats`
 
 ### additionalPass
 
 `AsyncSeriesHook`
 
-This hook allows you to do a one more additional pass of the build.
+يسمح لك هذا hook بتنفيذ مرور إضافي آخر لعملية build.
 
 ### failed
 
 `SyncHook`
 
-Called if the compilation fails.
+يُستدعى إذا فشل compilation.
 
-- Callback Parameters: `error`
+- Parameters الخاصة بالـ callback: `error`
 
 ### invalid
 
 `SyncHook`
 
-Executed when a watching compilation has been invalidated. This hook is _not_ copied to child compilers.
+يُنفّذ عندما يتم إبطال compilation في وضع watching. لا يتم نسخ هذا hook إلى child compilers.
 
-- Callback Parameters: `fileName`, `changeTime`
+- Parameters الخاصة بالـ callback: `fileName`, `changeTime`
 
 ### watchClose
 
 `SyncHook`
 
-Called when a watching compilation has stopped.
+يُستدعى عندما يتوقف watching compilation.
 
 ### shutdown
 
 `AsyncSeriesHook`
 
-Called when the compiler is closing.
+يُستدعى عندما يبدأ compiler بالإغلاق.
 
 ### infrastructureLog
 
 `SyncBailHook`
 
-Allows to use infrastructure logging when enabled in the configuration via [`infrastructureLogging` option](/configuration/infrastructureLogging/).
+يسمح باستخدام infrastructure logging عند تفعيله في الإعدادات عبر خيار [`infrastructureLogging`](/configuration/infrastructureLogging/).
 
-- Callback Parameters: `name`, `type`, `args`
+- Parameters الخاصة بالـ callback: `name`, `type`, `args`
 
 ### log
 
 `SyncBailHook`
 
-Allows to log into [stats](/configuration/stats/) when enabled, see [`stats.logging`, `stats.loggingDebug` and `stats.loggingTrace` options](/configuration/infrastructureLogging/).
+يسمح بالتسجيل داخل [stats](/configuration/stats/) عند تفعيله. راجع خيارات [`stats.logging` و`stats.loggingDebug` و`stats.loggingTrace`](/configuration/infrastructureLogging/).
 
-- Callback Parameters: `origin`, `logEntry`
+- Parameters الخاصة بالـ callback: `origin`, `logEntry`
diff --git a/src/content/api/contextmodulefactory-hooks.mdx b/src/content/api/contextmodulefactory-hooks.mdx
index f455fae9071c..e7e4d1fe1858 100644
--- a/src/content/api/contextmodulefactory-hooks.mdx
+++ b/src/content/api/contextmodulefactory-hooks.mdx
@@ -3,49 +3,47 @@ title: ContextModuleFactory Hooks
 group: Plugins
 sort: 11
 contributors:
-  - iguessitsokay
+  - RlxChap2
 ---
 
-The `ContextModuleFactory` module is used by the `Compiler` to generate dependencies from webpack specific [require.context](/api/module-methods/#requirecontext) API. It resolves the requested directory, generates requests for each file and filters against passed regExp. Matching dependencies then passes through [NormalModuleFactory](/api/normalmodulefactory-hooks).
+يستخدم `Compiler` الوحدة `ContextModuleFactory` لإنشاء dependencies من API الخاص بـ webpack وهو [require.context](/api/module-methods/#requirecontext). تحل هذه الوحدة المجلد المطلوب، ثم تنشئ requests لكل ملف، ثم تطبّق عليها RegExp الممرر. بعد ذلك تمر dependencies المطابقة عبر [NormalModuleFactory](/api/normalmodulefactory-hooks).
 
-The `ContextModuleFactory` class extends `Tapable` and provides the following
-lifecycle hooks. They can be tapped the same way as compiler hooks:
+ترث class `ContextModuleFactory` من `Tapable` وتوفّر lifecycle hooks التالية. يمكنك استخدام `tap` معها بالطريقة نفسها المستخدمة مع compiler hooks:
 
 ```js
 ContextModuleFactory.hooks.someHook.tap(/* ... */);
 ```
 
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+كما هو الحال مع `compiler`، قد يتوفر `tapAsync` و`tapPromise` أيضًا حسب نوع hook.
 
 ## beforeResolve
 
 `AsyncSeriesWaterfallHook`
 
-Called before resolving the requested directory. The request can be ignored by returning `false`.
+يُستدعى قبل حل المجلد المطلوب. يمكنك تجاهل request بإرجاع `false`.
 
-- Callback Parameters: `data`
+- معاملات callback: `data`
 
 ## afterResolve
 
 `AsyncSeriesWaterfallHook`
 
-Called after the requested directory resolved.
+يُستدعى بعد حل المجلد المطلوب.
 
-- Callback Parameters: `data`
+- معاملات callback: `data`
 
 ## contextModuleFiles
 
 `SyncWaterfallHook`
 
-Called after directory contents are read. On recursive mode, calls for each sub-directory as well. Callback parameter is an array of all file and folder names in each directory.
+يُستدعى بعد قراءة محتويات المجلد. في الوضع recursive، يُستدعى أيضًا لكل مجلد فرعي. معامل callback هو array تحتوي أسماء كل الملفات والمجلدات داخل كل مجلد.
 
-- Callback Parameters: `fileNames`
+- معاملات callback: `fileNames`
 
 ## alternativeRequests
 
 `AsyncSeriesWaterfallHook`
 
-Called for each file after the request is created but before filtering against regExp.
+يُستدعى لكل ملف بعد إنشاء request وقبل التصفية باستخدام RegExp.
 
-- Callback Parameters: `request` `options`
+- معاملات callback: `request` `options`
diff --git a/src/content/api/hot-module-replacement.mdx b/src/content/api/hot-module-replacement.mdx
index e83e396b4820..17469d85d3dd 100644
--- a/src/content/api/hot-module-replacement.mdx
+++ b/src/content/api/hot-module-replacement.mdx
@@ -2,12 +2,7 @@
 title: Hot Module Replacement
 sort: 4
 contributors:
-  - sokra
-  - skipjack
-  - tbroadley
-  - byzyk
-  - wizardofhogwarts
-  - snitin315
+  - RlxChap2
 related:
   - title: Concepts - Hot Module Replacement
     url: /concepts/hot-module-replacement
@@ -15,151 +10,151 @@ related:
     url: /guides/hot-module-replacement
 ---
 
-If [Hot Module Replacement](/concepts/hot-module-replacement) has been enabled via the [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin), its interface will be exposed under the [`module.hot`](/api/module-variables/#modulehot-webpack-specific) property as well as [`import.meta.webpackHot`](/api/module-variables/#importmetawebpackhot) property. Note that only `import.meta.webpackHot` can be used in [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm).
+إذا تم تفعيل [Hot Module Replacement](/concepts/hot-module-replacement) عبر [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)، فستظهر واجهته تحت الخاصية [`module.hot`](/api/module-variables/#modulehot-webpack-specific)، وكذلك تحت [`import.meta.webpackHot`](/api/module-variables/#importmetawebpackhot). لاحظ أن `import.meta.webpackHot` وحدها هي التي يمكن استخدامها داخل [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm).
 
-Typically, users will check to see if the interface is accessible, then begin working with it. As an example, here's how you might `accept` an updated module:
+عادةً يتحقق المستخدمون أولًا من توفر الواجهة، ثم يبدأون التعامل معها. هذا مثال على قبول تحديث module باستخدام `accept`:
 
 ```js
 if (module.hot) {
   module.hot.accept("./library.js", () => {
-    // Do something with the updated library module...
+    // افعل شيئًا مع library module المحدّث...
   });
 }
 
-// or
+// أو
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept("./library.js", () => {
-    // Do something with the updated library module…
+    // افعل شيئًا مع library module المحدّث...
   });
 }
 ```
 
-The following methods are supported...
+الدوال التالية مدعومة.
 
 ## Module API
 
 ### accept
 
-Accept updates for the given `dependencies` and fire a `callback` to react to those updates, in addition, you can attach an optional error handler:
+تقبل التحديثات للـ `dependencies` المحددة وتنفّذ `callback` للتعامل مع تلك التحديثات. ويمكنك أيضًا إضافة error handler اختياري:
 
 ```js
 module.hot.accept(
-  dependencies, // Either a string or an array of strings
-  callback, // Function to fire when the dependencies are updated
+  dependencies, // إما string أو array من strings
+  callback, // دالة تُنفّذ عند تحديث dependencies
   errorHandler, // (err, {moduleId, dependencyId}) => {}
 );
 
-// or
+// أو
 import.meta.webpackHot.accept(
-  dependencies, // Either a string or an array of strings
-  callback, // Function to fire when the dependencies are updated
+  dependencies, // إما string أو array من strings
+  callback, // دالة تُنفّذ عند تحديث dependencies
   errorHandler, // (err, {moduleId, dependencyId}) => {}
 );
 ```
 
-When using ESM `import` all imported symbols from `dependencies` are automatically updated. Note: The dependency string must match exactly with the `from` string in the `import`. In some cases `callback` can even be omitted. Using `require()` in the `callback` doesn't make sense here.
+عند استخدام `import` في ESM، يتم تحديث كل الرموز المستوردة من `dependencies` تلقائيًا. ملاحظة: يجب أن يطابق نص dependency النص الموجود بعد `from` في عبارة `import` بشكل كامل. وفي بعض الحالات يمكن حذف `callback` أصلًا. أما استخدام `require()` داخل `callback` فلا معنى له هنا.
 
-When using CommonJS you need to update dependencies manually by using `require()` in the `callback`. Omitting the `callback` doesn't make sense here.
+عند استخدام CommonJS، يجب تحديث dependencies يدويًا باستخدام `require()` داخل `callback`. لذلك لا يكون حذف `callback` منطقيًا هنا.
 
-#### errorHandler for accept
+#### errorHandler لـ accept
 
 `(err, {moduleId, dependencyId}) => {}`
 
-- `err`: the error thrown by the callback in second argument or during dependency execution when using ESM dependencies.
-- `moduleId`: the current module id.
-- `dependencyId`: the module id of the (first) changed dependency.
+- `err`: الخطأ الذي رماه callback في argument الثاني، أو الخطأ أثناء تنفيذ dependency عند استخدام ESM dependencies.
+- `moduleId`: معرّف module الحالي.
+- `dependencyId`: معرّف module الخاص بأول dependency تغيّر.
 
 ### accept (self)
 
-Accept updates for itself.
+يقبل التحديثات الخاصة به.
 
 ```js
 module.hot.accept(
-  errorHandler, // Function to handle errors when evaluating the new version
+  errorHandler, // دالة لمعالجة الأخطاء عند تقييم الإصدار الجديد
 );
 
-// or
+// أو
 import.meta.webpackHot.accept(
-  errorHandler, // Function to handle errors when evaluating the new version
+  errorHandler, // دالة لمعالجة الأخطاء عند تقييم الإصدار الجديد
 );
 ```
 
-When this module or dependencies are updated, this module can be disposed and re-evaluated without informing parents. This makes sense if this module has no exports (or exports are updated in another way).
+عندما يتم تحديث هذا module أو dependencies الخاصة به، يمكن التخلص من هذا module وإعادة تقييمه بدون إبلاغ parents. يكون هذا منطقيًا إذا لم يكن لهذا module أي exports، أو إذا كانت exports تُحدّث بطريقة أخرى.
 
-The `errorHandler` is fired when the evaluation of this module (or dependencies) has thrown an exception.
+يتم تشغيل `errorHandler` عندما يرمي تقييم هذا module، أو dependencies الخاصة به، exception.
 
-#### errorHandler for self accept
+#### errorHandler لـ self accept
 
 `(err, {moduleId, module}) => {}`
 
-- `err`: the error when evaluating the new version.
-- `moduleId`: the current module id.
-- `module`: the current module instance.
-  - `module.hot`: allow to use the HMR API of the errored module instance. A common scenario is to self accept it again. It also makes sense to add a dispose handler to pass data along. Note that the errored module might be already partially executed, so make sure to not get into a inconsistent state. You can use `module.hot.data` to store partial state.
-  - `module.exports`: can be overridden, but be careful since property names might be mangled in production mode.
+- `err`: الخطأ الذي حدث عند تقييم الإصدار الجديد.
+- `moduleId`: معرّف module الحالي.
+- `module`: instance الحالية من module.
+  - `module.hot`: يسمح باستخدام HMR API الخاصة بـ module instance التي حدث فيها الخطأ. سيناريو شائع هو عمل self accept لها مرة أخرى. ومن المفيد أيضًا إضافة dispose handler لتمرير البيانات. انتبه إلى أن module الذي حدث فيه الخطأ قد يكون نُفذ جزئيًا بالفعل، لذلك تأكد من عدم الدخول في حالة غير متسقة. يمكنك استخدام `module.hot.data` لتخزين حالة جزئية.
+  - `module.exports`: يمكن استبداله، لكن كن حذرًا لأن أسماء الخصائص قد يتم تغييرها في production mode.
 
 ### decline
 
-Reject updates for the given `dependencies` forcing the update to fail with a `'decline'` code.
+يرفض التحديثات للـ `dependencies` المحددة، مما يجبر التحديث على الفشل بكود `'decline'`.
 
 ```js
 module.hot.decline(
-  dependencies, // Either a string or an array of strings
+  dependencies, // إما string أو array من strings
 );
 
-// or
+// أو
 import.meta.webpackHot.decline(
-  dependencies, // Either a string or an array of strings
+  dependencies, // إما string أو array من strings
 );
 ```
 
-Flag a dependency as not-update-able. This makes sense when changing exports of this dependency can't be handled or handling is not implemented yet. Depending on your HMR management code, an update to these dependencies (or unaccepted dependencies of it) usually causes a full-reload of the page.
+يعلّم dependency على أنه غير قابل للتحديث. يكون هذا منطقيًا عندما لا يمكن التعامل مع تغيّر exports الخاصة بهذا dependency، أو عندما لم تُنفذ معالجة له بعد. بحسب كود إدارة HMR لديك، يؤدي تحديث هذه dependencies، أو dependencies غير المقبولة التابعة لها، غالبًا إلى full-reload للصفحة.
 
 ### decline (self)
 
-Reject updates for itself.
+يرفض التحديثات الخاصة به.
 
 ```js
 module.hot.decline();
 
-// or
+// أو
 import.meta.webpackHot.decline();
 ```
 
-Flag this module as not-update-able. This makes sense when this module has irreversible side-effects, or HMR handling is not implemented for this module yet. Depending on your HMR management code, an update to this module (or unaccepted dependencies) usually causes a full-reload of the page.
+يعلّم هذا module على أنه غير قابل للتحديث. يكون هذا منطقيًا عندما يملك module آثارًا جانبية لا يمكن عكسها، أو عندما لم تُنفذ معالجة HMR لهذا module بعد. بحسب كود إدارة HMR لديك، يؤدي تحديث هذا module، أو dependencies غير المقبولة، غالبًا إلى full-reload للصفحة.
 
 ### dispose (or addDisposeHandler)
 
-Add a handler which is executed when the current module code is replaced. This should be used to remove any persistent resource you have claimed or created. If you want to transfer state to the updated module, add it to the given `data` parameter. This object will be available at `module.hot.data` after the update.
+يضيف handler يُنفّذ عندما يتم استبدال كود module الحالي. استخدمه لإزالة أي resource دائم حجزته أو أنشأته. إذا أردت نقل state إلى module المحدّث، فأضفها إلى parameter المسمى `data`. سيكون هذا الكائن متاحًا في `module.hot.data` بعد التحديث.
 
 ```js
 module.hot.dispose((data) => {
-  // Clean up and pass data to the updated module...
+  // نظّف الموارد ومرر البيانات إلى module المحدّث...
 });
 
-// or
+// أو
 import.meta.webpackHot.dispose((data) => {
-  // Clean up and pass data to the updated module...
+  // نظّف الموارد ومرر البيانات إلى module المحدّث...
 });
 ```
 
 ### invalidate
 
-Calling this method will invalidate the current module, which disposes and recreates it when the HMR update is applied. This bubbles like a normal update of this module. `invalidate` can't be self-accepted by this module.
+استدعاء هذه الدالة يُبطل module الحالي، فيتم التخلص منه وإعادة إنشائه عند تطبيق تحديث HMR. ويتصاعد هذا مثل أي تحديث عادي لهذا module. لا يستطيع module نفسه قبول `invalidate` عبر self-accept.
 
-When called during the `idle` state, a new HMR update will be created containing this module. HMR will enter the `ready` state.
+عند استدعائها أثناء حالة `idle`، سيتم إنشاء تحديث HMR جديد يحتوي على هذا module، وسينتقل HMR إلى حالة `ready`.
 
-When called during the `ready` or `prepare` state, this module will be added to the current HMR update.
+عند استدعائها أثناء حالتي `ready` أو `prepare`، سيُضاف هذا module إلى تحديث HMR الحالي.
 
-When called during the `check` state, this module will be added to the update when an update is available. If no update is available it will create a new update. HMR will enter the `ready` state.
+عند استدعائها أثناء حالة `check`، سيُضاف هذا module إلى التحديث إذا كان هناك تحديث متاح. وإذا لم يكن هناك تحديث، فسيتم إنشاء تحديث جديد، وسينتقل HMR إلى حالة `ready`.
 
-When called during the `dispose` or `apply` state, HMR will pick it up after getting out of those states.
+عند استدعائها أثناء حالتي `dispose` أو `apply`، سيأخذها HMR بعين الاعتبار بعد الخروج من تلك الحالات.
 
-#### Use Cases
+#### حالات الاستخدام
 
-**Conditional Accepting**
+**القبول الشرطي**
 
-A module can accept a dependency, but can call `invalidate` when the change of the dependency is not handleable:
+يمكن لـ module قبول dependency، ثم استدعاء `invalidate` عندما يكون تغيّر dependency غير قابل للمعالجة:
 
 ```js
 import { processX, processY } from "anotherDep";
@@ -173,18 +168,18 @@ export default processY(y);
 
 module.hot.accept("./dep", () => {
   if (y !== oldY) {
-    // This can't be handled, bubble to parent
+    // لا يمكن التعامل مع هذا التغيير، ارفعه إلى parent
     module.hot.invalidate();
     return;
   }
-  // This can be handled
+  // يمكن التعامل مع هذا التغيير
   processX(x);
 });
 ```
 
-**Conditional self accept**
+**قبول self مشروط**
 
-A module can self-accept itself, but can invalidate itself when the change is not handleable:
+يمكن لـ module أن يقبل تحديث نفسه، لكنه يستطيع إبطال نفسه عندما يكون التغيير غير قابل للمعالجة:
 
 ```js
 const VALUE = "constant";
@@ -205,7 +200,7 @@ if (
 }
 ```
 
-**Triggering custom HMR updates**
+**تشغيل تحديثات HMR مخصصة**
 
 {/* eslint-disable no-eval */}
 
@@ -219,18 +214,18 @@ if (require.cache[moduleId]) {
 }
 ```
 
-T> When `invalidate` is called, the [`dispose`](#dispose-or-adddisposehandler) handler will be eventually called and fill `module.hot.data`. If [`dispose`](#dispose-or-adddisposehandler) handler is not registered, an empty object will be supplied to `module.hot.data`.
+T> عند استدعاء `invalidate`، سيتم في النهاية استدعاء handler الخاص بـ [`dispose`](#dispose-or-adddisposehandler) وسيملأ `module.hot.data`. إذا لم يكن handler الخاص بـ [`dispose`](#dispose-or-adddisposehandler) مسجلًا، فسيتم تمرير كائن فارغ إلى `module.hot.data`.
 
-W> Do not get caught in an `invalidate` loop, by calling `invalidate` again and again. This will result in stack overflow and HMR entering the `fail` state.
+W> لا تدخل في حلقة `invalidate` عبر استدعائها مرارًا. سيؤدي ذلك إلى stack overflow ودخول HMR في حالة `fail`.
 
 ### removeDisposeHandler
 
-Remove the handler added via `dispose` or `addDisposeHandler`.
+يزيل handler الذي تمت إضافته عبر `dispose` أو `addDisposeHandler`.
 
 ```js
 module.hot.removeDisposeHandler(callback);
 
-// or
+// أو
 import.meta.webpackHot.removeDisposeHandler(callback);
 ```
 
@@ -238,29 +233,29 @@ import.meta.webpackHot.removeDisposeHandler(callback);
 
 ### status
 
-Retrieve the current status of the hot module replacement process.
+تجلب الحالة الحالية لعملية hot module replacement.
 
 ```js
-module.hot.status(); // Will return one of the following strings...
+module.hot.status(); // سترجع إحدى النصوص التالية...
 
-// or
+// أو
 import.meta.webpackHot.status();
 ```
 
-| Status  | Description                                                                         |
-| ------- | ----------------------------------------------------------------------------------- |
-| idle    | The process is waiting for a call to [`check`](#check)                              |
-| check   | The process is checking for updates                                                 |
-| prepare | The process is getting ready for the update (e.g. downloading the updated module)   |
-| ready   | The update is prepared and available                                                |
-| dispose | The process is calling the `dispose` handlers on the modules that will be replaced  |
-| apply   | The process is calling the `accept` handlers and re-executing self-accepted modules |
-| abort   | An update was aborted, but the system is still in its previous state                |
-| fail    | An update has thrown an exception and the system's state has been compromised       |
+| Status  | الوصف                                                                        |
+| ------- | ---------------------------------------------------------------------------- |
+| idle    | العملية تنتظر استدعاء [`check`](#check)                                      |
+| check   | العملية تفحص وجود تحديثات                                                    |
+| prepare | العملية تستعد للتحديث، مثل تنزيل module المحدّث                              |
+| ready   | التحديث جاهز ومتاح                                                           |
+| dispose | العملية تستدعي handlers الخاصة بـ `dispose` على modules التي سيتم استبدالها  |
+| apply   | العملية تستدعي handlers الخاصة بـ `accept` وتعيد تنفيذ self-accepted modules |
+| abort   | تم إلغاء التحديث، لكن النظام ما زال في حالته السابقة                         |
+| fail    | رمى التحديث exception وأصبحت حالة النظام غير موثوقة                          |
 
 ### check
 
-Test all loaded modules for updates and, if updates exist, `apply` them.
+يفحص كل modules المحملة بحثًا عن تحديثات، وإذا وُجدت تحديثات، يطبقها عبر `apply`.
 
 ```js
 module.hot
@@ -272,7 +267,7 @@ module.hot
     // catch errors
   });
 
-// or
+// أو
 import.meta.webpackHot
   .check(autoApply)
   .then((outdatedModules) => {
@@ -283,11 +278,11 @@ import.meta.webpackHot
   });
 ```
 
-The `autoApply` parameter can either be a boolean or `options` to pass to the `apply` method when called.
+يمكن أن يكون parameter المسمى `autoApply` إما boolean أو `options` تُمرر إلى الدالة `apply` عند استدعائها.
 
 ### apply
 
-Continue the update process (as long as `module.hot.status() === 'ready'`).
+تواصل عملية التحديث، طالما أن `module.hot.status() === 'ready'`.
 
 ```js
 module.hot
@@ -299,7 +294,7 @@ module.hot
     // catch errors
   });
 
-// or
+// أو
 import.meta.webpackHot
   .apply(options)
   .then((outdatedModules) => {
@@ -310,18 +305,18 @@ import.meta.webpackHot
   });
 ```
 
-The optional `options` object can include the following properties:
+يمكن أن يحتوي كائن `options` الاختياري على الخصائص التالية:
 
-- `ignoreUnaccepted` (boolean): Ignore changes made to unaccepted modules.
-- `ignoreDeclined` (boolean): Ignore changes made to declined modules.
-- `ignoreErrored` (boolean): Ignore errors thrown in accept handlers, error handlers and while reevaluating module.
-- `onDeclined` (function(info)): Notifier for declined modules
-- `onUnaccepted` (function(info)): Notifier for unaccepted modules
-- `onAccepted` (function(info)): Notifier for accepted modules
-- `onDisposed` (function(info)): Notifier for disposed modules
-- `onErrored` (function(info)): Notifier for errors
+- `ignoreUnaccepted` (boolean): تجاهل التغييرات التي حدثت في modules غير المقبولة.
+- `ignoreDeclined` (boolean): تجاهل التغييرات التي حدثت في modules المرفوضة.
+- `ignoreErrored` (boolean): تجاهل الأخطاء التي تُرمى داخل accept handlers أو error handlers أو أثناء إعادة تقييم module.
+- `onDeclined` (function(info)): notifier للـ modules المرفوضة.
+- `onUnaccepted` (function(info)): notifier للـ modules غير المقبولة.
+- `onAccepted` (function(info)): notifier للـ modules المقبولة.
+- `onDisposed` (function(info)): notifier للـ modules التي تم التخلص منها.
+- `onErrored` (function(info)): notifier للأخطاء.
 
-The `info` parameter will be an object containing some of the following values:
+سيكون parameter المسمى `info` كائنًا يحتوي على بعض القيم التالية:
 
 ```ts
 {
@@ -329,44 +324,44 @@ The `info` parameter will be an object containing some of the following values:
         'unaccepted' | 'accepted' |
         'disposed' | 'accept-errored' |
         'self-accept-errored' | 'self-accept-error-handler-errored',
-  moduleId: 4, // The module in question.
-  dependencyId: 3, // For errors: the module id owning the accept handler.
-  chain: [1, 2, 3, 4], // For declined/accepted/unaccepted: the chain from where the update was propagated.
-  parentId: 5, // For declined: the module id of the declining parent
-  outdatedModules: [1, 2, 3, 4], // For accepted: the modules that are outdated and will be disposed
-  outdatedDependencies: { // For accepted: The location of accept handlers that will handle the update
+  moduleId: 4, // الـ module المعني.
+  dependencyId: 3, // للأخطاء: معرّف module الذي يملك accept handler.
+  chain: [1, 2, 3, 4], // للحالات declined/accepted/unaccepted: السلسلة التي انتشر منها التحديث.
+  parentId: 5, // لـ declined: معرّف parent module الذي رفض التحديث
+  outdatedModules: [1, 2, 3, 4], // لـ accepted: الـ modules القديمة التي سيتم التخلص منها
+  outdatedDependencies: { // لـ accepted: مكان accept handlers التي ستتعامل مع التحديث
     5: [4]
   },
-  error: new Error(...), // For errors: the thrown error
-  originalError: new Error(...) // For self-accept-error-handler-errored:
-                                // the error thrown by the module before the error handler tried to handle it.
+  error: new Error(...), // للأخطاء: الخطأ المرمي
+  originalError: new Error(...) // لـ self-accept-error-handler-errored:
+                                // الخطأ الذي رماه module قبل أن يحاول error handler التعامل معه.
 }
 ```
 
 ### addStatusHandler
 
-Register a function to listen for changes in `status`.
+يسجل دالة للاستماع إلى التغييرات في `status`.
 
 ```js
 module.hot.addStatusHandler((status) => {
-  // React to the current status...
+  // تفاعل مع الحالة الحالية...
 });
 
-// or
+// أو
 import.meta.webpackHot.addStatusHandler((status) => {
-  // React to the current status...
+  // تفاعل مع الحالة الحالية...
 });
 ```
 
-Bear in mind that when the status handler returns a `Promise`, the HMR system will wait for the `Promise` to resolve before continuing.
+ضع في بالك أنه عندما يرجع status handler كائن `Promise`، سينتظر نظام HMR حتى يتم حل `Promise` قبل المتابعة.
 
 ### removeStatusHandler
 
-Remove a registered status handler.
+يزيل status handler مسجلًا.
 
 ```js
 module.hot.removeStatusHandler(callback);
 
-// or
+// أو
 import.meta.webpackHot.removeStatusHandler(callback);
 ```
diff --git a/src/content/api/index.mdx b/src/content/api/index.mdx
index dabb5fa9121b..9d6b05c49586 100644
--- a/src/content/api/index.mdx
+++ b/src/content/api/index.mdx
@@ -1,54 +1,38 @@
 ---
-title: Introduction
+title: مقدمة
 sort: -1
 contributors:
-  - tbroadley
+  - RlxChap2
 ---
 
-A variety of interfaces are available to customize the compilation process.
-Some features overlap between interfaces, e.g. a configuration option may be
-available via a CLI flag, while others exist only through a single interface.
-The following high-level information should get you started.
+يوفّر webpack أكثر من واجهة لتخصيص عملية التجميع. بعض الميزات يمكن الوصول إليها بأكثر من طريقة؛ مثلًا قد تجد خيارًا في ملف الإعدادات وله أيضًا flag في CLI. وفي المقابل توجد ميزات لا تتوفر إلا من واجهة واحدة. هذه الصفحة تعطيك نظرة عامة تساعدك على اختيار الواجهة المناسبة.
 
 ## CLI
 
-The Command Line Interface (CLI) to configure and interact with your build. It
-is especially useful in the case of early prototyping and profiling. For the
-most part, the CLI is used to kick off the process using a configuration
-file and a few flags (e.g. `--env`).
+واجهة سطر الأوامر (CLI) هي الطريقة المباشرة لتشغيل البناء والتعامل معه. تفيدك كثيرًا في التجارب السريعة وقياس الأداء. غالبًا ستستخدمها لتشغيل webpack مع ملف إعدادات وبعض flags مثل `--env`.
 
-[Learn more about the CLI!](/api/cli)
+[تعرّف أكثر على CLI](/api/cli)
 
 ## Module
 
-When processing modules with webpack, it is important to understand the
-different module syntaxes – specifically the [methods](/api/module-methods)
-and [variables](/api/module-variables) – that are supported.
+عند معالجة modules باستخدام webpack، من المهم أن تفهم صيغ modules التي يدعمها، خصوصًا [الدوال](/api/module-methods) و[المتغيرات](/api/module-variables). هذا الفهم يساعدك على معرفة كيف يقرأ webpack الكود وكيف يتعامل مع الاستيراد والتصدير.
 
-[Learn more about modules!](/api/module-methods)
+[تعرّف أكثر على modules](/api/module-methods)
 
 ## Node
 
-While most users can get away with using the CLI along with a
-configuration file, more fine-grained control of the compilation can be
-achieved via the Node interface. This includes passing multiple configurations,
-programmatically running or watching, and collecting stats.
+غالبًا يكفي استخدام CLI مع ملف إعدادات، لكن إذا احتجت تحكمًا أدق في عملية التجميع فاستخدم واجهة Node. من خلالها تستطيع تمرير أكثر من إعداد، أو تشغيل webpack ومراقبته من داخل كود JavaScript، أو جمع إحصاءات البناء برمجيًا.
 
-[Learn more about the Node API!](/api/node)
+[تعرّف أكثر على Node API](/api/node)
 
 ## Loaders
 
-Loaders are transformations that are applied to the source code of a module.
-They are written as functions that accept source code as a parameter and return
-a new version of that code with transformations applied.
+الـ loaders هي تحويلات تُطبّق على كود module قبل أن يدخل في عملية التجميع. عمليًا، الـ loader دالة تستقبل الكود الأصلي وتعيد نسخة جديدة منه بعد التحويل، مثل تحويل TypeScript إلى JavaScript أو معالجة ملفات CSS.
 
-[Learn more about loaders!](/api/loaders)
+[تعرّف أكثر على loaders](/api/loaders)
 
 ## Plugins
 
-The plugin interface allows users to tap directly into the compilation process.
-Plugins can register handlers on lifecycle hooks that run at different points
-throughout a compilation. When each hook is executed, the plugin will have full
-access to the current state of the compilation.
+واجهة plugins تسمح لك بالدخول إلى مراحل التجميع نفسها. يستطيع plugin تسجيل handlers على lifecycle hooks تعمل في نقاط مختلفة أثناء البناء. وعندما يعمل hook معيّن، يحصل plugin على إمكانية الوصول إلى حالة التجميع في تلك اللحظة.
 
-[Learn more about plugins!](/api/plugins)
+[تعرّف أكثر على plugins](/api/plugins)
diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx
index d3572e748537..b672cd385d52 100644
--- a/src/content/api/loaders.mdx
+++ b/src/content/api/loaders.mdx
@@ -1,29 +1,17 @@
 ---
-title: Loader Interface
+title: واجهة Loader
 sort: 5
 contributors:
-  - TheLarkInn
-  - jhnns
-  - tbroadley
-  - byzyk
-  - sokra
-  - EugeneHlushko
-  - jantimon
-  - superburrito
-  - wizardofhogwarts
-  - snitin315
-  - chenxsan
-  - jamesgeorge007
-  - alexeyr
+  - RlxChap2
 ---
 
-A loader is a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters.
+الـ loader هو JavaScript module يصدّر دالة. يستدعي [loader runner](https://github.com/webpack/loader-runner) هذه الدالة ويمرر لها نتيجة loader السابق أو ملف resource. يملأ webpack و[loader runner](https://github.com/webpack/loader-runner) سياق `this` داخل الدالة بمجموعة دوال مفيدة تسمح للـ loader، من بين أشياء أخرى، بتغيير أسلوب الاستدعاء إلى async أو قراءة query parameters.
 
-The first loader is passed one argument: the content of the resource file. The compiler expects a result from the last loader. The result should be a `String` or a `Buffer` (which is converted to a string), representing the JavaScript source code of the module. An optional SourceMap result (as a JSON object) may also be passed.
+يُمرر إلى أول loader argument واحد: محتوى ملف resource. ويتوقع compiler نتيجة من آخر loader. يجب أن تكون النتيجة `String` أو `Buffer`، ويتم تحويل Buffer إلى string، وتمثل كود JavaScript المصدري للـ module. ويمكن أيضًا تمرير SourceMap اختياري ككائن JSON.
 
-A single result can be returned in [sync mode](#synchronous-loaders). For multiple results the `this.callback()` must be called and the loader must return `undefined`.
+يمكن إرجاع نتيجة واحدة في [الوضع المتزامن](#synchronous-loaders). أما النتائج المتعددة فتتطلب استدعاء `this.callback()`، ويجب أن يرجع loader القيمة `undefined`.
 
-In [async mode](#asynchronous-loaders) you can return a single result from an `async function`. Alternatively, you may call `this.async()` to indicate that the [loader runner](https://github.com/webpack/loader-runner) should wait for an asynchronous result. It returns `this.callback()`. In this case the loader must return `undefined` and call that callback. This is the only option for multiple results.
+في [الوضع غير المتزامن](#asynchronous-loaders)، يمكنك إرجاع نتيجة واحدة من `async function`. بدلًا من ذلك، يمكنك استدعاء `this.async()` للإشارة إلى أن [loader runner](https://github.com/webpack/loader-runner) يجب أن ينتظر نتيجة غير متزامنة. ترجع هذه الدالة `this.callback()`. في هذه الحالة يجب أن يرجع loader القيمة `undefined` ويستدعي ذلك callback. وهذا هو الخيار الوحيد عند وجود نتائج متعددة.
 
 ```js
 /**
@@ -33,17 +21,17 @@ In [async mode](#asynchronous-loaders) you can return a single result from an `a
  * @param {any} [meta] Meta data, could be anything
  */
 function webpackLoader(content, map, meta) {
-  // code of your webpack loader
+  // كود webpack loader الخاص بك
 }
 ```
 
-## Examples
+## أمثلة
 
-The following sections provide some basic examples of the different types of loaders. Note that the `map` and `meta` parameters are optional, see [`this.callback`](#thiscallback) below.
+تقدم الأقسام التالية أمثلة أساسية لأنواع loaders المختلفة. لاحظ أن parameters المسماة `map` و`meta` اختيارية. راجع [`this.callback`](#thiscallback) أدناه.
 
 ### Synchronous Loaders
 
-Either `return` or `this.callback` can be used to return the transformed `content` synchronously:
+يمكن استخدام `return` أو `this.callback` لإرجاع `content` بعد تحويله بشكل متزامن:
 
 **sync-loader.js**
 
@@ -53,7 +41,7 @@ export default function syncLoader(content, map, meta) {
 }
 ```
 
-The `this.callback` method is more flexible as you pass multiple arguments instead of using `content` only.
+دالة `this.callback` أكثر مرونة لأنك تستطيع تمرير عدة arguments بدل استخدام `content` فقط.
 
 **sync-loader-with-multiple-results.js**
 
@@ -62,13 +50,13 @@ The `this.callback` method is more flexible as you pass multiple arguments inste
 ```js
 export default function syncLoaderWithMultipleResults(content, map, meta) {
   this.callback(null, someSyncOperation(content), map, meta);
-  return; // always return undefined when calling callback()
+  return; // أرجع undefined دائمًا عند استدعاء callback()
 }
 ```
 
 ### Asynchronous Loaders
 
-For asynchronous loaders, you can return the transformed `content` from an `async function`:
+بالنسبة للـ loaders غير المتزامنة، يمكنك إرجاع `content` بعد تحويله من `async function`:
 
 **async-loader.js**
 
@@ -79,7 +67,7 @@ export default async function asyncLoader(content, map, meta) {
 }
 ```
 
-Or you can use [`this.async`](#thisasync) to retrieve the `callback` function:
+أو يمكنك استخدام [`this.async`](#thisasync) للحصول على دالة `callback`:
 
 **async-loader-with-callback.js**
 
@@ -105,11 +93,11 @@ export default function asyncLoaderWithMultipleResults(content, map, meta) {
 }
 ```
 
-T> Loaders were originally designed to work in synchronous loader pipelines, like Node.js (using [enhanced-require](https://github.com/webpack/enhanced-require)), _and_ asynchronous pipelines, like in webpack. However, since expensive synchronous computations are a bad idea in a single-threaded environment like Node.js, we advise making your loader asynchronous if possible. Synchronous loaders are ok if the amount of computation is trivial.
+T> صُممت loaders في الأصل للعمل داخل pipelines متزامنة مثل Node.js باستخدام [enhanced-require](https://github.com/webpack/enhanced-require)، _وكذلك_ داخل pipelines غير متزامنة كما في webpack. لكن بما أن العمليات المتزامنة المكلفة فكرة سيئة في بيئة single-threaded مثل Node.js، ننصح بجعل loader غير متزامنًا إن أمكن. loaders المتزامنة مقبولة إذا كان حجم الحسابات بسيطًا.
 
 ### "Raw" Loader
 
-By default, the resource file is converted to a UTF-8 string and passed to the loader. By setting the `raw` flag to `true`, the loader will receive the raw `Buffer`. Every loader is allowed to deliver its result as a `String` or as a `Buffer`. The compiler converts them between loaders.
+افتراضيًا، يتم تحويل ملف resource إلى نص UTF-8 ثم تمريره إلى loader. عند ضبط flag المسمى `raw` على `true`، سيستقبل loader الـ `Buffer` الخام. يمكن لأي loader أن يعطي نتيجته كـ `String` أو `Buffer`. يحول compiler بينهما عند تمرير النتيجة بين loaders.
 
 **raw-loader.js**
 
@@ -117,19 +105,19 @@ By default, the resource file is converted to a UTF-8 string and passed to the l
 export default function rawLoader(content) {
   assert(content instanceof Buffer);
   return someSyncOperation(content);
-  // return value can be a `Buffer` too
-  // This is also allowed if loader is not "raw"
+  // يمكن أن تكون قيمة الإرجاع `Buffer` أيضًا
+  // وهذا مسموح حتى لو لم يكن loader "raw"
 }
 export const raw = true;
 ```
 
 ### Pitching Loader
 
-Loaders are **always** called from right to left. There are some instances where the loader only cares about the **metadata** behind a request and can ignore the results of the previous loader. The `pitch` method on loaders is called from **left to right** before the loaders are actually executed (from right to left).
+تُستدعى loaders **دائمًا** من اليمين إلى اليسار. توجد حالات يهتم فيها loader فقط بـ **metadata** وراء request ويمكنه تجاهل نتائج loader السابق. تُستدعى دالة `pitch` في loaders من **اليسار إلى اليمين** قبل تنفيذ loaders فعليًا من اليمين إلى اليسار.
 
-T> Loaders may be added inline in requests and disabled via inline prefixes, which will impact the order in which they are "pitched" and executed. See [`Rule.enforce`](/configuration/module/#ruleenforce) for more details.
+T> يمكن إضافة loaders inline داخل requests وتعطيلها عبر inline prefixes، وهذا يؤثر في ترتيب "pitch" والتنفيذ. راجع [`Rule.enforce`](/configuration/module/#ruleenforce) لمزيد من التفاصيل.
 
-For the following configuration of [`use`](/configuration/module/#ruleuse):
+في إعداد [`use`](/configuration/module/#ruleuse) التالي:
 
 ```js
 export default {
@@ -145,7 +133,7 @@ export default {
 };
 ```
 
-These steps would occur:
+ستحدث الخطوات التالية:
 
 ```diff
 |- a-loader `pitch`
@@ -157,9 +145,9 @@ These steps would occur:
 |- a-loader normal execution
 ```
 
-So why might a loader take advantage of the "pitching" phase?
+لماذا قد يستفيد loader من مرحلة "pitching"؟
 
-First, the `data` passed to the `pitch` method is exposed in the execution phase as well under `this.data` and could be useful for capturing and sharing information from earlier in the cycle.
+أولًا، `data` التي تُمرر إلى دالة `pitch` تكون متاحة أيضًا في مرحلة التنفيذ تحت `this.data`، وقد تفيد لالتقاط معلومات ومشاركتها من مرحلة مبكرة في الدورة.
 
 ```js
 export default function myLoaderName(content) {
@@ -171,7 +159,7 @@ export function pitch(remainingRequest, precedingRequest, data) {
 }
 ```
 
-Second, if a loader delivers a result in the `pitch` method, the process turns around and skips the remaining loaders. In our example above, if the `b-loader`s `pitch` method returned something:
+ثانيًا، إذا أعطى loader نتيجة داخل دالة `pitch`، تنعكس العملية ويتم تجاوز loaders المتبقية. في المثال السابق، إذا أرجعت دالة `pitch` الخاصة بـ `b-loader` شيئًا:
 
 ```js
 export default function myLoaderName(content) {
@@ -185,7 +173,7 @@ export function pitch(remainingRequest, precedingRequest, data) {
 }
 ```
 
-The steps above would be shortened to:
+ستُختصر الخطوات السابقة إلى:
 
 ```diff
 |- a-loader `pitch`
@@ -193,15 +181,15 @@ The steps above would be shortened to:
 |- a-loader normal execution
 ```
 
-## The Loader Context
+## سياق Loader
 
-The loader context represents the properties that are available inside of a loader assigned to the `this` property.
+يمثل loader context الخصائص المتاحة داخل loader والمربوطة بالخاصية `this`.
 
 ### Example for the loader context
 
-Given the following example, this require call is used:
+في المثال التالي، يتم استخدام require call هذه:
 
-In `/abc/file.js`:
+داخل `/abc/file.js`:
 
 ```js
 import "./loader1?xyz!loader2!./resource?rrr";
@@ -213,16 +201,16 @@ import "./loader1?xyz!loader2!./resource?rrr";
 addContextDependency(directory: string)
 ```
 
-Add a directory as dependency of the loader result.
+يضيف مجلدًا كاعتماد لنتيجة loader.
 
 ### this.addDependency
 
 ```ts
 addDependency(file: string)
-dependency(file: string) // shortcut
+dependency(file: string) // اختصار
 ```
 
-Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack/less-loader) uses this to recompile whenever any imported `css` file changes.
+يضيف ملفًا موجودًا كاعتماد لنتيجة loader حتى يصبح قابلًا للمراقبة. مثلًا، يستخدم [`sass-loader`](https://github.com/webpack/sass-loader) و[`less-loader`](https://github.com/webpack/less-loader) ذلك لإعادة compilation كلما تغيّر أي ملف `css` مستورد.
 
 ### this.addMissingDependency
 
@@ -230,27 +218,27 @@ Add an existing file as a dependency of the loader result in order to make them
 addMissingDependency(file: string)
 ```
 
-Add a non-existing file as a dependency of the loader result in order to make them watchable. Similar to `addDependency`, but handles the creation of files during compilation before watchers are attached correctly.
+يضيف ملفًا غير موجود كاعتماد لنتيجة loader حتى يصبح قابلًا للمراقبة. يشبه `addDependency`، لكنه يتعامل مع إنشاء الملفات أثناء compilation قبل إرفاق watchers بشكل صحيح.
 
 ### this.async
 
-Tells the [loader-runner](https://github.com/webpack/loader-runner) that the loader intends to call back asynchronously. Returns `this.callback`.
+يخبر [loader-runner](https://github.com/webpack/loader-runner) أن loader ينوي استدعاء callback بشكل غير متزامن. ترجع `this.callback`.
 
 ### this.cacheable
 
-A function that sets the cacheable flag:
+دالة تضبط cacheable flag:
 
 ```ts
 cacheable(flag = true: boolean)
 ```
 
-By default, loader results are flagged as cacheable. Call this method passing `false` to make the loader's result not cacheable.
+افتراضيًا، تُعلّم نتائج loader على أنها قابلة للتخزين المؤقت. استدعِ هذه الدالة مع `false` لجعل نتيجة loader غير قابلة للتخزين المؤقت.
 
-A cacheable loader must have a deterministic result when inputs and dependencies haven't changed. This means the loader shouldn't have dependencies other than those specified with `this.addDependency`.
+يجب أن يعطي cacheable loader نتيجة deterministic عندما لا تتغير inputs وdependencies. هذا يعني أن loader لا ينبغي أن يملك dependencies غير تلك المحددة عبر `this.addDependency`.
 
 ### this.callback
 
-A function that can be called synchronously or asynchronously in order to return multiple results. The expected arguments are:
+دالة يمكن استدعاؤها بشكل متزامن أو غير متزامن لإرجاع عدة نتائج. arguments المتوقعة هي:
 
 ```ts
 this.callback(
@@ -261,14 +249,14 @@ this.callback(
 );
 ```
 
-1. The first argument must be an `Error` or `null`
-2. The second argument is a `string` or a [`Buffer`](https://nodejs.org/api/buffer.html).
-3. Optional: The third argument must be a source map that is parsable by [this module](https://github.com/mozilla/source-map).
-4. Optional: The fourth option, ignored by webpack, can be anything (e.g. some metadata).
+1. يجب أن يكون argument الأول `Error` أو `null`.
+2. argument الثاني هو `string` أو [`Buffer`](https://nodejs.org/api/buffer.html).
+3. اختياري: يجب أن يكون argument الثالث source map يمكن قراءتها بواسطة [هذه الحزمة](https://github.com/mozilla/source-map).
+4. اختياري: argument الرابع، الذي يتجاهله webpack، يمكن أن يكون أي شيء، مثل metadata.
 
-T> It can be useful to pass an abstract syntax tree (AST), like [`ESTree`](https://github.com/estree/estree), as the fourth argument (`meta`) to speed up the build time if you want to share common ASTs between loaders.
+T> قد يكون من المفيد تمرير abstract syntax tree (AST)، مثل [`ESTree`](https://github.com/estree/estree)، كـ argument رابع (`meta`) لتسريع وقت build إذا أردت مشاركة ASTs مشتركة بين loaders.
 
-In case this function is called, you should return undefined to avoid ambiguous loader results.
+إذا استُدعيت هذه الدالة، فيجب إرجاع undefined لتجنب نتائج loader الغامضة.
 
 ### this.clearDependencies
 
@@ -276,17 +264,17 @@ In case this function is called, you should return undefined to avoid ambiguous
 clearDependencies();
 ```
 
-Remove all dependencies of the loader result, even initial dependencies and those of other loaders. Consider using `pitch`.
+يزيل كل dependencies الخاصة بنتيجة loader، حتى dependencies الأولية وتلك الخاصة بـ loaders أخرى. فكر في استخدام `pitch`.
 
 ### this.context
 
-**The directory of the module.** Can be used as a context for resolving other stuff.
+**مجلد module.** يمكن استخدامه كـ context لحل أشياء أخرى.
 
-In [the example](#example-for-the-loader-context): `/abc` because `resource.js` is in this directory
+في [المثال](#example-for-the-loader-context): `/abc` لأن `resource.js` موجود داخل هذا المجلد.
 
 ### this.data
 
-A data object shared between the pitch and the normal phase.
+كائن بيانات مشترك بين مرحلة pitch والمرحلة العادية.
 
 ### this.emitError
 
@@ -294,7 +282,7 @@ A data object shared between the pitch and the normal phase.
 emitError(error: Error)
 ```
 
-Emit an error that also can be displayed in the output.
+يصدر خطأ يمكن عرضه أيضًا في output.
 
 ```bash
 ERROR in ./src/lib.js (./src/loader.js!./src/lib.js)
@@ -303,7 +291,7 @@ Here is an Error!
  @ ./src/index.js 1:0-25
 ```
 
-T> Unlike throwing an Error directly, it will NOT interrupt the compilation process of the current module.
+T> بخلاف رمي Error مباشرة، لن يقطع هذا عملية compilation الخاصة بالـ module الحالي.
 
 ### this.emitFile
 
@@ -311,7 +299,7 @@ T> Unlike throwing an Error directly, it will NOT interrupt the compilation proc
 emitFile(name: string, content: Buffer|string, sourceMap: {...})
 ```
 
-Emit a file. This is webpack-specific.
+يصدر ملفًا. هذا خاص بـ webpack.
 
 ### this.emitWarning
 
@@ -319,7 +307,7 @@ Emit a file. This is webpack-specific.
 emitWarning(warning: Error)
 ```
 
-Emit a warning that will be displayed in the output like the following:
+يصدر تحذيرًا سيظهر في output بالشكل التالي:
 
 ```bash
 WARNING in ./src/lib.js (./src/loader.js!./src/lib.js)
@@ -328,50 +316,50 @@ Here is a Warning!
  @ ./src/index.js 1:0-25
 ```
 
-T> Note that the warnings will not be displayed if `stats.warnings` is set to `false`, or some other omit setting is used to `stats` such as `none` or `errors-only`. See the [stats presets configuration](/configuration/stats/#stats-presets).
+T> لاحظ أن التحذيرات لن تُعرض إذا تم ضبط `stats.warnings` على `false`، أو إذا استُخدم إعداد omit آخر في `stats` مثل `none` أو `errors-only`. راجع [إعدادات stats presets](/configuration/stats/#stats-presets).
 
 ### this.environment
 
-Check what kind of ES-features may be used in the generated runtime-code.
+يفحص نوع ميزات ES التي يمكن استخدامها في runtime-code المولّد.
 
-E.g.,
+مثال:
 
 ```json
 {
-  // The environment supports arrow functions ('() => { ... }').
+  // تدعم البيئة arrow functions مثل '() => { ... }'
   "arrowFunction": true,
-  // The environment supports BigInt as literal (123n).
+  // تدعم البيئة BigInt كقيمة literal مثل 123n
   "bigIntLiteral": false,
-  // The environment supports const and let for variable declarations.
+  // تدعم البيئة const وlet في تعريف المتغيرات
   "const": true,
-  // The environment supports destructuring ('{ a, b } = obj').
+  // تدعم البيئة destructuring مثل '{ a, b } = obj'
   "destructuring": true,
-  // The environment supports an async import() function to import EcmaScript modules.
+  // تدعم البيئة دالة import() غير متزامنة لاستيراد EcmaScript modules
   "dynamicImport": false,
-  // The environment supports an async import() when creating a worker, only for web targets at the moment.
+  // تدعم البيئة import() غير متزامنة عند إنشاء worker، حاليًا لأهداف web فقط
   "dynamicImportInWorker": false,
-  // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+  // تدعم البيئة for of مثل 'for (const x of array) { ... }'
   "forOf": true,
-  // The environment supports 'globalThis'.
+  // تدعم البيئة 'globalThis'
   "globalThis": true,
-  // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+  // تدعم البيئة صيغة ECMAScript Module لاستيراد modules
   "module": false,
-  // The environment supports optional chaining ('obj?.a' or 'obj?.()').
+  // تدعم البيئة optional chaining مثل 'obj?.a' أو 'obj?.()'
   "optionalChaining": true,
-  // The environment supports template literals.
+  // تدعم البيئة template literals
   "templateLiteral": true
 }
 ```
 
 ### this.fs
 
-Access to the `compilation`'s `inputFileSystem` property.
+وصول إلى خاصية `inputFileSystem` الخاصة بـ `compilation`.
 
 ### this.getOptions(schema)
 
-Extracts given loader options. Optionally, accepts JSON schema as an argument.
+يستخرج خيارات loader المعطاة. ويمكنه اختياريًا استقبال JSON schema كـ argument.
 
-T> Since webpack 5, `this.getOptions` is available in loader context. It substitutes `getOptions` method from [loader-utils](https://github.com/webpack/loader-utils#getoptions).
+T> منذ webpack 5، أصبحت `this.getOptions` متاحة في loader context. وهي تستبدل دالة `getOptions` من [loader-utils](https://github.com/webpack/loader-utils#getoptions).
 
 ### this.getResolve
 
@@ -382,21 +370,21 @@ resolve(context: string, request: string, callback: function(err, result: string
 resolve(context: string, request: string): Promise<string>
 ```
 
-Creates a resolve function similar to [`this.resolve`](#thisresolve).
+ينشئ دالة resolve مشابهة لـ [`this.resolve`](#thisresolve).
 
-Any options under webpack [`resolve` options](/configuration/resolve/#resolve) are possible. They are merged with the configured `resolve` options. Note that `"..."` can be used in arrays to extend the value from `resolve` options, e.g. `{ extensions: [".sass", "..."] }`.
+يمكن استخدام أي خيارات تحت إعدادات webpack [`resolve`](/configuration/resolve/#resolve). يتم دمجها مع خيارات `resolve` المعرّفة في الإعدادات. لاحظ أن `"..."` يمكن استخدامها داخل arrays لتمديد القيمة القادمة من خيارات `resolve`، مثل `{ extensions: [".sass", "..."] }`.
 
-`options.dependencyType` is an additional option. It allows us to specify the type of dependency, which is used to resolve `byDependency` from the `resolve` options.
+`options.dependencyType` خيار إضافي. يسمح بتحديد نوع dependency، ويُستخدم لحل `byDependency` من خيارات `resolve`.
 
-All dependencies of the resolving operation are automatically added as dependencies to the current module.
+كل dependencies الخاصة بعملية resolving تُضاف تلقائيًا كـ dependencies إلى module الحالي.
 
 ### this.hot
 
-Information about HMR for loaders.
+معلومات عن HMR للـ loaders.
 
 ```js
 export default function (source) {
-  console.log(this.hot); // true if HMR is enabled via --hot flag or webpack configuration
+  console.log(this.hot); // true إذا كان HMR مفعّلًا عبر --hot flag أو إعدادات webpack
   return source;
 }
 ```
@@ -407,7 +395,7 @@ export default function (source) {
 
 <Badge text="5.95.0+" />
 
-The encoding to use when generating the hash. See [output.hashDigest](/configuration/output/#outputhashdigest).
+الترميز المستخدم عند توليد hash. راجع [output.hashDigest](/configuration/output/#outputhashdigest).
 
 ### this.hashDigestLength
 
@@ -415,7 +403,7 @@ The encoding to use when generating the hash. See [output.hashDigest](/configura
 
 <Badge text="5.95.0+" />
 
-The prefix length of the hash digest to use. See [output.hashDigestLength](/configuration/output/#outputhashdigestlength).
+طول prefix الخاص بـ hash digest المراد استخدامه. راجع [output.hashDigestLength](/configuration/output/#outputhashdigestlength).
 
 ### this.hashFunction
 
@@ -423,7 +411,7 @@ The prefix length of the hash digest to use. See [output.hashDigestLength](/conf
 
 <Badge text="5.95.0+" />
 
-The hashing algorithm to use. See [output.hashFunction](/configuration/output/#outputhashfunction).
+خوارزمية hashing المراد استخدامها. راجع [output.hashFunction](/configuration/output/#outputhashfunction).
 
 ### this.hashSalt
 
@@ -431,7 +419,7 @@ The hashing algorithm to use. See [output.hashFunction](/configuration/output/#o
 
 <Badge text="5.95.0+" />
 
-An optional salt to update the hash via Node.JS' [`hash.update`](https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding). See [output.hashSalt](/configuration/output/#outputhashsalt).
+salt اختياري لتحديث hash عبر [`hash.update`](https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding) في Node.JS. راجع [output.hashSalt](/configuration/output/#outputhashsalt).
 
 ### this.importModule
 
@@ -439,13 +427,13 @@ An optional salt to update the hash via Node.JS' [`hash.update`](https://nodejs.
 
 `this.importModule(request, options, [callback]): Promise`
 
-An alternative lightweight solution for the child compiler to compile and execute a request at build time.
+حل بديل خفيف للـ child compiler لتجميع request وتنفيذه وقت build.
 
-- `request`: the request string to load the module from
+- `request`: نص request لتحميل module منه.
 - `options`:
-  - `layer`: specify a layer in which this module is placed/compiled
-  - `publicPath`: the public path used for the built modules
-- `callback`: an optional Node.js style callback returning the exports of the module or a namespace object for ESM. `importModule` will return a Promise if no callback is provided.
+  - `layer`: يحدد layer التي يوضع أو يُجمّع فيها هذا module.
+  - `publicPath`: public path المستخدم للـ modules المبنية.
+- `callback`: callback اختياري بأسلوب Node.js يرجع exports الخاصة بالـ module أو namespace object لـ ESM. سترجع `importModule` كائن Promise إذا لم يتم تمرير callback.
 
 **webpack.config.js**
 
@@ -456,7 +444,7 @@ export default {
       {
         test: /stylesheet\.js$/i,
         use: ["./a-pitching-loader.js"],
-        type: "asset/source", // we set type to 'asset/source' as the loader will return a string
+        type: "asset/source", // نضبط النوع على 'asset/source' لأن loader سيرجع string
       },
     ],
   },
@@ -493,22 +481,22 @@ export const green = "#0f0";
 
 ```js
 import stylesheet from "./stylesheet.js";
-// stylesheet will be a string `body { background: #f00; color: #0f0; }` at build time
+// ستكون stylesheet نصًا `body { background: #f00; color: #0f0; }` وقت build
 ```
 
-You might notice something in the above example:
+قد تلاحظ شيئًا في المثال السابق:
 
-1. We have a [pitching loader](#pitching-loader),
-2. We use `!=!` syntax in that pitching loader to set [matchResource](#inline-matchresource) for the request, i.e., we'll use `this.resourcePath + '.webpack[javascript/auto]'` to match with the [`module.rules`](/configuration/module/#modulerules) instead of the original resource,
-3. `.webpack[javascript/auto]` is a pseudo extension of the `.webpack[type]` pattern, we use it to specify a default [module type](/configuration/module/#ruletype) when no other module type is specified. It's typically used in conjunction with `!=!` syntax.
+1. لدينا [pitching loader](#pitching-loader).
+2. نستخدم صيغة `!=!` داخل pitching loader لضبط [matchResource](#inline-matchresource) للـ request. أي سنستخدم `this.resourcePath + '.webpack[javascript/auto]'` للمطابقة مع [`module.rules`](/configuration/module/#modulerules) بدل resource الأصلي.
+3. `.webpack[javascript/auto]` امتداد شبه وهمي من نمط `.webpack[type]`. نستخدمه لتحديد [module type](/configuration/module/#ruletype) افتراضي عندما لا يتم تحديد module type آخر. يُستخدم عادةً مع صيغة `!=!`.
 
-Note that the above example is a simplified one, you can check [the full example on webpack repository](https://github.com/webpack/webpack/tree/master/test/configCases/loader-import-module/css).
+لاحظ أن المثال السابق مبسط. يمكنك مراجعة [المثال الكامل في مستودع webpack](https://github.com/webpack/webpack/tree/master/test/configCases/loader-import-module/css).
 
 ### this.loaderIndex
 
-The index in the loaders array of the current loader.
+الفهرس داخل array الخاصة بـ loaders للـ loader الحالي.
 
-In [the example](#example-for-the-loader-context): in loader1: `0`, in loader2: `1`
+في [المثال](#example-for-the-loader-context): في loader1 تكون `0`، وفي loader2 تكون `1`.
 
 ### this.loadModule
 
@@ -516,19 +504,19 @@ In [the example](#example-for-the-loader-context): in loader1: `0`, in loader2:
 loadModule(request: string, callback: function(err, source, sourceMap, module))
 ```
 
-Resolves the given request to a module, applies all configured loaders and calls back with the generated source, the sourceMap and the module instance (usually an instance of [`NormalModule`](https://github.com/webpack/webpack/blob/main/lib/NormalModule.js)). Use this function if you need to know the source code of another module to generate the result.
+يحل request المحدد إلى module، ويطبّق كل loaders المعدة، ثم يستدعي callback مع source المولّد وsourceMap وmodule instance، والتي تكون عادةً instance من [`NormalModule`](https://github.com/webpack/webpack/blob/main/lib/NormalModule.js). استخدم هذه الدالة إذا كنت تحتاج معرفة كود المصدر الخاص بـ module آخر لتوليد النتيجة.
 
-`this.loadModule` in a loader context uses CommonJS resolve rules by default. Use `this.getResolve` with an appropriate `dependencyType`, e.g. `'esm'`, `'commonjs'` or a custom one before using a different semantic.
+تستخدم `this.loadModule` داخل loader context قواعد resolve الخاصة بـ CommonJS افتراضيًا. استخدم `this.getResolve` مع `dependencyType` مناسب، مثل `'esm'` أو `'commonjs'` أو نوع مخصص، قبل استخدام semantics مختلفة.
 
 ### this.loaders
 
-An array of all the loaders. It is writable in the pitch phase.
+array تحتوي على كل loaders. وهي قابلة للكتابة في مرحلة pitch.
 
 ```ts
 loaders = [{request: string, path: string, query: string, module: function}]
 ```
 
-In [the example](#example-for-the-loader-context):
+في [المثال](#example-for-the-loader-context):
 
 ```js
 [
@@ -549,20 +537,20 @@ In [the example](#example-for-the-loader-context):
 
 ### this.mode
 
-Read in which [`mode`](/configuration/mode/) webpack is running.
+يقرأ [`mode`](/configuration/mode/) الذي يعمل به webpack.
 
-Possible values: `'production'`, `'development'`, `'none'`
+القيم الممكنة: `'production'` و`'development'` و`'none'`.
 
 ### this.query
 
-1. If the loader was configured with an [`options`](/configuration/module/#useentry) object, this will point to that object.
-2. If the loader has no `options`, but was invoked with a query string, this will be a string starting with `?`.
+1. إذا كان loader معدًا بكائن [`options`](/configuration/module/#useentry)، فستشير هذه الخاصية إلى ذلك الكائن.
+2. إذا لم يكن لدى loader `options`، لكنه استُدعي بـ query string، فستكون هذه الخاصية نصًا يبدأ بـ `?`.
 
 ### this.request
 
-The resolved request string.
+نص request بعد حله.
 
-In [the example](#example-for-the-loader-context): `'/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr'`
+في [المثال](#example-for-the-loader-context): `'/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr'`
 
 ### this.resolve
 
@@ -570,55 +558,55 @@ In [the example](#example-for-the-loader-context): `'/abc/loader1.js?xyz!/abc/no
 resolve(context: string, request: string, callback: function(err, result: string))
 ```
 
-Resolve a request like a require expression.
+يحل request مثل require expression.
 
-- `context` must be an absolute path to a directory. This directory is used as the starting location for the resolving.
-- `request` is the request to be resolved. Usually either relative requests like `./relative` or module requests like `module/path` are used, but absolute paths like `/some/path` are also possible as requests.
-- `callback` is a normal Node.js-style callback function giving the resolved path.
+- يجب أن يكون `context` مسارًا مطلقًا إلى مجلد. يُستخدم هذا المجلد كنقطة بداية للـ resolving.
+- `request` هو الطلب المراد حله. عادةً تكون الطلبات نسبية مثل `./relative` أو module requests مثل `module/path`، لكن يمكن أيضًا استخدام مسارات مطلقة مثل `/some/path` كـ requests.
+- `callback` دالة callback عادية بأسلوب Node.js تعطي المسار المحلول.
 
-All dependencies of the resolving operation are automatically added as dependencies to the current module.
+كل dependencies الخاصة بعملية resolving تُضاف تلقائيًا كـ dependencies إلى module الحالي.
 
 ### this.resource
 
-The resource part of the request, including query.
+جزء resource من request، مع query.
 
-In [the example](#example-for-the-loader-context): `'/abc/resource.js?rrr'`
+في [المثال](#example-for-the-loader-context): `'/abc/resource.js?rrr'`
 
 ### this.resourcePath
 
-The resource file.
+ملف resource.
 
-In [the example](#example-for-the-loader-context): `'/abc/resource.js'`
+في [المثال](#example-for-the-loader-context): `'/abc/resource.js'`
 
 ### this.resourceQuery
 
-The query of the resource.
+query الخاصة بالـ resource.
 
-In [the example](#example-for-the-loader-context): `'?rrr'`
+في [المثال](#example-for-the-loader-context): `'?rrr'`
 
 ### this.rootContext
 
-Since webpack 4, the formerly `this.options.context` is provided as `this.rootContext`.
+منذ webpack 4، أصبحت القيمة التي كانت سابقًا `this.options.context` متاحة باسم `this.rootContext`.
 
 ### this.sourceMap
 
-Tells if source map should be generated. Since generating source maps can be an expensive task, you should check if source maps are actually requested.
+يخبرك هل يجب توليد source map أم لا. لأن توليد source maps قد يكون مكلفًا، يجب فحص هل هي مطلوبة فعلًا.
 
 ### this.target
 
-Target of compilation. Passed from configuration options.
+هدف compilation. يُمرر من خيارات الإعداد.
 
-Example values: `'web'`, `'node'`
+أمثلة للقيم: `'web'` و`'node'`.
 
 ### this.utils
 
 <Badge text="5.27.0+" />
 
-Access to the following utilities.
+وصول إلى الأدوات التالية.
 
-- `absolutify`: Return a new request string using absolute paths when possible.
-- `contextify`: Return a new request string avoiding absolute paths when possible.
-- `createHash`: Return a new Hash object from provided hash function.
+- `absolutify`: يرجع request string جديدًا باستخدام مسارات مطلقة عندما يكون ذلك ممكنًا.
+- `contextify`: يرجع request string جديدًا يتجنب المسارات المطلقة عندما يكون ذلك ممكنًا.
+- `createHash`: يرجع كائن Hash جديدًا من دالة hash المقدمة.
 
 **my-sync-loader.js**
 
@@ -641,63 +629,63 @@ export default function (content) {
 
 ### this.version
 
-**Loader API version.** Currently `2`. This is useful for providing backwards compatibility. Using the version you can specify custom logic or fallbacks for breaking changes.
+**إصدار Loader API.** حاليًا `2`. هذا مفيد لتوفير التوافق مع الإصدارات السابقة. باستخدام الإصدار يمكنك تحديد منطق مخصص أو fallbacks للتغييرات الكاسرة.
 
 ### this.webpack
 
-This boolean is set to true when this is compiled by webpack.
+تكون هذه boolean مضبوطة على true عندما يتم التجميع بواسطة webpack.
 
-T> Loaders were originally designed to also work as Babel transforms. Therefore, if you write a loader that works for both, you can use this property to know if there is access to additional loaderContext and webpack features.
+T> صُممت loaders في الأصل لتعمل أيضًا كتحويلات Babel. لذلك إذا كتبت loader يعمل في الحالتين، يمكنك استخدام هذه الخاصية لمعرفة هل يوجد وصول إلى loaderContext إضافي وميزات webpack.
 
-## Webpack specific properties
+## خصائص خاصة بـ Webpack
 
-The loader interface provides all module relate information. However, in rare cases you might need access to the compiler API itself.
+توفر واجهة loader كل المعلومات المتعلقة بـ module. لكن في حالات نادرة قد تحتاج إلى الوصول إلى Compiler API نفسها.
 
-W> Please note that using these webpack specific properties will have a negative impact on your loaders compatibility.
+W> لاحظ أن استخدام هذه الخصائص الخاصة بـ webpack سيؤثر سلبًا في توافق loader.
 
-Therefore you should only use them as a last resort. Using them will reduce the portability of your loader.
+لذلك لا تستخدمها إلا كحل أخير. استخدامها يقلل قابلية نقل loader.
 
 ### this.\_compilation
 
-Access to the current Compilation object of webpack.
+وصول إلى كائن Compilation الحالي في webpack.
 
 ### this.\_compiler
 
-Access to the current Compiler object of webpack.
+وصول إلى كائن Compiler الحالي في webpack.
 
-## Deprecated context properties
+## خصائص context مهملة
 
-W> The usage of these properties is highly discouraged since we are planning to remove them from the context. They are still listed here for documentation purposes.
+W> لا ننصح باستخدام هذه الخصائص لأننا نخطط لإزالتها من context. ما زالت مذكورة هنا لأغراض التوثيق.
 
 ### this.debug
 
-A boolean flag. It is set when in debug mode.
+boolean flag. يتم ضبطه عند العمل في debug mode.
 
 ### this.inputValue
 
-Passed from the last loader. If you would execute the input argument as a module, consider reading this variable for a shortcut (for performance).
+تُمرر من آخر loader. إذا كنت ستنفذ input argument كـ module، ففكر في قراءة هذا المتغير كاختصار لأسباب أداء.
 
 ### this.minimize
 
-Tells if result should be minimized.
+يخبرك هل يجب تصغير النتيجة أم لا.
 
 ### this.value
 
-Pass values to the next loader. If you know what your result exports if executed as a module, set this value here (as an only element array).
+يمرر قيمًا إلى loader التالي. إذا كنت تعرف ماذا ستصدّر النتيجة عند تنفيذها كـ module، فاضبط هذه القيمة هنا، كـ array تحتوي عنصرًا واحدًا فقط.
 
 ### this.\_module
 
-Hacky access to the Module object being loaded.
+وصول غير رسمي إلى كائن Module الجاري تحميله.
 
-## Error Reporting
+## الإبلاغ عن الأخطاء
 
-You can report errors from inside a loader by:
+يمكنك الإبلاغ عن الأخطاء من داخل loader عبر:
 
-- Using [this.emitError](/api/loaders/#thisemiterror). Will report the errors without interrupting module's compilation.
-- Using `throw` (or other uncaught exception). Throwing an error while a loader is running will cause current module compilation failure.
-- Using `callback` (in async mode). Pass an error to the callback will also cause module compilation failure.
+- استخدام [this.emitError](/api/loaders/#thisemiterror). سيبلّغ عن الأخطاء بدون إيقاف compilation الخاص بالـ module.
+- استخدام `throw` أو أي exception غير ممسوكة. رمي خطأ أثناء تشغيل loader سيؤدي إلى فشل compilation للـ module الحالي.
+- استخدام `callback` في الوضع غير المتزامن. تمرير خطأ إلى callback سيؤدي أيضًا إلى فشل compilation للـ module.
 
-For example:
+مثال:
 
 **./src/index.js**
 
@@ -705,7 +693,7 @@ For example:
 import "./loader!./lib";
 ```
 
-Throwing an error from loader:
+رمي خطأ من loader:
 
 **./src/loader.js**
 
@@ -715,7 +703,7 @@ export default function (source) {
 }
 ```
 
-Or pass an error to the callback in async mode:
+أو تمرير خطأ إلى callback في الوضع غير المتزامن:
 
 **./src/loader.js**
 
@@ -727,7 +715,7 @@ export default function (source) {
 }
 ```
 
-The module will get bundled like this:
+سيُحزم module بهذا الشكل:
 
 ```text
 /***/ "./src/loader.js!./src/lib.js":
@@ -742,7 +730,7 @@ throw new Error("Module build failed (from ./src/loader.js):\nError: This is a F
 /***/ })
 ```
 
-Then the build output will also display the error (Similar to `this.emitError`):
+ثم سيعرض build output الخطأ أيضًا، بشكل مشابه لـ `this.emitError`:
 
 ```bash
 ERROR in ./src/lib.js (./src/loader.js!./src/lib.js)
@@ -752,30 +740,30 @@ Error: This is a Fatal Error!
  @ ./src/index.js 1:0-25
 ```
 
-As you can see below, not only error message, but also details about which loader and module are involved:
+كما ترى، لا تعرض الرسالة نص الخطأ فقط، بل تعرض أيضًا تفاصيل عن loader وmodule المعنيين:
 
-- the module path: `ERROR in ./src/lib.js`
-- the request string: `(./src/loader.js!./src/lib.js)`
-- the loader path: `(from ./src/loader.js)`
-- the caller path: `@ ./src/index.js 1:0-25`
+- مسار module: `ERROR in ./src/lib.js`
+- نص request: `(./src/loader.js!./src/lib.js)`
+- مسار loader: `(from ./src/loader.js)`
+- مسار المستدعي: `@ ./src/index.js 1:0-25`
 
-W> The loader path in the error is displayed since webpack 4.12
+W> يُعرض مسار loader داخل الخطأ منذ webpack 4.12.
 
-T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings).
+T> سيتم تسجيل كل الأخطاء والتحذيرات داخل `stats`. راجع [Stats Data](/api/stats/#errors-and-warnings).
 
 ## Inline matchResource
 
-A new inline request syntax was introduced in webpack v4. Prefixing `<match-resource>!=!` to a request will set the `matchResource` for this request.
+أُضيفت صيغة inline request جديدة في webpack v4. إضافة `<match-resource>!=!` قبل request ستضبط `matchResource` لذلك request.
 
-W> It is not recommended to use this syntax in application code.
-Inline request syntax is intended to only be used by loader generated code.
-Not following this recommendation will make your code webpack-specific and non-standard.
+W> لا يُنصح باستخدام هذه الصيغة داخل كود التطبيق.
+صيغة inline request مخصصة للاستخدام فقط في الكود الذي تولده loaders.
+عدم اتباع هذه التوصية سيجعل كودك خاصًا بـ webpack وغير قياسي.
 
-T> A relative `matchResource` will resolve relative to the current context of the containing module.
+T> يتم حل `matchResource` النسبي نسبة إلى context الحالي للـ module الذي يحتويه.
 
-When a `matchResource` is set, it will be used to match with the [`module.rules`](/configuration/module/#modulerules) instead of the original resource. This can be useful if further loaders should be applied to the resource, or if the module type needs to be changed. It's also displayed in the stats and used for matching [`Rule.issuer`](/configuration/module/#ruleissuer) and [`test` in `splitChunks`](/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest).
+عند ضبط `matchResource`، سيُستخدم للمطابقة مع [`module.rules`](/configuration/module/#modulerules) بدل resource الأصلي. يفيد ذلك إذا كان يجب تطبيق loaders إضافية على resource، أو إذا كان نوع module يحتاج إلى تغيير. كما يظهر في stats ويُستخدم لمطابقة [`Rule.issuer`](/configuration/module/#ruleissuer) و[`test` في `splitChunks`](/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest).
 
-Example:
+مثال:
 
 **file.js**
 
@@ -784,9 +772,9 @@ Example:
 console.log("yep");
 ```
 
-A loader could transform the file into the following file and use the `matchResource` to apply the user-specified CSS processing rules:
+يمكن لـ loader تحويل الملف إلى الملف التالي واستخدام `matchResource` لتطبيق قواعد معالجة CSS التي حددها المستخدم:
 
-**file.js** (transformed by loader)
+**file.js** (تم تحويله بواسطة loader)
 
 ```js
 import "./file.js.css!=!extract-style-loader/getStyles!./file.js";
@@ -794,9 +782,9 @@ import "./file.js.css!=!extract-style-loader/getStyles!./file.js";
 console.log("yep");
 ```
 
-This will add a dependency to `extract-style-loader/getStyles!./file.js` and treat the result as `file.js.css`. Because [`module.rules`](/configuration/module/#modulerules) has a rule matching `/\.css$/` and it will apply to this dependency.
+سيضيف هذا dependency إلى `extract-style-loader/getStyles!./file.js` ويعامل النتيجة كأنها `file.js.css`. وبما أن [`module.rules`](/configuration/module/#modulerules) لديها rule تطابق `/\.css$/`، فسيتم تطبيقها على هذا dependency.
 
-The loader could look like this:
+قد يكون loader بهذا الشكل:
 
 **extract-style-loader/index.js**
 
@@ -828,8 +816,8 @@ export default function (source) {
 
 ## Logging
 
-Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/infrastructureLogging) is enabled, loaders may log messages which will be printed out in the respective logger format (stats, infrastructure).
+واجهة Logging API متاحة منذ webpack 4.37. عند تفعيل `logging` في [إعدادات stats](/configuration/stats/#statslogging)، أو عند تفعيل [`infrastructure logging`](/configuration/infrastructureLogging)، يمكن لـ loaders تسجيل رسائل تُطبع بتنسيق logger المناسب، سواء stats أو infrastructure.
 
-- Loaders should prefer to use `this.getLogger()` for logging which is a shortcut to `compilation.getLogger()` with loader path and processed file. This kind of logging is stored to the Stats and formatted accordingly. It can be filtered and exported by the webpack user.
-- Loaders may use `this.getLogger('name')` to get an independent logger with a child name. Loader path and processed file is still added.
-- Loaders may use specific fallback logic for detecting logging support `this.getLogger ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method.
+- يُفضّل أن تستخدم loaders الدالة `this.getLogger()` للتسجيل، وهي اختصار لـ `compilation.getLogger()` مع مسار loader والملف المعالج. هذا النوع من logging يُخزن داخل Stats ويُنسق بناءً عليها. ويمكن لمستخدم webpack فلترته أو تصديره.
+- يمكن لـ loaders استخدام `this.getLogger('name')` للحصول على logger مستقل باسم فرعي. ما زال مسار loader والملف المعالج يضافان.
+- يمكن لـ loaders استخدام fallback خاص لاكتشاف دعم logging، مثل `this.getLogger ? this.getLogger() : console`، لتوفير fallback عند استخدام إصدار webpack قديم لا يدعم دالة `getLogger`.
diff --git a/src/content/api/logging.mdx b/src/content/api/logging.mdx
index 05c54a11a29d..422c31afcfe7 100644
--- a/src/content/api/logging.mdx
+++ b/src/content/api/logging.mdx
@@ -1,32 +1,29 @@
 ---
-title: Logger Interface
+title: واجهة Logger
 sort: 6
 contributors:
-  - EugeneHlushko
-  - wizardofhogwarts
-  - chenxsan
-  - snitin315
+  - RlxChap2
 ---
 
-Logging output is an additional way to display messages to the end users.
+تسجيل الرسائل طريقة إضافية لعرض معلومات مفيدة للمستخدمين أثناء البناء أو عند تحليل نتائجه.
 
-Webpack logger is available to [loaders](/loaders/) and [plugins](/api/plugins/#logging). Emitting as part of the [Stats](/api/stats/) and configured by the user in [webpack configuration](/configuration/).
+يوفّر webpack logger يمكن استخدامه داخل [loaders](/loaders/) و[plugins](/api/plugins/#logging). ويمكن إخراج هذه الرسائل ضمن [Stats](/api/stats/) أو التحكم بها من خلال [إعدادات webpack](/configuration/).
 
-Benefits of custom logging API in webpack:
+فوائد logging API المخصص في webpack:
 
-- Common place to [configure the logging](/configuration/stats/#statslogging) display level
-- Logging output exportable as part of the `stats.json`
-- Stats presets affect logging output
-- Plugins can affect logging capturing and display level
-- When using multiple plugins and loaders they use a common logging solution
-- CLI, UI tools for webpack may choose different ways to display logging
-- webpack core can emit logging output, e.g. timing data
+- مكان موحّد [لضبط مستوى عرض الرسائل](/configuration/stats/#statslogging).
+- إمكانية تصدير رسائل logging ضمن ملف `stats.json`.
+- تأثير stats presets على رسائل logging.
+- قدرة plugins على التأثير في التقاط الرسائل ومستوى عرضها.
+- استخدام حل logging موحد عندما يعمل أكثر من plugin أو loader معًا.
+- إمكانية اختيار CLI أو أدوات UI الخاصة بـ webpack طرقًا مختلفة لعرض الرسائل.
+- قدرة webpack core على إخراج رسائل logging، مثل بيانات التوقيت.
 
-By introducing webpack logging API we hope to unify the way webpack plugins and loaders emit logs and allow better ways to inspect build problems. Integrated logging solution supports plugins and loaders developers by improving their development experience. Paves the way for non-CLI webpack solutions like dashboards or other UIs.
+من خلال webpack logging API، يحاول webpack توحيد طريقة إخراج logs من plugins وloaders، وتوفير طرق أفضل لفحص مشاكل البناء. هذا الحل المدمج يساعد مطوري plugins وloaders ويحسّن تجربة التطوير، ويمهّد لحلول غير CLI مثل dashboards أو واجهات UI أخرى.
 
-W> **Avoid noise in the log!** Keep in mind that multiple plugins and loaders are used together. Loaders are usually processing multiple files and are invoked for every file. Choose a logging level as low as possible to keep the log output informative.
+W> **تجنب الضوضاء في السجل.** تذكّر أن عدة plugins وloaders قد تعمل معًا، وأن loaders غالبًا تعالج ملفات كثيرة وتُستدعى لكل ملف. اختر أقل مستوى logging ممكن حتى يبقى السجل مفيدًا وسهل القراءة.
 
-## Examples of how to get and use webpack logger in loaders and plugins
+## أمثلة لاستخدام webpack logger داخل loaders وplugins
 
 **my-webpack-plugin.js**
 
@@ -59,35 +56,35 @@ export default function (source) {
 }
 ```
 
-As you can see from the above `my-webpack-plugin.js` example, there're two types of logging methods,
+كما يظهر في مثال `my-webpack-plugin.js` أعلاه، توجد طريقتان أساسيتان للحصول على logger:
 
 1. `compilation.getLogger`
 2. `compiler.getInfrastructureLogger`
 
-It's advised to use `compilation.getLogger` when plugin/logging is related to the compilation, and they will be stored within the stats. For logging that happens outside the compilation cycle, use `compiler.getInfrastructureLogger` instead.
+ينصح باستخدام `compilation.getLogger` عندما تكون الرسائل مرتبطة بعملية compilation نفسها، لأنها ستُحفظ ضمن stats. أما logging الذي يحدث خارج دورة compilation، فاستخدم له `compiler.getInfrastructureLogger`.
 
-## Logger methods
+## دوال Logger
 
-- `logger.error(...)`: for error messages
-- `logger.warn(...)`: for warnings
-- `logger.info(...)`: for **important** information messages. These messages are displayed by default. Only use this for messages that the user really needs to see
-- `logger.log(...)`: for **unimportant** information messages. These messages are displayed only when user had opted-in to see them
-- `logger.debug(...)`: for debugging information. These messages are displayed only when user had opted-in to see debug logging for specific modules
-- `logger.trace()`: to display a stack trace. Displayed like `logger.debug`
-- `logger.group(...)`: to group messages. Displayed collapsed like `logger.log`
-- `logger.groupEnd()`: to end a logging group
-- `logger.groupCollapsed(...)`: to group messages together. Displayed collapsed like `logger.log`. Displayed expanded when logging level is set to `'verbose'` or `'debug'`.
-- `logger.status`: writes a temporary message, setting a new status, overrides the previous one
-- `logger.clear()`: to print a horizontal line. Displayed like `logger.log`
-- `logger.profile(...)`, `logger.profileEnd(...)`: to capture a profile. Delegated to `console.profile` when supported
+- `logger.error(...)`: لرسائل الأخطاء.
+- `logger.warn(...)`: للتحذيرات.
+- `logger.info(...)`: للرسائل المهمة. تظهر هذه الرسائل افتراضيًا، لذلك استخدمها فقط للمعلومات التي يحتاج المستخدم إلى رؤيتها فعلًا.
+- `logger.log(...)`: للرسائل المعلوماتية الأقل أهمية. لا تظهر هذه الرسائل إلا إذا اختار المستخدم عرضها.
+- `logger.debug(...)`: لمعلومات التصحيح. لا تظهر إلا إذا اختار المستخدم تفعيل debug logging لـ modules محددة.
+- `logger.trace()`: لعرض stack trace. تُعرض مثل `logger.debug`.
+- `logger.group(...)`: لتجميع الرسائل. تُعرض مطوية مثل `logger.log`.
+- `logger.groupEnd()`: لإنهاء مجموعة logging.
+- `logger.groupCollapsed(...)`: لتجميع الرسائل معًا. تُعرض مطوية مثل `logger.log`، وتظهر مفتوحة عندما يكون مستوى logging هو `'verbose'` أو `'debug'`.
+- `logger.status`: يكتب رسالة مؤقتة ويضبط status جديدًا بدل السابق.
+- `logger.clear()`: لطباعة خط فاصل. تُعرض مثل `logger.log`.
+- `logger.profile(...)`, `logger.profileEnd(...)`: لالتقاط profile. تُمرر إلى `console.profile` عندما يكون مدعومًا.
 
 ## Runtime Logger API
 
-Runtime logger API is only intended to be used as a development tool, it is not intended to be included in [production mode](/configuration/mode/#mode-production).
+Runtime logger API مخصص للاستخدام كأداة تطوير فقط، وليس المقصود تضمينه في [وضع الإنتاج](/configuration/mode/#mode-production).
 
-- `import logging from 'webpack/lib/logging/runtime'`: to use the logger in runtime, require it directly from webpack
-- `logging.getLogger('name')`: to get individual logger by name
-- `logging.configureDefaultLogger(...)`: to override the default logger.
+- `import logging from 'webpack/lib/logging/runtime'`: لاستخدام logger وقت التشغيل، استورده مباشرة من webpack.
+- `logging.getLogger('name')`: للحصول على logger مستقل بالاسم.
+- `logging.configureDefaultLogger(...)`: لاستبدال logger الافتراضي.
 
 ```js
 import logging from "webpack/lib/logging/runtime";
@@ -98,4 +95,4 @@ logging.configureDefaultLogger({
 });
 ```
 
-- `logging.hooks.log`: to apply Plugins to the runtime logger
+- `logging.hooks.log`: لتطبيق plugins على runtime logger.
diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx
index 673a7f266294..ccddb3728fbb 100644
--- a/src/content/api/module-methods.mdx
+++ b/src/content/api/module-methods.mdx
@@ -1,20 +1,9 @@
 ---
-title: Module Methods
+title: دوال Module
 group: Modules
 sort: 7
 contributors:
-  - skipjack
-  - sokra
-  - fadysamirsadek
-  - byzyk
-  - debs-obrien
-  - wizardofhogwarts
-  - EugeneHlushko
-  - chenxsan
-  - jamesgeorge007
-  - WofWca
-  - snitin315
-  - adriancuadrado
+  - RlxChap2
 related:
   - title: CommonJS Wikipedia
     url: https://en.wikipedia.org/wiki/CommonJS
@@ -22,34 +11,34 @@ related:
     url: https://en.wikipedia.org/wiki/Asynchronous_module_definition
 ---
 
-This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a variety of module syntax styles including [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015), [CommonJS](https://en.wikipedia.org/wiki/CommonJS), and [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition).
+يغطي هذا القسم كل الدوال المتاحة داخل الكود الذي تم تجميعه بواسطة webpack. عند استخدام webpack لتحزيم تطبيقك، يمكنك الاختيار بين عدة صيغ للـ modules، مثل [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015) و[CommonJS](https://en.wikipedia.org/wiki/CommonJS) و[AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition).
 
-While webpack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors/bugs. Actually webpack would enforce the recommendation for `.mjs` files, `.cjs` files or `.js` files when their nearest parent `package.json` file contains a `"type"` field with a value of either `"module"` or `"commonjs"`. Please pay attention to these enforcements before you read on:
+رغم أن webpack يدعم عدة صيغ للـ modules، فإننا نوصي باتباع صيغة واحدة للمحافظة على الاتساق وتجنب السلوكيات الغريبة أو الأخطاء. في الواقع، يفرض webpack هذه التوصية على ملفات `.mjs` وملفات `.cjs` وملفات `.js` عندما يحتوي أقرب ملف `package.json` أب على حقل `"type"` بقيمة `"module"` أو `"commonjs"`. انتبه لهذه القيود قبل المتابعة:
 
-- `.mjs` or `.js` with `"type": "module"` in `package.json`
-  - No CommonJS allowed, for example, you can't use `require`, `module.exports` or `exports`
-  - File extensions are required when importing, e.g, you should use `import './src/App.mjs'` instead of `import './src/App'` (you can disable this enforcement with [`Rule.resolve.fullySpecified`](/configuration/module/#resolvefullyspecified))
-- `.cjs` or `.js` with `"type": "commonjs"` in `package.json`
-  - Neither `import` nor `export` is available
-- `.wasm` with `"type": "module"` in `package.json`
-  - File extensions are required when importing wasm file
+- ملفات `.mjs` أو `.js` مع `"type": "module"` في `package.json`
+  - لا يُسمح بـ CommonJS، مثل `require` أو `module.exports` أو `exports`.
+  - يجب كتابة امتدادات الملفات عند الاستيراد، مثل استخدام `import './src/App.mjs'` بدل `import './src/App'`. يمكنك تعطيل هذا القيد عبر [`Rule.resolve.fullySpecified`](/configuration/module/#resolvefullyspecified).
+- ملفات `.cjs` أو `.js` مع `"type": "commonjs"` في `package.json`
+  - لا تتوفر `import` ولا `export`.
+- ملفات `.wasm` مع `"type": "module"` في `package.json`
+  - يجب كتابة امتداد الملف عند استيراد ملف wasm.
 
-## ES6 (Recommended)
+## ES6 (موصى به)
 
-Version 2 of webpack supports ES6 module syntax natively, meaning you can use `import` and `export` without a tool like babel to handle this for you. Keep in mind that you will still probably need babel for other ES6+ features. The following methods are supported by webpack:
+يدعم webpack 2 صيغة ES6 modules بشكل أصلي، وهذا يعني أنك تستطيع استخدام `import` و`export` بدون أداة مثل babel للتعامل مع ذلك. مع ذلك، قد تحتاج إلى babel لميزات ES6+ الأخرى. يدعم webpack الدوال التالية:
 
 ### import
 
-Statically `import` the `export`s of another module.
+يستورد `export`s من module آخر بشكل ثابت.
 
 ```js
 import MyModule from "./my-module.js";
 import { NamedExport } from "./other-module.js";
 ```
 
-W> The keyword here is **statically**. A normal `import` statement cannot be used dynamically within other logic or contain variables. See the [spec](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) for more information and `import()` below for dynamic usage.
+W> الكلمة المهمة هنا هي **ثابت**. لا يمكن استخدام عبارة `import` العادية بشكل ديناميكي داخل منطق آخر أو مع متغيرات. راجع [المواصفة](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) لمزيد من المعلومات، وراجع `import()` أدناه للاستخدام الديناميكي.
 
-You can also `import` Data URI:
+يمكنك أيضًا استيراد Data URI:
 
 ```js
 import "data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7";
@@ -61,7 +50,7 @@ import {
 
 ### export
 
-Export anything as a `default` or named export.
+صدّر أي شيء كـ `default` أو كتصدير مسمى.
 
 ```js
 // Named exports
@@ -80,43 +69,43 @@ export default {
 
 `function(string path):Promise`
 
-Dynamically load modules. Calls to `import()` are treated as split points, meaning the requested module and its children are split out into a separate chunk.
+يحمّل modules بشكل ديناميكي. يتعامل webpack مع استدعاءات `import()` كنقاط تقسيم، أي أن module المطلوب وأبناءه يُفصلون داخل chunk مستقل.
 
-T> The [ES2015 Loader spec](https://whatwg.github.io/loader/) defines `import()` as method to load ES2015 modules dynamically on runtime.
+T> تعرّف [مواصفة ES2015 Loader](https://whatwg.github.io/loader/) الدالة `import()` كطريقة لتحميل ES2015 modules ديناميكيًا وقت التشغيل.
 
 ```js
 if (module.hot) {
   import("lodash").then((_) => {
-    // Do something with lodash (a.k.a '_')...
+    // افعل شيئًا باستخدام lodash، المعروف أيضًا باسم '_'
   });
 }
 ```
 
-W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `import()` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تعتمد هذه الميزة داخليًا على [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). إذا استخدمت `import()` مع متصفحات قديمة، فتذكر إضافة shim لـ `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
 
 ### Dynamic expressions in import()
 
-It is not possible to use a fully dynamic import statement, such as `import(foo)`. Because `foo` could potentially be any path to any file in your system or project.
+لا يمكن استخدام عبارة import ديناميكية بالكامل مثل `import(foo)`. السبب أن `foo` قد يكون أي مسار لأي ملف في نظامك أو مشروعك.
 
-The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included.
-For example, ``import(`./locale/${language}.json`)`` will only bundle all `.json` files in the `./locale` directory and subdirectories into the new chunk and exclude files with other file extensions. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
+يجب أن تحتوي `import()` على قدر من المعلومات عن مكان module. يمكن حصر bundling في مجلد محدد أو مجموعة ملفات محددة، بحيث عند استخدام expression ديناميكي يتم تضمين كل module يمكن طلبه عبر `import()`.
+مثلًا، ``import(`./locale/${language}.json`)`` سيحزم فقط كل ملفات `.json` داخل مجلد `./locale` ومجلداته الفرعية داخل chunk الجديد، وسيستبعد الملفات ذات الامتدادات الأخرى. وقت التشغيل، بعد حساب المتغير `language`، سيكون أي ملف مثل `english.json` أو `german.json` متاحًا للاستخدام.
 
 ```js
-// imagine we had a method to get language from cookies or other storage
+// تخيل أن لدينا دالة لمعرفة اللغة من cookies أو تخزين آخر
 const language = detectVisitorLanguage();
 import(`./locale/${language}.json`).then((module) => {
-  // do something with the translations
+  // افعل شيئًا بالترجمات
 });
 ```
 
-T> Using the [`webpackInclude` and `webpackExclude`](/api/module-methods/#magic-comments) options allows you to add regex patterns that reduce the number of files that webpack will bundle for this import.
+T> يسمح استخدام خياري [`webpackInclude` و`webpackExclude`](/api/module-methods/#magic-comments) بإضافة regex patterns تقلل عدد الملفات التي سيحزمها webpack لهذا الاستيراد.
 
 #### Magic Comments
 
-By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
+عند إضافة comments إلى import، يمكننا فعل أشياء مثل تسمية chunk أو اختيار modes مختلفة. للاطلاع على القائمة الكاملة لهذه magic comments، راجع الكود أدناه ثم شرح وظيفة كل تعليق.
 
 ```js
-// Single target
+// هدف واحد
 import(
   /* webpackChunkName: "my-chunk-name" */
   /* webpackMode: "lazy" */
@@ -125,7 +114,7 @@ import(
   "node:module"
 );
 
-// Multiple possible targets
+// عدة أهداف محتملة
 import(
   /* webpackInclude: /\.json$/ */
   /* webpackExclude: /\.noimport\.json$/ */
@@ -139,15 +128,15 @@ import(
 import(/* webpackIgnore: true */ "ignored-module.js");
 ```
 
-T> Single line comments (`//`) are also supported. JSDoc comments (`/** */`) are not.
+T> التعليقات ذات السطر الواحد (`//`) مدعومة أيضًا. أما تعليقات JSDoc (`/** */`) فليست مدعومة.
 
 ##### webpackIgnore
 
-**JavaScript Usage**
+**استخدام JavaScript**
 
-Disables dynamic import parsing when set to `true`.
+يعطل تحليل dynamic import عند ضبطه على `true`.
 
-When using `import.meta.url`, it does not remain as-is; instead, it gets replaced based on the `baseURI`. For modules, it is replaced with `new URL("./", import.meta.url)`, and for other cases, it defaults to `document.baseURI`. This ensures that relative URLs work correctly, aligning with the base URL context.
+عند استخدام `import.meta.url`، لا يبقى كما هو؛ بل يُستبدل بناءً على `baseURI`. في modules، يُستبدل بـ `new URL("./", import.meta.url)`، وفي الحالات الأخرى تكون القيمة الافتراضية `document.baseURI`. هذا يضمن عمل relative URLs بشكل صحيح، بما يتوافق مع سياق base URL.
 
 ```js
 import(/* webpackIgnore: true */ "ignored-module.js");
@@ -155,14 +144,14 @@ import(/* webpackIgnore: true */ "ignored-module.js");
 new URL(/* webpackIgnore: true */ "./file1.css", import.meta.url);
 ```
 
-W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
+W> لاحظ أن ضبط `webpackIgnore` على `true` يعني الخروج من code splitting.
 
-**CSS Usage**
+**استخدام CSS**
 
-The `webpackIgnore` comment can control whether webpack processes a specific import or URL reference.
-It works in certain cases out of the box but **doesn’t support all cases** by default due to performance reasons.
+يمكن لتعليق `webpackIgnore` التحكم فيما إذا كان webpack سيعالج import أو مرجع URL محددًا.
+يعمل في حالات معينة مباشرة، لكنه **لا يدعم كل الحالات** افتراضيًا لأسباب تتعلق بالأداء.
 
-We support `webpackIgnore` in the following cases:
+ندعم `webpackIgnore` في الحالات التالية:
 
 ```css
 @import /* webpackIgnore: false */ url(./basic.css);
@@ -181,13 +170,13 @@ We support `webpackIgnore` in the following cases:
 }
 ```
 
-T> For other CSS scenarios, [`css-loader` fully supports `webpackIgnore`](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment), allowing more flexibility if needed.
+T> في سيناريوهات CSS الأخرى، يدعم [`css-loader` خيار `webpackIgnore` بالكامل](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment)، مما يعطيك مرونة أكبر عند الحاجة.
 
-**HTML Usage**
+**استخدام HTML**
 
 <Badge text="5.107.0+" />
 
-When [`experiments.html`](/configuration/experiments/#experimentshtml) is enabled, `webpackIgnore` can be placed as an HTML comment immediately before a tag to skip URL resolution for that tag's `src`, `href`, `srcset`, and similar attributes. The tag is left untouched in the emitted HTML. This mirrors the behavior provided by `html-loader`.
+عند تفعيل [`experiments.html`](/configuration/experiments/#experimentshtml)، يمكن وضع `webpackIgnore` كتعليق HTML مباشرة قبل الوسم لتجاوز حل URL لخصائص مثل `src` و`href` و`srcset` وما شابه. يُترك الوسم كما هو في HTML الصادر. هذا يعكس السلوك الذي يوفره `html-loader`.
 
 ```html
 <!-- webpackIgnore: true -->
@@ -197,17 +186,17 @@ When [`experiments.html`](/configuration/experiments/#experimentshtml) is enable
 <script src="/legacy/external.js"></script>
 ```
 
-The magic-comment value is parsed with the same context used by the JS and CSS parsers; non-boolean values emit an `UnsupportedFeatureWarning`.
+تُقرأ قيمة magic-comment بالسياق نفسه المستخدم في parsers الخاصة بـ JS وCSS؛ القيم غير boolean تصدر `UnsupportedFeatureWarning`.
 
 ##### webpackChunkName
 
-A name for the new chunk. Since webpack 2.6.0, the placeholders `[index]` and `[request]` are supported within the given string to an incremented number or the actual resolved filename respectively. Adding this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.
+اسم chunk الجديد. منذ webpack 2.6.0، يتم دعم placeholders `[index]` و`[request]` داخل النص المعطى، حيث تُستبدل برقم متزايد أو باسم الملف المحلول فعليًا على الترتيب. إضافة هذا التعليق تجعل chunk المنفصل يسمى [my-chunk-name].js بدل [id].js.
 
 ##### webpackFetchPriority
 
 <Badge text="5.87.0+" />
 
-Set [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) for specific dynamic imports. It's also possible to set a global default value for all dynamic imports by using the [`module.parser.javascript.dynamicImportFetchPriority`](/configuration/module/#moduleparserjavascriptdynamicimportfetchpriority) option.
+يضبط [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) لاستيرادات ديناميكية محددة. ويمكن أيضًا ضبط قيمة افتراضية عامة لكل dynamic imports باستخدام خيار [`module.parser.javascript.dynamicImportFetchPriority`](/configuration/module/#moduleparserjavascriptdynamicimportfetchpriority).
 
 ```js
 import(
@@ -218,42 +207,42 @@ import(
 
 ##### webpackMode
 
-Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:
+منذ webpack 2.6.0، يمكن تحديد modes مختلفة لحل dynamic imports. الخيارات التالية مدعومة:
 
-- `'lazy'` (default): Generates a lazy-loadable chunk for each `import()`ed module.
-- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. ``import(`./locales/${language}.json`)``, where multiple module paths that can potentially be requested.
-- `'eager'`: Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A `Promise` is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to `import()` is made.
-- `'weak'`: Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A `Promise` is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the `Promise` is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.
+- `'lazy'` (الافتراضي): يولد chunk قابلًا للتحميل الكسول لكل module يتم استيراده عبر `import()`.
+- `'lazy-once'`: يولد chunk واحدًا قابلًا للتحميل الكسول يكفي كل استدعاءات `import()`. يتم جلب chunk عند أول استدعاء لـ `import()`، وتستخدم الاستدعاءات اللاحقة الاستجابة الشبكية نفسها. هذا لا يكون منطقيًا إلا في حالة عبارة ديناميكية جزئية، مثل ``import(`./locales/${language}.json`)``، حيث توجد عدة مسارات modules يمكن طلبها.
+- `'eager'`: لا يولد chunk إضافيًا. تُضمّن كل modules داخل chunk الحالي ولا تُرسل طلبات شبكة إضافية. ما زالت الدالة ترجع `Promise` لكنها تكون محلولة مسبقًا. بخلاف static import، لا يُنفّذ module إلا عند استدعاء `import()`.
+- `'weak'`: يحاول تحميل module إذا كانت دالة module قد حُمّلت بطريقة أخرى، مثل أن chunk آخر استوردها أو script يحتوي على module تم تحميله. ما زالت الدالة ترجع `Promise`، لكنها لا تنجح إلا إذا كانت chunks موجودة بالفعل على client. إذا لم يكن module متاحًا، تُرفض `Promise`. لن يتم تنفيذ طلب شبكة أبدًا. هذا مفيد لـ universal rendering عندما تكون chunks المطلوبة مقدمة يدويًا دائمًا في الطلبات الأولية، مثل تضمينها داخل الصفحة، لكنه ليس مناسبًا عندما يؤدي تنقل المستخدم داخل التطبيق إلى import لم يكن مقدمًا أوليًا.
 
 ##### webpackPrefetch
 
-Tells the browser that the resource is probably needed for some navigation in the future. Check out the guide for more information on [how webpackPrefetch works](/guides/code-splitting/#prefetchingpreloading-modules).
+يخبر المتصفح أن resource قد تكون مطلوبة غالبًا في تنقل مستقبلي. راجع الدليل لمزيد من المعلومات عن [طريقة عمل webpackPrefetch](/guides/code-splitting/#prefetchingpreloading-modules).
 
 ##### webpackPreload
 
-Tells the browser that the resource might be needed during the current navigation. Check out the guide for more information on [how webpackPreload works](/guides/code-splitting/#prefetchingpreloading-modules).
+يخبر المتصفح أن resource قد تكون مطلوبة أثناء التنقل الحالي. راجع الدليل لمزيد من المعلومات عن [طريقة عمل webpackPreload](/guides/code-splitting/#prefetchingpreloading-modules).
 
-T> Note that all options can be combined like so `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. This is wrapped in a JavaScript object and executed using [node VM](https://nodejs.org/dist/latest-v8.x/docs/api/vm.html). You do not need to add curly brackets.
+T> لاحظ أن كل الخيارات يمكن دمجها هكذا: `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. يتم تغليف ذلك داخل كائن JavaScript وتنفيذه باستخدام [node VM](https://nodejs.org/dist/latest-v8.x/docs/api/vm.html). لا تحتاج إلى إضافة الأقواس `{}`.
 
 ##### webpackInclude
 
-A regular expression that will be matched against during import resolution. Only modules that match **will be bundled**.
+تعبير regular expression تتم مطابقته أثناء حل import. فقط modules المطابقة **سيتم حزمها**.
 
 ##### webpackExclude
 
-A regular expression that will be matched against during import resolution. Any module that matches **will not be bundled**.
+تعبير regular expression تتم مطابقته أثناء حل import. أي module يطابقه **لن يتم حزمها**.
 
-T> Note that `webpackInclude` and `webpackExclude` options do not interfere with the prefix. eg: `./locale`.
+T> لاحظ أن خياري `webpackInclude` و`webpackExclude` لا يتداخلان مع prefix، مثل: `./locale`.
 
 ##### webpackExports
 
-Tells webpack to only bundle the specified exports of a dynamically `import()`ed module. It can decrease the output size of a chunk. Available since [webpack 5.0.0-beta.18](https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.18).
+يخبر webpack بأن يحزم فقط exports المحددة من module المستورد ديناميكيًا عبر `import()`. يمكن أن يقلل حجم output الخاص بـ chunk. متاح منذ [webpack 5.0.0-beta.18](https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.18).
 
-W> `webpackExports` cannot be used with destructuring assignments.
+W> لا يمكن استخدام `webpackExports` مع destructuring assignments.
 
 ## CommonJS
 
-The goal of CommonJS is to specify an ecosystem for JavaScript outside the browser. The following CommonJS methods are supported by webpack:
+هدف CommonJS هو تحديد منظومة JavaScript خارج المتصفح. يدعم webpack دوال CommonJS التالية:
 
 ### require
 
@@ -261,16 +250,16 @@ The goal of CommonJS is to specify an ecosystem for JavaScript outside the brows
 require(dependency: String);
 ```
 
-Synchronously retrieve the exports from another module. The compiler will ensure that the dependency is available in the output bundle.
+يجلب exports من module آخر بشكل متزامن. سيضمن compiler توفر dependency داخل output bundle.
 
 ```js
 import $ from "jquery";
 import myModule from "my-module";
 ```
 
-It's possible to enable magic comments for `require` as well, see [`module.parser.javascript.commonjsMagicComments`](/configuration/module/#moduleparserjavascriptcommonjsmagiccomments) for more.
+يمكن أيضًا تفعيل magic comments لـ `require`. راجع [`module.parser.javascript.commonjsMagicComments`](/configuration/module/#moduleparserjavascriptcommonjsmagiccomments) للمزيد.
 
-W> Using it asynchronously may not have the expected effect.
+W> استخدامه بشكل غير متزامن قد لا يعطي الأثر المتوقع.
 
 ### require.resolve
 
@@ -278,39 +267,39 @@ W> Using it asynchronously may not have the expected effect.
 require.resolve(dependency: String);
 ```
 
-Synchronously retrieve a module's ID. The compiler will ensure that the dependency is available in the output bundle. It is recommended to treat it as an opaque value which can only be used with `require.cache[id]` or `__webpack_require__(id)` (best to avoid such usage).
+يجلب ID الخاص بـ module بشكل متزامن. سيضمن compiler توفر dependency داخل output bundle. يُنصح بالتعامل معه كقيمة opaque لا تُستخدم إلا مع `require.cache[id]` أو `__webpack_require__(id)`، والأفضل تجنب هذا الاستخدام.
 
-W> Module ID's type can be a `number` or a `string` depending on the [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) configuration.
+W> يمكن أن يكون نوع Module ID رقمًا أو نصًا بحسب إعداد [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids).
 
-See [`module.id`](/api/module-variables/#moduleid-commonjs) for more information.
+راجع [`module.id`](/api/module-variables/#moduleid-commonjs) لمزيد من المعلومات.
 
 ### require.cache
 
-Multiple requires of the same module result in only one module execution and only one export. Therefore a cache in the runtime exists. Removing values from this cache causes new module execution and a new export.
+عدة استدعاءات `require` للـ module نفسه تؤدي إلى تنفيذ module مرة واحدة فقط وتصدير واحد فقط. لذلك يوجد cache في runtime. إزالة قيم من هذا cache تؤدي إلى تنفيذ جديد للـ module وتصدير جديد.
 
-W> This is only needed in rare cases for compatibility!
+W> هذا مطلوب فقط في حالات توافق نادرة.
 
 ```js
 import d1 from "dependency";
 
-// In ESM, module caching is handled automatically.
-// Manual cache deletion like in CommonJS is not supported.
+// في ESM، تتم إدارة module caching تلقائيًا.
+// حذف cache يدويًا كما في CommonJS غير مدعوم.
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept("dependency", (newModule) => {
-    // Handle module update here
+    // تعامل مع تحديث module هنا
   });
 }
 ```
 
 ```js
 // in file.js
-// In ESM, manual cache manipulation is not supported.
-// Webpack handles module caching internally.
+// في ESM، التلاعب اليدوي بالـ cache غير مدعوم.
+// يتعامل webpack مع module caching داخليًا.
 ```
 
 ### require.ensure
 
-W> `require.ensure()` is specific to webpack and superseded by `import()`.
+W> `require.ensure()` خاص بـ webpack واستُبدل عمليًا بـ `import()`.
 
 ```ts
 require.ensure(
@@ -321,9 +310,9 @@ require.ensure(
 )
 ```
 
-Split out the given `dependencies` to a separate bundle that will be loaded asynchronously. When using CommonJS module syntax, this is the only way to dynamically load dependencies. Meaning, this code can be run within execution, only loading the `dependencies` if certain conditions are met.
+يفصل `dependencies` المحددة إلى bundle مستقل يتم تحميله بشكل غير متزامن. عند استخدام صيغة CommonJS modules، هذه هي الطريقة الوحيدة لتحميل dependencies ديناميكيًا. أي يمكن تشغيل هذا الكود أثناء التنفيذ، ولا تُحمّل `dependencies` إلا إذا تحققت شروط معينة.
 
-W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `require.ensure` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تعتمد هذه الميزة داخليًا على [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). إذا استخدمت `require.ensure` مع متصفحات قديمة، فتذكر إضافة shim لـ `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
 
 ```js
 const a = require("normal-dep");
@@ -331,26 +320,26 @@ const a = require("normal-dep");
 if (module.hot) {
   import("b").then(() => {
     import("c").then((c) => {
-      // Do something special...
+      // افعل شيئًا خاصًا...
     });
   });
 }
 ```
 
-The following parameters are supported in the order specified above:
+parameters التالية مدعومة بالترتيب الموضح أعلاه:
 
-- `dependencies`: An array of strings declaring all modules required for the code in the `callback` to execute.
-- `callback`: A function that webpack will execute once the dependencies are loaded. An implementation of the `require` function is sent as a parameter to this function. The function body can use this to further `require()` modules it needs for execution.
-- `errorCallback`: A function that is executed when webpack fails to load the dependencies.
-- `chunkName`: A name given to the chunk created by this particular `require.ensure()`. By passing the same `chunkName` to various `require.ensure()` calls, we can combine their code into a single chunk, resulting in only one bundle that the browser must load.
+- `dependencies`: array من strings تعلن كل modules المطلوبة لتنفيذ الكود داخل `callback`.
+- `callback`: دالة ينفذها webpack بعد تحميل dependencies. يتم إرسال implementation لدالة `require` كـ parameter إلى هذه الدالة. يمكن لجسم الدالة استخدامه لاستدعاء `require()` لأي modules إضافية يحتاجها للتنفيذ.
+- `errorCallback`: دالة تُنفّذ عندما يفشل webpack في تحميل dependencies.
+- `chunkName`: اسم يُعطى للـ chunk الذي ينشئه استدعاء `require.ensure()` هذا. عبر تمرير `chunkName` نفسه لعدة استدعاءات `require.ensure()`، يمكن دمج كودها داخل chunk واحد، مما ينتج bundle واحدًا فقط يحتاج المتصفح إلى تحميله.
 
-W> Although the implementation of `require` is passed as an argument to the `callback` function, using an arbitrary name e.g. `require.ensure([], function(request) { request('someModule'); })` isn't handled by webpack's static parser. Use `require` instead, e.g. `require.ensure([], function(require) { require('someModule'); })`.
+W> رغم أن implementation الخاص بـ `require` يُمرر كـ argument إلى دالة `callback`، فإن استخدام اسم عشوائي مثل `require.ensure([], function(request) { request('someModule'); })` لا يتعامل معه parser الثابت في webpack. استخدم `require` بدلًا من ذلك، مثل: `require.ensure([], function(require) { require('someModule'); })`.
 
 ## AMD
 
-W> These syntaxes are legacy. We highly recommend using ES6 Modules for modern applications.
+W> هذه الصيغ قديمة. نوصي بشدة باستخدام ES6 Modules في التطبيقات الحديثة.
 
-Asynchronous Module Definition (AMD) is a JavaScript specification that defines an interface for writing and loading modules. The following AMD methods are supported by webpack:
+Asynchronous Module Definition (AMD) هي مواصفة JavaScript تحدد واجهة لكتابة modules وتحميلها. يدعم webpack دوال AMD التالية:
 
 ### define (with factory)
 
@@ -358,21 +347,21 @@ Asynchronous Module Definition (AMD) is a JavaScript specification that defines
 define([name: String], [dependencies: String[]], factoryMethod: function(...))
 ```
 
-If `dependencies` are provided, `factoryMethod` will be called with the exports of each dependency (in the same order). If `dependencies` are not provided, `factoryMethod` is called with `require`, `exports` and `module` (for compatibility!). If this function returns a value, this value is exported by the module. The compiler ensures that each dependency is available.
+إذا تم توفير `dependencies`، فسيتم استدعاء `factoryMethod` مع exports الخاصة بكل dependency بالترتيب نفسه. إذا لم يتم توفير `dependencies`، فسيتم استدعاء `factoryMethod` مع `require` و`exports` و`module` لأسباب توافقية. إذا أرجعت هذه الدالة قيمة، فسيتم تصدير تلك القيمة من module. يضمن compiler توفر كل dependency.
 
-W> Note that webpack ignores the `name` argument.
+W> لاحظ أن webpack يتجاهل argument المسمى `name`.
 
 ```js
 define(["jquery", "my-module"], ($, myModule) =>
-  // Do something with $ and myModule...
+  // افعل شيئًا باستخدام $ وmyModule...
 
-  // Export a function
+  // صدّر دالة
   function doSomething() {
     // ...
   });
 ```
 
-W> This CANNOT be used in an asynchronous function.
+W> لا يمكن استخدام هذا داخل دالة غير متزامنة.
 
 ### define (with value)
 
@@ -380,7 +369,7 @@ W> This CANNOT be used in an asynchronous function.
 define(value: !Function)
 ```
 
-This will export the provided `value`. The `value` here can be anything except a function.
+سيصدّر هذا `value` المقدمة. يمكن أن تكون `value` هنا أي شيء باستثناء دالة.
 
 ```js
 define({
@@ -388,7 +377,7 @@ define({
 });
 ```
 
-W> This CANNOT be used in an async function.
+W> لا يمكن استخدام هذا داخل دالة async.
 
 ### require (amd-version)
 
@@ -396,49 +385,49 @@ W> This CANNOT be used in an async function.
 require(dependencies: String[], [callback: function(...)])
 ```
 
-Similar to `require.ensure`, this will split the given `dependencies` into a separate bundle that will be loaded asynchronously. The `callback` will be called with the exports of each dependency in the `dependencies` array.
+بشكل مشابه لـ `require.ensure`، ستُفصل `dependencies` المحددة إلى bundle مستقل يتم تحميله بشكل غير متزامن. سيتم استدعاء `callback` مع exports الخاصة بكل dependency داخل array المسماة `dependencies`.
 
-W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use AMD with older browsers (e.g. Internet Explorer 11), remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تعتمد هذه الميزة داخليًا على [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). إذا استخدمت AMD مع متصفحات قديمة، مثل Internet Explorer 11، فتذكر إضافة shim لـ `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
 
 ```js
 import("b").then((b) => {
   import("c").then((c) => {
-    // b और c का इस्तेमाल करें
+    // استخدم b و c
   });
 });
 ```
 
-W> There is no option to provide a chunk name.
+W> لا يوجد خيار لتوفير اسم chunk.
 
 ## Labeled Modules
 
-W> These syntaxes are legacy. We highly recommend using ES6 Modules for modern applications.
+W> هذه الصيغ قديمة. نوصي بشدة باستخدام ES6 Modules في التطبيقات الحديثة.
 
-The internal `LabeledModulesPlugin` enables you to use the following methods for exporting and requiring within your modules:
+يفعّل `LabeledModulesPlugin` الداخلي استخدام الدوال التالية للتصدير والطلب داخل modules:
 
 ### export label
 
-Export the given `value`. The label can occur before a function declaration or a variable declaration. The function name or variable name is the identifier under which the value is exported.
+يصدّر `value` المحددة. يمكن أن تأتي label قبل function declaration أو variable declaration. يكون اسم الدالة أو اسم المتغير هو identifier الذي تُصدر تحته القيمة.
 
 ```ts
 export: const answer = 42;
 export: function method(value) {
-  // Do something...
+  // افعل شيئًا...
 };
 ```
 
-W> Using it in an async function may not have the expected effect.
+W> استخدامه داخل دالة async قد لا يعطي الأثر المتوقع.
 
 ### require label
 
-Make all exports from the dependency available in the current scope. The `require` label can occur before a string. The dependency must export values with the `export` label. CommonJS or AMD modules cannot be consumed.
+يجعل كل exports من dependency متاحة داخل النطاق الحالي. يمكن أن تظهر label الخاصة بـ `require` قبل string. يجب أن تصدّر dependency القيم باستخدام label الخاصة بـ `export`. لا يمكن استهلاك CommonJS أو AMD modules بهذه الطريقة.
 
 **some-dependency.js**
 
 ```ts
 export: const answer = 42;
 export: function method(value) {
-  // Do something...
+  // افعل شيئًا...
 };
 ```
 
@@ -450,20 +439,20 @@ method(...);
 
 ## Webpack
 
-Aside from the module syntaxes described above, webpack also allows a few custom, webpack-specific methods:
+إلى جانب صيغ modules الموضحة أعلاه، يسمح webpack أيضًا بعدة دوال مخصصة خاصة به:
 
 ### require.context
 
 ```ts
 require.context(
   (directory: String),
-  (includeSubdirs: Boolean) /* optional, default true */,
-  (filter: RegExp) /* optional, default /^\.\/.*$/, any file */,
-  (mode: String) /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
+  (includeSubdirs: Boolean) /* اختياري، الافتراضي true */,
+  (filter: RegExp) /* اختياري، الافتراضي /^\.\/.*$/ أي ملف */,
+  (mode: String) /* اختياري، 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'، الافتراضي 'sync' */
 );
 ```
 
-Specify a whole group of dependencies using a path to the `directory`, an option to `includeSubdirs`, a `filter` for more fine grained control of the modules included, and a `mode` to define the way how loading will work. Underlying modules can then be resolved later on:
+حدد مجموعة كاملة من dependencies باستخدام مسار إلى `directory`، وخيار `includeSubdirs`، و`filter` للتحكم الأدق في modules المضمنة، و`mode` لتحديد طريقة التحميل. يمكن بعد ذلك حل modules الأساسية لاحقًا:
 
 ```js
 const context = import.meta.webpackContext("components", {
@@ -473,7 +462,7 @@ const context = import.meta.webpackContext("components", {
 const componentA = context.resolve("componentA");
 ```
 
-If `mode` is set to `'lazy'`, the underlying modules will be loaded asynchronously:
+إذا تم ضبط `mode` على `'lazy'`، فسيتم تحميل modules الأساسية بشكل غير متزامن:
 
 ```js
 const context = import.meta.webpackContext("locales", {
@@ -482,11 +471,11 @@ const context = import.meta.webpackContext("locales", {
   mode: "lazy",
 });
 context("localeA").then((locale) => {
-  // do something with locale
+  // افعل شيئًا باستخدام locale
 });
 ```
 
-The full list of available modes and their behavior is described in [`import()`](#import-1) documentation.
+القائمة الكاملة للـ modes المتاحة وسلوكها موضحة في توثيق [`import()`](#import-1).
 
 ### require.include
 
@@ -494,49 +483,49 @@ The full list of available modes and their behavior is described in [`import()`]
 require.include((dependency: String));
 ```
 
-Include a `dependency` without executing it. This can be used for optimizing the position of a module in the output chunks.
+يضمّن `dependency` بدون تنفيذه. يمكن استخدام ذلك لتحسين موضع module داخل output chunks.
 
 ```js
 import("a");
 import("b");
 import("c").then((moduleC) => {
-  // Use moduleC here
+  // استخدم moduleC هنا
 });
 ```
 
-This will result in the following output:
+سينتج عن ذلك output التالي:
 
-- entry chunk: `file.js` and `a`
-- anonymous chunk: `b`
-- anonymous chunk: `c`
+- entry chunk: `file.js` و`a`.
+- anonymous chunk: `b`.
+- anonymous chunk: `c`.
 
-Without `require.include('a')` it would be duplicated in both anonymous chunks.
+بدون `require.include('a')` كان سيتم تكراره في كلا anonymous chunks.
 
 ### require.resolveWeak
 
-Similar to `require.resolve`, but this won't pull the `module` into the bundle. It's what is considered a "weak" dependency.
+يشبه `require.resolve`، لكنه لا يسحب `module` إلى bundle. هذا ما يُعد dependency "ضعيفًا".
 
 ```js
 if (__webpack_modules__[require.resolveWeak("module")]) {
-  // Do something when module is available...
+  // افعل شيئًا عندما يكون module متاحًا...
 }
 if (require.cache[require.resolveWeak("module")]) {
-  // Do something when module was loaded before...
+  // افعل شيئًا عندما يكون module قد حُمّل سابقًا...
 }
 
-// You can perform dynamic resolves ("context")
-// similarly to other require/import methods.
+// يمكنك تنفيذ resolves ديناميكية "context"
+// بطريقة مشابهة لدوال require/import الأخرى.
 const page = "Foo";
 __webpack_modules__[require.resolveWeak(`./page/${page}`)];
 ```
 
-T> `require.resolveWeak` is the foundation of _universal rendering_ (SSR + Code Splitting), as used in packages such as [react-universal-component](https://github.com/faceyspacey/react-universal-component). It allows code to render synchronously on both the server and initial page-loads on the client. It requires that chunks are manually served or somehow available. It's able to require modules without indicating they should be bundled into a chunk. It's used in conjunction with `import()` which takes over when user navigation triggers additional imports.
+T> `require.resolveWeak` هو أساس _universal rendering_، أي SSR + Code Splitting، كما في حزم مثل [react-universal-component](https://github.com/faceyspacey/react-universal-component). يسمح للكود بأن يرندر بشكل متزامن على الخادم وعند أول تحميل للصفحة على العميل. يتطلب أن تكون chunks مقدمة يدويًا أو متاحة بطريقة ما. يستطيع طلب modules بدون الإشارة إلى أنه يجب حزمها داخل chunk. ويُستخدم مع `import()` التي تتولى الأمر عندما يؤدي تنقل المستخدم إلى imports إضافية.
 
 ### warning
 
-If the module source contains a require that cannot be statically analyzed, critical dependencies warning is emitted.
+إذا كان مصدر module يحتوي على require لا يمكن تحليله بشكل ثابت، فسيصدر تحذير critical dependencies.
 
-Example code:
+مثال:
 
 ```js
 someFn(require);
diff --git a/src/content/api/module-variables.mdx b/src/content/api/module-variables.mdx
index 14ab60d100c9..43b9c2002ab7 100644
--- a/src/content/api/module-variables.mdx
+++ b/src/content/api/module-variables.mdx
@@ -1,19 +1,9 @@
 ---
-title: Module Variables
+title: متغيرات Module
 group: Modules
 sort: 8
 contributors:
-  - skipjack
-  - sokra
-  - ahmehri
-  - tbroadley
-  - byzyk
-  - EugeneHlushko
-  - wizardofhogwarts
-  - anikethsaha
-  - chenxsan
-  - jamesgeorge007
-  - snitin315
+  - RlxChap2
 related:
   - title: CommonJS
     url: https://en.wikipedia.org/wiki/CommonJS
@@ -21,19 +11,19 @@ related:
     url: https://en.wikipedia.org/wiki/Asynchronous_module_definition
 ---
 
-This section covers all **variables** available in code compiled with webpack. Modules will have access to certain data from the compilation process through `module` and other variables.
+يغطي هذا القسم كل **المتغيرات** المتاحة داخل الكود الذي تم تجميعه بواسطة webpack. تستطيع modules الوصول إلى بعض بيانات عملية compilation عبر `module` ومتغيرات أخرى.
 
 ## module.loaded (NodeJS)
 
-This is `false` if the module is currently executing, and `true` if the sync execution has finished.
+تكون قيمته `false` إذا كان module يُنفّذ حاليًا، وتكون `true` إذا اكتمل التنفيذ المتزامن.
 
 ## module.hot (webpack-specific)
 
-Indicates whether or not [Hot Module Replacement](/concepts/hot-module-replacement) is enabled and provides an interface to the process. See the [HMR API page](/api/hot-module-replacement) for details.
+يوضح ما إذا كانت [Hot Module Replacement](/concepts/hot-module-replacement) مفعّلة أم لا، ويوفر واجهة للتعامل معها. راجع صفحة [HMR API](/api/hot-module-replacement) للتفاصيل.
 
 ## module.id (CommonJS)
 
-The ID of the current module.
+معرّف module الحالي.
 
 ```js
 console.log(import.meta.url);
@@ -41,19 +31,19 @@ console.log(import.meta.url);
 
 ## export default
 
-Defines the value that will be returned when a consumer makes a `import` call to the module (defaults to a new object).
+يحدد القيمة التي سترجع عندما يستورد مستخدم آخر هذا module باستخدام `import`. القيمة الافتراضية تكون كائنًا جديدًا.
 
 ```js
 export default function doSomething() {
-  // Do something...
+  // افعل شيئًا...
 }
 ```
 
-W> This CANNOT be used in an asynchronous function.
+W> لا يمكن استخدام هذا داخل دالة غير متزامنة.
 
 ## exports (CommonJS)
 
-Named exports allow you to export multiple variables, functions, or objects from a single module. Unlike a default export, you must use the exact name when importing these values.
+تسمح named exports بتصدير عدة متغيرات أو دوال أو كائنات من module واحد. بخلاف default export، يجب استخدام الاسم نفسه تمامًا عند استيراد هذه القيم.
 
 ```js
 export const someValue = 42;
@@ -61,70 +51,70 @@ export const anObject = {
   x: 123,
 };
 export function doSomething() {
-  // Do something
+  // افعل شيئًا
 }
 ```
 
 ## global (NodeJS)
 
-See [node.js global](https://nodejs.org/api/globals.html#globals_global).
+راجع [global في node.js](https://nodejs.org/api/globals.html#globals_global).
 
-For compatibility reasons webpack polyfills the `global` variable by default.
+لأسباب توافقية، يضيف webpack polyfill للمتغير `global` افتراضيًا.
 
 ## \_\_dirname (NodeJS)
 
-Depending on the configuration option `node.__dirname`:
+بحسب خيار الإعداد `node.__dirname`:
 
-- `false`: Not defined
-- `mock`: equal to `'/'`
-- `true`: [node.js \_\_dirname](https://nodejs.org/api/globals.html#globals_dirname)
+- `false`: غير معرّف.
+- `mock`: يساوي `'/'`.
+- `true`: [\_\_dirname في node.js](https://nodejs.org/api/globals.html#globals_dirname).
 
-If used inside an expression that is parsed by the Parser, the configuration option is treated as `true`.
+إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه `true`.
 
 ## import.meta
 
-The `import.meta` exposes context-specific metadata to a JavaScript module, such as the URL of the module. It is only available in [ESM](/guides/ecma-script-modules/).
+يعرض `import.meta` بيانات وصفية مرتبطة بسياق JavaScript module، مثل URL الخاص بالـ module. وهو متاح فقط في [ESM](/guides/ecma-script-modules/).
 
-Please note that webpack does not support direct access to `import.meta`. Instead, you should access its properties or use destructuring assignment. E.g.,
+انتبه إلى أن webpack لا يدعم الوصول المباشر إلى `import.meta`. بدلًا من ذلك، استخدم خصائصه أو استخدم destructuring assignment. مثلًا:
 
 ```js
-// webpack will warn about this
+// سيعرض webpack تحذيرًا لهذا الاستخدام
 Object.keys(import.meta);
 
-// fine to use
+// هذا الاستخدام صحيح
 console.log(import.meta.url);
 const { url } = import.meta;
 ```
 
 ### import.meta.url
 
-Returns the absolute `file:` URL of the module.
+ترجع URL مطلقًا بصيغة `file:` للـ module.
 
 **src/index.js**
 
 ```js
-console.log(import.meta.url); // output something like `file:///path/to/your/project/src/index.js`
+console.log(import.meta.url); // يخرج شيئًا مثل `file:///path/to/your/project/src/index.js`
 ```
 
 ### import.meta.webpack
 
-Returns the webpack version.
+ترجع إصدار webpack.
 
 **src/index.js**
 
 ```js
-console.log(import.meta.webpack); // output `5` for webpack 5
+console.log(import.meta.webpack); // يخرج `5` في webpack 5
 ```
 
 ### import.meta.webpackHot
 
-Webpack specific. An alias for [`module.hot`](#modulehot-webpack-specific), however `import.meta.webpackHot` can be used in [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm) while `module.hot` can't.
+خاص بـ webpack. هو alias لـ [`module.hot`](#modulehot-webpack-specific)، لكن يمكن استخدام `import.meta.webpackHot` داخل [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm)، بينما لا يمكن استخدام `module.hot` هناك.
 
 ### import.meta.webpackContext
 
-Returns the same value as `require.context` but only for `javascript/auto` and `javascript/esm`.
+ترجع القيمة نفسها التي ترجعها `require.context`، لكنها تعمل فقط مع `javascript/auto` و`javascript/esm`.
 
-- Type:
+- النوع:
 
   ```ts
   (
@@ -143,8 +133,8 @@ Returns the same value as `require.context` but only for `javascript/auto` and `
   ) => webpack.Context;
   ```
 
-- Available: 5.70.0+
-- Example:
+- متاح منذ: 5.70.0+
+- مثال:
 
   ```js
   const contextRequire = import.meta.webpackContext(".", {
@@ -159,7 +149,7 @@ Returns the same value as `require.context` but only for `javascript/auto` and `
 
 <Badge text="5.103.0+" />
 
-Returns a boolean indicating whether the current module is an entry point.
+ترجع boolean يوضح ما إذا كان module الحالي هو entry point.
 
 **src/index.js** (entry point)
 
@@ -167,19 +157,19 @@ Returns a boolean indicating whether the current module is an entry point.
 console.log(import.meta.main); // true
 ```
 
-**src/utils.js** (not an entry point)
+**src/utils.js** (ليس entry point)
 
 ```js
 console.log(import.meta.main); // false
 ```
 
-This is useful for conditional logic that should only run in entry modules, similar to Node.js's `require.main === module` check.
+هذا مفيد للمنطق الشرطي الذي يجب أن يعمل فقط داخل entry modules، بطريقة تشبه فحص `require.main === module` في Node.js.
 
 ### import.meta.env
 
 <Badge text="5.103.0+" />
 
-Access environment variables from multiple sources. `import.meta.env` is an object that behaves similarly to `process.env`, allowing you to access environment variables defined through various webpack plugins and configuration options.
+تسمح بالوصول إلى environment variables من مصادر متعددة. `import.meta.env` هو object يتصرف بطريقة قريبة من `process.env`، مما يتيح لك الوصول إلى متغيرات البيئة المعرّفة عبر plugins وإعدادات webpack المختلفة.
 
 **webpack.config.js**
 
@@ -187,16 +177,16 @@ Access environment variables from multiple sources. `import.meta.env` is an obje
 import webpack from "webpack";
 
 export default {
-  mode: "production", // NODE_ENV is automatically set to "production"
+  mode: "production", // يتم ضبط NODE_ENV تلقائيًا إلى "production"
   dotenv: {
-    prefix: "WEBPACK_", // Only expose variables with WEBPACK_ prefix
+    prefix: "WEBPACK_", // اكشف فقط المتغيرات التي تبدأ بالبادئة WEBPACK_
   },
   plugins: [
-    // EnvironmentPlugin exposes variables from process.env
+    // يكشف EnvironmentPlugin المتغيرات من process.env
     new webpack.EnvironmentPlugin({
       API_URL: "https://api.example.com",
     }),
-    // DefinePlugin allows custom definitions
+    // يسمح DefinePlugin بتعريفات مخصصة
     new webpack.DefinePlugin({
       "import.meta.env.CUSTOM_VAR": JSON.stringify("custom_value"),
     }),
@@ -207,55 +197,55 @@ export default {
 **src/index.js**
 
 ```js
-// Access environment variables
-console.log(import.meta.env.NODE_ENV); // "production" (from mode)
-console.log(import.meta.env.API_URL); // Value from EnvironmentPlugin or process.env
-console.log(import.meta.env.CUSTOM_VAR); // "custom_value" (from DefinePlugin)
+// الوصول إلى environment variables
+console.log(import.meta.env.NODE_ENV); // "production" من mode
+console.log(import.meta.env.API_URL); // قيمة من EnvironmentPlugin أو process.env
+console.log(import.meta.env.CUSTOM_VAR); // "custom_value" من DefinePlugin
 
-// Type checking
+// فحص النوع
 console.log(typeof import.meta.env); // "object"
 
-// Truthy check
+// فحص truthy
 if (import.meta.env) {
-  // import.meta.env is truthy
+  // import.meta.env قيمته truthy
 }
 
-// Accessing non-existent properties returns undefined
+// الوصول إلى خصائص غير موجودة يرجع undefined
 if (!import.meta.env.NOT_EXIST) {
-  // NOT_EXIST is undefined/falsy
+  // NOT_EXIST تساوي undefined/falsy
 }
 
-// Destructuring assignment
+// destructuring assignment
 const { NODE_ENV, API_URL } = import.meta.env;
 ```
 
-**Sources of environment variables:**
+**مصادر environment variables:**
 
-1. **`mode` option**: Automatically sets `import.meta.env.NODE_ENV` based on the webpack mode (`development`, `production`, or `none`).
+1. **خيار `mode`**: يضبط `import.meta.env.NODE_ENV` تلقائيًا بناءً على وضع webpack، مثل `development` أو `production` أو `none`.
 
-2. **[`EnvironmentPlugin`](/plugins/environment-plugin)**: Exposes variables from `process.env` or provides default values.
+2. **[`EnvironmentPlugin`](/plugins/environment-plugin)**: يكشف المتغيرات من `process.env` أو يوفر قيمًا افتراضية.
 
-3. **[`DotenvPlugin`](/configuration/dotenv)**: Loads variables from `.env` files. Only variables with the specified prefix (default: `WEBPACK_`) are exposed.
+3. **[`DotenvPlugin`](/configuration/dotenv)**: يحمّل المتغيرات من ملفات `.env`. لا تُكشف إلا المتغيرات التي تملك البادئة المحددة، والقيمة الافتراضية هي `WEBPACK_`.
 
-4. **[`DefinePlugin`](/plugins/define-plugin)**: Allows custom definitions using the `"import.meta.env.*"` pattern.
+4. **[`DefinePlugin`](/plugins/define-plugin)**: يسمح بتعريفات مخصصة باستخدام النمط `"import.meta.env.*"`.
 
-T> Variables from different sources are merged together. If the same variable is defined in multiple sources, the order of precedence depends on plugin execution order.
+T> يتم دمج المتغيرات من المصادر المختلفة معًا. إذا عُرّف المتغير نفسه في أكثر من مصدر، فترتيب الأولوية يعتمد على ترتيب تنفيذ plugins.
 
-T> `import.meta.env` behaves like `process.env` - it's an object, supports `typeof` checks, and accessing non-existent properties returns `undefined`.
+T> يتصرف `import.meta.env` مثل `process.env`: هو object، ويدعم فحوصات `typeof`، والوصول إلى خصائص غير موجودة يرجع `undefined`.
 
 ## \_\_filename (NodeJS)
 
-Depending on the configuration option `node.__filename`:
+بحسب خيار الإعداد `node.__filename`:
 
-- `false`: Not defined
-- `mock`: equal to `'/index.js'`
-- `true`: [node.js \_\_filename](https://nodejs.org/api/globals.html#globals_filename)
+- `false`: غير معرّف.
+- `mock`: يساوي `'/index.js'`.
+- `true`: [\_\_filename في node.js](https://nodejs.org/api/globals.html#globals_filename).
 
-If used inside an expression that is parsed by the Parser, the configuration option is treated as `true`.
+إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه `true`.
 
 ## \_\_resourceQuery (webpack-specific)
 
-The resource query of the current module. If the following `import` call was made, then the query string would be available in `file.js`.
+يمثل resource query الخاص بالـ module الحالي. إذا كان لديك الاستدعاء التالي، فستكون query string متاحة داخل `file.js`.
 
 ```js
 import "file.js?test";
@@ -269,21 +259,21 @@ __resourceQuery === "?test";
 
 ## \_\_webpack_public_path\_\_ (webpack-specific)
 
-Equals the configuration option's `output.publicPath`.
+يساوي خيار الإعداد `output.publicPath`.
 
 ## \_\_webpack_require\_\_ (webpack-specific)
 
-The raw require function. This expression isn't parsed by the Parser for dependencies.
+دالة `require` الخام. لا يقرأ Parser هذا التعبير لاستخراج dependencies.
 
-W> When webpack bundles are bundled again (e.g., when a previously bundled output is used as input), the [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) will rename `__webpack_require__` from the previous bundle to avoid conflicts (e.g., `__nested_webpack_require_*`). In such cases, use [`__webpack_global__`](#__webpack_global__-webpack-specific) instead, which ensures you can always access the current compilation's `__webpack_require__` function.
+W> عندما تُحزّم bundles الخاصة بـ webpack مرة أخرى، مثل استخدام output محزّم سابقًا كـ input، سيعيد [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) تسمية `__webpack_require__` القادم من bundle السابق لتجنب التعارضات، مثل `__nested_webpack_require_*`. في هذه الحالات، استخدم [`__webpack_global__`](#__webpack_global__-webpack-specific) بدلًا منه، فهو يضمن الوصول دائمًا إلى دالة `__webpack_require__` الخاصة بالـ compilation الحالي.
 
 ## \_\_webpack_chunk_load\_\_ (webpack-specific)
 
-The internal chunk loading function. Takes one argument:
+دالة تحميل chunk الداخلية. تأخذ argument واحدًا:
 
-- `chunkId` The id for the chunk to load.
+- `chunkId` معرّف chunk المطلوب تحميله.
 
-Example to load chunks from alternate public path when one failed:
+مثال لتحميل chunks من public path بديل عند فشل أحد المسارات:
 
 ```js
 const originalLoad = __webpack_chunk_load__;
@@ -301,7 +291,7 @@ __webpack_chunk_load__ = async (id) => {
   throw error;
 };
 import("./module-a").then((moduleA) => {
-  // now webpack will use the custom __webpack_chunk_load__ to load chunk
+  // الآن سيستخدم webpack دالة __webpack_chunk_load__ المخصصة لتحميل chunk
 });
 ```
 
@@ -309,29 +299,29 @@ import("./module-a").then((moduleA) => {
 
 <Badge text="5.68.0+" />
 
-It provides access to the current `module`. `module` is not available in strict ESM.
+يوفر وصولًا إلى `module` الحالي. لا يكون `module` متاحًا داخل strict ESM.
 
 ## \_\_webpack_module\_\_.id (webpack-specific)
 
 <Badge text="5.68.0+" />
 
-It provides access to the ID of current `module` (`module.id`). `module` is not available in strict ESM.
+يوفر وصولًا إلى ID الخاص بالـ `module` الحالي، أي `module.id`. لا يكون `module` متاحًا داخل strict ESM.
 
 ## \_\_webpack_modules\_\_ (webpack-specific)
 
-Access to the internal object of all modules.
+يوفر وصولًا إلى الكائن الداخلي الذي يحتوي على كل modules.
 
 ## \_\_webpack_hash\_\_ (webpack-specific)
 
-It provides access to the hash of the compilation.
+يوفر وصولًا إلى hash الخاص بالـ compilation.
 
 ## \_\_webpack_get_script_filename\_\_ (webpack-specific)
 
 `function (chunkId)`
 
-It provides filename of the chunk by its id.
+يوفر اسم ملف chunk من خلال id الخاص به.
 
-It is assignable, which allows changing the filename used by the runtime. For example, it can be used to determine the final path when loading chunks.
+يمكن إعادة تعيينه، وهذا يسمح بتغيير اسم الملف الذي يستخدمه runtime. مثلًا، يمكن استخدامه لتحديد المسار النهائي عند تحميل chunks.
 
 ```js
 const oldFn = __webpack_get_script_filename__;
@@ -344,13 +334,13 @@ __webpack_get_script_filename__ = (chunkId) => {
 
 ## \_\_non_webpack_require\_\_ (webpack-specific)
 
-Generates a `require` function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.
+ينشئ دالة `require` لا يقرأها webpack. يمكن استخدامها لعمل أشياء متقدمة مع دالة require عامة إذا كانت متاحة.
 
 ## \_\_webpack_global\_\_ (webpack-specific)
 
 <Badge text="5.104.0+" />
 
-An alias for [`__webpack_require__`](#__webpack_require__-webpack-specific). When webpack bundles are bundled again (e.g., when a previously bundled output is used as input), the [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) will rename `__webpack_require__` from the previous bundle to avoid conflicts. `__webpack_global__` ensures you can always access the current compilation's `__webpack_require__` function.
+هو alias لـ [`__webpack_require__`](#__webpack_require__-webpack-specific). عندما تُحزّم bundles الخاصة بـ webpack مرة أخرى، مثل استخدام output محزّم سابقًا كـ input، سيعيد [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) تسمية `__webpack_require__` القادم من bundle السابق لتجنب التعارضات. يضمن `__webpack_global__` الوصول دائمًا إلى دالة `__webpack_require__` الخاصة بالـ compilation الحالي.
 
 **src/module.js**
 
@@ -360,47 +350,47 @@ __webpack_global__.myProperty = "value";
 
 ## \_\_webpack_exports_info\_\_ (webpack-specific)
 
-In modules, `__webpack_exports_info__` is available to allow exports introspection:
+داخل modules، يكون `__webpack_exports_info__` متاحًا للسماح بفحص معلومات exports:
 
-- `__webpack_exports_info__` is always `true`
+- `__webpack_exports_info__` يساوي دائمًا `true`.
 
-- `__webpack_exports_info__.<exportName>.used` is `false` when the export is known to be unused, `true` otherwise
+- `__webpack_exports_info__.<exportName>.used` تكون `false` عندما يكون export معروفًا أنه غير مستخدم، وتكون `true` في غير ذلك.
 
-- `__webpack_exports_info__.<exportName>.useInfo` is
-  - `false` when the export is known to be unused
-  - `true` when the export is known to be used
-  - `null` when the export usage could depend on runtime conditions
-  - `undefined` when no info is available
+- `__webpack_exports_info__.<exportName>.useInfo` تكون:
+  - `false` عندما يكون export معروفًا أنه غير مستخدم.
+  - `true` عندما يكون export معروفًا أنه مستخدم.
+  - `null` عندما قد يعتمد استخدام export على شروط runtime.
+  - `undefined` عندما لا تتوفر معلومات.
 
-- `__webpack_exports_info__.<exportName>.provideInfo` is
-  - `false` when the export is known to be not provided
-  - `true` when the export is known to be provided
-  - `null` when the export provision could depend on runtime conditions
-  - `undefined` when no info is available
+- `__webpack_exports_info__.<exportName>.provideInfo` تكون:
+  - `false` عندما يكون export معروفًا أنه غير مقدّم.
+  - `true` عندما يكون export معروفًا أنه مقدّم.
+  - `null` عندما قد يعتمد تقديم export على شروط runtime.
+  - `undefined` عندما لا تتوفر معلومات.
 
-- Accessing the info from nested exports is possible: i. e. `__webpack_exports_info__.<exportName>.<exportName>.<exportName>.used`
+- يمكن الوصول إلى معلومات nested exports، مثل: `__webpack_exports_info__.<exportName>.<exportName>.<exportName>.used`.
 
-- Check whether exports can be mangled with `__webpack_exports_info__.<name>.canMangle`
+- افحص ما إذا كان يمكن تغيير أسماء exports باستخدام `__webpack_exports_info__.<name>.canMangle`.
 
 ## \_\_webpack_is_included\_\_ (webpack-specific)
 
 <Badge text="5.16.0+" />
 
-Test whether or not the given module is bundled by webpack.
+يفحص ما إذا كان module المحدد مضمنًا في bundle بواسطة webpack أم لا.
 
 ```js
 if (__webpack_is_included__("./module-a.js")) {
-  // do something
+  // افعل شيئًا
 }
 ```
 
 ## \_\_webpack_base_uri\_\_ (webpack-specific)
 
-Change base URI at runtime.
+يغيّر base URI وقت التشغيل.
 
-- Type: `string`
-- Available: 5.21.0+
-- Example:
+- النوع: `string`
+- متاح منذ: 5.21.0+
+- مثال:
 
   ```js
   __webpack_base_uri__ = "https://example.com";
@@ -408,9 +398,9 @@ Change base URI at runtime.
 
 ## \_\_webpack_runtime_id\_\_
 
-Access the [runtime](/blog/2020-10-10-webpack-5-release/#entry-point-runtime) id of current entry.
+يوفر وصولًا إلى id الخاص بـ [runtime](/blog/2020-10-10-webpack-5-release/#entry-point-runtime) للـ entry الحالي.
 
-This is a webpack specific feature and it's available since webpack 5.25.0.
+هذه ميزة خاصة بـ webpack، وهي متاحة منذ webpack 5.25.0.
 
 **src/index.js**
 
@@ -420,4 +410,4 @@ console.log(__webpack_runtime_id__ === "main");
 
 ## DEBUG (webpack-specific)
 
-Equals the configuration option `debug`.
+يساوي خيار الإعداد `debug`.
diff --git a/src/content/api/node.mdx b/src/content/api/node.mdx
index fe0b6c2423d9..47fd4805c901 100644
--- a/src/content/api/node.mdx
+++ b/src/content/api/node.mdx
@@ -1,32 +1,23 @@
 ---
-title: Node Interface
+title: واجهة Node
 sort: 2
 contributors:
-  - sallar
-  - rynclark
-  - byzyk
-  - wizardofhogwarts
-  - EugeneHlushko
-  - lukasgeiter
-  - toshihidetagami
-  - chenxsan
-  - jamesgeorge007
-  - textbook
+  - RlxChap2
 ---
 
-Webpack provides a Node.js API which can be used directly in Node.js runtime.
+يوفر webpack واجهة Node.js API يمكن استخدامها مباشرة داخل بيئة تشغيل Node.js.
 
-The Node.js API is useful in scenarios in which you need to customize the build or development process since all the reporting and error handling must be done manually and webpack only does the compiling part. For this reason the [`stats`](/configuration/stats) configuration options will not have any effect in the `webpack()` call.
+تفيد Node.js API عندما تحتاج إلى تخصيص عملية build أو عملية التطوير؛ لأن عرض النتائج ومعالجة الأخطاء يصبحان مسؤوليتك أنت، بينما يتولى webpack جزء compilation فقط. لهذا السبب، لن تؤثر خيارات إعداد [`stats`](/configuration/stats) عند استدعاء `webpack()`.
 
-## Installation
+## التثبيت
 
-To start using the webpack Node.js API, first install webpack if you haven’t yet:
+لبدء استخدام webpack Node.js API، ثبّت webpack أولًا إذا لم يكن مثبتًا لديك:
 
 ```bash
 npm install --save-dev webpack
 ```
 
-Then import the webpack module in your Node.js script:
+ثم استورد module الخاص بـ webpack داخل سكربت Node.js:
 
 ```js
 import webpack from "webpack";
@@ -34,7 +25,7 @@ import webpack from "webpack";
 
 ## webpack()
 
-The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided:
+تستقبل الدالة `webpack` المستوردة [كائن إعدادات](/configuration/) webpack، وتُشغّل webpack compiler إذا مررت لها callback:
 
 ```js
 import webpack from "webpack";
@@ -43,50 +34,32 @@ webpack({}, (err, stats) => {
   if (err || stats.hasErrors()) {
     // ...
   }
-  // Done processing
+  // انتهت المعالجة
 });
 ```
 
-T> The `err` object **will not** include compilation errors. Those must be handled separately using `stats.hasErrors()`, which will be covered in detail in the [Error Handling](#error-handling) section of this guide. The `err` object will only contain webpack-related issues, such as misconfiguration, etc.
+T> كائن `err` **لن** يحتوي على أخطاء compilation. يجب التعامل مع هذه الأخطاء بشكل منفصل عبر `stats.hasErrors()`، وسيتم شرح ذلك بتفصيل أكبر في قسم [معالجة الأخطاء](#معالجة-الأخطاء). يحتوي `err` فقط على مشاكل مرتبطة بـ webpack نفسه، مثل إعدادات غير صحيحة وما شابه.
 
-T> You can provide the `webpack` function with an array of configurations. See
-the [MultiCompiler](#multicompiler) section below for more information.
+T> يمكنك تمرير array من الإعدادات إلى الدالة `webpack`. راجع قسم [MultiCompiler](#multicompiler) أدناه لمزيد من التفاصيل.
 
-## Compiler Instance
+## نسخة Compiler
 
-If you don’t pass the `webpack` runner function a callback, it will return a
-webpack `Compiler` instance. This instance can be used to manually trigger the
-webpack runner or have it build and watch for changes, much like the
-[CLI](/api/cli/). The `Compiler` instance provides the following methods:
+إذا لم تمرر callback إلى دالة تشغيل `webpack`، فسترجع instance من `Compiler` الخاص بـ webpack. يمكن استخدام هذه instance لتشغيل webpack يدويًا، أو لجعله يبني ويراقب التغييرات، بطريقة مشابهة لـ [CLI](/api/cli/). توفر instance الخاصة بـ `Compiler` الدوال التالية:
 
 - `.run(callback)`
 - `.watch(watchOptions, handler)`
 
-Typically, only one master `Compiler` instance is created, although child
-compilers can be created in order to delegate specific tasks. The `Compiler` is
-ultimately a function which performs bare minimum functionality to keep a
-lifecycle running. It delegates all the loading, bundling, and writing work to
-registered plugins.
+عادةً يتم إنشاء instance رئيسية واحدة فقط من `Compiler`، لكن يمكن إنشاء child compilers لتفويض مهام محددة. في النهاية، `Compiler` هو دالة توفر الحد الأدنى اللازم لإبقاء دورة الحياة تعمل. أما عمليات loading وbundling والكتابة فتُفوّض إلى plugins المسجلة.
 
-The `hooks` property on a `Compiler` instance is used to register a plugin to
-any hook event in the `Compiler`'s lifecycle. The
-[`WebpackOptionsDefaulter`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsDefaulter.js)
-and [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js)
-utilities are used by webpack to configure its `Compiler` instance with all the
-built-in plugins.
+تُستخدم الخاصية `hooks` على instance الخاصة بـ `Compiler` لتسجيل plugin على أي hook event ضمن دورة حياة `Compiler`. ويستخدم webpack الأداتين [`WebpackOptionsDefaulter`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsDefaulter.js) و[`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js) لإعداد instance الخاصة بـ `Compiler` مع كل plugins المدمجة.
 
-The `run` method is then used to kickstart all compilation work. Upon
-completion, the given `callback` function is executed. The final logging of
-stats and errors should be done in this `callback` function.
+تُستخدم الدالة `run` لبدء كل عمل compilation. وبعد الانتهاء، تُنفّذ دالة `callback` التي مررتها. يجب أن يتم تسجيل stats والأخطاء النهائية داخل هذه الدالة.
 
-W> The API only supports a single concurrent compilation at a time. When using `run` or
-`watch`, call `close` and wait for it to finish before calling `run` or `watch`
-again. Concurrent compilations will corrupt the output files.
+W> تدعم هذه API عملية compilation واحدة فقط في الوقت نفسه. عند استخدام `run` أو `watch`، استدعِ `close` وانتظر انتهاءه قبل استدعاء `run` أو `watch` مرة أخرى. تشغيل compilations متزامنة قد يفسد ملفات output.
 
 ## Run
 
-Calling the `run` method on the `Compiler` instance is much like the quick run
-method mentioned above:
+استدعاء الدالة `run` على instance الخاصة بـ `Compiler` يشبه طريقة التشغيل السريعة المذكورة أعلاه:
 
 ```js
 import webpack from "webpack";
@@ -104,13 +77,11 @@ compiler.run((err, stats) => {
 });
 ```
 
-W> Don't forget to close the compiler, so that low-priority work (like persistent caching) have the opportunity to complete.
+W> لا تنس إغلاق compiler حتى تحصل الأعمال ذات الأولوية المنخفضة، مثل persistent caching، على فرصة للاكتمال.
 
 ## Watching
 
-Calling the `watch` method triggers the webpack runner, but then watches for
-changes (much like CLI: `webpack --watch`), as soon as webpack detects a
-change, runs again. Returns an instance of `Watching`.
+استدعاء الدالة `watch` يشغّل webpack runner، ثم يراقب التغييرات بطريقة مشابهة لـ CLI عند استخدام `webpack --watch`. بمجرد أن يكتشف webpack تغييرًا، يعيد التشغيل. وترجع الدالة instance من `Watching`.
 
 ```js
 watch(watchOptions, callback);
@@ -125,29 +96,24 @@ const compiler = webpack({
 
 const watching = compiler.watch(
   {
-    // Example
+    // مثال
     aggregateTimeout: 300,
     poll: undefined,
   },
   (err, stats) => {
-    // Print watch/build result here...
+    // اطبع نتيجة watch/build هنا...
     console.log(stats);
   },
 );
 ```
 
-`Watching` options are covered in detail
-[here](/configuration/watch/#watchoptions).
+خيارات `Watching` مشروحة بتفصيل [هنا](/configuration/watch/#watchoptions).
 
-W> Filesystem inaccuracies may trigger multiple builds for a single change.
-In the example above, the `console.log` statement may fire multiple times for a
-single modification. Users should expect this behavior and may check
-`stats.hash` to see if the file hash has actually changed.
+W> قد تؤدي عدم دقة نظام الملفات إلى تشغيل أكثر من build لتغيير واحد. في المثال السابق، قد تُنفّذ `console.log` أكثر من مرة لتعديل واحد. يجب توقع هذا السلوك، ويمكن فحص `stats.hash` لمعرفة ما إذا كان hash الملف قد تغيّر فعلًا.
 
-### Close `Watching`
+### إغلاق `Watching`
 
-The `watch` method returns a `Watching` instance that exposes
-`.close(callback)` method. Calling this method will end watching:
+ترجع الدالة `watch` instance من `Watching` توفر الدالة `.close(callback)`. استدعاء هذه الدالة ينهي المراقبة:
 
 ```js
 watching.close((closeErr) => {
@@ -155,51 +121,41 @@ watching.close((closeErr) => {
 });
 ```
 
-W> It’s not allowed to watch or run again before the existing watcher has been
-closed or invalidated.
+W> لا يُسمح بتشغيل watch أو run مرة أخرى قبل إغلاق watcher الحالي أو إبطاله.
 
-### Invalidate `Watching`
+### إبطال `Watching`
 
-Using `watching.invalidate`, you can manually invalidate the current compiling
-round, without stopping the watch process:
+باستخدام `watching.invalidate` يمكنك إبطال جولة compilation الحالية يدويًا، بدون إيقاف عملية watch:
 
 ```js
 watching.invalidate();
 ```
 
-## Stats Object
+## كائن Stats
 
-The `stats` object that is passed as a second argument of the
-[`webpack()`](#webpack) callback, is a good source of information about the
-code compilation process. It includes:
+كائن `stats` الذي يُمرر كثاني argument إلى callback الخاصة بـ [`webpack()`](#webpack)، مصدر جيد للمعلومات عن عملية compilation. يحتوي على:
 
-- Errors and Warnings (if any)
-- Timings
-- Module and Chunk information
+- الأخطاء والتحذيرات إن وجدت.
+- التوقيتات.
+- معلومات Module وChunk.
 
-The [webpack CLI](/api/cli) uses this information to display nicely formatted
-output in your console.
+تستخدم [webpack CLI](/api/cli) هذه المعلومات لعرض ناتج منسق بشكل جيد في console.
 
-T> When using the [`MultiCompiler`](#multicompiler), a
-`MultiStats` instance is returned that fulfills the same interface as `stats`,
-i.e. the methods described below.
+T> عند استخدام [`MultiCompiler`](#multicompiler)، يتم إرجاع instance من `MultiStats` تحقق الواجهة نفسها الخاصة بـ `stats`، أي الدوال الموضحة أدناه.
 
-This `stats` object exposes the following methods:
+يعرض كائن `stats` الدوال التالية:
 
 ### stats.hasErrors()
 
-Can be used to check if there were errors while compiling. Returns `true` or
-`false`.
+تُستخدم لمعرفة ما إذا حدثت أخطاء أثناء compilation. ترجع `true` أو `false`.
 
 ### stats.hasWarnings()
 
-Can be used to check if there were warnings while compiling. Returns `true` or
-`false`.
+تُستخدم لمعرفة ما إذا ظهرت تحذيرات أثناء compilation. ترجع `true` أو `false`.
 
 ### stats.toJson(options)
 
-Returns compilation information as a JSON object. `options` can be either a
-string (a preset) or an object for more granular control:
+ترجع معلومات compilation ككائن JSON. يمكن أن تكون `options` نصًا يمثل preset، أو object للتحكم بتفاصيل أكثر:
 
 ```js
 stats.toJson("minimal");
@@ -212,26 +168,25 @@ stats.toJson({
 });
 ```
 
-All available options and presets are described in the stats [documentation](/configuration/stats).
+كل الخيارات والـ presets المتاحة موضحة في [توثيق stats](/configuration/stats).
 
-> Here’s an [example](https://raw.githubusercontent.com/webpack/analyse/master/app/pages/upload/example2.json)
-> of this function’s output.
+> هذا [مثال](https://raw.githubusercontent.com/webpack/analyse/master/app/pages/upload/example2.json)
+> على ناتج هذه الدالة.
 
 ### stats.toString(options)
 
-Returns a formatted string of the compilation information (similar to
-[CLI](/api/cli) output).
+ترجع نصًا منسقًا لمعلومات compilation، بشكل مشابه لناتج [CLI](/api/cli).
 
-Options are the same as [`stats.toJson(options)`](/api/node/#statstojsonoptions) with one addition:
+الخيارات هي نفسها خيارات [`stats.toJson(options)`](/api/node/#statstojsonoptions)، مع إضافة واحدة:
 
 ```js
 stats.toString({
-  // Add console colors
+  // أضف ألوان console
   colors: true,
 });
 ```
 
-Here’s an example of `stats.toString()` usage:
+هذا مثال على استخدام `stats.toString()`:
 
 ```js
 import webpack from "webpack";
@@ -248,8 +203,8 @@ webpack(
 
     console.log(
       stats.toString({
-        chunks: false, // Makes the build much quieter
-        colors: true, // Shows colors in the console
+        chunks: false, // يجعل ناتج build أهدأ بكثير
+        colors: true, // يعرض الألوان في console
       }),
     );
   },
@@ -258,10 +213,7 @@ webpack(
 
 ## MultiCompiler
 
-The `MultiCompiler` module allows webpack to run multiple configurations in
-separate compilers. If the `options` parameter in the webpack's NodeJS api is
-an array of options, webpack applies separate compilers and calls the
-`callback` after all compilers have been executed.
+يسمح module المسمى `MultiCompiler` لـ webpack بتشغيل عدة إعدادات داخل compilers منفصلة. إذا كان parameter المسمى `options` في NodeJS API الخاصة بـ webpack عبارة عن array من الخيارات، فسيطبّق webpack compilers منفصلة ويستدعي `callback` بعد تنفيذ كل compilers.
 
 ```js
 import webpack from "webpack";
@@ -277,19 +229,17 @@ webpack(
 );
 ```
 
-W> Multiple configurations will **not be run in parallel**. Each
-configuration is only processed after the previous one has finished
-processing.
+W> الإعدادات المتعددة **لن تعمل بالتوازي**. كل إعداد يُعالج بعد انتهاء الإعداد السابق.
 
-## Error Handling
+## معالجة الأخطاء
 
-For good error handling, you need to account for these three types of errors:
+لمعالجة الأخطاء بشكل جيد، يجب أن تراعي ثلاثة أنواع:
 
-- Fatal webpack errors (wrong configuration, etc)
-- Compilation errors (missing modules, syntax errors, etc)
-- Compilation warnings
+- أخطاء webpack الحرجة، مثل إعدادات خاطئة.
+- أخطاء compilation، مثل modules مفقودة أو أخطاء syntax.
+- تحذيرات compilation.
 
-Here’s an example that does all that:
+هذا مثال يتعامل مع الأنواع كلها:
 
 ```js
 import webpack from "webpack";
@@ -317,20 +267,14 @@ webpack(
       console.warn(info.warnings);
     }
 
-    // Log result...
+    // سجّل النتيجة...
   },
 );
 ```
 
-## Custom File Systems
+## أنظمة ملفات مخصصة
 
-By default, webpack reads files and writes files to disk using a normal file
-system. However, it is possible to change the input or output behavior using a
-different kind of file system (memory, webDAV, etc). To accomplish this, one
-can change the `inputFileSystem` or `outputFileSystem`. For example, you can
-replace the default `outputFileSystem` with
-[`memfs`](https://github.com/streamich/memfs) to write files to memory
-instead of to disk:
+افتراضيًا، يقرأ webpack الملفات ويكتبها على القرص باستخدام نظام الملفات العادي. لكن يمكن تغيير سلوك الإدخال أو الإخراج باستخدام نوع مختلف من أنظمة الملفات، مثل memory أو webDAV وغيرها. لفعل ذلك، يمكن تغيير `inputFileSystem` أو `outputFileSystem`. مثلًا، يمكنك استبدال `outputFileSystem` الافتراضي بـ [`memfs`](https://github.com/streamich/memfs) لكتابة الملفات في الذاكرة بدل القرص:
 
 ```js
 import { Volume, createFsFromVolume } from "memfs";
@@ -343,7 +287,7 @@ const compiler = webpack({
 
 compiler.outputFileSystem = fs;
 compiler.run((err, stats) => {
-  // Read the output later:
+  // اقرأ output لاحقًا:
   const content = fs.readFileSync("...");
   compiler.close((closeErr) => {
     // ...
@@ -351,12 +295,6 @@ compiler.run((err, stats) => {
 });
 ```
 
-Note that this is what
-[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware),
-used by [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
-and many other packages, uses to mysteriously hide your files but continue
-serving them up to the browser!
+لاحظ أن هذا هو الأسلوب الذي يستخدمه [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)، والذي يستخدمه [webpack-dev-server](https://github.com/webpack/webpack-dev-server) وحزم أخرى كثيرة. لذلك قد تشعر أن ملفاتك "مختفية"، لكنها في الحقيقة تُقدّم للمتصفح من الذاكرة.
 
-T> The output file system you provide needs to be compatible with Node’s own
-[`fs`](https://nodejs.org/api/fs.html) interface, which requires the `mkdirp`
-and `join` helper methods.
+T> يجب أن يكون نظام ملفات output الذي توفره متوافقًا مع واجهة [`fs`](https://nodejs.org/api/fs.html) الخاصة بـ Node، والتي تتطلب دوال مساعدة مثل `mkdirp` و`join`.
diff --git a/src/content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.mdx
index d66e64d69abe..e87b2505e785 100644
--- a/src/content/api/normalmodulefactory-hooks.mdx
+++ b/src/content/api/normalmodulefactory-hooks.mdx
@@ -3,14 +3,12 @@ title: NormalModuleFactory Hooks
 group: Plugins
 sort: 13
 contributors:
-  - iguessitsokay
-  - chenxsan
+  - RlxChap2
 ---
 
-The `NormalModuleFactory` module is used by the `Compiler` to generate modules. Starting with entry points, it resolves each request, parses the content to find further requests, and keeps crawling through files by resolving all and parsing any new files. At last stage, each dependency becomes a Module instance.
+يستخدم `Compiler` الوحدة `NormalModuleFactory` لإنشاء modules. تبدأ العملية من entry points، ثم يحل webpack كل request، ويحلل المحتوى للعثور على requests إضافية، ويستمر في التنقل بين الملفات عبر حل كل request وتحليل أي ملف جديد. في المرحلة الأخيرة، تتحول كل dependency إلى instance من `Module`.
 
-The `NormalModuleFactory` class extends `Tapable` and provides the following
-lifecycle hooks. They can be tapped the same way as compiler hooks:
+ترث class `NormalModuleFactory` من `Tapable` وتوفّر lifecycle hooks التالية. يمكنك استخدام `tap` معها بالطريقة نفسها المستخدمة مع compiler hooks:
 
 ```js
 const nmf = NormalModuleFactory.hooks;
@@ -19,7 +17,7 @@ nmf.someHook.tap("MyPlugin", (resolveData) => {
 });
 ```
 
-NormalModuleFactory creates `Parser` and `Generator` instances which can be accessed by HookMaps. Identifier must be passed to tap into these:
+ينشئ `NormalModuleFactory` instances من `Parser` و`Generator`، ويمكن الوصول إليها عبر HookMaps. يجب تمرير identifier لاستخدام `tap` معها:
 
 ```js
 NormalModuleFactory.hooks.parser
@@ -29,56 +27,55 @@ NormalModuleFactory.hooks.parser
   });
 ```
 
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+كما هو الحال مع `compiler`، قد يتوفر `tapAsync` و`tapPromise` أيضًا حسب نوع hook.
 
 ## beforeResolve
 
 `AsyncSeriesBailHook`
 
-Called when a new dependency request is encountered. A dependency can be ignored by returning `false`. Otherwise, it should return `undefined` to proceed.
+يُستدعى عند ظهور dependency request جديد. يمكن تجاهل dependency بإرجاع `false`. وإلا، أرجع `undefined` حتى تستمر العملية.
 
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
 
 ## factorize
 
 `AsyncSeriesBailHook`
 
-Called before initiating resolve. It should return `undefined` to proceed.
+يُستدعى قبل بدء resolve. يجب إرجاع `undefined` حتى تستمر العملية.
 
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
 
 ## resolve
 
 `AsyncSeriesBailHook`
 
-Called before the request is resolved. A dependency can be ignored by returning `false`. Returning a Module instance would finalize the process. Otherwise, it should return `undefined` to proceed.
+يُستدعى قبل حل request. يمكن تجاهل dependency بإرجاع `false`. كما أن إرجاع instance من `Module` ينهي العملية. وإلا، أرجع `undefined` حتى تستمر العملية.
 
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
 
 ## resolveForScheme
 
 `AsyncSeriesBailHook`
 
-Called before a request with scheme (URI) is resolved.
+يُستدعى قبل حل request يحتوي scheme، مثل URI.
 
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
 
 ## afterResolve
 
 `AsyncSeriesBailHook`
 
-Called after the request is resolved.
+يُستدعى بعد حل request.
 
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
 
 ## createModule
 
 `AsyncSeriesBailHook`
 
-Called before a `NormalModule` instance is created.
+يُستدعى قبل إنشاء instance من `NormalModule`.
 
-- Callback Parameters: `createData` `resolveData`
+- معاملات callback: `createData` `resolveData`
 
 ## createModuleClass
 
@@ -86,41 +83,41 @@ Called before a `NormalModule` instance is created.
 
 <Badge text="5.81.0+" />
 
-A hook that allows you to override the `NormalModule` class when creating modules. This hook is called after the [`createModule`](#createmodule) hook and before the [`module`](#module) hook.
+يسمح لك هذا hook باستبدال class `NormalModule` عند إنشاء modules. يُستدعى هذا hook بعد [`createModule`](#createmodule) وقبل [`module`](#module).
 
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
 
-- Callback Parameters: `createData` `resolveData`
+- معاملات callback: `createData` `resolveData`
 
 ## module
 
 `SyncWaterfallHook`
 
-Called after a `NormalModule` instance is created.
+يُستدعى بعد إنشاء instance من `NormalModule`.
 
-- Callback Parameters: `module` `createData` `resolveData`
+- معاملات callback: `module` `createData` `resolveData`
 
 ## createParser
 
 `HookMap<SyncBailHook>`
 
-Called before a `Parser` instance is created. `parserOptions` is options in [module.parser](/configuration/module/#moduleparser) for the corresponding identifier or an empty object.
+يُستدعى قبل إنشاء instance من `Parser`. تمثل `parserOptions` الخيارات الموجودة في [module.parser](/configuration/module/#moduleparser) للـ identifier المطابق، أو تكون object فارغًا.
 
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
 
-- Callback Parameters: `parserOptions`
+- معاملات callback: `parserOptions`
 
 ## parser
 
 `HookMap<SyncHook>`
 
-Fired after a `Parser` instance is created.
+يُستدعى بعد إنشاء instance من `Parser`.
 
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
 
-- Callback Parameters: `parser` `parserOptions`
+- معاملات callback: `parser` `parserOptions`
 
-Possible default identifiers:
+القيم الافتراضية الممكنة للـ identifiers:
 
 1. `javascript/auto`
 2. `javascript/dynamic`
@@ -134,23 +131,23 @@ Possible default identifiers:
 
 `HookMap<SyncBailHook>`
 
-Called before a `Generator` instance is created. `generatorOptions` is options in [module.parser](/configuration/module/#modulegenerator) for the corresponding identifier or an empty object.
+يُستدعى قبل إنشاء instance من `Generator`. تمثل `generatorOptions` الخيارات الموجودة في [module.generator](/configuration/module/#modulegenerator) للـ identifier المطابق، أو تكون object فارغًا.
 
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
 
-- Callback Parameters: `generatorOptions`
+- معاملات callback: `generatorOptions`
 
 ## generator
 
 `HookMap<SyncHook>`
 
-Called after a `Generator` instance is created.
+يُستدعى بعد إنشاء instance من `Generator`.
 
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
 
-- Callback Parameters: `generator` `generatorOptions`
+- معاملات callback: `generator` `generatorOptions`
 
-Possible default identifiers:
+القيم الافتراضية الممكنة للـ identifiers:
 
 1. `json`
 2. `webassembly/sync`
diff --git a/src/content/api/parser.mdx b/src/content/api/parser.mdx
index 963554c7259f..d1164fbd8613 100644
--- a/src/content/api/parser.mdx
+++ b/src/content/api/parser.mdx
@@ -3,32 +3,22 @@ title: JavascriptParser Hooks
 group: Plugins
 sort: 12
 contributors:
-  - byzyk
-  - DeTeam
-  - misterdev
-  - EugeneHlushko
-  - chenxsan
-  - snitin315
-  - moshams272
+  - RlxChap2
 ---
 
-The `parser` instance, found in the `compiler`, is used to parse each module
-being processed by webpack. The `parser` is yet another webpack class that
-extends `tapable` and provides a variety of `tapable` hooks that can be used by
-plugin authors to customize the parsing process.
+تُستخدم instance المسماة `parser`، والموجودة داخل `compiler`، لتحليل كل module يعالجه webpack. ويُعد `parser` صنفًا آخر من أصناف webpack التي ترث من `tapable`، ويوفر مجموعة متنوعة من `tapable` hooks يستطيع مؤلفو plugins استخدامها لتخصيص عملية parsing.
 
-The `parser` is found within [NormalModuleFactory](/api/compiler-hooks/#normalmodulefactory) and therefore takes little
-more work to access:
+يوجد `parser` داخل [NormalModuleFactory](/api/compiler-hooks/#normalmodulefactory)، لذلك يحتاج الوصول إليه إلى خطوة إضافية بسيطة:
 
 ```js
 compiler.hooks.normalModuleFactory.tap("MyPlugin", (factory) => {
   factory.hooks.parser
     .for("javascript/auto")
     .tap("MyPlugin", (parser, options) => {
-      // The `parser` provides many hooks, which are explained in detail below.
-      // Here is a practical example using the `call` hook to detect and warn
-      // about a deprecated API function when a developer calls it
-      // (e.g., `myCustomApiFunction()`):
+      // يوفر `parser` عدة hooks، وسيتم شرحها بالتفصيل أدناه.
+      // هذا مثال عملي يستخدم hook المسمى `call` لاكتشاف دالة API قديمة
+      // وتحذير المطور عند استدعائها
+      // مثل: `myCustomApiFunction()`
       parser.hooks.call
         .for("myCustomApiFunction")
         .tap("MyPlugin", (expression) => {
@@ -40,21 +30,19 @@ compiler.hooks.normalModuleFactory.tap("MyPlugin", (factory) => {
 });
 ```
 
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+كما هو الحال مع `compiler`، قد تكون `tapAsync` و`tapPromise` متاحتين أيضًا بحسب نوع hook.
 
 ## Hooks
 
-The following lifecycle hooks are exposed by the `parser` and can be accessed
-as such:
+يعرض `parser` hooks التالية ضمن دورة حياته، ويمكن الوصول إليها بهذا الشكل:
 
-W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+W> منذ webpack 5، لم تعد `hooks` قابلة للتمديد مباشرة. استخدم `WeakMap` لإضافة hooks مخصصة.
 
 ### evaluateTypeof
 
 `SyncBailHook`
 
-Triggered when evaluating an expression consisting in a `typeof` of a free variable
+يُطلق عند تقييم expression مكوّن من `typeof` لمتغير حر.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -68,13 +56,13 @@ parser.hooks.evaluateTypeof.for("myIdentifier").tap(
 );
 ```
 
-This will trigger the `evaluateTypeof` hook:
+هذا الكود سيطلق hook المسمى `evaluateTypeof`:
 
 ```js
 const a = typeof myIdentifier;
 ```
 
-This won't trigger:
+وهذا الكود لن يطلقه:
 
 ```js
 const myIdentifier = 0;
@@ -85,12 +73,12 @@ const b = typeof myIdentifier;
 
 `SyncBailHook`
 
-Called when evaluating an expression.
+يُستدعى عند تقييم expression.
 
 - Hook parameters: `expressionType`
 - Callback parameters: `expression`
 
-For example:
+مثال:
 
 **index.js**
 
@@ -109,7 +97,7 @@ parser.hooks.evaluate.for("NewExpression").tap(
 );
 ```
 
-Where the expressions types are:
+أنواع expressions الممكنة هي:
 
 - `'ArrowFunctionExpression'`
 - `'AssignmentExpression'`
@@ -136,7 +124,7 @@ Where the expressions types are:
 
 `SyncBailHook`
 
-Called when evaluating an identifier that is a free variable.
+يُستدعى عند تقييم identifier يمثل متغيرًا حرًا.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -145,7 +133,7 @@ Called when evaluating an identifier that is a free variable.
 
 `SyncBailHook`
 
-Called when evaluating an identifier that is a defined variable.
+يُستدعى عند تقييم identifier يمثل متغيرًا معرّفًا.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -154,12 +142,12 @@ Called when evaluating an identifier that is a defined variable.
 
 `SyncBailHook`
 
-Called when evaluating a call to a member function of a successfully evaluated expression.
+يُستدعى عند تقييم استدعاء دالة عضو ضمن expression تم تقييمه بنجاح.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression` `param`
 
-This expression will trigger the hook:
+هذا التعبير سيطلق hook:
 
 **index.js**
 
@@ -182,7 +170,7 @@ parser.hooks.evaluateCallExpressionMember.for("myFunc").tap(
 
 `SyncBailHook`
 
-General purpose hook that is called for every parsed statement in a code fragment.
+Hook عام يُستدعى لكل statement يتم تحليلها داخل جزء من الكود.
 
 - Callback Parameters: `statement`
 
@@ -192,7 +180,7 @@ parser.hooks.statement.tap("MyPlugin", (statement) => {
 });
 ```
 
-Where the `statement.type` could be:
+يمكن أن تكون قيمة `statement.type` واحدة من الآتي:
 
 - `'BlockStatement'`
 - `'VariableDeclaration'`
@@ -220,7 +208,7 @@ Where the `statement.type` could be:
 
 `SyncBailHook`
 
-Called when parsing an if statement. Same as the `statement` hook, but triggered only when `statement.type == 'IfStatement'`.
+يُستدعى عند تحليل `if statement`. يشبه hook المسمى `statement`، لكنه لا يُطلق إلا عندما تكون `statement.type == 'IfStatement'`.
 
 - Callback Parameters: `statement`
 
@@ -228,7 +216,7 @@ Called when parsing an if statement. Same as the `statement` hook, but triggered
 
 `SyncBailHook`
 
-Called when parsing statements with a [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Those statements have `statement.type === 'LabeledStatement'`.
+يُستدعى عند تحليل statements التي تحتوي على [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). هذه statements تكون لديها `statement.type === 'LabeledStatement'`.
 
 - Hook Parameters: `labelName`
 - Callback Parameters: `statement`
@@ -237,11 +225,11 @@ Called when parsing statements with a [label](https://developer.mozilla.org/en-U
 
 `SyncBailHook`
 
-Called for every import statement in a code fragment. The `source` parameter contains the name of the imported file.
+يُستدعى لكل عبارة import داخل جزء من الكود. يحتوي parameter المسمى `source` على اسم الملف المستورد.
 
 - Callback Parameters: `statement` `source`
 
-The following import statement will trigger the hook once:
+عبارة import التالية ستطلق hook مرة واحدة:
 
 **index.js**
 
@@ -261,11 +249,11 @@ parser.hooks.import.tap("MyPlugin", (statement, source) => {
 
 `SyncBailHook`
 
-Called for every specifier of every `import` statement.
+يُستدعى لكل specifier في كل عبارة `import`.
 
 - Callback Parameters: `statement` `source` `exportName` `identifierName`
 
-The following import statement will trigger the hook twice:
+عبارة import التالية ستطلق hook مرتين:
 
 **index.js**
 
@@ -279,12 +267,12 @@ import _, { has } from "lodash";
 parser.hooks.importSpecifier.tap(
   "MyPlugin",
   (statement, source, exportName, identifierName) => {
-    /* First call
+    /* الاستدعاء الأول
     source == 'lodash'
     exportName == 'default'
     identifierName == '_'
   */
-    /* Second call
+    /* الاستدعاء الثاني
     source == 'lodash'
     exportName == 'has'
     identifierName == 'has'
@@ -297,7 +285,7 @@ parser.hooks.importSpecifier.tap(
 
 `SyncBailHook`
 
-Called for every `export` statement in a code fragment.
+يُستدعى لكل عبارة `export` داخل جزء من الكود.
 
 - Callback Parameters: `statement`
 
@@ -305,7 +293,7 @@ Called for every `export` statement in a code fragment.
 
 `SyncBailHook`
 
-Called for every `export`-import statement eg: `export * from 'otherModule';`.
+يُستدعى لكل عبارة `export` مع import، مثل: `export * from 'otherModule';`.
 
 - Callback Parameters: `statement` `source`
 
@@ -313,14 +301,14 @@ Called for every `export`-import statement eg: `export * from 'otherModule';`.
 
 `SyncBailHook`
 
-Called for every `export` statement exporting a declaration.
+يُستدعى لكل عبارة `export` تصدّر declaration.
 
 - Callback Parameters: `statement` `declaration`
 
-Those exports will trigger this hook:
+هذه exports ستطلق هذا hook:
 
 ```js
-export const myVar = "hello"; // also var, let
+export const myVar = "hello"; // وينطبق أيضًا على var وlet
 export function FunctionName() {}
 export class ClassName {}
 ```
@@ -329,7 +317,7 @@ export class ClassName {}
 
 `SyncBailHook`
 
-Called for every `export` statement exporting an expression e.g.`export default expression;`.
+يُستدعى لكل عبارة `export` تصدّر expression، مثل: `export default expression;`.
 
 - Callback Parameters: `statement` `declaration`
 
@@ -337,7 +325,7 @@ Called for every `export` statement exporting an expression e.g.`export default
 
 `SyncBailHook`
 
-Called for every specifier of every `export` statement.
+يُستدعى لكل specifier في كل عبارة `export`.
 
 - Callback Parameters: `statement` `identifierName` `exportName` `index`
 
@@ -345,7 +333,7 @@ Called for every specifier of every `export` statement.
 
 `SyncBailHook`
 
-Called for every specifier of every `export`-import statement.
+يُستدعى لكل specifier في كل عبارة `export` مع import.
 
 - Callback Parameters: `statement` `source` `identifierName` `exportName` `index`
 
@@ -353,7 +341,7 @@ Called for every specifier of every `export`-import statement.
 
 `SyncBailHook`
 
-Called when parsing a variable declaration.
+يُستدعى عند تحليل variable declaration.
 
 - Callback Parameters: `declaration`
 
@@ -361,7 +349,7 @@ Called when parsing a variable declaration.
 
 `SyncBailHook`
 
-Called when parsing a variable declaration defined using `let`
+يُستدعى عند تحليل variable declaration مُعرّفة باستخدام `let`.
 
 - Callback Parameters: `declaration`
 
@@ -369,7 +357,7 @@ Called when parsing a variable declaration defined using `let`
 
 `SyncBailHook`
 
-Called when parsing a variable declaration defined using `const`
+يُستدعى عند تحليل variable declaration مُعرّفة باستخدام `const`.
 
 - Callback Parameters: `declaration`
 
@@ -377,7 +365,7 @@ Called when parsing a variable declaration defined using `const`
 
 `SyncBailHook`
 
-Called when parsing a variable declaration defined using `var`
+يُستدعى عند تحليل variable declaration مُعرّفة باستخدام `var`.
 
 - Callback Parameters: `declaration`
 
@@ -385,7 +373,7 @@ Called when parsing a variable declaration defined using `var`
 
 `SyncBailHook`
 
-Triggered before renaming an identifier to determine if the renaming is allowed. This is usually used together with the `rename` hook.
+يُطلق قبل إعادة تسمية identifier لتحديد ما إذا كانت إعادة التسمية مسموحة. يُستخدم غالبًا مع hook المسمى `rename`.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -396,7 +384,7 @@ const a = b;
 parser.hooks.canRename.for("b").tap(
   "MyPlugin",
   (expression) =>
-    // returning true allows renaming
+    // إرجاع true يسمح بإعادة التسمية
     true,
 );
 ```
@@ -405,7 +393,7 @@ parser.hooks.canRename.for("b").tap(
 
 `SyncBailHook`
 
-Triggered when renaming to get the new identifier. This hook will be called only if `canRename` returns `true`.
+يُطلق عند إعادة التسمية للحصول على identifier الجديد. لا يُستدعى هذا hook إلا إذا أرجع `canRename` القيمة `true`.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -420,7 +408,7 @@ parser.hooks.rename.for("b").tap("MyPlugin", (expression) => {});
 
 `SyncBailHook`
 
-Called when parsing an `AssignmentExpression` before parsing the assigned expression.
+يُستدعى عند تحليل `AssignmentExpression` قبل تحليل expression المسندة.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -429,7 +417,7 @@ Called when parsing an `AssignmentExpression` before parsing the assigned expres
 a += b;
 
 parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
-  // this is called before parsing b
+  // يُستدعى هذا قبل تحليل b
 });
 ```
 
@@ -437,7 +425,7 @@ parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
 
 `SyncBailHook`
 
-Called when parsing an `AssignmentExpression` before parsing the assign expression.
+يُستدعى عند تحليل `AssignmentExpression` قبل تحليل expression الهدف.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -446,7 +434,7 @@ Called when parsing an `AssignmentExpression` before parsing the assign expressi
 a += b;
 
 parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
-  // this is called before parsing a
+  // يُستدعى هذا قبل تحليل a
 });
 ```
 
@@ -454,7 +442,7 @@ parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
 
 `SyncBailHook`
 
-Triggered when parsing the `typeof` of an identifier
+يُطلق عند تحليل `typeof` الخاص بـ identifier.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -463,7 +451,7 @@ Triggered when parsing the `typeof` of an identifier
 
 `SyncBailHook`
 
-Called when parsing a function call.
+يُستدعى عند تحليل استدعاء دالة.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -480,7 +468,7 @@ parser.hooks.call.for("eval").tap("MyPlugin", (expression) => {});
 
 `SyncBailHook`
 
-Triggered when parsing a call to a member function of an object.
+يُطلق عند تحليل استدعاء دالة عضو من كائن.
 
 - Hook Parameters: `objectIdentifier`
 - Callback Parameters: `expression, properties`
@@ -497,7 +485,7 @@ parser.hooks.callMemberChain
 
 `SyncBailHook`
 
-Invoked when parsing a `new` expression.
+يُستدعى عند تحليل expression من نوع `new`.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -512,7 +500,7 @@ parser.hooks.new.for("MyClass").tap("MyPlugin", (expression) => {});
 
 `SyncBailHook`
 
-Called when parsing an expression.
+يُستدعى عند تحليل expression.
 
 - Hook Parameters: `identifier`
 - Callback Parameters: `expression`
@@ -527,7 +515,7 @@ parser.hooks.expression.for("this").tap("MyPlugin", (expression) => {});
 
 `SyncBailHook`
 
-Called when parsing a `ConditionalExpression` e.g. `condition ? a : b`
+يُستدعى عند تحليل `ConditionalExpression` مثل: `condition ? a : b`.
 
 - Callback Parameters: `expression`
 
@@ -535,6 +523,6 @@ Called when parsing a `ConditionalExpression` e.g. `condition ? a : b`
 
 `SyncBailHook`
 
-Get access to the abstract syntax tree (AST) of a code fragment
+يتيح الوصول إلى abstract syntax tree (AST) الخاص بجزء من الكود.
 
 - Parameters: `ast` `comments`
diff --git a/src/content/api/plugins.mdx b/src/content/api/plugins.mdx
index acc36c2755a6..df8354461197 100644
--- a/src/content/api/plugins.mdx
+++ b/src/content/api/plugins.mdx
@@ -3,53 +3,26 @@ title: Plugin API
 group: Plugins
 sort: 14
 contributors:
-  - thelarkinn
-  - pksjce
-  - e-cloud
-  - byzyk
-  - EugeneHlushko
-  - wizardofhogwarts
-  - snitin315
-  - evenstensberg
+  - RlxChap2
 ---
 
-Plugins are a key piece of the webpack ecosystem and provide the community with
-a powerful way to tap into webpack's compilation process. A plugin is able to
-[hook](/api/compiler-hooks/#hooks) into key events that are fired throughout each compilation. Every step
-of the way, the plugin will have full access to the `compiler` and, when
-applicable, the current `compilation`.
+تُعد plugins جزءًا أساسيًا من منظومة webpack، فهي تمنح المجتمع طريقة قوية للدخول إلى عملية compilation الخاصة بـ webpack. يستطيع plugin أن يستخدم [hook](/api/compiler-hooks/#hooks) في أحداث مهمة تُطلق خلال كل compilation. وفي كل مرحلة، يحصل plugin على وصول كامل إلى `compiler`، وإلى `compilation` الحالي عندما يكون ذلك مناسبًا.
 
-T> For a high-level introduction to writing plugins, start with
-[writing a plugin](/contribute/writing-a-plugin).
+T> إذا كنت تريد مقدمة عامة عن كتابة plugins، ابدأ من [كتابة Plugin](/contribute/writing-a-plugin).
 
-Let's start by going over `tapable` utility, which provides the backbone of
-webpack's plugin interface.
+لنبدأ بأداة `tapable`، فهي الأساس الذي بُنيت عليه واجهة plugins في webpack.
 
 ## Tapable
 
-This small library is a core utility in webpack but can also be used elsewhere
-to provide a similar plugin interface. Many objects in webpack extend the
-`Tapable` class. The class exposes `tap`, `tapAsync`, and `tapPromise` methods
-which plugins can use to inject custom build steps that will be fired
-throughout a compilation.
+هذه المكتبة الصغيرة أداة محورية داخل webpack، ويمكن استخدامها أيضًا خارج webpack لتوفير واجهة plugins مشابهة. كثير من الكائنات في webpack ترث من الصنف `Tapable`. يوفّر هذا الصنف الدوال `tap` و`tapAsync` و`tapPromise`، وتستخدمها plugins لإضافة خطوات build مخصصة تُنفّذ أثناء compilation.
 
-Please see the [documentation](https://github.com/webpack/tapable) to learn
-more. An understanding of the three `tap` methods, as well as the hooks that
-provide them, is crucial. The objects that extend `Tapable` (e.g. the compiler),
-the hooks they provide, and each hook's type (e.g. the `SyncHook`) will be
-noted.
+راجع [التوثيق](https://github.com/webpack/tapable) لمعرفة المزيد. من المهم فهم دوال `tap` الثلاث، وكذلك أنواع hooks التي توفرها. في التوثيق ستجد الكائنات التي ترث من `Tapable`، مثل compiler، والـ hooks التي توفرها، ونوع كل hook، مثل `SyncHook`.
 
-## Plugin Types
+## أنواع Plugins
 
-Depending on the hooks used and `tap` methods applied, plugins can function in
-a different number of ways. The way this works is closely related to the
-[hooks](https://github.com/webpack/tapable#tapable) provided by `Tapable`. The
-[compiler hooks](/api/compiler-hooks/#hooks) each note the underlying `Tapable` hook indicating which
-`tap` methods are available.
+بحسب hooks التي تستخدمها، وبحسب دوال `tap` التي تعتمد عليها، يمكن أن تعمل plugins بعدة طرق. هذا مرتبط مباشرةً بالـ [hooks](https://github.com/webpack/tapable#tapable) التي توفرها `Tapable`. توضح صفحة [compiler hooks](/api/compiler-hooks/#hooks) نوع hook الأساسي من `Tapable`، وهذا يحدد دوال `tap` المتاحة.
 
-So depending on which event you `tap` into, the plugin may run differently. For
-example, when hooking into the `compile` stage, only the synchronous `tap` method
-can be used:
+لذلك يختلف سلوك plugin حسب الحدث الذي تستخدم معه `tap`. مثلًا، عند الدخول في مرحلة `compile`، يمكنك استخدام `tap` المتزامنة فقط:
 
 ```js
 compiler.hooks.compile.tap("MyPlugin", (params) => {
@@ -57,8 +30,7 @@ compiler.hooks.compile.tap("MyPlugin", (params) => {
 });
 ```
 
-However, for `run` which utilizes the `AsyncHook`, we can utilize `tapAsync`
-or `tapPromise` (as well as `tap`):
+أما hook مثل `run`، لأنه يستخدم `AsyncHook`، فيمكنك معه استخدام `tapAsync` أو `tapPromise`، بالإضافة إلى `tap`:
 
 ```js
 compiler.hooks.run.tapAsync(
@@ -88,15 +60,13 @@ compiler.hooks.run.tapPromise(
 );
 ```
 
-The moral of the story is that there are a variety of ways to `hook` into the
-`compiler`, each one allowing your plugin to run as it sees fit.
+الفكرة الأساسية: توجد أكثر من طريقة للدخول إلى `compiler`، وكل طريقة تسمح لـ plugin أن يعمل بالشكل المناسب للمرحلة التي يحتاجها.
 
-## Custom Hooks
+## Hooks مخصصة
 
-In order to offer a custom hook to the compilation for other plugins to `tap` into,
-you need to do the following:
+إذا أردت توفير hook مخصص داخل compilation حتى تتمكن plugins أخرى من استخدام `tap` معه، فاتبع الخطوات التالية:
 
-1. Create a module-scope `WeakMap` for compilation hooks:
+1. أنشئ `WeakMap` على مستوى module لحفظ hooks الخاصة بكل compilation:
 
    ```ts
    const compilationHooks = new WeakMap<Compilation, MyHooks>();
@@ -106,7 +76,7 @@ you need to do the following:
    }
    ```
 
-2. Create a static method on your plugin:
+2. أنشئ static method داخل plugin:
 
    ```ts
    static getCompilationHooks(compilation: Compilation) : MyHooks {
@@ -120,7 +90,7 @@ you need to do the following:
    }
    ```
 
-3. Call hooks like below in your plugin:
+3. استدعِ hooks داخل plugin بهذا الشكل:
 
    ```ts
    const hooks = MyPlugin.getCompilationHooks(compilation);
@@ -128,7 +98,7 @@ you need to do the following:
    hooks.custom.call(1, "hello");
    ```
 
-4. Other plugins can access your custom hooks too:
+4. يمكن لـ plugins أخرى الوصول إلى hooks المخصصة أيضًا:
 
    ```ts
    import MyPlugin from "my-plugin";
@@ -140,16 +110,15 @@ you need to do the following:
    });
    ```
 
-Again, see the [documentation](https://github.com/webpack/tapable) for `tapable` to learn more about the
-different hook classes and how they work.
+مرة أخرى، راجع [توثيق tapable](https://github.com/webpack/tapable) لمعرفة أنواع hook المختلفة وطريقة عملها.
 
-## Reporting Progress
+## الإبلاغ عن التقدم
 
-Plugins can report progress via [`ProgressPlugin`](/plugins/progress-plugin/), which prints progress messages to stderr by default. In order to enable progress reporting, pass a `--progress` argument when running the [webpack CLI](/api/cli/).
+يمكن لـ plugins الإبلاغ عن التقدم عبر [`ProgressPlugin`](/plugins/progress-plugin/)، والذي يطبع رسائل التقدم إلى stderr افتراضيًا. لتفعيل إظهار التقدم، مرّر الخيار `--progress` عند تشغيل [webpack CLI](/api/cli/).
 
-It is possible to customize the printed output by passing different arguments to the `reportProgress` function of [`ProgressPlugin`](/plugins/progress-plugin/).
+يمكن تخصيص النص المطبوع بتمرير arguments مختلفة إلى الدالة `reportProgress` الخاصة بـ [`ProgressPlugin`](/plugins/progress-plugin/).
 
-To report progress, a plugin must `tap` into a hook using the `context: true` option:
+لكي يبلّغ plugin عن التقدم، يجب أن يستخدم `tap` على hook مع الخيار `context: true`:
 
 ```js
 compiler.hooks.emit.tapAsync(
@@ -168,26 +137,25 @@ compiler.hooks.emit.tapAsync(
 );
 ```
 
-The `reportProgress` function may be called with these arguments:
+يمكن استدعاء الدالة `reportProgress` بهذه arguments:
 
 ```js
 reportProgress(percentage, ...args);
 ```
 
-- `percentage`: This argument is unused; instead, [`ProgressPlugin`](/plugins/progress-plugin/) will calculate a percentage based on the current hook.
-- `...args`: Any number of strings, which will be passed to the `ProgressPlugin` handler to be reported to the user.
+- `percentage`: هذا argument غير مستخدم مباشرة؛ بدلًا من ذلك يحسب [`ProgressPlugin`](/plugins/progress-plugin/) النسبة بناءً على hook الحالي.
+- `...args`: أي عدد من النصوص، وستُمرر إلى handler الخاص بـ `ProgressPlugin` ليتم عرضها للمستخدم.
 
-Note that only a subset of compiler and compilation hooks support the `reportProgress` function. See [`ProgressPlugin`](/plugins/progress-plugin/#supported-hooks) for a full list.
+انتبه إلى أن جزءًا فقط من compiler hooks وcompilation hooks يدعم الدالة `reportProgress`. راجع [`ProgressPlugin`](/plugins/progress-plugin/#supported-hooks) للقائمة الكاملة.
 
-## Logging
+## التسجيل
 
-Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/infrastructureLogging) is enabled, plugins may log messages which will be printed out in the respective logger format (stats, infrastructure).
+واجهة Logging API متاحة منذ إصدار webpack 4.37. عند تفعيل `logging` في [إعدادات stats](/configuration/stats/#statslogging)، أو عند تفعيل [`infrastructure logging`](/configuration/infrastructureLogging)، يمكن لـ plugins تسجيل رسائل تُطبع بتنسيق logger المناسب، سواء stats أو infrastructure.
 
-- Plugins should prefer to use `compilation.getLogger('PluginName')` for logging. This kind of logging is stored in the Stats and formatted accordingly. It can be filtered and exported by the user.
-- Plugins may use the `compiler.getInfrastructureLogger('PluginName')` for logging. Using `infrastructure` logging is not stored in the Stats and therefore not formatted. It's usually logged to the console/dashboard/GUI directly. It can be filtered by the user.
-- Plugins may use specific fallback logic for detecting logging support `compilation.getLogger ? compilation.getLogger('PluginName') : console` to provide a fallback for cases when an older webpack version is used which does not support `getLogger` method on `compilation` object.
+- يُفضّل أن تستخدم plugins الدالة `compilation.getLogger('PluginName')` للتسجيل. هذا النوع من logging يُخزّن داخل Stats ويُنسّق بناءً عليها. ويمكن للمستخدم فلترته أو تصديره.
+- يمكن لـ plugins استخدام `compiler.getInfrastructureLogger('PluginName')` للتسجيل. تسجيل `infrastructure` لا يُخزّن داخل Stats، ولذلك لا يُنسّق معها. عادةً يُسجّل مباشرةً إلى console أو dashboard أو GUI. ويمكن للمستخدم فلترته.
+- يمكن لـ plugins استخدام fallback خاص لاكتشاف دعم logging، مثل `compilation.getLogger ? compilation.getLogger('PluginName') : console`، لدعم إصدارات webpack القديمة التي لا توفر دالة `getLogger` على كائن `compilation`.
 
-## Next Steps
+## الخطوة التالية
 
-See the [compiler hooks](/api/compiler-hooks/) section for a detailed listing of all the available
-`compiler` hooks and the parameters they make available.
+راجع قسم [compiler hooks](/api/compiler-hooks/) للحصول على قائمة مفصلة بكل `compiler` hooks المتاحة والـ parameters التي توفرها.
diff --git a/src/content/api/resolvers.mdx b/src/content/api/resolvers.mdx
index 7225281dae2d..20a2612ba2c5 100644
--- a/src/content/api/resolvers.mdx
+++ b/src/content/api/resolvers.mdx
@@ -3,29 +3,22 @@ title: Resolvers
 group: Plugins
 sort: 15
 contributors:
-  - EugeneHlushko
-  - chenxsan
+  - RlxChap2
 ---
 
-Resolvers are created using the `enhanced-resolve` package. The `Resolver`
-class extends the `tapable` class and uses `tapable` to provide a few hooks.
-The `enhanced-resolve` package can be used directly to create new resolvers,
-however any [`compiler` instance](/api/node/#compiler-instance) has a few resolver instances that can be
-tapped into.
+تُنشأ resolvers باستخدام حزمة `enhanced-resolve`. ترث class `Resolver` من `tapable` وتستخدمها لتوفير بعض hooks. يمكنك استخدام `enhanced-resolve` مباشرة لإنشاء resolvers جديدة، لكن كل [`compiler` instance](/api/node/#compiler-instance) يحتوي أصلًا على عدة resolver instances يمكنك استخدام hooks الخاصة بها.
 
-Before reading on, make sure to have a look at the
-[`enhanced-resolve`](https://github.com/webpack/enhanced-resolve) and [`tapable`](/api/plugins/#tapable) documentation.
+قبل المتابعة، من الأفضل مراجعة توثيق [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve) وتوثيق [`tapable`](/api/plugins/#tapable).
 
-## Types
+## الأنواع
 
-There are three types of built-in resolvers available on the `compiler` class:
+توجد ثلاثة أنواع مدمجة من resolvers داخل class `compiler`:
 
-- `normal`: Resolves a module via an absolute or relative path.
-- `context`: Resolves a module within a given context.
-- `loader`: Resolves a webpack [loader](/loaders).
+- `normal`: يحل module باستخدام مسار مطلق أو نسبي.
+- `context`: يحل module داخل سياق محدد.
+- `loader`: يحل webpack [loader](/loaders).
 
-Depending on need, any one of these built-in resolvers, that are used by the `compiler`,
-can be customized via plugins:
+حسب حاجتك، يمكنك تخصيص أي resolver مدمج يستخدمه `compiler` عن طريق plugins:
 
 ```js
 compiler.resolverFactory.hooks.resolver
@@ -35,18 +28,14 @@ compiler.resolverFactory.hooks.resolver
   });
 ```
 
-Where `[type]` is one of the three resolvers mentioned above.
+حيث تكون `[type]` واحدًا من resolvers الثلاثة المذكورة أعلاه.
 
-See the [`enhanced-resolve` documentation](https://github.com/webpack/enhanced-resolve) for a full list of hooks and their description.
+راجع [توثيق `enhanced-resolve`](https://github.com/webpack/enhanced-resolve) للاطلاع على القائمة الكاملة للـ hooks وشرح كل واحد منها.
 
-## Configuration Options
+## خيارات الإعداد
 
-The resolvers mentioned above can also be customized via a configuration file
-with the [`resolve`](/configuration/resolve/) or [`resolveLoader`](/configuration/resolve/#resolveloader) options. These options allow
-users to change the resolving behavior through a variety of options including
-through resolve `plugins`.
+يمكن أيضًا تخصيص resolvers المذكورة أعلاه من ملف الإعدادات باستخدام خياري [`resolve`](/configuration/resolve/) أو [`resolveLoader`](/configuration/resolve/#resolveloader). تسمح هذه الخيارات بتغيير طريقة حل المسارات بعدة طرق، ومنها استخدام `plugins` داخل `resolve`.
 
-The resolver plugins, e.g. [`DirectoryNamedPlugin`](https://github.com/shaketbaby/directory-named-webpack-plugin), can be included
-directly in `resolve.plugins` rather than using directly in [`plugins` configuration option](/configuration/plugins/#plugins).
+يمكن وضع resolver plugins، مثل [`DirectoryNamedPlugin`](https://github.com/shaketbaby/directory-named-webpack-plugin)، مباشرة داخل `resolve.plugins` بدل استخدامها في خيار الإعداد [`plugins`](/configuration/plugins/#plugins).
 
-T> Note that the `resolve` configuration affects the `normal` and `context` resolvers while `resolveLoader` is used to modify the `loader` resolver.
+T> لاحظ أن إعداد `resolve` يؤثر في resolvers من نوع `normal` و`context`، بينما يُستخدم `resolveLoader` لتعديل resolver الخاص بـ `loader`.
diff --git a/src/content/api/stats.mdx b/src/content/api/stats.mdx
index 673d0509419d..817646e6484c 100644
--- a/src/content/api/stats.mdx
+++ b/src/content/api/stats.mdx
@@ -1,184 +1,177 @@
 ---
-title: Stats Data
+title: بيانات Stats
 sort: 3
 contributors:
-  - skipjack
-  - franjohn21
-  - byzyk
-  - EugeneHlushko
-  - superburrito
-  - chenxsan
-  - rahul3v
-  - snitin315
+  - RlxChap2
 ---
 
-When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an application's dependency graph as well as to optimize compilation speed. The file is typically generated with the following CLI command:
+عند تجميع الكود باستخدام webpack، يمكنك إنشاء ملف JSON يحتوي إحصاءات عن modules وchunks وassets. تساعدك هذه البيانات على فهم dependency graph الخاص بالتطبيق، وعلى تحسين سرعة التجميع. غالبًا يُنشأ الملف بالأمر التالي من CLI:
 
 ```bash
 npx webpack --profile --json=compilation-stats.json
 ```
 
-The `--json=compilation-stats.json` flag indicates to webpack that it should emit the `compilation-stats.json` containing the dependency graph and various other build information. Typically, the `--profile` flag is also added so that a `profile` section is added to each [`modules` object](#module-objects) containing module-specific compilation stats.
+يخبر flag `--json=compilation-stats.json` webpack أن ينشئ ملف `compilation-stats.json` وفيه dependency graph ومعلومات أخرى عن عملية البناء. وغالبًا يُضاف flag `--profile` أيضًا حتى يضيف webpack قسم `profile` داخل كل كائن من [`modules`](#كائنات-module)، وفيه إحصاءات خاصة بتجميع ذلك module.
 
-## Structure
+## البنية
 
-The top-level structure of the output JSON file is fairly straightforward but there are a few nested data structures as well. Each nested structure has a dedicated section below to make this document more consumable. Note that you can click links within the top-level structure below to jump to relevant sections and documentation:
+بنية ملف JSON على المستوى الأعلى مباشرة نسبيًا، لكنها تحتوي أيضًا بعض البنى المتداخلة. لكل بنية متداخلة قسم مستقل أدناه حتى يسهل فهم الملف. يمكنك الضغط على الروابط داخل البنية العامة التالية للانتقال إلى الأقسام المرتبطة:
 
 ```json
 {
-  "version": "5.9.0", // Version of webpack used for the compilation
-  "hash": "11593e3b3ac85436984a", // Compilation specific hash
-  "time": 2469, // Compilation time in milliseconds
+  "version": "5.9.0", // إصدار webpack المستخدم في التجميع
+  "hash": "11593e3b3ac85436984a", // hash خاص بعملية التجميع
+  "time": 2469, // وقت التجميع بالميلي ثانية
   "publicPath": "auto",
-  "outputPath": "/", // path to webpack output directory
+  "outputPath": "/", // مسار مجلد إخراج webpack
   "assetsByChunkName": {
-    // Chunk name to emitted asset(s) mapping
+    // ربط اسم chunk بالـ asset أو assets الناتجة عنه
     "main": ["web.js?h=11593e3b3ac85436984a"],
     "named-chunk": ["named-chunk.web.js"],
     "other-chunk": ["other-chunk.js", "other-chunk.css"]
   },
   "assets": [
-    // A list of asset objects
+    // قائمة بكائنات asset
   ],
   "chunks": [
-    // A list of chunk objects
+    // قائمة بكائنات chunk
   ],
   "modules": [
-    // A list of module objects
+    // قائمة بكائنات module
   ],
   "entryPoints": {
-    // A list of entry objects
+    // قائمة بكائنات entry
   },
   "errors": [
-    // A list of error objects
+    // قائمة بكائنات error
   ],
-  "errorsCount": 0, // number of errors
+  "errorsCount": 0, // عدد الأخطاء
   "warnings": [
-    // A list of warning objects
+    // قائمة بكائنات warning
   ],
-  "warningsCount": 0 // nummber of warnings
+  "warningsCount": 0 // عدد التحذيرات
 }
 ```
 
-### Asset Objects
+### كائنات Asset
 
-Each `assets` object represents an `output` file emitted from the compilation. They all follow a similar structure:
+يمثل كل كائن داخل `assets` ملف `output` أنشأته عملية التجميع. تتبع هذه الكائنات بنية متشابهة:
 
 ```json
 {
-  "chunkNames": [], // The chunks this asset contains
-  "chunks": [10, 6], // The chunk IDs this asset contains
-  "comparedForEmit": false, // Indicates whether or not the asset was compared with the same file on the output file system
-  "emitted": true, // Indicates whether or not the asset made it to the `output` directory
-  "name": "10.web.js", // The `output` filename
-  "size": 1058, // The size of the file in bytes
+  "chunkNames": [], // أسماء chunks التي يحتويها هذا asset
+  "chunks": [10, 6], // IDs الخاصة بالـ chunks التي يحتويها هذا asset
+  "comparedForEmit": false, // هل تمت مقارنة asset مع الملف نفسه في نظام ملفات الإخراج
+  "emitted": true, // هل وصل asset إلى مجلد `output`
+  "name": "10.web.js", // اسم ملف `output`
+  "size": 1058, // حجم الملف بالبايت
   "info": {
-    "immutable": true, // A flag telling whether the asset can be long term cached (contains a hash)
-    "size": 1058, // The size in bytes, only becomes available after asset has been emitted
-    "development": true, // A flag telling whether the asset is only used for development and doesn't count towards user-facing assets
-    "hotModuleReplacement": true, // A flag telling whether the asset ships data for updating an existing application (HMR)
-    "sourceFilename": "originalfile.js", // sourceFilename when asset was created from a source file (potentially transformed)
-    "javascriptModule": true // true, when asset is javascript and an ESM
+    "immutable": true, // هل يمكن تخزين asset في cache طويل المدى لأنه يحتوي hash
+    "size": 1058, // الحجم بالبايت، ولا يظهر إلا بعد إخراج asset
+    "development": true, // هل يُستخدم asset للتطوير فقط ولا يُحسب ضمن assets التي يراها المستخدم
+    "hotModuleReplacement": true, // هل يحمل asset بيانات لتحديث تطبيق موجود باستخدام HMR
+    "sourceFilename": "originalfile.js", // اسم ملف المصدر عندما يُنشأ asset من ملف source، وقد يكون محوّلًا
+    "javascriptModule": true // true إذا كان asset ملف JavaScript وبصيغة ESM
   }
 }
 ```
 
-### Chunk Objects
+### كائنات Chunk
 
-Each `chunks` object represents a group of modules known as a [chunk](/glossary/#c). Each object follows the following structure:
+يمثل كل كائن داخل `chunks` مجموعة modules تُسمى [chunk](/glossary/#c). تتبع كل كائنات chunk البنية التالية:
 
 ```json
 {
-  "entry": true, // Indicates whether or not the chunk contains the webpack runtime
+  "entry": true, // هل يحتوي chunk على webpack runtime
   "files": [
-    // An array of filename strings that contain this chunk
+    // array من أسماء الملفات التي تحتوي هذا chunk
   ],
-  "filteredModules": 0, // See the description in the [top-level structure](#structure) above
-  "id": 0, // The ID of this chunk
-  "initial": true, // Indicates whether this chunk is loaded on initial page load or [on demand](/guides/lazy-loading)
+  "filteredModules": 0, // راجع الوصف في [البنية](#البنية) أعلاه
+  "id": 0, // ID الخاص بهذا chunk
+  "initial": true, // هل يُحمّل هذا chunk عند فتح الصفحة لأول مرة أم [عند الطلب](/guides/lazy-loading)
   "modules": [
-    // A list of [module objects](#module-objects)
+    // قائمة [كائنات module](#كائنات-module)
     "web.js?h=11593e3b3ac85436984a"
   ],
   "names": [
-    // An list of chunk names contained within this chunk
+    // قائمة أسماء chunks الموجودة داخل هذا chunk
   ],
   "origins": [
-    // See the description below...
+    // راجع الوصف أدناه
   ],
-  "parents": [], // Parent chunk IDs
-  "rendered": true, // Indicates whether or not the chunk went through Code Generation
-  "size": 188057 // Chunk size in bytes
+  "parents": [], // IDs الخاصة بالـ parent chunks
+  "rendered": true, // هل مر chunk بمرحلة Code Generation
+  "size": 188057 // حجم chunk بالبايت
 }
 ```
 
-The `chunks` object will also contain a list of `origins` describing how the given chunk originated. Each `origins` object follows the following schema:
+يحتوي كائن `chunks` أيضًا قائمة `origins` توضّح كيف نشأ هذا chunk. يتبع كل كائن داخل `origins` الشكل التالي:
 
 ```json
 {
-  "loc": "", // Lines of code that generated this chunk
-  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
-  "moduleId": 0, // The ID of the module
-  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
-  "moduleName": "./lib/index.web.js", // Relative path to the module
-  "name": "main", // The name of the chunk
+  "loc": "", // أسطر الكود التي أنشأت هذا chunk
+  "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
+  "moduleId": 0, // ID الخاص بالـ module
+  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
+  "moduleName": "./lib/index.web.js", // المسار النسبي للـ module
+  "name": "main", // اسم chunk
   "reasons": [
-    // A list of the same `reasons` found in [module objects](#module-objects)
+    // قائمة بنفس كائنات `reasons` الموجودة في [كائنات module](#كائنات-module)
   ]
 }
 ```
 
-### Module Objects
+### كائنات Module
 
-What good would these statistics be without some description of the compiled application's actual modules? Each module in the dependency graph is represented by the following structure:
+لن تكون الإحصاءات مفيدة دون وصف modules الفعلية داخل التطبيق المجمع. يمثل كل module في dependency graph بالبنية التالية:
 
 ```json
 {
   "assets": [
-    // A list of [asset objects](#asset-objects)
+    // قائمة [كائنات asset](#كائنات-asset)
   ],
-  "built": true, // Indicates that the module went through [Loaders](/concepts/loaders), Parsing, and Code Generation
-  "cacheable": true, // Whether or not this module is cacheable
+  "built": true, // هل مر module عبر [Loaders](/concepts/loaders) ثم Parsing ثم Code Generation
+  "cacheable": true, // هل يمكن تخزين هذا module في cache
   "chunks": [
-    // IDs of chunks that contain this module
+    // IDs الخاصة بالـ chunks التي تحتوي هذا module
   ],
-  "errors": 0, // Number of errors when resolving or processing the module
-  "failed": false, // Whether or not compilation failed on this module
-  "id": 0, // The ID of the module (analogous to [`module.id`](/api/module-variables/#moduleid-commonjs))
-  "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // A unique ID used internally
-  "name": "./lib/index.web.js", // Path to the actual file
-  "optional": false, // All requests to this module are with `try... catch` blocks (irrelevant with ESM)
-  "prefetched": false, // Indicates whether or not the module was [prefetched](/plugins/prefetch-plugin)
+  "errors": 0, // عدد الأخطاء أثناء حل module أو معالجته
+  "failed": false, // هل فشل التجميع عند هذا module
+  "id": 0, // ID الخاص بالـ module، ويشبه [`module.id`](/api/module-variables/#moduleid-commonjs)
+  "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // ID فريد يستخدم داخليًا
+  "name": "./lib/index.web.js", // مسار الملف الفعلي
+  "optional": false, // هل كل requests إلى هذا module داخل كتل `try... catch`، وهذا غير مهم مع ESM
+  "prefetched": false, // هل تم [prefetch](/plugins/prefetch-plugin) لهذا module
   "profile": {
-    // Module specific compilation stats corresponding to the [`--profile` flag](/api/cli/#profiling) (in milliseconds)
-    "building": 73, // Loading and parsing
-    "dependencies": 242, // Building dependencies
-    "factory": 11 // Resolving dependencies
+    // إحصاءات خاصة بتجميع module مرتبطة بـ [`--profile`](/api/cli/#profiling)، بالميلي ثانية
+    "building": 73, // التحميل والتحليل
+    "dependencies": 242, // بناء dependencies
+    "factory": 11 // حل dependencies
   },
   "reasons": [
-    // See the description below...
+    // راجع الوصف أدناه
   ],
-  "size": 3593, // Estimated size of the module in bytes
-  "source": "// Should not break it...\r\nif(typeof...", // The stringified raw source
-  "warnings": 0 // Number of warnings when resolving or processing the module
+  "size": 3593, // الحجم التقديري للـ module بالبايت
+  "source": "// Should not break it...\r\nif(typeof...", // النص الخام للمصدر بعد تحويله إلى string
+  "warnings": 0 // عدد التحذيرات أثناء حل module أو معالجته
 }
 ```
 
-Every module also contains a list of `reasons` objects describing why that module was included in the dependency graph. Each "reason" is similar to the `origins` seen above in the [chunk objects](#chunk-objects) section:
+يحتوي كل module أيضًا قائمة من كائنات `reasons` توضّح سبب تضمين ذلك module في dependency graph. كل "reason" يشبه كائنات `origins` المذكورة في قسم [كائنات chunk](#كائنات-chunk):
 
 ```json
 {
-  "loc": "33:24-93", // Lines of code that caused the module to be included
-  "module": "./lib/index.web.js", // Relative path to the module based on [context](/configuration/entry-context/#context)
-  "moduleId": 0, // The ID of the module
-  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
-  "moduleName": "./lib/index.web.js", // A more readable name for the module (used for "pretty-printing")
-  "type": "require.context", // The [type of request](/api/module-methods) used
-  "userRequest": "../../cases" // Raw string used for the `import` or `require` request
+  "loc": "33:24-93", // أسطر الكود التي جعلت module يُضمّن
+  "module": "./lib/index.web.js", // المسار النسبي للـ module اعتمادًا على [context](/configuration/entry-context/#context)
+  "moduleId": 0, // ID الخاص بالـ module
+  "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
+  "moduleName": "./lib/index.web.js", // اسم أسهل قراءة للـ module ويُستخدم عند تنسيق العرض
+  "type": "require.context", // [نوع request](/api/module-methods) المستخدم
+  "userRequest": "../../cases" // النص الخام المستخدم في request الخاص بـ `import` أو `require`
 }
 ```
 
-### Entry Objects
+### كائنات Entry
 
 ```json
 "main": {
@@ -203,9 +196,9 @@ Every module also contains a list of `reasons` objects describing why that modul
 }
 ```
 
-### Errors and Warnings
+### الأخطاء والتحذيرات
 
-The `errors` and `warnings` properties each contain a list of objects. Each object contains a message, a stack trace and various other properties:
+تحتوي الخاصيتان `errors` و`warnings` قائمة كائنات. يحتوي كل كائن رسالة، وstack trace، وخصائص أخرى:
 
 ```json
 {
@@ -247,4 +240,4 @@ The `errors` and `warnings` properties each contain a list of objects. Each obje
 }
 ```
 
-W> Note that the stack traces are removed when `errorStack: false` is passed to the `toJson` method. The `errorStack` option is set to `true` by default.
+W> لاحظ أن stack traces تُزال عند تمرير `errorStack: false` إلى دالة `toJson`. القيمة الافتراضية لخيار `errorStack` هي `true`.
diff --git a/src/content/api/webpack-dev-server.mdx b/src/content/api/webpack-dev-server.mdx
index 96c99f8ab3b5..8723de7ed7ae 100644
--- a/src/content/api/webpack-dev-server.mdx
+++ b/src/content/api/webpack-dev-server.mdx
@@ -2,20 +2,20 @@
 title: webpack-dev-server API
 sort: 3
 contributors:
-  - snitin315
+  - RlxChap2
 ---
 
-`webpack-dev-server` provides a Node.js API which can be used directly in Node.js runtime.
+يوفّر `webpack-dev-server` واجهة Node.js API يمكنك استخدامها مباشرة من داخل بيئة تشغيل Node.js.
 
-## Installation
+## التثبيت
 
-To start using the `webpack-dev-server` Node.js API, first install `webpack` and `webpack-dev-server` if you haven’t yet:
+لاستخدام Node.js API الخاص بـ `webpack-dev-server`، ثبّت أولًا `webpack` و`webpack-dev-server` إذا لم يكونا مثبتين لديك:
 
 ```bash
 npm install --save-dev webpack webpack-dev-server
 ```
 
-Then require the modules in your Node.js script:
+بعد ذلك استورد الحزم داخل سكربت Node.js:
 
 ```js
 import webpack from "webpack";
@@ -24,7 +24,7 @@ import WebpackDevServer from "webpack-dev-server";
 
 ## start
 
-It instructs `webpack-dev-server` instance to start the server.
+تستخدم `start` لتشغيل الخادم من instance الخاص بـ `webpack-dev-server`.
 
 **server.js**
 
@@ -45,7 +45,7 @@ const runServer = async () => {
 runServer();
 ```
 
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
 
 ```bash
 node server.js
@@ -53,7 +53,7 @@ node server.js
 
 ## startCallback(callback)
 
-It instructs `webpack-dev-server` instance to start the server and then run the callback function.
+تستخدم `startCallback(callback)` لتشغيل الخادم، ثم تنفيذ دالة `callback` بعد بدء التشغيل.
 
 **server.js**
 
@@ -71,7 +71,7 @@ server.startCallback(() => {
 });
 ```
 
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
 
 ```bash
 node server.js
@@ -79,7 +79,7 @@ node server.js
 
 ## stop
 
-It instructs `webpack-dev-server` instance to stop the server.
+تستخدم `stop` لإيقاف الخادم من instance الخاص بـ `webpack-dev-server`.
 
 **server.js**
 
@@ -107,7 +107,7 @@ runServer();
 setTimeout(stopServer, 5000);
 ```
 
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
 
 ```bash
 node server.js
@@ -115,7 +115,7 @@ node server.js
 
 ## stopCallback(callback)
 
-It instructs `webpack-dev-server` instance to stop the server and then run the callback function.
+تستخدم `stopCallback(callback)` لإيقاف الخادم، ثم تنفيذ دالة `callback` بعد اكتمال الإيقاف.
 
 **server.js**
 
@@ -140,7 +140,7 @@ const stopServer = () =>
 setTimeout(stopServer, 5000);
 ```
 
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
 
 ```bash
 node server.js
@@ -148,7 +148,7 @@ node server.js
 
 ## internalIP(family: "v4" | "v6")
 
-Returns the internal `IPv4`/`IPv6` address asynchronously.
+ترجع هذه الدالة عنوان `IPv4` أو `IPv6` الداخلي بشكل غير متزامن.
 
 **server.js**
 
@@ -168,7 +168,7 @@ logInternalIPs();
 
 ## internalIPSync(family: "v4" | "v6")
 
-Returns the internal `IPv4`/`IPv6` address synchronously.
+ترجع هذه الدالة عنوان `IPv4` أو `IPv6` الداخلي بشكل متزامن.
 
 **server.js**
 

From c602c28839af8e09827d1e206841e625a5700170 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 13:40:39 +0300
Subject: [PATCH 25/35] docs(configuration): fixed translation in resolve.mdx

---
 src/content/configuration/resolve.mdx | 199 +++++++++++++-------------
 1 file changed, 99 insertions(+), 100 deletions(-)

diff --git a/src/content/configuration/resolve.mdx b/src/content/configuration/resolve.mdx
index 47e588af356b..a90892553b1f 100644
--- a/src/content/configuration/resolve.mdx
+++ b/src/content/configuration/resolve.mdx
@@ -5,13 +5,13 @@ contributors:
   - RlxChap2
 ---
 
-تغير هذه الخيارات كيفية حل modules. يوفر webpack إعدادات افتراضية معقولة، ولكن من الممكن تغيير الحل بالتفصيل. قم بإلقاء نظرة على [Module القرار](/concepts/module-resolution) لمزيد من التوضيح حول كيفية عمل resolver.
+تتحكم هذه الخيارات في طريقة حل modules. يوفّر webpack إعدادات افتراضية مناسبة، ويمكنك تعديل سلوك resolver بالتفصيل عند الحاجة. راجع [Module Resolution](/concepts/module-resolution) لفهم آلية عمل resolver بشكل أوضح.
 
 ## resolve
 
 `object`
 
-قم بتخصيص كيفية حل modules. على سبيل المثال، عند الاتصال بـ `import 'lodash'` في ES2015، يمكن أن تتغير خيارات `resolve` حيث يذهب webpack للبحث عن `'lodash'` (راجع [`modules`](#resolvemodules)).
+خصّص طريقة حل modules. على سبيل المثال، عند استخدام `import 'lodash'` في ES2015، تحدد خيارات `resolve` الأماكن التي يبحث فيها webpack عن `'lodash'` (راجع [`modules`](#resolvemodules)).
 
 **webpack.config.js**
 
@@ -28,7 +28,7 @@ export default {
 
 `object`
 
-قم بإنشاء أسماء مستعارة لـ `import` أو `require` معينة modules بسهولة أكبر. على سبيل المثال، لإنشاء اسم مستعار لمجموعة من المجلدات `src/` شائعة الاستخدام:
+أنشئ أسماء مستعارة لتسهيل استيراد modules معيّنة عبر `import` أو `require`. على سبيل المثال، يمكنك إنشاء alias لمجموعة من مجلدات `src/` كثيرة الاستخدام:
 
 **webpack.config.js**
 
@@ -62,7 +62,7 @@ import Utility from "../../utilities/utility";
 import Utility from "Utilities/utility";
 ```
 
-يمكن أيضًا إضافة `يمكن أيضًا إضافة زائدة إلى مفاتيح object المحددة للدلالة على التطابق التام:
+يمكنك أيضًا إضافة علامة `$` في نهاية مفتاح alias للدلالة على التطابق التام فقط:
 
 **webpack.config.js**
 
@@ -83,11 +83,11 @@ export default {
 };
 ```
 
-والتي من شأنها أن تسفر عن هذه النتائج:
+ينتج عن ذلك السلوك التالي:
 
 ```js
-import Test1 from "xyz"; // Exact match, so path/to/file.js is resolved and imported
-import Test2 from "xyz/file.js"; // Not an exact match, normal resolution takes place
+import Test1 from "xyz"; // تطابق تام، لذلك يتم حل path/to/file.js واستيراده
+import Test2 from "xyz/file.js"; // ليس تطابقًا تامًا، لذلك تتم عملية resolve العادية
 ```
 
 يمكنك أيضًا استخدام أحرف البدل (`*`) في تخصيص الاسم المستعار الخاص بك لإنشاء تعيينات أكثر مرونة:
@@ -105,13 +105,13 @@ export default {
   // ...
   resolve: {
     alias: {
-      "@*": path.resolve(__dirname, "src/*"), // maps @something to path/to/something
+      "@*": path.resolve(__dirname, "src/*"), // يربط @something بالمسار path/to/something
     },
   },
 };
 ```
 
-يتيح لك هذا استخدام الواردات مثل:
+يتيح لك هذا استخدام عمليات import مثل:
 
 ```js
 import Component from "@components/Button";
@@ -136,15 +136,15 @@ import utils from "@utils/helpers";
 | `{ xyz: 'modu/dir' }`              | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/modu/dir/file.js` |
 | `{ xyz$: 'modu/dir' }`             | `/abc/node_modules/modu/dir/index.js` | `/abc/node_modules/xyz/file.js`      |
 
-`index.js` يجوز resolve إلى ملف آخر إذا تم تعريفه في `package.json`.
+يمكن أن يتم resolve لـ `index.js` إلى ملف آخر إذا كان ذلك معرّفًا في `package.json`.
 
-`/abc/node_modules` قد resolve في `/node_modules` أيضًا.
+قد يتابع webpack البحث من `/abc/node_modules` إلى `/node_modules` أيضًا.
 
-W> `resolve.alias` له الأسبقية على قرارات module الأخرى.
+W> لدى `resolve.alias` أولوية أعلى من قرارات module الأخرى.
 
 W> تم إهمال [`null-loader`](https://github.com/webpack-contrib/null-loader) في webpack 5. استخدم `alias: { xyz$: false }` أو المسار المطلق `alias: {[path.resolve(__dirname, './path/to/module')]: false }`
 
-W> يتم دعم قيم `[string]` منذ webpack 5.
+W> يدعم webpack قيم `[string]` منذ webpack 5.
 
 ```js
 import path from "node:path";
@@ -166,7 +166,7 @@ export default {
 };
 ```
 
-سيؤدي ضبط `resolve.alias` على `false` إلى مطالبة webpack بتجاهل module.
+ضبط `resolve.alias` على `false` يجعل webpack يتجاهل module.
 
 ```js
 export default {
@@ -180,7 +180,7 @@ export default {
 };
 ```
 
-T> لتجاهل modules استنادًا إلى التعبير العادي، يمكنك استخدام [IgnorePlugin](https://webpack.js.org/plugins/ignore-plugin/)
+T> لتجاهل modules بناءً على RegExp، يمكنك استخدام [IgnorePlugin](https://webpack.js.org/plugins/ignore-plugin/).
 
 ### resolve.aliasFields
 
@@ -201,7 +201,7 @@ export default {
 
 ### resolve.byDependency
 
-قم بتخصيص خيارات resolve حسب نوع الطلب module.
+خصّص خيارات resolve حسب نوع طلب module.
 
 - النوع: `[type: string]: ResolveOptions`
 - مثال:
@@ -230,7 +230,7 @@ export default {
 
 `boolean`
 
-لتمكين caching من الطلبات التي تم حلها بنجاح، مما يسمح بإعادة التحقق من صحة إدخالات cache.
+يفعّل caching للطلبات التي تم حلها بنجاح، مما يسمح بإعادة استخدام إدخالات cache والتحقق منها.
 
 **webpack.config.js**
 
@@ -247,7 +247,7 @@ export default {
 
 `function(module) => boolean`
 
-function الذي يقرر ما إذا كان يجب تخزين الطلب مؤقتًا أم لا. يتم تمرير object إلى function باستخدام الخاصيتين `path` و`request`. يجب أن يُرجع boolean.
+دالة تقرر هل يجب تخزين الطلب في cache أم لا. يُمرر إليها object يحتوي على الخاصيتين `path` و`request`، ويجب أن ترجع boolean.
 
 **webpack.config.js**
 
@@ -266,13 +266,13 @@ export default {
 
 `boolean`
 
-إذا تم تمكين cache غير الآمن، فسيتم تضمين `request.context` في المفتاح cache. يتم أخذ هذا الخيار في الاعتبار بواسطة [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve/) module. يتم تجاهل `context` في resolve caching عند توفير resolve أو ResolveLoader plugins. يعالج هذا انحدار performance.
+إذا كان unsafe cache مفعّلًا، فسيتم تضمين `request.context` داخل مفتاح cache. يأخذ module [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve/) هذا الخيار في الحسبان. يتم تجاهل `context` في resolve caching عند توفير plugins لـ `resolve` أو `resolveLoader`. يساعد هذا على تجنب تراجع performance.
 
 ### resolve.conditionNames
 
 `string[]`
 
-أسماء الشروط لـ [`exports` الحقل](https://nodejs.org/api/packages.html#packages_exports) التي تحدد entry points لـ package.
+أسماء الشروط في حقل [`exports`](https://nodejs.org/api/packages.html#packages_exports)، وهي التي تحدد entry points الخاصة بالـ package.
 
 **webpack.config.js**
 
@@ -285,51 +285,50 @@ export default {
 };
 ```
 
-سوف يتطابق webpack مع [شروط التصدير](https://nodejs.org/api/packages.html#conditional-exports) المدرجة ضمن `resolve.conditionNames` array.
+يطابق webpack [شروط التصدير](https://nodejs.org/api/packages.html#conditional-exports) المدرجة داخل array الخاصة بـ `resolve.conditionNames`.
 
 #### القيم الافتراضية
 
-يتم تخصيص `conditionNames` الافتراضي ديناميكيًا استنادًا إلى تخصيصات [`mode`](/configuration/mode/) و[`target`](/configuration/target/):
+يضبط webpack القيمة الافتراضية لـ `conditionNames` ديناميكيًا حسب إعدادات [`mode`](/configuration/mode/) و[`target`](/configuration/target/):
 
 تتضمن الشروط الأساسية دائمًا ما يلي:
 
-- `"webpack"` — حاضر دائمًا.
-- `"production"` أو `"development"` — بناءً على التيار [`mode`](/configuration/mode/) (يتم استخدام `"production"` عندما يكون الوضع `"none"` أو `"production"`).
+- `"webpack"`: موجود دائمًا.
+- `"production"` أو `"development"`: حسب قيمة [`mode`](/configuration/mode/) الحالية. تُستخدم `"production"` عندما يكون الوضع `"none"` أو `"production"`.
 
 يتم إلحاق شروط إضافية بناءً على [`target`](/configuration/target/):
 
-| Target خاصية | الحالة       |
-| ------------ | ------------ |
-| `webworker`  | `"worker"`   |
-| `node`       | `"node"`     |
-| `web`        | `"browser"`  |
-| `electron`   | `"electron"` |
-| `nwjs`       | `"nwjs"`     |
+| قيمة `target` | الشرط        |
+| ------------- | ------------ |
+| `webworker`   | `"worker"`   |
+| `node`        | `"node"`     |
+| `web`         | `"browser"`  |
+| `electron`    | `"electron"` |
+| `nwjs`        | `"nwjs"`     |
 
 على سبيل المثال، مع `target: "web"` (الافتراضي) و`mode: "production"`، يكون الإعداد الافتراضي `conditionNames` هو `["webpack", "production", "browser"]`.
 
-#### شروط النوع لكل dependency
+#### شروط كل نوع dependency
 
-يقوم webpack بضبط `conditionNames` حتى [`resolve.byDependency`](/configuration/resolve/#resolvebydependency) اعتمادًا على كيفية استيراد module. يرث الرمز المميز `"..."` من الشروط الأساسية المذكورة أعلاه.
+يضبط webpack قيمة `conditionNames` عبر [`resolve.byDependency`](/configuration/resolve/#resolvebydependency) حسب طريقة استيراد module. الرمز `"..."` يرث الشروط الأساسية المذكورة أعلاه.
 
-| Dependency النوع                                    | `conditionNames`                                       | تستخدم ل                                            |
-| --------------------------------------------------- | ------------------------------------------------------ | --------------------------------------------------- |
-| `esm`، `wasm`، `loaderImport`                       | `["import", "module-sync", "module", "..."]`           | ESM `import` البيانات، WebAssembly، loader الواردات |
-| `commonjs`، `amd`، `loader`، `unknown`، `undefined` | `["require", "module-sync", "module", "..."]`          | مكالمات `require()` وAMD وأنواع dependency الأخرى   |
-| `worker`                                            | `["worker", "import", "module-sync", "module", "..."]` | `new Worker()` التعبيرات                            |
-| `css-import`                                        | `["webpack", <mode>, "style"]`                         | CSS `@import` البيانات                              |
+| نوع dependency                                      | `conditionNames`                                       | الاستخدام                                                    |
+| --------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------ |
+| `esm`، `wasm`، `loaderImport`                       | `["import", "module-sync", "module", "..."]`           | عمليات ESM `import`، وWebAssembly، وعمليات import من loaders |
+| `commonjs`، `amd`، `loader`، `unknown`، `undefined` | `["require", "module-sync", "module", "..."]`          | استدعاءات `require()` وAMD وأنواع dependency الأخرى          |
+| `worker`                                            | `["worker", "import", "module-sync", "module", "..."]` | تعابير `new Worker()`                                        |
+| `css-import`                                        | `["webpack", <mode>, "style"]`                         | تعليمات CSS `@import`                                        |
 
-يتم تضمين <Badge text="5.107.0+" /> `"module-sync"` في الشروط الافتراضية
-للتوافق مع Node.js، مما يعرض حالة مجتمع `module-sync` لـ
-قابل للتحميل بشكل متزامن ESM. Packages التي تنشر تصدير `module-sync` في
-يتم التقاط `package.json` الخاصة بهم تلقائيًا دون أي إضافة
-التخصيص.
+يُدرج <Badge text="5.107.0+" /> الشرط `"module-sync"` ضمن الشروط الافتراضية
+للتوافق مع Node.js. هذا الشرط يعبّر عن حزم ESM التي يمكن تحميلها بشكل متزامن.
+الحزم التي تنشر تصديرًا باسم `module-sync` داخل `package.json` تُلتقط تلقائيًا
+بدون أي إعداد إضافي.
 
 على سبيل المثال، عندما يستخدم ملف `import` في مشروع يحتوي على `target: "web"` و`mode: "production"`، فإن الشروط النهائية التي تم حلها هي `["import", "module-sync", "module", "webpack", "production", "browser"]`.
 
 T> يستخدم الخيار `resolveLoader` إعدادات افتراضية مختلفة لـ `conditionNames`: `["loader", "require", "node"]`. راجع [resolveLoader](#resolveloader).
 
-#### مطابقة الحالة
+#### مطابقة الشروط
 
 يعد ترتيب المفاتيح في الحقل `exports` مهمًا. أثناء مطابقة الشرط، تتمتع الإدخالات السابقة بأولوية أعلى وتكون لها الأسبقية على الإدخالات اللاحقة.
 
@@ -369,11 +368,11 @@ export default {
 };
 ```
 
-import
+عمليات import:
 
-- `'foo'` سوف resolve إلى `'foo/index-require.js'`
-- `'foo/bar'` سوف resolve إلى `'foo/bar-node.js'` حيث أن المفتاح `"node"` يأتي قبل مفتاح `"require"` في عمليات التصدير الشرطية object.
-- `'foo/baz'` سوف resolve إلى `'foo/baz-node.js'`
+- سيتم resolve لـ `'foo'` إلى `'foo/index-require.js'`.
+- سيتم resolve لـ `'foo/bar'` إلى `'foo/bar-node.js'` لأن المفتاح `"node"` يأتي قبل `"require"` داخل object الخاص بالـ conditional exports.
+- سيتم resolve لـ `'foo/baz'` إلى `'foo/baz-node.js'`.
 
 #### شروط مخصصة
 
@@ -390,7 +389,7 @@ export default {
 };
 ```
 
-وبدلاً من ذلك، لتحديد أولوية الشروط الافتراضية أولاً، ثم قم بإضافة شروطك المخصصة:
+أو إذا أردت إعطاء الأولوية للشروط الافتراضية أولًا، ثم إضافة شروطك المخصصة:
 
 **webpack.config.js**
 
@@ -424,7 +423,7 @@ export default {
 
 `boolean = false`
 
-إذا كان `true`، فلن يسمح بالملفات ذات الامتدادات الأقل. لذلك يعمل `import foo from "./foo";`/`require('./foo')` بشكل افتراضي إذا كان `./foo` له امتداد `.js`، ولكن مع تمكين هذا فقط `import foo from "./foo.js"`/`require('./foo.js')` سيعمل.
+إذا كانت القيمة `true`، فلن يسمح webpack بالاستيراد بدون الامتداد الكامل. لذلك يعمل `import foo from "./foo";` أو `require('./foo')` افتراضيًا إذا كان `./foo` يملك امتداد `.js`، لكن عند تفعيل هذا الخيار لن يعمل إلا `import foo from "./foo.js"` أو `require('./foo.js')`.
 
 **webpack.config.js**
 
@@ -441,7 +440,7 @@ export default {
 
 `[string] = ['exports']`
 
-الحقول الموجودة في package.json المستخدمة لحل طلبات module. راجع [package-إرشادات التصدير](/guides/package-exports/) لمزيد من المعلومات.
+الحقول الموجودة في `package.json` التي تُستخدم لحل طلبات module. راجع [دليل package exports](/guides/package-exports/) لمزيد من المعلومات.
 
 **webpack.config.js**
 
@@ -458,7 +457,7 @@ export default {
 
 `object`
 
-object الذي يعيّن الامتداد للأسماء المستعارة للامتداد.
+object يربط امتدادًا بامتدادات بديلة.
 
 **webpack.config.js**
 
@@ -478,7 +477,7 @@ export default {
 
 `[string] = ['.js', '.json', '.wasm']`
 
-حاول resolve هذه الامتدادات بالترتيب. إذا كانت هناك ملفات متعددة تشترك في نفس الاسم ولكن لها امتدادات مختلفة، فإن webpack سوف resolve الملف ذو الامتداد المدرج أولاً في array ويتخطى الباقي.
+يحاول webpack resolve هذه الامتدادات بالترتيب. إذا كانت هناك ملفات متعددة لها الاسم نفسه لكن بامتدادات مختلفة، فسيختار webpack الملف صاحب الامتداد المذكور أولًا في array ويتخطى الباقي.
 
 **webpack.config.js**
 
@@ -497,7 +496,7 @@ export default {
 import File from "../path/to/file";
 ```
 
-لاحظ أن استخدام `resolve.extensions` كما هو مذكور أعلاه سوف **يلغي الافتراضي array**، مما يعني أن webpack لن يحاول بعد الآن resolve modules باستخدام الامتدادات الافتراضية. ومع ذلك، يمكنك استخدام `'...'` للوصول إلى الامتدادات الافتراضية:
+لاحظ أن استخدام `resolve.extensions` كما في المثال أعلاه **يلغي array الافتراضية**، مما يعني أن webpack لن يحاول resolve modules باستخدام الامتدادات الافتراضية. يمكنك استخدام `'...'` لإبقاء الامتدادات الافتراضية:
 
 ```js
 export default {
@@ -512,7 +511,7 @@ export default {
 
 `object`
 
-إعادة توجيه طلبات module عند فشل الحل العادي.
+يوجّه طلبات module إلى بدائل عند فشل resolve العادي.
 
 **webpack.config.js**
 
@@ -527,14 +526,14 @@ export default {
   // ...
   resolve: {
     fallback: {
-      abc: false, // do not include a polyfill for abc
-      xyz: path.resolve(__dirname, "path/to/file.js"), // include a polyfill for xyz
+      abc: false, // لا تضف polyfill لـ abc
+      xyz: path.resolve(__dirname, "path/to/file.js"), // أضف polyfill لـ xyz
     },
   },
 };
 ```
 
-webpack 5 لم تعد تملأ Node.js الأساسية modules تلقائيًا مما يعني أنه إذا كنت تستخدمها في التعليمات البرمجية الخاصة بك التي تعمل في browsers أو ما شابه ذلك، فسيتعين عليك تثبيت modules المتوافق من npm وتضمينها بنفسك. فيما يلي قائمة بالحشوات المتعددة التي استخدمها webpack قبل webpack 5:
+في webpack 5 لم يعد webpack يضيف polyfills تلقائيًا لـ Node.js core modules. إذا كنت تستخدم هذه modules في كود يعمل داخل browser أو بيئة مشابهة، فعليك تثبيت الحزم المتوافقة من npm وإضافتها بنفسك. هذه قائمة بالـ polyfills التي كان webpack يستخدمها قبل webpack 5:
 
 ```js
 import { createRequire } from "node:module";
@@ -577,7 +576,7 @@ export default {
 
 `boolean`
 
-عند التعيين على "صحيح"، يتعامل هذا الخيار مع الطلبات المحددة من قبل المستخدم على أنها محددة بالكامل. وهذا يعني أنه لا تتم إضافة أي ملحقات تلقائيًا، ولا يتم حل الملفات الرئيسية داخل الدلائل. من المهم ملاحظة أن هذا السلوك لا يؤثر على الطلبات المقدمة من خلال `mainFields`، أو `aliasFields`، أو `aliases`.
+عند ضبطه على `true`، يتعامل هذا الخيار مع الطلبات التي يكتبها المستخدم على أنها محددة بالكامل. هذا يعني أنه لا تُضاف امتدادات تلقائيًا، ولا يتم resolve للملفات الرئيسية داخل المجلدات. لاحظ أن هذا السلوك لا يؤثر على الطلبات القادمة من `mainFields` أو `aliasFields` أو `aliases`.
 
 **webpack.config.js**
 
@@ -594,7 +593,7 @@ export default {
 
 `[string]`
 
-الحقول من `package.json` والتي يتم استخدامها لتوفير الطلبات الداخلية لـ package (الطلبات التي تبدأ بـ `#` تعتبر داخلية).
+الحقول في `package.json` التي تُستخدم لتوفير الطلبات الداخلية للـ package. الطلبات التي تبدأ بـ `#` تُعد داخلية.
 
 **webpack.config.js**
 
@@ -611,7 +610,7 @@ export default {
 
 `[string]`
 
-عند الاستيراد من npm package، على سبيل المثال، `import * as D3 from 'd3'`، سيحدد هذا الخيار الحقول الموجودة في `package.json` التي تم تحديدها. ستختلف القيم الافتراضية بناءً على [`target`](/concepts/targets) المحدد في تخصيص webpack الخاص بك.
+عند الاستيراد من npm package، مثل `import * as D3 from 'd3'`، يحدد هذا الخيار أي حقول من `package.json` يستخدمها webpack كنقطة دخول. تختلف القيم الافتراضية حسب [`target`](/concepts/targets) المحدد في إعداد webpack.
 
 عند ضبط الخاصية `target` على `webworker` أو `web` أو تركها غير محددة:
 
@@ -626,7 +625,7 @@ export default {
 };
 ```
 
-لأي target أخرى (بما في ذلك `node`):
+لأي target آخر، بما في ذلك `node`:
 
 **webpack.config.js**
 
@@ -639,7 +638,7 @@ export default {
 };
 ```
 
-على سبيل المثال، ضع في الاعتبار library عشوائيًا يسمى `upstream` مع `package.json` الذي يحتوي على الحقول التالية:
+على سبيل المثال، افترض وجود library اسمها `upstream` وملف `package.json` الخاص بها يحتوي على الحقول التالية:
 
 ```json
 {
@@ -648,7 +647,7 @@ export default {
 }
 ```
 
-عندما نقوم `import * as Upstream from 'upstream'` سيؤدي هذا في الواقع إلى resolve للملف الموجود في الخاصية `browser`. الخاصية `browser` لها الأولوية لأنها العنصر الأول في `mainFields`. وفي الوقت نفسه، سيحاول تطبيق Node.js المجمع بواسطة webpack أولاً resolve باستخدام الملف الموجود في الحقل `module`.
+عند كتابة `import * as Upstream from 'upstream'`، سيتم resolve للاستيراد إلى الملف الموجود في الخاصية `browser`. تحصل الخاصية `browser` على الأولوية لأنها أول عنصر في `mainFields`. وفي المقابل، سيحاول تطبيق Node.js المجمّع بواسطة webpack أن يستخدم الملف الموجود في الحقل `module` أولًا.
 
 ### resolve.mainFiles
 
@@ -671,7 +670,7 @@ export default {
 
 `[string] = ['node_modules']`
 
-أخبر webpack ما هي الأدلة التي يجب البحث فيها عند حل modules.
+أخبر webpack بأي مجلدات يبحث فيها عند resolve للـ modules.
 
 يمكن استخدام كل من المسارات المطلقة والنسبية، لكن انتبه إلى أن سلوكهما سيكون مختلفًا بعض الشيء.
 
@@ -690,7 +689,7 @@ export default {
 };
 ```
 
-إذا كنت تريد إضافة دليل للبحث فيه فله الأولوية على `node_modules/`:
+إذا أردت إضافة مجلد بحث تكون له أولوية أعلى من `node_modules/`:
 
 **webpack.config.js**
 
@@ -713,14 +712,14 @@ export default {
 
 [`[Plugin | Function]`](/plugins/)
 
-قائمة resolve plugins الإضافية التي يجب تطبيقها.
+قائمة resolve plugins إضافية يجب تطبيقها.
 
-يمكن أن يكون كل entry إما:
+يمكن أن يكون كل عنصر واحدًا مما يلي:
 
-- plugin object بطريقة `apply(resolver)`
-- أو function plugin، والذي سيتم استدعاؤه باستخدام resolver باعتباره `this` والوسيطة الأولى
+- plugin object يملك الدالة `apply(resolver)`.
+- function plugin تُستدعى ويكون resolver هو قيمة `this` والـ argument الأول.
 
-يسمح بـ plugins مثل [`DirectoryNamedWebpackPlugin`](https://www.npmjs.com/package/directory-named-webpack-plugin).
+يتيح ذلك استخدام plugins مثل [`DirectoryNamedWebpackPlugin`](https://www.npmjs.com/package/directory-named-webpack-plugin).
 
 **webpack.config.js**
 
@@ -729,16 +728,16 @@ export default {
   // ...
   resolve: {
     plugins: [
-      // Object-نمط plugin
+      // plugin بأسلوب object
       {
         apply(resolver) {
           // منطق مخصص
         },
       },
 
-      // Function-نمط plugin
+      // plugin بأسلوب function
       function (resolver) {
-        // `this` is also the resolver
+        // `this` هو resolver أيضًا
       },
     ],
   },
@@ -751,7 +750,7 @@ export default {
 
 <Badge text="5.13.0+" />
 
-تفضل المسارات المطلقة إلى [`resolve.roots`](#resolveroots) عند الحل.
+يفضّل المسارات المطلقة على [`resolve.roots`](#resolveroots) أثناء resolve.
 
 **webpack.config.js**
 
@@ -768,7 +767,7 @@ export default {
 
 `boolean`
 
-عند التمكين، يفضل webpack طلبات resolve module كطلبات نسبية بدلاً من استخدام modules من أدلة `node_modules`.
+عند تفعيله، يفضّل webpack حل طلبات module كطلبات نسبية بدل استخدام modules من مجلدات `node_modules`.
 
 **webpack.config.js**
 
@@ -787,10 +786,10 @@ export default {
 
 ```js
 // لنفترض أن `src/logo.svg` موجود
-import logo1 from "logo.svg"; // this is viable when `preferRelative` enabled
-import logo2 from "./logo.svg"; // otherwise you can only use relative path to resolve logo.svg
+import logo1 from "logo.svg"; // يعمل هذا عندما يكون `preferRelative` مفعّلًا
+import logo2 from "./logo.svg"; // وإلا فيجب استخدام مسار نسبي لحل logo.svg
 
-// `preferRelative` is enabled by default for `new URL()` case
+// `preferRelative` مفعّل افتراضيًا في حالة `new URL()`
 const b = new URL("module/path", import.meta.url);
 const a = new URL("./module/path", import.meta.url);
 ```
@@ -799,7 +798,7 @@ const a = new URL("./module/path", import.meta.url);
 
 `[string, RegExp]`
 
-قائمة بقيود resolve لتقييد المسارات التي يمكن حل الطلب عليها.
+قائمة قيود تحدد المسارات المسموح للطلبات أن تُحل إليها.
 
 **webpack.config.js**
 
@@ -816,7 +815,7 @@ export default {
 
 `[string]`
 
-قائمة بالأدلة التي يتم فيها حل طلبات عناوين URL ذات الصلة بـ server (التي تبدأ بـ '/')، والإعدادات الافتراضية هي [`context` خيار التخصيص](/configuration/entry-context/#context). في الأنظمة التي لا تعمل بنظام Windows، يتم حل هذه الطلبات كمسار مطلق أولاً.
+قائمة المجلدات التي تُحل منها طلبات URL المرتبطة بجذر server، وهي الطلبات التي تبدأ بـ `/`. القيمة الافتراضية هي خيار [`context`](/configuration/entry-context/#context). في الأنظمة غير Windows، تُحل هذه الطلبات كمسار مطلق أولًا.
 
 **webpack.config.js**
 
@@ -840,9 +839,9 @@ export default {
 
 `boolean = true`
 
-ما إذا كان سيتم ربط resolve بالارتباطات الرمزية إلى موقع الارتباط الرمزي الخاص بها.
+يحدد هل يتبع resolver الروابط الرمزية إلى المسار الحقيقي للملف.
 
-عند التمكين، يتم تحويل الموارد المرتبطة بالرمز إلى مسارها \_الحقيقي، وليس إلى موقع الارتباط الرمزي الخاص بها. لاحظ أن هذا قد يتسبب في فشل دقة module عند استخدام الأدوات التي تربط packages (مثل `npm link`).
+عند تفعيله، تُحوّل الموارد المشار إليها عبر symlink إلى مسارها \_الحقيقي، وليس إلى موقع symlink نفسه. لاحظ أن هذا قد يسبب فشل resolve للـ module عند استخدام أدوات تربط packages، مثل `npm link`.
 
 **webpack.config.js**
 
@@ -859,7 +858,7 @@ export default {
 
 `object` `boolean = true`
 
-تمكين العدوانية، ولكن **غير الآمنة**، caching من modules. تمرير `true` سوف cache كل شيء.
+يفعّل caching قويًا لكنه **غير آمن** للـ modules. تمرير `true` سيخزّن كل شيء في cache.
 
 **webpack.config.js**
 
@@ -872,9 +871,9 @@ export default {
 };
 ```
 
-عند توفير object، سيستخدمه webpack كـ cache.
+عند تمرير object، سيستخدمه webpack كـ cache.
 
-على سبيل المثال، يمكنك توفير [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) بدلاً من الوكيل العادي:
+على سبيل المثال، يمكنك تمرير [كائن Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) بدل object عادي:
 
 **webpack.config.js**
 
@@ -887,7 +886,7 @@ const unsafeCacheHandler = {
 
     // تأكد من وجود الملف على القرص
     if (cachedValue && !fs.existsSync(cachedValue.path)) {
-      // وإذا لم يحدث ذلك، قم بطرد cache entry.
+      // وإذا لم يكن موجودًا، احذف إدخال cache.
       delete cache[key];
       return undefined;
     }
@@ -911,7 +910,7 @@ W> قد تؤدي التغييرات في المسارات المخزنة مؤق
 
 `boolean`
 
-استخدم استدعاءات نظام الملفات المتزامنة لـ resolver.
+يستخدم استدعاءات نظام الملفات المتزامنة داخل resolver.
 
 **webpack.config.js**
 
@@ -930,7 +929,7 @@ export default {
 
 `boolean` `string` `object`
 
-TypeScript التخصيص لتعيين المسارات. يحل هذا الخيار محل الحاجة إلى `tsconfig-paths-webpack-plugin`. يقرأ `compilerOptions.baseUrl` و`compilerOptions.paths` من `tsconfig.json` ويطبق تلك الأسماء المستعارة عند حل عمليات الاستيراد.
+إعداد TypeScript لتعيين المسارات. يغني هذا الخيار عن الحاجة إلى `tsconfig-paths-webpack-plugin`. يقرأ `compilerOptions.baseUrl` و`compilerOptions.paths` من `tsconfig.json` ويطبق تلك الأسماء المستعارة أثناء resolve لعمليات import.
 
 **webpack.config.js**
 
@@ -938,15 +937,15 @@ TypeScript التخصيص لتعيين المسارات. يحل هذا الخي
 export default {
   // ...
   resolve: {
-    tsconfig: true, // Use default tsconfig.json
+    tsconfig: true, // استخدم tsconfig.json الافتراضي
   },
 };
 ```
 
 **الخيارات:**
 
-- `false` - تعطيل تعيين المسار TypeScript
-- `true` - استخدم الملف `tsconfig.json` الافتراضي (يبحث عنه تلقائيًا)
+- `false` - تعطيل path mapping الخاص بـ TypeScript
+- `true` - استخدم ملف `tsconfig.json` الافتراضي (يبحث عنه تلقائيًا)
 - `string` - المسار إلى ملف `tsconfig.json` (نسبي أو مطلق)
 
 **webpack.config.js**
@@ -955,12 +954,12 @@ export default {
 export default {
   // ...
   resolve: {
-    tsconfig: "./tsconfig.app.json", // Custom path
+    tsconfig: "./tsconfig.app.json", // مسار مخصص
   },
 };
 ```
 
-- `object` - Object مع خيارات `configFile` و`references`
+- `object` - object يحتوي على خياري `configFile` و`references`
 
 **webpack.config.js**
 
@@ -970,16 +969,16 @@ export default {
   resolve: {
     tsconfig: {
       configFile: "./tsconfig.json",
-      references: "auto", // or array of paths
+      references: "auto", // أو array من المسارات
     },
   },
 };
 ```
 
-**Object الخيارات:**
+**خيارات object:**
 
 - `configFile` (`string`): مسار إلى ملف tsconfig (نسبي أو مطلق)
-- `references` (`"auto"` | `string[]`): مراجع لملفات tsconfig الأخرى. `"auto"` يرث من تخصيص TypeScript، أو array من المسارات النسبية/المطلقة
+- `references` (`"auto"` | `string[]`): مراجع لملفات tsconfig الأخرى. `"auto"` يرث من إعداد TypeScript، أو يمكنك تمرير array من المسارات النسبية/المطلقة.
 
 **مثال tsconfig.json:**
 
@@ -1008,7 +1007,7 @@ T> يتوفر هذا الخيار أيضًا في `resolveLoader` بنفس خي
 
 `object { modules [string] = ['node_modules'], extensions [string] = ['.js', '.json'], mainFields [string] = ['loader', 'main']}`
 
-مجموعة الخيارات هذه مطابقة للخاصية `resolve` المذكورة أعلاه، ولكنها تستخدم فقط لـ resolve webpack's [loader](/concepts/loaders) packages.
+هذه المجموعة من الخيارات تطابق خاصية `resolve` المذكورة أعلاه، لكنها تُستخدم فقط لـ resolve حزم [loaders](/concepts/loaders) الخاصة بـ webpack.
 
 **webpack.config.js**
 
@@ -1023,4 +1022,4 @@ export default {
 };
 ```
 
-T> لاحظ أنه يمكنك استخدام الاسم المستعار هنا والميزات الأخرى المألوفة في resolve. على سبيل المثال، سوف يقوم `{ txt: 'raw-loader' }` بتحريك `txt!templates/demo.txt` لاستخدام `raw-loader`.
+T> لاحظ أنه يمكنك استخدام aliases هنا وبقية ميزات resolve المعتادة. على سبيل المثال، سيجعل `{ txt: 'raw-loader' }` الطلب `txt!templates/demo.txt` يستخدم `raw-loader`.

From 4d20ca42dcc00924689018818889dd8ecbe58af6 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 13:42:44 +0300
Subject: [PATCH 26/35] docs(license): translate license to Arabic

---
 src/content/license.mdx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/content/license.mdx b/src/content/license.mdx
index 6cce491d7f02..82e07ba07e96 100644
--- a/src/content/license.mdx
+++ b/src/content/license.mdx
@@ -1,24 +1,22 @@
 ---
-title: License
+title: الرخصة
 sort: 5
 contributors:
-  - EugeneHlushko
-  - pranshuchittora
+  - RlxChap2
 ---
 
 ## webpack
 
-Webpack is [MIT licensed](https://github.com/webpack/webpack/blob/main/LICENSE).
+webpack مرخّص برخصة [MIT](https://github.com/webpack/webpack/blob/main/LICENSE).
 
-## webpack logo and icon
+## شعار webpack وأيقونته
 
-The webpack logo and icon are under a different license which can be
-found [here](https://github.com/webpack/media).
+شعار webpack وأيقونتهما لهما رخصة مختلفة. يمكنك الاطلاع عليها [هنا](https://github.com/webpack/media).
 
-## webpack documentation
+## توثيق webpack
 
-The content on [https://webpack.js.org/](https://webpack.js.org/) is available under [Creative Commons BY 4.0](https://creativecommons.org/licenses/by/4.0/) license meaning attribution is required should you use the content elsewhere.
+محتوى [https://webpack.js.org/](https://webpack.js.org/) متاح برخصة [Creative Commons BY 4.0](https://creativecommons.org/licenses/by/4.0/). هذا يعني أنك تستطيع استخدام المحتوى في مكان آخر، لكن يجب ذكر المصدر.
 
-## webpack code samples
+## أمثلة كود webpack
 
-The code samples use [CC0 1.0 Universal (CC0 1.0) (Public Domain)](https://creativecommons.org/publicdomain/zero/1.0/) and you are free to use them as you like.
+أمثلة الكود منشورة برخصة [CC0 1.0 Universal (CC0 1.0) (Public Domain)](https://creativecommons.org/publicdomain/zero/1.0/)، ويمكنك استخدامها بالطريقة التي تناسبك.

From 111900a075a7867f5d1a02aff11eb72da215a20f Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 13:43:58 +0300
Subject: [PATCH 27/35] docs(webpack-awesome): translate awesome-webpack.mdx
 files to Arabic

---
 src/content/awesome-webpack.mdx | 424 ++++++++++++++++----------------
 1 file changed, 210 insertions(+), 214 deletions(-)

diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx
index 658809172dbf..f9639ed68111 100644
--- a/src/content/awesome-webpack.mdx
+++ b/src/content/awesome-webpack.mdx
@@ -2,21 +2,18 @@
 title: Awesome webpack
 sort: 2
 contributors:
-  - snitin315
-  - licg9999
-  - evenstensberg
-  - mr-baraiya
+  - RlxChap2
 ---
 
-A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the [awesome](https://github.com/sindresorhus/awesome) list. Feel free to improve this list by contributing.
+قائمة منتقاة من موارد webpack ومكتباته وأدواته وتطبيقاته المميزة. استُلهمت من قائمة [awesome](https://github.com/sindresorhus/awesome). يمكنك تحسين هذه القائمة بالمساهمة فيها.
 
-## Webpack Ecosystem
+## منظومة Webpack
 
-### Support Webpack
+### دعم Webpack
 
-- [Webpack Open Collective](https://opencollective.com/webpack) - Help support the teams ongoing development efforts.
+- [Webpack Open Collective](https://opencollective.com/webpack) - ساعد في دعم جهود التطوير المستمرة للفريق.
 
-### Community
+### المجتمع
 
 - [StackOverflow](https://stackoverflow.com/tags/webpack)
 - [Medium](https://medium.com/tag/webpack)
@@ -24,184 +21,183 @@ A curated list of awesome webpack resources, libraries, tools and applications.
 
 ### Twitter
 
-_People passionate about Webpack (In no particular order)_
+_أشخاص مهتمون بـ Webpack، بدون ترتيب محدد_
 
-- [Sean T. Larkin - @TheLarkInn](https://twitter.com/TheLarkInn) TPM at [Microsoft](https://twitter.com/MSEdgeDev). Developer Advocate and webpack core team member.
-- [Juho Vepsäläinen - @bebraw](https://twitter.com/bebraw) from [SurviveJS](https://twitter.com/survivejs) and webpack core team member.
-- [Eric Clemmons - @ericclemmons](https://twitter.com/ericclemmons) VP of Software Development at [HigherEdHQ](https://twitter.com/HigherEdHQ). Webpack member.
-- [Patrick Stapleton - @gdi2290](https://twitter.com/gdi2290) from [AngularClass](https://angularclass.com), [AngularAir](https://angularair.com) and [Angular Universal](https://github.com/angular/universal). Webpack member.
-- [Kent C. Dodds - @kentcdodds](https://twitter.com/kentcdodds) from [PayPal Engineering](https://twitter.com/PayPalEng) and [JavaScript Air](https://twitter.com/JavaScriptAir). Webpack member.
-- [Johannes Ewald - @Jhnnns](https://twitter.com/Jhnnns): Webpack core team member.
-- [Joshua Wiens - @d3viant0ne](https://twitter.com/d3viant0ne): Technical Lead for [EasyMetrics](https://easymetrics.com). Webpack member.
-- [Jonathan Creamer - @jcreamer898](https://twitter.com/jcreamer898): Microsoft MVP and [Telerik](https://github.com/telerik) Developer Expert.
-- [Kees Kluskens - @keeskluskens](https://twitter.com/keeskluskens): - Software Engineer at [Code Yellow](https://codeyellow.nl), Webpack core team member.
+- [Sean T. Larkin - @TheLarkInn](https://twitter.com/TheLarkInn) يعمل TPM في [Microsoft](https://twitter.com/MSEdgeDev)، وهو Developer Advocate وعضو في فريق webpack core.
+- [Juho Vepsäläinen - @bebraw](https://twitter.com/bebraw) من [SurviveJS](https://twitter.com/survivejs)، وعضو في فريق webpack core.
+- [Eric Clemmons - @ericclemmons](https://twitter.com/ericclemmons) يشغل منصب VP of Software Development في [HigherEdHQ](https://twitter.com/HigherEdHQ)، وهو عضو في Webpack.
+- [Patrick Stapleton - @gdi2290](https://twitter.com/gdi2290) من [AngularClass](https://angularclass.com) و[AngularAir](https://angularair.com) و[Angular Universal](https://github.com/angular/universal)، وهو عضو في Webpack.
+- [Kent C. Dodds - @kentcdodds](https://twitter.com/kentcdodds) من [PayPal Engineering](https://twitter.com/PayPalEng) و[JavaScript Air](https://twitter.com/JavaScriptAir)، وهو عضو في Webpack.
+- [Johannes Ewald - @Jhnnns](https://twitter.com/Jhnnns): عضو في فريق webpack core.
+- [Joshua Wiens - @d3viant0ne](https://twitter.com/d3viant0ne): Technical Lead لدى [EasyMetrics](https://easymetrics.com)، وعضو في Webpack.
+- [Jonathan Creamer - @jcreamer898](https://twitter.com/jcreamer898): Microsoft MVP و[Telerik](https://github.com/telerik) Developer Expert.
+- [Kees Kluskens - @keeskluskens](https://twitter.com/keeskluskens): Software Engineer لدى [Code Yellow](https://codeyellow.nl)، وعضو في فريق webpack core.
 
-## Libraries
+## المكتبات
 
 ### Loaders
 
-#### File Type
-
-- [HTML Loader](https://github.com/webpack/html-loader): HTML loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Responsive Loader](https://github.com/herrstucki/responsive-loader): Loader for responsive images. -- _Maintainer_: `Jeremy Stucki` [![Github][githubicon]](https://github.com/herrstucki)
-- [SVG Url Loader](https://github.com/bhovhannes/svg-url-loader): Loader which loads SVG file as utf-8 encoded Url. -- _Maintainer_: `Hovhannes Babayan` [![Github][githubicon]](https://github.com/bhovhannes)
-- [mermaid Loader](https://github.com/popul/mermaid-loader): [mermaid](https://github.com/mermaid-js/mermaid) loader module (diagrams) for Webpack. -- _Maintainer_: `Paul Musso` [![Github][githubicon]](https://github.com/popul)
-- [wasm loader](https://github.com/ballercat/wasm-loader): wasm binary loader module for Webpack. -- _Maintainer_: `Arthur Buldauskas` [![Github][githubicon]](https://github.com/ballercat)
-- [Imagemin Loader/Plugin](https://github.com/itgalaxy/imagemin-webpack): Image minimizing loader + plugin for webpack. -- _Maintainer_: `itgalaxy inc.` [![Github][githubicon]](https://github.com/itgalaxy)
-- [Bin Exec Loader](https://github.com/milewski/bin-exec-loader): Pipe any file through any binary. -- _Maintainer_: `Rafael Milewski` [![Github][githubicon]](https://github.com/milewski)
-- [GraphQL Loader](https://github.com/stephen/graphql-loader): `.graphql` document loader. -- _Maintainer_: `Stephen Wan` [![Github][githubicon]](https://github.com/stephen)
-
-#### Component & Template
-
-- [Angular2 Template Loader](https://github.com/TheLarkInn/angular2-template-loader): Inlines html and style's in Angular2 components. -- _Maintainer_: `Sean Larkin` [![Github][githubicon]](https://github.com/TheLarkInn) [![Twitter][twittericon]](https://twitter.com/TheLarkInn)
-- [Handlebars Loader](https://github.com/pcardune/handlebars-loader): A handlebars template loader for Webpack. -- _Maintainer_: `Paul Carduner` [![Github][githubicon]](https://github.com/pcardune) [![Twitter][twittericon]](https://twitter.com/pcardune)
-- [Vue Loader](https://github.com/vuejs/vue-loader): Webpack loader for Vue.js components. -- _Maintainer_: `Vuejs Team` [![Github][githubicon]](https://github.com/vuejs) [![Twitter][twittericon]](https://twitter.com/vuejs)
-- [SVG React Loader](https://github.com/jhamlet/svg-react-loader) - Webpack SVG to React Component Loader. -- _Maintainer_: `Jerry Hamlet` [![Github][githubicon]](https://github.com/jhamlet) [![Twitter][twittericon]](https://twitter.com/jerryhamlet)
-- [Underscore Loader](https://github.com/emaphp/underscore-template-loader) - Underscore and Lodash template loader. -- _Maintainer_: `Emmanuel Antico` [![Github][githubicon]](https://github.com/emaphp) [![Twitter][twittericon]](https://twitter.com/emaphp)
-- [ngTemplate Loader](https://github.com/WearyMonkey/ngtemplate-loader) - Angular1 Template Loader. -- _Maintainer_: `Toby Rahilly` [![Github][githubicon]](https://github.com/WearyMonkey)
-- [ngInlineStylesLoader](https://github.com/seveves/ng-inline-styles-loader): Optimizes inlined css of angular components. -- _Maintainer_: `Severin Friede` [![Github][githubicon]](https://github.com/seveves)
-- [Markup-inline Loader](https://github.com/asnowwolf/markup-inline-loader) Inline SVGs to HTML -- _Maintainer_: `Zhicheng Wang` [![Github][githubicon]](https://github.com/asnowwolf)
-- [Polymer Loader](https://github.com/webpack-contrib/polymer-webpack-loader) - Loader for Polymer elements. -- _Maintainers_: `Rob Dodson` [![Github][githubicon]](https://github.com/robdodson) - `Chad Killingsworth` [![Github][githubicon]](https://github.com/ChadKillingsworth) - `Bryan Coulter` [![Github][githubicon]](https://github.com/bryandcoulter)
-- [Tag Loader](https://github.com/riot/tag-loader) - Loader for Riot tag files. -- _Maintainer_: `Riot Team` [![Github][githubicon]](https://github.com/riot) [![Twitter][twittericon]](https://twitter.com/riotjs_)
-- [Twig Loader](https://github.com/zimmo-be/twig-loader) - Twig template loader. -- _Maintainer_: `Zimmo.be Team` [![Github][githubicon]](https://github.com/zimmo-be)
-- [Auto ngTemplate Loader](https://github.com/YashdalfTheGray/auto-ngtemplate-loader): Autodetect Angular 1 templates and load them. -- _Maintainer_: `Yash Kulshrestha` [![Github][githubicon]](https://github.com/YashdalfTheGray)
-- [Pug Loader](https://github.com/pugjs/pug-loader) - Pug template loader (formerly Jade). -- _Maintainer_: `Pug Team` [![Github][githubicon]](https://github.com/pugjs)
-- [Simple Nunjucks Loader](https://github.com/ogonkov/nunjucks-loader) - Nunjucks template loader. -- _Maintainer_: `ogonkov` [![Github][githubicon]](https://github.com/ogonkov)
-- [PWA Manifest Loader](https://github.com/autopulated/webpack-pwa-manifest-loader) - PWA manifest loader. -- _Maintainer_: `autopulated` [![Github][githubicon]](https://github.com/autopulated)
+#### نوع الملف
+
+- [HTML Loader](https://github.com/webpack/html-loader): loader لـ HTML في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Responsive Loader](https://github.com/herrstucki/responsive-loader): loader للصور المتجاوبة. -- _Maintainer_: `Jeremy Stucki` [![Github][githubicon]](https://github.com/herrstucki)
+- [SVG Url Loader](https://github.com/bhovhannes/svg-url-loader): loader يحمّل ملف SVG كـ URL بترميز utf-8. -- _Maintainer_: `Hovhannes Babayan` [![Github][githubicon]](https://github.com/bhovhannes)
+- [mermaid Loader](https://github.com/popul/mermaid-loader): loader لـ [mermaid](https://github.com/mermaid-js/mermaid)، أي الرسوم البيانية، في Webpack. -- _Maintainer_: `Paul Musso` [![Github][githubicon]](https://github.com/popul)
+- [wasm loader](https://github.com/ballercat/wasm-loader): loader لملفات wasm binary في Webpack. -- _Maintainer_: `Arthur Buldauskas` [![Github][githubicon]](https://github.com/ballercat)
+- [Imagemin Loader/Plugin](https://github.com/itgalaxy/imagemin-webpack): loader وplugin لتصغير الصور في webpack. -- _Maintainer_: `itgalaxy inc.` [![Github][githubicon]](https://github.com/itgalaxy)
+- [Bin Exec Loader](https://github.com/milewski/bin-exec-loader): يمرر أي ملف عبر أي binary. -- _Maintainer_: `Rafael Milewski` [![Github][githubicon]](https://github.com/milewski)
+- [GraphQL Loader](https://github.com/stephen/graphql-loader): loader لمستندات `.graphql`. -- _Maintainer_: `Stephen Wan` [![Github][githubicon]](https://github.com/stephen)
+
+#### Components والقوالب
+
+- [Angular2 Template Loader](https://github.com/TheLarkInn/angular2-template-loader): يضمّن html وstyles داخل Angular2 components. -- _Maintainer_: `Sean Larkin` [![Github][githubicon]](https://github.com/TheLarkInn) [![Twitter][twittericon]](https://twitter.com/TheLarkInn)
+- [Handlebars Loader](https://github.com/pcardune/handlebars-loader): loader لقوالب Handlebars في Webpack. -- _Maintainer_: `Paul Carduner` [![Github][githubicon]](https://github.com/pcardune) [![Twitter][twittericon]](https://twitter.com/pcardune)
+- [Vue Loader](https://github.com/vuejs/vue-loader): loader لـ Vue.js components في Webpack. -- _Maintainer_: `Vuejs Team` [![Github][githubicon]](https://github.com/vuejs) [![Twitter][twittericon]](https://twitter.com/vuejs)
+- [SVG React Loader](https://github.com/jhamlet/svg-react-loader) - loader يحوّل SVG إلى React Component في Webpack. -- _Maintainer_: `Jerry Hamlet` [![Github][githubicon]](https://github.com/jhamlet) [![Twitter][twittericon]](https://twitter.com/jerryhamlet)
+- [Underscore Loader](https://github.com/emaphp/underscore-template-loader) - loader لقوالب Underscore وLodash. -- _Maintainer_: `Emmanuel Antico` [![Github][githubicon]](https://github.com/emaphp) [![Twitter][twittericon]](https://twitter.com/emaphp)
+- [ngTemplate Loader](https://github.com/WearyMonkey/ngtemplate-loader) - loader لقوالب Angular1. -- _Maintainer_: `Toby Rahilly` [![Github][githubicon]](https://github.com/WearyMonkey)
+- [ngInlineStylesLoader](https://github.com/seveves/ng-inline-styles-loader): يحسّن CSS المضمّن داخل Angular components. -- _Maintainer_: `Severin Friede` [![Github][githubicon]](https://github.com/seveves)
+- [Markup-inline Loader](https://github.com/asnowwolf/markup-inline-loader) يضمّن SVG داخل HTML. -- _Maintainer_: `Zhicheng Wang` [![Github][githubicon]](https://github.com/asnowwolf)
+- [Polymer Loader](https://github.com/webpack-contrib/polymer-webpack-loader) - loader لعناصر Polymer. -- _Maintainers_: `Rob Dodson` [![Github][githubicon]](https://github.com/robdodson) - `Chad Killingsworth` [![Github][githubicon]](https://github.com/ChadKillingsworth) - `Bryan Coulter` [![Github][githubicon]](https://github.com/bryandcoulter)
+- [Tag Loader](https://github.com/riot/tag-loader) - loader لملفات Riot tag. -- _Maintainer_: `Riot Team` [![Github][githubicon]](https://github.com/riot) [![Twitter][twittericon]](https://twitter.com/riotjs_)
+- [Twig Loader](https://github.com/zimmo-be/twig-loader) - loader لقوالب Twig. -- _Maintainer_: `Zimmo.be Team` [![Github][githubicon]](https://github.com/zimmo-be)
+- [Auto ngTemplate Loader](https://github.com/YashdalfTheGray/auto-ngtemplate-loader): يكتشف قوالب Angular 1 تلقائيًا ويحمّلها. -- _Maintainer_: `Yash Kulshrestha` [![Github][githubicon]](https://github.com/YashdalfTheGray)
+- [Pug Loader](https://github.com/pugjs/pug-loader) - loader لقوالب Pug، وكانت تُعرف سابقًا باسم Jade. -- _Maintainer_: `Pug Team` [![Github][githubicon]](https://github.com/pugjs)
+- [Simple Nunjucks Loader](https://github.com/ogonkov/nunjucks-loader) - loader لقوالب Nunjucks. -- _Maintainer_: `ogonkov` [![Github][githubicon]](https://github.com/ogonkov)
+- [PWA Manifest Loader](https://github.com/autopulated/webpack-pwa-manifest-loader) - loader لملف PWA manifest. -- _Maintainer_: `autopulated` [![Github][githubicon]](https://github.com/autopulated)
 
 #### Styles
 
-- [Style Loader](https://github.com/webpack/style-loader): Style loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [PostCSS Loader](https://github.com/webpack/postcss-loader): PostCSS loader for Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS)
-- [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [SASS Loader](https://github.com/webpack/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik)
-- [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Stylus Loader](https://github.com/webpack/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
-- [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): Isomorphic CSS style loader for Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft)
-- [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
-- [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): Globally import SASS resources (variables, mixins, etc.). -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
-
-#### Language & Framework
-
-- [TS Loader](https://github.com/TypeStrong/ts-loader): TypeScript loader for webpack. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
-- [Coffee Loader](https://github.com/webpack/coffee-loader): Coffee loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Bootstrap Loader](https://github.com/shakacode/bootstrap-loader): Load Bootstrap styles in your Webpack bundle. -- _Maintainer_: `ShakaCode Team` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
-- [PostHTML Loader](https://github.com/posthtml/posthtml-loader): PostHTML loader for Webpack. -- _Maintainer_: `PostHTML Team` [![Github][githubicon]](https://github.com/posthtml) [![Twitter][twittericon]](https://twitter.com/PostHTML)
-- [ELM Loader](https://github.com/rtfeldman/elm-webpack-loader): Webpack loader for the Elm programming language. -- _Maintainer_: `Richard Feldman` [![Github][githubicon]](https://github.com/rtfeldman) [![Twitter][twittericon]](https://twitter.com/rtfeldman)
-- [Fengari Loader](https://github.com/fengari-lua/fengari-loader/): Run Lua code using [Fengari](https://fengari.io). -- _Maintainer_: `Daurnimator` [![Github][githubicon]](https://github.com/daurnimator) [![Twitter][twittericon]](https://twitter.com/daurnimator)
-
-#### Utility
-
-- [Babel Loader](https://github.com/babel/babel-loader): Webpack plugin for Babel. -- _Maintainer_: `Babel Team` [![Github][githubicon]](https://github.com/babel) [![Twitter][twittericon]](https://twitter.com/babel)
-- [Worker Loader](https://github.com/webpack/worker-loader): Worker loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): Resolves relative paths in url() statements. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway)
-- [Import Loader](https://github.com/webpack/imports-loader): Imports loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - Converts a loaders array into a single loader string. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf)
-- [Icon Font Loader](https://github.com/vusion/icon-font-loader) - Converts svgs into font icons in CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore)
-- [Icons Loader](https://www.npmjs.com/package/icons-loader) - Generates an iconfont from SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen)
-- [Modernizr Loader](https://www.npmjs.com/package/modernizr-loader) - Get your modernizr build bundled with webpack. -- _Maintainer_: `Peerigon Devs` [![Github][githubicon]](https://github.com/peerigon)
-- [ngRouter Loader](https://github.com/shlomiassaf/ng-router-loader) - AOT capable NgModule lazy loading using angular router -- _Maintainer_: `Shlomi Assaf` [![Github][githubicon]](https://github.com/shlomiassaf) [![Twitter][twittericon]](https://twitter.com/shlomiassaf)
-- [Lingui Loader](https://github.com/lingui/js-lingui/tree/master/packages/loader) - Compile message catalogs on the fly for jsLingui, i18n library -- _Maintainer_: `Tomáš Ehrlich` [![Github][githubicon]](https://github.com/tricoder42) [![Twitter][twittericon]](https://twitter.com/tomas_ehrlich)
-- [Shell Loader](https://github.com/localjo/shell-loader) - Run an arbitrary shell script on source files. -- _Maintainer_: `Jo Sprague` [![Github][githubicon]](https://github.com/localjo)
-- [EXIF Loader](https://github.com/herschel666/exif-loader) - Extract EXIF- & IPTC-data from your JPGs during build-time. -- _Maintainer_: `Emanuel Kluge` [![Github][githubicon]](https://github.com/herschel666/exif-loader) [![Twitter][twittericon]](https://twitter.com/herschel_r)
-- [esbuild Loader](https://github.com/privatenumber/esbuild-loader) - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by [esbuild](https://github.com/evanw/esbuild). -- _Maintainer_: `Hiroki Osame` [![Github][githubicon]](https://github.com/privatenumber/esbuild-loader) [![Twitter][twittericon]](https://twitter.com/privatenumbr)
-
-#### Testing
-
-- [Karma Webpack](https://github.com/webpack/karma-webpack): Use Karma with Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Istanbul Webpack plugin](https://github.com/DxCx/webpack-istanbul-plugin): Use Istanbul instrumenter for the whole pack. -- _Maintainer_: `Hagai Cohen` [![Github][githubicon]](https://github.com/DxCx)
-
-### Integration Libraries
-
-- [Dotenv Webpack](https://github.com/mrsteele/dotenv-webpack): Compiles environment variables into your bundle via dotenv. -- _Maintainer_: `Matthew Steele` [![Github][githubicon]](https://github.com/mrsteele) [![Twitter][twittericon]](https://twitter.com/Matt_R_Steele)
-- [Terse Webpack](https://github.com/ericclemmons/terse-webpack) - Webpack simplified in a fluent API with presets. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
-- [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - Webpack bundling for SystemJS. -- _Maintainer_: `Guy Bedford` [![Github][githubicon]](https://github.com/guybedford) [![Twitter][twittericon]](https://twitter.com/guybedford)
-- [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - Run webpack through a stream interface. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
-- [Webpack Blocks](https://github.com/andywer/webpack-blocks) - Configure webpack using functional feature blocks. -- _Maintainer_: `Andy Wermke` [![Github][githubicon]](https://github.com/andywer) [![Twitter][twittericon]](https://twitter.com/andywritescode)
-- [Webpacker](https://github.com/rails/webpacker) - Official webpack gem for integration into ruby on rails projects. -- _Maintainer_: `Rails` [![Github][githubicon]](https://github.com/rails)
-- [WebpackAspnetMiddleware](https://github.com/frankwallis/WebpackAspnetMiddleware) - Development middleware for ASP.NET 5. -- _Maintainer_: `Frank Wallis` [![Github][githubicon]](https://github.com/frankwallis)
-- [Consul Key/Value Webpack](https://github.com/marlonmleite/consul-env-webpack-plugin): Compiles environment variables into your bundle via [Consul KV-store](https://www.consul.io/api/kv.html). -- _Maintainer_: `Marlon Maxwel` [![Github][githubicon]](https://github.com/marlonmleite)
+- [Style Loader](https://github.com/webpack/style-loader): loader للـ styles في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [PostCSS Loader](https://github.com/webpack/postcss-loader): loader لـ PostCSS في Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS)
+- [CSS Loader](https://github.com/webpack/css-loader): loader لـ CSS في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [SASS Loader](https://github.com/webpack/sass-loader): loader لـ SASS في Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik)
+- [Less Loader](https://github.com/webpack/less-loader): loader لـ Less في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Stylus Loader](https://github.com/webpack/stylus-loader): loader لـ Stylus في webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
+- [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): loader لـ CSS style بنمط isomorphic في Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft)
+- [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): loader يعتمد على RegExp لتصغير CSS-in-JS في Webpack بدون الحاجة إلى babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
+- [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): يستورد SASS resources، مثل variables وmixins، بشكل عام. -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
+
+#### اللغة وأطر العمل
+
+- [TS Loader](https://github.com/TypeStrong/ts-loader): loader لـ TypeScript في webpack. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
+- [Coffee Loader](https://github.com/webpack/coffee-loader): loader لـ Coffee في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Bootstrap Loader](https://github.com/shakacode/bootstrap-loader): يحمّل Bootstrap styles داخل Webpack bundle. -- _Maintainer_: `ShakaCode Team` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
+- [PostHTML Loader](https://github.com/posthtml/posthtml-loader): loader لـ PostHTML في Webpack. -- _Maintainer_: `PostHTML Team` [![Github][githubicon]](https://github.com/posthtml) [![Twitter][twittericon]](https://twitter.com/PostHTML)
+- [ELM Loader](https://github.com/rtfeldman/elm-webpack-loader): loader في Webpack للغة Elm. -- _Maintainer_: `Richard Feldman` [![Github][githubicon]](https://github.com/rtfeldman) [![Twitter][twittericon]](https://twitter.com/rtfeldman)
+- [Fengari Loader](https://github.com/fengari-lua/fengari-loader/): يشغّل كود Lua باستخدام [Fengari](https://fengari.io). -- _Maintainer_: `Daurnimator` [![Github][githubicon]](https://github.com/daurnimator) [![Twitter][twittericon]](https://twitter.com/daurnimator)
+
+#### أدوات مساعدة
+
+- [Babel Loader](https://github.com/babel/babel-loader): تكامل Babel مع Webpack عبر loader. -- _Maintainer_: `Babel Team` [![Github][githubicon]](https://github.com/babel) [![Twitter][twittericon]](https://twitter.com/babel)
+- [Worker Loader](https://github.com/webpack/worker-loader): loader لـ Worker في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): يحل المسارات النسبية داخل عبارات `url()`. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway)
+- [Import Loader](https://github.com/webpack/imports-loader): loader لإضافة imports في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - يحوّل array من loaders إلى نص loader واحد. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf)
+- [Icon Font Loader](https://github.com/vusion/icon-font-loader) - يحوّل SVGs إلى font icons داخل CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore)
+- [Icons Loader](https://www.npmjs.com/package/icons-loader) - يولّد iconfont من SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen)
+- [Modernizr Loader](https://www.npmjs.com/package/modernizr-loader) - يضمّن build الخاص بـ modernizr مع webpack. -- _Maintainer_: `Peerigon Devs` [![Github][githubicon]](https://github.com/peerigon)
+- [ngRouter Loader](https://github.com/shlomiassaf/ng-router-loader) - يتيح lazy loading لـ NgModule عبر angular router مع دعم AOT. -- _Maintainer_: `Shlomi Assaf` [![Github][githubicon]](https://github.com/shlomiassaf) [![Twitter][twittericon]](https://twitter.com/shlomiassaf)
+- [Lingui Loader](https://github.com/lingui/js-lingui/tree/master/packages/loader) - يجمّع message catalogs أثناء التشغيل لـ jsLingui، وهي مكتبة i18n. -- _Maintainer_: `Tomáš Ehrlich` [![Github][githubicon]](https://github.com/tricoder42) [![Twitter][twittericon]](https://twitter.com/tomas_ehrlich)
+- [Shell Loader](https://github.com/localjo/shell-loader) - يشغّل أي shell script على ملفات المصدر. -- _Maintainer_: `Jo Sprague` [![Github][githubicon]](https://github.com/localjo)
+- [EXIF Loader](https://github.com/herschel666/exif-loader) - يستخرج بيانات EXIF وIPTC من ملفات JPG أثناء build. -- _Maintainer_: `Emanuel Kluge` [![Github][githubicon]](https://github.com/herschel666/exif-loader) [![Twitter][twittericon]](https://twitter.com/herschel_r)
+- [esbuild Loader](https://github.com/privatenumber/esbuild-loader) - بديل سريع جدًا لـ babel-loader وts-loader وTerser، مدعوم بـ [esbuild](https://github.com/evanw/esbuild). -- _Maintainer_: `Hiroki Osame` [![Github][githubicon]](https://github.com/privatenumber/esbuild-loader) [![Twitter][twittericon]](https://twitter.com/privatenumbr)
+
+#### الاختبار
+
+- [Karma Webpack](https://github.com/webpack/karma-webpack): استخدام Karma مع Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Istanbul Webpack plugin](https://github.com/DxCx/webpack-istanbul-plugin): استخدام Istanbul instrumenter على الحزمة كلها. -- _Maintainer_: `Hagai Cohen` [![Github][githubicon]](https://github.com/DxCx)
+
+### مكتبات التكامل
+
+- [Dotenv Webpack](https://github.com/mrsteele/dotenv-webpack): يضمّن environment variables داخل bundle عبر dotenv. -- _Maintainer_: `Matthew Steele` [![Github][githubicon]](https://github.com/mrsteele) [![Twitter][twittericon]](https://twitter.com/Matt_R_Steele)
+- [Terse Webpack](https://github.com/ericclemmons/terse-webpack) - تبسيط Webpack عبر fluent API مع presets. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
+- [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - تحزيم Webpack لـ SystemJS. -- _Maintainer_: `Guy Bedford` [![Github][githubicon]](https://github.com/guybedford) [![Twitter][twittericon]](https://twitter.com/guybedford)
+- [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - تشغيل webpack عبر stream interface. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
+- [Webpack Blocks](https://github.com/andywer/webpack-blocks) - إعداد webpack باستخدام functional feature blocks. -- _Maintainer_: `Andy Wermke` [![Github][githubicon]](https://github.com/andywer) [![Twitter][twittericon]](https://twitter.com/andywritescode)
+- [Webpacker](https://github.com/rails/webpacker) - gem رسمية لـ webpack للتكامل مع مشاريع Ruby on Rails. -- _Maintainer_: `Rails` [![Github][githubicon]](https://github.com/rails)
+- [WebpackAspnetMiddleware](https://github.com/frankwallis/WebpackAspnetMiddleware) - middleware للتطوير في ASP.NET 5. -- _Maintainer_: `Frank Wallis` [![Github][githubicon]](https://github.com/frankwallis)
+- [Consul Key/Value Webpack](https://github.com/marlonmleite/consul-env-webpack-plugin): يضمّن environment variables داخل bundle عبر [Consul KV-store](https://www.consul.io/api/kv.html). -- _Maintainer_: `Marlon Maxwel` [![Github][githubicon]](https://github.com/marlonmleite)
 
 ### Webpack Plugins
 
-- [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): Create global constants which can be configured at compile time. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): Prepare assets to serve with Content-Encoding. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Offline Plugin](https://github.com/NekR/offline-plugin): Offline plugin (ServiceWorker, AppCache) for Webpack. -- _Maintainer_: `Arthur Stolyar` [![Github][githubicon]](https://github.com/NekR) [![Twitter][twittericon]](https://twitter.com/nekrtemplar)
-- [Rewire Plugin](https://github.com/jhnns/rewire-webpack): Dependency injection for Webpack bundles. -- _Maintainer_: `Johannes Ewald` [![Github][githubicon]](https://github.com/jhnns) [![Twitter][twittericon]](https://twitter.com/Jhnnns)
-- [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): Simplifies creation of HTML files. -- _Maintainer_: `Jan Nicklas` [![Github][githubicon]](https://github.com/jantimon) [![Twitter][twittericon]](https://twitter.com/jantimon)
-- [Copy Webpack Plugin](https://github.com/webpack/copy-webpack-plugin): Copy files and directories in webpack. -- _Maintainer_: `Len Boyette` [![Github][githubicon]](https://github.com/kevlened) [![Twitter][twittericon]](https://twitter.com/kevlened)
-- [Split By Path](https://github.com/BohdanTkachenko/webpack-split-by-path): Split By Path Webpack Plugin. -- _Maintainer_: `Bohdan Tkachenko` [![Github][githubicon]](https://github.com/BohdanTkachenko) [![Twitter][twittericon]](https://twitter.com/bohdantkachenko)
-- [SW Precache](https://github.com/goldhand/sw-precache-webpack-plugin) - Generates a service worker to precache bundle. -- _Maintainer_: `Will Farley` [![Github][githubicon]](https://github.com/goldhand)
-- [CoreJS Plugin](https://github.com/gdi2290/core-js-webpack-plugin) - Core-JS as a webpack plugin. -- _Maintainer_: `PatrickJS` [![Github][githubicon]](https://github.com/gdi2290)
-- [Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer) - Utility that represents bundles as an interactive treemap. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r)
-- [Module Mapping](https://github.com/spartez/module-mapping-webpack-plugin) - Maps modules onto different files. -- _Maintainer_: `Spartez Team` [![Github][githubicon]](https://github.com/spartez) [![Twitter][twittericon]](https://twitter.com/thisisspartez)
-- [Serverless Webpack](https://github.com/elastic-coders/serverless-webpack) - Serverless plugin to bundle your lambdas. -- _Maintainer_: `Elastic Coders` [![Github][githubicon]](https://github.com/elastic-coders) [![Twitter][twittericon]](https://twitter.com/ElasticCoders)
-- [Prerender SPA](https://github.com/chrisvfritz/prerender-spa-plugin) - Framework-agnostic static site generation for SPAs. -- _Maintainer_: `Chris Fritz` [![Github][githubicon]](https://github.com/chrisvfritz) [![Twitter][twittericon]](https://twitter.com/chrisvfritz)
-- [Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) - Minimal, unopinionated static site generator. -- _Maintainer_: `Mark Dalgleish` [![Github][githubicon]](https://github.com/markdalgleish)
-- [SVG Sprite Plugin](https://github.com/TodayTix/svg-sprite-webpack-plugin) - Plugin for SVG sprites and icons. -- _Maintainer_: `Jeremy Tice` ([`TodayTix`](https://github.com/TodayTix)) [![Github][githubicon]](https://github.com/jetpacmonkey) [![Twitter][twittericon]](https://twitter.com/jetpacmonkey)
-- [Imagemin Webpack Plugin](https://github.com/Klathmon/imagemin-webpack-plugin) - Minify images with Imagemin. -- _Maintainer_: `Gregory Benner` [![Github][githubicon]](https://github.com/Klathmon) [![Twitter][twittericon]](https://twitter.com/Klathmon)
-- [Prepack Webpack Plugin](https://github.com/gajus/prepack-webpack-plugin) - A webpack plugin for prepack. -- _Maintainer_: `Gajus Kuizinas` [![Github][githubicon]](https://github.com/gajus)
-- [Modules CDN Webpack Plugin](https://github.com/mastilver/modules-cdn-webpack-plugin) - Dynamically load your modules from a CDN. -- _Maintainer_: `Thomas Sileghem` [![Github][githubicon]](https://github.com/mastilver)
-- [Generate package.json Plugin](https://github.com/lostpebble/generate-package-json-webpack-plugin) - Limit dependencies in a deployment `package.json` to only those that are actually being used by your bundle. -- _Maintainer_: `Paul Myburgh` [![Github][githubicon]](https://github.com/lostpebble)
-- [Progressive Web App Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest) - PWA manifest manager and generator. -- _Maintainer_: `Arthur A. Bergamaschi` [![Github][githubicon]](https://github.com/arthurbergmz)
-- [FileManager Webpack Plugin](https://github.com/gregnb/filemanager-webpack-plugin) - Copy, move, delete files and directories before and after Webpack builds -- _Maintainer_: `Gregory Nowakowski` [![Github][githubicon]](https://github.com/gregnb)
-- [Fork TS Checker Webpack Plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) - Webpack plugin that runs typescript type checker on a separate process. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
-- [Duplicate Package Checker Webpack Plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) - Warns you when multiple versions of the same package exist in your bundle -- _Maintainer_: `Darren Scerri` [![Github][githubicon]](https://github.com/darrenscerri)
-- [Circular Dependency Plugin](https://github.com/aackerman/circular-dependency-plugin) - Detect modules with circular dependencies when bundling -- _Maintainer_: `Aaron Ackerman` [![Github][githubicon]](https://github.com/aackerman)
-- [webpack-inject-plugin](https://github.com/adierkens/webpack-inject-plugin) - A webpack plugin to dynamically inject code into the bundle. -- _Maintainer_: `Adam Dierkens` [![Github][githubicon]](https://github.com/adierkens)
-- [Public Path Manipulation Plugin](https://github.com/agoldis/webpack-require-from) - control `publicPath` of dynamically loaded resources at runtime -- _Maintainer_: `Andrew Goldis` [![Github][githubicon]](https://github.com/agoldis)
-- [Build Notifier Plugin](https://github.com/roccoc/webpack-build-notifier) - Display OS-level notifications for build errors and warnings. -- _Maintainer_: `Rocco Cataldo` [![Github][githubicon]](https://github.com/roccoc)
-- [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - A plugin to remove duplicated and unused css rules -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web)
-- [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - Hot reloading while developing browser extensions -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc)
-- [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): Simple and fast multiple-htmls-generating plugin for webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
+- [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): ينشئ ثوابت global يمكن ضبطها وقت compile. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): يجهز assets لتقديمها مع Content-Encoding. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Offline Plugin](https://github.com/NekR/offline-plugin): plugin للعمل offline، ويشمل ServiceWorker وAppCache، في Webpack. -- _Maintainer_: `Arthur Stolyar` [![Github][githubicon]](https://github.com/NekR) [![Twitter][twittericon]](https://twitter.com/nekrtemplar)
+- [Rewire Plugin](https://github.com/jhnns/rewire-webpack): dependency injection داخل Webpack bundles. -- _Maintainer_: `Johannes Ewald` [![Github][githubicon]](https://github.com/jhnns) [![Twitter][twittericon]](https://twitter.com/Jhnnns)
+- [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): يبسّط إنشاء ملفات HTML. -- _Maintainer_: `Jan Nicklas` [![Github][githubicon]](https://github.com/jantimon) [![Twitter][twittericon]](https://twitter.com/jantimon)
+- [Copy Webpack Plugin](https://github.com/webpack/copy-webpack-plugin): ينسخ الملفات والمجلدات في webpack. -- _Maintainer_: `Len Boyette` [![Github][githubicon]](https://github.com/kevlened) [![Twitter][twittericon]](https://twitter.com/kevlened)
+- [Split By Path](https://github.com/BohdanTkachenko/webpack-split-by-path): plugin لتقسيم Webpack حسب المسار. -- _Maintainer_: `Bohdan Tkachenko` [![Github][githubicon]](https://github.com/BohdanTkachenko) [![Twitter][twittericon]](https://twitter.com/bohdantkachenko)
+- [SW Precache](https://github.com/goldhand/sw-precache-webpack-plugin) - يولّد service worker لعمل precache للـ bundle. -- _Maintainer_: `Will Farley` [![Github][githubicon]](https://github.com/goldhand)
+- [CoreJS Plugin](https://github.com/gdi2290/core-js-webpack-plugin) - Core-JS كـ webpack plugin. -- _Maintainer_: `PatrickJS` [![Github][githubicon]](https://github.com/gdi2290)
+- [Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer) - أداة تعرض bundles على شكل treemap تفاعلية. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r)
+- [Module Mapping](https://github.com/spartez/module-mapping-webpack-plugin) - يربط modules بملفات مختلفة. -- _Maintainer_: `Spartez Team` [![Github][githubicon]](https://github.com/spartez) [![Twitter][twittericon]](https://twitter.com/thisisspartez)
+- [Serverless Webpack](https://github.com/elastic-coders/serverless-webpack) - plugin لـ Serverless لتحزيم lambdas. -- _Maintainer_: `Elastic Coders` [![Github][githubicon]](https://github.com/elastic-coders) [![Twitter][twittericon]](https://twitter.com/ElasticCoders)
+- [Prerender SPA](https://github.com/chrisvfritz/prerender-spa-plugin) - توليد static site لـ SPAs بدون ارتباط بإطار معين. -- _Maintainer_: `Chris Fritz` [![Github][githubicon]](https://github.com/chrisvfritz) [![Twitter][twittericon]](https://twitter.com/chrisvfritz)
+- [Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) - مولّد static site بسيط وبدون فرض آراء كثيرة. -- _Maintainer_: `Mark Dalgleish` [![Github][githubicon]](https://github.com/markdalgleish)
+- [SVG Sprite Plugin](https://github.com/TodayTix/svg-sprite-webpack-plugin) - plugin لـ SVG sprites والأيقونات. -- _Maintainer_: `Jeremy Tice` ([`TodayTix`](https://github.com/TodayTix)) [![Github][githubicon]](https://github.com/jetpacmonkey) [![Twitter][twittericon]](https://twitter.com/jetpacmonkey)
+- [Imagemin Webpack Plugin](https://github.com/Klathmon/imagemin-webpack-plugin) - يصغّر الصور باستخدام Imagemin. -- _Maintainer_: `Gregory Benner` [![Github][githubicon]](https://github.com/Klathmon) [![Twitter][twittericon]](https://twitter.com/Klathmon)
+- [Prepack Webpack Plugin](https://github.com/gajus/prepack-webpack-plugin) - webpack plugin لـ prepack. -- _Maintainer_: `Gajus Kuizinas` [![Github][githubicon]](https://github.com/gajus)
+- [Modules CDN Webpack Plugin](https://github.com/mastilver/modules-cdn-webpack-plugin) - يحمّل modules ديناميكيًا من CDN. -- _Maintainer_: `Thomas Sileghem` [![Github][githubicon]](https://github.com/mastilver)
+- [Generate package.json Plugin](https://github.com/lostpebble/generate-package-json-webpack-plugin) - يحد dependencies في `package.json` الخاص بالنشر إلى التي يستخدمها bundle فعليًا فقط. -- _Maintainer_: `Paul Myburgh` [![Github][githubicon]](https://github.com/lostpebble)
+- [Progressive Web App Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest) - مدير ومولّد PWA manifest. -- _Maintainer_: `Arthur A. Bergamaschi` [![Github][githubicon]](https://github.com/arthurbergmz)
+- [FileManager Webpack Plugin](https://github.com/gregnb/filemanager-webpack-plugin) - ينسخ وينقل ويحذف الملفات والمجلدات قبل وبعد Webpack builds. -- _Maintainer_: `Gregory Nowakowski` [![Github][githubicon]](https://github.com/gregnb)
+- [Fork TS Checker Webpack Plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) - webpack plugin يشغّل TypeScript type checker في process منفصلة. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
+- [Duplicate Package Checker Webpack Plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) - يحذرك عند وجود عدة إصدارات من الحزمة نفسها داخل bundle. -- _Maintainer_: `Darren Scerri` [![Github][githubicon]](https://github.com/darrenscerri)
+- [Circular Dependency Plugin](https://github.com/aackerman/circular-dependency-plugin) - يكتشف modules ذات circular dependencies أثناء bundling. -- _Maintainer_: `Aaron Ackerman` [![Github][githubicon]](https://github.com/aackerman)
+- [webpack-inject-plugin](https://github.com/adierkens/webpack-inject-plugin) - webpack plugin لحقن الكود ديناميكيًا داخل bundle. -- _Maintainer_: `Adam Dierkens` [![Github][githubicon]](https://github.com/adierkens)
+- [Public Path Manipulation Plugin](https://github.com/agoldis/webpack-require-from) - يتحكم في `publicPath` للموارد التي تُحمّل ديناميكيًا وقت runtime. -- _Maintainer_: `Andrew Goldis` [![Github][githubicon]](https://github.com/agoldis)
+- [Build Notifier Plugin](https://github.com/roccoc/webpack-build-notifier) - يعرض إشعارات على مستوى نظام التشغيل لأخطاء وتحذيرات build. -- _Maintainer_: `Rocco Cataldo` [![Github][githubicon]](https://github.com/roccoc)
+- [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - plugin لإزالة قواعد CSS المكررة وغير المستخدمة. -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web)
+- [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - hot reloading أثناء تطوير browser extensions. -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc)
+- [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): plugin بسيط وسريع لتوليد عدة ملفات HTML في webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
 - [Mini css extract plugin](https://github.com/webpack/mini-css-extract-plugin):
-  Lightweight CSS extraction plugin -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib)
-- [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda)
-- [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - run any shell commands before or after webpack builds -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne)
-- [Dynamic Vendor Webpack Plugin](https://github.com/bios21/dynamic-vendor-webpack-plugin) - Gives you a way to import vendors with dynamic variable and specific code splitting. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
-- [Define Variable Webpack Plugin](https://github.com/bios21/define-variable-webpack-plugin) - Enhancement of DefinePlugin to store defined things in actual variables. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
-- [Shell Script Webpack Plugin](https://github.com/drewloomer/hook-shell-script-webpack-plugin) - A plugin for running arbitrary shell scripts when [compiler hooks](https://webpack.js.org/api/compiler-hooks/) are triggered. -- _Maintainer_ `Drew Loomer` [![Github][githubicon]](https://github.com/drewloomer) [![Twitter][twittericon]](https://twitter.com/drewloomer)
-- [Stylelint Webpack Plugin](https://github.com/webpack/stylelint-webpack-plugin): A Stylelint plugin for webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
-- [ESLint Webpack Plugin](https://github.com/webpack-contrib/eslint-webpack-plugin): A ESLint plugin for webpack
-  . -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
-- [Exclude Assets Webpack Plugin](https://github.com/klaytonfaria/webpack-exclude-assets-plugin): A plugin to exclude assets from webpack output based on a path RegExp pattern. -- _Maintainer_: `Klayton Faria` [![Github][githubicon]](https://github.com/klaytonfaria)
-- [Webpack Shell Plugin Next](https://github.com/s00d/webpack-shell-plugin-next): A plugin allows you to run any shell commands before or after webpack builds. -- _Maintainer_: `Kuzmin Pavel` [![Github][githubicon]](https://github.com/s00d)
-- [Gettext Webpack Plugin](https://github.com/juanluispaz/gettext-webpack-plugin): Embed localization into your bundle using gettext. -- _Maintainer_: `Juan Luis Paz` [![Github][githubicon]](https://github.com/juanluispaz)
-- [Node Polyfill Plugin](https://github.com/Richienb/node-polyfill-webpack-plugin): Polyfill Node.js core modules. -- _Maintainer_: `Richie Bendall` [![Github][githubicon]](https://github.com/Richienb) [![Twitter][twittericon]](https://twitter.com/Richienb2)
-- [Bytenode Plugin](https://github.com/herberttn/bytenode-webpack-plugin): Compile JavaScript into bytecode using bytenode. -- _Maintainer_: `Herbert Treis Neto` [![Github][githubicon]](https://github.com/herberttn)
-- [Chrome Extension Archive Webpack Plugin](https://github.com/KeisukeYamashita/chrome-extension-archive-webpack-plugin): Create archive file to publish Chrome Extensions to Chrome Web Store. -- _Maintainer_: `KeisukeYamashita` [![Github][githubicon]](https://github.com/KeisukeYamashita)
-- [Layer-pack Webpack Plugin](https://github.com/layer-pack/layer-pack) Allow to glob imports file & directories, build mono repo apps via inheritable source code / npm packages & share webpack configs -- _Maintainer_: `Braun Nathanaël` [![Github][githubicon]](https://github.com/N8tz)
-- [webpack-typescript-directory-compile-plugin](https://github.com/ssigwart/webpack-typescript-directory-compile-plugin) Configure an source directory of typescript files and an output directory for JavaScript files. Each typescript file in the source directory and any newly added files will be compiled to individual JavaScript files. -- _Maintainer_: `Stephen Sigwart` [![Github][githubicon]](https://github.com/ssigwart)
-- [CycloneDX Webpack Plugin](https://github.com/CycloneDX/cyclonedx-webpack-plugin#readme): Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- _Maintainer_: `OWASP CycloneDX Team` [![Github][githubicon]](https://github.com/CycloneDX)
-- [Transpile Webpack Plugin](https://github.com/licg9999/transpile-webpack-plugin#readme): Transpiles input files into output files individually without bundling together. -- _Maintainer_: `Chungen Li` [![Github][githubicon]](https://github.com/licg9999) [![Twitter][twittericon]](https://twitter.com/licg9999)
-- [Manifest Extraction Plugin](https://github.com/shellscape/webpack-manifest-plugin): Generates an asset manifest after compiling webpack. -- _Maintainer_: `Andrew Powell` [![Github][githubicon]](https://github.com/shellscape)
-- [Transform Async Modules Plugin](https://github.com/steverep/transform-async-modules-webpack-plugin): A Webpack plugin to transpile async module output using Babel. Allows transpiling top level await to ES5. -- _Maintainer_: `Steve Repsher` [![Github][githubicon]](https://github.com/steverep)
-- [CSS Layering Plugin](https://github.com/kburich/css-layering-webpack-plugin): Wrap CSS in cascade layers. -- _Maintainer_: `Kresimir Buric` [![Github][githubicon]](https://github.com/kburich)
-
-### Webpack Tools
-
-- [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): Middleware which arguments a live bundle. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server): Serves a webpack app. Updates the browser on changes. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Webpack Merge](https://github.com/survivejs/webpack-merge) - Merge designed for Webpack. -- _Maintainer_: `Juho Vepsäläinen` [![Github][githubicon]](https://github.com/bebraw) [![Twitter][twittericon]](https://twitter.com/bebraw)
-- [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - Automatically install & save deps with Webpack. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
-- [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - Validates your webpack config with Joi. -- _Maintainer_: `js-dxtools Team` [![Github][githubicon]](https://github.com/js-dxtools)
-- [Webpack Config Utils](https://github.com/kentcdodds/webpack-config-utils) - Util. to make your webpack config easier to read. -- _Maintainer_: `Kent C. Dodds` [![Github][githubicon]](https://github.com/kentcdodds) [![Twitter][twittericon]](https://twitter.com/kentcdodds)
-- [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - Webpack tools and helpers for Angular 2. -- _Maintainer_: `AngularClass` [![Github][githubicon]](https://github.com/AngularClass) [![Twitter][twittericon]](https://twitter.com/AngularClass)
-- [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer) - Represents bundles as an interactive treemap. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r) [![Twitter][twittericon]](https://twitter.com/grunin_ya)
-- [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): Helpers/presets for setting up webpack with hotloading. -- _Maintainer_: `Henrik Joreteg` [![Github][githubicon]](https://github.com/HenrikJoreteg)
-- [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard): A CLI dashboard for webpack dev server. -- _Maintainer_: `Formidable Labs` [![Github][githubicon]](https://github.com/FormidableLabs)
-- [Neutrino](https://github.com/mozilla-neutrino/neutrino-dev): Combines the power of Webpack with the simplicity of presets. -- _Maintainer_: `Eli Perelman` [![Github][githubicon]](https://github.com/eliperelman)
-- [Speed Measure Plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) - Measures the speed of your webpack plugins and loaders. -- _Maintainer_: `Stephen Cook` [![Github][githubicon]](https://github.com/stephencookdev)
-- [Time Analytics Plugin](https://github.com/ShuiRuTian/time-analytics-webpack-plugin) - Analytics the time cost of loaders and plugins in webpack. Successor of Speed Measure Plugin -- _Maintainer_: `Song Gao` [![Github][githubicon]](https://github.com/ShuiRuTian)
-- [packtracker.io](https://packtracker.io/?utm_source=github&utm_medium=awesome-webpack&utm_campaign=social) - Webpack bundle analysis on every commit, report webpack stats to every pull request.
-- [BundleStats](https://github.com/relative-ci/bundle-stats): Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds. -- _Maintainer_: `Vio` [![Github][githubicon]](https://github.com/vio) [![Twitter][twittericon]](https://twitter.com/vio)
-- [Webpack Landing Generator](https://github.com/kuncevic/webpack-landing-generator): Easy way to create landing page that converts. -- _Maintainer_: `Aliaksei Kuncevic` [![Github][githubicon]](https://github.com/kuncevic) [![Twitter][twittericon]](https://twitter.com/kuncevic)
-- [Webpack Dev Server Firewall](https://github.com/funbox/webpack-dev-server-firewall): Prevents access to dev server from unknown IPs. -- _Maintainer_: `Igor Adamenko` [![Github][githubicon]](https://github.com/igoradamenko) [![Twitter][twittericon]](https://twitter.com/igoradamenko)
-- [RelativeCI](https://relative-ci.com): Run in-depth bundle analyses on every build and monitor webpack bundle size, assets, modules, and packages. [![Github][githubicon]](https://github.com/relative-ci)
-
-## Research & Training
-
-### Articles
+  plugin خفيف لاستخراج CSS. -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib)
+- [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) يولّد Webpack لكل build hash داخل الذاكرة لمعرفة هل مخرجات build متطابقة أم لا. يكتب هذا plugin ذلك hash في ملف json منفصل. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda)
+- [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - يشغّل أي shell commands قبل أو بعد webpack builds. -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne)
+- [Dynamic Vendor Webpack Plugin](https://github.com/bios21/dynamic-vendor-webpack-plugin) - يوفر طريقة لاستيراد vendors بمتغير ديناميكي وcode splitting محدد. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
+- [Define Variable Webpack Plugin](https://github.com/bios21/define-variable-webpack-plugin) - تحسين لـ DefinePlugin لتخزين الأشياء المعرّفة داخل متغيرات فعلية. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
+- [Shell Script Webpack Plugin](https://github.com/drewloomer/hook-shell-script-webpack-plugin) - plugin لتشغيل shell scripts عشوائية عند تشغيل [compiler hooks](https://webpack.js.org/api/compiler-hooks/). -- _Maintainer_ `Drew Loomer` [![Github][githubicon]](https://github.com/drewloomer) [![Twitter][twittericon]](https://twitter.com/drewloomer)
+- [Stylelint Webpack Plugin](https://github.com/webpack/stylelint-webpack-plugin): plugin لـ Stylelint في webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
+- [ESLint Webpack Plugin](https://github.com/webpack-contrib/eslint-webpack-plugin): plugin لـ ESLint في webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
+- [Exclude Assets Webpack Plugin](https://github.com/klaytonfaria/webpack-exclude-assets-plugin): plugin لاستبعاد assets من output الخاص بـ webpack بناءً على path RegExp pattern. -- _Maintainer_: `Klayton Faria` [![Github][githubicon]](https://github.com/klaytonfaria)
+- [Webpack Shell Plugin Next](https://github.com/s00d/webpack-shell-plugin-next): plugin يسمح بتشغيل أي shell commands قبل أو بعد webpack builds. -- _Maintainer_: `Kuzmin Pavel` [![Github][githubicon]](https://github.com/s00d)
+- [Gettext Webpack Plugin](https://github.com/juanluispaz/gettext-webpack-plugin): يضمّن localization داخل bundle باستخدام gettext. -- _Maintainer_: `Juan Luis Paz` [![Github][githubicon]](https://github.com/juanluispaz)
+- [Node Polyfill Plugin](https://github.com/Richienb/node-polyfill-webpack-plugin): يضيف polyfill لـ Node.js core modules. -- _Maintainer_: `Richie Bendall` [![Github][githubicon]](https://github.com/Richienb) [![Twitter][twittericon]](https://twitter.com/Richienb2)
+- [Bytenode Plugin](https://github.com/herberttn/bytenode-webpack-plugin): يجمّع JavaScript إلى bytecode باستخدام bytenode. -- _Maintainer_: `Herbert Treis Neto` [![Github][githubicon]](https://github.com/herberttn)
+- [Chrome Extension Archive Webpack Plugin](https://github.com/KeisukeYamashita/chrome-extension-archive-webpack-plugin): ينشئ archive file لنشر Chrome Extensions على Chrome Web Store. -- _Maintainer_: `KeisukeYamashita` [![Github][githubicon]](https://github.com/KeisukeYamashita)
+- [Layer-pack Webpack Plugin](https://github.com/layer-pack/layer-pack) يسمح باستخدام glob imports للملفات والمجلدات، وبناء mono repo apps عبر source code أو npm packages قابلة للوراثة، ومشاركة إعدادات webpack. -- _Maintainer_: `Braun Nathanaël` [![Github][githubicon]](https://github.com/N8tz)
+- [webpack-typescript-directory-compile-plugin](https://github.com/ssigwart/webpack-typescript-directory-compile-plugin) يضبط مجلد source لملفات TypeScript ومجلد output لملفات JavaScript. سيتم تجميع كل ملف TypeScript في مجلد source، وكذلك أي ملفات جديدة، إلى ملفات JavaScript مستقلة. -- _Maintainer_: `Stephen Sigwart` [![Github][githubicon]](https://github.com/ssigwart)
+- [CycloneDX Webpack Plugin](https://github.com/CycloneDX/cyclonedx-webpack-plugin#readme): ينشئ CycloneDX Software Bill of Materials (SBOM) من webpack bundles وقت compile. -- _Maintainer_: `OWASP CycloneDX Team` [![Github][githubicon]](https://github.com/CycloneDX)
+- [Transpile Webpack Plugin](https://github.com/licg9999/transpile-webpack-plugin#readme): يحوّل ملفات input إلى ملفات output بشكل منفرد بدون حزمها معًا. -- _Maintainer_: `Chungen Li` [![Github][githubicon]](https://github.com/licg9999) [![Twitter][twittericon]](https://twitter.com/licg9999)
+- [Manifest Extraction Plugin](https://github.com/shellscape/webpack-manifest-plugin): يولّد asset manifest بعد تجميع webpack. -- _Maintainer_: `Andrew Powell` [![Github][githubicon]](https://github.com/shellscape)
+- [Transform Async Modules Plugin](https://github.com/steverep/transform-async-modules-webpack-plugin): webpack plugin لتحويل async module output باستخدام Babel. يسمح بتحويل top level await إلى ES5. -- _Maintainer_: `Steve Repsher` [![Github][githubicon]](https://github.com/steverep)
+- [CSS Layering Plugin](https://github.com/kburich/css-layering-webpack-plugin): يغلّف CSS داخل cascade layers. -- _Maintainer_: `Kresimir Buric` [![Github][githubicon]](https://github.com/kburich)
+
+### أدوات Webpack
+
+- [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): middleware يتيح bundle مباشرًا أثناء التطوير. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server): يقدم تطبيق webpack ويحدّث المتصفح عند التغييرات. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Webpack Merge](https://github.com/survivejs/webpack-merge) - أداة دمج مصممة لـ Webpack. -- _Maintainer_: `Juho Vepsäläinen` [![Github][githubicon]](https://github.com/bebraw) [![Twitter][twittericon]](https://twitter.com/bebraw)
+- [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - يثبت dependencies ويحفظها تلقائيًا مع Webpack. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
+- [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - يتحقق من إعدادات webpack باستخدام Joi. -- _Maintainer_: `js-dxtools Team` [![Github][githubicon]](https://github.com/js-dxtools)
+- [Webpack Config Utils](https://github.com/kentcdodds/webpack-config-utils) - أدوات تجعل إعدادات webpack أسهل للقراءة. -- _Maintainer_: `Kent C. Dodds` [![Github][githubicon]](https://github.com/kentcdodds) [![Twitter][twittericon]](https://twitter.com/kentcdodds)
+- [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - أدوات ومساعدات Webpack لـ Angular 2. -- _Maintainer_: `AngularClass` [![Github][githubicon]](https://github.com/AngularClass) [![Twitter][twittericon]](https://twitter.com/AngularClass)
+- [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer) - يعرض bundles كـ treemap تفاعلية. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r) [![Twitter][twittericon]](https://twitter.com/grunin_ya)
+- [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): مساعدات وpresets لإعداد webpack مع hotloading. -- _Maintainer_: `Henrik Joreteg` [![Github][githubicon]](https://github.com/HenrikJoreteg)
+- [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard): dashboard في CLI لـ webpack dev server. -- _Maintainer_: `Formidable Labs` [![Github][githubicon]](https://github.com/FormidableLabs)
+- [Neutrino](https://github.com/mozilla-neutrino/neutrino-dev): يجمع قوة Webpack مع بساطة presets. -- _Maintainer_: `Eli Perelman` [![Github][githubicon]](https://github.com/eliperelman)
+- [Speed Measure Plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) - يقيس سرعة webpack plugins وloaders. -- _Maintainer_: `Stephen Cook` [![Github][githubicon]](https://github.com/stephencookdev)
+- [Time Analytics Plugin](https://github.com/ShuiRuTian/time-analytics-webpack-plugin) - يحلل تكلفة الوقت للـ loaders وplugins في webpack. وهو خليفة Speed Measure Plugin. -- _Maintainer_: `Song Gao` [![Github][githubicon]](https://github.com/ShuiRuTian)
+- [packtracker.io](https://packtracker.io/?utm_source=github&utm_medium=awesome-webpack&utm_campaign=social) - تحليل webpack bundle عند كل commit، وإرسال webpack stats إلى كل pull request.
+- [BundleStats](https://github.com/relative-ci/bundle-stats): يحلل webpack stats، مثل bundle size وassets وmodules وpackages، ويقارن النتائج بين builds مختلفة. -- _Maintainer_: `Vio` [![Github][githubicon]](https://github.com/vio) [![Twitter][twittericon]](https://twitter.com/vio)
+- [Webpack Landing Generator](https://github.com/kuncevic/webpack-landing-generator): طريقة سهلة لإنشاء landing page قابلة للتحويل. -- _Maintainer_: `Aliaksei Kuncevic` [![Github][githubicon]](https://github.com/kuncevic) [![Twitter][twittericon]](https://twitter.com/kuncevic)
+- [Webpack Dev Server Firewall](https://github.com/funbox/webpack-dev-server-firewall): يمنع الوصول إلى dev server من IPs غير معروفة. -- _Maintainer_: `Igor Adamenko` [![Github][githubicon]](https://github.com/igoradamenko) [![Twitter][twittericon]](https://twitter.com/igoradamenko)
+- [RelativeCI](https://relative-ci.com): يشغّل تحليلات bundle معمقة على كل build ويراقب حجم webpack bundle وassets وmodules وpackages. [![Github][githubicon]](https://github.com/relative-ci)
+
+## البحث والتعلم
+
+### مقالات
 
 - Aniketh Saha | 16-Oct-19 - [Creating a Custom webpack Plugin](https://alligator.io/js/create-custom-webpack-plugin/)
 - Antoine Caron | 18-Jan-19 - [Webpack : an unexpected journey](https://medium.zenika.com/webpack-an-unexpected-journey-26f987efd1c5)
@@ -222,7 +218,7 @@ _People passionate about Webpack (In no particular order)_
 - Maxime Fabre | 16-Oct-15 - [Webpack your bags.](https://blog.madewithlove.be/post/webpack-your-bags/?utm_content=buffer480f4&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
 - Hridayesh Sharma | 18-Aug-20 - [Webpack Setup for a JavaScript Library](https://www.loginradius.com/engineering/blog/write-a-javascript-library-using-webpack-and-babel/)
 
-### Videos
+### فيديوهات
 
 - Sean Larkin JS Kongress | Apr-2-2019 - [Everything’s a plugin: Understanding webpack from the inside out](https://youtu.be/H3g0BdyVVxA)
 - Colt Steele via Youtube| Mar-7-2019 - [Learn Webpack Course](https://www.youtube.com/playlist?list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8)
@@ -237,63 +233,63 @@ _People passionate about Webpack (In no particular order)_
 - Tasveer Singh at TorontoJS Tech Talk | 09-Apr-15 - [Webpack.](https://www.youtube.com/watch?v=TaWKUpahFZM)
 - Jeremy Lund at Mountain West JS | 28-Mar-15 - [Gift Wrap Your Code with Webpack.](https://www.youtube.com/watch?v=ANMN9M9LhNQ)
 
-### Courses
+### دورات
 
-- [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone) - Free Laracasts series by [Jeffrey Way](http://twitter.com/jeffrey_way)
-- [Webpack Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/) - Brief introduction about Webpack fundamentals by [Sean Larkin](https://twitter.com/thelarkinn)
-- [Web Performance with Webpack](https://frontendmasters.com/courses/performance-webpack/) - Solving common web performance problems using Webpack by [Sean Larkin](https://twitter.com/thelarkinn)
-- [Intro to webpack (playlist)](https://egghead.io/playlists/intro-to-webpack-4ca2d994) - Egghead.io playlist of a few videos by [Kent C. Dodds](https://twitter.com/kentcdodds) (the first is free).
-- [Angular and Webpack for modular applications](https://egghead.io/courses/angular-and-webpack-for-modular-applications) - Egghead.io course by [Kent C. Dodds](https://twitter.com/kentcdodds)
-- [Using Webpack for Production JavaScript Applications](https://egghead.io/courses/using-webpack-for-production-javascript-applications) - Egghead.io course by [Kent C. Dodds](https://twitter.com/kentcdodds) (advanced)
-- [Webpack Fundamentals](https://www.pluralsight.com/courses/webpack-fundamentals) - [Joe Eames](https://twitter.com/josepheames) for Pluralsight (intermediate)
-- [Webpack Academy](https://webpack.academy) - A comprehensive webpack learning resource.
-- [Webpack from scratch series](https://www.youtube.com/playlist?list=PLLhEJK7fQIxB2gZBIzYI50NPsAQERD9rL) on YouTube by Paris Nakita Kejser
+- [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone) - سلسلة مجانية من Laracasts يقدمها [Jeffrey Way](http://twitter.com/jeffrey_way).
+- [Webpack Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/) - مقدمة مختصرة عن أساسيات Webpack يقدمها [Sean Larkin](https://twitter.com/thelarkinn).
+- [Web Performance with Webpack](https://frontendmasters.com/courses/performance-webpack/) - حل مشاكل أداء الويب الشائعة باستخدام Webpack مع [Sean Larkin](https://twitter.com/thelarkinn).
+- [Intro to webpack (playlist)](https://egghead.io/playlists/intro-to-webpack-4ca2d994) - قائمة تشغيل من Egghead.io تضم عدة فيديوهات لـ [Kent C. Dodds](https://twitter.com/kentcdodds)، وأولها مجاني.
+- [Angular and Webpack for modular applications](https://egghead.io/courses/angular-and-webpack-for-modular-applications) - دورة من Egghead.io يقدمها [Kent C. Dodds](https://twitter.com/kentcdodds).
+- [Using Webpack for Production JavaScript Applications](https://egghead.io/courses/using-webpack-for-production-javascript-applications) - دورة متقدمة من Egghead.io يقدمها [Kent C. Dodds](https://twitter.com/kentcdodds).
+- [Webpack Fundamentals](https://www.pluralsight.com/courses/webpack-fundamentals) - دورة [Joe Eames](https://twitter.com/josepheames) على Pluralsight، مستوى متوسط.
+- [Webpack Academy](https://webpack.academy) - مورد شامل لتعلم webpack.
+- [Webpack from scratch series](https://www.youtube.com/playlist?list=PLLhEJK7fQIxB2gZBIzYI50NPsAQERD9rL) سلسلة على YouTube يقدمها Paris Nakita Kejser.
 
-### Books
+### كتب
 
-- [SurviveJS - Webpack](http://survivejs.com/webpack/introduction): Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.
+- [SurviveJS - Webpack](http://survivejs.com/webpack/introduction): كتاب مجاني يرشدك من مبتدئ في webpack إلى مستوى متقدم، ويغطي التطوير وproduction ومواضيع متقدمة.
 
-### Webpack Examples
+### أمثلة Webpack
 
-- [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples): Examples of common Webpack functionality.
+- [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples): أمثلة على وظائف Webpack الشائعة.
 
-### Community Examples
+### أمثلة من المجتمع
 
 #### Angular
 
-- [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) - A Webpack driven Angular 2 Starter kit from [AngularClass](https://github.com/AngularClass).
-- [Angular2 Webpack](https://github.com/preboot/angular2-webpack) - A complete, yet simple, starter for Angular 2 using Webpack from [Preboot](https://github.com/preboot).
-- [Angular2 Webpack Visual Studio](https://github.com/damienbod/Angular2WebpackVisualStudio) - ASP.NET Core, Angular2 with Webpack and Visual Studio from [Damien Bod](https://github.com/damienbod).
-- [Angular2 Starter](https://github.com/schempy/angular2-typescript-webpack) - Angular2 starter kit with Typescript and Webpack from [Brian Schemp](https://github.com/schempy).
-- [Angular2 Seed](https://github.com/angular/angular2-seed/) - A simple starter demonstrating the basic concepts of Angular2 from [Pawel Kozlowski](https://github.com/pkozlowski-opensource).
+- [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) - starter kit لـ Angular 2 يعمل عبر Webpack من [AngularClass](https://github.com/AngularClass).
+- [Angular2 Webpack](https://github.com/preboot/angular2-webpack) - starter كامل وبسيط لـ Angular 2 باستخدام Webpack من [Preboot](https://github.com/preboot).
+- [Angular2 Webpack Visual Studio](https://github.com/damienbod/Angular2WebpackVisualStudio) - ASP.NET Core وAngular2 مع Webpack وVisual Studio من [Damien Bod](https://github.com/damienbod).
+- [Angular2 Starter](https://github.com/schempy/angular2-typescript-webpack) - starter kit لـ Angular2 مع Typescript وWebpack من [Brian Schemp](https://github.com/schempy).
+- [Angular2 Seed](https://github.com/angular/angular2-seed/) - starter بسيط يوضح المفاهيم الأساسية في Angular2 من [Pawel Kozlowski](https://github.com/pkozlowski-opensource).
 
-#### Framework Agnostic
+#### بدون ارتباط بإطار معين
 
-- [ES6 TodoMVC with Webpack](https://github.com/kentcdodds/es6-todomvc) - Repo used to teach webpack. (Check branches). from [Kent C. Dodds](https://github.com/kentcdodds).
+- [ES6 TodoMVC with Webpack](https://github.com/kentcdodds/es6-todomvc) - مستودع يُستخدم لتعليم webpack. راجع الفروع. من [Kent C. Dodds](https://github.com/kentcdodds).
 
 #### React
 
-- [Create React App](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration from [Dan Abramov](https://github.com/gaearon).
-- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) - Isomorphic web app boilerplate from [Kriasoft Team](https://github.com/kriasoft).
-- [React Redux Universal](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp from [Erik Rasmussen](https://github.com/erikras).
-- [Frontend Boilerplate](https://github.com/tj/frontend-boilerplate) - A boilerplate of things that mostly shouldn't exist from [TJ Holowaychuk](https://github.com/tj).
-- [ReactGo](https://github.com/reactGo/reactGo) - Your One-Stop solution for a full-stack universal Redux from [Ken Ding](https://github.com/choonkending).
-- [React Native Calculator](https://github.com/benoitvallon/react-native-nw-react-calculator) - Mobile, desktop and website Apps with the same code from [Benoit Vallon](https://github.com/benoitvallon).
-- [React Cordova Boilerplate](https://github.com/unimonkiez/react-cordova-boilerplate) - TodoMVC example for React with Cordova from [Yuval Saraf](https://github.com/unimonkiez).
-- [React Universally](https://github.com/ctrlplusb/react-universally) - A starter kit giving you the minimum for a production ready universal react application.
-- [Razzle Material-UI Styled Example](https://github.com/kireerik/razzle-material-ui-styled-example) - With Styled Components using Express with compression from [Erik Engi](https://github.com/kireerik).
-- [Read](https://github.com/logustra/read) - A highly scalable react boilerplate from [logustra](https://github.com/logustra)
-- [@route-resource-preload/webpack-plugin](https://github.com/AwesomeDevin/route-resource-preload/tree/main/packages/webpack-plugin) - Focus on improving the first screen loading speed of applications and providing the best user experience, inspiration comes from the preloading of NextJS from [Devin Deng](https://github.com/AwesomeDevin).
+- [Create React App](https://github.com/facebookincubator/create-react-app) - إنشاء تطبيقات React بدون إعداد build من [Dan Abramov](https://github.com/gaearon).
+- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) - boilerplate لتطبيق ويب isomorphic من [Kriasoft Team](https://github.com/kriasoft).
+- [React Redux Universal](https://github.com/erikras/react-redux-universal-hot-example) - starter boilerplate لتطبيق ويب universal من [Erik Rasmussen](https://github.com/erikras).
+- [Frontend Boilerplate](https://github.com/tj/frontend-boilerplate) - boilerplate لأشياء غالبًا لا ينبغي أن تكون موجودة من [TJ Holowaychuk](https://github.com/tj).
+- [ReactGo](https://github.com/reactGo/reactGo) - حل كامل لتطبيق full-stack universal Redux من [Ken Ding](https://github.com/choonkending).
+- [React Native Calculator](https://github.com/benoitvallon/react-native-nw-react-calculator) - تطبيقات mobile وdesktop وweb بالكود نفسه من [Benoit Vallon](https://github.com/benoitvallon).
+- [React Cordova Boilerplate](https://github.com/unimonkiez/react-cordova-boilerplate) - مثال TodoMVC لـ React مع Cordova من [Yuval Saraf](https://github.com/unimonkiez).
+- [React Universally](https://github.com/ctrlplusb/react-universally) - starter kit يعطيك الحد الأدنى لتطبيق React universal جاهز للـ production.
+- [Razzle Material-UI Styled Example](https://github.com/kireerik/razzle-material-ui-styled-example) - مثال يستخدم Styled Components وExpress مع compression من [Erik Engi](https://github.com/kireerik).
+- [Read](https://github.com/logustra/read) - boilerplate لـ React قابل للتوسع بدرجة عالية من [logustra](https://github.com/logustra).
+- [@route-resource-preload/webpack-plugin](https://github.com/AwesomeDevin/route-resource-preload/tree/main/packages/webpack-plugin) - يركز على تحسين سرعة تحميل الشاشة الأولى للتطبيقات وتقديم أفضل تجربة مستخدم، وفكرته مستلهمة من preloading في NextJS، من [Devin Deng](https://github.com/AwesomeDevin).
 
 #### Vue
 
-- [Vuad](https://github.com/logustra/vuad) - A highly scalable vue boilerplate from [logustra](https://github.com/logustra)
+- [Vuad](https://github.com/logustra/vuad) - boilerplate لـ Vue قابل للتوسع بدرجة عالية من [logustra](https://github.com/logustra).
 
-### Other
+### أخرى
 
-- [Juho, Johannes, Tobias & Sean on JavaScript Air](http://jsair.io/webpack) - [JavaScript Air](https://javascriptair.com) podcast
-- [Webpack interview questions](https://github.com/styopdev/webpack-interview-questions) - Interview questions with answers.
-- [Visual config tool for webpack](https://webpack.jakoblind.no) - A visual tool for creating webpack configs in your browser
+- [Juho, Johannes, Tobias & Sean on JavaScript Air](http://jsair.io/webpack) - حلقة podcast على [JavaScript Air](https://javascriptair.com).
+- [Webpack interview questions](https://github.com/styopdev/webpack-interview-questions) - أسئلة مقابلات عن Webpack مع إجاباتها.
+- [Visual config tool for webpack](https://webpack.jakoblind.no) - أداة مرئية لإنشاء إعدادات webpack داخل المتصفح.
 
 [twittericon]: https://img.shields.io/badge/-%231DA1F2?style=flat-round&logo=x&logoColor=white
 [githubicon]: https://img.shields.io/badge/-181717?style=flat-round&logo=github&logoColor=white

From c4a15a7d199365b5154374f178e5a5c1db678ca3 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 13:45:25 +0300
Subject: [PATCH 28/35] docs(blog): fixed blog translate to Arabic

---
 src/content/blog/2026-05-19-webpack-5-107.mdx | 143 +++++++++---------
 1 file changed, 71 insertions(+), 72 deletions(-)

diff --git a/src/content/blog/2026-05-19-webpack-5-107.mdx b/src/content/blog/2026-05-19-webpack-5-107.mdx
index c92b2e7a2927..e8d00f1895ca 100644
--- a/src/content/blog/2026-05-19-webpack-5-107.mdx
+++ b/src/content/blog/2026-05-19-webpack-5-107.mdx
@@ -2,18 +2,18 @@
 title: Webpack 5.107
 sort: 20260519
 contributors:
-  - bjohansebas
+  - RlxChap2
 ---
 
-Webpack 5.107 is out. The headline of this release is the first step toward handling `.html` files natively in webpack core: importing an HTML file from JS now resolves its `<img src>`, `<link href>`, inline `<style>`, and `<script src>` references through the normal webpack pipeline, replacing the role `html-loader` has played for years. HTML entry points (the `html-webpack-plugin` part of the story) are not in 5.107 yet, they are planned for the next minor release.
+صدر Webpack 5.107. العنوان الأبرز في هذا الإصدار هو أول خطوة نحو التعامل مع ملفات `.html` بشكل أصلي داخل webpack core: أصبح استيراد ملف HTML من JavaScript يحل مراجع `<img src>` و`<link href>` ووسوم `<style>` الداخلية و`<script src>` عبر مسار webpack المعتاد، وهذا يستبدل الدور الذي كان يؤديه `html-loader` لسنوات. أما HTML entry points، أي الجزء الذي يغطيه `html-webpack-plugin`، فليست موجودة في 5.107 بعد، وهي مخطط لها في الإصدار minor التالي.
 
-This release also lands experimental TypeScript support that leans on Node.js's built-in type-stripping, so simple TypeScript projects can compile without `ts-loader` or `swc-loader`.
+يضيف هذا الإصدار أيضًا دعمًا تجريبيًا لـ TypeScript يعتمد على ميزة Node.js المدمجة لإزالة الأنواع، بحيث يمكن للمشاريع البسيطة المكتوبة بـ TypeScript أن تُبنى بدون `ts-loader` أو `swc-loader`.
 
-Both pieces are experimental and live behind opt-in flags, but the direction is clear: you should eventually be able to build a complete web app with zero extra loaders or plugins for HTML, CSS, and basic TypeScript.
+الميّزتان تجريبيتان وتحتاجان إلى تفعيل صريح، لكن الاتجاه واضح: الهدف أن تتمكن لاحقًا من بناء تطبيق ويب كامل بدون loaders أو plugins إضافية لـ HTML وCSS وTypeScript الأساسي.
 
-Alongside the experimental work, this release also continues maturing the built-in CSS pipeline, and ships a handful of improvements for tree shaking, deferred imports, and module resolution.
+إلى جانب العمل التجريبي، يواصل هذا الإصدار تحسين مسار CSS المدمج، ويضيف عدة تحسينات لـ tree shaking وdeferred imports وmodule resolution.
 
-Explore what's new:
+استكشف الجديد:
 
 - [**HTML Modules (Experimental)**](#html-modules-experimental)
   - [`experiments.html` Flag](#experimentshtml-flag)
@@ -38,15 +38,15 @@ Explore what's new:
 
 ## HTML Modules (Experimental)
 
-W> **This feature is experimental and partial.** Webpack 5.107 only implements the `html-loader` side of the story: importing an HTML file from JavaScript runs its tag references through the webpack pipeline. **HTML entry points** (using a `.html` file directly as `entry`, the `html-webpack-plugin` part) are **not supported yet** and are planned for the next minor release. The full story is tracked in issue [#536](https://github.com/webpack/webpack/issues/536).
+W> **هذه الميزة تجريبية وجزئية.** يطبق Webpack 5.107 جانب `html-loader` فقط: عند استيراد ملف HTML من JavaScript، تمر مراجع الوسوم عبر مسار webpack. أما **HTML entry points**، أي استخدام ملف `.html` مباشرة كـ `entry` وهو الجزء المرتبط بـ `html-webpack-plugin`، فهي **غير مدعومة بعد** ومخطط لها في الإصدار minor التالي. القصة الكاملة متتبعة في issue [#536](https://github.com/webpack/webpack/issues/536).
 
-A real-world webpack setup that needs an HTML entry point has historically required at least two extra dependencies. The first is `html-webpack-plugin`, which generates or emits the HTML file and injects the right bundle URLs into it. The second is `html-loader`, which lets webpack walk through `<img src>`, `<link href>`, `<script src>`, and friends so those references go through the normal resolver and asset pipeline.
+تاريخيًا، أي إعداد webpack حقيقي يحتاج HTML entry point كان يتطلب اعتمادين إضافيين على الأقل. الأول هو `html-webpack-plugin`، وهو الذي يولّد أو يصدر ملف HTML ويحقن فيه روابط bundles الصحيحة. والثاني هو `html-loader`، وهو الذي يسمح لـ webpack بالمرور على `<img src>` و`<link href>` و`<script src>` وما شابه، حتى تمر هذه المراجع عبر resolver ومسار assets المعتادين.
 
-Both of these have served the community well for a long time, but they live outside the core. Webpack 5.107 starts bringing the `html-loader` side of that work inward.
+خدم هذان الاعتمادان المجتمع لفترة طويلة، لكنهما خارج core. يبدأ Webpack 5.107 بإدخال جانب `html-loader` من هذا العمل إلى الداخل.
 
 ### `experiments.html` Flag
 
-Everything else in this section sits behind a single opt-in flag. The new `experiments.html` option registers the `html` module type on `NormalModuleFactory` and turns on the HTML behaviors described below.
+كل ما في هذا القسم خلف flag واحد يحتاج إلى تفعيل صريح. الخيار الجديد `experiments.html` يسجل نوع module باسم `html` على `NormalModuleFactory` ويفعل سلوكيات HTML الموضحة أدناه.
 
 ```js
 // webpack.config.js
@@ -57,7 +57,7 @@ module.exports = {
 };
 ```
 
-You then import the HTML file from JavaScript. The default export is the processed HTML as a string, with all asset references resolved through webpack:
+بعد ذلك تستورد ملف HTML من JavaScript. يكون default export هو HTML المعالج كنص، مع حل كل مراجع assets عبر webpack:
 
 ```js
 // src/index.js
@@ -66,11 +66,11 @@ import page from "./page.html";
 document.documentElement.innerHTML = page;
 ```
 
-This is the same shape `html-loader` produces, so existing code that imports HTML should keep working. The pipeline does the work the loader used to do: tag references are resolved, hashed filenames are rewritten back into the HTML string, and the result lands in your JS bundle. Using an `.html` file directly as a webpack `entry` is **not** supported in 5.107.
+هذه هي الصيغة نفسها التي ينتجها `html-loader`، لذلك يفترض أن يستمر الكود الموجود الذي يستورد HTML بالعمل. يقوم المسار الجديد بالعمل الذي كان loader يقوم به: تُحل مراجع الوسوم، وتُعاد كتابة أسماء الملفات التي تحتوي على hash داخل نص HTML، ثم تصل النتيجة إلى JS bundle. استخدام ملف `.html` مباشرة كـ webpack `entry` **غير** مدعوم في 5.107.
 
 ### Inline `<style>` Tags
 
-When webpack finds a `<style>` block inside an HTML module, it routes the CSS body through the same CSS pipeline you'd use for a `.css` file. The block is treated as a virtual CSS module with `exportType: "text"`, so any `url()` references and `@import` statements inside the style are resolved relative to the HTML file. Once processing finishes, the transformed CSS is written back into the original `<style>` tag in the emitted HTML string.
+عندما يجد webpack كتلة `<style>` داخل HTML module، يمرر جسم CSS عبر مسار CSS نفسه الذي تستخدمه لملف `.css`. تُعامل الكتلة كـ virtual CSS module مع `exportType: "text"`، لذلك تُحل مراجع `url()` وعبارات `@import` داخل style نسبة إلى ملف HTML. وبعد انتهاء المعالجة، يُكتب CSS المحوّل مرة أخرى داخل وسم `<style>` الأصلي في نص HTML الصادر.
 
 ```html
 <!-- src/page.html -->
@@ -91,11 +91,11 @@ When webpack finds a `<style>` block inside an HTML module, it routes the CSS bo
 </html>
 ```
 
-`<style type="text/css">` and `<style>` with no `type` attribute are processed. Anything with a non-CSS `type` is passed through untouched. This covers the inline-style behavior of `html-loader` without needing it in the pipeline.
+تتم معالجة `<style type="text/css">` و`<style>` بدون خاصية `type`. أما أي وسم يملك `type` غير CSS فيمر كما هو بدون تعديل. هذا يغطي سلوك inline-style الخاص بـ `html-loader` بدون الحاجة إليه في pipeline.
 
 ### Inline `<script>` Tags
 
-Inline `<script>` bodies are routed through the same entry pipeline that already handles `<script src>`. Each `<script>` body becomes its own webpack entry: classic inline scripts are bundled as CommonJS, and `<script type="module">` bodies are bundled as ESM. The tag in the emitted HTML is rewritten to `<script src="…">` pointing at the generated chunk, with the body cleared.
+تُمرر أجسام وسوم `<script>` الداخلية عبر مسار entry نفسه الذي يتعامل مسبقًا مع `<script src>`. يصبح كل جسم `<script>` entry مستقلًا في webpack: السكربتات الداخلية الكلاسيكية تُحزم كـ CommonJS، ووسوم `<script type="module">` الداخلية تُحزم كـ ESM. يعاد كتابة الوسم في HTML الناتج إلى `<script src="…">` يشير إلى chunk المولد، مع إفراغ الجسم.
 
 ```html
 <!-- src/page.html -->
@@ -114,15 +114,15 @@ Inline `<script>` bodies are routed through the same entry pipeline that already
 </html>
 ```
 
-The same behaviors that apply to external `<script src>` apply here too:
+السلوكيات نفسها التي تنطبق على `<script src>` الخارجية تنطبق هنا أيضًا:
 
-- When `output.module` is enabled, classic inline `<script>` tags are auto-upgraded to `type="module"`, matching the auto-upgrade for `<script src>`.
-- `webpackIgnore` works on inline `<script>` tags as well, leaving the original body untouched.
-- Non-JS `type` values like `application/ld+json` and `importmap` pass through unchanged.
+- عند تفعيل `output.module`، تتم ترقية وسوم `<script>` الكلاسيكية تلقائيًا إلى `type="module"`، مثل الترقية التلقائية لـ `<script src>`.
+- يعمل `webpackIgnore` على وسوم `<script>` الداخلية أيضًا، فيترك الجسم الأصلي كما هو.
+- قيم `type` غير الخاصة بـ JS مثل `application/ld+json` و`importmap` تمر بدون تغيير.
 
 ### `<script src>` and `<link rel="modulepreload">`
 
-`<script src>` and `<link rel="modulepreload">` references inside an HTML module become real webpack entries, and the emitted chunk URL is rewritten back into the HTML string so hashed filenames stay correct.
+تتحول مراجع `<script src>` و`<link rel="modulepreload">` داخل HTML module إلى webpack entries حقيقية، ثم يعاد كتابة URL الخاص بالـ chunk الصادر داخل نص HTML حتى تبقى أسماء الملفات التي تحتوي على hash صحيحة.
 
 ```html
 <!-- src/page.html -->
@@ -138,16 +138,16 @@ The same behaviors that apply to external `<script src>` apply here too:
 </html>
 ```
 
-A few behaviors are worth knowing about:
+هناك عدة سلوكيات مهمة:
 
-- Multiple `<script src>` tags in the same page share a single runtime. Within each group (classic or `type="module"`), the leader holds the runtime and the rest declare `dependOn` on it.
-- `<link rel="modulepreload">` entries stay independent and are never imported by sibling scripts, so they preload without executing, exactly as the spec requires.
-- When `output.module` is enabled, classic `<script src>` tags are auto-upgraded to `<script type="module" src>` so the emitted ES-module chunks load in the right mode.
-- Non-JS script types like `application/ld+json` or `importmap`, as well as data URIs, flow through unchanged and are not bundled as JS.
+- عدة وسوم `<script src>` في الصفحة نفسها تشترك في runtime واحد. داخل كل مجموعة، سواء كانت classic أو `type="module"`، يحمل الأول runtime والبقية تعلن `dependOn` عليه.
+- تبقى entries الخاصة بـ `<link rel="modulepreload">` مستقلة ولا يتم استيرادها من scripts مجاورة، لذلك تعمل كـ preload بدون تنفيذ، تمامًا كما تتطلب المواصفة.
+- عند تفعيل `output.module`، تتم ترقية وسوم `<script src>` الكلاسيكية تلقائيًا إلى `<script type="module" src>` حتى تُحمّل ES-module chunks الناتجة بالوضع الصحيح.
+- أنواع script غير JS مثل `application/ld+json` أو `importmap`، وكذلك data URIs، تمر بدون تغيير ولا تُحزم كـ JS.
 
 ### `webpackIgnore` Magic Comment
 
-The familiar `webpackIgnore: true` magic comment now works inside HTML modules. Place an HTML comment with the directive right before a tag and webpack will leave that tag's URLs untouched in the output. This is exactly how `html-loader` handles the same case.
+أصبح magic comment المعروف `webpackIgnore: true` يعمل الآن داخل HTML modules. ضع تعليق HTML يحتوي على التوجيه قبل الوسم مباشرة، وسيترك webpack روابط ذلك الوسم كما هي في output. وهذا هو بالضبط سلوك `html-loader` للحالة نفسها.
 
 ```html
 <!-- webpackIgnore: true -->
@@ -157,13 +157,13 @@ The familiar `webpackIgnore: true` magic comment now works inside HTML modules.
 <script src="/legacy/external.js"></script>
 ```
 
-The comment value is parsed with the same context the JS and CSS parsers use, so non-boolean values raise an `UnsupportedFeatureWarning`.
+تُقرأ قيمة التعليق بالسياق نفسه الذي تستخدمه parsers الخاصة بـ JS وCSS، لذلك القيم غير boolean ستصدر `UnsupportedFeatureWarning`.
 
 ## TypeScript Support (Experimental)
 
-W> **This feature is experimental and depends on a recent Node.js.** It requires Node.js 22.6 or later for the stable `module.stripTypeScriptTypes` API. The transform handles only erasable TypeScript syntax (see limitations below). For anything else, keep using `ts-loader` or `swc-loader`.
+W> **هذه الميزة تجريبية وتعتمد على إصدار حديث من Node.js.** تتطلب Node.js 22.6 أو أحدث لاستخدام API المستقرة `module.stripTypeScriptTypes`. يعالج التحويل syntax الخاص بـ TypeScript القابل للإزالة فقط. للسيناريوهات الأخرى، استمر باستخدام `ts-loader` أو `swc-loader`.
 
-Webpack 5.107 adds first-class TypeScript support behind a new `experiments.typescript` flag. With it enabled, webpack compiles `.ts`, `.cts`, and `.mts` files directly through Node.js's built-in [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options), no external loader required. The flag is also turned on automatically by [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
+يضيف Webpack 5.107 دعمًا مباشرًا لـ TypeScript خلف flag جديد باسم `experiments.typescript`. عند تفعيله، يجمّع webpack ملفات `.ts` و`.cts` و`.mts` مباشرة عبر [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options) المدمجة في Node.js، بدون loader خارجي. كما يتم تفعيل flag تلقائيًا بواسطة [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
 
 ```js
 // webpack.config.js
@@ -175,17 +175,17 @@ export default {
 };
 ```
 
-Enabling the flag also wires up sensible defaults: rules for `.ts` / `.cts` / `.mts`, `.ts` added to extension resolution before `.js`, `extensionAlias` so `import "./foo.js"` also tries `./foo.ts`, `tsconfig.json` resolution, and the `"typescript"` conditional-exports key for monorepos that ship `.ts` sources.
+تفعيل flag يربط أيضًا defaults مناسبة: rules لملفات `.ts` / `.cts` / `.mts`، وإضافة `.ts` إلى extension resolution قبل `.js`، و`extensionAlias` حتى يجرب `import "./foo.js"` الملف `./foo.ts` أيضًا، وحل `tsconfig.json`، ومفتاح conditional exports باسم `"typescript"` للـ monorepos التي تنشر مصادر `.ts`.
 
-The transform only **erases types**: no type checking, no JSX / `.tsx`, and no non-erasable syntax (`enum`, `namespace`, parameter-property constructors, decorator metadata). These are the same constraints TypeScript enforces with [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly). For type checking, pair the flag with `tsc --noEmit` or [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). For JSX or non-erasable syntax, keep using `ts-loader` or `swc-loader`.
+التحويل **يزيل الأنواع فقط**: لا يوجد type checking، ولا JSX / `.tsx`، ولا syntax غير قابلة للإزالة مثل `enum` و`namespace` وparameter-property constructors وdecorator metadata. هذه هي القيود نفسها التي يفرضها TypeScript مع [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly). لفحص الأنواع، استخدم flag مع `tsc --noEmit` أو [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). ولـ JSX أو syntax غير قابلة للإزالة، استمر باستخدام `ts-loader` أو `swc-loader`.
 
-See [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) for the built-in setup and [`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) for the `ts-loader` fallback.
+راجع [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) للإعداد المدمج، و[`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) لاستخدام `ts-loader` كخيار fallback.
 
 ## CSS Improvements
 
 ### Scope Hoisting for CSS Modules
 
-Module concatenation (also known as scope hoisting) used to be a JavaScript-only optimization. Even with `experiments.css` enabled, CSS Modules pulled into a concatenated bundle still produced separate runtime instances. Starting with 5.107, the same optimization applies to CSS Modules whose export type is `text`, `css-style-sheet`, `style`, or `link`. The result is lower runtime overhead and smaller output in CSS-heavy bundles.
+كانت module concatenation، والمعروفة أيضًا باسم scope hoisting، تحسينًا خاصًا بـ JavaScript فقط. وحتى مع تفعيل `experiments.css`، كانت CSS Modules الداخلة في bundle مدمج تنتج runtime instances منفصلة. ابتداءً من 5.107، ينطبق التحسين نفسه على CSS Modules التي يكون export type الخاص بها `text` أو `css-style-sheet` أو `style` أو `link`. النتيجة runtime overhead أقل وoutput أصغر في bundles التي تحتوي CSS بكثافة.
 
 ```js
 module.exports = {
@@ -209,7 +209,7 @@ module.exports = {
 
 ### Pure Mode for CSS Modules
 
-A new `pure` parser option for `css/module` and `css/auto` mirrors the strict pure mode of `postcss-modules-local-by-default`. When enabled, every selector must contain at least one local class or id; otherwise webpack raises a build error. The point is to catch accidentally global selectors in CSS Modules before they make it into production.
+خيار parser جديد باسم `pure` لـ `css/module` و`css/auto` يحاكي strict pure mode في `postcss-modules-local-by-default`. عند تفعيله، يجب أن يحتوي كل selector على class أو id محلي واحد على الأقل، وإلا سيرفع webpack خطأ build. الهدف هو اكتشاف selectors العالمية غير المقصودة داخل CSS Modules قبل وصولها إلى production.
 
 ```js
 module.exports = {
@@ -224,33 +224,33 @@ module.exports = {
 };
 ```
 
-Two comments offer opt-outs when you need them. The first suppresses the check for a single rule:
+يوجد تعليقان للخروج من هذا الفحص عند الحاجة. الأول يعطّل الفحص لقاعدة واحدة:
 
 ```css
 /* cssmodules-pure-ignore */
 a {
-  /* suppressed only for this rule */
+  /* معطّل لهذه القاعدة فقط */
   color: blue;
 }
 ```
 
-The second, placed among the leading comments of a file before any rule, disables the check for the entire file:
+والثاني، عند وضعه ضمن التعليقات الأولى في الملف قبل أي قاعدة، يعطّل الفحص للملف كاملًا:
 
 ```css
 /* cssmodules-pure-no-check */
-/* disables pure mode for this file */
+/* يعطل pure mode لهذا الملف */
 
 a {
-  /* would normally fail under pure mode */
+  /* كان سيفشل عادةً تحت pure mode */
   color: red;
 }
 ```
 
-Nested rules inside a local-bearing ancestor count as pure-compliant, `&` resolves to the parent rule's purity, and `@keyframes` and `@counter-style` bodies are exempt.
+القواعد المتداخلة داخل ancestor يحتوي على local class تُعد متوافقة مع pure mode، و`&` يُحل إلى purity الخاصة بالـ parent rule، كما تُستثنى أجسام `@keyframes` و`@counter-style`.
 
 ### `@value` in URLs and `@import`
 
-CSS Modules `@value` identifiers can now be used as the path argument to `@import` and inside `url()` references. This makes it easy to define shared paths and assets once and reuse them across stylesheets.
+يمكن الآن استخدام identifiers الخاصة بـ `@value` في CSS Modules كمسار داخل `@import` وداخل مراجع `url()`. هذا يسهل تعريف المسارات وassets المشتركة مرة واحدة وإعادة استخدامها بين stylesheets.
 
 ```css
 @value path: "./other.module.css";
@@ -263,11 +263,11 @@ CSS Modules `@value` identifiers can now be used as the path argument to `@impor
 }
 ```
 
-Both quoted (`"./x"`, `'./x'`) and bare (`./x`) forms of the value work. Whichever form you write is unwrapped and resolved as a module request, so the asset flows through the normal webpack resolver and asset pipeline instead of being left as a literal identifier.
+تعمل الصيغ المقتبسة (`"./x"` و`'./x'`) والصيغ غير المقتبسة (`./x`) للقيمة. أي صيغة تكتبها تُفك وتُحل كـ module request، لذلك يمر asset عبر resolver ومسار assets المعتادين بدل أن يبقى identifier حرفيًا.
 
 ### Multiple Aliases via `exportsConvention`
 
-The function form of `generator.exportsConvention` for CSS Modules now accepts `string[]` in addition to `string`. Returning an array exports the local class under every name in the array, matching `css-loader`'s behavior. This is handy when you want to expose multiple aliases for a single class, for example both the original name and an uppercase version.
+أصبح شكل الدالة في `generator.exportsConvention` الخاص بـ CSS Modules يقبل `string[]` إلى جانب `string`. إرجاع array يصدر local class بكل اسم داخل array، بما يطابق سلوك `css-loader`. هذا مفيد عندما تريد توفير عدة aliases لـ class واحد، مثل الاسم الأصلي ونسخة بحروف كبيرة.
 
 ```js
 module.exports = {
@@ -283,16 +283,16 @@ module.exports = {
 ```
 
 ```js
-// Usage in JS
+// الاستخدام في JS
 import styles from "./button.module.css";
 
 console.log(styles.btn); // hashed class
-console.log(styles.BTN); // same hashed class, uppercase alias
+console.log(styles.BTN); // hashed class نفسه مع alias بحروف كبيرة
 ```
 
 ### `linkInsert` Hook
 
-If you've ever wanted to control where webpack inserts a stylesheet `<link>` in the document, you now have a hook for it. `CssLoadingRuntimeModule.getCompilationHooks(compilation)` exposes a new `linkInsert` hook. It receives the default insertion source (`document.head.appendChild(link);`) and the chunk, and returns the JS used to attach the link.
+إذا أردت يومًا التحكم في المكان الذي يضيف فيه webpack وسم `<link>` الخاص بـ stylesheet داخل document، أصبح لديك hook لذلك. يعرض `CssLoadingRuntimeModule.getCompilationHooks(compilation)` hook جديدًا باسم `linkInsert`. يستقبل مصدر الإدراج الافتراضي، وهو `document.head.appendChild(link);`، وكذلك chunk، ويرجع JS المستخدم لإرفاق link.
 
 ```js
 const webpack = require("webpack");
@@ -303,7 +303,7 @@ class MyLinkInsertPlugin {
       const hooks =
         webpack.web.CssLoadingRuntimeModule.getCompilationHooks(compilation);
 
-      // Override the default `document.head.appendChild(link);`
+      // استبدال `document.head.appendChild(link);` الافتراضي
       hooks.linkInsert.tap(
         "MyLinkInsertPlugin",
         (source, chunk) =>
@@ -319,13 +319,13 @@ module.exports = {
 };
 ```
 
-The hook is a `SyncWaterfallHook<[string, Chunk]>`. Return the default `source` to keep the original behavior, or return your own JS to override where (and how) the link is attached.
+الـ hook من نوع `SyncWaterfallHook<[string, Chunk]>`. أرجع `source` الافتراضي للحفاظ على السلوك الأصلي، أو أرجع JS خاصًا بك لتغيير مكان إرفاق link وطريقته.
 
 ### `orderModules` Hook
 
-When a chunk pulls in CSS from several files, webpack's default ordering is a topological sort of their import graph. That's the right call in most cases, but on real-world projects the import graph can be ambiguous enough to trigger the "Conflicting order between CSS …" warning, with no clean way out short of restructuring imports.
+عندما يسحب chunk ملفات CSS من عدة ملفات، يكون ترتيب webpack الافتراضي topological sort لـ import graph. هذا مناسب غالبًا، لكن في مشاريع حقيقية قد يكون import graph غامضًا بما يكفي لإظهار تحذير "Conflicting order between CSS …"، بدون حل نظيف سوى إعادة هيكلة imports.
 
-A new `orderModules` hook on `CssModulesPlugin.getCompilationHooks(compilation)` gives plugin authors a deterministic escape hatch. It runs once per CSS source type (`CSS_IMPORT_TYPE` and `CSS_TYPE`) with the chunk's modules pre-sorted by full module name. Return an ordered `Module[]` to override the default, or return `undefined` to fall through to webpack's existing import-order topological sort.
+يوفر hook جديد باسم `orderModules` على `CssModulesPlugin.getCompilationHooks(compilation)` مخرجًا deterministic لمؤلفي plugins. يعمل مرة لكل نوع CSS source، أي `CSS_IMPORT_TYPE` و`CSS_TYPE`، مع modules الخاصة بالـ chunk مرتبة مسبقًا حسب full module name. أرجع `Module[]` مرتبة لتجاوز الترتيب الافتراضي، أو أرجع `undefined` للرجوع إلى topological sort الحالي الخاص بـ webpack.
 
 ```js
 const webpack = require("webpack");
@@ -338,9 +338,9 @@ class CssOrderByPathPlugin {
         const hooks =
           webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
 
-        // Modules arrive pre-sorted by full module name; return as-is for
-        // a deterministic file-path order that side-steps the conflicting
-        // order warning.
+        // تصل modules مرتبة مسبقًا حسب full module name. إرجاعها كما هي
+        // يعطي ترتيبًا deterministic حسب مسار الملف ويتجنب تحذير
+        // conflicting order.
         hooks.orderModules.tap(
           "CssOrderByPathPlugin",
           (_chunk, modules) => modules,
@@ -356,15 +356,15 @@ module.exports = {
 };
 ```
 
-The hook is a `SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`. The first tap to return a non-`undefined` value wins.
+الـ hook من نوع `SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`. أول tap يرجع قيمة غير `undefined` هو الذي يفوز.
 
 ## JavaScript and ESM
 
 ### Anonymous Default Export Naming
 
-Webpack 5.106 introduced a fix-up that sets `.name` to `"default"` for anonymous default exports, matching the ES spec. It works correctly, but it injects unmangleable `Object.defineProperty` calls that inflate the bundle. For library consumers, who rarely rely on `.name === "default"`, that extra runtime helper is pure overhead.
+أضاف Webpack 5.106 إصلاحًا يضبط `.name` على `"default"` للـ anonymous default exports، بما يطابق مواصفة ES. يعمل هذا بشكل صحيح، لكنه يحقن استدعاءات `Object.defineProperty` لا يمكن تصغير أسمائها، مما يزيد حجم bundle. بالنسبة لمستهلكي المكتبات، الذين نادرًا ما يعتمدون على `.name === "default"`، يكون هذا runtime helper الإضافي تكلفة بلا فائدة كبيرة.
 
-5.107 introduces a new option, `module.parser.javascript.anonymousDefaultExportName`, to control this behavior. It defaults to `true` for applications and `false` for libraries (when `output.library` is set). Apps stay spec-compliant by default; library authors stop paying for the extra runtime helper without having to know about it.
+يضيف 5.107 خيارًا جديدًا باسم `module.parser.javascript.anonymousDefaultExportName` للتحكم في هذا السلوك. تكون قيمته الافتراضية `true` للتطبيقات و`false` للمكتبات عند ضبط `output.library`. تبقى التطبيقات مطابقة للمواصفة افتراضيًا، ويتوقف مؤلفو المكتبات عن دفع تكلفة runtime helper الإضافي بدون الحاجة لمعرفة التفاصيل.
 
 ```js
 // input
@@ -372,11 +372,11 @@ export default function () {
   /* ... */
 }
 
-// with `anonymousDefaultExportName: true` (default for apps)
-// the runtime sets .name = "default" matching native ESM behavior
+// مع `anonymousDefaultExportName: true`، وهي القيمة الافتراضية للتطبيقات
+// يضبط runtime قيمة .name إلى "default" لمطابقة سلوك ESM الأصلي
 ```
 
-You can override the default explicitly:
+يمكنك تجاوز القيمة الافتراضية صراحة:
 
 ```js
 module.exports = {
@@ -392,9 +392,9 @@ module.exports = {
 
 ### Preserving `defer` and `source` Phase on Externals
 
-Webpack now preserves the `defer` and `source` import phase keywords on external dependencies in ESM output, the same way import attributes are already preserved. Previously, the phase keyword was stripped from the emitted statement, so an `import defer * as ns from "x"` against an external lost its deferred semantics in the output.
+يحافظ webpack الآن على كلمات import phase `defer` و`source` في external dependencies عند إخراج ESM، بالطريقة نفسها التي يحافظ بها على import attributes. سابقًا، كانت كلمة phase تُزال من العبارة الصادرة، لذلك كان `import defer * as ns from "x"` ضد external يفقد دلالة التأجيل في output.
 
-For static `module` externals, namespace defer imports and single-default source imports are now emitted as native phase syntax at the top of the bundle:
+بالنسبة لـ static `module` externals، تُصدر namespace defer imports وsingle-default source imports كصيغة phase أصلية في أعلى bundle:
 
 ```js
 // webpack.config.js
@@ -415,7 +415,7 @@ import defer * as ns from "external-mod";
 import source v from "external-mod";
 ```
 
-For dynamic `import` externals, `import.defer("x")` and `import.source("x")` are emitted directly:
+وبالنسبة لـ dynamic `import` externals، يتم إخراج `import.defer("x")` و`import.source("x")` مباشرة:
 
 ```text
 // input
@@ -427,11 +427,11 @@ const ns = await import.defer("external-mod");
 const src = await import.source("external-mod");
 ```
 
-One related improvement: the same external imported with two different phases (or attribute sets) no longer collapses into a single `ExternalModule`. Each combination produces its own emit, so neither phase is silently dropped.
+تحسين مرتبط: عندما يتم استيراد external نفسه بمرحلتين مختلفتين، أو بمجموعة attributes مختلفة، لم يعد يُدمج في `ExternalModule` واحد. كل تركيبة تنتج emit خاصًا بها، لذلك لا تضيع أي phase بصمت.
 
 ### `#__NO_SIDE_EFFECTS__` Annotation
 
-Webpack now supports the [`#__NO_SIDE_EFFECTS__`](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-spec.md#2-const-variable-declaration) annotation to mark functions as pure for better tree shaking. Calls to functions annotated this way can be eliminated from the bundle when their return value is unused, even if the function body is not statically analyzable as pure.
+يدعم webpack الآن annotation باسم [`#__NO_SIDE_EFFECTS__`](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-spec.md#2-const-variable-declaration) لتعليم الدوال كـ pure من أجل tree shaking أفضل. يمكن حذف استدعاءات الدوال المعلّمة بهذه الطريقة من bundle عندما لا تُستخدم قيمة الإرجاع، حتى لو لم يكن جسم الدالة قابلًا للتحليل الثابت كـ pure.
 
 {/* eslint-disable */}
 
@@ -453,19 +453,19 @@ export function realWork() {
 // app.js
 import { createLogger, realWork } from "./utils";
 
-// dropped, because `createLogger` is annotated and its result is unused
+// سيتم حذف هذا لأن `createLogger` معلّمة، ونتيجتها غير مستخدمة
 const unused = createLogger("debug");
 
 realWork();
 ```
 
-W> The annotation currently only takes effect **within the module where it is declared**. Cross-module propagation is planned for a future PR.
+W> تعمل annotation حاليًا فقط **داخل module الذي أُعلنت فيه**. نقلها عبر modules مخطط له في PR مستقبلية.
 
 ## Resolver Updates
 
-Webpack now adds `"module-sync"` to the default `conditionNames` for resolver defaults, aligning with Node.js. Node.js exposes the `module-sync` community condition for synchronously-loadable ESM, and this change affects the ESM, CJS, AMD, worker, wasm, and build-dependency resolvers.
+يضيف webpack الآن `"module-sync"` إلى `conditionNames` الافتراضية في resolver defaults، بما يتوافق مع Node.js. يوفّر Node.js شرط المجتمع `module-sync` لـ ESM القابل للتحميل بشكل متزامن، وهذا التغيير يؤثر في resolvers الخاصة بـ ESM وCJS وAMD وworker وwasm وbuild-dependency.
 
-Concretely, the resolver defaults now include `module-sync` right before `module` in the condition chain:
+بشكل عملي، أصبحت resolver defaults تتضمن `module-sync` مباشرة قبل `module` في سلسلة الشروط:
 
 ```js
 // Before (5.106)
@@ -477,7 +477,7 @@ conditionNames: ["require", "module-sync", "module", "..."];
 conditionNames: ["import", "module-sync", "module", "..."];
 ```
 
-This means packages that publish a `module-sync` export condition in their `package.json` will be picked up automatically without any additional configuration:
+هذا يعني أن الحزم التي تنشر شرط export باسم `module-sync` داخل `package.json` سيتم اختيارها تلقائيًا بدون أي إعداد إضافي:
 
 ```json
 {
@@ -493,9 +493,8 @@ This means packages that publish a `module-sync` export condition in their `pack
 
 ## Bug Fixes
 
-Several bug fixes have been resolved since version [5.106](https://github.com/webpack/webpack/releases/tag/v5.106.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for all the details.
+تم حل عدة bugs منذ الإصدار [5.106](https://github.com/webpack/webpack/releases/tag/v5.106.0). راجع [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) لكل التفاصيل.
 
 ## Thanks
 
-A big thank you to all our contributors and [sponsors](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
-who made Webpack 5.107 possible. Your support, whether through code contributions, documentation, or financial sponsorship, helps keep Webpack evolving and improving for everyone.
+شكر كبير لكل المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring) الذين جعلوا Webpack 5.107 ممكنًا. دعمكم، سواء عبر مساهمات الكود أو التوثيق أو الرعاية المالية، يساعد Webpack على التطور والتحسن للجميع.

From 9650ab5458a519adc872d9c94f5420f87f9e9bd8 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 13:47:04 +0300
Subject: [PATCH 29/35] docs(ar): translate plugins, contribute, loaders,
 guide, migrate and main files to arabic

---
 src/content/branding.mdx                      |  57 ++--
 src/content/comparison.mdx                    |  85 +++--
 src/content/contribute/writing-a-loader.mdx   | 178 +++++-----
 src/content/contribute/writing-a-plugin.mdx   | 269 +++++++--------
 src/content/glossary.mdx                      |  58 ++--
 src/content/guides/hot-module-replacement.mdx |   3 +-
 src/content/guides/shimming.mdx               |  51 +--
 src/content/guides/typescript.mdx             |   3 +-
 src/content/index.mdx                         |  14 +-
 src/content/loaders/index.mdx                 |  86 +++--
 src/content/migrate/3.mdx                     | 228 ++++++-------
 src/content/migrate/4.mdx                     |  56 ++--
 src/content/migrate/5.mdx                     | 309 +++++++++---------
 src/content/migrate/index.mdx                 |   6 +-
 .../plugins/context-replacement-plugin.mdx    |  29 +-
 src/content/plugins/define-plugin.mdx         |  59 ++--
 src/content/plugins/dll-plugin.mdx            | 106 +++---
 src/content/plugins/environment-plugin.mdx    |  41 ++-
 .../eval-source-map-dev-tool-plugin.mdx       |  64 ++--
 .../plugins/hashed-module-ids-plugin.mdx      |  28 +-
 src/content/plugins/html-webpack-plugin.mdx   |  31 +-
 src/content/plugins/ignore-plugin.mdx         |  37 +--
 src/content/plugins/index.mdx                 |  67 ++--
 src/content/plugins/internal-plugins.mdx      | 148 ++++-----
 src/content/plugins/manifest-plugin.mdx       |  27 +-
 .../plugins/module-concatenation-plugin.mdx   |  52 ++-
 .../plugins/module-federation-plugin.mdx      | 129 ++++----
 .../normal-module-replacement-plugin.mdx      |  36 +-
 src/content/plugins/progress-plugin.mdx       |  68 ++--
 .../plugins/source-map-dev-tool-plugin.mdx    |  82 +++--
 src/content/plugins/split-chunks-plugin.mdx   | 245 +++++++-------
 31 files changed, 1240 insertions(+), 1412 deletions(-)

diff --git a/src/content/branding.mdx b/src/content/branding.mdx
index 4116acb1e645..bfa1e1fd4c80 100644
--- a/src/content/branding.mdx
+++ b/src/content/branding.mdx
@@ -1,35 +1,32 @@
 ---
-title: Branding Guidelines
+title: إرشادات الهوية البصرية
 sort: 2
 contributors:
-  - jhnns
-  - skipjack
-  - rouzbeh84
-  - byzyk
+  - RlxChap2
 ---
 
 import BrandingSample from "../components/BrandingSample.jsx";
 
-Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
+هنا تجد إرشادات الهوية البصرية لمشروع **webpack**، مع الأصول والرخصة. للمزيد من التفاصيل وللعثور على [الرخصة](https://github.com/webpack/media/blob/master/LICENSE) التي تنظّم استخدام هذه الأصول، راجع [مستودع الوسائط الرسمي](https://github.com/webpack/media). يمكنك الضغط على أي صورة لتنزيلها.
 
-## The Name
+## الاسم
 
-Webpack can be written with a capital W when used at the start of a sentence, otherwise it should be written in lower-case letters.
+يمكن كتابة Webpack بحرف W كبير عندما يأتي في بداية الجملة. في غير ذلك، يُفضّل كتابته بحروف صغيرة: webpack.
 
-## Logo
+## الشعار
 
-The webpack logo should be placed on a white background with enough space around it like this:
+يجب وضع شعار webpack على خلفية بيضاء مع مساحة كافية حوله، مثل المثال التالي:
 
 <img
   src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png"
-  alt="webpack logo default with proper spacing on light background"
+  alt="الشعار الافتراضي لـ webpack مع مسافة مناسبة حوله على خلفية فاتحة"
 />
 
 [svg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.jpg)
 
-Double the size of the inner dark blue cube to get an idea how much space the logo should have.
+لأخذ فكرة عن مقدار المساحة المطلوبة حول الشعار، تخيّل أن حجم المكعب الأزرق الداكن الداخلي قد تضاعف.
 
-For dark backgrounds, you can use the negative version of the logo:
+للخلفيات الداكنة، يمكنك استخدام النسخة العكسية من الشعار:
 
 export const style = {
   display: "block",
@@ -39,59 +36,59 @@ export const style = {
 <div style={style}>
   <img
     src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png"
-    alt="webpack logo default with proper spacing on light background"
+    alt="الشعار الافتراضي لـ webpack مع مسافة مناسبة حوله على خلفية داكنة"
   />
 </div>
 
 [svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg)
 
-T> Please use the **icon + text** whenever possible.
+T> استخدم نسخة **الأيقونة + النص** كلما كان ذلك ممكنًا.
 
-## Icon only
+## الأيقونة فقط
 
-**The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
+**صُممت الأيقونة للاستخدام في المساحات الضيقة. وكما ذكرنا، الأفضل استخدام الأيقونة مع النص عندما تسمح المساحة بذلك.**
 
 <img
   src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png"
   width="250"
-  alt="icon example"
+  alt="مثال على الأيقونة"
 />
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon.jpg)
 
-Square-sized icon for bigger areas (like avatars or profile pictures):
+أيقونة مربعة للمساحات الأكبر، مثل avatars أو صور الحسابات:
 
 <img
   src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png"
   width="250"
-  alt="icon square big example"
+  alt="مثال على الأيقونة المربعة الكبيرة"
 />
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon-square-big.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-big.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-big.jpg)
 
-Square-sized icon for smaller areas (like favicons):
+أيقونة مربعة للمساحات الأصغر، مثل favicons:
 
 <img
   src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png"
   width="50"
-  alt="icon square small example"
+  alt="مثال على الأيقونة المربعة الصغيرة"
 />
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg)
 
-T> For those of you following our guidelines and have gotten this far, we've made a smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
+T> لمن التزم بالإرشادات ووصل إلى هنا، وفرنا نسخة أصغر مخصصة لاستخدامات custom emoji، مثل Slack أو Gitter.
 
 <img
   src="/assets/icon-square-small-slack.png"
   width="50"
-  alt="icon square small example"
+  alt="مثال على الأيقونة المربعة الصغيرة"
 />
 
-## Color Palette
+## لوحة الألوان
 
-The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
+الألوان التالية مستخدمة في الموقع بتركيبات مختلفة، وكذلك في مجموعة الملابس التي أُطلقت بمساعدة [Open Collective](https://opencollective.com/) و[Threadless](https://medium.com/u/840563ee2a56) عبر [متجر webpack الرسمي](https://webpack.threadless.com/collections/the-final-release-collection/).
 
-| Color Name   | HEX Code      | RGB Code             | Sample                             |
+| اسم اللون    | كود HEX       | كود RGB              | عينة                               |
 | ------------ | ------------- | -------------------- | ---------------------------------- |
 | Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <BrandingSample color='#8dd6f9' /> |
 | Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <BrandingSample color='#1d78c1' /> |
@@ -105,11 +102,11 @@ The following colors are used throughout the site in various combinations and on
 | Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <BrandingSample color='#535353' /> |
 | Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <BrandingSample color='#333333' /> |
 
-In addition, you can grab the following file types directly from these links:
+بالإضافة إلى ذلك، يمكنك تنزيل هذه الأنواع من الملفات مباشرة من الروابط التالية:
 
 [psd](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.psd) | [png](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.png)
 | [ai](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.ai) | [svg](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.svg)
 
-## License
+## الرخصة
 
-The logo and the brand name are **not MIT licensed**. Please check [our LICENSE](https://github.com/webpack/media/blob/master/LICENSE) for usage guidelines.
+الشعار واسم العلامة التجارية **ليسا مرخّصين برخصة MIT**. يرجى مراجعة [LICENSE](https://github.com/webpack/media/blob/master/LICENSE) لمعرفة إرشادات الاستخدام.
diff --git a/src/content/comparison.mdx b/src/content/comparison.mdx
index 61150db89d8c..02bc203357c4 100644
--- a/src/content/comparison.mdx
+++ b/src/content/comparison.mdx
@@ -1,59 +1,54 @@
 ---
-title: Comparison
+title: المقارنة
 sort: 1
 contributors:
-  - pksjce
-  - bebraw
-  - chrisVillanueva
-  - tashian
-  - simon04
-  - byzyk
+  - RlxChap2
 related:
-  - title: JSPM vs. webpack
+  - title: JSPM مقابل webpack
     url: https://ilikekillnerds.com/2015/07/jspm-vs-webpack/
-  - title: webpack vs. Browserify vs. SystemJS
+  - title: webpack مقابل Browserify مقابل SystemJS
     url: https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0
 ---
 
-Webpack is not the only module bundler out there. If you are choosing between using webpack or any of the bundlers below, here is a feature-by-feature comparison on how webpack fares against the current competition.
+webpack ليس أداة تحزيم الوحدات الوحيدة. إذا كنت تفاضل بين استخدام webpack أو إحدى الأدوات التالية، فهذا جدول يقارن الميزات نقطة بنقطة ويوضح كيف يقف webpack أمام المنافسين الحاليين.
 
-| Feature                                                              | webpack/webpack                                                          | jrburke/requirejs                                | substack/node-browserify                            | jspm/jspm-cli                                                                                                                                     | rollup/rollup                                                                | brunch/brunch                                                                              |
-| -------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| Additional chunks are loaded on demand                               | **yes**                                                                  | **yes**                                          | no                                                  | [System.import](https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemimportmodulename--normalizedparentname---promisemodule) | no                                                                           | no                                                                                         |
-| AMD `define`                                                         | **yes**                                                                  | **yes**                                          | [deamdify](https://github.com/jaredhanson/deamdify) | yes                                                                                                                                               | [rollup-plugin-amd](https://github.com/piuccio/rollup-plugin-amd)            | yes                                                                                        |
-| AMD `require`                                                        | **yes**                                                                  | **yes**                                          | no                                                  | yes                                                                                                                                               | no                                                                           | yes                                                                                        |
-| AMD `require` loads on demand                                        | **yes**                                                                  | with manual configuration                        | no                                                  | yes                                                                                                                                               | no                                                                           | no                                                                                         |
-| CommonJS `exports`                                                   | **yes**                                                                  | only wrapping in `define`                        | **yes**                                             | yes                                                                                                                                               | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)          | yes                                                                                        |
-| CommonJS `require`                                                   | **yes**                                                                  | only wrapping in `define`                        | **yes**                                             | yes                                                                                                                                               | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)          | yes                                                                                        |
-| CommonJS `require.resolve`                                           | **yes**                                                                  | no                                               | no                                                  | no                                                                                                                                                | no                                                                           |                                                                                            |
-| Concat in require `require("./fi" + "le")`                           | **yes**                                                                  | no♦                                              | no                                                  | no                                                                                                                                                | no                                                                           |                                                                                            |
-| Debugging support                                                    | **SourceUrl, SourceMaps**                                                | not required                                     | SourceMaps                                          | **SourceUrl, SourceMaps**                                                                                                                         | **SourceUrl, SourceMaps**                                                    | SourceMaps                                                                                 |
-| Dependencies                                                         | 19MB / 127 packages                                                      | 11MB / 118 packages                              | **1.2MB / 1 package**                               | 26MB / 131 packages                                                                                                                               | ?MB / 3 packages                                                             |                                                                                            |
-| ES2015 `import`/`export`                                             | **yes** (webpack 2)                                                      | no                                               | no                                                  | **yes**                                                                                                                                           | **yes**                                                                      | yes, via [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) |
-| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)**                                    | no♦                                              | no                                                  | no                                                                                                                                                | no                                                                           | no                                                                                         |
-| Expressions in require (free) `require(moduleName)`                  | with manual configuration                                                | no♦                                              | no                                                  | no                                                                                                                                                | no                                                                           |                                                                                            |
-| Generate a single bundle                                             | **yes**                                                                  | yes♦                                             | yes                                                 | yes                                                                                                                                               | yes                                                                          | yes                                                                                        |
-| Indirect require `var r = require; r("./file")`                      | **yes**                                                                  | no♦                                              | no                                                  | no                                                                                                                                                | no                                                                           |                                                                                            |
-| Load each file separate                                              | no                                                                       | yes                                              | no                                                  | yes                                                                                                                                               | no                                                                           | no                                                                                         |
-| Mangle path names                                                    | **yes**                                                                  | no                                               | partial                                             | yes                                                                                                                                               | not required (path names are not included in the bundle)                     | no                                                                                         |
-| Minimizing                                                           | [Terser](https://github.com/fabiosantoscode/terser)                      | uglify, closure compiler                         | [uglifyify](https://github.com/hughsk/uglifyify)    | yes                                                                                                                                               | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify)            | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch)                              |
-| Multi pages build with common bundle                                 | with manual configuration                                                | **yes**                                          | with manual configuration                           | with bundle arithmetic                                                                                                                            | no                                                                           | no                                                                                         |
-| Multiple bundles                                                     | **yes**                                                                  | with manual configuration                        | with manual configuration                           | yes                                                                                                                                               | no                                                                           | yes                                                                                        |
-| Node.js built-in libs `require("path")`                              | **yes**                                                                  | no                                               | **yes**                                             | **yes**                                                                                                                                           | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve)  |                                                                                            |
-| Other Node.js stuff                                                  | process, \_\_dir/filename, global                                        | -                                                | process, \_\_dir/filename, global                   | process, \_\_dir/filename, global for cjs                                                                                                         | global ([commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)) |                                                                                            |
-| Plugins                                                              | **yes**                                                                  | yes                                              | **yes**                                             | yes                                                                                                                                               | yes                                                                          | yes                                                                                        |
-| Preprocessing                                                        | **loaders**                                                              | loaders                                          | transforms                                          | plugin translate                                                                                                                                  | plugin transforms                                                            | compilers, optimizers                                                                      |
-| Replacement for browser                                              | `web_modules`, `.web.js`, package.json field, alias configuration option | alias option                                     | package.json field, alias option                    | package.json, alias option                                                                                                                        | no                                                                           |                                                                                            |
-| Requirable files                                                     | file system                                                              | **web**                                          | file system                                         | through plugins                                                                                                                                   | file system or through plugins                                               | file system                                                                                |
-| Runtime overhead                                                     | **243B + 20B per module + 4B per dependency**                            | 14.7kB + 0B per module + (3B + X) per dependency | 415B + 25B per module + (6B + 2X) per dependency    | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip           | **none for ES2015 modules** (other formats may have)                         |                                                                                            |
-| Watch mode                                                           | yes                                                                      | not required                                     | [watchify](https://github.com/browserify/watchify)  | not needed in dev                                                                                                                                 | [rollup-watch](https://github.com/rollup/rollup-watch)                       | yes                                                                                        |
+| الميزة                                                             | webpack/webpack                                                          | jrburke/requirejs                                | substack/node-browserify                            | jspm/jspm-cli                                                                                                                                      | rollup/rollup                                                                | brunch/brunch                                                                              |
+| ------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| تحميل chunks إضافية عند الطلب                                      | **نعم**                                                                  | **نعم**                                          | لا                                                  | [System.import](https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemimportmodulename--normalizedparentname---promisemodule)  | لا                                                                           | لا                                                                                         |
+| AMD `define`                                                       | **نعم**                                                                  | **نعم**                                          | [deamdify](https://github.com/jaredhanson/deamdify) | نعم                                                                                                                                                | [rollup-plugin-amd](https://github.com/piuccio/rollup-plugin-amd)            | نعم                                                                                        |
+| AMD `require`                                                      | **نعم**                                                                  | **نعم**                                          | لا                                                  | نعم                                                                                                                                                | لا                                                                           | نعم                                                                                        |
+| تحميل AMD `require` عند الطلب                                      | **نعم**                                                                  | يتطلب ضبطًا يدويًا                               | لا                                                  | نعم                                                                                                                                                | لا                                                                           | لا                                                                                         |
+| CommonJS `exports`                                                 | **نعم**                                                                  | فقط عند التغليف داخل `define`                    | **نعم**                                             | نعم                                                                                                                                                | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)          | نعم                                                                                        |
+| CommonJS `require`                                                 | **نعم**                                                                  | فقط عند التغليف داخل `define`                    | **نعم**                                             | نعم                                                                                                                                                | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)          | نعم                                                                                        |
+| CommonJS `require.resolve`                                         | **نعم**                                                                  | لا                                               | لا                                                  | لا                                                                                                                                                 | لا                                                                           |                                                                                            |
+| الدمج داخل require `require("./fi" + "le")`                        | **نعم**                                                                  | لا♦                                              | لا                                                  | لا                                                                                                                                                 | لا                                                                           |                                                                                            |
+| دعم التصحيح                                                        | **SourceUrl, SourceMaps**                                                | غير مطلوب                                        | SourceMaps                                          | **SourceUrl, SourceMaps**                                                                                                                          | **SourceUrl, SourceMaps**                                                    | SourceMaps                                                                                 |
+| التبعيات                                                           | 19MB / 127 حزمة                                                          | 11MB / 118 حزمة                                  | **1.2MB / 1 حزمة**                                  | 26MB / 131 حزمة                                                                                                                                    | ?MB / 3 حزم                                                                  |                                                                                            |
+| ES2015 `import`/`export`                                           | **نعم** (webpack 2)                                                      | لا                                               | لا                                                  | **نعم**                                                                                                                                            | **نعم**                                                                      | نعم، عبر [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) |
+| التعابير داخل require (موجهة) `require("./templates/" + template)` | **نعم (تُضمّن كل الملفات المطابقة)**                                     | لا♦                                              | لا                                                  | لا                                                                                                                                                 | لا                                                                           | لا                                                                                         |
+| التعابير داخل require (حرة) `require(moduleName)`                  | يتطلب ضبطًا يدويًا                                                       | لا♦                                              | لا                                                  | لا                                                                                                                                                 | لا                                                                           |                                                                                            |
+| إنشاء bundle واحد                                                  | **نعم**                                                                  | نعم♦                                             | نعم                                                 | نعم                                                                                                                                                | نعم                                                                          | نعم                                                                                        |
+| require غير مباشر `var r = require; r("./file")`                   | **نعم**                                                                  | لا♦                                              | لا                                                  | لا                                                                                                                                                 | لا                                                                           |                                                                                            |
+| تحميل كل ملف على حدة                                               | لا                                                                       | نعم                                              | لا                                                  | نعم                                                                                                                                                | لا                                                                           | لا                                                                                         |
+| تغيير أسماء المسارات                                               | **نعم**                                                                  | لا                                               | جزئيًا                                              | نعم                                                                                                                                                | غير مطلوب (أسماء المسارات لا تُضمّن في bundle)                               | لا                                                                                         |
+| التصغير (Minification)                                             | [Terser](https://github.com/fabiosantoscode/terser)                      | uglify, closure compiler                         | [uglifyify](https://github.com/hughsk/uglifyify)    | نعم                                                                                                                                                | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify)            | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch)                              |
+| بناء صفحات متعددة مع bundle مشترك                                  | يتطلب ضبطًا يدويًا                                                       | **نعم**                                          | يتطلب ضبطًا يدويًا                                  | باستخدام حسابات bundle                                                                                                                             | لا                                                                           | لا                                                                                         |
+| عدة bundles                                                        | **نعم**                                                                  | يتطلب ضبطًا يدويًا                               | يتطلب ضبطًا يدويًا                                  | نعم                                                                                                                                                | لا                                                                           | نعم                                                                                        |
+| مكتبات Node.js المدمجة `require("path")`                           | **نعم**                                                                  | لا                                               | **نعم**                                             | **نعم**                                                                                                                                            | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve)  |                                                                                            |
+| عناصر Node.js الأخرى                                               | process, \_\_dir/filename, global                                        | -                                                | process, \_\_dir/filename, global                   | process, \_\_dir/filename, global لـ cjs                                                                                                           | global ([commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)) |                                                                                            |
+| Plugins                                                            | **نعم**                                                                  | نعم                                              | **نعم**                                             | نعم                                                                                                                                                | نعم                                                                          | نعم                                                                                        |
+| المعالجة المسبقة                                                   | **loaders**                                                              | loaders                                          | تحويلات                                             | تحويل عبر plugin                                                                                                                                   | تحويلات عبر plugin                                                           | compilers, optimizers                                                                      |
+| الاستبدال الخاص بالمتصفح                                           | `web_modules`, `.web.js`, package.json field, alias configuration option | alias option                                     | package.json field, alias option                    | package.json, alias option                                                                                                                         | لا                                                                           |                                                                                            |
+| الملفات التي يمكن طلبها عبر require                                | نظام الملفات                                                             | **web**                                          | نظام الملفات                                        | عبر plugins                                                                                                                                        | نظام الملفات أو عبر plugins                                                  | نظام الملفات                                                                               |
+| الكلفة الإضافية وقت التشغيل                                        | **243B + 20B لكل module + 4B لكل dependency**                            | 14.7kB + 0B لكل module + (3B + X) لكل dependency | 415B + 25B لكل module + (6B + 2X) لكل dependency    | 5.5kB لـ self-executing bundles، و38kB للـ loader الكامل مع polyfill، و0 للـ plain modules، و293B لـ CJS، و139B لـ ES2015 System.register قبل gzip | **لا توجد لوحدات ES2015** (قد توجد في الصيغ الأخرى)                          |                                                                                            |
+| وضع المراقبة                                                       | نعم                                                                      | غير مطلوب                                        | [watchify](https://github.com/browserify/watchify)  | غير مطلوب أثناء التطوير                                                                                                                            | [rollup-watch](https://github.com/rollup/rollup-watch)                       | نعم                                                                                        |
 
-♦ in production mode (opposite in development mode)
+♦ في وضع الإنتاج (والعكس في وضع التطوير)
 
-X is the length of the path string
+X تمثل طول سلسلة المسار.
 
-## Bundling vs. Loading
+## التحزيم (Bundling) مقابل التحميل (Loading)
 
-It's important to note some key differences between _loading_ and _bundling_ modules. A tool like [SystemJS](https://github.com/systemjs/systemjs), which can be found under the hood of [JSPM](https://github.com/jspm/jspm-cli), is used to load and transpile modules at runtime in the browser. This differs significantly from webpack, where modules are transpiled (through "loaders") and bundled before hitting the browser.
+من المهم توضيح بعض الفروقات الأساسية بين تحميل الوحدات وتحزيمها. أداة مثل [SystemJS](https://github.com/systemjs/systemjs)، وهي مستخدمة داخليًا في [JSPM](https://github.com/jspm/jspm-cli)، تُستخدم لتحميل الوحدات وتحويلها وقت التشغيل داخل المتصفح. يختلف هذا كثيرًا عن webpack، حيث تُحوّل الوحدات عبر "loaders" ثم تُحزّم قبل أن تصل إلى المتصفح.
 
-Each method has its advantages and disadvantages. Loading and transpiling modules at runtime can add a lot of overhead for larger sites and applications comprised of many modules. For this reason, SystemJS makes more sense for smaller projects where fewer modules are required. However, this may change a bit as [HTTP/2](https://http2.github.io/) will improve the speed at which files can be transferred from server to client. Note that HTTP/2 doesn't change anything about _transpiling_ modules, which will always take longer when done client-side.
+لكل أسلوب مزاياه وعيوبه. تحميل الوحدات وتحويلها وقت التشغيل قد يضيف كلفة كبيرة على المواقع والتطبيقات الأكبر، خصوصًا عندما تتكون من عدد كبير من الوحدات. لذلك يكون SystemJS أنسب للمشاريع الأصغر التي تحتاج إلى وحدات أقل. قد يتغير هذا جزئيًا مع [HTTP/2](https://http2.github.io/) لأنه يحسن سرعة نقل الملفات من الخادم إلى العميل. لكن لاحظ أن HTTP/2 لا يغير شيئًا في تكلفة تحويل الوحدات، فهي ستبقى أبطأ عندما تتم من جهة العميل.
diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx
index 4ab274cf54bc..ab299a9947f9 100644
--- a/src/content/contribute/writing-a-loader.mdx
+++ b/src/content/contribute/writing-a-loader.mdx
@@ -1,26 +1,17 @@
 ---
-title: Writing a Loader
+title: كتابة Loader
 sort: 2
 contributors:
-  - asulaiman
-  - michael-ciniawsky
-  - byzyk
-  - anikethsaha
-  - jamesgeorge007
-  - chenxsan
-  - dev-itsheng
-  - evenstensberg
-  - hagemaruwu
-  - raj-sapalya
+  - RlxChap2
 ---
 
-A loader is a node module that exports a function. This function is called when a resource should be transformed by this loader. The given function will have access to the [Loader API](/api/loaders/) using the `this` context provided to it.
+الـ loader هو node module يصدّر دالة. تُستدعى هذه الدالة عندما يحتاج resource إلى تحويل بواسطة هذا loader. تحصل الدالة على إمكانية الوصول إلى [Loader API](/api/loaders/) من خلال سياق `this` الذي يمرره webpack لها.
 
-## Setup
+## الإعداد
 
-Before we dig into the different types of loaders, their usage, and examples, let's take a look at the three ways you can develop and test a loader locally.
+قبل أن ندخل في أنواع loaders المختلفة وطريقة استخدامها والأمثلة عليها، لننظر إلى ثلاث طرق يمكنك بها تطوير loader واختباره محليًا.
 
-To test a single loader, you can use `path` to `resolve` a local file within a rule object:
+لاختبار loader واحد، يمكنك استخدام `path` مع `resolve` للإشارة إلى ملف محلي داخل كائن rule:
 
 **webpack.config.js**
 
@@ -47,7 +38,7 @@ export default {
 };
 ```
 
-To test multiple, you can utilize the `resolveLoader.modules` configuration to update where webpack will search for loaders. For example, if you had a local `/loaders` directory in your project:
+لاختبار أكثر من loader، يمكنك استخدام إعداد `resolveLoader.modules` لتغيير الأماكن التي يبحث فيها webpack عن loaders. مثلًا، إذا كان لديك مجلد محلي باسم `/loaders` داخل مشروعك:
 
 **webpack.config.js**
 
@@ -64,27 +55,27 @@ export default {
 };
 ```
 
-By the way, if you've already created a separate repository and package for your loader, you could [`npm link`](https://docs.npmjs.com/cli/link) it to the project in which you'd like to test it out.
+وبالمناسبة، إذا أنشأت مستودعًا وحزمة منفصلين للـ loader، يمكنك استخدام [`npm link`](https://docs.npmjs.com/cli/link) لربطه بالمشروع الذي تريد اختباره فيه.
 
-T> You can use [`webpack-defaults` package](https://github.com/webpack-contrib/webpack-defaults) to generate boilerplate code necessary to start writing your loader.
+T> يمكنك استخدام حزمة [`webpack-defaults`](https://github.com/webpack-contrib/webpack-defaults) لتوليد boilerplate code اللازم للبدء في كتابة loader.
 
-## Simple Usage
+## استخدام بسيط
 
-When a single loader is applied to the resource, the loader is called with only one parameter – a string containing the content of the resource file.
+عند تطبيق loader واحد على resource، يتم استدعاء loader مع parameter واحد فقط: نص يحتوي على محتوى ملف resource.
 
-Synchronous loaders can `return` a single value representing the transformed module. In more complex cases, the loader can return any number of values by using the `this.callback(err, values...)` function. Errors are either passed to the `this.callback` function or thrown in a sync loader.
+يمكن للـ loaders المتزامنة أن تستخدم `return` لإرجاع قيمة واحدة تمثل module بعد التحويل. وفي الحالات الأكثر تعقيدًا، يمكن للـ loader إرجاع أي عدد من القيم باستخدام الدالة `this.callback(err, values...)`. يتم تمرير الأخطاء إلى `this.callback` أو رميها مباشرة من loader متزامن.
 
-The loader is expected to give back one or two values. The first value is a resulting JavaScript code as string or buffer. The second optional value is a SourceMap as JavaScript object.
+من المتوقع أن يعيد loader قيمة واحدة أو قيمتين. القيمة الأولى هي كود JavaScript الناتج كنص أو buffer. والقيمة الثانية اختيارية، وهي SourceMap ككائن JavaScript.
 
-## Complex Usage
+## استخدام معقد
 
-When multiple loaders are chained, it is important to remember that they are executed in reverse order – either right to left or bottom to top depending on array format.
+عند ربط عدة loaders كسلسلة، من المهم تذكر أنها تُنفّذ بترتيب عكسي: من اليمين إلى اليسار، أو من الأسفل إلى الأعلى بحسب صيغة array.
 
-- The last loader, called first, will be passed the contents of the raw resource.
-- The first loader, called last, is expected to return JavaScript and an optional source map.
-- The loaders in between will be executed with the result(s) of the previous loader in the chain.
+- آخر loader، وهو الذي يُستدعى أولًا، يستقبل محتوى resource الخام.
+- أول loader، وهو الذي يُستدعى أخيرًا، يجب أن يرجع JavaScript وsource map اختياريًا.
+- loaders الواقعة بينهما تُنفّذ باستخدام نتائج loader السابق في السلسلة.
 
-In the following example, the `foo-loader` would be passed the raw resource and the `bar-loader` would receive the output of the `foo-loader` and return the final transformed module and a source map if necessary.
+في المثال التالي، سيستقبل `foo-loader` محتوى resource الخام، ثم يستقبل `bar-loader` ناتج `foo-loader` ويرجع module النهائي بعد التحويل وsource map إذا لزم الأمر.
 
 **webpack.config.js**
 
@@ -104,34 +95,27 @@ export default {
 
 ## Pitching loaders
 
-Loaders normally run **right to left**. A loader can also export a
-`pitch` function, which runs **left to right** before the normal phase
-begins. This allows a loader to pass data to its own normal phase or
-short-circuit the remaining loader chain.
+تعمل loaders عادةً **من اليمين إلى اليسار**. ويمكن لـ loader أيضًا تصدير دالة `pitch` تعمل **من اليسار إلى اليمين** قبل أن تبدأ المرحلة العادية. هذا يسمح للـ loader بتمرير بيانات إلى مرحلته العادية، أو باختصار بقية سلسلة loaders.
 
 ```js
 // my-loader.js
 export default function (source) {
-  // Normal phase — runs right to left
+  // المرحلة العادية: تعمل من اليمين إلى اليسار
   const prefix = this.data.value ?? "";
   return `${prefix}\n${source}`;
 }
 
 export function pitch(remainingRequest, precedingRequest, data) {
-  // Pitch phase — runs left to right before normal loaders
+  // مرحلة pitch: تعمل من اليسار إلى اليمين قبل loaders العادية
   data.value = "/* processed by my-loader */";
 }
 ```
 
-T> `data` is shared only between the `pitch` and normal functions of
-the same loader. It is not shared across different loaders in
-the chain.
+T> تتم مشاركة `data` فقط بين دالة `pitch` والدالة العادية للـ loader نفسه. لا تتم مشاركتها بين loaders مختلفة داخل السلسلة.
 
-### Short-circuiting the loader chain
+### اختصار سلسلة loader
 
-If a `pitch` function returns a value, webpack skips the remaining
-loaders to the right and reverses immediately. This can be useful when
-you want to generate module code early and bypass the normal phase.
+إذا أرجعت دالة `pitch` قيمة، يتجاوز webpack بقية loaders الموجودة على اليمين وينعكس الاتجاه فورًا. يفيد هذا عندما تريد توليد كود module مبكرًا وتجاوز المرحلة العادية.
 
 ```js
 export function pitch(remainingRequest) {
@@ -144,52 +128,50 @@ document.head.appendChild(el);
 }
 ```
 
-W> When a `pitch` function returns a value, the default export of that
-loader does not run. Only use this pattern when you intend to replace
-the normal processing pipeline.
+W> عندما ترجع دالة `pitch` قيمة، فإن default export الخاص بذلك loader لا يعمل. استخدم هذا النمط فقط عندما تنوي استبدال مسار المعالجة العادي.
 
-## Guidelines
+## إرشادات
 
-The following guidelines should be followed when writing a loader. They are ordered in terms of importance and some only apply in certain scenarios, read the detailed sections that follow for more information.
+يجب اتباع الإرشادات التالية عند كتابة loader. رُتبت حسب الأهمية، وبعضها لا ينطبق إلا في سيناريوهات معينة. اقرأ الأقسام التفصيلية التالية لمزيد من المعلومات.
 
-- Keep them **simple**.
-- Utilize **chaining**.
-- Emit **modular** output.
-- Make sure they're **stateless**.
-- Employ **loader utilities**.
-- Mark **loader dependencies**.
-- Resolve **module dependencies**.
-- Extract **common code**.
-- Avoid **absolute paths**.
-- Use **peer dependencies**.
+- اجعله **بسيطًا**.
+- استفد من **chaining**.
+- أخرج ناتجًا **modular**.
+- تأكد من أنه **stateless**.
+- استخدم **loader utilities**.
+- علّم **loader dependencies**.
+- حل **module dependencies**.
+- استخرج **الكود المشترك**.
+- تجنب **المسارات المطلقة**.
+- استخدم **peer dependencies**.
 
-### Simple
+### البساطة
 
-Loaders should do only a single task. This not only makes the job of maintaining each loader easier, but also allows them to be chained for usage in more scenarios.
+ينبغي أن يؤدي loader مهمة واحدة فقط. هذا لا يجعل صيانته أسهل فحسب، بل يسمح أيضًا بربطه مع loaders أخرى لاستخدامه في سيناريوهات أكثر.
 
 ### Chaining
 
-Take advantage of the fact that loaders can be chained together. Instead of writing a single loader that tackles five tasks, write five simpler loaders that divide this effort. Isolating them not only keeps each individual loader simple, but may allow for them to be used for something you hadn't thought of originally.
+استفد من أن loaders يمكن ربطها معًا. بدل كتابة loader واحد يتعامل مع خمس مهام، اكتب خمسة loaders أبسط تقسم هذا العمل. عزل المهام يجعل كل loader بسيطًا، وقد يسمح باستخدامه في أشياء لم تكن تفكر فيها أصلًا.
 
-Take the case of rendering a template file with data specified via loader options or query parameters. It could be written as a single loader that compiles the template from source, executes it and returns a module that exports a string containing the HTML code. However, in accordance with guidelines, an `apply-loader` exists that can be chained with other open source loaders:
+خذ مثال تحويل ملف template باستخدام بيانات محددة عبر خيارات loader أو query parameters. يمكن كتابته كـ loader واحد يترجم template من المصدر، ثم ينفذه، ثم يرجع module يصدّر نص HTML. لكن باتباع الإرشادات، يوجد `apply-loader` يمكن ربطه مع loaders مفتوحة المصدر:
 
-- `pug-loader`: Convert template to a module that exports a function.
-- `apply-loader`: Executes the function with loader options and returns raw HTML.
-- `html-loader`: Accepts HTML and outputs a valid JavaScript module.
+- `pug-loader`: يحوّل template إلى module يصدّر دالة.
+- `apply-loader`: ينفّذ الدالة باستخدام خيارات loader ويرجع HTML خام.
+- `html-loader`: يستقبل HTML ويخرج JavaScript module صالحًا.
 
-T> The fact that loaders can be chained also means they don't necessarily have to output JavaScript. As long as the next loader in the chain can handle its output, the loader can return any type of module.
+T> كون loaders قابلة للربط يعني أيضًا أنها لا تحتاج دائمًا إلى إخراج JavaScript. طالما أن loader التالي في السلسلة يستطيع التعامل مع الناتج، يمكن للـ loader إرجاع أي نوع من modules.
 
 ### Modular
 
-Keep the output modular. Loader generated modules should respect the same design principles as normal modules.
+حافظ على ناتج modular. يجب أن تحترم modules المولدة بواسطة loader مبادئ التصميم نفسها التي تحترمها modules العادية.
 
 ### Stateless
 
-Make sure the loader does not retain state between module transformations. Each run should always be independent of other compiled modules as well as previous compilations of the same module.
+تأكد من أن loader لا يحتفظ بحالة بين تحويلات modules. يجب أن يكون كل تشغيل مستقلًا عن modules الأخرى التي تم تجميعها، وكذلك عن compilations السابقة للـ module نفسه.
 
 ### Loader Utilities
 
-Take advantage of the [`loader-utils`](https://github.com/webpack/loader-utils) package which provides a variety of useful tools. Along with `loader-utils`, the [`schema-utils`](https://github.com/webpack/schema-utils) package should be used for consistent JSON Schema based validation of loader options. Here's a brief example that utilizes both:
+استفد من حزمة [`loader-utils`](https://github.com/webpack/loader-utils)، فهي توفر أدوات مفيدة متنوعة. وبجانب `loader-utils`، ينبغي استخدام حزمة [`schema-utils`](https://github.com/webpack/schema-utils) للتحقق المنتظم من خيارات loader بناءً على JSON Schema. هذا مثال مختصر يستخدم الحزمتين:
 
 **loader.js**
 
@@ -216,31 +198,31 @@ export default function (source) {
 
   console.log("The request path", urlToRequest(this.resourcePath));
 
-  // Apply some transformations to the source...
+  // طبّق بعض التحويلات على source...
 
   return `export default ${JSON.stringify(source)}`;
 }
 ```
 
-### Data Sharing
+### مشاركة البيانات
 
-In webpack, loaders can be chained together and share data with subsequent loaders in the chain. To achieve this, you can pass data along with the content (source code) using the `this.callback` method in raw loaders. In the default exported function of a raw loader, you can pass data using the fourth argument of `this.callback`.
+في webpack، يمكن ربط loaders معًا ومشاركة البيانات مع loaders التالية في السلسلة. لتحقيق ذلك، يمكنك تمرير البيانات مع المحتوى، أي source code، باستخدام الدالة `this.callback` داخل raw loaders. في الدالة المصدّرة افتراضيًا من raw loader، يمكنك تمرير البيانات باستخدام argument الرابع من `this.callback`.
 
 ```js
 export default function (source) {
   const options = getOptions(this);
-  // Pass data using the fourth argument of this.callback
+  // مرر البيانات باستخدام argument الرابع من this.callback
   this.callback(null, `export default ${JSON.stringify(source)}`, null, {
     some: data,
   });
 }
 ```
 
-In the example above, `some` property in the fourth argument of `this.callback` is used to pass data to the next chained loader.
+في المثال السابق، تُستخدم الخاصية `some` في argument الرابع من `this.callback` لتمرير البيانات إلى loader التالي في السلسلة.
 
 ### Loader Dependencies
 
-If a loader uses external resources (i.e. by reading from filesystem), they **must** indicate it. This information is used to invalidate cacheable loaders and recompile in watch mode. Here's a brief example of how to accomplish this using the `addDependency` method:
+إذا كان loader يستخدم موارد خارجية، مثل القراءة من نظام الملفات، **فيجب** أن يوضح ذلك. تُستخدم هذه المعلومة لإبطال cacheable loaders وإعادة compilation في watch mode. هذا مثال مختصر على فعل ذلك باستخدام الدالة `addDependency`:
 
 **loader.js**
 
@@ -262,24 +244,24 @@ export default function (source) {
 
 ### Module Dependencies
 
-Depending on the type of module, there may be a different schema used to specify dependencies. In CSS for example, the `@import` and `url(...)` statements are used. These dependencies should be resolved by the module system.
+بحسب نوع module، قد توجد طريقة مختلفة لتحديد dependencies. في CSS مثلًا، تُستخدم عبارات `@import` و`url(...)`. يجب حل هذه dependencies بواسطة نظام modules.
 
-This can be done in one of two ways:
+يمكن فعل ذلك بإحدى طريقتين:
 
-- By transforming them to `require` statements.
-- Using the `this.resolve` function to resolve the path.
+- تحويلها إلى عبارات `require`.
+- استخدام الدالة `this.resolve` لحل المسار.
 
-The `css-loader` is a good example of the first approach. It transforms dependencies to `require`s, by replacing `@import` statements with a `require` to the other stylesheet and `url(...)` with a `require` to the referenced file.
+يُعد `css-loader` مثالًا جيدًا على الطريقة الأولى. فهو يحوّل dependencies إلى `require`s، عبر استبدال عبارات `@import` بـ `require` إلى stylesheet الأخرى، واستبدال `url(...)` بـ `require` إلى الملف المشار إليه.
 
-In the case of the `less-loader`, it cannot transform each `@import` to a `require` because all `.less` files must be compiled in one pass for variables and mixin tracking. Therefore, the `less-loader` extends the less compiler with custom path resolving logic. It then takes advantage of the second approach, `this.resolve`, to resolve the dependency through webpack.
+في حالة `less-loader`، لا يستطيع تحويل كل `@import` إلى `require` لأن كل ملفات `.less` يجب أن تُجمّع في مرور واحد لتتبع variables وmixins. لذلك يوسّع `less-loader` compiler الخاص بـ less بمنطق مخصص لحل المسارات. ثم يستفيد من الطريقة الثانية، `this.resolve`، لحل dependency عبر webpack.
 
-T> If the language only accepts relative urls (e.g. `url(file)` always refers to `./file`), you can use the `~` convention to specify references to installed modules (e.g. those in `node_modules`). In the case of `url`, that would look something like `url('~some-library/image.jpg')`.
+T> إذا كانت اللغة لا تقبل إلا URLs نسبية، مثل أن `url(file)` تشير دائمًا إلى `./file`، يمكنك استخدام اصطلاح `~` للإشارة إلى modules المثبتة، مثل الموجودة في `node_modules`. في حالة `url`، قد يبدو ذلك هكذا: `url('~some-library/image.jpg')`.
 
-### Common Code
+### الكود المشترك
 
-- Avoid generating common code in every module the loader processes. Instead, create a runtime file in the loader and `import` (or `require`) it as a shared module:
+- تجنب توليد الكود المشترك في كل module يعالجه loader. بدلًا من ذلك، أنشئ ملف runtime داخل loader، ثم استخدم `import` أو `require` له كـ module مشترك:
 
-W> While CommonJS syntax (`require`) is completely supported, we highly recommend using ECMAScript Modules (`import`) for new loaders.
+W> على الرغم من أن صيغة CommonJS، أي `require`، مدعومة بالكامل، فإننا نوصي بشدة باستخدام ECMAScript Modules، أي `import`، عند كتابة loaders جديدة.
 
 **src/loader-runtime.js**
 
@@ -299,7 +281,7 @@ export default function runtime(params) {
 import runtime from "./loader-runtime.js";
 
 export default function loader(source) {
-  // Custom loader logic
+  // منطق loader المخصص
 
   return `${runtime({
     source,
@@ -308,12 +290,12 @@ export default function loader(source) {
 }
 ```
 
-### Absolute Paths
+### المسارات المطلقة
 
-Don't insert absolute paths into the module code as they break hashing when the root for the project is moved. You can use below code to convert absolute paths to relative ones.
+لا تُدخل مسارات مطلقة داخل كود module، لأنها تكسر hashing عندما يتم نقل جذر المشروع. يمكنك استخدام الكود التالي لتحويل المسارات المطلقة إلى مسارات نسبية.
 
 ```js
-// `loaderContext` is same as `this` inside loader function
+// `loaderContext` هو نفسه `this` داخل دالة loader
 JSON.stringify(
   loaderContext.utils.contextify(
     loaderContext.context || loaderContext.rootContext,
@@ -324,9 +306,9 @@ JSON.stringify(
 
 ### Peer Dependencies
 
-If the loader you're working on is a simple wrapper around another package, then you should include the package as a `peerDependency`. This approach allows the application's developer to specify the exact version in the `package.json` if desired.
+إذا كان loader الذي تعمل عليه مجرد wrapper بسيط حول حزمة أخرى، فيجب إضافة هذه الحزمة كـ `peerDependency`. هذا الأسلوب يسمح لمطور التطبيق بتحديد الإصدار الدقيق داخل `package.json` إذا أراد.
 
-For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpack/sass-loader/blob/main/package.json) as peer dependency like so:
+مثلًا، يحدد `sass-loader` حزمة [`node-sass`](https://github.com/webpack/sass-loader/blob/main/package.json) كـ peer dependency بهذا الشكل:
 
 ```json
 {
@@ -336,9 +318,9 @@ For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpa
 }
 ```
 
-## Testing
+## الاختبار
 
-So you've written a loader, followed the guidelines above, and have it set up to run locally. What's next? Let's go through a unit testing example to ensure our loader is working the way we expect. We'll be using the [Jest](https://jestjs.io/) framework to do this. We'll also install `babel-jest` and some presets that will allow us to use the `import` / `export` and `async` / `await`. Let's start by installing and saving these as a `devDependencies`:
+كتبت loader واتبعت الإرشادات السابقة وجهزته للتشغيل محليًا. ما الخطوة التالية؟ سنمر على مثال unit testing للتأكد من أن loader يعمل كما نتوقع. سنستخدم إطار [Jest](https://jestjs.io/) لهذا الغرض. وسنثبت أيضًا `babel-jest` وبعض presets التي تسمح لنا باستخدام `import` / `export` و`async` / `await`. لنبدأ بتثبيت هذه الحزم وحفظها كـ `devDependencies`:
 
 ```bash
 npm install --save-dev jest babel-jest @babel/core @babel/preset-env
@@ -361,7 +343,7 @@ export default {
 };
 ```
 
-Our loader will process `.txt` files and replace any instance of `[name]` with the `name` option given to the loader. Then it will output a valid JavaScript module containing the text as its default export:
+سيعالج loader ملفات `.txt` ويستبدل أي ظهور لـ `[name]` بقيمة خيار `name` الممررة إلى loader. ثم سيخرج JavaScript module صالحًا يحتوي على النص كـ default export:
 
 **src/loader.js**
 
@@ -375,7 +357,7 @@ export default function loader(source) {
 }
 ```
 
-We'll use this loader to process the following file:
+سنستخدم هذا loader لمعالجة الملف التالي:
 
 **test/example.txt**
 
@@ -383,7 +365,7 @@ We'll use this loader to process the following file:
 Hey [name]!
 ```
 
-Pay close attention to this next step as we'll be using the [Node.js API](/api/node) and [`memfs`](https://github.com/streamich/memfs) to execute webpack. This lets us avoid emitting `output` to disk and will give us access to the `stats` data which we can use to grab our transformed module:
+انتبه جيدًا للخطوة التالية؛ سنستخدم [Node.js API](/api/node) و[`memfs`](https://github.com/streamich/memfs) لتشغيل webpack. هذا يسمح لنا بتجنب كتابة `output` على القرص، ويمنحنا وصولًا إلى بيانات `stats` التي يمكننا استخدامها لجلب module بعد التحويل:
 
 ```bash
 npm install --save-dev webpack memfs
@@ -433,9 +415,9 @@ export default (fixture, options = {}) => {
 };
 ```
 
-T> In this case, we've inlined our webpack configuration but you can also accept a configuration as a parameter to the exported function. This would allow you to test multiple setups using the same compiler module.
+T> في هذه الحالة وضعنا إعدادات webpack مباشرة داخل الملف، لكن يمكنك أيضًا قبول configuration كـ parameter للدالة المصدّرة. هذا يسمح لك باختبار عدة إعدادات باستخدام compiler module نفسه.
 
-And now, finally, we can write our test and add an npm script to run it:
+والآن، أخيرًا، يمكننا كتابة الاختبار وإضافة npm script لتشغيله:
 
 **test/loader.test.js**
 
@@ -466,7 +448,7 @@ test("Inserts name and outputs JavaScript", async () => {
 }
 ```
 
-With everything in place, we can run it and see if our new loader passes the test:
+بعد تجهيز كل شيء، يمكننا تشغيل الاختبار ورؤية ما إذا كان loader الجديد ينجح:
 
 ```bash
  PASS  test/loader.test.js
@@ -479,4 +461,4 @@ Time:        1.853s, estimated 2s
 Ran all test suites.
 ```
 
-It worked! At this point you should be ready to start developing, testing, and deploying your own loaders. We hope that you'll share your creations with the rest of the community!
+نجح الاختبار. في هذه المرحلة يجب أن تكون جاهزًا لبدء تطوير loaders الخاصة بك واختبارها ونشرها. ونأمل أن تشارك ما تبنيه مع بقية المجتمع.
diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx
index d9fe07662278..913538971416 100644
--- a/src/content/contribute/writing-a-plugin.mdx
+++ b/src/content/contribute/writing-a-plugin.mdx
@@ -1,41 +1,32 @@
 ---
-title: Writing a Plugin
+title: كتابة Plugin
 sort: 3
 contributors:
-  - slavafomin
-  - tbroadley
-  - nveenjain
-  - iamakulov
-  - byzyk
-  - franjohn21
-  - EugeneHlushko
-  - snitin315
-  - rahul3v
-  - jamesgeorge007
+  - RlxChap2
 ---
 
-Plugins expose the full potential of the webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the webpack build process. Building plugins is a bit more advanced than building loaders, because you'll need to understand some of the webpack low-level internals to hook into them. Be prepared to read some source code!
+تفتح plugins كامل قدرات محرك webpack أمام مطوري الطرف الثالث. باستخدام callbacks الخاصة بمراحل build، يستطيع المطورون إدخال سلوكياتهم الخاصة داخل عملية build في webpack. كتابة plugins أكثر تقدمًا قليلًا من كتابة loaders؛ لأنك ستحتاج إلى فهم بعض التفاصيل الداخلية منخفضة المستوى في webpack حتى تعرف أين تدخل. كن مستعدًا لقراءة جزء من الكود المصدري.
 
-## Creating a Plugin
+## إنشاء Plugin
 
-A plugin for webpack consists of:
+يتكون plugin في webpack من:
 
-- A named JavaScript function or a JavaScript class.
-- Defines `apply` method in its prototype.
-- Specifies an [event hook](/api/compiler-hooks/) to tap into.
-- Manipulates webpack internal instance specific data.
-- Invokes webpack provided callback after functionality is complete.
+- دالة JavaScript لها اسم، أو صنف JavaScript.
+- يعرّف دالة `apply` على prototype الخاص به.
+- يحدد [event hook](/api/compiler-hooks/) للدخول إليه.
+- يتعامل مع بيانات داخلية خاصة بـ instance في webpack.
+- يستدعي callback التي يوفرها webpack بعد اكتمال عمله.
 
 ```js
-// A JavaScript class.
+// صنف JavaScript.
 class MyExampleWebpackPlugin {
-  // Define `apply` as its prototype method which is supplied with compiler as its argument
+  // عرّف `apply` كدالة على prototype، وتستقبل compiler كـ argument
   apply(compiler) {
-    // Hook into the compilation
+    // الدخول إلى compilation
     compiler.hooks.thisCompilation.tap(
       "MyExampleWebpackPlugin",
       (compilation) => {
-        // Specify the asset processing hook
+        // تحديد hook الخاص بمعالجة assets
         compilation.hooks.processAssets.tap(
           {
             name: "MyExampleWebpackPlugin",
@@ -55,19 +46,17 @@ class MyExampleWebpackPlugin {
 }
 ```
 
-## Basic plugin architecture
+## البنية الأساسية للـ plugin
 
-Plugins are instantiated objects with an `apply` method on their prototype. This `apply` method is called once by the webpack compiler while installing the plugin. The `apply` method is given a reference to the underlying webpack compiler, which grants access to compiler callbacks. A plugin is structured as follows:
+الـ plugins هي كائنات يتم إنشاء instance منها، وتحتوي على دالة `apply` في prototype. يستدعي webpack compiler هذه الدالة مرة واحدة أثناء تثبيت plugin. تحصل دالة `apply` على reference إلى compiler الأساسي في webpack، وهذا يمنحها وصولًا إلى compiler callbacks. تكون بنية plugin عادةً بهذا الشكل:
 
 ```js
 class HelloWorldPlugin {
   apply(compiler) {
-    // This hook runs when the build process is fully completed
+    // يعمل هذا hook عندما تكتمل عملية build بالكامل
     compiler.hooks.done.tap(
       "Hello World Plugin",
-      (
-        stats /* stats is passed as an argument when done hook is tapped.  */,
-      ) => {
+      (stats /* يتم تمرير stats كـ argument عند استخدام done hook.  */) => {
         console.log("Hello World!");
       },
     );
@@ -77,24 +66,24 @@ class HelloWorldPlugin {
 export default HelloWorldPlugin;
 ```
 
-Then to use the plugin, include an instance in your webpack configuration `plugins` array:
+لاستخدام plugin، أضف instance منه داخل array المسماة `plugins` في إعدادات webpack:
 
 ```js
 // webpack.config.js
 import HelloWorldPlugin from "hello-world";
 
 export default {
-  // ... configuration settings here ...
+  // ... إعداداتك هنا ...
   plugins: [new HelloWorldPlugin({ options: true })],
 };
 ```
 
-A familiar way to validate plugin options in webpack versions **before `5.106`** is to use [`schema-utils`](https://github.com/webpack/schema-utils) in the constructor:
+الطريقة المعتادة للتحقق من خيارات plugin في إصدارات webpack **قبل `5.106`** هي استخدام [`schema-utils`](https://github.com/webpack/schema-utils) داخل constructor:
 
 ```js
 import { validate } from "schema-utils";
 
-// schema for options object
+// schema لكائن options
 const schema = {
   type: "object",
   properties: {
@@ -116,7 +105,7 @@ export default class HelloWorldPlugin {
 }
 ```
 
-Starting in webpack `5.106`, you can move that validation into `apply()` by tapping `compiler.hooks.validate` and calling `compiler.validate(...)` instead:
+ابتداءً من webpack `5.106`، يمكنك نقل التحقق إلى `apply()` عبر الدخول إلى `compiler.hooks.validate` واستدعاء `compiler.validate(...)` بدلًا من ذلك:
 
 ```js
 export default class HelloWorldPlugin {
@@ -135,18 +124,18 @@ export default class HelloWorldPlugin {
 }
 ```
 
-W> This validation flow is skipped when webpack is configured with `validate: false`. With `experiments.futureDefaults`, validation is enabled by default in development mode and disabled by default in production mode.
+W> يتم تجاوز مسار التحقق هذا عندما تكون إعدادات webpack مضبوطة على `validate: false`. ومع `experiments.futureDefaults` يكون التحقق مفعّلًا افتراضيًا في development mode ومعطّلًا افتراضيًا في production mode.
 
-## Compiler and Compilation
+## Compiler وCompilation
 
-Among the two most important resources while developing plugins are the [`compiler`](/api/node/#compiler-instance) and [`compilation`](/api/compilation-hooks/) objects. Understanding their roles is an important first step in extending the webpack engine.
+من أهم الموارد أثناء تطوير plugins كائنان: [`compiler`](/api/node/#compiler-instance) و[`compilation`](/api/compilation-hooks/). فهم دور كل واحد منهما خطوة أولى مهمة لتوسيع محرك webpack.
 
 ```js
 class HelloCompilationPlugin {
   apply(compiler) {
-    // Tap into compilation hook which gives compilation as argument to the callback function
+    // الدخول إلى compilation hook الذي يمرر compilation كـ argument إلى callback
     compiler.hooks.compilation.tap("HelloCompilationPlugin", (compilation) => {
-      // Now we can tap into various hooks available through compilation
+      // الآن يمكننا الدخول إلى hooks المتاحة عبر compilation
       compilation.hooks.optimize.tap("HelloCompilationPlugin", () => {
         console.log("Assets are being optimized.");
       });
@@ -157,15 +146,15 @@ class HelloCompilationPlugin {
 export default HelloCompilationPlugin;
 ```
 
-For the list of hooks available on `compiler`, `compilation`, and other important objects, see the [plugins API](/api/plugins/) docs.
+للحصول على قائمة hooks المتاحة على `compiler` و`compilation` والكائنات المهمة الأخرى، راجع توثيق [plugins API](/api/plugins/).
 
-## Async event hooks
+## Event hooks غير متزامنة
 
-Some plugin hooks are asynchronous. To tap into them, we can use `tap` method which will behave in synchronous manner or use one of `tapAsync` method or `tapPromise` method which are asynchronous methods.
+بعض plugin hooks غير متزامنة. للدخول إليها يمكن استخدام `tap`، والتي تتصرف بشكل متزامن، أو استخدام `tapAsync` أو `tapPromise`، وهما طريقتان غير متزامنتين.
 
 ### tapAsync
 
-When we use `tapAsync` method to tap into plugins, we need to call the callback function which is supplied as the last argument to our function.
+عند استخدام `tapAsync` للدخول إلى plugins، يجب استدعاء دالة callback التي تُمرر كآخر argument إلى دالتنا.
 
 ```js
 class HelloAsyncPlugin {
@@ -173,7 +162,7 @@ class HelloAsyncPlugin {
     compiler.hooks.emit.tapAsync(
       "HelloAsyncPlugin",
       (compilation, callback) => {
-        // Do something async...
+        // نفّذ عملًا غير متزامن...
         setTimeout(() => {
           console.log("Done with async work...");
           callback();
@@ -188,7 +177,7 @@ export default HelloAsyncPlugin;
 
 #### tapPromise
 
-When we use `tapPromise` method to tap into plugins, we need to return a promise which resolves when our asynchronous task is completed.
+عند استخدام `tapPromise` للدخول إلى plugins، يجب إرجاع Promise يتم حلّها عند اكتمال المهمة غير المتزامنة.
 
 ```js
 class HelloAsyncPlugin {
@@ -196,7 +185,7 @@ class HelloAsyncPlugin {
     compiler.hooks.emit.tapPromise(
       "HelloAsyncPlugin",
       (compilation) =>
-        // return a Promise that resolves when we are done...
+        // أرجع Promise تُحل عندما ننتهي...
         new Promise((resolve, reject) => {
           setTimeout(() => {
             console.log("Done with async work...");
@@ -210,11 +199,11 @@ class HelloAsyncPlugin {
 export default HelloAsyncPlugin;
 ```
 
-## Example
+## مثال
 
-Once we can latch onto the webpack compiler and each individual compilations, the possibilities become endless for what we can do with the engine itself. We can reformat existing files, create derivative files, or fabricate entirely new assets.
+بعد أن نستطيع الإمساك بـ webpack compiler وبكل compilation منفردة، تصبح الاحتمالات كثيرة جدًا. يمكننا إعادة تنسيق ملفات موجودة، أو إنشاء ملفات مشتقة، أو توليد assets جديدة بالكامل.
 
-Let's write an example plugin that generates a new build file called `assets.md`, the contents of which will list all of the asset files in our build. This plugin might look something like this:
+سنكتب مثال plugin ينشئ ملف build جديدًا باسم `assets.md`، ويحتوي هذا الملف على قائمة بكل ملفات assets الموجودة في build. قد يبدو plugin بهذا الشكل:
 
 ```js
 class FileListPlugin {
@@ -222,55 +211,55 @@ class FileListPlugin {
     outputFile: "assets.md",
   };
 
-  // Any options should be passed in the constructor of your plugin,
-  // (this is a public API of your plugin).
+  // يجب تمرير أي options عبر constructor الخاص بالـ plugin،
+  // فهذا جزء من public API للـ plugin.
   constructor(options = {}) {
-    // Applying user-specified options over the default options
-    // and making merged options further available to the plugin methods.
-    // You should probably validate all the options here as well.
+    // تطبيق options التي حددها المستخدم فوق options الافتراضية،
+    // وإتاحة options المدمجة لاحقًا لدوال plugin.
+    // غالبًا يجب أن تتحقق من كل options هنا أيضًا.
     this.options = { ...FileListPlugin.defaultOptions, ...options };
   }
 
   apply(compiler) {
     const pluginName = FileListPlugin.name;
 
-    // webpack module instance can be accessed from the compiler object,
-    // this ensures that correct version of the module is used
-    // (do not require/import the webpack or any symbols from it directly).
+    // يمكن الوصول إلى instance الخاصة بـ webpack module من كائن compiler،
+    // وهذا يضمن استخدام الإصدار الصحيح من module
+    // لا تستخدم require/import لـ webpack أو أي رموز منه مباشرة.
     const { webpack } = compiler;
 
-    // Compilation object gives us reference to some useful constants.
+    // يعطينا كائن Compilation reference إلى ثوابت مفيدة.
     const { Compilation } = webpack;
 
-    // RawSource is one of the "sources" classes that should be used
-    // to represent asset sources in compilation.
+    // RawSource أحد أصناف "sources" التي يجب استخدامها
+    // لتمثيل مصادر assets داخل compilation.
     const { RawSource } = webpack.sources;
 
-    // Tapping to the "thisCompilation" hook in order to further tap
-    // to the compilation process on an earlier stage.
+    // الدخول إلى hook "thisCompilation" حتى ندخل لاحقًا
+    // إلى عملية compilation في مرحلة مبكرة.
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
-      // Tapping to the assets processing pipeline on a specific stage.
+      // الدخول إلى مسار معالجة assets في مرحلة محددة.
       compilation.hooks.processAssets.tap(
         {
           name: pluginName,
 
-          // Using one of the later asset processing stages to ensure
-          // that all assets were already added to the compilation by other plugins.
+          // استخدام مرحلة متأخرة من مراحل معالجة assets للتأكد
+          // من أن كل assets أُضيفت بالفعل إلى compilation بواسطة plugins أخرى.
           stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
         },
         (assets) => {
-          // "assets" is an object that contains all assets
-          // in the compilation, the keys of the object are pathnames of the assets
-          // and the values are file sources.
+          // "assets" هو object يحتوي على كل assets
+          // داخل compilation. مفاتيح object هي مسارات assets
+          // والقيم هي مصادر الملفات.
 
-          // Iterating over all the assets and
-          // generating content for our Markdown file.
+          // المرور على كل assets
+          // وتوليد محتوى ملف Markdown.
           const content = `# In this build:\n\n${Object.keys(assets)
             .map((filename) => `- ${filename}`)
             .join("\n")}`;
 
-          // Adding new asset to the compilation, so it would be automatically
-          // generated by the webpack in the output directory.
+          // إضافة asset جديد إلى compilation، حتى يولده webpack
+          // تلقائيًا داخل مجلد output.
           compilation.emitAsset(
             this.options.outputFile,
             new RawSource(content),
@@ -289,17 +278,17 @@ export default FileListPlugin;
 ```js
 import FileListPlugin from "./file-list-plugin.js";
 
-// Use the plugin in your webpack configuration:
+// استخدم plugin داخل إعدادات webpack:
 export default {
   // …
 
   plugins: [
-    // Adding the plugin with the default options
+    // إضافة plugin بالخيارات الافتراضية
     new FileListPlugin(),
 
-    // OR:
+    // أو:
 
-    // You can choose to pass any supported options to it:
+    // يمكنك تمرير أي options مدعومة:
     new FileListPlugin({
       outputFile: "my-assets.md",
     }),
@@ -307,7 +296,7 @@ export default {
 };
 ```
 
-This will generate a markdown file with chosen name that looks like this:
+سيولّد هذا ملف Markdown بالاسم الذي اخترته، وسيبدو مثل:
 
 ```markdown
 # In this build:
@@ -317,20 +306,17 @@ This will generate a markdown file with chosen name that looks like this:
 - index.html
 ```
 
-T> We are using synchronous `tap()` method to tap into the `processAssets` hook because we don't need to perform any asynchronous operations in the example above. However, the `processAssets` hook is an asynchronous one, so you can also use `tapPromise()` or `tapAsync()` if you actually need to.
+T> نستخدم الدالة المتزامنة `tap()` للدخول إلى hook المسمى `processAssets` لأننا لا نحتاج في المثال السابق إلى تنفيذ أي عمليات غير متزامنة. لكن hook `processAssets` نفسه غير متزامن، لذلك يمكنك استخدام `tapPromise()` أو `tapAsync()` إذا كنت تحتاج ذلك فعلًا.
 
-T> The [`processAssets`](/api/compilation-hooks/#processassets) hook also supports the `additionalAssets` property, that allows your plugin to intercept not only assets that were added by other plugins prior to the execution of the specified stage, but also for assets that were added on a later stages. This allows to intercept absolutely all the assets which are part of the compilation. However, in our example we are fine with using the `SUMMARIZE` stage to capture all the assets generated on previous stages (this should account for all assets in general case).
+T> يدعم hook [`processAssets`](/api/compilation-hooks/#processassets) أيضًا الخاصية `additionalAssets`، والتي تسمح لـ plugin بالتقاط assets التي أُضيفت بواسطة plugins أخرى قبل تنفيذ المرحلة المحددة، وكذلك assets التي تُضاف في مراحل لاحقة. هذا يسمح بالتقاط كل assets التي هي جزء من compilation. في مثالنا، يكفينا استخدام مرحلة `SUMMARIZE` لالتقاط assets التي وُلدت في المراحل السابقة، وهذا يغطي عادةً كل assets.
 
-## Watching for file changes
+## مراقبة تغييرات الملفات
 
-When webpack runs in watch mode (`webpack --watch` or `webpack serve`),
-it creates a new compilation for each rebuild triggered by file changes.
+عندما يعمل webpack في watch mode، مثل `webpack --watch` أو `webpack serve`، فإنه ينشئ compilation جديدًا لكل rebuild يحدث بسبب تغييرات الملفات.
 
-The `compiler.modifiedFiles` Set lets your plugin know **which specific
-files triggered the rebuild**, so you can skip expensive work for unrelated files.
+تسمح مجموعة `compiler.modifiedFiles` للـ plugin بمعرفة **الملفات المحددة التي سببت rebuild**، وبالتالي يمكنك تجاوز الأعمال المكلفة عندما تكون الملفات المتغيرة غير مهمة للـ plugin.
 
-This is useful for plugins that need to react only to specific file changes
-(e.g., regenerating assets, reprocessing templates, or invalidating caches).
+هذا مفيد للـ plugins التي تحتاج إلى التفاعل مع تغييرات ملفات معينة فقط، مثل إعادة توليد assets أو إعادة معالجة templates أو إبطال caches.
 
 ```js
 class WatchNotifierPlugin {
@@ -350,24 +336,23 @@ class WatchNotifierPlugin {
 export default WatchNotifierPlugin;
 ```
 
-> **Note**:
+> **ملاحظة**:
 >
-> - `compiler.modifiedFiles` is a `Set`, not an array
-> - It is `undefined` on the first (cold) build
-> - It is only populated during watch rebuilds
+> - `compiler.modifiedFiles` هي `Set` وليست array.
+> - تكون `undefined` في أول build بارد.
+> - لا تُملأ إلا أثناء watch rebuilds.
 
-### Adding custom file dependencies
+### إضافة file dependencies مخصصة
 
-If your plugin reads external files (config files, templates, etc.)
-that webpack does not track by default, you must tell webpack to watch them.
+إذا كان plugin يقرأ ملفات خارجية، مثل ملفات إعدادات أو templates، وwebpack لا يتتبعها افتراضيًا، فيجب أن تخبر webpack بمراقبتها.
 
-You can tell webpack to watch different types of dependencies:
+يمكنك إخبار webpack بمراقبة أنواع مختلفة من dependencies:
 
-- `compilation.fileDependencies` is used to track individual files that your plugin depends on, so webpack can trigger a rebuild when those files change
+- تُستخدم `compilation.fileDependencies` لتتبع ملفات فردية يعتمد عليها plugin، حتى يستطيع webpack تشغيل rebuild عندما تتغير هذه الملفات.
 
-- `compilation.contextDependencies` is used to watch directories, so any change inside them triggers a rebuild
+- تُستخدم `compilation.contextDependencies` لمراقبة مجلدات، بحيث يؤدي أي تغيير داخلها إلى rebuild.
 
-- `compilation.missingDependencies` is used to track files that are currently missing, so webpack can trigger a rebuild when they are created
+- تُستخدم `compilation.missingDependencies` لتتبع ملفات غير موجودة حاليًا، حتى يستطيع webpack تشغيل rebuild عند إنشائها.
 
 ```js
 import path from "node:path";
@@ -377,14 +362,14 @@ class TemplateWatchPlugin {
     compiler.hooks.compilation.tap("TemplateWatchPlugin", (compilation) => {
       const templatePath = path.resolve(__dirname, "my-template.html");
 
-      // Ensure webpack watches this file
+      // تأكد من أن webpack يراقب هذا الملف
       compilation.fileDependencies.add(templatePath);
 
-      // Watch a directory (context dependency)
+      // راقب مجلدًا كاملًا context dependency
       const templatesDir = path.resolve(__dirname, "templates");
       compilation.contextDependencies.add(templatesDir);
 
-      // Example: mark a missing dependency
+      // مثال: علّم dependency مفقودًا
       const missingFile = path.resolve(__dirname, "missing-file.txt");
       compilation.missingDependencies.add(missingFile);
     });
@@ -394,14 +379,13 @@ class TemplateWatchPlugin {
 export default TemplateWatchPlugin;
 ```
 
-Without calling `fileDependencies.add()`, webpack will not trigger
-a rebuild when the file changes — even if your plugin depends on it.
+بدون استدعاء `fileDependencies.add()`، لن يشغّل webpack rebuild عند تغير الملف، حتى لو كان plugin يعتمد عليه.
 
-## Different Plugin Shapes
+## أشكال Plugins المختلفة
 
-A plugin can be classified into types based on the event hooks it taps into. Every event hook is pre-defined as synchronous or asynchronous or waterfall or parallel hook and hook is called internally using call/callAsync method. The list of hooks that are supported or can be tapped into is generally specified in `this.hooks` property.
+يمكن تصنيف plugin إلى أنواع بناءً على event hooks التي يدخل إليها. كل event hook يكون معرّفًا مسبقًا كـ hook متزامن أو غير متزامن أو waterfall أو parallel، ويتم استدعاؤه داخليًا باستخدام `call` أو `callAsync`. عادةً تكون قائمة hooks المدعومة أو القابلة للدخول موجودة في الخاصية `this.hooks`.
 
-For example:
+مثال:
 
 ```js
 this.hooks = {
@@ -409,67 +393,64 @@ this.hooks = {
 };
 ```
 
-It represents that the only hook supported is `shouldEmit` which is a hook of `SyncBailHook` type and the only parameter which will be passed to any plugin that taps into `shouldEmit` hook is `compilation`.
+هذا يعني أن hook الوحيد المدعوم هو `shouldEmit`، وهو من نوع `SyncBailHook`، وأن parameter الوحيد الذي سيُمرر لأي plugin يدخل إلى `shouldEmit` هو `compilation`.
 
-Various types of hooks supported are :
+أنواع hooks المدعومة متعددة:
 
-### Synchronous Hooks
+### Hooks متزامنة
 
 - **SyncHook**
-  - Defined as `new SyncHook([params])`
-  - Tapped into using `tap` method.
-  - Called using `call(...params)` method.
+  - تُعرّف بالشكل `new SyncHook([params])`.
+  - يتم الدخول إليها باستخدام `tap`.
+  - تُستدعى باستخدام `call(...params)`.
 
 - **Bail Hooks**
-  - Defined using `SyncBailHook[params]`
-  - Tapped into using `tap` method.
-  - Called using `call(...params)` method.
+  - تُعرّف باستخدام `SyncBailHook[params]`.
+  - يتم الدخول إليها باستخدام `tap`.
+  - تُستدعى باستخدام `call(...params)`.
 
-  In these types of hooks, each of the plugin callbacks will be invoked one after the other with the specific `args`. If any value is returned except undefined by any plugin, then that value is returned by hook and no further plugin callback is invoked. Many useful events like `optimizeChunks`, `optimizeChunkModules` are SyncBailHooks.
+  في هذا النوع من hooks، تُستدعى callbacks الخاصة بكل plugin واحدًا تلو الآخر مع `args` المحددة. إذا أرجع أي plugin أي قيمة غير `undefined`، فترجع hook هذه القيمة ولا يتم استدعاء callbacks اللاحقة. أحداث مفيدة كثيرة مثل `optimizeChunks` و`optimizeChunkModules` هي SyncBailHooks.
 
 - **Waterfall Hooks**
-  - Defined using `SyncWaterfallHook[params]`
-  - Tapped into using `tap` method.
-  - Called using `call(...params)` method
+  - تُعرّف باستخدام `SyncWaterfallHook[params]`.
+  - يتم الدخول إليها باستخدام `tap`.
+  - تُستدعى باستخدام `call(...params)`.
 
-  Here each of the plugins is called one after the other with the arguments from the return value of the previous plugin. The plugin must take the order of its execution into account.
-  It must accept arguments from the previous plugin that was executed. The value for the first plugin is `init`. Hence at least 1 param must be supplied for waterfall hooks. This pattern is used in the Tapable instances which are related to the webpack templates like `ModuleTemplate`, `ChunkTemplate` etc.
+  هنا يُستدعى كل plugin واحدًا تلو الآخر، وتأتي arguments من القيمة التي أرجعها plugin السابق. يجب أن يأخذ plugin ترتيب تنفيذه بالحسبان، وأن يقبل arguments القادمة من plugin السابق. قيمة أول plugin هي `init`. لذلك يجب تمرير parameter واحد على الأقل لـ waterfall hooks. يُستخدم هذا النمط في instances الخاصة بـ Tapable المرتبطة بقوالب webpack مثل `ModuleTemplate` و`ChunkTemplate` وغيرها.
 
-### Asynchronous Hooks
+### Hooks غير متزامنة
 
 - **Async Series Hook**
-  - Defined using `AsyncSeriesHook[params]`
-  - Tapped into using `tap`/`tapAsync`/`tapPromise` method.
-  - Called using `callAsync(...params)` method
+  - تُعرّف باستخدام `AsyncSeriesHook[params]`.
+  - يتم الدخول إليها باستخدام `tap` أو `tapAsync` أو `tapPromise`.
+  - تُستدعى باستخدام `callAsync(...params)`.
 
-  The plugin handler functions are called with all arguments and a callback function with the signature `(err?: Error) -> void`. The handler functions are called in order of registration. `callback` is called after all the handlers are called.
-  This is also a commonly used pattern for events like `emit`, `run`.
+  تُستدعى دوال handlers الخاصة بـ plugin مع كل arguments ومع callback بالشكل `(err?: Error) -> void`. تُستدعى دوال handlers حسب ترتيب تسجيلها. ويتم استدعاء `callback` بعد استدعاء كل handlers. هذا نمط شائع أيضًا لأحداث مثل `emit` و`run`.
 
-- **Async waterfall** The plugins will be applied asynchronously in the waterfall manner.
-  - Defined using `AsyncWaterfallHook[params]`
-  - Tapped into using `tap`/`tapAsync`/`tapPromise` method.
-  - Called using `callAsync(...params)` method
+- **Async waterfall** يتم تطبيق plugins بشكل غير متزامن بطريقة waterfall.
+  - تُعرّف باستخدام `AsyncWaterfallHook[params]`.
+  - يتم الدخول إليها باستخدام `tap` أو `tapAsync` أو `tapPromise`.
+  - تُستدعى باستخدام `callAsync(...params)`.
 
-  The plugin handler functions are called with the current value and a callback function with the signature `(err: Error, nextValue: any) -> void.` When called `nextValue` is the current value for the next handler. The current value for the first handler is `init`. After all handlers are applied, callback is called with the last value. If any handler passes a value for `err`, the callback is called with this error and no more handlers are called.
-  This plugin pattern is expected for events like `before-resolve` and `after-resolve`.
+  تُستدعى دوال handlers الخاصة بـ plugin مع القيمة الحالية ومع callback بالشكل `(err: Error, nextValue: any) -> void.` عند الاستدعاء، تكون `nextValue` هي القيمة الحالية للـ handler التالي. والقيمة الحالية لأول handler هي `init`. بعد تطبيق كل handlers، تُستدعى callback بالقيمة الأخيرة. إذا مرر أي handler قيمة لـ `err`، تُستدعى callback بهذا الخطأ ولا يتم استدعاء بقية handlers. يُتوقع هذا النمط لأحداث مثل `before-resolve` و`after-resolve`.
 
 - **Async Series Bail**
-  - Defined using `AsyncSeriesBailHook[params]`
-  - Tapped into using `tap`/`tapAsync`/`tapPromise` method.
-  - Called using `callAsync(...params)` method
+  - تُعرّف باستخدام `AsyncSeriesBailHook[params]`.
+  - يتم الدخول إليها باستخدام `tap` أو `tapAsync` أو `tapPromise`.
+  - تُستدعى باستخدام `callAsync(...params)`.
 
 - **Async Parallel**
-  - Defined using `AsyncParallelHook[params]`
-  - Tapped into using `tap`/`tapAsync`/`tapPromise` method.
-  - Called using `callAsync(...params)` method
+  - تُعرّف باستخدام `AsyncParallelHook[params]`.
+  - يتم الدخول إليها باستخدام `tap` أو `tapAsync` أو `tapPromise`.
+  - تُستدعى باستخدام `callAsync(...params)`.
 
-### Configuration defaults
+### القيم الافتراضية للإعدادات
 
-Webpack applies configuration defaults after plugins defaults are applied. This allows plugins to feature their own defaults and provides a way to create configuration preset plugins.
+يطبق webpack القيم الافتراضية للإعدادات بعد تطبيق القيم الافتراضية الخاصة بـ plugins. هذا يسمح للـ plugins بتوفير defaults خاصة بها، ويوفر طريقة لإنشاء configuration preset plugins.
 
-### Example: AssetLoggerPlugin
+### مثال: AssetLoggerPlugin
 
-The following example shows a minimal Webpack plugin that logs all generated assets using Webpack’s logger interface.
+يوضح المثال التالي plugin بسيطًا في webpack يسجل كل assets المولدة باستخدام واجهة logger في webpack.
 
 ```js
 class AssetLoggerPlugin {
@@ -495,9 +476,9 @@ class AssetLoggerPlugin {
 export default AssetLoggerPlugin;
 ```
 
-This plugin taps into the `emit` hook of the Webpack compiler and prints the names of all generated assets to the console. It demonstrates how plugins can interact with the compilation process using Webpack hooks.
+يدخل هذا plugin إلى hook المسمى `emit` في webpack compiler ويطبع أسماء كل assets المولدة في console. يوضح كيف يمكن لـ plugins التفاعل مع عملية compilation باستخدام webpack hooks.
 
-For example, when running a Webpack build, the output may look like:
+مثلًا، عند تشغيل webpack build، قد يبدو الناتج بهذا الشكل:
 
 ```text
 Generated assets:
diff --git a/src/content/glossary.mdx b/src/content/glossary.mdx
index 0be4bd4e7572..68a63995440f 100644
--- a/src/content/glossary.mdx
+++ b/src/content/glossary.mdx
@@ -1,82 +1,76 @@
 ---
-title: Glossary
+title: مسرد المصطلحات
 sort: 3
 contributors:
-  - kryptokinght
-  - rouzbeh84
-  - bebraw
-  - skipjack
-  - byzyk
-  - pranshuchittora
-  - jamesgeorge007
+  - RlxChap2
 ---
 
-This index lists common terms used throughout the webpack ecosystem.
+هذه الصفحة تجمع المصطلحات الشائعة في منظومة webpack وتشرحها باختصار.
 
 ## A
 
-- [**Asset**](/guides/asset-management/): This is a general term for the images, fonts, media, and any other kind of files that are typically used in websites and other applications. These typically end up as individual files within the [output](/glossary/#o) but can also be inlined via things like the [style-loader](/loaders/style-loader) or [url-loader](/loaders/url-loader).
+- [**Asset**](/guides/asset-management/): مصطلح عام يشير إلى الصور، والخطوط، والوسائط، وأي ملفات أخرى تُستخدم عادةً في المواقع والتطبيقات. غالبًا تنتهي هذه الملفات كملفات مستقلة داخل [output](/glossary/#o)، ويمكن أيضًا تضمينها مباشرة عبر أدوات مثل [style-loader](/loaders/style-loader) أو [url-loader](/loaders/url-loader).
 
 ## B
 
-- [**Bundle**](/guides/getting-started/#creating-a-bundle): Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.
-- [**Bundle Splitting**](/guides/code-splitting): This process offers one way of optimizing a build, allowing webpack to generate multiple bundles for a single application. As a result, each bundle can be isolated from changes effecting others, reducing the amount of code that needs to be republished and therefore re-downloaded by the client and taking advantage of browser caching.
+- [**Bundle**](/guides/getting-started/#creating-a-bundle): ملف ناتج من عدة modules منفصلة. يحتوي bundle على النسخ النهائية من ملفات المصدر بعد مرورها بمرحلة loading وcompilation.
+- [**Bundle Splitting**](/guides/code-splitting): طريقة لتحسين عملية build عبر جعل webpack ينتج عدة bundles لتطبيق واحد. هذا يجعل كل bundle أكثر استقلالًا عن تغييرات bundles الأخرى، فيقل حجم الكود الذي يحتاج إلى نشره أو تنزيله مرة أخرى من جهة المستخدم، وتستفيد أكثر من browser caching.
 
 ## C
 
-- **Chunk**: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, _chunks_ directly correspond with the output _bundles_ however, there are some configurations that don't yield a one-to-one relationship.
-- [**Code Splitting**](/guides/code-splitting/): Refers to dividing your code into various bundles/chunks which you can then load on demand instead of loading a single bundle containing everything.
-- [**Configuration**](/concepts/configuration/): webpack configuration file is a plain old JavaScript file that exports an object. This object is then processed by webpack based upon its defined properties.
+- **Chunk**: مصطلح خاص بـ webpack يُستخدم داخليًا لإدارة عملية bundling. تتكون bundles من chunks، ولها عدة أنواع مثل entry وchild. غالبًا تتطابق _chunks_ مباشرةً مع _bundles_ الناتجة، لكن بعض الإعدادات لا تعطي علاقة واحد إلى واحد.
+- [**Code Splitting**](/guides/code-splitting/): تقسيم الكود إلى عدة bundles أو chunks يمكن تحميلها عند الحاجة بدل تحميل bundle واحد يحتوي على كل شيء.
+- [**Configuration**](/concepts/configuration/): ملف إعدادات webpack هو ملف JavaScript عادي يصدّر object. يعالج webpack هذا object بناءً على الخصائص التي عرّفتها فيه.
 
 ## D
 
-- [**Dependency Graph**](/concepts/dependency-graph): Any time one file depends on another, webpack treats this as a _dependency_. Starting from an entry point(s), webpack recursively builds a dependency graph that includes every module/asset your application needs.
+- [**Dependency Graph**](/concepts/dependency-graph): عندما يعتمد ملف على ملف آخر، يتعامل webpack مع ذلك كـ _dependency_. يبدأ webpack من entry point أو أكثر، ثم يبني dependency graph بشكل متكرر ليشمل كل module وasset يحتاجه تطبيقك.
 
 ## E
 
-- [**Entry Point**](/concepts/entry-points): The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application's entry point(s) as the **contextual root(s)** of what you want bundled.
+- [**Entry Point**](/concepts/entry-points): يحدد entry point المكان الذي يبدأ منه webpack، ثم يتبع graph الخاص بالاعتمادات لمعرفة ما الذي يجب تضمينه في bundle. يمكنك اعتباره **الجذر السياقي** لما تريد تحزيمه.
 
 ## H
 
-- [**Hot Module Replacement (HMR)**](/concepts/hot-module-replacement): A process that exchanges, adds, or removes `modules` while an application is running without a full page reload.
+- [**Hot Module Replacement (HMR)**](/concepts/hot-module-replacement): عملية تبدّل أو تضيف أو تزيل `modules` أثناء تشغيل التطبيق، بدون إعادة تحميل الصفحة بالكامل.
 
 ## L
 
-- [**Loaders**](/concepts/loaders): Transformations that are applied on the source code of a module. They allow you to pre-process files as you `require()` or "load" them. Similar to a 'task-runner'.
-- [**Lazy Loading**](/guides/lazy-loading): A process of loading parts (chunks) of your application lazily. In other words loading them only when we really need them.
+- [**Loaders**](/concepts/loaders): تحويلات تُطبّق على كود المصدر الخاص بـ module. تسمح لك بمعالجة الملفات مسبقًا أثناء استخدام `require()` أو أثناء "تحميلها". يمكن التفكير فيها بشكل قريب من أدوات task-runner.
+- [**Lazy Loading**](/guides/lazy-loading): تحميل أجزاء من التطبيق، مثل chunks، بشكل مؤجل. أي لا يتم تحميلها إلا عندما تحتاجها فعلًا.
 
 ## M
 
-- [**Module**](/concepts/modules): Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.
-- [**Module Resolution**](/concepts/module-resolution/): A module can be required as a dependency from another module and a resolver is a library which helps in locating a module by its absolute path. Modules are searched for inside all directories specified in `resolve.modules`.
-- [**Manifest**](/concepts/manifest): The runtime will use it to resolve and load modules once they've been bundled and shipped to the browser.
+- [**Module**](/concepts/modules): جزء مستقل من الوظائف، حجمه ونطاقه أصغر من برنامج كامل. الـ modules المكتوبة جيدًا توفر abstractions واضحة وحدود encapsulation تساعد على تصميم منظم ومفهوم.
+- [**Module Resolution**](/concepts/module-resolution/): يمكن طلب module كاعتماد من module آخر. أما resolver فهو مكتبة تساعد على العثور على module من خلال مساره المطلق. يبحث webpack عن modules داخل كل المجلدات المحددة في `resolve.modules`.
+- [**Manifest**](/concepts/manifest): يستخدمه runtime لحل modules وتحميلها بعد أن يتم تحزيمها وإرسالها إلى المتصفح.
 
 ## O
 
-- [**Output**](/concepts/output): Option(s) specifying where to output the compiled files to disk.
-  > _Note, that while there can be multiple entry points, only one output configuration is specified._
+- [**Output**](/concepts/output): خيار أو مجموعة خيارات تحدد أين يكتب webpack الملفات الناتجة بعد compilation على القرص.
+  > _ملاحظة: يمكن أن يكون لديك عدة entry points، لكن يتم تحديد إعداد output واحد فقط._
 
 ## P
 
-- [**Plugin**](/concepts/plugins): A JavaScript object that has an `apply` property. This `apply` property is called by the webpack compiler, giving access to the entire compilation lifecycle. These packages will typically extend compilation functionality in one way or another.
+- [**Plugin**](/concepts/plugins): كائن JavaScript يحتوي على الخاصية `apply`. يستدعي webpack compiler هذه الخاصية، فيحصل plugin على إمكانية الوصول إلى دورة حياة compilation كاملة. غالبًا توسّع هذه الحزم سلوك compilation بطريقة ما.
 
 ## R
 
-- [**Request**](/guides/dependency-management/): Refers to the expression in the require/import statement, e.g. _require("./template/" + name + ".ejs")_, the request is _"./template/" + name + ".ejs"_.
+- [**Request**](/guides/dependency-management/): التعبير المستخدم داخل عبارة `require` أو `import`. مثلًا في _require("./template/" + name + ".ejs")_ يكون request هو _"./template/" + name + ".ejs"_.
 
 ## S
 
-- [**Shimming**](/guides/shimming/): Not all JS files can be used directly with webpack. The file maybe in an unsupported module format, or not even in any module format. It is here where `shimming` comes into play.
+- [**Shimming**](/guides/shimming/): ليست كل ملفات JS قابلة للاستخدام مباشرة مع webpack. قد يكون الملف بتنسيق modules غير مدعوم، أو قد لا يستخدم modules أصلًا. هنا يأتي دور `shimming`.
 
 ## T
 
-- [**Target**](/configuration/target/): User configured deployment target(s) [listed here](/configuration/target/) to compile for a specific environment like the browser, NodeJS, or Electron.
-- [**Tree Shaking**](/guides/tree-shaking/): Unused/Excess code elimination, or more precisely, live code importing. Compilers like webpack will accomplish this by analyzing the various kinds `import` statements and usage of the imported code to determine what parts of dependencies are actually being utilized, dropping parts of the "tree" that are not.
+- [**Target**](/configuration/target/): بيئة النشر التي يحددها المستخدم ليتم compilation لها، مثل المتصفح أو NodeJS أو Electron. القائمة موجودة في [صفحة target](/configuration/target/).
+- [**Tree Shaking**](/guides/tree-shaking/): إزالة الكود غير المستخدم، أو بشكل أدق استيراد الكود الحي فقط. يفعل webpack ذلك عبر تحليل أنواع `import` المختلفة واستخدامات الكود المستورد لمعرفة الأجزاء المستخدمة فعليًا من dependencies، ثم حذف أجزاء "الشجرة" غير اللازمة.
 
 ## V
 
-- [**Vendor Entry Point**](/concepts/entry-points/#separate-app-and-vendor-entries): Create dependency graphs starting at both `app.js` and `vendors.js`. These graphs are completely separate and independent of each other to allow leverage of `CommonsChunkPlugin` and extract any vendor references from your app bundle into your vendor bundle. Helps achieve a common pattern in webpack known as [long-term vendor-caching](/guides/caching/).
+- [**Vendor Entry Point**](/concepts/entry-points/#separate-app-and-vendor-entries): إنشاء dependency graphs تبدأ من `app.js` و`vendors.js`. تكون هذه graphs منفصلة ومستقلة، مما يسمح بالاستفادة من `CommonsChunkPlugin` واستخراج مراجع vendor من app bundle إلى vendor bundle. يساعد ذلك على تطبيق نمط معروف في webpack باسم [long-term vendor-caching](/guides/caching/).
 
 ## W
 
-- [**webpack**](/): A highly configurable [module](/concepts/modules) bundler for modern JavaScript applications.
+- [**webpack**](/): أداة bundler قابلة للتخصيص بدرجة عالية لتجميع [modules](/concepts/modules) في تطبيقات JavaScript الحديثة.
diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx
index 6cf4839883c3..23944655eef6 100644
--- a/src/content/guides/hot-module-replacement.mdx
+++ b/src/content/guides/hot-module-replacement.mdx
@@ -3,6 +3,7 @@ title: الاستبدال الساخن للوحدات
 sort: 15
 contributors:
   - arabpolice
+  - RlxChap2
 
 related:
   - title: المفاهيم - الاستبدال الساخن للوحدات
@@ -156,7 +157,7 @@ main.js:4395 [WDS] Hot Module Replacement enabled.
 + main.js:4395 [WDS] App hot update...
 + main.js:4330 [HMR] Checking for updates on the server...
 + main.js:10024 Accepting the updated printMe module!
-+ 0.4b8ee77….hot-update.js:10 Updating print.js...
++ 0.4b8ee77....hot-update.js:10 Updating print.js...
 + main.js:4330 [HMR] Updated modules:
 + main.js:4330 [HMR]  - 20
 ```
diff --git a/src/content/guides/shimming.mdx b/src/content/guides/shimming.mdx
index 43b94ddeb2e0..32316228de6c 100644
--- a/src/content/guides/shimming.mdx
+++ b/src/content/guides/shimming.mdx
@@ -3,6 +3,7 @@ title: التلاؤم
 sort: 20
 contributors:
   - arabpolice
+  - RlxChap2
 related:
   - title: سكربت مكافأة مستخدمي المتصفحات الحديثة
     url: https://medium.com/hackernoon/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7
@@ -28,14 +29,14 @@ T> للتبسيط، يستند هذا الدليل إلى الأمثلة في [
 
 ```diff
 webpack-demo
- ├── package.json
- ├── package-lock.json
- ├── webpack.config.js
- ├── /dist
- │   └── index.html
- ├── /src
- │   └── index.js
- └── /node_modules
+ ├── package.json
+ ├── package-lock.json
+ ├── webpack.config.js
+ ├── /dist
+ │   └── index.html
+ ├── /src
+ │   └── index.js
+ └── /node_modules
 ```
 
 تتذكر حزمة `lodash` التي كنا نستخدمها؟ لأغراض العرض، لنفترض أننا أردنا بدلًا من ذلك توفيرها كمتغير عام في كامل تطبيقنا. للقيام بذلك، يمكننا استخدام `ProvidePlugin`.
@@ -210,14 +211,14 @@ const __dirname = path.dirname(__filename);
 
 ```diff
   webpack-demo
-  ├── package.json
-  ├── package-lock.json
-  ├── webpack.config.js
-  ├── /dist
-  ├── /src
-  │   ├── index.js
-+ │   ├── globals.js
-  └── /node_modules
+  ├── package.json
+  ├── package-lock.json
+  ├── webpack.config.js
+  ├── /dist
+  ├── /src
+  │   ├── index.js
++ │   ├── globals.js
+  └── /node_modules
 ```
 
 **src/globals.js**
@@ -342,15 +343,15 @@ npm install --save whatwg-fetch
 
 ```diff
   webpack-demo
-  ├── package.json
-  ├── package-lock.json
-  ├── webpack.config.js
-  ├── /dist
-  ├── /src
-  │   ├── index.js
-  │   ├── globals.js
-+ │   └── polyfills.js
-  └── /node_modules
+  ├── package.json
+  ├── package-lock.json
+  ├── webpack.config.js
+  ├── /dist
+  ├── /src
+  │   ├── index.js
+  │   ├── globals.js
++ │   └── polyfills.js
+  └── /node_modules
 ```
 
 **src/polyfills.js**
diff --git a/src/content/guides/typescript.mdx b/src/content/guides/typescript.mdx
index 9e06416a8801..7e13a77a57d5 100644
--- a/src/content/guides/typescript.mdx
+++ b/src/content/guides/typescript.mdx
@@ -3,6 +3,7 @@ title: TypeScript
 sort: 21
 contributors:
   - arabpolice
+  - RlxChap2
 ---
 
 T> يستند هذا الدليل إلى دليل [_البدء_](/guides/getting-started/).
@@ -161,7 +162,7 @@ T> لجعل الاستيرادات تفعل ذلك افتراضيًا مع ال
 
    > العلم `--no-experimental-strip-types` مطلوب ابتداءً من إصدار Node.js 22.7.0.
 
-3. **استخدام ميزة Node.js المدمجة لتحويل الأنواع في Node.js ≥ v22.7.0:**
+3. **استخدام ميزة Node.js المدمجة لتحويل الأنواع في Node.js >= v22.7.0:**
 
    لتفعيل تحويل صياغة TypeScript غير القابلة للمحو، والتي تتطلب توليد كود JavaScript، مثل تصريحات enum وخصائص المعاملات.
 
diff --git a/src/content/index.mdx b/src/content/index.mdx
index b012c92a1d30..3639452d8fd6 100644
--- a/src/content/index.mdx
+++ b/src/content/index.mdx
@@ -1,6 +1,8 @@
 ---
 title: webpack
 sort: -1
+contributors:
+  - RlxChap2
 ---
 
 import FirstLeft from "../components/Splash/first/left.mdx";
@@ -9,7 +11,7 @@ import SecondLeft from "../components/Splash/second/left.mdx";
 import SecondRight from "../components/Splash/second/right.mdx";
 import Install from "../components/Splash/install/install.mdx";
 
-## Install Webpack
+## تثبيت webpack
 
 <div className="splash__wrap">
   <div className="splash__install">
@@ -17,7 +19,7 @@ import Install from "../components/Splash/install/install.mdx";
   </div>
 </div>
 
-## Write Your Code
+## اكتب الكود
 
 <div className="splash__wrap">
   <div className="splash__left">
@@ -28,7 +30,7 @@ import Install from "../components/Splash/install/install.mdx";
   </div>
 </div>
 
-## Bundle It
+## حزّمه
 
 <div className="splash__wrap">
   <div className="splash__left">
@@ -39,8 +41,8 @@ import Install from "../components/Splash/install/install.mdx";
   </div>
 </div>
 
-Then run `webpack` on the command-line to create `bundle.js`.
+بعدها شغّل `webpack` من سطر الأوامر لإنشاء ملف `bundle.js`.
 
-## Awesome, isn't it? Let's dive in!
+## ممتاز، أليس كذلك؟ لنبدأ.
 
-**[Get Started](/guides/getting-started)** quickly in our **Guides** section, or dig into the **[Concepts](/concepts)** section for more high-level information on the core notions behind webpack.
+ابدأ بسرعة من قسم **[البدء](/guides/getting-started)**، أو انتقل إلى قسم **[المفاهيم](/concepts)** إذا أردت فهم الأفكار الأساسية التي يعتمد عليها webpack بصورة أوسع.
diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx
index 765dd1bc9b85..de550d509652 100644
--- a/src/content/loaders/index.mdx
+++ b/src/content/loaders/index.mdx
@@ -2,67 +2,61 @@
 title: Loaders
 sort: -1
 contributors:
-  - simon04
-  - bajras
-  - rhys-vdw
-  - EugeneHlushko
-  - hemal7735
-  - snitin315
-  - anshumanv
-  - jamesgeorge007
-  - chenxsan
+  - RlxChap2
 ---
 
-Webpack enables use of [loaders](/concepts/loaders) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
-Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem.
-Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`/`require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders/#configuration).
+يتيح لك webpack استخدام [loaders](/concepts/loaders) لمعالجة الملفات قبل إضافتها إلى الحزمة. بهذه الطريقة لا تكون محدودًا بملفات JavaScript فقط؛ يمكنك إدخال CSS، والصور، والقوالب، وأنواع كثيرة من الموارد الثابتة ضمن عملية البناء. ويمكنك أيضًا كتابة loaders خاصة بك بسهولة باستخدام Node.js.
 
-## Files
+الـ loaders هي حزم مستقلة توسّع قدرات webpack، ويجري تطويرها وصيانتها ضمن مجتمع webpack الأوسع.
 
-- [`ref-loader`](https://www.npmjs.com/package/ref-loader) Create dependencies between any files manually
+يمكن تفعيل loader مباشرة باستخدام بادئة مثل `loadername!` داخل عبارات `import .. from "mod";` أو `require()`، أو يمكن تطبيقه تلقائيًا من إعدادات webpack باستخدام تعبيرات regex. راجع [الإعدادات](/concepts/loaders/#configuration) للتفاصيل.
+
+## الملفات
+
+- [`ref-loader`](https://www.npmjs.com/package/ref-loader) ينشئ علاقات اعتماد بين أي ملفات يدويًا.
 
 ## JSON
 
-- [`cson-loader`](https://github.com/awnist/cson-loader) Loads and transpiles a [CSON](https://github.com/bevry/cson#what-is-cson) file
+- [`cson-loader`](https://github.com/awnist/cson-loader) يحمّل ملف [CSON](https://github.com/bevry/cson#what-is-cson) ويحوّله.
 
-## Transpiling
+## التحويل بين صيغ JavaScript
 
-- [`babel-loader`](/loaders/babel-loader) Loads ES2015+ code and transpiles to ES5 using [Babel](https://babeljs.io/)
-- [`esbuild-loader`](https://github.com/privatenumber/esbuild-loader) Loads ES2015+ code and transpiles to ES6+ using [esbuild](https://esbuild.github.io/)
-- [`buble-loader`](https://github.com/sairion/buble-loader) Loads ES2015+ code and transpiles to ES5 using [Bublé](https://buble.surge.sh/guide/)
-- [`traceur-loader`](https://github.com/jupl/traceur-loader) Loads ES2015+ code and transpiles to ES5 using [Traceur](https://github.com/google/traceur-compiler#readme)
-- [`ts-loader`](https://github.com/TypeStrong/ts-loader) Loads [TypeScript](https://www.typescriptlang.org/) 2.0+ like JavaScript
-- [`coffee-loader`](/loaders/coffee-loader) Loads [CoffeeScript](http://coffeescript.org/) like JavaScript
-- [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/) Loads Lua code using [fengari](https://fengari.io/)
-- [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader) Loads [Elm](https://elm-lang.org/) like JavaScript
+- [`babel-loader`](/loaders/babel-loader) يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام [Babel](https://babeljs.io/).
+- [`esbuild-loader`](https://github.com/privatenumber/esbuild-loader) يحمّل كود ES2015+ ويحوّله إلى ES6+ باستخدام [esbuild](https://esbuild.github.io/).
+- [`buble-loader`](https://github.com/sairion/buble-loader) يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام [Bublé](https://buble.surge.sh/guide/).
+- [`traceur-loader`](https://github.com/jupl/traceur-loader) يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام [Traceur](https://github.com/google/traceur-compiler#readme).
+- [`ts-loader`](https://github.com/TypeStrong/ts-loader) يحمّل [TypeScript](https://www.typescriptlang.org/) 2.0+ ويعامله مثل JavaScript.
+- [`coffee-loader`](/loaders/coffee-loader) يحمّل [CoffeeScript](http://coffeescript.org/) ويعامله مثل JavaScript.
+- [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/) يحمّل كود Lua باستخدام [fengari](https://fengari.io/).
+- [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader) يحمّل [Elm](https://elm-lang.org/) ويعامله مثل JavaScript.
 
-## Templating
+## القوالب
 
-- [`html-loader`](/loaders/html-loader) Exports HTML as string, require references to static resources
-- [`pug-loader`](https://github.com/pugjs/pug-loader) Loads Pug and Jade templates and returns a function
-- [`markdown-loader`](https://github.com/peerigon/markdown-loader) Compiles Markdown to HTML
-- [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) Compiles Markdown to a React Component using the markdown-parse parser
-- [`posthtml-loader`](https://github.com/posthtml/posthtml-loader) Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml)
-- [`handlebars-loader`](https://github.com/pcardune/handlebars-loader) Compiles Handlebars to HTML
-- [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader) Inline SVG/MathML files to HTML. It’s useful when applying icon font or applying CSS animation to SVG.
-- [`twig-loader`](https://github.com/zimmo-be/twig-loader) Compiles Twig templates and returns a function
-- [`remark-loader`](https://github.com/webpack/remark-loader) Load markdown through `remark` with built-in image resolution
+- [`html-loader`](/loaders/html-loader) يصدّر HTML كنص، ويتعامل مع المراجع إلى الموارد الثابتة.
+- [`pug-loader`](https://github.com/pugjs/pug-loader) يحمّل قوالب Pug وJade ويعيد دالة.
+- [`markdown-loader`](https://github.com/peerigon/markdown-loader) يحوّل Markdown إلى HTML.
+- [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) يحوّل Markdown إلى React Component باستخدام parser الخاص بـ markdown-parse.
+- [`posthtml-loader`](https://github.com/posthtml/posthtml-loader) يحمّل ملف HTML ويحوّله باستخدام [PostHTML](https://github.com/posthtml/posthtml).
+- [`handlebars-loader`](https://github.com/pcardune/handlebars-loader) يحوّل Handlebars إلى HTML.
+- [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader) يضمّن ملفات SVG/MathML داخل HTML. يفيد ذلك عند استخدام icon font أو تطبيق CSS animation على SVG.
+- [`twig-loader`](https://github.com/zimmo-be/twig-loader) يحوّل قوالب Twig ويعيد دالة.
+- [`remark-loader`](https://github.com/webpack/remark-loader) يحمّل Markdown عبر `remark` مع حل مراجع الصور تلقائيًا.
 
-## Styling
+## التنسيقات
 
-- [`style-loader`](/loaders/style-loader) Add exports of a module as style to DOM
-- [`css-loader`](/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code
-- [`css-utility-loader`](https://github.com/SahilKhanWDC/css-utility-loader-webpack-.git) - Automatically parses and translates legacy CSS properties into modern utility classes (Tailwind) at build-time.
-- [`less-loader`](/loaders/less-loader) Loads and compiles a LESS file
-- [`sass-loader`](/loaders/sass-loader) Loads and compiles a SASS/SCSS file
-- [`postcss-loader`](/loaders/postcss-loader) Loads and transforms a CSS/SSS file using [PostCSS](http://postcss.org)
-- [`stylus-loader`](/loaders/stylus-loader/) Loads and compiles a Stylus file
+- [`style-loader`](/loaders/style-loader) يضيف صادرات module كـ styles داخل DOM.
+- [`css-loader`](/loaders/css-loader) يحمّل ملف CSS بعد حل imports ويعيد كود CSS.
+- [`css-utility-loader`](https://github.com/SahilKhanWDC/css-utility-loader-webpack-.git) يحلل خصائص CSS القديمة تلقائيًا ويحوّلها إلى utility classes حديثة مثل Tailwind وقت البناء.
+- [`less-loader`](/loaders/less-loader) يحمّل ملف LESS ويحوّله.
+- [`sass-loader`](/loaders/sass-loader) يحمّل ملف SASS/SCSS ويحوّله.
+- [`postcss-loader`](/loaders/postcss-loader) يحمّل ملف CSS/SSS ويحوّله باستخدام [PostCSS](http://postcss.org).
+- [`stylus-loader`](/loaders/stylus-loader/) يحمّل ملف Stylus ويحوّله.
 
-## Frameworks
+## أطر العمل
 
-- [`vue-loader`](https://github.com/vuejs/vue-loader) Loads and compiles [Vue Components](https://vuejs.org/v2/guide/components.html)
-- [`angular2-template-loader`](https://github.com/TheLarkInn/angular2-template-loader) Loads and compiles [Angular](https://angular.io/) Components
+- [`vue-loader`](https://github.com/vuejs/vue-loader) يحمّل [Vue Components](https://vuejs.org/v2/guide/components.html) ويحوّلها.
+- [`angular2-template-loader`](https://github.com/TheLarkInn/angular2-template-loader) يحمّل [Angular](https://angular.io/) Components ويحوّلها.
 
 ## Awesome
 
-For more third-party loaders, see the list from [awesome-webpack](/awesome-webpack/#loaders).
+لمزيد من loaders الخارجية، راجع قائمة [awesome-webpack](/awesome-webpack/#loaders).
diff --git a/src/content/migrate/3.mdx b/src/content/migrate/3.mdx
index 7b62ed536400..d50d00203bf5 100644
--- a/src/content/migrate/3.mdx
+++ b/src/content/migrate/3.mdx
@@ -1,30 +1,17 @@
 ---
-title: To v2 or v3 from v1
+title: من v1 إلى v2 أو v3
 sort: 3
 contributors:
-  - sokra
-  - jhnns
-  - grgur
-  - domfarolino
-  - johnnyreilly
-  - jouni-kantola
-  - frederikprijck
-  - chrisVillanueva
-  - bebraw
-  - howdy39
-  - selbekk
-  - ndelangen
-  - EugeneHlushko
-  - byzyk
+  - RlxChap2
 ---
 
-The following sections describe the major changes from webpack 1 to 2.
+تشرح الأقسام التالية أهم التغييرات عند الانتقال من webpack 1 إلى 2.
 
-T> Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see [the changelog](https://github.com/webpack/webpack/releases) for details.
+T> لاحظ أن التغييرات بين 2 و3 كانت أقل بكثير، لذلك لا يفترض أن تكون الترقية صعبة. إذا واجهت مشاكل، راجع [سجل التغييرات](https://github.com/webpack/webpack/releases) للتفاصيل.
 
-## resolve.root, resolve.fallback, resolve.modulesDirectories
+## resolve.root وresolve.fallback وresolve.modulesDirectories
 
-These options were replaced by a single option `resolve.modules`. See [resolving](/configuration/resolve) for more usage.
+تم استبدال هذه الخيارات بخيار واحد هو `resolve.modules`. راجع [resolving](/configuration/resolve) لمزيد من الاستخدامات.
 
 ```diff
   resolve: {
@@ -38,17 +25,17 @@ These options were replaced by a single option `resolve.modules`. See [resolving
 
 ## resolve.extensions
 
-This option no longer requires passing an empty string. This behavior was moved to `resolve.enforceExtension`. See [resolving](/configuration/resolve) for more usage.
+لم يعد هذا الخيار يحتاج إلى تمرير نص فارغ. تم نقل هذا السلوك إلى `resolve.enforceExtension`. راجع [resolving](/configuration/resolve) لمزيد من الاستخدامات.
 
 ## resolve.\*
 
-Several APIs were changed here. Not listed in detail as it's not commonly used. See [resolving](/configuration/resolve) for details.
+تغيرت عدة APIs هنا. لم تُذكر بالتفصيل لأنها ليست شائعة الاستخدام. راجع [resolving](/configuration/resolve) للتفاصيل.
 
-## module.loaders is now module.rules
+## module.loaders أصبحت module.rules
 
-The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more.
-For compatibility reasons, the old `module.loaders` syntax is still valid and the old names are parsed.
-The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using `module.rules`.
+استُبدلت إعدادات loaders القديمة بنظام rules أقوى، يسمح بإعداد loaders وأشياء أخرى.
+ولأسباب توافقية، ما زالت صيغة `module.loaders` القديمة صالحة، وما زالت الأسماء القديمة تُقرأ.
+لكن اصطلاحات التسمية الجديدة أوضح وأسهل للفهم، وهذا سبب جيد لتحديث الإعدادات إلى `module.rules`.
 
 ```diff
   module: {
@@ -82,11 +69,10 @@ The new naming conventions are easier to understand and are a good reason to upg
   }
 ```
 
-## Chaining loaders
+## ربط loaders كسلسلة
 
-Like in webpack 1, loaders can be chained to pass results from loader to loader. Using the [rule.use](/configuration/module/#ruleuse)
-configuration option, `use` can be set to an array of loaders.
-In webpack 1, loaders were commonly chained with `!`. This style is only supported using the legacy option `module.loaders`.
+كما في webpack 1، يمكن ربط loaders كسلسلة لتمرير الناتج من loader إلى آخر. باستخدام خيار الإعداد [rule.use](/configuration/module/#ruleuse)، يمكن ضبط `use` كـ array من loaders.
+في webpack 1، كان من الشائع ربط loaders باستخدام `!`. هذا الأسلوب لا يزال مدعومًا فقط عبر الخيار القديم `module.loaders`.
 
 ```diff
   module: {
@@ -103,9 +89,9 @@ In webpack 1, loaders were commonly chained with `!`. This style is only support
   }
 ```
 
-## Automatic `-loader` module name extension removed
+## إزالة الإضافة التلقائية `-loader` من أسماء modules
 
-It is not possible anymore to omit the `-loader` extension when referencing loaders:
+لم يعد ممكنًا حذف اللاحقة `-loader` عند الإشارة إلى loaders:
 
 ```diff
   module: {
@@ -124,7 +110,7 @@ It is not possible anymore to omit the `-loader` extension when referencing load
   }
 ```
 
-You can still opt-in to the old behavior with the `resolveLoader.moduleExtensions` configuration option, but this is not recommended.
+ما زال بإمكانك تفعيل السلوك القديم باستخدام خيار الإعداد `resolveLoader.moduleExtensions`، لكن هذا غير موصى به.
 
 ```diff
 + resolveLoader: {
@@ -132,12 +118,11 @@ You can still opt-in to the old behavior with the `resolveLoader.moduleExtension
 + }
 ```
 
-See [#2986](https://github.com/webpack/webpack/issues/2986) for the reason behind this change.
+راجع [#2986](https://github.com/webpack/webpack/issues/2986) لمعرفة سبب هذا التغيير.
 
-## json-loader is not required anymore
+## لم يعد json-loader مطلوبًا
 
-When no loader has been configured for a JSON file, webpack will automatically try to load the JSON
-file with the [`json-loader`](https://github.com/webpack-contrib/json-loader).
+عندما لا يكون هناك loader معدّ لملف JSON، سيحاول webpack تلقائيًا تحميل ملف JSON باستخدام [`json-loader`](https://github.com/webpack-contrib/json-loader).
 
 ```diff
   module: {
@@ -150,16 +135,15 @@ file with the [`json-loader`](https://github.com/webpack-contrib/json-loader).
   }
 ```
 
-[We decided to do this](https://github.com/webpack/webpack/issues/3363) in order to iron out environment differences
-between webpack, node.js and browserify.
+[قررنا فعل ذلك](https://github.com/webpack/webpack/issues/3363) لتقليل الفروقات بين بيئات webpack وnode.js وbrowserify.
 
-## Loaders in configuration resolve relative to context
+## حل loaders في الإعدادات يتم نسبة إلى context
 
-In **webpack 1**, configured loaders resolve relative to the matched file. However, in **webpack 2**, configured loaders resolve relative to the `context` option.
+في **webpack 1**، كانت loaders المعرّفة في الإعدادات تُحل نسبة إلى الملف المطابق. أما في **webpack 2**، فتُحل loaders المعرّفة نسبة إلى خيار `context`.
 
-This solves some problems with duplicate modules caused by loaders when using `npm link` or referencing modules outside of the `context`.
+هذا يحل بعض مشاكل modules المكررة التي تسببها loaders عند استخدام `npm link` أو عند الإشارة إلى modules خارج `context`.
 
-You may remove some hacks to work around this:
+يمكنك إزالة بعض الحلول الالتفافية القديمة:
 
 ```diff
   module: {
@@ -176,7 +160,7 @@ You may remove some hacks to work around this:
   }
 ```
 
-## module.preLoaders and module.postLoaders were removed:
+## إزالة module.preLoaders وmodule.postLoaders
 
 ```diff
   module: {
@@ -191,9 +175,9 @@ You may remove some hacks to work around this:
   }
 ```
 
-## UglifyJsPlugin sourceMap
+## sourceMap في UglifyJsPlugin
 
-The `sourceMap` option of the `UglifyJsPlugin` now defaults to `false` instead of `true`. This means that if you are using source maps for minimized code or want correct line numbers for uglifyjs warnings, you need to set `sourceMap: true` for `UglifyJsPlugin`.
+أصبحت القيمة الافتراضية لخيار `sourceMap` في `UglifyJsPlugin` هي `false` بدل `true`. هذا يعني أنك إذا كنت تستخدم source maps للكود المصغّر، أو تريد أرقام أسطر صحيحة لتحذيرات uglifyjs، فيجب ضبط `sourceMap: true` داخل `UglifyJsPlugin`.
 
 ```diff
   devtool: "source-map",
@@ -204,10 +188,10 @@ The `sourceMap` option of the `UglifyJsPlugin` now defaults to `false` instead o
   ]
 ```
 
-## UglifyJsPlugin warnings
+## warnings في UglifyJsPlugin
 
-The `compress.warnings` option of the `UglifyJsPlugin` now defaults to `false` instead of `true`.
-This means that if you want to see uglifyjs warnings, you need to set `compress.warnings` to `true`.
+أصبحت القيمة الافتراضية لخيار `compress.warnings` في `UglifyJsPlugin` هي `false` بدل `true`.
+هذا يعني أنك إذا أردت رؤية تحذيرات uglifyjs، فيجب ضبط `compress.warnings` على `true`.
 
 ```diff
   devtool: "source-map",
@@ -220,13 +204,13 @@ This means that if you want to see uglifyjs warnings, you need to set `compress.
   ]
 ```
 
-## UglifyJsPlugin minimize loaders
+## minimize loaders في UglifyJsPlugin
 
-`UglifyJsPlugin` no longer switches loaders into minimize mode. The `minimize: true` setting needs to be passed via loader options in the long-term. See loader documentation for relevant options.
+لم يعد `UglifyJsPlugin` يحوّل loaders إلى minimize mode. على المدى الطويل، يجب تمرير إعداد `minimize: true` عبر خيارات loader. راجع توثيق loader لمعرفة الخيارات المناسبة.
 
-The minimize mode for loaders will be removed in webpack 3 or later.
+ستتم إزالة minimize mode الخاصة بـ loaders في webpack 3 أو إصدار لاحق.
 
-To keep compatibility with old loaders, loaders can be switched to minimize mode via plugin:
+للحفاظ على التوافق مع loaders القديمة، يمكن تحويل loaders إلى minimize mode عبر plugin:
 
 ```diff
   plugins: [
@@ -236,13 +220,13 @@ To keep compatibility with old loaders, loaders can be switched to minimize mode
   ]
 ```
 
-## DedupePlugin has been removed
+## تمت إزالة DedupePlugin
 
-`webpack.optimize.DedupePlugin` isn't needed anymore. Remove it from your configuration.
+لم يعد `webpack.optimize.DedupePlugin` مطلوبًا. أزله من إعداداتك.
 
-## BannerPlugin - breaking change
+## BannerPlugin - تغيير كاسر
 
-`BannerPlugin` no longer accepts two parameters, but a single options object.
+لم يعد `BannerPlugin` يقبل parameterين، بل يقبل كائن options واحدًا.
 
 ```diff
   plugins: [
@@ -251,10 +235,10 @@ To keep compatibility with old loaders, loaders can be switched to minimize mode
   ]
 ```
 
-## OccurrenceOrderPlugin is now on by default
+## OccurrenceOrderPlugin مفعّل افتراضيًا
 
-The `OccurrenceOrderPlugin` is now enabled by default and has been renamed (`OccurenceOrderPlugin` in webpack 1).
-Thus make sure to remove the plugin from your configuration:
+أصبح `OccurrenceOrderPlugin` مفعّلًا افتراضيًا، وتمت إعادة تسميته من `OccurenceOrderPlugin` في webpack 1.
+لذلك تأكد من إزالة plugin من إعداداتك:
 
 ```diff
   plugins: [
@@ -265,13 +249,13 @@ Thus make sure to remove the plugin from your configuration:
   ]
 ```
 
-## ExtractTextWebpackPlugin - breaking change
+## ExtractTextWebpackPlugin - تغيير كاسر
 
-[ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) requires version 2 to work with webpack 2.
+يتطلب [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) الإصدار 2 حتى يعمل مع webpack 2.
 
 `npm install --save-dev extract-text-webpack-plugin`
 
-The configuration changes for this plugin are mainly syntactical.
+تغييرات الإعدادات لهذا plugin في الغالب تغييرات في الصيغة.
 
 ### ExtractTextPlugin.extract
 
@@ -304,17 +288,17 @@ plugins: [
 ]
 ```
 
-## Full dynamic requires now fail by default
+## full dynamic requires تفشل افتراضيًا الآن
 
-A dependency with only an expression (i. e. `require(expr)`) will now create an empty context instead of the context of the complete directory.
+الاعتماد الذي يحتوي على expression فقط، مثل `require(expr)`، سينشئ الآن context فارغًا بدل context للمجلد كاملًا.
 
-Code like this should be refactored as it won't work with ES2015 modules. If this is not possible you can use the `ContextReplacementPlugin` to hint the compiler towards the correct resolving.
+يجب إعادة كتابة كود بهذا الشكل لأنه لن يعمل مع ES2015 modules. إذا لم يكن ذلك ممكنًا، يمكنك استخدام `ContextReplacementPlugin` لإعطاء compiler تلميحًا عن resolving الصحيح.
 
-?> Link to an article about dynamic dependencies.
+?> رابط إلى مقال عن dynamic dependencies.
 
-### Using custom arguments in CLI and configuration
+### استخدام arguments مخصصة في CLI والإعدادات
 
-If you abused the CLI to pass custom arguments to the configuration like so:
+إذا كنت تستخدم CLI لتمرير arguments مخصصة إلى الإعدادات بهذا الشكل:
 
 `webpack --custom-stuff`
 
@@ -326,9 +310,9 @@ const customStuff = process.argv.includes("--custom-stuff");
 module.exports = config;
 ```
 
-You may notice that this is no longer allowed. The CLI is more strict now.
+فقد تلاحظ أن هذا لم يعد مسموحًا. أصبحت CLI أكثر صرامة الآن.
 
-Instead there is an interface for passing arguments to the configuration. This should be used instead. Future tools may rely on this.
+بدلًا من ذلك، توجد واجهة مخصصة لتمرير arguments إلى الإعدادات. يجب استخدامها، وقد تعتمد عليها أدوات مستقبلية.
 
 `webpack --env.customStuff`
 
@@ -340,17 +324,17 @@ module.exports = function (env) {
 };
 ```
 
-See [CLI](/api/cli).
+راجع [CLI](/api/cli).
 
-## require.ensure and AMD require are asynchronous
+## require.ensure وAMD require صارت غير متزامنة
 
-These functions are now always asynchronous instead of calling their callback synchronously if the chunk is already loaded.
+أصبحت هذه الدوال دائمًا غير متزامنة، بدل استدعاء callback بشكل متزامن إذا كان chunk محملًا بالفعل.
 
-**`require.ensure` now depends upon native `Promise`s. If using `require.ensure` in an environment that lacks them then you will need a polyfill.**
+**تعتمد `require.ensure` الآن على `Promise` الأصلية. إذا كنت تستخدم `require.ensure` في بيئة لا توفرها، فستحتاج إلى polyfill.**
 
-## Loader configuration is through `options`
+## إعداد Loader يتم عبر `options`
 
-You can _no longer_ configure a loader with a custom property in the `webpack.config.js`. It must be done through the `options`. The following configuration with the `ts` property is no longer valid with webpack 2:
+لم يعد بإمكانك إعداد loader بخاصية مخصصة داخل `webpack.config.js`. يجب فعل ذلك عبر `options`. الإعداد التالي الذي يستخدم الخاصية `ts` لم يعد صالحًا مع webpack 2:
 
 ```js
 module.exports = {
@@ -363,14 +347,14 @@ module.exports = {
       },
     ],
   },
-  // does not work with webpack 2
+  // لا يعمل مع webpack 2
   ts: { transpileOnly: false },
 };
 ```
 
-### What are `options`?
+### ما هي `options`؟
 
-Good question. Well, strictly speaking it's 2 possible things; both ways to configure a webpack loader. Classically `options` was called `query` and was a string which could be appended to the name of the loader. Much like a query string but actually with [greater powers](https://github.com/webpack/loader-utils#parsequery):
+سؤال جيد. بدقة، هي واحدة من طريقتين لإعداد webpack loader. في السابق كانت `options` تُسمى `query`، وكانت نصًا يمكن إضافته إلى اسم loader. تشبه query string، لكنها تملك [قدرات أكبر](https://github.com/webpack/loader-utils#parsequery):
 
 ```js
 module.exports = {
@@ -386,7 +370,7 @@ module.exports = {
 };
 ```
 
-But it can also be a separately specified object that's supplied alongside a loader:
+ويمكن أيضًا أن تكون object مستقلًا يُمرر بجانب loader:
 
 ```js
 module.exports = {
@@ -403,11 +387,11 @@ module.exports = {
 };
 ```
 
-## LoaderOptionsPlugin context
+## context في LoaderOptionsPlugin
 
-Some loaders need context information and read them from the configuration. This needs to be passed via loader options in the long-term. See loader documentation for relevant options.
+بعض loaders تحتاج إلى معلومات context وتقرأها من الإعدادات. على المدى الطويل، يجب تمرير هذه المعلومات عبر خيارات loader. راجع توثيق loader لمعرفة الخيارات المناسبة.
 
-To keep compatibility with old loaders, this information can be passed via plugin:
+للحفاظ على التوافق مع loaders القديمة، يمكن تمرير هذه المعلومات عبر plugin:
 
 ```diff
   plugins: [
@@ -421,11 +405,11 @@ To keep compatibility with old loaders, this information can be passed via plugi
 
 ## debug
 
-The `debug` option switched loaders to debug mode in webpack 1. This needs to be passed via loader options in long-term. See loader documentation for relevant options.
+كان خيار `debug` يحوّل loaders إلى debug mode في webpack 1. على المدى الطويل، يجب تمريره عبر خيارات loader. راجع توثيق loader لمعرفة الخيارات المناسبة.
 
-The debug mode for loaders will be removed in webpack 3 or later.
+ستتم إزالة debug mode الخاصة بـ loaders في webpack 3 أو إصدار لاحق.
 
-To keep compatibility with old loaders, loaders can be switched to debug mode via a plugin:
+للحفاظ على التوافق مع loaders القديمة، يمكن تحويل loaders إلى debug mode عبر plugin:
 
 ```diff
 - debug: true,
@@ -436,9 +420,9 @@ To keep compatibility with old loaders, loaders can be switched to debug mode vi
   ]
 ```
 
-## Code Splitting with ES2015
+## Code Splitting مع ES2015
 
-In webpack 1, you could use [`require.ensure()`](/api/module-methods/#requireensure) as a method to lazily-load chunks for your application:
+في webpack 1، كان بإمكانك استخدام [`require.ensure()`](/api/module-methods/#requireensure) كطريقة لتحميل chunks بشكل كسول داخل تطبيقك:
 
 ```js
 require.ensure([], (require) => {
@@ -446,7 +430,7 @@ require.ensure([], (require) => {
 });
 ```
 
-The ES2015 Loader spec defines [`import()`](/api/module-methods/#import-1) as method to load ES2015 Modules dynamically on runtime. Webpack treats `import()` as a split-point and puts the requested module in a separate chunk. `import()` takes the module name as argument and returns a Promise.
+تعرّف مواصفة ES2015 Loader الدالة [`import()`](/api/module-methods/#import-1) كطريقة لتحميل ES2015 Modules ديناميكيًا وقت التشغيل. يتعامل webpack مع `import()` كنقطة تقسيم، ويضع module المطلوب في chunk منفصل. تأخذ `import()` اسم module كـ argument وترجع Promise.
 
 ```js
 function onClick() {
@@ -458,13 +442,13 @@ function onClick() {
 }
 ```
 
-Good news: Failure to load a chunk can now be handled because they are `Promise` based.
+الخبر الجيد: يمكن الآن التعامل مع فشل تحميل chunk لأنها مبنية على `Promise`.
 
 ## Dynamic expressions
 
-It's possible to pass a partial expression to `import()`. This is handled similar to expressions in CommonJS (webpack creates a [context](/plugins/context-replacement-plugin/) with all possible files).
+يمكن تمرير expression جزئي إلى `import()`. يتم التعامل مع هذا بطريقة مشابهة للتعابير في CommonJS، حيث ينشئ webpack [context](/plugins/context-replacement-plugin/) يحتوي على كل الملفات الممكنة.
 
-`import()` creates a separate chunk for each possible module.
+تنشئ `import()` chunk منفصلًا لكل module محتمل.
 
 ```js
 function route(path, query) {
@@ -472,15 +456,15 @@ function route(path, query) {
     (route) => new route.Route(query),
   );
 }
-// This creates a separate chunk for each possible route
+// ينشئ هذا chunk منفصلًا لكل route محتمل
 ```
 
-## Mixing ES2015 with AMD and CommonJS
+## خلط ES2015 مع AMD وCommonJS
 
-As for AMD and CommonJS you can freely mix all three module types (even within the same file). Webpack behaves similar to babel and node-eps in this case:
+كما هو الحال مع AMD وCommonJS، يمكنك خلط أنواع modules الثلاثة بحرية، حتى داخل الملف نفسه. يتصرف webpack بطريقة مشابهة لـ babel وnode-eps في هذه الحالة:
 
 ```js
-// CommonJS consuming ES2015 Module
+// CommonJS يستهلك ES2015 Module
 const book = require("./book");
 
 book.currentPage;
@@ -489,20 +473,20 @@ book.default === "This is a book";
 ```
 
 ```js
-// ES2015 Module consuming CommonJS
+// ES2015 Module يستهلك CommonJS
 import fs from "node:fs"; // module.exports map to default
 
 typeof fs.readFileSync === "function";
 ```
 
 ```js
-// ES2015 Module consuming CommonJS
+// ES2015 Module يستهلك CommonJS
 import { readFileSync } from "node:fs"; // named exports are read from returned object+
 
 typeof readFileSync === "function";
 ```
 
-It is important to note that you will want to tell Babel to not parse these module symbols so webpack can use them. You can do this by setting the following in your `.babelrc` or `babel-loader` options.
+من المهم أن تطلب من Babel ألا يقرأ رموز modules هذه حتى يتمكن webpack من استخدامها. يمكنك فعل ذلك عبر الإعداد التالي في `.babelrc` أو خيارات `babel-loader`.
 
 **.babelrc**
 
@@ -512,13 +496,13 @@ It is important to note that you will want to tell Babel to not parse these modu
 }
 ```
 
-## Hints
+## تلميحات
 
-No need to change something, but opportunities
+ليست تغييرات واجبة، لكنها فرص للتحسين.
 
 ### Template strings
 
-Webpack now supports template strings in expressions. This means you can start using them in webpack constructs:
+يدعم webpack الآن template strings داخل expressions. هذا يعني أنه يمكنك استخدامها في constructs الخاصة بـ webpack:
 
 ```diff
 - require("./templates/" + name);
@@ -527,7 +511,7 @@ Webpack now supports template strings in expressions. This means you can start u
 
 ### Configuration Promise
 
-Webpack now supports returning a `Promise` from the configuration file. This allows async processing in your configuration file.
+يدعم webpack الآن إرجاع `Promise` من ملف الإعدادات. هذا يسمح بتنفيذ معالجة غير متزامنة داخل ملف الإعدادات.
 
 **webpack.config.js**
 
@@ -541,9 +525,9 @@ module.exports = function () {
 };
 ```
 
-### Advanced loader matching
+### مطابقة loaders بشكل متقدم
 
-Webpack now supports more things to match on for loaders.
+يدعم webpack الآن أشياء أكثر للمطابقة عند تطبيق loaders.
 
 ```js
 module.exports = {
@@ -551,36 +535,36 @@ module.exports = {
   module: {
     rules: [
       {
-        resource: /filename/, // matches "/path/filename.js"
-        resourceQuery: /^\?querystring$/, // matches "?querystring"
-        issuer: /filename/, // matches "/path/something.js" if requested from "/path/filename.js"
+        resource: /filename/, // يطابق "/path/filename.js"
+        resourceQuery: /^\?querystring$/, // يطابق "?querystring"
+        issuer: /filename/, // يطابق "/path/something.js" إذا طُلب من "/path/filename.js"
       },
     ],
   },
 };
 ```
 
-### More CLI options
+### خيارات CLI إضافية
 
-There are some new CLI options for you to use:
+توجد بعض خيارات CLI الجديدة التي يمكنك استخدامها:
 
-`--define process.env.NODE_ENV="production"` See [`DefinePlugin`](/plugins/define-plugin/).
+`--define process.env.NODE_ENV="production"` راجع [`DefinePlugin`](/plugins/define-plugin/).
 
-`--display-depth` displays the distance to the entry point for each module.
+`--display-depth` يعرض المسافة إلى entry point لكل module.
 
-`--display-used-exports` display info about which exports are used in a module.
+`--display-used-exports` يعرض معلومات عن exports المستخدمة داخل module.
 
-`--display-max-modules` sets the number for modules displayed in the output (defaults to 15).
+`--display-max-modules` يحدد عدد modules المعروضة في output، والقيمة الافتراضية 15.
 
-`-p` also defines `process.env.NODE_ENV` to `"production"` now.
+`-p` يعرّف الآن `process.env.NODE_ENV` بالقيمة `"production"` أيضًا.
 
-## Loader changes
+## تغييرات Loader
 
-Changes only relevant for loader authors.
+تغييرات تهم مؤلفي loaders فقط.
 
 ### Cacheable
 
-Loaders are now cacheable by default. Loaders must opt-out if they are not cacheable.
+أصبحت loaders قابلة للتخزين المؤقت افتراضيًا. يجب على loader تعطيل ذلك بنفسه إذا لم يكن قابلًا للتخزين المؤقت.
 
 ```diff
   // Cacheable loader
@@ -598,13 +582,13 @@ Loaders are now cacheable by default. Loaders must opt-out if they are not cache
   }
 ```
 
-### Complex options
+### خيارات معقدة
 
-**webpack 1** only supports `JSON.stringify`-able options for loaders.
+كان **webpack 1** يدعم فقط خيارات loaders القابلة للتحويل عبر `JSON.stringify`.
 
-**webpack 2** now supports any JS object as loader options.
+أما **webpack 2** فيدعم الآن أي كائن JS كخيارات loader.
 
-Before webpack [2.2.1](https://github.com/webpack/webpack/releases/tag/v2.2.1) (i.e. from 2.0.0 through 2.2.0), using complex options required using `ident` for the `options` object to allow its reference from other loaders. **This was removed in 2.2.1** and thus current migrations do not require any use of the `ident` key.
+قبل webpack [2.2.1](https://github.com/webpack/webpack/releases/tag/v2.2.1)، أي من 2.0.0 إلى 2.2.0، كان استخدام الخيارات المعقدة يتطلب استخدام `ident` لكائن `options` حتى يمكن الإشارة إليه من loaders أخرى. **تمت إزالة هذا في 2.2.1**، لذلك لا تحتاج عمليات الترقية الحالية إلى استخدام مفتاح `ident`.
 
 ```diff
 {
diff --git a/src/content/migrate/4.mdx b/src/content/migrate/4.mdx
index 0a06641eab6c..d4de379a6fcb 100644
--- a/src/content/migrate/4.mdx
+++ b/src/content/migrate/4.mdx
@@ -1,40 +1,38 @@
 ---
-title: To v4 from v3
+title: من v3 إلى v4
 sort: 2
 contributors:
-  - sokra
-  - EugeneHlushko
-  - Kolhar730
+  - RlxChap2
 related:
-  - title: "To v2 or v3 from v1"
+  - title: "من v1 إلى v2 أو v3"
     url: https://webpack.js.org/migrate/3/
-  - title: "RIP CommonChunkPlugin"
+  - title: "نهاية CommonChunkPlugin"
     url: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
-  - title: "webpack 4: migration guide for plugins/loaders"
+  - title: "webpack 4: دليل ترقية plugins/loaders"
     url: https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202
 ---
 
-This guide only shows major changes that affect end users. For more details please see [the changelog](https://github.com/webpack/webpack/releases).
+يعرض هذا الدليل التغييرات الكبيرة التي تؤثر في المستخدمين مباشرة. لمزيد من التفاصيل، راجع [سجل التغييرات](https://github.com/webpack/webpack/releases).
 
 ## Node.js v4
 
-If you are still using Node.js v4 or lower, you need to upgrade your Node.js installation to Node.js v6 or higher.
+إذا كنت ما زلت تستخدم Node.js v4 أو إصدارًا أقدم، فيجب ترقية Node.js إلى v6 أو أحدث.
 
-Instructions for upgrading your Node.js version can be found [here](https://stackoverflow.com/questions/10075990/upgrading-node-js-to-latest-version).
+يمكنك العثور على تعليمات ترقية Node.js [هنا](https://stackoverflow.com/questions/10075990/upgrading-node-js-to-latest-version).
 
 ## CLI
 
-The CLI has moved to a separate package: webpack-cli. You need to install it before using webpack, see [basic setup](/guides/getting-started/#basic-setup).
+انتقلت CLI إلى حزمة منفصلة اسمها webpack-cli. يجب تثبيتها قبل استخدام webpack. راجع [الإعداد الأساسي](/guides/getting-started/#basic-setup).
 
-The installation guide can be found [here](/guides/installation).
+يمكنك العثور على دليل التثبيت [هنا](/guides/installation).
 
-## Update plugins
+## تحديث plugins
 
-Many 3rd party plugins need to be updated to the latest versions to be compatible with webpack 4. Links to popular plugins can be found [here](/awesome-webpack/#webpack-plugins).
+كثير من plugins الخارجية تحتاج إلى التحديث إلى أحدث الإصدارات حتى تعمل مع webpack 4. يمكنك العثور على روابط plugins الشائعة [هنا](/awesome-webpack/#webpack-plugins).
 
 ## mode
 
-Add the new [`mode`](/configuration/mode/) option to your configuration. Set it to `'production'`, `'development'` or `'none'` depending on your configuration type.
+أضف خيار [`mode`](/configuration/mode/) الجديد إلى الإعدادات. اضبطه على `'production'` أو `'development'` أو `'none'` حسب نوع الإعداد لديك.
 
 **webpack.config.js**
 
@@ -45,11 +43,11 @@ module.exports = {
 }
 ```
 
-T> The purpose of `'development'` mode and `'production'` mode is different. You can use `webpack-merge` as shown in [production guide](/guides/production/#setup) to optimize configurations.
+T> يختلف هدف وضع `'development'` عن هدف وضع `'production'`. يمكنك استخدام `webpack-merge` كما هو موضح في [دليل الإنتاج](/guides/production/#setup) لتحسين الإعدادات.
 
-## Deprecated/Removed plugins
+## plugins المهملة أو المحذوفة
 
-These plugins can be removed from configuration as they are default in production mode:
+يمكنك إزالة هذه plugins من الإعدادات لأنها أصبحت افتراضية في وضع الإنتاج:
 
 **webpack.config.js**
 
@@ -65,7 +63,7 @@ module.exports = {
 }
 ```
 
-These plugins are default in development mode
+هذه plugins أصبحت افتراضية في وضع التطوير:
 
 **webpack.config.js**
 
@@ -78,7 +76,7 @@ module.exports = {
 }
 ```
 
-These plugins were deprecated and are now removed:
+هذه plugins كانت deprecated ثم أُزيلت:
 
 **webpack.config.js**
 
@@ -94,15 +92,15 @@ module.exports = {
 
 ## CommonsChunkPlugin
 
-The `CommonsChunkPlugin` was removed. Instead the [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) options can be used.
+أُزيل `CommonsChunkPlugin`. استخدم بدلًا منه خيارات [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks).
 
-See documentation of the [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) for more details. The default configuration may already suit your needs.
+راجع توثيق [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks) لمزيد من التفاصيل. قد تكون الإعدادات الافتراضية مناسبة لاحتياجك أصلًا.
 
-T> When generating the HTML from the stats you can use `optimization.splitChunks.chunks: "all"` which is the optimal configuration in most cases.
+T> عند إنشاء HTML من stats، يمكنك استخدام `optimization.splitChunks.chunks: "all"`، وهو الإعداد الأفضل في أغلب الحالات.
 
-## import() and CommonJS
+## import() وCommonJS
 
-When using `import()` to load non-ESM the result has changed in webpack 4. Now you need to access the `default` property to get the value of `module.exports`.
+عند استخدام `import()` لتحميل module ليس ESM، تغيّر الناتج في webpack 4. الآن تحتاج إلى الوصول إلى الخاصية `default` للحصول على قيمة `module.exports`.
 
 **non-esm.js**
 
@@ -124,9 +122,9 @@ function sayHello() {
 }
 ```
 
-## json and loaders
+## json وloaders
 
-When using a custom loader to transform `.json` files you now need to change the module `type`:
+عند استخدام loader مخصص لتحويل ملفات `.json`، تحتاج الآن إلى تغيير `type` الخاص بالـ module:
 
 **webpack.config.js**
 
@@ -144,7 +142,7 @@ module.exports = {
 };
 ```
 
-When still using the `json-loader`, it can be removed:
+إذا كنت ما زلت تستخدم `json-loader`، فيمكنك إزالته:
 
 **webpack.config.js**
 
@@ -162,4 +160,4 @@ module.exports = {
 
 ## module.loaders
 
-`module.loaders` were deprecated since webpack 2 and are now removed in favor of [`module.rules`](/configuration/module/#rule).
+أصبحت `module.loaders` deprecated منذ webpack 2، وأُزيلت الآن لصالح [`module.rules`](/configuration/module/#rule).
diff --git a/src/content/migrate/5.mdx b/src/content/migrate/5.mdx
index a120bd7c8953..c184d1d73a10 100644
--- a/src/content/migrate/5.mdx
+++ b/src/content/migrate/5.mdx
@@ -1,80 +1,69 @@
 ---
-title: To v5 from v4
+title: من v4 إلى v5
 sort: 1
 contributors:
-  - sokra
-  - salemhilal
-  - keichinger
-  - EugeneHlushko
-  - MattGoldwater
-  - rramaa
-  - chenxsan
-  - jamesgeorge007
-  - getsnoopy
-  - yevhen-logosha
-  - akash-kumar-dev
-  - EvanSanderson
+  - RlxChap2
 ---
 
-This guide aims to help you migrating to webpack 5 when using webpack directly. If you are using a higher level tool to run webpack, please refer to the tool for migration instructions.
+يهدف هذا الدليل إلى مساعدتك على الترقية إلى webpack 5 عندما تستخدم webpack مباشرة. إذا كنت تستخدم أداة أعلى مستوى لتشغيل webpack، فارجع إلى تلك الأداة لمعرفة تعليمات الترقية.
 
-## Preparations
+## التحضيرات
 
-Webpack 5 requires at least Node.js 10.13.0 (LTS), so make sure you upgrade your Node.js if you're still running an older one.
+يتطلب Webpack 5 إصدار Node.js 10.13.0 على الأقل (LTS)، لذلك تأكد من ترقية Node.js إذا كنت ما زلت تستخدم إصدارًا أقدم.
 
-## Upgrade webpack 4 and its plugins/loaders
+## ترقية webpack 4 وplugins/loaders الخاصة به
 
-1. Upgrade `webpack` 4 to the latest available version.
-   - When using webpack >= 4, upgrading to the latest webpack 4 version should not require additional guidance.
+1. رقّ `webpack` 4 إلى أحدث إصدار متاح.
+   - عند استخدام webpack >= 4، لا ينبغي أن تحتاج الترقية إلى أحدث إصدار من webpack 4 إلى إرشادات إضافية.
 
-   - If you are using webpack version less than 4 please see the [webpack 4 migration guide](/migrate/4/).
+   - إذا كنت تستخدم إصدار webpack أقل من 4، فراجع [دليل الترقية إلى webpack 4](/migrate/4/).
 
-2. Upgrade `webpack-cli` to the latest available version (when used)
+2. رقّ `webpack-cli` إلى أحدث إصدار متاح عند استخدامه.
 
-3. Upgrade all used Plugins and Loaders to the latest available version
+3. رقّ كل Plugins وLoaders المستخدمة إلى أحدث إصدار متاح.
 
-   Some Plugins and Loaders might have a beta version that has to be used in order to be compatible with webpack 5.
-   Make sure to read release notes of each individual plugin/loader when upgrading it, since latest version might only support webpack 5 and will fail in v4. In such case, it's recommended to update to the latest version that supports webpack 4.
+   قد يكون لبعض Plugins وLoaders إصدار beta يجب استخدامه ليكون متوافقًا مع webpack 5.
+   تأكد من قراءة release notes لكل plugin/loader عند ترقيته؛ فقد يدعم أحدث إصدار webpack 5 فقط ويفشل مع v4. في هذه الحالة، يُنصح بالتحديث إلى أحدث إصدار يدعم webpack 4.
 
 ## Codemods
 
-To assist with the upgrade from webpack v4 to v5, [Codemod](https://github.com/codemod-com/codemod) provides open-source community codemods that can help automate most of the migration process.
+للمساعدة في الترقية من webpack v4 إلى v5، يوفر [Codemod](https://github.com/codemod-com/codemod) codemods مجتمعية مفتوحة المصدر يمكنها أتمتة معظم عملية الترقية.
 
-Please note that these are not official webpack codemods, and while it aims to streamline the migration, it may not cover all cases. You may still need to perform additional manual steps to fully complete the upgrade.
+لاحظ أن هذه codemods ليست رسمية من webpack. ورغم أنها تهدف إلى تسهيل الترقية، فقد لا تغطي كل الحالات. قد تحتاج إلى خطوات يدوية إضافية لإكمال الترقية بالكامل.
 
-Run the [webpack v5 migration codemods](https://go.codemod.com/webpack-v5-recipe):
+شغّل [webpack v5 migration codemods](https://go.codemod.com/webpack-v5-recipe):
 
 ```bash
 npx codemod@latest webpack/v5/migration-recipe
 ```
 
-This will run the following codemods from [Codemod registry](https://codemod.com/registry):
+سيشغّل هذا codemods التالية من [Codemod registry](https://codemod.com/registry):
 
 - [`webpack/v5/set-target-to-false-and-update-plugins`](https://go.codemod.com/webpack-set-target-false)
 - [`webpack/v5/migrate-library-target-to-library-object`](https://go.codemod.com/webpack-migrate-library-target)
 - [`webpack/v5/json-imports-to-default-imports`](https://go.codemod.com/webpack-json-imports)
 
-Each of these codemods automates a change listed in the webpack v5 migration guide. For a complete list of available webpack v5 codemods, see [Codemod Registry](https://go.codemod.com/webpack-v5).
+كل واحد من هذه codemods يؤتمت تغييرًا مذكورًا في دليل الترقية إلى webpack v5. للقائمة الكاملة من codemods المتاحة لـ webpack v5، راجع [Codemod Registry](https://go.codemod.com/webpack-v5).
 
-### Make sure your build has no errors or warnings
+### تأكد من أن build لا يحتوي على أخطاء أو تحذيرات
 
-There might be new errors or warnings because of the upgraded versions of `webpack`, `webpack-cli`, Plugins and Loaders. Keep an eye for deprecation warnings during the build.
+قد تظهر أخطاء أو تحذيرات جديدة بسبب الإصدارات المحدثة من `webpack` و`webpack-cli` وPlugins وLoaders. انتبه لتحذيرات deprecation أثناء build.
 
-You can invoke `webpack` this way to get stack traces for deprecation warnings to figure out which Plugins and Loaders are responsible.
+يمكنك تشغيل `webpack` بهذه الطريقة للحصول على stack traces لتحذيرات deprecation ومعرفة Plugins وLoaders المسؤولة عنها.
 
 ```bash
 node --trace-deprecation node_modules/webpack/bin/webpack.js
 ```
 
-As webpack 5 removes all deprecated features, make sure there's no webpack deprecation warnings during the build in order to proceed.
+لأن webpack 5 يزيل كل الميزات المهملة، تأكد من عدم وجود تحذيرات deprecation من webpack أثناء build قبل المتابعة.
 
-### Make sure to use `mode`
+### تأكد من استخدام `mode`
 
-Set `mode` to either [`production`](/configuration/mode/#mode-production) or [`development`](/configuration/mode/#mode-development) to make sure that corresponding defaults are set.
+اضبط `mode` على [`production`](/configuration/mode/#mode-production) أو [`development`](/configuration/mode/#mode-development) للتأكد من تطبيق defaults المناسبة.
 
-### Update outdated options
+### حدّث الخيارات القديمة
 
-Update the following options to their new version (if used):
+حدّث الخيارات التالية إلى صيغتها الجديدة إذا كنت تستخدمها:
 
 - `optimization.hashedModuleIds: true` → `optimization.moduleIds: 'hashed'`
 - `optimization.namedChunks: true` → `optimization.chunkIds: 'named'`
@@ -87,15 +76,15 @@ Update the following options to their new version (if used):
 - `optimization.splitChunks.cacheGroups.vendors` → `optimization.splitChunks.cacheGroups.defaultVendors`
 - `optimization.splitChunks.cacheGroups.test(module, chunks)` → `optimization.splitChunks.cacheGroups.test(module, { chunkGraph, moduleGraph })`
 - `Compilation.entries` → `Compilation.entryDependencies`
-- `serve` → `serve` is removed in favor of [`DevServer`](/configuration/dev-server/)
-- [`Rule.query`](/configuration/module/#ruleoptions--rulequery) (deprecated since v3) → `Rule.options`/`UseEntry.options`
+- `serve` → تمت إزالة `serve` لصالح [`DevServer`](/configuration/dev-server/)
+- [`Rule.query`](/configuration/module/#ruleoptions--rulequery) (مهمل منذ v3) → `Rule.options`/`UseEntry.options`
 - `Rule.loaders` → [`Rule.use`](/configuration/module/#ruleuse)
 
-T> Checkout the detailed changes in the configuration options [here](/blog/2020-10-10-webpack-5-release/#changes-to-the-configuration).
+T> راجع التغييرات التفصيلية في خيارات الإعداد [هنا](/blog/2020-10-10-webpack-5-release/#changes-to-the-configuration).
 
-### Test webpack 5 compatibility
+### اختبر توافق webpack 5
 
-Try to set the following options in your webpack 4 configuration and check if build still works correctly.
+جرّب ضبط الخيارات التالية داخل إعداد webpack 4 لديك وتحقق من أن build ما زال يعمل بشكل صحيح.
 
 ```js
 export default {
@@ -107,13 +96,13 @@ export default {
 };
 ```
 
-You have to remove these options again when upgrading your configuration for webpack 5.
+يجب إزالة هذه الخيارات مرة أخرى عند ترقية إعدادك إلى webpack 5.
 
-T> webpack 5 removes these options from the configuration schema and will always use `false`.
+T> يزيل webpack 5 هذه الخيارات من configuration schema وسيستخدم دائمًا `false`.
 
-## Upgrade webpack to 5
+## ترقية webpack إلى 5
 
-Now let's upgrade webpack to version 5:
+الآن لنرقّ webpack إلى الإصدار 5:
 
 - npm: `npm install webpack@latest`
 
@@ -121,26 +110,26 @@ Now let's upgrade webpack to version 5:
 
 - pnpm: `pnpm add webpack@latest`
 
-If you were not able to upgrade some plugins/loaders to the latest in Upgrade webpack 4 and its plugins/loaders step, don't forget to upgrade them now.
+إذا لم تستطع ترقية بعض plugins/loaders إلى أحدث إصدار في خطوة ترقية webpack 4 وplugins/loaders الخاصة به، فلا تنس ترقيتها الآن.
 
-### Clean up configuration
+### تنظيف الإعدادات
 
-- Consider removing `optimization.moduleIds` and `optimization.chunkIds` from your webpack configuration. The defaults could be better, because they support long term caching in [`production mode`](/configuration/mode/#mode-production) and debugging in [`development` mode](/configuration/mode/#mode-development).
-- When using `[hash]` placeholder in webpack configuration, consider changing it to `[contenthash]`. It is not the same, but proven to be more effective.
-- If you are using Yarn's PnP and the `pnp-webpack-plugin`, we have good news: it is supported by default now. You have to remove it from the configuration.
-- If you are using `IgnorePlugin` with a regular expression as argument, it takes an `options` object now: `new IgnorePlugin({ resourceRegExp: /regExp/ })`.
-- If you are using something like `node.fs: 'empty'` replace it with `resolve.fallback.fs: false`.
-- If you are using `watch: true` in webpack Node.js API, remove it. There's no need to set it as it's indicated by the compiler method you call, either `true` for `watch()` or `false` for `run()`.
-- If you have `rules` defined for loading assets using `raw-loader`, `url-loader`, or `file-loader`, please use [Asset Modules](/guides/asset-modules/) instead as they're going to be deprecated in near future.
-- If you have `target` set to a function, update it to `false` and apply that function within `plugins` option. See example below:
+- فكر في إزالة `optimization.moduleIds` و`optimization.chunkIds` من إعدادات webpack. قد تكون defaults أفضل، لأنها تدعم long term caching في [`production mode`](/configuration/mode/#mode-production) وdebugging في [`development` mode](/configuration/mode/#mode-development).
+- إذا كنت تستخدم placeholder `[hash]` في إعدادات webpack، ففكر في تغييره إلى `[contenthash]`. ليسا الشيء نفسه، لكن `[contenthash]` أثبت أنه أكثر فعالية.
+- إذا كنت تستخدم Yarn PnP و`pnp-webpack-plugin`، فهناك خبر جيد: أصبح مدعومًا افتراضيًا الآن. يجب إزالته من الإعدادات.
+- إذا كنت تستخدم `IgnorePlugin` مع regular expression كـ argument، فهو الآن يأخذ كائن `options`: `new IgnorePlugin({ resourceRegExp: /regExp/ })`.
+- إذا كنت تستخدم شيئًا مثل `node.fs: 'empty'` فاستبدله بـ `resolve.fallback.fs: false`.
+- إذا كنت تستخدم `watch: true` في webpack Node.js API، فأزله. لا حاجة لضبطه لأنه يُفهم من دالة compiler التي تستدعيها، إما `true` عند `watch()` أو `false` عند `run()`.
+- إذا كانت لديك `rules` لتحميل assets باستخدام `raw-loader` أو `url-loader` أو `file-loader`، فاستخدم [Asset Modules](/guides/asset-modules/) بدلًا منها لأنها ستُهمل في المستقبل القريب.
+- إذا كان `target` لديك مضبوطًا على دالة، فحدّثه إلى `false` وطبّق تلك الدالة داخل خيار `plugins`. راجع المثال:
 
   ```json
-  // for webpack 4
+  // في webpack 4
   {
       target: WebExtensionTarget(nodeConfig)
   }
 
-  // for webpack 5
+  // في webpack 5
   {
       target: false,
       plugins: [
@@ -149,18 +138,18 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we
   }
   ```
 
-  > **Note**: Codemod for this change:
+  > **ملاحظة**: يوجد Codemod لهذا التغيير:
   >
   > ```bash
   > npx codemod webpack/v5/set-target-to-false-and-update-plugins
   > ```
   >
-  > (See the [registry here](https://codemod.com/registry/webpack-v5-set-target-to-false-and-update-plugins).)
+  > (راجع [registry هنا](https://codemod.com/registry/webpack-v5-set-target-to-false-and-update-plugins).)
 
-- If you have output.library or output.libraryTarget defined, change the property names: (output.libraryTarget -> output.library.type, output.library -> output.library.name). Example
+- إذا كان لديك `output.library` أو `output.libraryTarget`، فغيّر أسماء الخصائص: `output.libraryTarget` تصبح `output.library.type`، و`output.library` تصبح `output.library.name`. مثال:
 
   ```json
-  // for webpack 4
+  // في webpack 4
   {
       output: {
         library: 'MyLibrary',
@@ -168,7 +157,7 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we
       }
   }
 
-  // for webpack 5
+  // في webpack 5
   {
       output: {
         library: {
@@ -179,56 +168,56 @@ If you were not able to upgrade some plugins/loaders to the latest in Upgrade we
   }
   ```
 
-  > **Note**: Codemod for this change:
+  > **ملاحظة**: يوجد Codemod لهذا التغيير:
   >
   > ```bash
   > npx codemod webpack/v5/migrate-library-target-to-library-object
   > ```
   >
-  > (See the [registry here](https://codemod.com/registry/webpack-v5-migrate-library-target-to-library-object).)
+  > (راجع [registry هنا](https://codemod.com/registry/webpack-v5-migrate-library-target-to-library-object).)
 
-If you were using WebAssembly via import, you should follow this two step process:
+إذا كنت تستخدم WebAssembly عبر import، فاتبع هذه العملية من خطوتين:
 
-- Enable the deprecated spec by setting `experiments.syncWebAssembly: true`, to get the same behavior as in webpack 4.
-- After successful migration to webpack 5, change the `experiments` value to `experiments: { asyncWebAssembly: true }` to use the up-to-date spec for WASM integration.
+- فعّل المواصفة المهملة بضبط `experiments.syncWebAssembly: true` للحصول على السلوك نفسه الموجود في webpack 4.
+- بعد نجاح الترقية إلى webpack 5، غيّر قيمة `experiments` إلى `experiments: { asyncWebAssembly: true }` لاستخدام المواصفة الأحدث لتكامل WASM.
 
-Reconsider `optimization.splitChunks`:
+أعد التفكير في `optimization.splitChunks`:
 
-- It's recommended to use either the defaults or `optimization.splitChunks: { chunks: 'all' }`.
-- When using a custom configuration, drop `name: false` and replace `name: string | function` with `idHint: string | function`.
-- It was possible to turn off the defaults by setting `optimization.splitChunks.cacheGroups: { default: false, vendors: false }`. We don't recommend doing this, but if you really want to get the same effect in webpack 5: `optimization.splitChunks.cacheGroups: { default: false, defaultVendors: false }`.
+- يُنصح باستخدام defaults أو `optimization.splitChunks: { chunks: 'all' }`.
+- عند استخدام إعداد مخصص، احذف `name: false` واستبدل `name: string | function` بـ `idHint: string | function`.
+- كان ممكنًا تعطيل defaults بضبط `optimization.splitChunks.cacheGroups: { default: false, vendors: false }`. لا نوصي بذلك، لكن إذا كنت تريد الأثر نفسه في webpack 5: استخدم `optimization.splitChunks.cacheGroups: { default: false, defaultVendors: false }`.
 
-Consider removing defaults:
+فكر في إزالة defaults:
 
-- Using `entry: './src/index.js'`: you can omit it, that's the default.
-- Using `output.path: path.resolve(__dirname, 'dist')`: you can omit it, that's the default.
-- Using `output.filename: '[name].js'`: you can omit it, that's the default.
+- عند استخدام `entry: './src/index.js'`: يمكنك حذفها، لأنها القيمة الافتراضية.
+- عند استخدام `output.path: path.resolve(__dirname, 'dist')`: يمكنك حذفها، لأنها القيمة الافتراضية.
+- عند استخدام `output.filename: '[name].js'`: يمكنك حذفها، لأنها القيمة الافتراضية.
 
-### Need to support an older browser like IE 11?
+### هل تحتاج إلى دعم متصفح قديم مثل IE 11؟
 
-- If you have [browserslist](https://github.com/browserslist/browserslist) enabled for your project, webpack 5 will reuse your `browserslist` config to decide which code style to emit for the runtime code.
+- إذا كان [browserslist](https://github.com/browserslist/browserslist) مفعّلًا في مشروعك، فسيعيد webpack 5 استخدام إعداد `browserslist` لتحديد أسلوب الكود الذي سيصدره runtime.
 
-  Make sure to:
-  1. set [`target`](/configuration/target/#root) to `browserslist` or remove `target` letting webpack set `browserslist` automatically for you.
-  2. add a `IE 11` to your browserslist configuration.
+  تأكد من:
+  1. ضبط [`target`](/configuration/target/#root) على `browserslist` أو حذف `target` وترك webpack يضبط `browserslist` تلقائيًا.
+  2. إضافة `IE 11` إلى إعداد browserslist لديك.
 
-- Without a `browserslist` webpack's runtime code uses ES2015 syntax (e.g., arrow function) to build smaller bundles. Hence you'll need to set `target: ['web', 'es5']` to use the ES5 syntax for browsers (like IE11) which don't support ES2015 syntax .
-- For Node.js, builds include the supported Node.js version in the `target` option and webpack will automatically figure out which syntax is supported, e.g. `target: 'node8.6'`.
+- بدون `browserslist`، يستخدم runtime code الخاص بـ webpack صيغة ES2015، مثل arrow function، لإنتاج bundles أصغر. لذلك ستحتاج إلى ضبط `target: ['web', 'es5']` لاستخدام صيغة ES5 للمتصفحات التي لا تدعم ES2015 مثل IE11.
+- بالنسبة إلى Node.js، تتضمن builds إصدار Node.js المدعوم داخل خيار `target`، وسيعرف webpack تلقائيًا أي syntax مدعوم، مثل `target: 'node8.6'`.
 
-### Cleanup the code
+### تنظيف الكود
 
-#### Using `/* webpackChunkName: '...' */`
+#### استخدام `/* webpackChunkName: '...' */`
 
-Make sure to understand the intention:
+تأكد من فهم الهدف:
 
-- The chunk's name here is intended to be public.
-- It's not a development-only name.
-- Webpack will use it to name files in production and development modes.
-- Webpack 5 will automatically assign useful file names in `development` mode even when not using `webpackChunkName`.
+- اسم chunk هنا مقصود أن يكون عامًا.
+- ليس اسمًا خاصًا بالتطوير فقط.
+- سيستخدمه webpack لتسمية الملفات في production وdevelopment modes.
+- سيعين webpack 5 أسماء ملفات مفيدة تلقائيًا في `development` mode حتى بدون استخدام `webpackChunkName`.
 
-#### Using named exports from JSON modules
+#### استخدام named exports من JSON modules
 
-This is not supported by the new specification and you will get a warning. Instead of:
+هذا غير مدعوم في المواصفة الجديدة وستحصل على تحذير. بدلًا من:
 
 ```js
 import { version } from "./package.json";
@@ -236,7 +225,7 @@ import { version } from "./package.json";
 console.log(version);
 ```
 
-use:
+استخدم:
 
 ```js
 import pkg from "./package.json";
@@ -244,110 +233,110 @@ import pkg from "./package.json";
 console.log(pkg.version);
 ```
 
-> **Note**: Codemod for this change:
+> **ملاحظة**: يوجد Codemod لهذا التغيير:
 >
 > ```bash
 > npx codemod webpack/v5/json-imports-to-default-imports
 > ```
 >
-> (See the [registry here](https://codemod.com/registry/webpack-v5-json-imports-to-default-imports).)
+> (راجع [registry هنا](https://codemod.com/registry/webpack-v5-json-imports-to-default-imports).)
 
-#### Cleanup the build code
+#### تنظيف كود build
 
-- When using `const compiler = webpack(...);`, make sure to close the compiler after using it: `compiler.close(callback);`.
-  - This doesn't apply to the `webpack(..., callback)` form which automatically closes.
-  - This is optional if you use webpack in watching mode until the user ends the process. The idle phases in watch mode will be used for this kind of work.
+- عند استخدام `const compiler = webpack(...);`، تأكد من إغلاق compiler بعد استخدامه: `compiler.close(callback);`.
+  - لا ينطبق هذا على صيغة `webpack(..., callback)` لأنها تُغلق تلقائيًا.
+  - هذا اختياري إذا كنت تستخدم webpack في watching mode حتى ينهي المستخدم العملية. ستُستخدم idle phases في watch mode لهذا النوع من العمل.
 
-### Run a single build and follow advice
+### شغّل build واحدًا واتبع النصائح
 
-Please make sure to read the building errors/warnings carefully. If there is no corresponding advice, please create an issue and we will try to resolve it.
+تأكد من قراءة أخطاء وتحذيرات build بعناية. إذا لم توجد نصيحة مقابلة، أنشئ issue وسنحاول حلها.
 
-Repeat the following steps until you solved at least level 3 or 4:
+كرر الخطوات التالية حتى تحل المستوى 3 أو 4 على الأقل:
 
-- Level 1: **Schema validation fails**.
+- المستوى 1: **فشل Schema validation**.
 
-  Configuration options have changed. There should be a validation error with a `BREAKING CHANGE:` note, or a hint of which option should be used instead.
+  تغيرت خيارات الإعداد. يجب أن يظهر validation error يحتوي على ملاحظة `BREAKING CHANGE:`، أو تلميح للخيار الذي يجب استخدامه بدلًا من القديم.
 
-- Level 2: **Webpack exits with an error**.
+- المستوى 2: **ينهي Webpack العمل بخطأ**.
 
-  The error message should tell you what needs to be changed.
+  يجب أن تخبرك رسالة الخطأ بما يحتاج إلى تغيير.
 
-- Level 3: **Build Errors**.
+- المستوى 3: **Build Errors**.
 
-  The error message should have a `BREAKING CHANGE:` note.
+  يجب أن تحتوي رسالة الخطأ على ملاحظة `BREAKING CHANGE:`.
 
-- Level 4: **Build Warnings**.
+- المستوى 4: **Build Warnings**.
 
-  The warning message should tell you what can be improved.
+  يجب أن تخبرك رسالة التحذير بما يمكن تحسينه.
 
-- Level 5: **Runtime Errors**.
+- المستوى 5: **Runtime Errors**.
 
-  This is tricky. You probably have to debug to find the problem. General advice is difficult here. But we do list some common advice below regarding Runtime Errors:
-  - `process` is not defined.
-    - webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code.
-    - Want to support browser usage? Use the `exports` or `imports` package.json field to use different code depending on the environment.
-      - Also use the `browser` field to support older bundlers.
-      - Alternative: Wrap code blocks with the `typeof process` checks. Note that this will have a negative impact on the bundle size.
-    - Want to use environment variables with `process.env.VARIABLE`? You need to use the `DefinePlugin` or `EnvironmentPlugin` to define these variables in the configuration.
-      - Consider using `VARIABLE` instead and make sure to check `typeof VARIABLE !== 'undefined'` too. `process.env` is Node.js specific and should be avoided in frontend code.
-  - 404 errors pointing to URLs containing `auto`
-    - Not all ecosystem tooling is ready for the new default automatic `publicPath` via `output.publicPath: "auto"`
-      - Use a static `output.publicPath: ""` instead.
+  هذا أصعب. غالبًا ستحتاج إلى debugging لمعرفة المشكلة. تقديم نصيحة عامة هنا صعب، لكن هذه بعض النصائح الشائعة المتعلقة بـ Runtime Errors:
+  - `process` غير معرّف.
+    - لم يعد webpack 5 يضيف polyfill لهذا المتغير الخاص بـ Node.js. تجنب استخدامه في كود frontend.
+    - تريد دعم الاستخدام في المتصفح؟ استخدم حقلي `exports` أو `imports` داخل package.json لاختيار كود مختلف حسب البيئة.
+      - استخدم أيضًا حقل `browser` لدعم bundlers القديمة.
+      - بديل آخر: غلّف أجزاء الكود بفحوصات `typeof process`. لاحظ أن هذا يؤثر سلبًا في حجم bundle.
+    - تريد استخدام environment variables عبر `process.env.VARIABLE`؟ تحتاج إلى استخدام `DefinePlugin` أو `EnvironmentPlugin` لتعريف هذه المتغيرات في الإعدادات.
+      - فكر في استخدام `VARIABLE` بدلًا من ذلك، وتأكد من فحص `typeof VARIABLE !== 'undefined'` أيضًا. `process.env` خاص بـ Node.js ويجب تجنبه في كود frontend.
+  - أخطاء 404 تشير إلى URLs تحتوي على `auto`.
+    - ليست كل أدوات ecosystem جاهزة للقيمة الافتراضية الجديدة للـ `publicPath` التلقائي عبر `output.publicPath: "auto"`.
+      - استخدم `output.publicPath: ""` ثابتًا بدلًا من ذلك.
   - Cannot read properties of undefined (reading 'call')
-    - If you see this error during runtime, it may be related to the [ModuleConcatenationPlugin](https://webpack.js.org/plugins/module-concatenation-plugin/). Check if you are using the plugin, and if you've included it in the `plugins` sections of a config, and that config is also set to `production` mode, remove the plugin (ie `new webpack.optimize.ModuleConcatenationPlugin()`) from your plugins list. In webpack 5, the plugin is enabled by default in production mode, and it may get included twice.
-    - In general, disabling each plugin and testing the build is a good way to triage where the issue might be coming from.
-    - See: [this issue](https://github.com/webpack/webpack/discussions/15369#discussioncomment-13420496) for more details.
+    - إذا رأيت هذا الخطأ وقت runtime، فقد يكون مرتبطًا بـ [ModuleConcatenationPlugin](https://webpack.js.org/plugins/module-concatenation-plugin/). تحقق مما إذا كنت تستخدم plugin، وإذا كنت أضفته إلى قسم `plugins` في إعداد ما وكان ذلك الإعداد مضبوطًا أيضًا على `production` mode، فأزل plugin، أي `new webpack.optimize.ModuleConcatenationPlugin()`، من قائمة plugins. في webpack 5، هذا plugin مفعّل افتراضيًا في production mode، وقد تتم إضافته مرتين.
+    - بشكل عام، تعطيل كل plugin واختبار build طريقة جيدة لتحديد مصدر المشكلة.
+    - راجع [هذه المناقشة](https://github.com/webpack/webpack/discussions/15369#discussioncomment-13420496) لمزيد من التفاصيل.
 
-- Level 6: **Deprecation Warnings**.
+- المستوى 6: **Deprecation Warnings**.
 
-  You probably get a lot of deprecation warnings. This is not directly a problem. Plugins need time to catch up with core changes. Please report these deprecations to the plugins. These deprecations are only warnings and the build will still work with only minor drawbacks (like less performance).
-  - You can hide deprecation warnings by running node with `--no-deprecation` flag, e.g.: `node --no-deprecation node_modules/webpack/bin/webpack.js`. This should only be a temporary workaround.
-  - Plugins and Loaders contributors can follow the advice in the deprecation messages to improve the code.
+  غالبًا ستظهر لك تحذيرات deprecation كثيرة. هذا ليس مشكلة مباشرة. تحتاج plugins وقتًا للحاق بتغييرات core. يرجى إبلاغ مؤلفي plugins بهذه التحذيرات. هذه التحذيرات مجرد warnings وسيظل build يعمل مع عيوب بسيطة فقط، مثل أداء أقل.
+  - يمكنك إخفاء تحذيرات deprecation بتشغيل node مع flag `--no-deprecation`، مثل: `node --no-deprecation node_modules/webpack/bin/webpack.js`. يجب أن يكون هذا حلًا مؤقتًا فقط.
+  - يمكن لمساهمي Plugins وLoaders اتباع النصائح الموجودة في رسائل deprecation لتحسين الكود.
 
-- Level 7: **Performance issues**.
+- المستوى 7: **مشاكل الأداء**.
 
-  Usually, performance should improve with webpack 5, but there are also a few cases where performance gets worse.
+  عادةً يجب أن يتحسن الأداء مع webpack 5، لكن توجد حالات قليلة قد يسوء فيها الأداء.
 
-  And here are something you can do to improve the situation:
-  - Profile where the time is spent.
-    - `--profile --progress` displays a simple performance profile now
-    - `node --inspect-brk node_modules/webpack/bin/webpack.js` + [`chrome://inspect`](chrome://inspect) / [`edge://inspect`](edge://inspect) (see profiler tab).
-      - You can save these profiles to files and provide them in issues.
-      - Try using `--no-turbo-inlining` flag for better stack traces in some cases.
-  - Time for building modules in incremental builds can be improved by reverting to unsafe caching like in webpack 4:
+  وهذه أشياء يمكنك فعلها لتحسين الوضع:
+  - اعمل profile لمعرفة أين يذهب الوقت.
+    - يعرض `--profile --progress` الآن profile أداء بسيطًا.
+    - استخدم `node --inspect-brk node_modules/webpack/bin/webpack.js` مع [`chrome://inspect`](chrome://inspect) أو [`edge://inspect`](edge://inspect)، ثم راجع تبويب profiler.
+      - يمكنك حفظ هذه profiles كملفات وإرفاقها في issues.
+      - جرّب استخدام flag `--no-turbo-inlining` للحصول على stack traces أفضل في بعض الحالات.
+  - يمكن تحسين وقت بناء modules في incremental builds بالرجوع إلى unsafe caching كما في webpack 4:
     - `module.unsafeCache: true`
-    - But this might affect the ability to handle some of the changes to the code base
+    - لكن هذا قد يؤثر في القدرة على التعامل مع بعض تغييرات code base.
   - Full build
-    - Backward-compatibility layer for the deprecated features will usually have worse performance compared to the new features.
-    - Creating many warnings can affect build performance, even if they are ignored.
-    - Source Maps are expensive. Check [`devtool`](/configuration/devtool/) option in the documentation to see a comparison of the different options.
-    - Anti-Virus protection might affect performance of the file system access.
-    - Persistent Caching can help to improve the repetitive full builds.
-    - Module Federation allows to split the application into multiple smaller builds.
+    - طبقة التوافق مع الميزات المهملة غالبًا أبطأ من الميزات الجديدة.
+    - إنشاء warnings كثيرة قد يؤثر في أداء build حتى لو تم تجاهلها.
+    - Source Maps مكلفة. راجع خيار [`devtool`](/configuration/devtool/) في التوثيق للمقارنة بين الخيارات المختلفة.
+    - حماية Anti-Virus قد تؤثر في أداء الوصول إلى نظام الملفات.
+    - Persistent Caching يمكن أن يساعد في تحسين full builds المتكررة.
+    - Module Federation يسمح بتقسيم التطبيق إلى عدة builds أصغر.
 
-## Everything works?
+## كل شيء يعمل؟
 
-Please tweet that you have successfully migrated to webpack 5. [Tweet it](https://twitter.com/intent/tweet?source=https://webpack.js.org/migrate/5/&text=I%20just%20migrated%20to%20webpack%205%20using%20its%20migration%20guide!%20&via=webpack&hashtags=webpack,webpack5)
+يرجى التغريد بأنك نجحت في الترقية إلى webpack 5. [غرّد بذلك](https://twitter.com/intent/tweet?source=https://webpack.js.org/migrate/5/&text=I%20just%20migrated%20to%20webpack%205%20using%20its%20migration%20guide!%20&via=webpack&hashtags=webpack,webpack5)
 
-## It is not working?
+## لا يعمل؟
 
-Create an [issue](https://github.com/webpack/webpack/issues/new?template=Bug_report.md) and tell us about the issues you have encountered during the migration.
+أنشئ [issue](https://github.com/webpack/webpack/issues/new?template=Bug_report.md) وأخبرنا بالمشاكل التي واجهتها أثناء الترقية.
 
-## Something missing in this guide?
+## يوجد شيء ناقص في هذا الدليل؟
 
-Please open a [Pull Request](https://github.com/webpack/webpack.js.org/edit/main/src/content/migrate/5.mdx) to help the next person using this guide.
+افتح [Pull Request](https://github.com/webpack/webpack.js.org/edit/main/src/content/migrate/5.mdx) لمساعدة الشخص التالي الذي يستخدم هذا الدليل.
 
-## Changes to internals
+## تغييرات داخلية
 
-The changes to webpack internals such as: adding types, refactoring code and methods renaming are listed here for anyone interested. But they are not intended as a part of common use-case migration.
+التغييرات الداخلية في webpack، مثل إضافة الأنواع وإعادة هيكلة الكود وإعادة تسمية الدوال، مذكورة هنا لمن يهمه الأمر. لكنها ليست جزءًا من سيناريو الترقية المعتاد.
 
-- `Module.nameForCondition`, `Module.updateCacheModule` and `Module.chunkCondition` are no longer optional.
+- لم تعد `Module.nameForCondition` و`Module.updateCacheModule` و`Module.chunkCondition` اختيارية.
 
-### getOptions method for Loaders
+### دالة getOptions للـ Loaders
 
-Webpack 5 ships with built-in [`this.getOptions`](/api/loaders/#thisgetoptionsschema) method available in loader context. This is a breaking change for loaders that had been using `getOptions` method from previously preferred [schema-utils](https://github.com/webpack/schema-utils):
+يأتي Webpack 5 بدالة [`this.getOptions`](/api/loaders/#thisgetoptionsschema) مدمجة ومتاحة داخل loader context. هذا تغيير كاسر للـ loaders التي كانت تستخدم دالة `getOptions` من [schema-utils](https://github.com/webpack/schema-utils)، والتي كانت مفضلة سابقًا:
 
-- `this.getOptions` is available since webpack 5
-- Instead of JSON5 it supports JSON as a query string: `?{arg:true}` → `?{"arg":true}`. Using JSON5 should be considered and documented as deprecated in favor of JSON in the respective Loader's documentation.
-- [`loader-utils`](https://github.com/webpack/loader-utils) has specific behavior for parsing query strings (`true`, `false` and `null` won't be parsed as `string` but as a primitive value). This is no longer the case for the new built-in `this.getOptions` method, which uses native [`querystring`](https://nodejs.org/api/querystring.html) parsing (ships with Node.js). It is still possible to add custom behavior for these cases in the Loader's code after getting the options by using `this.getOptions` method.
-- Schema argument is optional for the new `this.getOptions` method, but we strongly advise to add schema validation for your Loader's options. The `title` field in the schema, can be used to customize the validation error message e.g. `"title": "My Loader ooooptions"` will result in displaying errors this way: `Invalid ooooptions object. My Loader has been initialised using an ooooptions object that does not match the API schema. - ooooptions.foo.bar.baz should be a string.`
+- `this.getOptions` متاحة منذ webpack 5.
+- بدل JSON5، تدعم JSON كـ query string: `?{arg:true}` → `?{"arg":true}`. يجب اعتبار استخدام JSON5 مهملًا وتوثيقه كذلك داخل توثيق loader المعني لصالح JSON.
+- لدى [`loader-utils`](https://github.com/webpack/loader-utils) سلوك خاص في تحليل query strings، حيث لا تُقرأ `true` و`false` و`null` كنصوص بل كقيم primitive. لم يعد هذا هو الحال في دالة `this.getOptions` المدمجة الجديدة، فهي تستخدم تحليل [`querystring`](https://nodejs.org/api/querystring.html) الأصلي من Node.js. ما زال بإمكانك إضافة سلوك مخصص لهذه الحالات داخل كود loader بعد الحصول على options باستخدام `this.getOptions`.
+- argument الخاص بـ schema اختياري في دالة `this.getOptions` الجديدة، لكننا ننصح بشدة بإضافة schema validation لخيارات loader. يمكن استخدام حقل `title` في schema لتخصيص رسالة خطأ validation. مثلًا `"title": "My Loader ooooptions"` سيؤدي إلى عرض الأخطاء بهذا الشكل: `Invalid ooooptions object. My Loader has been initialised using an ooooptions object that does not match the API schema. - ooooptions.foo.bar.baz should be a string.`
diff --git a/src/content/migrate/index.mdx b/src/content/migrate/index.mdx
index c899750175d1..b6815304886b 100644
--- a/src/content/migrate/index.mdx
+++ b/src/content/migrate/index.mdx
@@ -1,8 +1,8 @@
 ---
-title: Migrate
+title: الترقية
 sort: -1
 contributors:
-  - EugeneHlushko
+  - RlxChap2
 ---
 
-This section contains information about migrating from older versions of webpack to newer ones.
+يحتوي هذا القسم على إرشادات الانتقال من الإصدارات القديمة من webpack إلى الإصدارات الأحدث. إذا كنت تحدّث مشروعًا موجودًا، ابدأ من الصفحة التي تطابق الإصدار الذي تستخدمه حاليًا.
diff --git a/src/content/plugins/context-replacement-plugin.mdx b/src/content/plugins/context-replacement-plugin.mdx
index 151197466c03..977385f388f9 100644
--- a/src/content/plugins/context-replacement-plugin.mdx
+++ b/src/content/plugins/context-replacement-plugin.mdx
@@ -1,11 +1,8 @@
 ---
 title: ContextReplacementPlugin
-group: webpack
 contributors:
-  - simon04
-  - byzyk
-  - masives
-  - chenxsan
+  - RlxChap2
+group: webpack
 related:
   - title: Issue 2783 - ContextReplacementPlugin Description
     url: https://github.com/webpack/webpack/issues/2783#issuecomment-234137265
@@ -13,11 +10,11 @@ related:
     url: https://github.com/date-fns/date-fns/blob/master/docs/webpack.md
 ---
 
-_Context_ refers to [dynamic expressions in import() or require()](/guides/dependency-management/#dynamic-expressions-in-import-or-require) such as `require('./locale/' + name + '.json')`. When encountering such an expression, webpack infers the directory (`'./locale/'`) and a regular expression (`/^.*\.json$/`). Since the `name` is not known at compile time, webpack includes every file as module in the bundle.
+يشير _context_ إلى [التعابير الديناميكية داخل import() أو require()](/guides/dependency-management/#dynamic-expressions-in-import-or-require)، مثل `require('./locale/' + name + '.json')`. عندما يقرأ webpack هذا النوع من التعابير، فإنه يستنتج المجلد (`'./locale/'`) وregular expression مثل (`/^.*\.json$/`). وبما أن قيمة `name` غير معروفة وقت التجميع، فسيضمّن webpack كل ملف مطابق كـ module داخل bundle.
 
-The `ContextReplacementPlugin` allows you to override the inferred information. There are various ways to configure the plugin:
+يسمح لك `ContextReplacementPlugin` بتغيير المعلومات التي استنتجها webpack. توجد أكثر من طريقة لإعداد plugin:
 
-## Usage
+## الاستخدام
 
 ```ts
 new webpack.ContextReplacementPlugin(
@@ -28,15 +25,15 @@ new webpack.ContextReplacementPlugin(
 )
 ```
 
-If the resource (directory) matches `resourceRegExp`, the plugin replaces the default resource, recursive flag or generated regular expression with `newContentResource`, `newContentRecursive` or `newContextRegExp` respectively. If `newContentResource` is relative, it is resolved relative to the previous resource.
+إذا طابق المورد، أي المجلد، قيمة `resourceRegExp`، فسيستبدل plugin المورد الافتراضي أو قيمة recursive أو regular expression الناتج بالقيم `newContentResource` أو `newContentRecursive` أو `newContextRegExp` على الترتيب. إذا كانت `newContentResource` مسارًا نسبيًا، فسيُحل نسبة إلى المورد السابق.
 
-Here's a small example to restrict module usage:
+هذا مثال صغير لتقييد modules التي تُستخدم:
 
 ```js
 new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|fr|hu/);
 ```
 
-The `moment/locale` context is restricted to files matching `/de|fr|hu/`. Thus only those locales are included (see [this issue](https://github.com/moment/moment/issues/2373) for more information).
+في هذا المثال، يُقيّد context الخاص بـ `moment/locale` ليقبل فقط الملفات المطابقة لـ `/de|fr|hu/`. لذلك لن تُضمّن إلا هذه locales (راجع [هذه المشكلة](https://github.com/moment/moment/issues/2373) لمزيد من التفاصيل).
 
 ## Content Callback
 
@@ -47,9 +44,9 @@ new webpack.ContextReplacementPlugin(
 );
 ```
 
-The `newContentCallback` function is given a [`data` object of the `ContextModuleFactory`](/api/plugins/module-factories/) and is expected to overwrite the `request` attribute of the supplied object.
+تستقبل دالة `newContentCallback` كائن [`data` من `ContextModuleFactory`](/api/plugins/module-factories/)، والمتوقع منها أن تستبدل خاصية `request` في الكائن الممرر.
 
-Using this callback we can dynamically redirect requests to a new location:
+باستخدام هذا callback نستطيع إعادة توجيه requests ديناميكيًا إلى موقع جديد:
 
 ```js
 new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
@@ -62,9 +59,9 @@ new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
 });
 ```
 
-## Other Options
+## خيارات أخرى
 
-The `newContentResource` and `newContentCreateContextMap` parameters are also available:
+يتوفر أيضًا المعاملان `newContentResource` و`newContentCreateContextMap`:
 
 ```ts
 new webpack.ContextReplacementPlugin(
@@ -74,7 +71,7 @@ new webpack.ContextReplacementPlugin(
 );
 ```
 
-These two parameters can be used together to redirect requests in a more targeted way. The `newContentCreateContextMap` allows you to map runtime requests to compile requests in the form of an object:
+يمكن استخدام هذين المعاملين معًا لإعادة توجيه requests بطريقة أدق. يسمح لك `newContentCreateContextMap` بربط runtime requests مع compile-time requests داخل object:
 
 ```js
 new ContextReplacementPlugin(/selector/, "./folder", {
diff --git a/src/content/plugins/define-plugin.mdx b/src/content/plugins/define-plugin.mdx
index ad6acf30fc5e..d8a6c1607929 100644
--- a/src/content/plugins/define-plugin.mdx
+++ b/src/content/plugins/define-plugin.mdx
@@ -1,16 +1,11 @@
 ---
 title: DefinePlugin
-group: webpack
 contributors:
-  - simon04
-  - rouzbeh84
-  - byzyk
-  - EugeneHlushko
-  - smonusbonus
-  - chenxsan
+  - RlxChap2
+group: webpack
 ---
 
-The `DefinePlugin` replaces variables in your code with other values or expressions at **compile** time. This can be useful for allowing different behavior between development builds and production builds. If you perform logging in your development build but not in the production build you might use a global constant to determine whether logging takes place. That's where `DefinePlugin` shines, set it and forget it rules for development and production builds.
+يستبدل `DefinePlugin` المتغيرات الموجودة في كودك بقيم أو تعابير أخرى وقت **التجميع**. يفيد هذا عندما تريد سلوكًا مختلفًا بين builds الخاصة بالتطوير وbuilds الخاصة بالإنتاج. مثلًا، إذا كنت تريد تشغيل logging أثناء التطوير فقط، يمكنك استخدام constant عام يحدد هل يتم تسجيل الرسائل أم لا. هنا يظهر دور `DefinePlugin`: تعرّف القيمة مرة واحدة، ثم يستخدمها webpack أثناء بناء نسخ التطوير أو الإنتاج.
 
 ```js
 new webpack.DefinePlugin({
@@ -18,16 +13,16 @@ new webpack.DefinePlugin({
 });
 ```
 
-## Usage
+## الاستخدام
 
-Each key passed into `DefinePlugin` is an identifier or multiple identifiers joined with `.`.
+كل key تمرره إلى `DefinePlugin` يكون identifier واحدًا أو عدة identifiers مفصولة بـ `.`.
 
-- If the value is a string it will be used as a code fragment.
-- If the value isn't a string, it will be stringified (including functions).
-- If the value is an object all keys are defined the same way.
-- If you prefix `typeof` to the key, it's only defined for typeof calls.
+- إذا كانت القيمة string، فستُستخدم كمقطع كود.
+- إذا لم تكن القيمة string، فسيتم تحويلها إلى string، ويشمل ذلك functions.
+- إذا كانت القيمة object، فسيتم تعريف كل المفاتيح داخله بالطريقة نفسها.
+- إذا أضفت `typeof` قبل key، فسيُعرّف فقط عند استخدام `typeof`.
 
-The values will be inlined into the code allowing a minification pass to remove the redundant conditional.
+تُحقن القيم مباشرة داخل الكود، وهذا يسمح لخطوة التصغير بإزالة الشروط غير المفيدة.
 
 ```js
 new webpack.DefinePlugin({
@@ -45,9 +40,9 @@ console.log(`Running App version ${VERSION}`);
 if (!BROWSER_SUPPORTS_HTML5) require("html5shiv");
 ```
 
-W> When defining values for `process` prefer `'process.env.NODE_ENV': JSON.stringify('production')` over `process: { env: { NODE_ENV: JSON.stringify('production') } }`. Using the latter will overwrite the `process` object which can break compatibility with some modules that expect other values on the process object to be defined.
+W> عند تعريف قيم لـ `process`، يفضّل استخدام `'process.env.NODE_ENV': JSON.stringify('production')` بدل `process: { env: { NODE_ENV: JSON.stringify('production') } }`. الطريقة الثانية تستبدل كائن `process` كاملًا، وقد تكسر توافق بعض modules التي تتوقع وجود قيم أخرى داخل `process`.
 
-T> Note that because the plugin does a direct text replacement, the value given to it must include **actual quotes** inside of the string itself. Typically, this is done either with alternate quotes, such as `'"production"'`, or by using `JSON.stringify('production')`.
+T> بما أن plugin يعمل باستبدال نصي مباشر، يجب أن تحتوي القيمة التي تمررها على علامات الاقتباس الفعلية داخل string نفسه. غالبًا يتم ذلك باستخدام نوع اقتباس مختلف مثل `'"production"'`، أو باستخدام `JSON.stringify('production')`.
 
 ```js
 if (!PRODUCTION) {
@@ -59,7 +54,7 @@ if (PRODUCTION) {
 }
 ```
 
-After passing through webpack with no minification results in:
+بعد المرور عبر webpack بدون تصغير، يصبح الناتج:
 
 {/* eslint-disable no-constant-condition */}
 
@@ -72,7 +67,7 @@ if (true) {
 }
 ```
 
-and then after a minification pass results in:
+وبعد خطوة التصغير يصبح الناتج:
 
 ```js
 console.log("Production log");
@@ -80,7 +75,7 @@ console.log("Production log");
 
 ## Feature Flags
 
-Enable/disable features in production/development build using [feature flags](https://en.wikipedia.org/wiki/Feature_toggle).
+يمكنك تفعيل أو تعطيل ميزات في build الإنتاج أو التطوير باستخدام [feature flags](https://en.wikipedia.org/wiki/Feature_toggle).
 
 ```js
 new webpack.DefinePlugin({
@@ -91,7 +86,7 @@ new webpack.DefinePlugin({
 
 ## Service URLs
 
-Use a different service URL in production/development builds:
+يمكنك استخدام عنوان خدمة مختلف في builds الخاصة بالإنتاج أو التطوير:
 
 ```js
 new webpack.DefinePlugin({
@@ -99,21 +94,21 @@ new webpack.DefinePlugin({
 });
 ```
 
-## Runtime values via `runtimeValue`
+## قيم وقت التشغيل عبر `runtimeValue`
 
 `function (getterFunction, [string] | true | object) => getterFunction()`
 
-It is possible to define variables with values that rely on files and will be re-evaluated when such files change in the file system. This means webpack will rebuild when such watched files change.
+يمكنك تعريف متغيرات تعتمد قيمها على ملفات معيّنة، وتُعاد قراءة هذه القيم عندما تتغير تلك الملفات في نظام الملفات. هذا يعني أن webpack سيعيد البناء عندما تتغير الملفات التي يراقبها.
 
-There're two arguments for `webpack.DefinePlugin.runtimeValue` function:
+توجد وسيطتان لدالة `webpack.DefinePlugin.runtimeValue`:
 
-- The first argument is a `function(module, key, version)` that should return the value to be assigned to the definition.
-- The second argument could either be an array of file paths to watch for or a `true` to flag the module as uncacheable. Since 5.26.0, it can also take an object argument with the following properties:
-  - `fileDependencies?: string[]` A list of files the function depends on.
-  - `contextDependencies?: string[]` A list of directories the function depends on.
-  - `missingDependencies?: string[]` A list of not existing files the function depends on.
-  - `buildDependencies?: string[]` A list of build dependencies the function depends on.
-  - `version?: string | () => string` A version of the function.
+- الوسيطة الأولى هي دالة `function(module, key, version)` يجب أن ترجع القيمة التي ستُسند إلى التعريف.
+- الوسيطة الثانية يمكن أن تكون array لمسارات الملفات التي يجب مراقبتها، أو `true` لوضع علامة أن module غير قابل للتخزين في cache. ومنذ 5.26.0، يمكن أن تكون object يحتوي الخصائص التالية:
+  - `fileDependencies?: string[]`: قائمة الملفات التي تعتمد عليها الدالة.
+  - `contextDependencies?: string[]`: قائمة المجلدات التي تعتمد عليها الدالة.
+  - `missingDependencies?: string[]`: قائمة ملفات غير موجودة تعتمد عليها الدالة.
+  - `buildDependencies?: string[]`: قائمة build dependencies التي تعتمد عليها الدالة.
+  - `version?: string | () => string`: إصدار الدالة.
 
 ```js
 import path from "node:path";
@@ -131,4 +126,4 @@ new webpack.DefinePlugin({
 });
 ```
 
-The value of `BUILT_AT` would be the time at which the `'sample.txt'` was last updated in the file system, e.g. `1597953013291`.
+ستكون قيمة `BUILT_AT` هي وقت آخر تحديث للملف `'sample.txt'` في نظام الملفات، مثل `1597953013291`.
diff --git a/src/content/plugins/dll-plugin.mdx b/src/content/plugins/dll-plugin.mdx
index fd21a72af8e5..49f8119e0ecb 100644
--- a/src/content/plugins/dll-plugin.mdx
+++ b/src/content/plugins/dll-plugin.mdx
@@ -1,85 +1,77 @@
 ---
 title: DllPlugin
-group: webpack
 contributors:
-  - aretecode
-  - sokra
-  - opiepj
-  - simon04
-  - skipjack
-  - byzyk
-  - EugeneHlushko
-  - EslamHiko
-  - snitin315
+  - RlxChap2
+group: webpack
 related:
   - title: Code Splitting Example
     url: https://github.com/webpack/webpack/blob/main/examples/explicit-vendor-chunk/README.md
 ---
 
-The `DllPlugin` and `DllReferencePlugin` provide means to split bundles in a way that can drastically improve build time performance. The term "DLL" stands for Dynamic-link library which was originally introduced by Microsoft.
+يوفر `DllPlugin` و`DllReferencePlugin` طريقة لتقسيم bundles بشكل قد يحسّن أداء وقت البناء بدرجة كبيرة. مصطلح "DLL" اختصار لـ Dynamic-link library، وقد ظهر في الأصل من Microsoft.
 
 ## DllPlugin
 
-This plugin is used in a separate webpack configuration exclusively to create a dll-only-bundle. It creates a `manifest.json` file, which is used by the [`DllReferencePlugin`](#dllreferenceplugin) to map dependencies.
+يُستخدم هذا plugin داخل إعداد webpack منفصل، وهدفه الوحيد إنشاء bundle خاص بالـ dll. ينشئ ملف `manifest.json`، ويستخدمه [`DllReferencePlugin`](#dllreferenceplugin) لربط dependencies بمعرّفاتها.
 
-- `context` (optional): context of requests in the manifest file (defaults to the webpack context.)
-- `format` (boolean = false): If `true`, manifest json file (output) will be formatted.
-- `name`: name of the exposed dll function ([TemplatePaths](https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js): `[fullhash]`, `[chunkhash]`, `[contenthash]`, & `[name]` )
-- `path`: **absolute path** to the manifest json file (output)
-- `entryOnly` (boolean = true): if `true`, only entry points will be exposed
-- `type`: type of the dll bundle
+- `context` (اختياري): سياق requests داخل ملف manifest. القيمة الافتراضية هي سياق webpack.
+- `format` (boolean = false): إذا كانت `true`، فسيتم تنسيق ملف manifest بصيغة JSON عند إخراجه.
+- `name`: اسم دالة dll التي سيتم كشفها. يدعم [TemplatePaths](https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js) مثل: `[fullhash]` و`[chunkhash]` و`[contenthash]` و`[name]`.
+- `path`: **مسار مطلق** إلى ملف manifest بصيغة JSON الذي سيتم إخراجه.
+- `entryOnly` (boolean = true): إذا كانت `true`، فلن يتم كشف إلا entry points.
+- `type`: نوع dll bundle.
 
 ```js
 new webpack.DllPlugin(options);
 ```
 
-W> When webpack output uses [code splitting](/guides/code-splitting), we should use [Template strings](/configuration/output/#template-strings) in `path` to ensure that webpack generates multiple manifest files.
+W> عندما يستخدم output في webpack ميزة [code splitting](/guides/code-splitting)، يجب استخدام [Template strings](/configuration/output/#template-strings) في `path` حتى ينشئ webpack عدة ملفات manifest.
 
-W> We recommend using DllPlugin only with `entryOnly: true`, otherwise tree shaking in the DLL won't work as all the exports might be used.
+W> نوصي باستخدام DllPlugin مع `entryOnly: true` فقط؛ لأن tree shaking داخل DLL لن يعمل إذا كانت كل exports قد تُعد مستخدمة.
 
-Creates a `manifest.json` which is written to the given `path`. It contains mappings from require and import requests to module ids. It is used by the `DllReferencePlugin`.
+ينشئ هذا plugin ملف `manifest.json` ويكتبه في `path` المحدد. يحتوي الملف على ربط بين طلبات `require` و`import` وبين module ids. ويستخدمه `DllReferencePlugin`.
 
-Combine this plugin with [`output.library`](/configuration/output/#outputlibrary) option to expose (aka, put into the global scope) the dll function.
+ادمج هذا plugin مع خيار [`output.library`](/configuration/output/#outputlibrary) لكشف دالة dll، أي جعلها متاحة في global scope.
 
 ## DllReferencePlugin
 
-This plugin is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies.
+يُستخدم هذا plugin داخل إعداد webpack الأساسي، ويشير إلى dll-only-bundle أو عدة bundles حتى يستعمل dependencies المبنية مسبقًا بدل بنائها من جديد.
 
-- `context`: (**absolute path**) context of requests in the manifest (or content property)
-- `extensions`: Extensions used to resolve modules in the dll bundle (only used when using 'scope').
-- `manifest` : an object containing `content` and `name` or a string to the absolute path of the JSON manifest to be loaded upon compilation
-- `content` (optional): the mappings from request to module id (defaults to `manifest.content`)
-- `name` (optional): an identifier where the dll is exposed (defaults to `manifest.name`) (see also [`externals`](/configuration/externals/))
-- `scope` (optional): prefix which is used for accessing the content of the dll
-- `sourceType` (optional): how the dll is exposed ([libraryTarget](/configuration/output/#outputlibrarytarget))
+- `context`: (**مسار مطلق**) سياق requests داخل manifest أو الخاصية `content`.
+- `extensions`: الامتدادات المستخدمة لحل modules داخل dll bundle. تُستخدم فقط عند استخدام `scope`.
+- `manifest`: كائن يحتوي على `content` و`name`، أو نص يمثل المسار المطلق إلى ملف JSON manifest الذي سيُحمّل أثناء compilation.
+- `content` (اختياري): الربط بين request وmodule id. القيمة الافتراضية هي `manifest.content`.
+- `name` (اختياري): معرّف المكان الذي كُشف فيه dll. القيمة الافتراضية هي `manifest.name`. راجع أيضًا [`externals`](/configuration/externals/).
+- `scope` (اختياري): بادئة تُستخدم للوصول إلى محتوى dll.
+- `sourceType` (اختياري): طريقة كشف dll. راجع [libraryTarget](/configuration/output/#outputlibrarytarget).
 
 ```js
 new webpack.DllReferencePlugin(options);
 ```
 
-References a dll manifest file to map dependency names to module ids, then requires them as needed using the internal `__webpack_require__` function.
+يشير إلى ملف dll manifest لربط أسماء dependencies بـ module ids، ثم يطلبها عند الحاجة باستخدام الدالة الداخلية `__webpack_require__`.
 
-W> Keep the `name` consistent with [`output.library`](/configuration/output/#outputlibrary).
+W> حافظ على تطابق `name` مع [`output.library`](/configuration/output/#outputlibrary).
 
-### Modes
+### الأوضاع
 
-This plugin can be used in two different modes, _scoped_ and _mapped_.
+يمكن استخدام هذا plugin بطريقتين: _scoped_ و _mapped_.
 
-#### Scoped Mode
+#### وضع Scoped
 
-The content of the dll is accessible under a module prefix. i.e. with `scope = 'xyz'` a file `abc` in the dll can be access via `require('xyz/abc')`.
+يمكن الوصول إلى محتوى dll تحت بادئة module. مثلًا، إذا كان `scope = 'xyz'`، وكان يوجد ملف `abc` داخل dll، فيمكن الوصول إليه عبر `require('xyz/abc')`.
 
-T> [See an example use of scope](https://github.com/webpack/webpack/tree/master/examples/dll-user)
+T> [راجع مثالًا لاستخدام scope](https://github.com/webpack/webpack/tree/master/examples/dll-user)
 
-#### Mapped Mode
+#### وضع Mapped
 
-The content of the dll is mapped to the current directory. If a required file matches a file in the dll (after resolving), then the file from the dll is used instead.
+يتم ربط محتوى dll بالمجلد الحالي. إذا تطابق ملف مطلوب مع ملف داخل dll بعد عملية resolving، فسيُستخدم الملف الموجود في dll بدل إدخاله في bundle الرئيسي.
 
-Because this happens after resolving every file in the dll bundle, the same paths must be available for the consumer of the dll bundle. i.e. if the dll contains `lodash` and the file `abc`, `import _ from "lodash"`/`require('lodash')` and `import abs from "./abc"`/`require('./abc')` will be used from the dll, rather than building them into the main bundle.
+لأن هذا يحدث بعد resolving لكل ملف داخل dll bundle، يجب أن تكون المسارات نفسها متاحة لدى التطبيق الذي يستهلك dll bundle. مثلًا، إذا كان dll يحتوي على `lodash` والملف `abc`، فسيتم أخذ `import _ from "lodash"` أو `require('lodash')`، وكذلك `import abs from "./abc"` أو `require('./abc')`، من dll بدل بنائها داخل bundle الرئيسي.
 
-## Usage
+## الاستخدام
 
-W> `DllReferencePlugin` and `DllPlugin` are used in _separate_ webpack configs.
+W> يُستخدم `DllReferencePlugin` و`DllPlugin` في إعدادين _منفصلين_ لـ webpack.
 
 **webpack.vendor.config.js**
 
@@ -114,26 +106,26 @@ new webpack.DllReferencePlugin({
 });
 ```
 
-## Examples
+## أمثلة
 
-[Vendor](https://github.com/webpack/webpack/tree/master/examples/dll) and [User](https://github.com/webpack/webpack/tree/master/examples/dll-user)
+[Vendor](https://github.com/webpack/webpack/tree/master/examples/dll) و[User](https://github.com/webpack/webpack/tree/master/examples/dll-user)
 
-_Two separate example folders. Demonstrates scope and context._
+_مجلدان منفصلان للأمثلة. يوضحان scope وcontext._
 
-T> Multiple `DllPlugins` and multiple `DllReferencePlugins`.
+T> يمكن استخدام عدة `DllPlugins` وعدة `DllReferencePlugins`.
 
-## References
+## المراجع
 
-### Source
+### المصدر
 
-- [DllPlugin source](https://github.com/webpack/webpack/blob/main/lib/DllPlugin.js)
-- [DllReferencePlugin source](https://github.com/webpack/webpack/blob/main/lib/DllReferencePlugin.js)
-- [DllEntryPlugin source](https://github.com/webpack/webpack/blob/main/lib/DllEntryPlugin.js)
-- [DllModuleFactory source](https://github.com/webpack/webpack/blob/main/lib/DllModuleFactory.js)
-- [ManifestPlugin source](https://github.com/webpack/webpack/blob/main/lib/LibManifestPlugin.js)
+- [مصدر DllPlugin](https://github.com/webpack/webpack/blob/main/lib/DllPlugin.js)
+- [مصدر DllReferencePlugin](https://github.com/webpack/webpack/blob/main/lib/DllReferencePlugin.js)
+- [مصدر DllEntryPlugin](https://github.com/webpack/webpack/blob/main/lib/DllEntryPlugin.js)
+- [مصدر DllModuleFactory](https://github.com/webpack/webpack/blob/main/lib/DllModuleFactory.js)
+- [مصدر ManifestPlugin](https://github.com/webpack/webpack/blob/main/lib/LibManifestPlugin.js)
 
-### Tests
+### الاختبارات
 
-- [DllPlugin creation test](https://github.com/webpack/webpack/blob/main/test/configCases/dll-plugin/0-create-dll/webpack.config.js)
-- [DllPlugin without scope test](https://github.com/webpack/webpack/blob/main/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js)
-- [DllReferencePlugin use Dll test](https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin)
+- [اختبار إنشاء DllPlugin](https://github.com/webpack/webpack/blob/main/test/configCases/dll-plugin/0-create-dll/webpack.config.js)
+- [اختبار DllPlugin بدون scope](https://github.com/webpack/webpack/blob/main/test/configCases/dll-plugin/2-use-dll-without-scope/webpack.config.js)
+- [اختبار استخدام DllReferencePlugin مع Dll](https://github.com/webpack/webpack/tree/master/test/configCases/dll-plugin)
diff --git a/src/content/plugins/environment-plugin.mdx b/src/content/plugins/environment-plugin.mdx
index 620312c124ef..98b14c1ce41d 100644
--- a/src/content/plugins/environment-plugin.mdx
+++ b/src/content/plugins/environment-plugin.mdx
@@ -1,24 +1,21 @@
 ---
 title: EnvironmentPlugin
-group: webpack
 contributors:
-  - simon04
-  - einarlove
-  - rouzbeh84
-  - byzyk
+  - RlxChap2
+group: webpack
 ---
 
-The `EnvironmentPlugin` is shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on [`process.env`](https://nodejs.org/api/process.html#process_process_env) keys.
+يُعد `EnvironmentPlugin` اختصارًا لاستخدام [`DefinePlugin`](/plugins/define-plugin) مع مفاتيح [`process.env`](https://nodejs.org/api/process.html#process_process_env).
 
-## Usage
+## الاستخدام
 
-The `EnvironmentPlugin` accepts either an array of keys or an object mapping its keys to their default values.
+يقبل `EnvironmentPlugin` إما array من المفاتيح، أو object يربط كل مفتاح بقيمته الافتراضية.
 
 ```js
 new webpack.EnvironmentPlugin(["NODE_ENV", "DEBUG"]);
 ```
 
-This is equivalent to the following `DefinePlugin` application:
+هذا يعادل استخدام `DefinePlugin` بالشكل التالي:
 
 ```js
 new webpack.DefinePlugin({
@@ -27,11 +24,11 @@ new webpack.DefinePlugin({
 });
 ```
 
-W> `EnvironmentPlugin` checks `process.env` for the specified variable. If it’s missing, it searches for a default value provided in the configuration. If neither the environment variable nor the default value is defined, an error will be thrown: **"`EnvironmentPlugin` - `${key}` environment variable is `undefined`"**.
+W> يبحث `EnvironmentPlugin` عن المتغير المحدد داخل `process.env`. إذا لم يجده، يبحث عن قيمة افتراضية داخل الإعدادات. إذا لم يجد لا المتغير ولا القيمة الافتراضية، فسيظهر خطأ: **"`EnvironmentPlugin` - `${key}` environment variable is `undefined`"**.
 
-## Usage with default values
+## الاستخدام مع القيم الافتراضية
 
-Alternatively, the `EnvironmentPlugin` supports an object, which maps keys to their default values. The default value for a key is taken if the key is undefined in `process.env`.
+يمكنك أيضًا تمرير object إلى `EnvironmentPlugin` يربط المفاتيح بقيمها الافتراضية. تُستخدم القيمة الافتراضية إذا كان المفتاح غير موجود في `process.env`.
 
 ```js
 new webpack.EnvironmentPlugin({
@@ -40,15 +37,15 @@ new webpack.EnvironmentPlugin({
 });
 ```
 
-W> Variables coming from `process.env` are always strings.
+W> القيم القادمة من `process.env` تكون دائمًا strings.
 
-T> Unlike [`DefinePlugin`](/plugins/define-plugin), default values are applied to `JSON.stringify` by the `EnvironmentPlugin`.
+T> بخلاف [`DefinePlugin`](/plugins/define-plugin)، يطبّق `EnvironmentPlugin` دالة `JSON.stringify` على القيم الافتراضية.
 
-T> Default values of `null` and `undefined` behave differently. Use `undefined` for variables that _must_ be provided during bundling, or `null` if they are optional.
+T> القيمتان الافتراضيتان `null` و`undefined` لا تتصرفان بالطريقة نفسها. استخدم `undefined` للمتغيرات التي يجب توفيرها أثناء bundling، واستخدم `null` إذا كانت اختيارية.
 
-**Example:**
+**مثال:**
 
-Let's investigate the result when running the previous `EnvironmentPlugin` configuration on a test file `entry.js`:
+لنرَ ماذا يحدث عند تشغيل إعداد `EnvironmentPlugin` السابق على ملف اختبار اسمه `entry.js`:
 
 ```js
 if (process.env.NODE_ENV === "production") {
@@ -59,7 +56,7 @@ if (process.env.DEBUG) {
 }
 ```
 
-When executing `NODE_ENV=production webpack` in the terminal to build, `entry.js` becomes this:
+عند تنفيذ `NODE_ENV=production webpack` في الطرفية للبناء، يتحول `entry.js` إلى الشكل التالي:
 
 {/* eslint-disable no-self-compare, no-constant-condition */}
 
@@ -74,7 +71,7 @@ if (false) {
 }
 ```
 
-Running `DEBUG=false webpack` yields:
+أما تشغيل `DEBUG=false webpack` فينتج عنه:
 
 {/* eslint-disable no-self-compare, no-constant-condition */}
 
@@ -89,9 +86,9 @@ if ("false") {
 }
 ```
 
-## Use Case: Git Version
+## حالة استخدام: إصدار Git
 
-The following `EnvironmentPlugin` configuration provides `process.env.GIT_VERSION` (such as "v5.4.0-2-g25139f57f") and `process.env.GIT_AUTHOR_DATE` (such as "2020-11-04T12:25:16+01:00") corresponding to the last Git commit of the repository:
+يوفّر إعداد `EnvironmentPlugin` التالي القيمتين `process.env.GIT_VERSION`، مثل "v5.4.0-2-g25139f57f"، و`process.env.GIT_AUTHOR_DATE`، مثل "2020-11-04T12:25:16+01:00"، بناءً على آخر commit في مستودع Git:
 
 ```js
 import childProcess from "node:child_process";
@@ -108,7 +105,7 @@ new webpack.EnvironmentPlugin({
 
 ## DotenvPlugin
 
-The third-party [`DotenvPlugin`](https://github.com/mrsteele/dotenv-webpack) (`dotenv-webpack`) allows you to expose (a subset of) [dotenv variables](https://www.npmjs.com/package/dotenv):
+يسمح plugin خارجي وهو [`DotenvPlugin`](https://github.com/mrsteele/dotenv-webpack) (`dotenv-webpack`) بكشف جزء من [متغيرات dotenv](https://www.npmjs.com/package/dotenv) أو كلها:
 
 ```bash
 // .env
diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
index 75b0b82c4c47..0bff20b322a3 100644
--- a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
+++ b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
@@ -1,63 +1,55 @@
 ---
 title: EvalSourceMapDevToolPlugin
-group: webpack
 contributors:
-  - johnnyreilly
-  - simon04
-  - kinseyost
-  - byzyk
-  - madhavarshney
-  - koke
-  - jamesgeorge007
-  - anshumanv
-  - EugeneHlushko
+  - RlxChap2
+group: webpack
 related:
-  - title: Building Eval Source Maps
+  - title: بناء Eval Source Maps
     url: https://survivejs.com/webpack/building/source-maps/#sourcemapdevtoolplugin-and-evalsourcemapdevtoolplugin
 ---
 
-This plugin enables more fine grained control of source map generation. It is also enabled automatically by certain settings of the [`devtool`](/configuration/devtool/) configuration option.
+يعطيك هذا plugin تحكمًا أدق في إنشاء source maps. قد يفعّله webpack تلقائيًا عند استخدام بعض قيم خيار الإعداد [`devtool`](/configuration/devtool/).
 
 ```js
 new webpack.EvalSourceMapDevToolPlugin(options);
 ```
 
-## Options
+## الخيارات
 
-The following options are supported:
+يدعم plugin الخيارات التالية:
 
-- `test` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for modules based on their extension (defaults to `.js` and `.css`).
-- `include` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for module paths that match the given value.
-- `exclude` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Exclude modules that match the given value from source map generation.
-- `append` (`string|function`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file.
+- `test` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): يضمّن source maps للـ modules حسب الامتداد. القيمة الافتراضية تشمل `.js` و`.css`.
+- `include` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): يضمّن source maps لمسارات modules التي تطابق القيمة المحددة.
+- `exclude` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): يستبعد modules المطابقة من إنشاء source maps.
+- `append` (`string|function`): يضيف القيمة المحددة إلى asset الأصلي. غالبًا تكون تعليق `#sourceMappingURL`. تُستبدل `[url]` بعنوان URL الخاص بملف source map.
 
-  Starting from version 5.84.0, webpack allows the `append` option to be a function that accepts path data and an asset info object as arguments, and returns a string.
+  ابتداءً من الإصدار 5.84.0، يسمح webpack بأن تكون قيمة `append` دالة تستقبل path data وكائن asset info، ثم ترجع string.
 
   ```ts
   (pathData: PathData, assetInfo?: AssetInfo) => string;
   ```
 
-- `ignoreList` (`string` `RegExp` `function (source) => boolean` `[string, RegExp, function (source) => boolean]`): Decide whether to ignore source files that match the specified value in source maps.
-- `module` (`boolean`): Indicates whether loaders should generate source maps (defaults to `true`).
-- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
-- `columns` (`boolean`): Indicates whether column mappings should be used (defaults to `true`).
-- `protocol` (`string`): Allows user to override default protocol (`webpack-internal://`)
-- `namespace` (`string`): Namespace prefix to allow multiple webpack roots in the devtools. See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
-- `noSources = false` (`boolean`): Prevents the source file content from being included in the source map.
-- `sourceRoot` (`string`): Provide a custom value for the `sourceRoot` property in source maps.
-- `debugIds` (`boolean`): If `true`, unique ids will be emitted in source and sourcemaps which streamlines identifying sourcemaps across different builds. See the [TC39 sourcemap debug ID proposal](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md) for more details.
+- `ignoreList` (`string` `RegExp` `function (source) => boolean` `[string, RegExp, function (source) => boolean]`): يحدد هل يجب تجاهل ملفات source المطابقة داخل source maps.
+- `module` (`boolean`): يحدد هل يجب على loaders إنشاء source maps. القيمة الافتراضية `true`.
+- `moduleFilenameTemplate` (`string`): راجع [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
+- `columns` (`boolean`): يحدد هل تُستخدم mappings على مستوى الأعمدة. القيمة الافتراضية `true`.
+- `protocol` (`string`): يسمح بتغيير protocol الافتراضي (`webpack-internal://`).
+- `namespace` (`string`): بادئة namespace تسمح بوجود أكثر من webpack root داخل devtools. راجع [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
+- `noSources = false` (`boolean`): يمنع تضمين محتوى ملفات source داخل source map.
+- `sourceRoot` (`string`): يحدد قيمة مخصصة لخاصية `sourceRoot` داخل source maps.
+- `debugIds` (`boolean`): إذا كانت `true`، فسيضيف webpack ids فريدة داخل ملفات source وsourcemaps، مما يسهل ربط sourcemaps بالبناء الصحيح. راجع [اقتراح TC39 الخاص بـ sourcemap debug ID](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md) لمزيد من التفاصيل.
 
-T> Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly.
+T> ضبط `module` أو `columns` على `false` يجعل source maps أقل دقة، لكنه يحسّن أداء التجميع بشكل ملحوظ.
 
-T> If you want to use a custom configuration for this plugin in [development mode](/configuration/mode/#mode-development), make sure to disable the default one. I.e. set `devtool: false`.
+T> إذا أردت استخدام إعداد مخصص لهذا plugin في [وضع التطوير](/configuration/mode/#mode-development)، عطّل الإعداد الافتراضي أولًا، مثلًا باستخدام `devtool: false`.
 
-## Examples
+## أمثلة
 
-The following examples demonstrate some common use cases for this plugin.
+تعرض الأمثلة التالية حالات استخدام شائعة لهذا plugin.
 
-### Basic Use Case
+### استخدام أساسي
 
-You can use the following code to replace the configuration option `devtool: eval-source-map` with an equivalent custom plugin configuration:
+يمكنك استخدام الكود التالي لاستبدال خيار الإعداد `devtool: eval-source-map` بإعداد مخصص مكافئ باستخدام plugin:
 
 ```js
 export default {
@@ -67,9 +59,9 @@ export default {
 };
 ```
 
-### Exclude Vendor Maps
+### استبعاد خرائط vendor
 
-The following code would exclude source maps for any modules in the `vendor.js` bundle:
+يستبعد الكود التالي source maps لأي modules داخل bundle باسم `vendor.js`:
 
 ```js
 new webpack.EvalSourceMapDevToolPlugin({
diff --git a/src/content/plugins/hashed-module-ids-plugin.mdx b/src/content/plugins/hashed-module-ids-plugin.mdx
index 06eadc70bd87..e90731ebf118 100644
--- a/src/content/plugins/hashed-module-ids-plugin.mdx
+++ b/src/content/plugins/hashed-module-ids-plugin.mdx
@@ -1,13 +1,11 @@
 ---
 title: HashedModuleIdsPlugin
-group: webpack
 contributors:
-  - shaodahong
-  - byzyk
-  - EslamHiko
+  - RlxChap2
+group: webpack
 ---
 
-This plugin will cause hashes to be based on the relative path of the module, generating a four character string as the module id. Suggested for use in production.
+يجعل هذا plugin قيمة hash مبنية على المسار النسبي للـ module، ثم يستخدم سلسلة من أربعة أحرف كمعرّف للـ module. يُنصح باستخدامه في بيئة الإنتاج.
 
 ```js
 new webpack.ids.HashedModuleIdsPlugin({
@@ -15,23 +13,23 @@ new webpack.ids.HashedModuleIdsPlugin({
 });
 ```
 
-## Options
+## الخيارات
 
-This plugin supports the following options:
+يدعم هذا plugin الخيارات التالية:
 
-- `context`: The context directory (**absolute path**) for creating names.
-- `hashFunction`: The hashing algorithm to use, defaults to `'md4'`. All functions from Node.JS' [`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_options) are supported.
-- `hashDigest`: The encoding to use when generating the hash, defaults to `'base64'`. All encodings from Node.JS' [`hash.digest`](https://nodejs.org/api/crypto.html#crypto_hash_digest_encoding) are supported.
+- `context`: مجلد السياق (**مسار مطلق**) الذي تُنشأ منه الأسماء.
+- `hashFunction`: خوارزمية hashing المستخدمة، والقيمة الافتراضية هي `'md4'`. يدعم webpack كل الدوال المتاحة في [`crypto.createHash`](https://nodejs.org/api/crypto.html#crypto_crypto_createhash_algorithm_options) في Node.js.
+- `hashDigest`: الترميز المستخدم عند إنشاء hash، والقيمة الافتراضية هي `'base64'`. يدعم webpack كل الترميزات المتاحة في [`hash.digest`](https://nodejs.org/api/crypto.html#crypto_hash_digest_encoding) في Node.js.
 
   <Badge text="5.104.0+" />
 
-  In addition to standard Node.js encodings, webpack also supports custom digest algorithms: `'base64url'`, `'base62'`, `'base58'`, `'base52'`, `'base49'`, `'base36'`, `'base32'`, and `'base25'`. These are useful for generating shorter or URL-safe hash values.
+  بالإضافة إلى ترميزات Node.js القياسية، يدعم webpack خوارزميات digest مخصصة: `'base64url'` و`'base62'` و`'base58'` و`'base52'` و`'base49'` و`'base36'` و`'base32'` و`'base25'`. تفيد هذه الخيارات عندما تريد قيم hash أقصر أو آمنة للاستخدام داخل URLs.
 
-- `hashDigestLength`: The prefix length of the hash digest to use, defaults to `4`. Note that some generated ids might be longer than specified here, to avoid module id collisions.
+- `hashDigestLength`: طول الجزء المأخوذ من بداية hash digest، والقيمة الافتراضية هي `4`. قد تكون بعض المعرفات الناتجة أطول من هذه القيمة لتجنب تكرار module ids.
 
-## Usage
+## الاستخدام
 
-Here's an example of how this plugin might be used:
+هذا مثال على طريقة استخدام plugin:
 
 ```js
 import path from "node:path";
@@ -48,7 +46,7 @@ new webpack.ids.HashedModuleIdsPlugin({
 });
 ```
 
-**Using URL-safe encoding (5.104.0+):**
+**استخدام ترميز آمن داخل URL (5.104.0+):**
 
 ```js
 import path from "node:path";
diff --git a/src/content/plugins/html-webpack-plugin.mdx b/src/content/plugins/html-webpack-plugin.mdx
index a8216c7c5307..5249aa7b869e 100644
--- a/src/content/plugins/html-webpack-plugin.mdx
+++ b/src/content/plugins/html-webpack-plugin.mdx
@@ -1,26 +1,21 @@
 ---
 title: HtmlWebpackPlugin
-group: Community
 contributors:
-  - ampedandwired
-  - simon04
-  - Sibiraj-S
-  - EugeneHlushko
+  - RlxChap2
+group: Community
 ---
 
-The [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using [lodash templates](https://lodash.com/docs#template), or use your own [loader](/loaders).
+يسهّل [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) إنشاء ملفات HTML التي تحمل bundles الناتجة من webpack. هذا مفيد خصوصًا عندما تحتوي أسماء ملفات bundles على hash يتغير مع كل عملية بناء. يمكنك ترك plugin ينشئ ملف HTML لك، أو تمرير قالب خاص بك باستخدام [lodash templates](https://lodash.com/docs#template)، أو استخدام [loader](/loaders) من اختيارك.
 
-## Installation
+## التثبيت
 
 ```bash
 npm install --save-dev html-webpack-plugin
 ```
 
-## Basic Usage
+## الاستخدام الأساسي
 
-The plugin will generate an HTML5 file for you that includes all your webpack
-bundles in the body using `script` tags. Add the plugin to your webpack
-configuration as follows:
+ينشئ plugin ملف HTML5 يحتوي كل webpack bundles داخل عنصر `body` باستخدام وسوم `script`. أضف plugin إلى إعدادات webpack بهذه الطريقة:
 
 ```js
 import path from "node:path";
@@ -40,7 +35,7 @@ export default {
 };
 ```
 
-This will generate a file `dist/index.html` containing the following:
+سينشئ ذلك ملف `dist/index.html` بالمحتوى التالي:
 
 ```html
 <!DOCTYPE html>
@@ -55,14 +50,14 @@ This will generate a file `dist/index.html` containing the following:
 </html>
 ```
 
-If you have multiple webpack entry points, they will all be included with `<script>` tags in the generated HTML.
+إذا كان لديك أكثر من webpack entry point، فستُضاف كلها إلى ملف HTML الناتج باستخدام وسوم `<script>`.
 
-If you have any CSS assets in webpack's output (for example, CSS extracted with the [MiniCssExtractPlugin](/plugins/mini-css-extract-plugin/)) then these will be included with `<link>` tags in the `<head>` element of generated HTML.
+إذا كانت مخرجات webpack تحتوي CSS assets، مثل CSS المستخرج باستخدام [MiniCssExtractPlugin](/plugins/mini-css-extract-plugin/)، فستُضاف هذه الملفات إلى عنصر `<head>` في HTML الناتج باستخدام وسوم `<link>`.
 
-## Configuration
+## الإعدادات
 
-For all configuration options, please see the [plugin documentation](https://github.com/jantimon/html-webpack-plugin#options).
+للاطلاع على كل خيارات الإعداد، راجع [توثيق plugin](https://github.com/jantimon/html-webpack-plugin#options).
 
-## Third party addons
+## إضافات الطرف الثالث
 
-The plugin supports addons. For a list see the [documentation](https://github.com/jantimon/html-webpack-plugin#plugins).
+يدعم plugin إضافات خارجية. للاطلاع على القائمة، راجع [التوثيق](https://github.com/jantimon/html-webpack-plugin#plugins).
diff --git a/src/content/plugins/ignore-plugin.mdx b/src/content/plugins/ignore-plugin.mdx
index 5aa15723da14..5009930b4874 100644
--- a/src/content/plugins/ignore-plugin.mdx
+++ b/src/content/plugins/ignore-plugin.mdx
@@ -1,33 +1,26 @@
 ---
 title: IgnorePlugin
-group: webpack
 contributors:
-  - simon04
-  - byzyk
-  - DullReferenceException
-  - EugeneHlushko
-  - FadySamirSadek
-  - iamakulov
-  - chenxsan
-  - snitin315
+  - RlxChap2
+group: webpack
 ---
 
-IgnorePlugin prevents the generation of modules for `import` or `require` calls matching the regular expressions or filter functions.
+يمنع `IgnorePlugin` إنشاء modules لاستدعاءات `import` أو `require` التي تطابق regular expressions أو دوال التصفية التي تحددها.
 
-T> This plugin works with both JavaScript and CSS, allowing you to ignore specific resources in CSS as well.
+T> يعمل هذا plugin مع JavaScript وCSS، لذلك يمكنك تجاهل موارد محددة داخل CSS أيضًا.
 
-## Using regular expressions
+## استخدام regular expressions
 
-- `resourceRegExp`: A RegExp to test the resource against.
-- `contextRegExp`: (optional) A RegExp to test the context (directory) against.
+- `resourceRegExp`: RegExp لاختبار المورد المطلوب.
+- `contextRegExp`: خيار اختياري. RegExp لاختبار السياق، أي المجلد الذي يأتي منه الطلب.
 
 ```js
 new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });
 ```
 
-## Using filter functions
+## استخدام دوال التصفية
 
-- `checkResource (resource, context)` A Filter function that receives `resource` and `context` as arguments, must return boolean.
+- `checkResource (resource, context)`: دالة تصفية تستقبل `resource` و`context` كمعاملين، ويجب أن ترجع قيمة boolean.
 
 ```js
 new webpack.IgnorePlugin({
@@ -38,17 +31,17 @@ new webpack.IgnorePlugin({
 });
 ```
 
-## Example of ignoring Moment Locales
+## مثال: تجاهل ملفات locales في Moment
 
-As of [moment](https://momentjs.com/) 2.18, all locales are bundled together with the core library (see [this GitHub issue](https://github.com/moment/moment/issues/2373)).
+ابتداءً من [moment](https://momentjs.com/) 2.18، تُحزّم كل locales مع المكتبة الأساسية (راجع [هذه المشكلة في GitHub](https://github.com/moment/moment/issues/2373)).
 
-The `resourceRegExp` parameter passed to `IgnorePlugin` is not tested against the resolved file names or absolute module names being imported or required, but rather against the _string_ passed to `require` or `import` _within the source code where the import is taking place_. For example, if you're trying to exclude `node_modules/moment/locale/*.js`, this won't work:
+المعامل `resourceRegExp` الذي تمرره إلى `IgnorePlugin` لا يُختبر على أسماء الملفات بعد حلها، ولا على أسماء modules المطلقة التي يتم استيرادها. بدلًا من ذلك، يُختبر على النص نفسه الذي يمرر إلى `require` أو `import` داخل الكود المصدر الذي يحدث فيه الاستيراد. لذلك، إذا كنت تحاول استبعاد `node_modules/moment/locale/*.js`، فلن يعمل هذا المثال:
 
 ```diff
 -new webpack.IgnorePlugin({ resourceRegExp: /moment\/locale\// });
 ```
 
-Rather, because `moment` imports with this code:
+والسبب أن `moment` يستورد الملفات بهذا الشكل:
 
 ```js
 import(`./locale/${name}`);
@@ -58,7 +51,7 @@ import(`./locale/${name}`);
 require(`./locale/${name}`);
 ```
 
-...your first regexp must match that `'./locale/'` string. The second `contextRegExp` parameter is then used to select specific directories from where the import took place. The following will cause those locale files to be ignored:
+لذلك يجب أن يطابق أول regexp النص `'./locale/'`. بعد ذلك يُستخدم المعامل الثاني `contextRegExp` لتحديد المجلدات التي حدث منها الاستيراد. المثال التالي يجعل webpack يتجاهل ملفات locale هذه:
 
 ```js
 new webpack.IgnorePlugin({
@@ -67,4 +60,4 @@ new webpack.IgnorePlugin({
 });
 ```
 
-...which means "any require statement matching `'./locale'` from any directories ending with `'moment'` will be ignored.
+وهذا يعني: أي استدعاء `require` يطابق `'./locale'` ويأتي من مجلد ينتهي بـ `'moment'` سيتم تجاهله.
diff --git a/src/content/plugins/index.mdx b/src/content/plugins/index.mdx
index d156c65850fd..472cf73fc950 100644
--- a/src/content/plugins/index.mdx
+++ b/src/content/plugins/index.mdx
@@ -2,45 +2,36 @@
 title: Plugins
 sort: -1
 contributors:
-  - simon04
-  - gonzoyumo
-  - rouzbeh84
-  - aretecode
-  - eko3alpha
-  - refactorized
-  - byzyk
-  - EugeneHlushko
-  - snitin315
-  - chenxsan
+  - RlxChap2
 ---
 
-Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
+يمتلك webpack واجهة plugins قوية وغنية. كثير من ميزات webpack الداخلية مبنية على هذه الواجهة نفسها، وهذا ما يجعل webpack **مرنًا** وقابلًا للتوسع.
 
-| Name                                                                            | Description                                                                            |
-| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| [`BannerPlugin`](/plugins/banner-plugin)                                        | Add a banner to the top of each generated chunk                                        |
-| [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/)                        | Create HTML files with entrypoints and chunks relations to serve your bundles          |
-| [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)               | Prepare compressed versions of assets to serve them with Content-Encoding              |
-| [`ContextReplacementPlugin`](/plugins/context-replacement-plugin)               | Override the inferred context of a `require` expression                                |
-| [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin)                             | Copies individual files or entire directories to the build directory                   |
-| [`DefinePlugin`](/plugins/define-plugin)                                        | Allow global constants configured at compile time                                      |
-| [`DllPlugin`](/plugins/dll-plugin)                                              | Split bundles in order to drastically improve build time                               |
-| [`EnvironmentPlugin`](/plugins/environment-plugin)                              | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys |
-| [`EslintWebpackPlugin`](/plugins/eslint-webpack-plugin)                         | A ESLint plugin for webpack                                                            |
-| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)          | Enable Hot Module Replacement (HMR)                                                    |
-| [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)                             | Easily create HTML files to serve your bundles                                         |
-| [`IgnorePlugin`](/plugins/ignore-plugin)                                        | Exclude certain modules from bundles                                                   |
-| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)                    | Set min/max limits for chunking to better control chunking                             |
-| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin)          | Merge chunks that contain the same modules                                             |
-| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)                          | Keep chunk size above the specified limit                                              |
-| [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)                      | creates a CSS file per JS file which requires CSS                                      |
-| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | Skip the emitting phase when there are compilation errors                              |
-| [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)    | Replace resource(s) that matches a regexp                                              |
-| [`ProgressPlugin`](/plugins/progress-plugin)                                    | Report compilation progress                                                            |
-| [`ProvidePlugin`](/plugins/provide-plugin)                                      | Use modules without having to use import/require                                       |
-| [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)                 | Enables a more fine grained control of source maps                                     |
-| [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin)        | Enables a more fine grained control of eval source maps                                |
-| [`SvgChunkWebpackPlugin`](/plugins/svg-chunk-webpack-plugin/)                   | Generate SVG sprites optimized by SVGO based on your entry point dependencies          |
-| [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/)                         | Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project              |
+| الاسم                                                                           | الوصف                                                                               |
+| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| [`BannerPlugin`](/plugins/banner-plugin)                                        | يضيف banner أعلى كل chunk يتم إنشاؤه                                                |
+| [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/)                        | ينشئ ملفات HTML تربط entrypoints وchunks حتى تستطيع تقديم bundles                   |
+| [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)               | يجهز نسخًا مضغوطة من assets لتقديمها باستخدام Content-Encoding                      |
+| [`ContextReplacementPlugin`](/plugins/context-replacement-plugin)               | يغيّر context الذي يستنتجه webpack من تعبير `require`                               |
+| [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin)                             | ينسخ ملفات مفردة أو مجلدات كاملة إلى مجلد البناء                                    |
+| [`DefinePlugin`](/plugins/define-plugin)                                        | يعرّف constants عامة تُحقن وقت التجميع                                              |
+| [`DllPlugin`](/plugins/dll-plugin)                                              | يقسم bundles لتحسين وقت البناء بشكل كبير                                            |
+| [`EnvironmentPlugin`](/plugins/environment-plugin)                              | اختصار لاستخدام [`DefinePlugin`](/plugins/define-plugin) مع مفاتيح `process.env`    |
+| [`EslintWebpackPlugin`](/plugins/eslint-webpack-plugin)                         | plugin لتشغيل ESLint مع webpack                                                     |
+| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)          | يفعّل Hot Module Replacement (HMR)                                                  |
+| [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)                             | ينشئ ملفات HTML بسهولة لتقديم bundles                                               |
+| [`IgnorePlugin`](/plugins/ignore-plugin)                                        | يستبعد modules محددة من bundles                                                     |
+| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)                    | يضع حدًا أدنى أو أعلى لعدد chunks لتحكم أفضل في التقسيم                             |
+| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin)          | يدمج chunks التي تحتوي modules نفسها                                                |
+| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)                          | يحافظ على حجم chunk فوق حد معين                                                     |
+| [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)                      | ينشئ ملف CSS لكل ملف JS يحتاج إلى CSS                                               |
+| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | يتجاوز مرحلة الإخراج عندما توجد أخطاء تجميع                                         |
+| [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)    | يستبدل الموارد التي تطابق regexp                                                    |
+| [`ProgressPlugin`](/plugins/progress-plugin)                                    | يعرض تقدم عملية التجميع                                                             |
+| [`ProvidePlugin`](/plugins/provide-plugin)                                      | يستخدم modules بدون الحاجة إلى `import` أو `require` في كل ملف                      |
+| [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)                 | يوفر تحكمًا أدق في source maps                                                      |
+| [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin)        | يوفر تحكمًا أدق في eval source maps                                                 |
+| [`SvgChunkWebpackPlugin`](/plugins/svg-chunk-webpack-plugin/)                   | ينشئ SVG sprites محسّنة بواسطة SVGO اعتمادًا على dependencies الخاصة بـ entry point |
+| [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/)                         | يستخدم Terser أو غيره لتصغير JS/CSS/HTML/JSON وغيرها داخل مشروعك                    |
 
-For more third-party plugins, see the list from [awesome-webpack](/awesome-webpack/#webpack-plugins).
+لمزيد من plugins الخارجية، راجع قائمة [awesome-webpack](/awesome-webpack/#webpack-plugins).
diff --git a/src/content/plugins/internal-plugins.mdx b/src/content/plugins/internal-plugins.mdx
index bf657b1fcee8..044547e861fe 100644
--- a/src/content/plugins/internal-plugins.mdx
+++ b/src/content/plugins/internal-plugins.mdx
@@ -1,19 +1,15 @@
 ---
-title: Internal webpack plugins
-group: webpack
+title: Plugins الداخلية في webpack
 contributors:
-  - iAziz786
-  - EugeneHlushko
-  - ooflorent
-  - Legends
-  - chenxsan
+  - RlxChap2
+group: webpack
 ---
 
-This is a list of plugins which are used by webpack internally.
+هذه قائمة بالـ plugins التي يستخدمها webpack داخليًا.
 
-W> You should only care about them if you are building your own compiler based on webpack, or introspect the internals.
+W> غالبًا لن تحتاج إلى هذه plugins إلا إذا كنت تبني compiler خاصًا بك فوق webpack، أو تريد فحص التفاصيل الداخلية.
 
-Categories of internal plugins:
+تصنيفات plugins الداخلية:
 
 - [environment](#environment)
 - [compiler](#compiler)
@@ -24,51 +20,51 @@ Categories of internal plugins:
 
 ## environment
 
-Plugins affecting the environment of the compiler.
+Plugins تؤثر في بيئة compiler.
 
 ### NodeEnvironmentPlugin
 
 `webpack.node.NodeEnvironmentPlugin()`
 
-Applies Node.js style filesystem to the compiler.
+يطبّق نظام ملفات بأسلوب Node.js على compiler.
 
 ## compiler
 
-Plugins affecting the compiler
+Plugins تؤثر في compiler.
 
 ### MemoryCachePlugin
 
 `MemoryCachePlugin()`
 
-Adds a cache to the compiler, where modules are cached in memory.
+يضيف cache إلى compiler، حيث يتم تخزين modules في الذاكرة.
 
 ### ProgressPlugin
 
 `ProgressPlugin(handler)`
 
-Hook into the compiler to extract progress information. The `handler` must have the signature `function(percentage, message)`. Percentage is called with a value between 0 and 1, where 0 indicates the start and 1 the end.
+يدخل إلى compiler لاستخراج معلومات التقدم. يجب أن تكون دالة `handler` بالشكل `function(percentage, message)`. تُستدعى `percentage` بقيمة بين 0 و1، حيث 0 تعني البداية و1 تعني النهاية.
 
 ### RecordIdsPlugin
 
 `RecordIdsPlugin()`
 
-Saves and restores module and chunk ids from records.
+يحفظ ويستعيد ids الخاصة بـ modules وchunks من records.
 
 ## entry
 
-Plugins, which add entry chunks to the compilation.
+Plugins تضيف entry chunks إلى compilation.
 
 ### EntryPlugin
 
 `EntryPlugin(context, entry, options)`
 
-Adds an entry chunk on compilation. The chunk is named `options.name` and contains only one module (plus dependencies). The module is resolved from `entry` in `context` (absolute path).
+يضيف entry chunk أثناء compilation. يُسمى chunk حسب `options.name` ويحتوي على module واحد فقط، إضافة إلى dependencies الخاصة به. يتم حل module من `entry` داخل `context`، ويجب أن يكون `context` مسارًا مطلقًا.
 
 ### PrefetchPlugin
 
 `PrefetchPlugin(context, request)`
 
-Prefetches `request` and dependencies to enable a more parallel compilation. It doesn't create any chunk. The module is resolved from `request` in `context` (absolute path).
+ينفّذ prefetch لـ `request` وdependencies الخاصة به لإتاحة compilation أكثر توازيًا. لا ينشئ أي chunk. يتم حل module من `request` داخل `context`، ويجب أن يكون `context` مسارًا مطلقًا.
 
 ## output
 
@@ -76,226 +72,226 @@ Prefetches `request` and dependencies to enable a more parallel compilation. It
 
 `JsonpTemplatePlugin(options)`
 
-Chunks are wrapped into JSONP-calls. A loading algorithm is included in entry chunks. It loads chunks by adding a `<script>` tag.
+يتم تغليف chunks داخل JSONP calls. ويتم تضمين خوارزمية تحميل داخل entry chunks، وتحمل chunks عبر إضافة وسم `<script>`.
 
-`options` are the output options.
+`options` هي خيارات output.
 
-`options.jsonpFunction` is the JSONP function.
+`options.jsonpFunction` هي دالة JSONP.
 
-`options.publicPath` is used as path for loading the chunks.
+`options.publicPath` يُستخدم كمسار لتحميل chunks.
 
-`options.chunkFilename` is the filename under that chunks are expected.
+`options.chunkFilename` هو اسم الملف المتوقع للـ chunks.
 
 ### NodeTemplatePlugin
 
 `node/NodeTemplatePlugin(options)`
 
-Chunks are wrapped into Node.js modules exporting the bundled modules. The entry chunks loads chunks by requiring them.
+يتم تغليف chunks داخل modules خاصة بـ Node.js وتصدّر bundled modules. وتحمّل entry chunks بقية chunks عبر `require`.
 
-`options` are the output options.
+`options` هي خيارات output.
 
-`options.chunkFilename` is the filename under that chunks are expected.
+`options.chunkFilename` هو اسم الملف المتوقع للـ chunks.
 
 ### LibraryTemplatePlugin
 
 `LibraryTemplatePlugin(name, target)`
 
-The entries chunks are decorated to form a library `name` of type `type`.
+يتم تهيئة entry chunks لتكوين مكتبة باسم `name` ومن نوع `type`.
 
 ### WebWorkerTemplatePlugin
 
 `webworker/WebWorkerTemplatePlugin(options)`
 
-Chunks are loaded by `importScripts`. Else it's similar to [`JsonpTemplatePlugin`](#jsonptemplateplugin).
+يتم تحميل chunks عبر `importScripts`. فيما عدا ذلك، فهو مشابه لـ [`JsonpTemplatePlugin`](#jsonptemplateplugin).
 
-`options` are the output options.
+`options` هي خيارات output.
 
 ### EvalDevToolModulePlugin
 
-Decorates the module template by wrapping each module in a `eval` annotated with `// @sourceURL`.
+يعدّل قالب module عن طريق تغليف كل module داخل `eval` مع تعليق `// @sourceURL`.
 
 ### SourceMapDevToolPlugin
 
 `SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)`
 
-Decorates the templates by generating a SourceMap for each chunk.
+يعدّل القوالب بإنشاء SourceMap لكل chunk.
 
-`sourceMapFilename` the filename template of the SourceMap. `[hash]`, `[name]`, `[id]`, `[file]` and `[filebase]` are replaced. If this argument is missing, the SourceMap will be inlined as DataUrl.
+`sourceMapFilename` هو قالب اسم ملف SourceMap. يتم استبدال `[hash]` و`[name]` و`[id]` و`[file]` و`[filebase]`. إذا لم يُمرر هذا argument، فسيتم تضمين SourceMap كـ DataUrl.
 
 ### HotModuleReplacementPlugin
 
 `HotModuleReplacementPlugin(options)`
 
-Add support for hot module replacement. Decorates the templates to add runtime code. Adds `module.hot` API.
+يضيف دعم hot module replacement. يعدّل القوالب لإضافة كود runtime، ويضيف API باسم `module.hot`.
 
-`options.hotUpdateChunkFilename` the filename for hot update chunks.
+`options.hotUpdateChunkFilename` هو اسم ملف hot update chunks.
 
-`options.hotUpdateMainFilename` the filename for the hot update manifest.
+`options.hotUpdateMainFilename` هو اسم ملف hot update manifest.
 
-`options.hotUpdateFunction` JSON function name for the hot update.
+`options.hotUpdateFunction` هو اسم دالة JSON الخاصة بالـ hot update.
 
 ## source
 
-Plugins affecting the source code of modules.
+Plugins تؤثر في كود المصدر الخاص بـ modules.
 
 ### APIPlugin
 
-Make webpack_public_path, webpack_require, webpack_modules and webpack_chunk_load accessible. Ensures that `require.valueOf` and `require.onError` are not processed by other plugins.
+يجعل `webpack_public_path` و`webpack_require` و`webpack_modules` و`webpack_chunk_load` قابلة للوصول. ويتأكد من أن `require.valueOf` و`require.onError` لا تتم معالجتهما بواسطة plugins أخرى.
 
 ### CompatibilityPlugin
 
-Currently useless. Ensures compatibility with other module loaders.
+حاليًا فائدته محدودة جدًا. يضمن التوافق مع module loaders أخرى.
 
 ### ConstPlugin
 
-Tries to evaluate expressions in `if (...)` statements and ternaries to replace them with `true`/`false` for further possible dead branch elimination using hooks fired by the parser.
+يحاول تقييم expressions داخل عبارات `if (...)` والـ ternaries لاستبدالها بـ `true` أو `false`، حتى يمكن لاحقًا حذف الفروع الميتة عبر hooks يطلقها parser.
 
-There are multiple optimizations in production mode regarding dead branches:
+توجد عدة تحسينات في production mode للتعامل مع الفروع الميتة:
 
-- The ones performed by [Terser](https://github.com/fabiosantoscode/terser)
-- The ones performed by webpack
+- التحسينات التي ينفذها [Terser](https://github.com/fabiosantoscode/terser).
+- التحسينات التي ينفذها webpack.
 
-Webpack will try to evaluate conditional statements. If it succeeds then the dead branch is removed. Webpack can't do constant folding unless the compiler knows it. For example:
+سيحاول webpack تقييم العبارات الشرطية. إذا نجح، فسيزيل الفرع الميت. لا يستطيع webpack إجراء constant folding إلا إذا كانت القيمة معروفة للـ compiler. مثال:
 
 ```js
 import { calculateTax } from "./tax";
 
 const FOO = 1;
 if (FOO === 0) {
-  // dead branch
+  // فرع ميت
   calculateTax();
 }
 ```
 
-In the above example, webpack is unable to prune the branch, but Terser does. However, if `FOO` is defined using [DefinePlugin](/plugins/define-plugin/), webpack will succeed.
+في المثال السابق، لا يستطيع webpack حذف الفرع، لكن Terser يستطيع. أما إذا عُرّف `FOO` باستخدام [DefinePlugin](/plugins/define-plugin/)، فسينجح webpack في ذلك.
 
-It is important to mention that `import { calculateTax } from './tax';` will also get pruned because `calculateTax()` call was in the dead branch and got eliminated.
+من المهم أيضًا ملاحظة أن `import { calculateTax } from './tax';` سيُحذف كذلك، لأن استدعاء `calculateTax()` كان داخل الفرع الميت وتمت إزالته.
 
 ### ProvidePlugin
 
 `ProvidePlugin(name, request)`
 
-If `name` is used in a module it is filled by a module loaded by `import ... from <request>`/`import(<request>)`/`require(<request>)`.
+إذا استُخدم `name` داخل module، فسيتم ملؤه من module يتم تحميله عبر `import ... from <request>` أو `import(<request>)` أو `require(<request>)`.
 
 ### NodeStuffPlugin
 
 `NodeStuffPlugin(options, context)`
 
-Provide stuff that is normally available in Node.js modules.
+يوفر أشياء تكون متاحة عادةً داخل Node.js modules.
 
-It also ensures that `module` is filled with some Node.js stuff if you use it.
+كما يضمن ملء `module` ببعض خصائص Node.js إذا استخدمته.
 
 ### RequireJsStuffPlugin
 
-Provide stuff that is normally available in require.js.
+يوفر أشياء تكون متاحة عادةً في require.js.
 
-`require[js].config` is removed. `require.version` is `0.0.0`. `requirejs.onError` is mapped to `require.onError`.
+تتم إزالة `require[js].config`. وتصبح `require.version` مساوية لـ `0.0.0`. ويتم ربط `requirejs.onError` مع `require.onError`.
 
 ### NodeSourcePlugin
 
 `node/NodeSourcePlugin(options)`
 
-This module adds stuff from Node.js that is not available in non Node.js environments.
+يضيف هذا module أشياء من Node.js غير متاحة في البيئات غير المبنية على Node.js.
 
-It adds polyfills for `process`, `console`, `Buffer` and `global` if used. It also binds the built in Node.js replacement modules.
+يضيف polyfills لـ `process` و`console` و`Buffer` و`global` إذا استُخدمت. كما يربط modules البديلة المدمجة الخاصة بـ Node.js.
 
 ### NodeTargetPlugin
 
 `node/NodeTargetPlugin()`
 
-The plugins should be used if you run the bundle in a Node.js environment.
+ينبغي استخدام هذه plugins إذا كنت ستشغّل bundle داخل بيئة Node.js.
 
-If ensures that native modules are loaded correctly even if bundled.
+يضمن ذلك تحميل native modules بشكل صحيح حتى لو كانت ضمن bundle.
 
 ### AMDPlugin
 
 `dependencies/AMDPlugin(options)`
 
-Provides AMD-style `define` and `require` to modules. Also bind `require.amd`, `define.amd` and webpack_amd_options## to the `options` passed as parameter.
+يوفر `define` و`require` بأسلوب AMD داخل modules. كما يربط `require.amd` و`define.amd` و`webpack_amd_options##` مع `options` الممررة كـ parameter.
 
 ### CommonJsPlugin
 
 `dependencies/CommonJsPlugin`
 
-Provides CommonJs-style `require` to modules.
+يوفر `require` بأسلوب CommonJs داخل modules.
 
 ### RequireContextPlugin
 
 `dependencies/RequireContextPlugin(modulesDirectories, extensions)`
 
-Provides `require.context`. The parameter `modulesDirectories` and `extensions` are used to find alternative requests for files. It's useful to provide the same arrays as you provide to the resolver.
+يوفر `require.context`. تُستخدم parameters المسماة `modulesDirectories` و`extensions` للعثور على requests بديلة للملفات. من المفيد تمرير نفس arrays التي تمررها إلى resolver.
 
 ### RequireEnsurePlugin
 
 `dependencies/RequireEnsurePlugin()`
 
-Provides `require.ensure`.
+يوفر `require.ensure`.
 
 ### RequireIncludePlugin
 
 `dependencies/RequireIncludePlugin()`
 
-Provides `require.include`.
+يوفر `require.include`.
 
 ### DefinePlugin
 
 `DefinePlugin(definitions)`
 
-Define constants for identifier.
+يعرّف ثوابت للـ identifier.
 
-`definitions` is an object.
+`definitions` هو object.
 
 ## optimize
 
-Note that all plugins under `webpack.optimize` namespace should only be used when [`mode`](/configuration/mode/#mode-none) set to `'none'`. Otherwise you might get into trouble where plugins are applied twice.
+لاحظ أن كل plugins الموجودة تحت namespace باسم `webpack.optimize` يجب استخدامها فقط عندما يكون [`mode`](/configuration/mode/#mode-none) مضبوطًا على `'none'`. بخلاف ذلك قد تواجه مشاكل بسبب تطبيق plugins مرتين.
 
 ### LimitChunkCountPlugin
 
 `optimize/LimitChunkCountPlugin(options)`
 
-Merge chunks limit chunk count is lower than `options.maxChunks`.
+يدمج chunks عندما يكون عدد chunks أقل من `options.maxChunks`.
 
-The overhead for each chunks is provided by `options.chunkOverhead` or defaults to 10000. Entry chunks sizes are multiplied by `options.entryChunkMultiplicator` (or 10).
+يأتي overhead الخاص بكل chunk من `options.chunkOverhead` أو تكون قيمته الافتراضية 10000. ويتم ضرب أحجام entry chunks في `options.entryChunkMultiplicator` أو في 10 افتراضيًا.
 
-Chunks that reduce the total size the most are merged first. If multiple combinations are equal the minimal merged size wins.
+يتم أولًا دمج chunks التي تخفض الحجم الإجمالي بأكبر قدر. وإذا تساوت عدة تركيبات، يفوز الدمج الذي ينتج أقل حجم.
 
 ### MergeDuplicateChunksPlugin
 
 `optimize/MergeDuplicateChunksPlugin()`
 
-Chunks with the same modules are merged.
+يدمج chunks التي تحتوي على modules نفسها.
 
 ### RemoveEmptyChunksPlugin
 
 `optimize/RemoveEmptyChunksPlugin()`
 
-Modules that are included in every parent chunk are removed from the chunk.
+يزيل من chunk أي modules موجودة داخل كل parent chunk.
 
 ### MinChunkSizePlugin
 
 `optimize/MinChunkSizePlugin(minChunkSize)`
 
-Merges chunks until each chunk has the minimum size of `minChunkSize`.
+يدمج chunks حتى يصبح لكل chunk الحجم الأدنى `minChunkSize`.
 
 ### ModuleConcatenationPlugin
 
-See the [ModuleConcatenationPlugin page](/plugins/module-concatenation-plugin/) for details.
+راجع صفحة [ModuleConcatenationPlugin](/plugins/module-concatenation-plugin/) للتفاصيل.
 
 ### FlagIncludedChunksPlugin
 
 `optimize/FlagIncludedChunksPlugin()`
 
-Adds chunk ids of chunks which are included in the chunk. This eliminates unnecessary chunk loads.
+يضيف chunk ids الخاصة بـ chunks المضمنة داخل chunk. هذا يزيل عمليات تحميل chunks غير الضرورية.
 
 ### RealContentHashPlugin
 
 `optimize/RealContentHashPlugin()`
 
-When [`optimization.realContentHash`](/configuration/optimization/#optimizationrealcontenthash) option is enabled, webpack will apply `RealContentHashPlugin` to compiler internally.
+عند تفعيل خيار [`optimization.realContentHash`](/configuration/optimization/#optimizationrealcontenthash)، سيطبق webpack داخليًا `RealContentHashPlugin` على compiler.
 
 #### Hook
 
-`RealContentHashPlugin` provides a `updateHash` <Badge text='5.8.0+' /> hook for customizing hash updating:
+يوفر `RealContentHashPlugin` hook باسم `updateHash` <Badge text='5.8.0+' /> لتخصيص تحديث hash:
 
 ```js
 import webpack from "webpack";
@@ -305,7 +301,7 @@ const { RealContentHashPlugin } = webpack.optimize;
 compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
   const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
   hooks.updateHash.tap("MyPlugin", (content, oldHash) => {
-    // you can calculate the hash here as you wish
+    // يمكنك حساب hash هنا بالطريقة التي تريدها
   });
 });
 ```
diff --git a/src/content/plugins/manifest-plugin.mdx b/src/content/plugins/manifest-plugin.mdx
index b68351613ee4..d6dc61140401 100644
--- a/src/content/plugins/manifest-plugin.mdx
+++ b/src/content/plugins/manifest-plugin.mdx
@@ -1,14 +1,13 @@
 ---
 title: ManifestPlugin
-group: webpack
 contributors:
-  - hai-x
-  - alexander-akait
+  - RlxChap2
+group: webpack
 ---
 
 <Badge text="5.103.0+" />
 
-The built-in `ManifestPlugin` generates one asset manifest for your build. Port from [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin).
+ينشئ `ManifestPlugin` المدمج ملف manifest واحدًا للأصول الناتجة من عملية البناء. استخدمه كبديل مدمج عند الانتقال من [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin).
 
 **webpack.config.js**
 
@@ -18,15 +17,15 @@ new webpack.ManifestPlugin({
 });
 ```
 
-## Options
+## الخيارات
 
 ### `entrypoints`
 
 `boolean = true`
 
-Enables generation of the `entrypoints` section in the manifest.
+يفعّل إنشاء قسم `entrypoints` داخل ملف manifest.
 
-When `entrypoints` is enabled and one entry uses `dependOn`
+عند تفعيل `entrypoints` واستخدام أحد entry points للخيار `dependOn`:
 
 **webpack.config.js**
 
@@ -47,7 +46,7 @@ export default {
 };
 ```
 
-The resulting manifest will contain the parent/child relationship map
+سيحتوي ملف manifest الناتج على خريطة توضّح علاقة الأب والابن بين entry points:
 
 **manifest.json**
 
@@ -69,33 +68,33 @@ The resulting manifest will contain the parent/child relationship map
 
 `string = manifest.json`
 
-Specifies the filename of the output file on disk. By default the plugin will emit `manifest.json` inside the `output.path` directory.
+يحدد اسم ملف الخرج على القرص. افتراضيًا، ينشئ plugin ملف `manifest.json` داخل مجلد `output.path`.
 
 ### `filter`
 
 `(item: ManifestItem) => boolean`
 
-Allows filtering the files which make up the manifest.
+يسمح لك بتصفية الملفات التي ستدخل في manifest.
 
 ### `generate`
 
 `function (manifest: ManifestObject) => ManifestObject`
 
-Receives the manifest object, modifies it, and returns the modified manifest.
+تستقبل هذه الدالة كائن manifest، ثم تعدّله، ثم ترجع النسخة المعدلة.
 
 ### `prefix`
 
 `string = "[publicpath]"`
 
-Specifies a path prefix for all keys in the manifest.
+يحدد بادئة مسار تُضاف إلى كل المفاتيح داخل manifest.
 
 ### serialize
 
 `function (manifest: ManifestObject) => string = (manifest) => JSON.stringify(manifest, null, 2)`
 
-Receives the manifest object and returns the manifest string.
+تستقبل هذه الدالة كائن manifest وترجع النص النهائي للـ manifest.
 
-Use `serialize` to output other formats, for example YAML:
+استخدم `serialize` إذا أردت إخراج manifest بصيغ أخرى، مثل YAML:
 
 ```js
 new webpack.ManifestPlugin({
diff --git a/src/content/plugins/module-concatenation-plugin.mdx b/src/content/plugins/module-concatenation-plugin.mdx
index 2019f179ac03..105b5d4d27a1 100644
--- a/src/content/plugins/module-concatenation-plugin.mdx
+++ b/src/content/plugins/module-concatenation-plugin.mdx
@@ -1,46 +1,44 @@
 ---
 title: ModuleConcatenationPlugin
-group: webpack
 contributors:
-  - skipjack
-  - TheLarkInn
-  - byzyk
+  - RlxChap2
+group: webpack
 ---
 
-In the past, one of webpack’s trade-offs when bundling was that each module in your bundle would be wrapped in individual function closures. These wrapper functions made it slower for your JavaScript to execute in the browser. In comparison, tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser.
+في الإصدارات القديمة، كان أحد الجوانب السلبية في bundling داخل webpack أن كل module داخل bundle يُغلّف داخل function closure مستقل. هذه الدوال الإضافية تجعل تنفيذ JavaScript أبطأ في المتصفح. بالمقارنة، أدوات مثل Closure Compiler وRollupJS تقوم بما يسمى hoisting أو concatenation لنطاق كل modules داخل closure واحد، وهذا يساعد الكود على التنفيذ بسرعة أعلى في المتصفح.
 
-This plugin will enable the same concatenation behavior in webpack. By default this plugin is already enabled in [production `mode`](/configuration/mode/#mode-production) and disabled otherwise. If you need to override the production `mode` optimization, set the [`optimization.concatenateModules` option](/configuration/optimization/#optimizationconcatenatemodules) to `false`. To enable concatenation behavior in other modes, you can add `ModuleConcatenationPlugin` manually or use the `optimization.concatenateModules` option:
+يفعّل هذا plugin السلوك نفسه داخل webpack. افتراضيًا، يكون هذا plugin مفعّلًا في [وضع `production`](/configuration/mode/#mode-production)، ومعطلًا في غير ذلك. إذا أردت تعطيل هذا التحسين في وضع `production`، اضبط خيار [`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules) على `false`. ولتفعيل هذا السلوك في أوضاع أخرى، يمكنك إضافة `ModuleConcatenationPlugin` يدويًا أو استخدام خيار `optimization.concatenateModules`:
 
 ```js
 new webpack.optimize.ModuleConcatenationPlugin();
 ```
 
-> This concatenation behavior is called “scope hoisting.”
+> يُسمى سلوك الدمج هذا "scope hoisting".
 >
-> Scope hoisting is specifically a feature made possible by ECMAScript Module syntax. Because of this webpack may fallback to normal bundling based on what kind of modules you are using, and [other conditions](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5).
+> يعتمد scope hoisting تحديدًا على صيغة ECMAScript Modules. لذلك قد يرجع webpack إلى bundling العادي حسب نوع modules التي تستخدمها، وبحسب [شروط أخرى](https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5).
 
-W> Keep in mind that this plugin will only be applied to [ES6 modules](/api/module-methods/#es6-recommended) processed directly by webpack. When using a transpiler, you'll need to disable module processing (e.g. the [`modules`](https://babeljs.io/docs/en/babel-preset-env#modules) option in Babel).
+W> تذكّر أن هذا plugin لا يُطبّق إلا على [ES6 modules](/api/module-methods/#es6-recommended) التي يعالجها webpack مباشرة. إذا كنت تستخدم transpiler مثل Babel، فستحتاج إلى تعطيل معالجة modules فيه، مثل خيار [`modules`](https://babeljs.io/docs/en/babel-preset-env#modules) في Babel.
 
-## Optimization Bailouts
+## حالات إيقاف التحسين
 
-As the article explains, webpack attempts to achieve partial scope hoisting. It will merge modules into a single scope but cannot do so in every case. If webpack cannot merge a module, the two alternatives are Prevent and Root. Prevent means the module must be in its own scope. Root means a new module group will be created. The following conditions determine the outcome:
+كما يشرح المقال، يحاول webpack تطبيق scope hoisting جزئيًا. يمكنه دمج modules داخل نطاق واحد، لكنه لا يستطيع فعل ذلك في كل الحالات. إذا لم يستطع webpack دمج module، فهناك نتيجتان محتملتان: Prevent أو Root. تعني Prevent أن module يجب أن يبقى في نطاق مستقل. وتعني Root أن webpack سينشئ مجموعة modules جديدة. تحدد الشروط التالية النتيجة:
 
-| Condition                                     | Outcome |
-| --------------------------------------------- | ------- |
-| Non ES6 Module                                | Prevent |
-| Imported By Non Import                        | Root    |
-| Imported From Other Chunk                     | Root    |
-| Imported By Multiple Other Module Groups      | Root    |
-| Imported With `import()`                      | Root    |
-| Affected By `ProvidePlugin` Or Using `module` | Prevent |
-| HMR Accepted                                  | Root    |
-| Using `eval()`                                | Prevent |
-| In Multiple Chunks                            | Prevent |
-| `export * from "cjs-module"`                  | Prevent |
+| الشرط                                       | النتيجة |
+| ------------------------------------------- | ------- |
+| ليس ES6 Module                              | Prevent |
+| مستورد بواسطة غير import                    | Root    |
+| مستورد من chunk آخر                         | Root    |
+| مستورد بواسطة عدة module groups أخرى        | Root    |
+| مستورد باستخدام `import()`                  | Root    |
+| متأثر بـ `ProvidePlugin` أو يستخدم `module` | Prevent |
+| مقبول من HMR                                | Root    |
+| يستخدم `eval()`                             | Prevent |
+| موجود في عدة chunks                         | Prevent |
+| `export * from "cjs-module"`                | Prevent |
 
-### Module Grouping Algorithm
+### خوارزمية تجميع modules
 
-The following pseudo JavaScript explains the algorithm:
+يوضح pseudo JavaScript التالي الخوارزمية:
 
 ```js
 function tryToAdd(group, module) {
@@ -83,9 +81,9 @@ for (const module of modules) {
 }
 ```
 
-### Debugging Optimization Bailouts
+### تصحيح حالات إيقاف التحسين
 
-When using the webpack CLI, the `--stats-optimization-bailout` flag will display bailout reasons. When using the webpack config, add the following to the `stats` object:
+عند استخدام webpack CLI، يعرض flag `--stats-optimization-bailout` أسباب إيقاف التحسين. وعند استخدام ملف إعدادات webpack، أضف الخيار التالي إلى كائن `stats`:
 
 ```js
 export default {
diff --git a/src/content/plugins/module-federation-plugin.mdx b/src/content/plugins/module-federation-plugin.mdx
index 73aa99d88dc3..e85972def97e 100644
--- a/src/content/plugins/module-federation-plugin.mdx
+++ b/src/content/plugins/module-federation-plugin.mdx
@@ -1,18 +1,14 @@
 ---
 title: ModuleFederationPlugin
-group: webpack
 contributors:
-  - XiaofengXie16
-  - chenxsan
-  - burhanuday
-  - christian24
-  - KhaledTaymour
+  - RlxChap2
+group: webpack
 related:
   - title: Module Federation
     url: /concepts/module-federation/
 ---
 
-The `ModuleFederationPlugin` allows a build to provide or consume modules with other independent builds at runtime.
+يسمح `ModuleFederationPlugin` لعملية build أن توفّر modules لتطبيقات مستقلة أخرى، أو تستهلك modules منها، وقت التشغيل.
 
 ```ts
 import webpack from "webpack";
@@ -22,7 +18,7 @@ const { ModuleFederationPlugin } = webpack.container;
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // options' typings in typescript
+      // أنواع الخيارات في TypeScript
       runtime: string | false,
     }),
   ],
@@ -31,14 +27,14 @@ export default {
 
 <StackBlitzPreview
   example="module-federation?terminal=start&terminal="
-  description="Check out this live module federation example on StackBlitz."
+  description="جرّب مثال Module Federation مباشر على StackBlitz."
 />
 
-## Options
+## الخيارات
 
 ### runtime
 
-Create a new runtime chunk with the specified name.
+ينشئ runtime chunk جديدًا بالاسم الذي تحدده.
 
 **webpack.config.js**
 
@@ -56,9 +52,9 @@ export default {
 };
 ```
 
-### Sharing libraries
+### مشاركة المكتبات
 
-With the `shared` key in the configuration you can define libraries that are shared between your federated modules. The package name is the same as the one found in the `dependencies` section of your package.json. However, by default webpack will only share the root level of a library.
+باستخدام المفتاح `shared` في الإعدادات، يمكنك تحديد المكتبات التي ستتم مشاركتها بين modules التابعة لـ Module Federation. اسم الحزمة هو نفسه الموجود في قسم `dependencies` داخل ملف `package.json`. لكن webpack، بشكل افتراضي، يشارك المستوى الجذري فقط من المكتبة.
 
 ```js
 import webpack from "webpack";
@@ -68,14 +64,14 @@ const { ModuleFederationPlugin } = webpack.container;
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // adds date-fns as shared module
+      // يضيف date-fns كـ shared module
       shared: ["date-fns"],
     }),
   ],
 };
 ```
 
-So in your application you could do something like
+في تطبيقك، يمكن أن تكتب شيئًا مثل:
 
 ```js
 import { format } from "date-fns";
@@ -83,8 +79,9 @@ import { format } from "date-fns";
 format(new Date(2014, 1, 11), "MM/dd/yyyy");
 ```
 
-and webpack will automatically share `date-fns` between all your federated modules that define `date-fns` as a shared library.
-However, if you want to access something that is not located at the root level of the package, for example `date-fns/locale/en-GB/index.js`, you need to append `/` to the package name in your `shared` configuration:
+وسيشارك webpack مكتبة `date-fns` تلقائيًا بين كل modules التابعة لـ Module Federation التي تعرّف `date-fns` كمكتبة مشتركة.
+
+لكن إذا أردت الوصول إلى ملف ليس في جذر الحزمة، مثل `date-fns/locale/en-GB/index.js`، فأضف `/` إلى اسم الحزمة داخل إعداد `shared`:
 
 ```js
 import webpack from "webpack";
@@ -94,23 +91,23 @@ const { ModuleFederationPlugin } = webpack.container;
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // adds date-fns as shared module
-      // all files of the package will be shared
+      // يضيف date-fns كـ shared module
+      // ستتم مشاركة كل ملفات الحزمة
       shared: ["date-fns/"],
     }),
   ],
 };
 ```
 
-The `/` syntax allows you to access all files of a package. However, it should be used only where necessary, because it has an impact on performance especially in `development` mode.
+صيغة `/` تسمح لك بالوصول إلى كل ملفات الحزمة. استخدمها فقط عند الحاجة، لأنها قد تؤثر في الأداء، خصوصًا في وضع `development`.
 
-#### Specify package versions
+#### تحديد إصدارات الحزم
 
-There are three ways to specify the versions of shared libraries.
+توجد ثلاث طرق لتحديد إصدارات المكتبات المشتركة.
 
-##### Array syntax
+##### صيغة Array
 
-This syntax allows you to share libraries with package name only. This approach is good for prototyping, but it will not allow you to scale to large production environment given that libraries like `react` and `react-dom` will require additional requirements.
+هذه الصيغة تسمح لك بمشاركة المكتبات باسم الحزمة فقط. هي مناسبة للتجارب السريعة، لكنها لا تكفي عادةً عند التوسع إلى بيئة production كبيرة، لأن مكتبات مثل `react` و`react-dom` تحتاج شروطًا إضافية.
 
 ```js
 import webpack from "webpack";
@@ -120,28 +117,28 @@ const { ModuleFederationPlugin } = webpack.container;
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // adds lodash as shared module
-      // version is inferred from package.json
-      // there is no version check for the required version
-      // so it will always use the higher version found
+      // يضيف lodash كـ shared module
+      // يتم استنتاج الإصدار من package.json
+      // لا يوجد فحص للإصدار المطلوب
+      // لذلك سيستخدم دائمًا أعلى إصدار يجده
       shared: ["lodash"],
     }),
   ],
 };
 ```
 
-##### Object syntax
+##### صيغة Object
 
-This syntax provides you more control over each shared library in which you can define package name as the key and version ([semver](https://semver.org/)) as the value.
+هذه الصيغة تعطيك تحكمًا أكبر في كل مكتبة مشتركة؛ تضع اسم الحزمة كمفتاح، وتضع الإصدار بصيغة [semver](https://semver.org/) كقيمة.
 
 ```js
 export default {
   plugins: [
     new ModuleFederationPlugin({
       shared: {
-        // adds lodash as shared module
-        // version is inferred from package.json
-        // it will use the highest lodash version that is >= 4.17 and < 5
+        // يضيف lodash كـ shared module
+        // يتم استنتاج الإصدار من package.json
+        // سيستخدم أعلى إصدار من lodash يطابق >= 4.17 و < 5
         lodash: "^4.17.0",
       },
     }),
@@ -149,9 +146,9 @@ export default {
 };
 ```
 
-##### Object syntax with sharing hints
+##### صيغة Object مع تلميحات المشاركة
 
-This syntax allows you to provide additional [hints](#sharing-hints) to each shared package where you define the package name as the key, and the value as an object containing hints to modify sharing behavior.
+هذه الصيغة تسمح لك بإضافة [تلميحات](#تلميحات-المشاركة) لكل حزمة مشتركة. تضع اسم الحزمة كمفتاح، وتكون القيمة object يحتوي على تلميحات تغيّر سلوك المشاركة.
 
 ```js
 import { readFileSync } from "node:fs";
@@ -164,7 +161,7 @@ export default {
   plugins: [
     new ModuleFederationPlugin({
       shared: {
-        // adds react as shared module
+        // يضيف react كـ shared module
         react: {
           requiredVersion: deps.react,
           singleton: true,
@@ -175,75 +172,75 @@ export default {
 };
 ```
 
-#### Sharing hints
+#### تلميحات المشاركة
 
 ##### **`eager`**
 
 `boolean`
 
-This hint will allow webpack to include the provided and fallback module directly instead of fetching the library via an asynchronous request. In other words, this allows to use this shared module in the initial chunk. Also, be careful that all provided and fallback modules will always be downloaded when this hint is enabled.
+هذا التلميح يجعل webpack يضمّن module المقدّم وfallback مباشرة بدل جلب المكتبة بطلب غير متزامن. بمعنى آخر، يتيح استخدام هذا shared module داخل initial chunk. انتبه أيضًا إلى أن كل modules المقدّمة وfallback ستُحمّل دائمًا عند تفعيل هذا التلميح.
 
 ##### **`import`**
 
 `false | string`
 
-The provided module that should be placed in the shared scope. This provided module also acts as fallback module if no shared module is found in the shared scope or version isn't valid. (The value for this hint defaults to the property name.)
+الـ module المقدّم الذي يجب وضعه في shared scope. يعمل هذا module أيضًا كـ fallback إذا لم يُعثر على shared module داخل shared scope، أو إذا كان الإصدار غير صالح. القيمة الافتراضية لهذا التلميح هي اسم الخاصية نفسها.
 
 ##### **`packageName`**
 
 `string`
 
-The package name that is used to determine required version from description file. This is only needed when the package name can't be automatically determined from request.
+اسم الحزمة المستخدم لمعرفة الإصدار المطلوب من ملف الوصف. تحتاجه فقط عندما لا يمكن تحديد اسم الحزمة تلقائيًا من request.
 
 ##### **`requiredVersion`**
 
 `false` `string`
 
-This field specifies the required version of the package. It accepts semantic versioning, such as "^1.2.3". Additionally, it retrieves the version if it's provided as a URL, for instance: "git+ssh://git@github.com:foo/bar.git#v1.0.0".
+يحدد هذا الحقل الإصدار المطلوب من الحزمة. يقبل semantic versioning مثل `"^1.2.3"`. ويمكنه أيضًا استخراج الإصدار إذا كان موجودًا ضمن URL، مثل: `"git+ssh://git@github.com:foo/bar.git#v1.0.0"`.
 
 ##### **`shareKey`**
 
 `string`
 
-The requested shared module is looked up under this key from the shared scope.
+يُبحث عن shared module المطلوب تحت هذا المفتاح داخل shared scope.
 
 ##### **`shareScope`**
 
 `string`
 
-The name of the shared scope.
+اسم shared scope.
 
 ##### **`singleton`**
 
 `boolean`
 
-This hint only allows a single version of the shared module in the shared scope (disabled by default). Some libraries use a global internal state (e.g. react, react-dom). Thus, it is critical to have only one instance of the library running at a time.
+هذا التلميح يسمح بوجود إصدار واحد فقط من shared module داخل shared scope، وهو معطّل افتراضيًا. بعض المكتبات تستخدم حالة داخلية عامة، مثل `react` و`react-dom`، لذلك من المهم أن تعمل نسخة واحدة فقط من المكتبة في الوقت نفسه.
 
-In cases where there are multiple versions of the same dependency in the shared scope, the highest semantic version is used.
+إذا وجدت عدة إصدارات من الاعتماد نفسه داخل shared scope، فسيُستخدم أعلى إصدار semantic.
 
 ##### **`strictVersion`**
 
 `boolean`
 
-This hint allows webpack to reject the shared module if version is not valid (defaults to `true` when local fallback module is available and shared module is not a singleton, otherwise `false`, it has no effect if there is no required version specified). Throws a runtime error if the required version is not found.
+هذا التلميح يجعل webpack يرفض shared module إذا كان الإصدار غير صالح. القيمة الافتراضية تكون `true` عندما يكون local fallback module متاحًا والـ shared module ليس singleton، وإلا تكون `false`. ولا يكون له تأثير إذا لم تحدد إصدارًا مطلوبًا. إذا لم يُعثر على الإصدار المطلوب، فسيتم رمي runtime error.
 
 ##### **`version`**
 
 `false | string`
 
-The version of the provided module. It allows webpack to replace lower matching versions, but not higher.
+إصدار module المقدّم. يسمح لـ webpack باستبدال الإصدارات المطابقة الأقل، لكن لا يستبدل الإصدارات الأعلى.
 
-By default, webpack uses the version from the `package.json` file of the dependency.
+افتراضيًا، يستخدم webpack الإصدار الموجود في ملف `package.json` الخاص بالاعتماد.
 
-#### **Additional examples**
+#### **أمثلة إضافية**
 
 ```js
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // adds vue as shared module
-      // version is inferred from package.json
-      // it will always use the shared version, but print a warning when the shared vue is < 2.6.5 or >= 3
+      // يضيف vue كـ shared module
+      // يتم استنتاج الإصدار من package.json
+      // سيستخدم دائمًا الإصدار المشترك، لكنه يطبع تحذيرًا إذا كان vue المشترك < 2.6.5 أو >= 3
       shared: {
         vue: {
           requiredVersion: "^2.6.5",
@@ -259,9 +256,9 @@ export default {
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // adds vue as shared module
-      // there is no local version provided
-      // it will emit a warning if the shared vue is < 2.6.5 or >= 3
+      // يضيف vue كـ shared module
+      // لا يوجد إصدار محلي مقدّم
+      // سيصدر تحذيرًا إذا كان vue المشترك < 2.6.5 أو >= 3
       shared: {
         vue: {
           import: false,
@@ -277,9 +274,9 @@ export default {
 export default {
   plugins: [
     new ModuleFederationPlugin({
-      // adds vue as shared module
-      // there is no local version provided
-      // it will throw an error when the shared vue is < 2.6.5 or >= 3
+      // يضيف vue كـ shared module
+      // لا يوجد إصدار محلي مقدّم
+      // سيرمي خطأ إذا كان vue المشترك < 2.6.5 أو >= 3
       shared: {
         vue: {
           import: false,
@@ -298,14 +295,14 @@ export default {
     new ModuleFederationPlugin({
       shared: {
         "my-vue": {
-          // can be referenced by import "my-vue"
-          import: "vue", // the "vue" package will be used as a provided and fallback module
-          shareKey: "shared-vue", // under this name the shared module will be placed in the share scope
-          shareScope: "default", // share scope with this name will be used
-          singleton: true, // only a single version of the shared module is allowed
-          strictVersion: true, // don't use shared version when version isn't valid. Singleton or modules without fallback will throw, otherwise fallback is used
-          version: "1.2.3", // the version of the shared module
-          requiredVersion: "^1.0.0", // the required version of the shared module
+          // يمكن الإشارة إليه عبر import "my-vue"
+          import: "vue", // ستُستخدم حزمة "vue" كـ module مقدّم وfallback
+          shareKey: "shared-vue", // بهذا الاسم سيُوضع shared module داخل share scope
+          shareScope: "default", // سيُستخدم share scope بهذا الاسم
+          singleton: true, // يُسمح بإصدار واحد فقط من shared module
+          strictVersion: true, // لا تستخدم الإصدار المشترك إذا كان غير صالح. يرمي Singleton أو modules بدون fallback خطأ، وإلا يُستخدم fallback
+          version: "1.2.3", // إصدار shared module
+          requiredVersion: "^1.0.0", // الإصدار المطلوب من shared module
         },
       },
     }),
diff --git a/src/content/plugins/normal-module-replacement-plugin.mdx b/src/content/plugins/normal-module-replacement-plugin.mdx
index cd84a89a3a2a..ed248635475c 100644
--- a/src/content/plugins/normal-module-replacement-plugin.mdx
+++ b/src/content/plugins/normal-module-replacement-plugin.mdx
@@ -1,33 +1,29 @@
 ---
 title: NormalModuleReplacementPlugin
-group: webpack
 contributors:
-  - gonzoyumo
-  - byzyk
-  - chenxsan
-  - askoufis
-  - snitin315
+  - RlxChap2
+group: webpack
 ---
 
-The `NormalModuleReplacementPlugin` allows you to replace resources that match `resourceRegExp` with `newResource`. If `newResource` is relative, it is resolved relative to the previous resource. If `newResource` is a function, it is expected to overwrite the request attribute of the supplied resource.
+يسمح لك `NormalModuleReplacementPlugin` باستبدال الموارد التي تطابق `resourceRegExp` بمورد جديد هو `newResource`. إذا كان `newResource` مسارًا نسبيًا، فسيُحل نسبة إلى المورد السابق. وإذا كان `newResource` دالة، فمن المتوقع أن تعدّل خاصية `request` في المورد الممرر لها.
 
-This can be useful for allowing different behaviour between builds.
+يفيد هذا عندما تريد سلوكًا مختلفًا بين builds، مثل استخدام إعدادات مختلفة للتطوير والإنتاج.
 
 ```js
 new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);
 ```
 
-Note that the `resourceRegExp` is tested against the request you write in your code, not the resolved resource. For instance, `'./sum'` will be used to test instead of `'./sum.js'` when you have code `import sum from './sum'`.
+لاحظ أن `resourceRegExp` يُختبر على request المكتوب في الكود، وليس على المورد بعد حله. مثلًا، إذا كتبت `import sum from './sum'` فسيُختبر النص `'./sum'` وليس `'./sum.js'`.
 
-Also please note that when using Windows, you have to accommodate the different folder separator symbol. E.g. `/src\/environments\/environment\.ts/` won't work on Windows, you have to use `/src[\\/]environments[\\/]environment\.ts/,` instead.
+انتبه أيضًا عند استخدام Windows إلى اختلاف رمز الفصل بين المجلدات. مثلًا، `/src\/environments\/environment\.ts/` لن يعمل على Windows، واستخدم بدلًا منه `/src[\\/]environments[\\/]environment\.ts/,`.
 
-## Basic Example
+## مثال أساسي
 
-Replace a specific module when building for a [development environment](/guides/production).
+استبدل module محددًا عند البناء لبيئة [التطوير أو الإنتاج](/guides/production).
 
-Say you have a configuration file `some/path/config.development.module.js` and a special version for production in `some/path/config.production.module.js`
+لنفترض أن لديك ملف إعدادات للتطوير باسم `some/path/config.development.module.js` ونسخة خاصة بالإنتاج باسم `some/path/config.production.module.js`.
 
-Add the following plugin when building for production:
+أضف plugin التالي عند البناء للإنتاج:
 
 ```js
 new webpack.NormalModuleReplacementPlugin(
@@ -36,11 +32,11 @@ new webpack.NormalModuleReplacementPlugin(
 );
 ```
 
-## Advanced Example
+## مثال متقدم
 
-Conditional build depending on an [specified environment](/configuration/configuration-types).
+بناء مشروط يعتمد على [بيئة محددة](/configuration/configuration-types).
 
-Say you want a configuration with specific values for different build targets.
+لنفترض أنك تريد إعدادًا يستخدم قيمًا مختلفة حسب هدف البناء.
 
 ```js
 export default (env) => {
@@ -62,7 +58,7 @@ export default (env) => {
 };
 ```
 
-Create the two configuration files:
+أنشئ ملفي الإعدادات التاليين:
 
 **app/config-VERSION_A.js**
 
@@ -80,7 +76,7 @@ export default {
 };
 ```
 
-Then import that configuration using the keyword you're looking for in the regexp:
+بعد ذلك، استورد الإعداد باستخدام الكلمة التي تبحث عنها في regexp:
 
 ```js
 import config from "app/config-APP_TARGET";
@@ -88,7 +84,7 @@ import config from "app/config-APP_TARGET";
 console.log(config.title);
 ```
 
-And now you get the right configuration imported depending on which target you're building for:
+الآن سيُستورد ملف الإعداد الصحيح حسب الهدف الذي تبني له:
 
 ```bash
 npx webpack --env APP_TARGET=VERSION_A
diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx
index 936e912b0919..63e43fa7f2e3 100644
--- a/src/content/plugins/progress-plugin.mdx
+++ b/src/content/plugins/progress-plugin.mdx
@@ -1,27 +1,23 @@
 ---
 title: ProgressPlugin
-group: webpack
 contributors:
-  - elliottsj
-  - EugeneHlushko
-  - byzyk
-  - smelukov
-  - chenxsan
+  - RlxChap2
+group: webpack
 ---
 
-The `ProgressPlugin` provides a way to customize how progress is reported during a compilation.
+يوفّر `ProgressPlugin` طريقة لتخصيص كيفية عرض تقدم عملية التجميع أثناء عمل webpack.
 
-## Usage
+## الاستخدام
 
-Create an instance of `ProgressPlugin` and provide one of the allowed params, besides, there's a static method `createDefaultHandler` which can be used to customize the default handler.
+أنشئ instance من `ProgressPlugin` ومرر له أحد المعاملات المدعومة. توجد أيضًا دالة static باسم `createDefaultHandler` يمكنك استخدامها لتخصيص handler الافتراضي.
 
-### Providing `function`
+### تمرير `function`
 
-Provide a handler function which will be called when hooks report progress. `handler` function arguments:
+يمكنك تمرير handler function تُستدعى عندما ترسل hooks معلومات عن التقدم. تستقبل دالة `handler` المعاملات التالية:
 
-- `percentage`: a number between 0 and 1 indicating the completion percentage of the compilation
-- `message`: a short description of the currently-executing hook
-- `...args`: zero or more additional strings describing the current progress
+- `percentage`: رقم بين 0 و1 يوضح نسبة اكتمال التجميع.
+- `message`: وصف قصير للـ hook الذي يعمل حاليًا.
+- `...args`: صفر أو أكثر من strings إضافية توضّح حالة التقدم الحالية.
 
 ```js
 const handler = (percentage, message, ...args) => {
@@ -32,19 +28,19 @@ const handler = (percentage, message, ...args) => {
 new webpack.ProgressPlugin(handler);
 ```
 
-### Providing `object`
+### تمرير `object`
 
-When providing an `object` to the `ProgressPlugin`, following properties are supported:
+عند تمرير `object` إلى `ProgressPlugin`، تدعم الخصائص التالية:
 
-- `activeModules` (`boolean = false`): Shows active modules count and one active module in progress message.
-- `entries` (`boolean = true`): Shows entries count in progress message.
-- `handler` (See [Providing function](#providing-function))
-- `modules` (`boolean = true`): Shows modules count in progress message.
-- `modulesCount` (`number = 5000`): A minimum modules count to start with. Takes effect when `modules` property is enabled.
-- `profile` (`boolean = false`): Tells `ProgressPlugin` to collect profile data for progress steps.
-- `dependencies` (`boolean = true`): Shows the count of dependencies in progress message.
-- `dependenciesCount` (`number = 10000`): A minimum dependencies count to start with. Takes effect when `dependencies` property is enabled.
-- `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): Tells `ProgressPlugin` how to calculate progress percentage.
+- `activeModules` (`boolean = false`): يعرض عدد active modules واسم module نشط واحد داخل رسالة التقدم.
+- `entries` (`boolean = true`): يعرض عدد entries داخل رسالة التقدم.
+- `handler`: راجع [تمرير function](#تمرير-function).
+- `modules` (`boolean = true`): يعرض عدد modules داخل رسالة التقدم.
+- `modulesCount` (`number = 5000`): أقل عدد modules يبدأ منه العرض. يعمل عندما تكون خاصية `modules` مفعّلة.
+- `profile` (`boolean = false`): يطلب من `ProgressPlugin` جمع profile data لخطوات التقدم.
+- `dependencies` (`boolean = true`): يعرض عدد dependencies داخل رسالة التقدم.
+- `dependenciesCount` (`number = 10000`): أقل عدد dependencies يبدأ منه العرض. يعمل عندما تكون خاصية `dependencies` مفعّلة.
+- `percentBy` (`string = null: 'entries' | 'dependencies' | 'modules' | null`): يحدد الطريقة التي يستخدمها `ProgressPlugin` لحساب نسبة التقدم.
 
 ```js
 new webpack.ProgressPlugin({
@@ -64,7 +60,7 @@ new webpack.ProgressPlugin({
 
 ### webpack.ProgressPlugin.createDefaultHandler
 
-If the default handler of `ProgressPlugin` does not meet your requirements, you can customize it using the static `ProgressPlugin.createDefaultHandler` method.
+إذا لم يكن handler الافتراضي في `ProgressPlugin` مناسبًا لاحتياجك، يمكنك تخصيصه باستخدام الدالة static `ProgressPlugin.createDefaultHandler`.
 
 ```ts
 static createDefaultHandler: (
@@ -73,21 +69,21 @@ static createDefaultHandler: (
 ) => (percentage: number, msg: string, ...args: string[]) => void;
 ```
 
-## Percentage calculation
+## حساب النسبة المئوية
 
-By default, progress percentage is calculated based on built modules count and total modules count: `built / total`
+افتراضيًا، تُحسب نسبة التقدم اعتمادًا على عدد modules التي تم بناؤها مقارنة بإجمالي عدد modules: `built / total`.
 
-The total modules count is unknown in advance and changes during the build. This may cause inaccurate progress percentage.
+عدد modules الإجمالي غير معروف مسبقًا ويتغير أثناء البناء. لهذا السبب قد تكون نسبة التقدم غير دقيقة أحيانًا.
 
-To solve this problem `ProgressPlugin` caches the last known total modules count and reuses this value on the next build. The first build will warm the cache but the following builds will use and update this value.
+لحل هذه المشكلة، يخزن `ProgressPlugin` آخر عدد معروف لإجمالي modules ويعيد استخدام هذه القيمة في البناء التالي. أول عملية بناء تجهّز cache، أما العمليات اللاحقة فتستخدم هذه القيمة وتحدّثها.
 
-> We recommend using `percentBy: 'entries'` setting for projects with [multiple configured entry points](/configuration/entry-context/#entry). Percentage calculation will become more accurate because the amount of entry points is known in advance.
+> نوصي باستخدام الإعداد `percentBy: 'entries'` في المشاريع التي تحتوي [عدة entry points مضبوطة](/configuration/entry-context/#entry). تصبح نسبة التقدم أدق لأن عدد entry points معروف مسبقًا.
 
-## Supported Hooks
+## Hooks المدعومة
 
-The following hooks report progress information to `ProgressPlugin`.
+تُرسل hooks التالية معلومات التقدم إلى `ProgressPlugin`.
 
-T> _Hooks marked with \* allow plugins to report progress information using `reportProgress`. For more, see [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)_
+T> _الـ hooks المعلّمة بـ \* تسمح للـ plugins بإرسال معلومات تقدم باستخدام `reportProgress`. للمزيد، راجع [Plugin API: Reporting Progress](/api/plugins/#reporting-progress)._
 
 **Compiler**
 
@@ -150,6 +146,6 @@ T> _Hooks marked with \* allow plugins to report progress information using `rep
 - afterOptimizeAssets\*
 - afterSeal\*
 
-## Source
+## المصدر
 
-- [`ProgressPlugin` source](https://github.com/webpack/webpack/blob/main/lib/ProgressPlugin.js)
+- [مصدر `ProgressPlugin`](https://github.com/webpack/webpack/blob/main/lib/ProgressPlugin.js)
diff --git a/src/content/plugins/source-map-dev-tool-plugin.mdx b/src/content/plugins/source-map-dev-tool-plugin.mdx
index 31ae93a7d3aa..5ebc907daf30 100644
--- a/src/content/plugins/source-map-dev-tool-plugin.mdx
+++ b/src/content/plugins/source-map-dev-tool-plugin.mdx
@@ -1,68 +1,62 @@
 ---
 title: SourceMapDevToolPlugin
-group: webpack
 contributors:
-  - johnnyreilly
-  - simon04
-  - neilkennedy
-  - byzyk
-  - EugeneHlushko
-  - chenxsan
-  - snitin315
+  - RlxChap2
+group: webpack
 related:
-  - title: Building Source Maps
+  - title: بناء Source Maps
     url: https://survivejs.com/webpack/building/source-maps/#-sourcemapdevtoolplugin-and-evalsourcemapdevtoolplugin-
 ---
 
-This plugin enables more fine grained control of source map generation. It is also enabled automatically by certain settings of the [`devtool`](/configuration/devtool/) configuration option.
+يعطيك هذا plugin تحكمًا أدق في إنشاء source maps. قد يفعّله webpack تلقائيًا عند استخدام بعض قيم خيار الإعداد [`devtool`](/configuration/devtool/).
 
 ```js
 new webpack.SourceMapDevToolPlugin(options);
 ```
 
-## Options
+## الخيارات
 
-The following options are supported:
+يدعم plugin الخيارات التالية:
 
-- `test` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for modules based on their extension (defaults to `.js`, `.mjs`, and `.css`).
-- `include` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): Include source maps for module paths that match the given value.
-- `exclude` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp], function (asset) => boolean`): Exclude modules that match the given value from source map generation.
-- `filename` (`string`): Defines the output filename of the SourceMap (will be inlined if no value is provided).
-- `append` (`string` `function` `false`): Appends the given value to the original asset. Usually the `#sourceMappingURL` comment. `[url]` is replaced with a URL to the source map file. Since webpack v4.36.0, path parameters are supported: `[chunk]`, `[filename]` and `[contenthash]`. Setting `append` to `false` disables the appending.
+- `test` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): يضمّن source maps للـ modules حسب الامتداد. القيمة الافتراضية تشمل `.js` و`.mjs` و`.css`.
+- `include` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp, function (asset) => boolean]`): يضمّن source maps لمسارات modules التي تطابق القيمة المحددة.
+- `exclude` (`string` `RegExp` `function (asset) => boolean` `[string, RegExp], function (asset) => boolean`): يستبعد modules المطابقة من إنشاء source maps.
+- `filename` (`string`): يحدد اسم ملف SourceMap الناتج. إذا لم تحدد قيمة، فسيُضمّن source map داخل الملف.
+- `append` (`string` `function` `false`): يضيف القيمة المحددة إلى asset الأصلي. غالبًا تكون تعليق `#sourceMappingURL`. تُستبدل `[url]` بعنوان URL الخاص بملف source map. منذ webpack v4.36.0، يدعم هذا الخيار معاملات المسار: `[chunk]` و`[filename]` و`[contenthash]`. ضبط `append` على `false` يعطل الإضافة.
 
-  Starting from version 5.84.0, webpack allows the `append` option to be a function that accepts path data and an asset info object as arguments, and returns a string.
+  ابتداءً من الإصدار 5.84.0، يسمح webpack بأن تكون قيمة `append` دالة تستقبل path data وكائن asset info، ثم ترجع string.
 
   ```ts
   (pathData: PathData, assetInfo?: AssetInfo) => string;
   ```
 
-- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
-- `fallbackModuleFilenameTemplate` (`string`): See link above.
-- `ignoreList` (`string` `RegExp` `function (source) => boolean` `[string, RegExp, function (source) => boolean]`): Decide whether to ignore source files that match the specified value in source maps.
-- `module = true` (`boolean`): Indicates whether loaders should generate source maps.
-- `columns = true` (`boolean`): Indicates whether column mappings should be used.
-- `namespace` (`string`): Namespace prefix to allow multiple webpack roots in the devtools. See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
-- `noSources = false` (`boolean`): Prevents the source file content from being included in the source map.
-- `publicPath` (`string`): Emits absolute URLs with public path prefix, e.g. `https://example.com/project/`.
-- `fileContext` (`string`): Makes the `[file]` argument relative to this directory.
-- `sourceRoot` (`string`): Provide a custom value for the `sourceRoot` property in the SourceMap.
-- `debugIds` (`boolean`): If `true`, unique ids will be emitted in source and sourcemaps which streamlines identifying sourcemaps across different builds. See the [TC39 sourcemap debug ID proposal](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md) for more details.
+- `moduleFilenameTemplate` (`string`): راجع [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
+- `fallbackModuleFilenameTemplate` (`string`): راجع الرابط السابق.
+- `ignoreList` (`string` `RegExp` `function (source) => boolean` `[string, RegExp, function (source) => boolean]`): يحدد هل يجب تجاهل ملفات source المطابقة داخل source maps.
+- `module = true` (`boolean`): يحدد هل يجب على loaders إنشاء source maps.
+- `columns = true` (`boolean`): يحدد هل تُستخدم mappings على مستوى الأعمدة.
+- `namespace` (`string`): بادئة namespace تسمح بوجود أكثر من webpack root داخل devtools. راجع [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
+- `noSources = false` (`boolean`): يمنع تضمين محتوى ملفات source داخل source map.
+- `publicPath` (`string`): ينشئ URLs مطلقة مع بادئة public path، مثل `https://example.com/project/`.
+- `fileContext` (`string`): يجعل معامل `[file]` نسبيًا إلى هذا المجلد.
+- `sourceRoot` (`string`): يحدد قيمة مخصصة لخاصية `sourceRoot` داخل SourceMap.
+- `debugIds` (`boolean`): إذا كانت `true`، فسيضيف webpack ids فريدة داخل ملفات source وsourcemaps، مما يسهل ربط sourcemaps بالبناء الصحيح. راجع [اقتراح TC39 الخاص بـ sourcemap debug ID](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md) لمزيد من التفاصيل.
 
-The `fileContext` option is useful when you want to store source maps in an upper level directory to avoid `../../` appearing in the absolute `[url]`.
+يفيد خيار `fileContext` عندما تريد تخزين source maps في مجلد أعلى بدون ظهور `../../` داخل `[url]` المطلق.
 
-T> Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly.
+T> ضبط `module` أو `columns` على `false` يجعل source maps أقل دقة، لكنه يحسّن أداء التجميع بشكل ملحوظ.
 
-T> If you want to use a custom configuration for this plugin in [development mode](/configuration/mode/#mode-development), make sure to disable the default one. I.e. set `devtool: false`.
+T> إذا أردت استخدام إعداد مخصص لهذا plugin في [وضع التطوير](/configuration/mode/#mode-development)، عطّل الإعداد الافتراضي أولًا، مثلًا باستخدام `devtool: false`.
 
-W> If the default webpack `minimizer` has been overridden (such as to customise the `MinimizerPlugin` options), make sure to configure its replacement with `sourceMap: true` to enable SourceMap support.
+W> إذا استبدلت webpack `minimizer` الافتراضي، مثلًا لتخصيص خيارات `MinimizerPlugin`، فتأكد من ضبط البديل على `sourceMap: true` لتفعيل دعم SourceMap.
 
-## Examples
+## أمثلة
 
-The following examples demonstrate some common use cases for this plugin.
+تعرض الأمثلة التالية حالات استخدام شائعة لهذا plugin.
 
-### Basic Use Case
+### استخدام أساسي
 
-You can use the following code to replace the configuration option `devtool: inline-source-map` with an equivalent custom plugin configuration:
+يمكنك استخدام الكود التالي لاستبدال خيار الإعداد `devtool: inline-source-map` بإعداد مخصص مكافئ باستخدام plugin:
 
 ```js
 export default {
@@ -72,9 +66,9 @@ export default {
 };
 ```
 
-### Exclude Vendor Maps
+### استبعاد خرائط vendor
 
-The following code would exclude source maps for any modules in the `vendor.js` bundle:
+يستبعد الكود التالي source maps لأي modules داخل bundle باسم `vendor.js`:
 
 ```js
 new webpack.SourceMapDevToolPlugin({
@@ -83,9 +77,9 @@ new webpack.SourceMapDevToolPlugin({
 });
 ```
 
-### Host Source Maps Externally
+### استضافة source maps خارجيًا
 
-Set a URL for source maps. Useful for hosting them on a host that requires authorization.
+اضبط URL للـ source maps عندما تريد استضافتها على خادم خارجي، مثل خادم يتطلب صلاحيات وصول.
 
 ```js
 new webpack.SourceMapDevToolPlugin({
@@ -94,7 +88,7 @@ new webpack.SourceMapDevToolPlugin({
 });
 ```
 
-And for cases when source maps are stored in the upper level directory:
+وفي الحالات التي تُخزن فيها source maps في مجلد أعلى:
 
 ```text
 project
@@ -105,7 +99,7 @@ project
     |- bundle-[hash].js.map
 ```
 
-With the following config:
+مع الإعداد التالي:
 
 ```js
 new webpack.SourceMapDevToolPlugin({
@@ -115,7 +109,7 @@ new webpack.SourceMapDevToolPlugin({
 });
 ```
 
-Will produce the following URL:
+سينتج URL بالشكل التالي:
 
 ```text
 https://example.com/project/sourcemaps/bundle-[hash].js.map
diff --git a/src/content/plugins/split-chunks-plugin.mdx b/src/content/plugins/split-chunks-plugin.mdx
index 7d8dc56721fb..7abe5e108dd8 100644
--- a/src/content/plugins/split-chunks-plugin.mdx
+++ b/src/content/plugins/split-chunks-plugin.mdx
@@ -1,25 +1,8 @@
 ---
 title: SplitChunksPlugin
-group: webpack
 contributors:
-  - sokra
-  - jeremenichelli
-  - Priestch
-  - chrisdothtml
-  - EugeneHlushko
-  - byzyk
-  - jacobangel
-  - madhavarshney
-  - sakhisheikh
-  - superburrito
-  - ryandrew14
-  - snitin315
-  - chenxsan
-  - rohrlaf
-  - jamesgeorge007
-  - anshumanv
-  - snitin315
-  - shivxmsharma
+  - RlxChap2
+group: webpack
 related:
   - title: webpack's automatic deduplication algorithm example
     url: https://github.com/webpack/webpack/blob/main/examples/many-pages/README.md
@@ -27,34 +10,34 @@ related:
     url: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
 ---
 
-Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The `CommonsChunkPlugin` was used to avoid duplicated dependencies across them, but further optimizations were not possible.
+في البداية، كانت chunks، والـ modules المستوردة داخلها، مرتبطة بعلاقة parent-child داخل graph الداخلي في webpack. كان `CommonsChunkPlugin` يُستخدم لتجنب تكرار dependencies بينها، لكن لم تكن هناك مساحة كبيرة لتحسينات إضافية.
 
-Since webpack v4, the `CommonsChunkPlugin` was removed in favor of `optimization.splitChunks`.
+منذ webpack v4، تمت إزالة `CommonsChunkPlugin` واستُبدل بخيار `optimization.splitChunks`.
 
-## Defaults
+## القيم الافتراضية
 
-Out of the box `SplitChunksPlugin` should work well for most users.
+يعمل `SplitChunksPlugin` بشكل جيد لمعظم المستخدمين بدون إعدادات إضافية.
 
-By default it only affects on-demand chunks, because changing initial chunks would affect the script tags the HTML file should include to run the project.
+افتراضيًا، يؤثر فقط في chunks التي تُحمّل عند الطلب، لأن تغيير initial chunks قد يؤثر في وسوم script التي يجب أن يتضمنها ملف HTML لتشغيل المشروع.
 
-Webpack will automatically split chunks based on these conditions:
+يقسم webpack chunks تلقائيًا بناءً على هذه الشروط:
 
-- New chunk can be shared OR modules are from the `node_modules` folder
-- New chunk would be bigger than 20kb (before min+gz)
-- Maximum number of parallel requests when loading chunks on demand would be lower or equal to 30
-- Maximum number of parallel requests at initial page load would be lower or equal to 30
+- يمكن مشاركة chunk الجديد، أو أن modules قادمة من مجلد `node_modules`.
+- سيكون chunk الجديد أكبر من 20kb قبل min+gz.
+- أقصى عدد للطلبات المتوازية عند تحميل chunks عند الطلب سيكون أقل من أو يساوي 30.
+- أقصى عدد للطلبات المتوازية عند التحميل الأولي للصفحة سيكون أقل من أو يساوي 30.
 
-When trying to fulfill the last two conditions, bigger chunks are preferred.
+عند محاولة تحقيق الشرطين الأخيرين، تُفضّل chunks الأكبر.
 
-## Configuration
+## الإعداد
 
-Webpack provides a set of options for developers that want more control over this functionality.
+يوفر webpack مجموعة خيارات للمطورين الذين يريدون تحكمًا أكبر بهذه الوظيفة.
 
-W> The default configuration was chosen to fit web performance best practices, but the optimal strategy for your project might differ. If you're changing the configuration, you should measure the effect of your changes to ensure there's a real benefit.
+W> تم اختيار الإعداد الافتراضي ليتوافق مع أفضل ممارسات أداء الويب، لكن الاستراتيجية المثلى لمشروعك قد تختلف. إذا غيرت الإعدادات، فقِس أثر تغييراتك للتأكد من وجود فائدة حقيقية.
 
 ## optimization.splitChunks
 
-This configuration object represents the default behavior of the `SplitChunksPlugin`.
+يمثل كائن الإعداد هذا السلوك الافتراضي لـ `SplitChunksPlugin`.
 
 **webpack.config.js**
 
@@ -87,23 +70,23 @@ export default {
 };
 ```
 
-W> When files paths are processed by webpack, they always contain `/` on Unix systems and `\` on Windows. That's why using `[\\/]` in `{cacheGroup}.test` fields is necessary to represent a path separator. `/` or `\` in `{cacheGroup}.test` will cause issues when used cross-platform.
+W> عندما يعالج webpack مسارات الملفات، فهي تحتوي دائمًا على `/` في أنظمة Unix و`\` في Windows. لذلك يجب استخدام `[\\/]` داخل حقول `{cacheGroup}.test` لتمثيل فاصل المسار. استخدام `/` أو `\` مباشرة داخل `{cacheGroup}.test` قد يسبب مشاكل عند تشغيل المشروع على أكثر من نظام.
 
-W> Since webpack 5, passing an entry name to `{cacheGroup}.test` and using a name of an existing chunk for `{cacheGroup}.name` is no longer allowed.
+W> منذ webpack 5، لم يعد مسموحًا بتمرير اسم entry إلى `{cacheGroup}.test` واستخدام اسم chunk موجود في `{cacheGroup}.name`.
 
 ### splitChunks.automaticNameDelimiter
 
 `string = '~'`
 
-By default webpack will generate names using origin and name of the chunk (e.g. `vendors~main.js`). This option lets you specify the delimiter to use for the generated names.
+افتراضيًا، يولد webpack الأسماء باستخدام origin واسم chunk، مثل `vendors~main.js`. يتيح لك هذا الخيار تحديد الفاصل المستخدم في الأسماء المولدة.
 
 ### splitChunks.chunks
 
 `string = 'async'` `function (chunk)` `RegExp`
 
-This indicates which chunks will be selected for optimization. When a string is provided, valid values are `all`, `async`, and `initial`. Providing `all` can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks.
+يحدد هذا الخيار chunks التي سيتم اختيارها للتحسين. عندما تمرر string، تكون القيم الصالحة هي `all` و`async` و`initial`. تمرير `all` قد يكون قويًا جدًا، لأنه يعني إمكانية مشاركة chunks حتى بين chunks غير المتزامنة والمتزامنة.
 
-Note that it is applied to the fallback cache group as well (`splitChunks.fallbackCacheGroup.chunks`).
+لاحظ أن هذا الخيار يُطبّق أيضًا على fallback cache group، أي `splitChunks.fallbackCacheGroup.chunks`.
 
 **webpack.config.js**
 
@@ -112,14 +95,14 @@ export default {
   // ...
   optimization: {
     splitChunks: {
-      // include all types of chunks
+      // تضمين كل أنواع chunks
       chunks: "all",
     },
   },
 };
 ```
 
-Alternatively, you may provide a function for more control. The return value will indicate whether to include each chunk.
+بدلًا من ذلك، يمكنك تمرير دالة لمزيد من التحكم. قيمة الإرجاع ستحدد هل يتم تضمين كل chunk أم لا.
 
 ```js
 export default {
@@ -127,7 +110,7 @@ export default {
   optimization: {
     splitChunks: {
       chunks(chunk) {
-        // exclude `my-excluded-chunk`
+        // استبعاد `my-excluded-chunk`
         return chunk.name !== "my-excluded-chunk";
       },
     },
@@ -135,7 +118,7 @@ export default {
 };
 ```
 
-If you are using webpack version 5.86.0 or later, you can also pass a regular expression:
+إذا كنت تستخدم webpack 5.86.0 أو أحدث، يمكنك أيضًا تمرير regular expression:
 
 ```js
 export default {
@@ -148,51 +131,51 @@ export default {
 };
 ```
 
-T> You can combine this configuration with the [HtmlWebpackPlugin](/plugins/html-webpack-plugin/) for Single Page Application or [ChunksWebpackPlugin](https://github.com/yoriiis/chunks-webpack-plugin?tab=readme-ov-file#chunkswebpackplugin) for Multiple Page Application. It will inject all the generated vendor chunks for you.
+T> يمكنك دمج هذا الإعداد مع [HtmlWebpackPlugin](/plugins/html-webpack-plugin/) في Single Page Application أو [ChunksWebpackPlugin](https://github.com/yoriiis/chunks-webpack-plugin?tab=readme-ov-file#chunkswebpackplugin) في Multiple Page Application. سيحقن لك كل vendor chunks المولدة.
 
 ### splitChunks.maxAsyncRequests
 
 `number = 30`
 
-Maximum number of parallel requests when on-demand loading.
+أقصى عدد للطلبات المتوازية عند التحميل عند الطلب.
 
 ### splitChunks.maxInitialRequests
 
 `number = 30`
 
-Maximum number of parallel requests at an entry point.
+أقصى عدد للطلبات المتوازية عند entry point.
 
 ### splitChunks.defaultSizeTypes
 
 `[string] = ['javascript', 'unknown']`
 
-Sets the size types which are used when a number is used for sizes.
+يضبط أنواع الحجم التي تُستخدم عندما تكون الأحجام أرقامًا.
 
 ### splitChunks.minChunks
 
 `number = 1`
 
-The minimum times must a module be shared among chunks before splitting.
+الحد الأدنى لعدد المرات التي يجب أن يكون module مشتركًا فيها بين chunks قبل تقسيمه.
 
 ### splitChunks.hidePathInfo
 
 `boolean`
 
-Prevents exposing path info when creating names for parts splitted by maxSize.
+يمنع كشف معلومات المسار عند إنشاء أسماء للأجزاء المقسمة بواسطة maxSize.
 
 ### splitChunks.minSize
 
 `number = 20000` `{ [index: string]: number }`
 
-Minimum size, in bytes, for a chunk to be generated.
+الحد الأدنى للحجم، بالبايت، المطلوب لإنشاء chunk.
 
 ### splitChunks.minSizeReduction
 
 `number` `{ [index: string]: number }`
 
-Minimum size reduction to the main chunk (bundle), in bytes, needed for a chunk to be generated. Meaning if splitting into a chunk does not reduce the size of the main chunk (bundle) by the given amount of bytes, it won't be split, even if it meets the `splitChunks.minSize` value.
+الحد الأدنى المطلوب لتقليل حجم chunk الرئيسي، أو bundle، بالبايت حتى يتم إنشاء chunk جديد. أي إذا لم يقلل التقسيم حجم bundle الرئيسي بالمقدار المحدد من البايت، فلن يتم التقسيم حتى لو تحققت قيمة `splitChunks.minSize`.
 
-T> Both `splitChunks.minSizeReduction` and `splitChunks.minSize` need to be fulfilled for a chunk to be generated.
+T> يجب تحقق كل من `splitChunks.minSizeReduction` و`splitChunks.minSize` حتى يتم إنشاء chunk.
 
 ### splitChunks.enforceSizeThreshold
 
@@ -200,7 +183,7 @@ T> Both `splitChunks.minSizeReduction` and `splitChunks.minSize` need to be fulf
 
 `number = 50000`
 
-Size threshold at which splitting is enforced and other restrictions (minRemainingSize, maxAsyncRequests, maxInitialRequests) are ignored.
+عتبة الحجم التي عندها يُفرض التقسيم ويتم تجاهل القيود الأخرى، مثل minRemainingSize وmaxAsyncRequests وmaxInitialRequests.
 
 ### splitChunks.minRemainingSize
 
@@ -208,19 +191,19 @@ Size threshold at which splitting is enforced and other restrictions (minRemaini
 
 `number = 0`
 
-`splitChunks.minRemainingSize` option was introduced in webpack 5 to avoid zero sized modules by ensuring that the minimum size of the chunk which remains after splitting is above a limit.
+أُضيف خيار `splitChunks.minRemainingSize` في webpack 5 لتجنب modules بحجم صفري، عبر التأكد من أن الحد الأدنى لحجم chunk المتبقي بعد التقسيم أعلى من حد معين.
 
-The default value of `splitChunks.minRemainingSize` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `splitChunks.minRemainingSize` على [`mode`](/configuration/mode/):
 
-| Mode            | Default                            |
-| --------------- | ---------------------------------- |
-| `"production"`  | the value of `splitChunks.minSize` |
-| `"development"` | `0`                                |
-| `"none"`        | the value of `splitChunks.minSize` |
+| Mode            | الافتراضي                  |
+| --------------- | -------------------------- |
+| `"production"`  | قيمة `splitChunks.minSize` |
+| `"development"` | `0`                        |
+| `"none"`        | قيمة `splitChunks.minSize` |
 
-It doesn't need to be specified manually except for the rare cases where deep control is required.
+لا تحتاج غالبًا إلى تحديده يدويًا إلا في حالات نادرة تتطلب تحكمًا عميقًا.
 
-W> `splitChunks.minRemainingSize` only takes effect when a single chunk is remaining.
+W> لا يعمل `splitChunks.minRemainingSize` إلا عندما يبقى chunk واحد فقط.
 
 ### splitChunks.layer
 
@@ -228,54 +211,54 @@ W> `splitChunks.minRemainingSize` only takes effect when a single chunk is remai
 
 `RegExp` `string` `function`
 
-Assign modules to a cache group by module layer.
+يسند modules إلى cache group حسب module layer.
 
 ### splitChunks.maxSize
 
 `number = 0`
 
-Using `maxSize` (either globally `optimization.splitChunks.maxSize` per cache group `optimization.splitChunks.cacheGroups[x].maxSize` or for the fallback cache group `optimization.splitChunks.fallbackCacheGroup.maxSize`) tells webpack to try to split chunks bigger than `maxSize` bytes into smaller parts. Parts will be at least `minSize` (next to `maxSize`) in size.
-The algorithm is deterministic and changes to the modules will only have local effects. So that it is usable when using long term caching and doesn't require records. `maxSize` is only a hint and could be violated when modules are bigger than `maxSize` or splitting would violate `minSize`.
+استخدام `maxSize`، سواء بشكل عام عبر `optimization.splitChunks.maxSize` أو لكل cache group عبر `optimization.splitChunks.cacheGroups[x].maxSize` أو للـ fallback cache group عبر `optimization.splitChunks.fallbackCacheGroup.maxSize`، يخبر webpack أن يحاول تقسيم chunks الأكبر من `maxSize` بايت إلى أجزاء أصغر. ستكون الأجزاء على الأقل بحجم `minSize` بجانب `maxSize`.
+الخوارزمية deterministic، وتغييرات modules سيكون لها تأثير محلي فقط. لذلك تكون مناسبة عند استخدام long term caching ولا تحتاج إلى records. `maxSize` مجرد تلميح، وقد لا يلتزم به webpack إذا كانت modules أكبر من `maxSize` أو إذا كان التقسيم سيخالف `minSize`.
 
-When the chunk has a name already, each part will get a new name derived from that name. Depending on the value of `optimization.splitChunks.hidePathInfo` it will add a key derived from the first module name or a hash of it.
+إذا كان chunk يملك اسمًا مسبقًا، فسيحصل كل جزء على اسم جديد مشتق من ذلك الاسم. وبحسب قيمة `optimization.splitChunks.hidePathInfo`، سيضيف webpack مفتاحًا مشتقًا من اسم أول module أو hash منه.
 
-`maxSize` option is intended to be used with HTTP/2 and long term caching. It increases the request count for better caching. It could also be used to decrease the file size for faster rebuilding.
+خيار `maxSize` مخصص للاستخدام مع HTTP/2 وlong term caching. يزيد عدد الطلبات لتحسين caching. ويمكن استخدامه أيضًا لتقليل حجم الملف وتسريع إعادة build.
 
-T> `maxInitialRequest/maxAsyncRequests` takes higher priority than `maxSize`. Actual priority is `maxSize < maxInitialRequest/maxAsyncRequests < minSize`.
+T> `maxInitialRequest/maxAsyncRequests` له أولوية أعلى من `maxSize`. ترتيب الأولوية الفعلي هو: `maxSize < maxInitialRequest/maxAsyncRequests < minSize`.
 
-T> Setting the value for `maxSize` sets the value for both `maxAsyncSize` and `maxInitialSize`.
+T> ضبط قيمة `maxSize` يضبط قيمة كل من `maxAsyncSize` و`maxInitialSize`.
 
 ### splitChunks.maxAsyncSize
 
 `number`
 
-Like `maxSize`, `maxAsyncSize` can be applied globally (`splitChunks.maxAsyncSize`), to cacheGroups (`splitChunks.cacheGroups.{cacheGroup}.maxAsyncSize`), or to the fallback cache group (`splitChunks.fallbackCacheGroup.maxAsyncSize`).
+مثل `maxSize`، يمكن تطبيق `maxAsyncSize` بشكل عام عبر `splitChunks.maxAsyncSize`، أو على cacheGroups عبر `splitChunks.cacheGroups.{cacheGroup}.maxAsyncSize`، أو على fallback cache group عبر `splitChunks.fallbackCacheGroup.maxAsyncSize`.
 
-The difference between `maxAsyncSize` and `maxSize` is that `maxAsyncSize` will only affect on-demand loading chunks.
+الفرق بين `maxAsyncSize` و`maxSize` هو أن `maxAsyncSize` يؤثر فقط في chunks التي تُحمّل عند الطلب.
 
 ### splitChunks.maxInitialSize
 
 `number`
 
-Like `maxSize`, `maxInitialSize` can be applied globally (`splitChunks.maxInitialSize`), to cacheGroups (`splitChunks.cacheGroups.{cacheGroup}.maxInitialSize`), or to the fallback cache group (`splitChunks.fallbackCacheGroup.maxInitialSize`).
+مثل `maxSize`، يمكن تطبيق `maxInitialSize` بشكل عام عبر `splitChunks.maxInitialSize`، أو على cacheGroups عبر `splitChunks.cacheGroups.{cacheGroup}.maxInitialSize`، أو على fallback cache group عبر `splitChunks.fallbackCacheGroup.maxInitialSize`.
 
-The difference between `maxInitialSize` and `maxSize` is that `maxInitialSize` will only affect initial load chunks.
+الفرق بين `maxInitialSize` و`maxSize` هو أن `maxInitialSize` يؤثر فقط في initial load chunks.
 
 ### splitChunks.name
 
 `boolean = false` `function (module, chunks, cacheGroupKey) => string` `string`
 
-Also available for each cacheGroup: `splitChunks.cacheGroups.{cacheGroup}.name`.
+متاح أيضًا لكل cacheGroup: `splitChunks.cacheGroups.{cacheGroup}.name`.
 
-The name of the split chunk. Providing `false` will keep the same name of the chunks so it doesn't change names unnecessarily. It is the recommended value for production builds.
+اسم split chunk. تمرير `false` سيبقي الاسم نفسه للـ chunks حتى لا تتغير الأسماء بلا حاجة. هذه هي القيمة الموصى بها في production builds.
 
-Providing a string or a function allows you to use a custom name. Specifying either a string or a function that always returns the same string will merge all common modules and vendors into a single chunk. This might lead to bigger initial downloads and slow down page loads.
+تمرير string أو دالة يسمح باستخدام اسم مخصص. تحديد string، أو دالة ترجع دائمًا string نفسه، سيدمج كل common modules وvendors داخل chunk واحد. قد يؤدي هذا إلى تنزيل أولي أكبر وإبطاء تحميل الصفحات.
 
-If you choose to specify a function, you may find the `chunk.name` property (where `chunk` is an element of the `chunks` array) particularly useful in choosing a name for your chunk.
+إذا اخترت تحديد دالة، فقد تكون الخاصية `chunk.name` مفيدة جدًا في اختيار اسم chunk، حيث يكون `chunk` عنصرًا من array المسماة `chunks`.
 
-If the `splitChunks.name` matches an [entry point](/configuration/entry-context/#entry) name, the entry-point chunk & the cache group will be combined into a single chunk.
+إذا طابق `splitChunks.name` اسم [entry point](/configuration/entry-context/#entry)، فسيتم دمج entry-point chunk وcache group داخل chunk واحد.
 
-T> `splitChunks.cacheGroups.{cacheGroup}.name` can be used to move modules into a chunk that is a parent of the source chunk. For example, use `name: "entry-name"` to move modules into the `entry-name` chunk. You can also use on demand named chunks, but you must be careful that the selected modules are only used under this chunk.
+T> يمكن استخدام `splitChunks.cacheGroups.{cacheGroup}.name` لنقل modules إلى chunk يكون parent للـ source chunk. مثلًا، استخدم `name: "entry-name"` لنقل modules إلى chunk باسم `entry-name`. يمكنك أيضًا استخدام on demand named chunks، لكن يجب التأكد من أن modules المحددة لا تُستخدم إلا تحت ذلك chunk.
 
 **main.js**
 
@@ -295,7 +278,7 @@ export default {
       cacheGroups: {
         commons: {
           test: /[\\/]node_modules[\\/]/,
-          // cacheGroupKey here is `commons` as the key of the cacheGroup
+          // cacheGroupKey هنا هو `commons` لأنه مفتاح cacheGroup
           name(module, chunks, cacheGroupKey) {
             const moduleFileName = module
               .identifier()
@@ -312,9 +295,9 @@ export default {
 };
 ```
 
-Running webpack with following `splitChunks` configuration would also output a chunk of the group common with next name: `commons-main-lodash.js.e7519d2bb8777058fa27.js` (hash given as an example of real world output).
+تشغيل webpack بهذا الإعداد لـ `splitChunks` سيخرج أيضًا chunk من المجموعة common بالاسم التالي: `commons-main-lodash.js.e7519d2bb8777058fa27.js`، والـ hash هنا مثال من output حقيقي.
 
-W> When assigning equal names to different split chunks, all vendor modules are placed into a single shared chunk, though it's not recommend since it can result in more code downloaded.
+W> عند إعطاء الأسماء نفسها لعدة split chunks مختلفة، ستوضع كل vendor modules داخل shared chunk واحد، لكنه غير موصى به لأنه قد يؤدي إلى تنزيل كود أكثر.
 
 ### splitChunks.usedExports
 
@@ -322,12 +305,12 @@ W> When assigning equal names to different split chunks, all vendor modules are
 
 `boolean = true`
 
-Figure out which exports are used by modules to mangle export names, omit unused exports and generate more efficient code.
-When it is `true`: analyse used exports for each runtime, when it is `"global"`: analyse exports globally for all runtimes combined).
+يحدد exports المستخدمة بواسطة modules لتغيير أسماء exports، وحذف exports غير المستخدمة، وتوليد كود أكثر كفاءة.
+عندما تكون القيمة `true`: يتم تحليل used exports لكل runtime. وعندما تكون `"global"`: يتم تحليل exports بشكل عام لكل runtimes معًا.
 
 ### splitChunks.cacheGroups
 
-Cache groups can inherit and/or override any options from `splitChunks.*`; but `test`, `priority` and `reuseExistingChunk` can only be configured on cache group level. To disable any of the default cache groups, set them to `false`.
+يمكن لـ cache groups أن ترث أو تتجاوز أي خيار من `splitChunks.*`، لكن `test` و`priority` و`reuseExistingChunk` لا يمكن إعدادها إلا على مستوى cache group. لتعطيل أي cache groups افتراضية، اضبطها على `false`.
 
 **webpack.config.js**
 
@@ -348,13 +331,13 @@ export default {
 
 `number = -20`
 
-A module can belong to multiple cache groups. The optimization will prefer the cache group with a higher `priority`. The default groups have a negative priority to allow custom groups to take higher priority (default value is `0` for custom groups).
+يمكن أن ينتمي module إلى عدة cache groups. ستفضّل عملية optimization الـ cache group ذات `priority` الأعلى. المجموعات الافتراضية تملك priority سالبة حتى تتمكن المجموعات المخصصة من أخذ أولوية أعلى، والقيمة الافتراضية للمجموعات المخصصة هي `0`.
 
 #### `splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk`
 
 `boolean = true`
 
-If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can affect the resulting file name of the chunk.
+إذا كان chunk الحالي يحتوي على modules تم فصلها سابقًا من bundle الرئيسي، فسيُعاد استخدامه بدل إنشاء chunk جديد. قد يؤثر هذا في اسم ملف chunk الناتج.
 
 **webpack.config.js**
 
@@ -377,7 +360,7 @@ export default {
 
 `function` `RegExp` `string`
 
-Allows to assign modules to a cache group by module type.
+يسمح بإسناد modules إلى cache group حسب module type.
 
 **webpack.config.js**
 
@@ -402,9 +385,9 @@ export default {
 
 `function (module, { chunkGraph, moduleGraph }) => boolean` `RegExp` `string`
 
-Controls which modules are selected by this cache group. Omitting it selects all modules. It can match the absolute module resource path or chunk names. When a chunk name is matched, all modules in the chunk are selected.
+يتحكم في modules التي تختارها هذه cache group. إذا حُذف، فسيختار كل modules. يمكنه مطابقة المسار المطلق للـ module resource أو أسماء chunks. عند مطابقة اسم chunk، يتم اختيار كل modules داخل ذلك chunk.
 
-Providing a function to`{cacheGroup}.test`:
+تمرير دالة إلى `{cacheGroup}.test`:
 
 **webpack.config.js**
 
@@ -418,8 +401,8 @@ export default {
       cacheGroups: {
         svgGroup: {
           test(module) {
-            // `module.resource` contains the absolute path of the file on disk.
-            // Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
+            // يحتوي `module.resource` على المسار المطلق للملف على القرص.
+            // لاحظ استخدام `path.sep` بدل / أو \ لضمان التوافق بين الأنظمة.
 
             return (
               module.resource &&
@@ -439,9 +422,9 @@ export default {
 };
 ```
 
-In order to see what information is available in `module` and `chunks` objects, you can put `debugger;` statement in the callback. Then [run your webpack build in debug mode](/contribute/debugging/#devtools) to inspect the parameters in Chromium DevTools.
+لمعرفة المعلومات المتاحة داخل كائني `module` و`chunks`، يمكنك وضع عبارة `debugger;` داخل callback. ثم [شغّل webpack build في debug mode](/contribute/debugging/#devtools) لفحص parameters داخل Chromium DevTools.
 
-Providing a `RegExp` to `{cacheGroup}.test`:
+تمرير `RegExp` إلى `{cacheGroup}.test`:
 
 **webpack.config.js**
 
@@ -452,7 +435,7 @@ export default {
     splitChunks: {
       cacheGroups: {
         defaultVendors: {
-          // Note the usage of `[\\/]` as a path separator for cross-platform compatibility.
+          // لاحظ استخدام `[\\/]` كفاصل مسار لضمان التوافق بين الأنظمة.
           test: /[\\/]node_modules[\\/]|vendor[\\/]analytics_provider|vendor[\\/]other_lib/,
         },
       },
@@ -465,10 +448,10 @@ export default {
 
 `string` `function (pathData, assetInfo) => string`
 
-Allows to override the filename when and only when it's an initial chunk.
-All placeholders available in [`output.filename`](/configuration/output/#outputfilename) are also available here.
+يسمح بتجاوز filename عندما يكون chunk أوليًا فقط.
+كل placeholders المتاحة في [`output.filename`](/configuration/output/#outputfilename) متاحة هنا أيضًا.
 
-W> This option can also be set globally in `splitChunks.filename`, but this isn't recommended and will likely lead to an error if [`splitChunks.chunks`](#splitchunkschunks) is not set to `'initial'`. Avoid setting it globally.
+W> يمكن ضبط هذا الخيار أيضًا بشكل عام في `splitChunks.filename`، لكن ذلك غير موصى به، وغالبًا سيؤدي إلى خطأ إذا لم يكن [`splitChunks.chunks`](#splitchunkschunks) مضبوطًا على `'initial'`. تجنب ضبطه بشكل عام.
 
 **webpack.config.js**
 
@@ -487,7 +470,7 @@ export default {
 };
 ```
 
-And as a function:
+وكدالة:
 
 **webpack.config.js**
 
@@ -499,7 +482,7 @@ export default {
       cacheGroups: {
         defaultVendors: {
           filename: (pathData) =>
-            // Use pathData object for generating filename string based on your requirements
+            // استخدم كائن pathData لتوليد filename بناءً على احتياجك
             `${pathData.chunk.name}-bundle.js`,
         },
       },
@@ -508,7 +491,7 @@ export default {
 };
 ```
 
-It is possible to create a folder structure by providing path prefixing the filename: `'js/vendor/bundle.js'`.
+يمكن إنشاء بنية مجلدات عبر توفير prefix للمسار داخل filename، مثل: `'js/vendor/bundle.js'`.
 
 **webpack.config.js**
 
@@ -531,7 +514,7 @@ export default {
 
 `boolean = false`
 
-Tells webpack to ignore [`splitChunks.minSize`](#splitchunksminsize), [`splitChunks.minChunks`](#splitchunksminchunks), [`splitChunks.maxAsyncRequests`](#splitchunksmaxasyncrequests) and [`splitChunks.maxInitialRequests`](#splitchunksmaxinitialrequests) options and always create chunks for this cache group.
+يخبر webpack بتجاهل خيارات [`splitChunks.minSize`](#splitchunksminsize) و[`splitChunks.minChunks`](#splitchunksminchunks) و[`splitChunks.maxAsyncRequests`](#splitchunksmaxasyncrequests) و[`splitChunks.maxInitialRequests`](#splitchunksmaxinitialrequests)، وإنشاء chunks دائمًا لهذه cache group.
 
 **webpack.config.js**
 
@@ -554,7 +537,7 @@ export default {
 
 `string`
 
-Sets the hint for chunk id. It will be added to chunk's filename.
+يضبط تلميح chunk id. سيُضاف إلى اسم ملف chunk.
 
 **webpack.config.js**
 
@@ -573,9 +556,9 @@ export default {
 };
 ```
 
-## Examples
+## أمثلة
 
-### Defaults: Example 1
+### القيم الافتراضية: المثال 1
 
 ```js
 // index.js
@@ -590,18 +573,18 @@ import "react";
 // ...
 ```
 
-**Result:** A separate chunk would be created containing `react`. At the import call this chunk is loaded in parallel to the original chunk containing `./a`.
+**النتيجة:** سيتم إنشاء chunk منفصل يحتوي على `react`. عند استدعاء import، يتم تحميل هذا chunk بالتوازي مع chunk الأصلي الذي يحتوي على `./a`.
 
-Why:
+السبب:
 
-- Condition 1: The chunk contains modules from `node_modules`
-- Condition 2: `react` is bigger than 30kb
-- Condition 3: Number of parallel requests at the import call is 2
-- Condition 4: Doesn't affect request at initial page load
+- الشرط 1: يحتوي chunk على modules من `node_modules`.
+- الشرط 2: حجم `react` أكبر من 30kb.
+- الشرط 3: عدد الطلبات المتوازية عند استدعاء import هو 2.
+- الشرط 4: لا يؤثر في الطلبات عند التحميل الأولي للصفحة.
 
-What's the reasoning behind this? `react` probably won't change as often as your application code. By moving it into a separate chunk this chunk can be cached separately from your app code (assuming you are using chunkhash, records, Cache-Control or other long term cache approach).
+ما المنطق خلف ذلك؟ غالبًا لن يتغير `react` بقدر تغيّر كود تطبيقك. بنقله إلى chunk منفصل، يمكن تخزين هذا chunk في cache بشكل منفصل عن كود تطبيقك، بشرط أنك تستخدم chunkhash أو records أو Cache-Control أو أي أسلوب long term cache آخر.
 
-### Defaults: Example 2
+### القيم الافتراضية: المثال 2
 
 ```js
 // entry.js
@@ -613,7 +596,7 @@ import("./b");
 
 ```js
 // a.js
-import "./helpers"; // helpers is 40kb in size
+import "./helpers"; // حجم helpers هو 40kb
 
 // ...
 ```
@@ -621,25 +604,25 @@ import "./helpers"; // helpers is 40kb in size
 ```js
 // b.js
 import "./helpers";
-import "./more-helpers"; // more-helpers is also 40kb in size
+import "./more-helpers"; // حجم more-helpers أيضًا 40kb
 
 // ...
 ```
 
-**Result:** A separate chunk would be created containing `./helpers` and all dependencies of it. At the import calls this chunk is loaded in parallel to the original chunks.
+**النتيجة:** سيتم إنشاء chunk منفصل يحتوي على `./helpers` وكل dependencies الخاصة به. عند استدعاءات import، يتم تحميل هذا chunk بالتوازي مع chunks الأصلية.
 
-Why:
+السبب:
 
-- Condition 1: The chunk is shared between both import calls
-- Condition 2: `helpers` is bigger than 30kb
-- Condition 3: Number of parallel requests at the import calls is 2
-- Condition 4: Doesn't affect request at initial page load
+- الشرط 1: chunk مشترك بين استدعائي import.
+- الشرط 2: حجم `helpers` أكبر من 30kb.
+- الشرط 3: عدد الطلبات المتوازية عند استدعاءات import هو 2.
+- الشرط 4: لا يؤثر في الطلبات عند التحميل الأولي للصفحة.
 
-Putting the content of `helpers` into each chunk will result into its code being downloaded twice. By using a separate chunk this will only happen once. We pay the cost of an additional request, which could be considered a tradeoff. That's why there is a minimum size of 30kb.
+وضع محتوى `helpers` داخل كل chunk سيؤدي إلى تنزيل كوده مرتين. باستخدام chunk منفصل، يحدث ذلك مرة واحدة فقط. نحن ندفع تكلفة طلب إضافي، وهذا يعد tradeoff. لذلك يوجد حد أدنى للحجم وهو 30kb.
 
-### Split Chunks: Example 1
+### Split Chunks: المثال 1
 
-Create a `commons` chunk, which includes all code shared between entry points.
+أنشئ chunk باسم `commons` يحتوي على كل الكود المشترك بين entry points.
 
 **webpack.config.js**
 
@@ -660,11 +643,11 @@ export default {
 };
 ```
 
-W> This configuration can enlarge your initial bundles, it is recommended to use dynamic imports when a module is not immediately needed.
+W> قد يجعل هذا الإعداد initial bundles أكبر، لذلك يُنصح باستخدام dynamic imports عندما لا تحتاج module مباشرة.
 
-### Split Chunks: Example 2
+### Split Chunks: المثال 2
 
-Create a `vendors` chunk, which includes all code from `node_modules` in the whole application.
+أنشئ chunk باسم `vendors` يحتوي على كل الكود القادم من `node_modules` في التطبيق كاملًا.
 
 **webpack.config.js**
 
@@ -685,11 +668,11 @@ export default {
 };
 ```
 
-W> This might result in a large chunk containing all external packages. It is recommended to only include your core frameworks and utilities and dynamically load the rest of the dependencies.
+W> قد ينتج عن هذا chunk كبير يحتوي على كل الحزم الخارجية. يُنصح بتضمين أطر العمل والأدوات الأساسية فقط، وتحميل بقية dependencies بشكل ديناميكي.
 
-### Split Chunks: Example 3
+### Split Chunks: المثال 3
 
-Create a `custom vendor` chunk, which contains certain `node_modules` packages matched by `RegExp`.
+أنشئ chunk باسم `custom vendor` يحتوي على حزم معينة من `node_modules` تطابق `RegExp`.
 
 **webpack.config.js**
 
@@ -710,4 +693,4 @@ export default {
 };
 ```
 
-T> This will result in splitting `react` and `react-dom` into a separate chunk. If you're not sure what packages have been included in a chunk you may refer to [Bundle Analysis](/guides/code-splitting/#bundle-analysis) section for details.
+T> سيؤدي هذا إلى فصل `react` و`react-dom` داخل chunk مستقل. إذا لم تكن متأكدًا من الحزم التي دخلت في chunk، يمكنك الرجوع إلى قسم [Bundle Analysis](/guides/code-splitting/#bundle-analysis) للتفاصيل.

From dc04cfd77c9e7f080d9b49ff190edaa0362e5816 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 14:06:27 +0300
Subject: [PATCH 30/35] fix(format): fixed format, conflicts and lint stages

---
 .github/workflows/dependency-review.yml       |    2 +-
 .github/workflows/deploy.yml                  |    2 +-
 .github/workflows/testing.yml                 |   10 +-
 package-lock.json                             | 1371 ++++++++---------
 package.json                                  |    8 +-
 src/content/awesome-webpack.mdx               |    1 +
 src/content/configuration/experiments.mdx     |   32 +
 src/content/contribute/debugging.mdx          |    1 -
 src/content/contribute/writers-guide.mdx      |   10 +-
 .../plugins/automatic-prefetch-plugin.mdx     |    2 +-
 src/content/plugins/banner-plugin.mdx         |    8 +-
 .../plugins/context-exclusion-plugin.mdx      |    2 +-
 .../plugins/limit-chunk-count-plugin.mdx      |    3 +-
 .../plugins/merge-duplicate-chunks-plugin.mdx |    3 +-
 src/content/plugins/min-chunk-size-plugin.mdx |    3 +-
 src/content/plugins/prefetch-plugin.mdx       |    3 +-
 src/content/plugins/profiling-plugin.mdx      |    3 +-
 src/content/plugins/provide-plugin.mdx        |    6 +-
 src/content/plugins/virtual-url-plugin.mdx    |    4 +-
 src/content/plugins/watch-ignore-plugin.mdx   |    5 +-
 src/server.jsx                                |    1 -
 21 files changed, 722 insertions(+), 758 deletions(-)

diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
index 5dd89706874e..9b18e994bb4c 100644
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout Repository"
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
       - name: "Dependency Review"
         uses: actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294 # v5.0.0
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 073afbad5d48..5e500d913d4f 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -15,7 +15,7 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
index 412015a74907..eb275b4192c2 100644
--- a/.github/workflows/testing.yml
+++ b/.github/workflows/testing.yml
@@ -16,7 +16,7 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -35,7 +35,7 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -56,7 +56,7 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -82,7 +82,7 @@ jobs:
         node-version: [lts/*]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -96,7 +96,7 @@ jobs:
         uses: ./.github/actions/webpack-persistent-cache
 
       - name: Cypress run
-        uses: cypress-io/github-action@dace029018fcdf86e0df89a31bc3cfa5b32570d8 # v7.3.0
+        uses: cypress-io/github-action@948d67d3074f1bbb6379c8bdbb04e95d2f8e593f # v7.4.0
         with:
           browser: chrome
           config-file: cypress.config.js
diff --git a/package-lock.json b/package-lock.json
index e5f6e1777845..43605dcf371a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -384,13 +384,13 @@
       "license": "ISC"
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -399,9 +399,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
-      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -409,21 +409,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -440,14 +440,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -457,27 +457,27 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
-      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz",
+      "integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.3"
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
-      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -487,18 +487,18 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.3.tgz",
-      "integrity": "sha512-RpLYy2sb51oNLjuu1iD3bwBqCBWUzjO0ocp+iaCP/lJtb2CPLcnC2Fftw+4sAzaMELGeWTgExSKADbdo0GFVzA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.7.tgz",
+      "integrity": "sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-member-expression-to-functions": "^7.28.5",
-        "@babel/helper-optimise-call-expression": "^7.27.1",
-        "@babel/helper-replace-supers": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/traverse": "^7.29.0",
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/helper-replace-supers": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -509,13 +509,13 @@
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.28.5.tgz",
-      "integrity": "sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.29.7.tgz",
+      "integrity": "sha512-907Uymvqgg1dwUA+7IGwFAOSYzQOuzPXKNJ1yxzwPffzkYFg2q2eHi1fIOs6sXkG9NbIUMunnUlkYsfRFNvomg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-annotate-as-pure": "^7.29.7",
         "regexpu-core": "^6.3.1",
         "semver": "^6.3.1"
       },
@@ -544,9 +544,9 @@
       }
     },
     "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -554,43 +554,43 @@
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
-      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.29.7.tgz",
+      "integrity": "sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.28.5",
-        "@babel/types": "^7.28.5"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
-      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -600,22 +600,22 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
-      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.29.7.tgz",
+      "integrity": "sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.27.1"
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
-      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -623,15 +623,15 @@
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.29.7.tgz",
+      "integrity": "sha512-16AMiW26DbXWBbr3B8wNozKM0ydMLB892vaOaJW/fPJdnT8vJk5sdkQcU/isqUxyCE0cEoa8wZOcbgDuC4b6Og==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-wrap-function": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-wrap-function": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -641,15 +641,15 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.28.6.tgz",
-      "integrity": "sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.29.7.tgz",
+      "integrity": "sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.28.5",
-        "@babel/helper-optimise-call-expression": "^7.27.1",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -659,23 +659,23 @@
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
-      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.29.7.tgz",
+      "integrity": "sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -683,9 +683,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -693,9 +693,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -703,42 +703,42 @@
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.28.6.tgz",
-      "integrity": "sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.29.7.tgz",
+      "integrity": "sha512-iES0Skag9ERIF68aXadpO6dbXa03mNWK3sEqJaMnLNs/eC3l0lkImdfoy6Y09/SfkpawdAB4RjQ7PVA7TcVGdw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.29.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
-      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
-      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.29.0"
+        "@babel/types": "^7.29.7"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -748,14 +748,14 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.28.5.tgz",
-      "integrity": "sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.29.7.tgz",
+      "integrity": "sha512-j8SrR0zLZrRsC09DlszEx8FpMiwukKffYXMK0d5LmOglO7vGG6sz/BR/20yHqWH+Lnn31JTt2PE3hIWNgM2J6w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.28.5"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -765,13 +765,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
-      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.29.7.tgz",
+      "integrity": "sha512-r8j8escF+U2FUHo0KOhPUdMzUO+jp9fInva6+ACVAF3Y97Ev+5iNZwiqTghmzNeWwDkOPlYuTcfb1vDaoZKmAQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -781,13 +781,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
-      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.29.7.tgz",
+      "integrity": "sha512-GE1TFSiuFeGsCxmYXZl8HwoPrVlwe4rHPFE8weieGKZqnDORK+Ar3vgWMgW+AOxQ6/2TgLSKx9p6W7O4rC6qgQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -797,14 +797,14 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": {
-      "version": "7.29.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array/-/plugin-bugfix-safari-rest-destructuring-rhs-array-7.29.3.tgz",
-      "integrity": "sha512-SRS46DFR4HqzUzCVgi90/xMoL+zeBDBvWdKYXSEzh79kXswNFEglUpMKxR04//dPqwYXWUBJ3mpUd933ru9Kmg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array/-/plugin-bugfix-safari-rest-destructuring-rhs-array-7.29.7.tgz",
+      "integrity": "sha512-oBNVCvnO5tND+xSopWvV8WNGfpTfgP4Zr/YXXSj8zfmcPktp5Ku/aZlsIowgSD4fjmgHn6sGmB9APVsU5zOdhA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -814,15 +814,15 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
-      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.29.7.tgz",
+      "integrity": "sha512-QQt9qKHZ2sg/kivaLr7lnQr8HVrQDdBNSfCsTjiDxRuX/K5ORyKq+Bu8Xr0cDE3Dfkv0cw28Ve0EKyKMvulkOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/plugin-transform-optional-chaining": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -832,14 +832,14 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.28.6.tgz",
-      "integrity": "sha512-a0aBScVTlNaiUe35UtfxAN7A/tehvvG4/ByO6+46VPKTRSlfnAFsgKy0FUh+qAkQrDTmhDkT+IBOKlOoMUxQ0g==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.29.7.tgz",
+      "integrity": "sha512-pn6QacGLgvCcwc+syUhKE/qSjV2D1IHDB84RNxWYSt1mW3K/SCtjinZ2p0cETJxAWBjPy3K/1lHwG5BjjPxNlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -935,13 +935,13 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.28.6.tgz",
-      "integrity": "sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.29.7.tgz",
+      "integrity": "sha512-/An1OCBN93thpBAGyfsK2pcf0jvju1SAtKkL2Ny++B5Sy6sqgzXDQH1cZxWbF96Wuk+bn41MDA9bLd4VVAw6rw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -951,13 +951,13 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.28.6.tgz",
-      "integrity": "sha512-jiLC0ma9XkQT3TKJ9uYvlakm66Pamywo+qwL+oL8HJOvc6TWdZXVfhqJr8CCzbSGUAbDOzlGHJC1U+vRfLQDvw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.29.7.tgz",
+      "integrity": "sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -993,13 +993,13 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.28.6.tgz",
-      "integrity": "sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
+      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1152,13 +1152,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
-      "integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.29.7.tgz",
+      "integrity": "sha512-N7zArUXWzAMzm+/N0uPBeVB3Fam5lMxtUwMmDK5f/IBBS7a7p1qeUoxd/6CckXoxUdgsntq1Dh8xNW06maZbDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1168,15 +1168,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.0.tgz",
-      "integrity": "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.7.tgz",
+      "integrity": "sha512-d98gXZkgswvkyohMBABkhm3GeXhYj8psWfwQ2C7gtfrKGTykQa/iOIi+JJhwMjPlZ6Vm2XN+DCf3Es1EoG4ZLA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-remap-async-to-generator": "^7.27.1",
-        "@babel/traverse": "^7.29.0"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-remap-async-to-generator": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1186,15 +1186,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.28.6.tgz",
-      "integrity": "sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.29.7.tgz",
+      "integrity": "sha512-pcUb2SS+RMo9TWVBwKGI5ShtoG7R+zBsFmCKDa6fe8c+hPr3XJlZgoE5j6i8W7gDjhyvy+85vmYexanvXh3d1w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-remap-async-to-generator": "^7.27.1"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-remap-async-to-generator": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1204,13 +1204,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
-      "integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.29.7.tgz",
+      "integrity": "sha512-cUSmjh72N+rN4PrkFlN1dJwNCwjVp5d38/CQrEsFggkD10UiFlBFgdH3tv5dNsLuHY+3S8db2xCHjhZcv5WgvA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1220,13 +1220,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.6.tgz",
-      "integrity": "sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.29.7.tgz",
+      "integrity": "sha512-ONyr4+AZhKh8yKWInVxU9AXA9EbsyeLcL6V0dJy6M2/62vuvpGm29zzuymbTpdc451GEpDIdAyPLP3r+P61yKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1236,14 +1236,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-properties": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.28.6.tgz",
-      "integrity": "sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.29.7.tgz",
+      "integrity": "sha512-GtcpjFvanPfzNQi3eTitsCqtRRmmqzpy/A+yhTR1HaZo1Ly3EA8ZXxlPyHdR8/IuRMYc3E4wdGBewB2QKQjAaA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1253,14 +1253,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.28.6.tgz",
-      "integrity": "sha512-rfQ++ghVwTWTqQ7w8qyDxL1XGihjBss4CmTgGRCTAC9RIbhVpyp4fOeZtta0Lbf+dTNIVJer6ych2ibHwkZqsQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.29.7.tgz",
+      "integrity": "sha512-kibJgmEdX2iMwsHY2tSZNDgj8PwIlCQz7FK9KuGKO8zsuoUwSEhoNnNVp/emKWrbY4HeO6kkXfdMqRKKKXBm2A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1270,18 +1270,18 @@
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.6.tgz",
-      "integrity": "sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.29.7.tgz",
+      "integrity": "sha512-qV0OGGBVacduzQHE649JyCneOFI/maT+YKsO+K4Yi3xv2wTPNjM/W2o2gdzMwEAZz7fXNTHAe0NcSg30bIN69g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-replace-supers": "^7.28.6",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-replace-supers": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1291,14 +1291,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.28.6.tgz",
-      "integrity": "sha512-bcc3k0ijhHbc2lEfpFHgx7eYw9KNXqOerKWfzbxEHUGKnS3sz9C4CNL9OiFN1297bDNfUiSO7DaLzbvHQQQ1BQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.29.7.tgz",
+      "integrity": "sha512-RK7/IyU5phpuCdBAuig5VkzG/EnbDaui5SQGdU9BFrHdV+mV4cUjLMQ9lJDjLNtWHsqtiefpGZUXQP2BiTYMsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/template": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/template": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1308,14 +1308,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.5.tgz",
-      "integrity": "sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.29.7.tgz",
+      "integrity": "sha512-iPX8aD6H9zV5s7ZsqTdNocPN/MGQ5sSMnElKrktxjJRMnB2jN/1p2+R7GkfD6CAYoVFqy5A4XnSIUeGgJzIWpg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.28.5"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1325,14 +1325,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.28.6.tgz",
-      "integrity": "sha512-SljjowuNKB7q5Oayv4FoPzeB74g3QgLt8IVJw9ADvWy3QnUb/01aw8I4AVv8wYnPvQz2GDDZ/g3GhcNyDBI4Bg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.29.7.tgz",
+      "integrity": "sha512-3qc18hsD2RdZiyJNDNc7HQpv6xbncwh8FYtxNFFzclSyh/trPD9KkVR9BDECUjDLvb7yJVF15GfYUuC+LMkkiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1342,13 +1342,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
-      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.29.7.tgz",
+      "integrity": "sha512-6IvRRriEMqnBwD6chtxdLpMYCHWEzN+oL5cyQtjykya19UgzbmKhxmhZgKC/LHxS2nYr9Q/qYPZ5Lr6jOL9+yQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1358,14 +1358,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.0.tgz",
-      "integrity": "sha512-zBPcW2lFGxdiD8PUnPwJjag2J9otbcLQzvbiOzDxpYXyCuYX9agOwMPGn1prVH0a4qzhCKu24rlH4c1f7yA8rw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.7.tgz",
+      "integrity": "sha512-2wiIyo2BjtgU7HufSeDnL9L2O7zr8jmhFKuSr65VpRkUiRKRNpb0mdlk56+XPPKoIrfHqzbMuglDvZun0RISsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1375,13 +1375,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
-      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.29.7.tgz",
+      "integrity": "sha512-giOlEm/EFjfjr+te9NsdjkUo2v4f8rS/SXPumRVHAtbNcyNlvtREkU1dZzaIDclNpnaVhlCqRdFKhJBjBikzLg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1391,14 +1391,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-explicit-resource-management": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.6.tgz",
-      "integrity": "sha512-Iao5Konzx2b6g7EPqTy40UZbcdXE126tTxVFr/nAIj+WItNxjKSYTEw3RC+A2/ZetmdJsgueL1KhaMCQHkLPIg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.29.7.tgz",
+      "integrity": "sha512-Rstj7coNz8sE+7Ju7ihpHLI564lsK5pUpNNlvptCIC/16E/S5hbl6n3kESPKdNRmqEWlpn5xpS5Q2dvXBsySLw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/plugin-transform-destructuring": "^7.28.5"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/plugin-transform-destructuring": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1408,13 +1408,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.28.6.tgz",
-      "integrity": "sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.29.7.tgz",
+      "integrity": "sha512-zFpMOTLZBdW5LfObqcSbL6kefg4R4eLdmvS0wbN9M6D5Mym/sKm9toOoWyVOa+xDjvCnuWcHls2YonXwHvH3CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1424,13 +1424,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
-      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.29.7.tgz",
+      "integrity": "sha512-24B2nOy2TeJSMheqwPD4DDQOV/elLSIlKxjZt4i05H5AgdPdWR3n18HnNrcJ+j76WJd9gbwb9jPjNYUy6RautA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1440,14 +1440,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
-      "integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.29.7.tgz",
+      "integrity": "sha512-zeSIHh0+E1Um1WJRXCFlHQYu2ieJNdivLLjlBEp+dIBu3S51n+SZZmIXjxnItw6pz56Cn+KvK68BIBVsxq2JiQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1457,15 +1457,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
-      "integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.29.7.tgz",
+      "integrity": "sha512-otRWaHXE6fbAGkePvaj/kvs3HsqXfPhlnzwSOlnFgbqCPMd975dW+4wZ00WFBt+/YlBGcJwNrARQTOJOb4ZrIg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1475,13 +1475,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.28.6.tgz",
-      "integrity": "sha512-Nr+hEN+0geQkzhbdgQVPoqr47lZbm+5fCUmO70722xJZd0Mvb59+33QLImGj6F+DkK3xgDi1YVysP8whD6FQAw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.29.7.tgz",
+      "integrity": "sha512-RRnE2+eon1rJAq8MnoF1b5kTpY1vU88twHcvcKMrsqP/jxIRqDVs9iJB5fqPuqyeFAW0wJo4MlUIPpQCq/aRsg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1491,13 +1491,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
-      "integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.29.7.tgz",
+      "integrity": "sha512-DZ/oLP21ZuWx1vKqnoNv6/tvEK48AQOBRai40CX9dTjGluvT/YZCyY3rryDtyUqCEoyNroy5KKPwX2iQCiRvyw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1507,13 +1507,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.28.6.tgz",
-      "integrity": "sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.29.7.tgz",
+      "integrity": "sha512-A0H91hh6W8MFRkp5TqJmMr39jzGD1A1E1Ysiv2O06Sfbhkapm+XyIzxWCEh5kqwOZ1/8QZ0dY3SeQ7XBqfJd5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1523,13 +1523,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
-      "integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.29.7.tgz",
+      "integrity": "sha512-hl1kwFZCCiDyfH25Xmco9jTrkPgnS9pmOzSG7W5I4SaGbLeqKv417hcU2RKmaxoPEgsoJh7ZPOrnPGq99bHoUg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1539,14 +1539,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
-      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.29.7.tgz",
+      "integrity": "sha512-fxtQoH3m5ywUSIfaH0FGCzWu4McsYon5bD3K4XnskC7f+OyQMj7rsOMi4NvvmJ83WwBAg4UCe+ov4VZlqEvyew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1556,14 +1556,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.28.6.tgz",
-      "integrity": "sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.29.7.tgz",
+      "integrity": "sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1573,16 +1573,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.29.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.4.tgz",
-      "integrity": "sha512-N7QmZ0xRZfjHOfZeQLJjwgX2zS9pdGHSVl/cjSGlo4dXMqvurfxXDMKY4RqEKzPozV78VMcd0lxyG13mlbKc4w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.7.tgz",
+      "integrity": "sha512-TM2ZcQLoG2/y4HODiStCo10DibYhWhGWAwVv+EQKmG/7GFl0N+AAmUiXOMKM+aiJ9XBJ9AHVZBvTzMnJ2sM3cQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-validator-identifier": "^7.28.5",
-        "@babel/traverse": "^7.29.0"
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1592,14 +1592,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
-      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.29.7.tgz",
+      "integrity": "sha512-B4UkaTK3QpgCwJnrxKfMPKdo92CN7OKXAlpAAnM3UPu0Q0lCCk57ylA9AJbRy2v8dDKOPAAWcoR6CMyeoHwRCA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1609,14 +1609,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.0.tgz",
-      "integrity": "sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.7.tgz",
+      "integrity": "sha512-vuFoLwr4qnv2xbZ16SQd6uPcH5FNrLHhk/Jzo++0XJFcaDsr4gjJVg6j398oMHiC+83k/GiBzviwF5KBJkPUtQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1626,13 +1626,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
-      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.29.7.tgz",
+      "integrity": "sha512-fEo41GmsOUhOBlw8ioo6zvjX5Xc2Lqkzlyfqbpsk3eB6TReV18uhxZ0esfEokVbY2+PVJAQHNKxER6lGrzNd3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1642,13 +1642,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.28.6.tgz",
-      "integrity": "sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.29.7.tgz",
+      "integrity": "sha512-idmp1dFaekP9GbcMvG24Kvw2BfhFZjHnNJCkV4WuIY4PskJzwI3f1N5OdgYke38T7rftO6ERulFRn2cFeZwRkg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1658,13 +1658,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.28.6.tgz",
-      "integrity": "sha512-SJR8hPynj8outz+SlStQSwvziMN4+Bq99it4tMIf5/Caq+3iOc0JtKyse8puvyXkk3eFRIA5ID/XfunGgO5i6w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.29.7.tgz",
+      "integrity": "sha512-zR7fv/z14OjgHl4AgRtkDBvBMhIzCxqV/qN/2BCRC7LjFwvuzjYe7gDWxC4Wl/SNsLM6SE1IWvRPYMgSJaUvNw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1674,17 +1674,17 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.6.tgz",
-      "integrity": "sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.29.7.tgz",
+      "integrity": "sha512-Ld98jn4c0smUywL57m7SgsHq3OpThOa6LqZJif3G6jYOovPleoFhVrBJ1WegRApSFB2wu4+RelAj9AC9G08Z4A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/plugin-transform-destructuring": "^7.28.5",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/traverse": "^7.28.6"
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/plugin-transform-destructuring": "^7.29.7",
+        "@babel/plugin-transform-parameters": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1694,14 +1694,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
-      "integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.29.7.tgz",
+      "integrity": "sha512-Ea/diGcw0twB5IlZPO5sgET6fJsLJqPABqTuFWIR+iMPGPZJkATEIWx0wa+aEQ5UY1CBQyP/gkAiLEqn1vBiQA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-replace-supers": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-replace-supers": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1711,13 +1711,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.28.6.tgz",
-      "integrity": "sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.29.7.tgz",
+      "integrity": "sha512-sLsyndxK2VwX6yNUOakMb7Sh553ZTe/vVM1XJ+9Z5aW1ytsc8xOIwmyk05NNjN60vkc5/KqoTH6hB4V41LJhng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1727,14 +1727,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.28.6.tgz",
-      "integrity": "sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.29.7.tgz",
+      "integrity": "sha512-6GM1dhvK3gNODkXcEcMCOLEDCLSoZ/sBbro2Ax8HURyasQ4NshagQixkRFdh5niI6E4gmA/jYI/4aT7rRos3ZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1744,13 +1744,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.27.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
-      "integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.29.7.tgz",
+      "integrity": "sha512-ZDOBqV/qLYJI0YElr8DcENEyARsFQeESqWXH6gZlghYXuPPjvweuDhP4VyEi4BlUBlLRFZVjxoZDMjxhLW766g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1760,14 +1760,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-methods": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.28.6.tgz",
-      "integrity": "sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.29.7.tgz",
+      "integrity": "sha512-/6Rz4DK1ETDEM/bWHsPHcaEe7ZaT1EqSXjtSP/L0DijOYuaUhiRiOKcwpZ8P7zR4xXEHc2ITdiCgBm9Tpyv9ug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1777,15 +1777,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.28.6.tgz",
-      "integrity": "sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.29.7.tgz",
+      "integrity": "sha512-+BNo06dnrzdNNqCm1X6YUaVv0DKk8Q+JYcoZfOkLhYWNCXzlwTSRq8zGWayT1csjcpNXV9CQTBRRbmTLZac5cA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-create-class-features-plugin": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1795,13 +1795,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
-      "integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.29.7.tgz",
+      "integrity": "sha512-bOMRLQuI0A5ZqHq3OWJ89/rXpJ/NJrbVhXiP4zwPGMs6kpcVsuTUNjwoE30K0Qm3mf48a/TnRYYD6vPNqcg6jA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1827,13 +1827,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.28.0.tgz",
-      "integrity": "sha512-D6Eujc2zMxKjfa4Zxl4GHMsmhKKZ9VpcqIchJLvwTxad9zWIYulwYItBovpDOoNLISpcZSXoDJ5gaGbQUDqViA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.29.7.tgz",
+      "integrity": "sha512-+1wdDMGNb4UPeY3Q4L5yLiYe6TXPXubs4NjrgRFw13hPRLJfEMw2Q5OXkee6/IfdqePIeW4Jjwe3aBh7SdKz4Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1843,17 +1843,17 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.28.6.tgz",
-      "integrity": "sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.29.7.tgz",
+      "integrity": "sha512-WsZulLVBUHXVj2cUcPVx6UE21TpalB6bHbSFErKT0Ib++ax24jjXe73FqlWvdylFOjiuPHYi6VCcgRad1ItN+A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-module-imports": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/plugin-syntax-jsx": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/plugin-syntax-jsx": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1863,13 +1863,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-development": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.27.1.tgz",
-      "integrity": "sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.29.7.tgz",
+      "integrity": "sha512-Xfy3UVMF04+ypnFbkhvfqtmvwfe92qwQdbGZVonhE+6v35GzlofmOnA1szaZqzb9xYWr0nl1e5EMmzi0DNON1g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.27.1"
+        "@babel/plugin-transform-react-jsx": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1879,14 +1879,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.27.1.tgz",
-      "integrity": "sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.29.7.tgz",
+      "integrity": "sha512-H5E+HBgDpr6Q5t+Aj11tL7XkIui1jhbIoArVQnqjgXo5/3YxkN7ZEBcWF4RQlB0T4rrxJQbXS6kiFV6B7XTqUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1896,13 +1896,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.0.tgz",
-      "integrity": "sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.7.tgz",
+      "integrity": "sha512-rNNFV0DBAJp988xW2DOntfDoYn1eR8GGF5AT5vYc+rjyfaQkM242c9tZUHHPe7KYaiJizXPWhQTzzdbXySyhBw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1912,14 +1912,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-regexp-modifiers": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.28.6.tgz",
-      "integrity": "sha512-QGWAepm9qxpaIs7UM9FvUSnCGlb8Ua1RhyM4/veAxLwt3gMat/LSGrZixyuj4I6+Kn9iwvqCyPTtbdxanYoWYg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.29.7.tgz",
+      "integrity": "sha512-mB5Fs0VWrJ42ZCmc8114v60qetdaUVNkj9PmSZRmanCZM3S9hm0CFRLjRmYIsuXav14l2jvZ+4T8iiCGnhj3nQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1929,13 +1929,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
-      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.29.7.tgz",
+      "integrity": "sha512-5+YhdpVgmfSmwZyLMftfaiffLRMHjzIRHFHHLdibcSyJm2pasMrKHrO3Ptrt2DRshjvpgjEJJ1zVW14WPq/6QA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1945,13 +1945,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
-      "integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.29.7.tgz",
+      "integrity": "sha512-I+WYbGBAiCn7nA6xBrlgPH+MB7HWb4u8pv5S0Pv7OtwNvIFvCCb24YlttKEeUFVurfBCEaOTnuhlqsb7f0Z5Dg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1961,14 +1961,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.28.6.tgz",
-      "integrity": "sha512-9U4QObUC0FtJl05AsUcodau/RWDytrU6uKgkxu09mLR9HLDAtUMoPuuskm5huQsoktmsYpI+bGmq+iapDcriKA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.29.7.tgz",
+      "integrity": "sha512-/u5K1QWada7tbYNqTjMh96718g9NTwh9tfPJMsSmVsQwGT447FskV+KcfeXkXq2GWki4EM/MuTdmBec+hOuVTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1978,13 +1978,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
-      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.29.7.tgz",
+      "integrity": "sha512-BCHzNYJGe9l7EpwwDBN/ztlL2NYFFq8hp9ddjtUEM9f2O7S7kKV/lL6Fwo7IF7NSkYhPK2vO+86nIGltA90MsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1994,13 +1994,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
-      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.29.7.tgz",
+      "integrity": "sha512-NCSEJ4sLFU2gqAub45HYh4fus2yQ36rr6ei6vpU7NdoJqCpxvEG8E6eJpscGyXP3VHD2Ny+fSXr04k1hoUrFqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2010,13 +2010,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
-      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.29.7.tgz",
+      "integrity": "sha512-223mNGoTkBiTEWFoK+Q6Go3tueMRclO8vxxxxquNCYuNI4jWOofFKJRRDu6SDrB8Sgo1UEGW9T4GAQ8ZyRso1A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2046,13 +2046,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
-      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.29.7.tgz",
+      "integrity": "sha512-jCfXxSjf94lf4E0hKE0AByxF6F3/pVFqRdUUNkDJhsY0m1ZKjnN6ZYyMeHNpzflxb/0q5b7t3p+BE+SLF1WOtA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2062,14 +2062,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.28.6.tgz",
-      "integrity": "sha512-4Wlbdl/sIZjzi/8St0evF0gEZrgOswVO6aOzqxh1kDZOl9WmLrHq2HtGhnOJZmHZYKP8WZ1MDLCt5DAWwRo57A==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.29.7.tgz",
+      "integrity": "sha512-OgZ+zoAJgZLUCunsTRQ5LAjOywDv5zzZ2/hQ5aMw1pGXyY2rtE8/chXYUmu3AlVHKpm10KEdG9aMwbI/K76ZGw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2079,14 +2079,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
-      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.29.7.tgz",
+      "integrity": "sha512-7D/x/23/d/3VqZ0QA+LGbZMlGwZjztBygSWWWsfTPoQ1oQ6Q1P6Mr3d0kk42XabyUVw+fha3LqdRsFqeKqvCyA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2096,14 +2096,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.28.6.tgz",
-      "integrity": "sha512-/wHc/paTUmsDYN7SZkpWxogTOBNnlx7nBQYfy6JJlCT7G3mVhltk3e++N7zV0XfgGsrqBxd4rJQt9H16I21Y1Q==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.29.7.tgz",
+      "integrity": "sha512-BLOhLht9DOJwIxlmp91wHvkXv1lguuHS3/FwUO8HL1H0u8s4hR1gASVFyilu9iGtcTRYqjTZmlsFFeQletntEg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
-        "@babel/helper-plugin-utils": "^7.28.6"
+        "@babel/helper-create-regexp-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2113,77 +2113,77 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.29.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.5.tgz",
-      "integrity": "sha512-/69t2aEzGKHD76DyLbHysF/QH2LJOB8iFnYO37unDTKBTubzcMRv0f3H5EiN1Q6ajOd/eB7dAInF0qdFVS06kA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.29.3",
-        "@babel/helper-compilation-targets": "^7.28.6",
-        "@babel/helper-plugin-utils": "^7.28.6",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5",
-        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
-        "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "^7.29.3",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.6",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.7.tgz",
+      "integrity": "sha512-GYzX36n1nsciIb0uyH0GHwxwtNwPQIcpxSeiVLDtG/B7jB5xXgchnmL1f/jCX5o+pwnaDBtO60ONSJhEBJfxYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.29.7",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.29.7",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.29.7",
+        "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "^7.29.7",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.29.7",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.29.7",
         "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-import-assertions": "^7.28.6",
-        "@babel/plugin-syntax-import-attributes": "^7.28.6",
+        "@babel/plugin-syntax-import-assertions": "^7.29.7",
+        "@babel/plugin-syntax-import-attributes": "^7.29.7",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.27.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.29.0",
-        "@babel/plugin-transform-async-to-generator": "^7.28.6",
-        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
-        "@babel/plugin-transform-block-scoping": "^7.28.6",
-        "@babel/plugin-transform-class-properties": "^7.28.6",
-        "@babel/plugin-transform-class-static-block": "^7.28.6",
-        "@babel/plugin-transform-classes": "^7.28.6",
-        "@babel/plugin-transform-computed-properties": "^7.28.6",
-        "@babel/plugin-transform-destructuring": "^7.28.5",
-        "@babel/plugin-transform-dotall-regex": "^7.28.6",
-        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0",
-        "@babel/plugin-transform-dynamic-import": "^7.27.1",
-        "@babel/plugin-transform-explicit-resource-management": "^7.28.6",
-        "@babel/plugin-transform-exponentiation-operator": "^7.28.6",
-        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
-        "@babel/plugin-transform-for-of": "^7.27.1",
-        "@babel/plugin-transform-function-name": "^7.27.1",
-        "@babel/plugin-transform-json-strings": "^7.28.6",
-        "@babel/plugin-transform-literals": "^7.27.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.28.6",
-        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
-        "@babel/plugin-transform-modules-amd": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.28.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.29.4",
-        "@babel/plugin-transform-modules-umd": "^7.27.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0",
-        "@babel/plugin-transform-new-target": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
-        "@babel/plugin-transform-numeric-separator": "^7.28.6",
-        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
-        "@babel/plugin-transform-object-super": "^7.27.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.28.6",
-        "@babel/plugin-transform-optional-chaining": "^7.28.6",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/plugin-transform-private-methods": "^7.28.6",
-        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
-        "@babel/plugin-transform-property-literals": "^7.27.1",
-        "@babel/plugin-transform-regenerator": "^7.29.0",
-        "@babel/plugin-transform-regexp-modifiers": "^7.28.6",
-        "@babel/plugin-transform-reserved-words": "^7.27.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
-        "@babel/plugin-transform-spread": "^7.28.6",
-        "@babel/plugin-transform-sticky-regex": "^7.27.1",
-        "@babel/plugin-transform-template-literals": "^7.27.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
-        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.28.6",
-        "@babel/plugin-transform-unicode-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.28.6",
+        "@babel/plugin-transform-arrow-functions": "^7.29.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.29.7",
+        "@babel/plugin-transform-async-to-generator": "^7.29.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.29.7",
+        "@babel/plugin-transform-block-scoping": "^7.29.7",
+        "@babel/plugin-transform-class-properties": "^7.29.7",
+        "@babel/plugin-transform-class-static-block": "^7.29.7",
+        "@babel/plugin-transform-classes": "^7.29.7",
+        "@babel/plugin-transform-computed-properties": "^7.29.7",
+        "@babel/plugin-transform-destructuring": "^7.29.7",
+        "@babel/plugin-transform-dotall-regex": "^7.29.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.29.7",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.7",
+        "@babel/plugin-transform-dynamic-import": "^7.29.7",
+        "@babel/plugin-transform-explicit-resource-management": "^7.29.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.29.7",
+        "@babel/plugin-transform-export-namespace-from": "^7.29.7",
+        "@babel/plugin-transform-for-of": "^7.29.7",
+        "@babel/plugin-transform-function-name": "^7.29.7",
+        "@babel/plugin-transform-json-strings": "^7.29.7",
+        "@babel/plugin-transform-literals": "^7.29.7",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.29.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.29.7",
+        "@babel/plugin-transform-modules-amd": "^7.29.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.29.7",
+        "@babel/plugin-transform-modules-systemjs": "^7.29.7",
+        "@babel/plugin-transform-modules-umd": "^7.29.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.7",
+        "@babel/plugin-transform-new-target": "^7.29.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.29.7",
+        "@babel/plugin-transform-numeric-separator": "^7.29.7",
+        "@babel/plugin-transform-object-rest-spread": "^7.29.7",
+        "@babel/plugin-transform-object-super": "^7.29.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.29.7",
+        "@babel/plugin-transform-optional-chaining": "^7.29.7",
+        "@babel/plugin-transform-parameters": "^7.29.7",
+        "@babel/plugin-transform-private-methods": "^7.29.7",
+        "@babel/plugin-transform-private-property-in-object": "^7.29.7",
+        "@babel/plugin-transform-property-literals": "^7.29.7",
+        "@babel/plugin-transform-regenerator": "^7.29.7",
+        "@babel/plugin-transform-regexp-modifiers": "^7.29.7",
+        "@babel/plugin-transform-reserved-words": "^7.29.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.29.7",
+        "@babel/plugin-transform-spread": "^7.29.7",
+        "@babel/plugin-transform-sticky-regex": "^7.29.7",
+        "@babel/plugin-transform-template-literals": "^7.29.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.29.7",
+        "@babel/plugin-transform-unicode-escapes": "^7.29.7",
+        "@babel/plugin-transform-unicode-property-regex": "^7.29.7",
+        "@babel/plugin-transform-unicode-regex": "^7.29.7",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.29.7",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
         "babel-plugin-polyfill-corejs2": "^0.4.15",
         "babel-plugin-polyfill-corejs3": "^0.14.0",
@@ -2214,18 +2214,18 @@
       }
     },
     "node_modules/@babel/preset-react": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.28.5.tgz",
-      "integrity": "sha512-Z3J8vhRq7CeLjdC58jLv4lnZ5RKFUJWqH5emvxmv9Hv3BD1T9R/Im713R4MTKwvFaV74ejZ3sM01LyEKk4ugNQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.29.7.tgz",
+      "integrity": "sha512-C+PV1TFUPTmBQGoPBL8j2QmLpZ117YTCwxIZeJOM96GbYMFSc7/pOXU5lVykwnZxyTqQxRsvoRk6f2FktZgGHA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-transform-react-display-name": "^7.28.0",
-        "@babel/plugin-transform-react-jsx": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-development": "^7.27.1",
-        "@babel/plugin-transform-react-pure-annotations": "^7.27.1"
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "@babel/plugin-transform-react-display-name": "^7.29.7",
+        "@babel/plugin-transform-react-jsx": "^7.29.7",
+        "@babel/plugin-transform-react-jsx-development": "^7.29.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2264,33 +2264,33 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -2298,14 +2298,14 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -4385,9 +4385,9 @@
       }
     },
     "node_modules/@npmcli/config/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -4446,9 +4446,9 @@
       "license": "ISC"
     },
     "node_modules/@npmcli/git/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -4491,9 +4491,9 @@
       }
     },
     "node_modules/@npmcli/map-workspaces/node_modules/brace-expansion": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4578,9 +4578,9 @@
       }
     },
     "node_modules/@npmcli/package-json/node_modules/brace-expansion": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4681,9 +4681,9 @@
       }
     },
     "node_modules/@npmcli/package-json/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -5247,27 +5247,27 @@
       "license": "MIT"
     },
     "node_modules/@react-spring/animated": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
-      "integrity": "sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.1.0.tgz",
+      "integrity": "sha512-dvGVSfNYhbkzTAnyB1S1940ZiKp6/Ey+b2vQc70dJ5k6gzH/GdlfeDzCh65V94b6OPqF7Xl4VUICVUQpc07iUg==",
       "license": "MIT",
       "dependencies": {
-        "@react-spring/shared": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
+        "@react-spring/shared": "~10.1.0",
+        "@react-spring/types": "~10.1.0"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/@react-spring/core": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.3.tgz",
-      "integrity": "sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-XUG3UCCCxay6lYjBU2KOKzEgC1sx/w44ouB5gRh2Ex6rVJOdPcGVg7JJUIOAQo7uhKGfQdCQU4qUZaQnmInZPQ==",
       "license": "MIT",
       "dependencies": {
-        "@react-spring/animated": "~10.0.3",
-        "@react-spring/shared": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
+        "@react-spring/animated": "~10.1.0",
+        "@react-spring/shared": "~10.1.0",
+        "@react-spring/types": "~10.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -5278,40 +5278,41 @@
       }
     },
     "node_modules/@react-spring/rafz": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.3.tgz",
-      "integrity": "sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.1.0.tgz",
+      "integrity": "sha512-e/LRnNmvmg8Agl4j3MGcjHuSTSBcCrxr3xeoWdodxpLWeTHY1pHl8PJDOCEJ2Pj6BMdEBaWFRAX7uxRo1FLzCg==",
       "license": "MIT"
     },
     "node_modules/@react-spring/shared": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.3.tgz",
-      "integrity": "sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.1.0.tgz",
+      "integrity": "sha512-ogIUujWxdwcsQ2Vp2hZs+KehvH8tKeWGHsFb1eRBYoePzhKS541Qg1JfFlQ7ursBUwwPDBQ5Wpwn+Cwx6WV1PQ==",
       "license": "MIT",
       "dependencies": {
-        "@react-spring/rafz": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
+        "@react-spring/rafz": "~10.1.0",
+        "@react-spring/types": "~10.1.0"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/@react-spring/types": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.3.tgz",
-      "integrity": "sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.1.0.tgz",
+      "integrity": "sha512-RkJAlkAZ5yZSRBMOSidamioBHLjf8wGKbtr3pZ5iKoHFNQuNM2k6DqJDIEUcNQlWRZXny6Eqys2c9NdugdbdyQ==",
       "license": "MIT"
     },
     "node_modules/@react-spring/web": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
-      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.1.0.tgz",
+      "integrity": "sha512-mIj/lJ+1eI4tLSkIloaSNjmuriTDZY9bbQ/GFGcbVGfOKzWb5JOMMKiuHACh8J3m0+se3KqcWdg/JoALVloE7g==",
       "license": "MIT",
       "dependencies": {
-        "@react-spring/animated": "~10.0.3",
-        "@react-spring/core": "~10.0.3",
-        "@react-spring/shared": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
+        "@react-spring/animated": "~10.1.0",
+        "@react-spring/core": "~10.1.0",
+        "@react-spring/shared": "~10.1.0",
+        "@react-spring/types": "~10.1.0",
+        "csstype": "^3.2.3"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -6697,28 +6698,6 @@
         "@types/ms": "*"
       }
     },
-    "node_modules/@types/eslint": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
-      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -7098,17 +7077,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/yauzl": {
-      "version": "2.10.3",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
-      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.59.4",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.4.tgz",
@@ -11548,9 +11516,9 @@
       "license": "MIT"
     },
     "node_modules/cypress": {
-      "version": "15.15.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.15.0.tgz",
-      "integrity": "sha512-N8qBv3AUYn6xfIG73O5O58kTClUBSZ7a3C08IQFkSGTUdEauJ3BqwTFb/f9KPZgadftoZjllC0XSwD7xNNolbA==",
+      "version": "15.16.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.16.0.tgz",
+      "integrity": "sha512-fy0M0c9xDLEp4v9y7LLKFeAQhIdDsobxDSKpD3JcZpqQefjy9TSzEyVV3HA0zu7hUi0bGHlSYlI7ASub8wgR9A==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -11575,7 +11543,6 @@
         "eventemitter2": "6.4.7",
         "execa": "4.1.0",
         "executable": "^4.1.1",
-        "extract-zip": "2.0.1",
         "fs-extra": "^9.1.0",
         "hasha": "5.2.2",
         "is-installed-globally": "~0.4.0",
@@ -11594,7 +11561,7 @@
         "tree-kill": "1.2.2",
         "tslib": "1.14.1",
         "untildify": "^4.0.0",
-        "yauzl": "^2.10.0"
+        "yauzl": "^3.3.1"
       },
       "bin": {
         "cypress": "bin/cypress"
@@ -12299,9 +12266,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.21.5",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.5.tgz",
-      "integrity": "sha512-mLCNbrQli11K1ySUmuNt4ZUB3OpGIDq4q2vTBTf5cL2lpsRjI9QKqSD0ndjW8FyvcW/Jj46gMe9syyHAsvMa/A==",
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.0.tgz",
+      "integrity": "sha512-xYcDWrpELkFzz9SpZ3PlI6Eu6eD93Yf0WLDRxikGhWJ3MAir2SNZTIVCVZqZ/NUyx8AdMc2gT9C0gPiw18kG+A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13001,15 +12968,15 @@
       }
     },
     "node_modules/eslint-mdx": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-mdx/-/eslint-mdx-3.7.0.tgz",
-      "integrity": "sha512-QpPdJ6EeFthHuIrfgnWneZgwwFNOLFj/nf2jg/tOTBoiUnqNTxUUpTGAn0ZFHYEh5htVVoe5kjvD02oKtxZGeA==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-mdx/-/eslint-mdx-3.8.1.tgz",
+      "integrity": "sha512-hnsqWwMOHqUANwxWEGt8XbwABPEr5sTOolAzqyUDFdlERpqjFE/icylb+mJl60VICL+kLbbvXWbnFLWZdTqJ2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "espree": "^9.6.1 || ^10.4.0",
+        "espree": "^9.6.1 || ^10.4.0 || ^11.2.0",
         "estree-util-visit": "^2.0.0",
         "remark-mdx": "^3.1.0",
         "remark-parse": "^11.0.0",
@@ -13254,13 +13221,13 @@
       }
     },
     "node_modules/eslint-plugin-mdx": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-mdx/-/eslint-plugin-mdx-3.7.0.tgz",
-      "integrity": "sha512-JXaaQPnKqyti/QSOSQDThLV1EemHm/Fe2l/nMKH0vmhvmABtN/yV/9+GtKgh8UTZwrwuTfQq1HW5eR8HXneNLA==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-mdx/-/eslint-plugin-mdx-3.8.1.tgz",
+      "integrity": "sha512-4OLgotfBxUDc1f6ihXSagT/1+JCCUABA/2r6Kzl6gqFftg4dCV0wBfdwFo6X6UO/FzTHr3g6mVt+6prRXffc/Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-mdx": "^3.7.0",
+        "eslint-mdx": "^3.8.1",
         "mdast-util-from-markdown": "^2.0.2",
         "mdast-util-mdx": "^3.0.0",
         "micromark-extension-mdxjs": "^3.0.0",
@@ -13954,27 +13921,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/extract-zip": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
-      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "debug": "^4.1.1",
-        "get-stream": "^5.1.0",
-        "yauzl": "^2.10.0"
-      },
-      "bin": {
-        "extract-zip": "cli.js"
-      },
-      "engines": {
-        "node": ">= 10.17.0"
-      },
-      "optionalDependencies": {
-        "@types/yauzl": "^2.9.1"
-      }
-    },
     "node_modules/extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -14051,16 +13997,6 @@
       ],
       "license": "BSD-3-Clause"
     },
-    "node_modules/fastest-levenshtein": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
-      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.9.1"
-      }
-    },
     "node_modules/fastest-stable-stringify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
@@ -14104,16 +14040,6 @@
         "bser": "2.1.1"
       }
     },
-    "node_modules/fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pend": "~1.2.0"
-      }
-    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -19035,16 +18961,16 @@
       }
     },
     "node_modules/lint-staged": {
-      "version": "17.0.5",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-17.0.5.tgz",
-      "integrity": "sha512-d12yC+/e8RhBjZtaxZn71FyrgU/P5e+uAPifhCLwdosQZP/zamSdKRWDC30ocVIbzDKiFG1McHc/LUgB92GIPw==",
+      "version": "17.0.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-17.0.7.tgz",
+      "integrity": "sha512-JrSobt+tW3rH8IOMi8tDZd3foorM5yPEkLD/V2NxobgHrFfHWGee4MOLVuZeScgxftEwbHrPHIFA/ZL+nUJeuA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "listr2": "^10.2.1",
         "picomatch": "^4.0.4",
         "string-argv": "^0.3.2",
-        "tinyexec": "^1.1.2"
+        "tinyexec": "^1.2.4"
       },
       "bin": {
         "lint-staged": "bin/lint-staged.js"
@@ -19056,7 +18982,7 @@
         "url": "https://opencollective.com/lint-staged"
       },
       "optionalDependencies": {
-        "yaml": "^2.8.4"
+        "yaml": "^2.9.0"
       }
     },
     "node_modules/lint-staged/node_modules/ansi-styles": {
@@ -22052,9 +21978,9 @@
       }
     },
     "node_modules/npm-install-checks/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -22111,9 +22037,9 @@
       "license": "ISC"
     },
     "node_modules/npm-package-arg/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -22140,9 +22066,9 @@
       }
     },
     "node_modules/npm-pick-manifest/node_modules/semver": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
-      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+      "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -24406,24 +24332,24 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz",
-      "integrity": "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.6.tgz",
-      "integrity": "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.2.6"
+        "react": "^19.2.7"
       }
     },
     "node_modules/react-fast-compare": {
@@ -24480,9 +24406,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.15.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.15.1.tgz",
-      "integrity": "sha512-R8rl9HhgikFYoPJymnUtPXWbnDb3oget6lQnfIoupbt61aT9aOhRkDsY2XRhZRyX1Z/8a5sL74fXmFNm3NRK5A==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.16.0.tgz",
+      "integrity": "sha512-wArC8lVyJb3+jM9OpDyW6hLCizACWkvQR/sSGqSs+o5uEXEtGlqdZ4v8hENR3Jad6i+LRkK93q/+bQAcvl6V1A==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -24502,12 +24428,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.15.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.15.1.tgz",
-      "integrity": "sha512-AzF62gjY6U9rkMq4RfP/r2EVtQ7DMfNMjyOp/flLTCrtRylLiK4wT4pSq6O8rOXZ2eXdZYJPEYe+ifomiv+Igg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.16.0.tgz",
+      "integrity": "sha512-kMUAbimWB5FVbF4Bce4bJsiKJWLIUHq/mEG8+CFDnCSgltptBiG5nguducmsJeGKytlCvQud9Qhzpn49iduTlA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.15.1"
+        "react-router": "7.16.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -28374,9 +28300,9 @@
       }
     },
     "node_modules/tinyexec": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.2.tgz",
-      "integrity": "sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -28401,9 +28327,9 @@
       }
     },
     "node_modules/tmp": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
-      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -28632,6 +28558,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -28952,9 +28891,9 @@
       }
     },
     "node_modules/unified-engine/node_modules/brace-expansion": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
-      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -29059,19 +28998,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/unified-engine/node_modules/type-fest": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
-      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
-      "dev": true,
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/unified-engine/node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -29733,13 +29659,12 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.106.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.106.2.tgz",
-      "integrity": "sha512-wGN3qcrBQIFmQ/c0AiOAQBvrZ5lmY8vbbMv4Mxfgzqd/B6+9pXtLo73WuS1dSGXM5QYY3hZnIbvx+K1xxe6FyA==",
+      "version": "5.107.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.107.2.tgz",
+      "integrity": "sha512-v7RhXaJbpMlV0D7hC7lb2EbnxkoeUqf9qhKr6lozx3Q48pmFrqqNRmZFUEGmi7pSwm6fCQ2H1IjvCkHqdpVdjQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
         "@types/json-schema": "^7.0.15",
         "@webassemblyjs/ast": "^1.14.1",
@@ -29749,20 +29674,20 @@
         "acorn-import-phases": "^1.0.3",
         "browserslist": "^4.28.1",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.20.0",
-        "es-module-lexer": "^2.0.0",
+        "enhanced-resolve": "^5.22.0",
+        "es-module-lexer": "^2.1.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.2.11",
-        "loader-runner": "^4.3.1",
+        "loader-runner": "^4.3.2",
         "mime-db": "^1.54.0",
         "neo-async": "^2.6.2",
         "schema-utils": "^4.3.3",
         "tapable": "^2.3.0",
-        "terser-webpack-plugin": "^5.3.17",
+        "terser-webpack-plugin": "^5.5.0",
         "watchpack": "^2.5.1",
-        "webpack-sources": "^3.3.4"
+        "webpack-sources": "^3.5.0"
       },
       "bin": {
         "webpack": "bin/webpack.js"
@@ -29871,17 +29796,16 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-7.0.2.tgz",
-      "integrity": "sha512-dB0R4T+C/8YuvM+fabdvil6QE44/ChDXikV5lOOkrUeCkW5hTJv2pGLE3keh+D5hjYw8icBaJkZzpFoaHV4T+g==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-7.0.3.tgz",
+      "integrity": "sha512-2E2C6A1e2El7791zQgTH7LPIuwLjRliow9OHS/qlJc9pwhZlCoL/uiwqd/1WSlXT83wJfmfDbkcqHXuXoPJZ3g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@discoveryjs/json-ext": "^1.0.0",
+        "@discoveryjs/json-ext": "^1.1.0",
         "commander": "^14.0.3",
         "cross-spawn": "^7.0.6",
         "envinfo": "^7.14.0",
-        "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
         "interpret": "^3.1.1",
         "rechoir": "^0.8.0",
@@ -30165,9 +30089,9 @@
       }
     },
     "node_modules/webpack/node_modules/webpack-sources": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.4.1.tgz",
-      "integrity": "sha512-eACpxRN02yaawnt+uUNIF7Qje6A9zArxBbcAJjK1PK3S9Ycg5jIuJ8pW4q8EMnwNZCEGltcjkRx1QzOxOkKD8A==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.5.0.tgz",
+      "integrity": "sha512-HPuy+uuoTCaaoEoI1LQ3JN9+vrPBvEesnnX1jADHy728cHSMlq4wUc4afYqahq2B1mhQVZxCXOkNTnXltr+2vQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -31403,14 +31327,17 @@
       }
     },
     "node_modules/yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-3.3.1.tgz",
+      "integrity": "sha512-RNPCUkiE/ZgO4w8i9U5yDQVHaFDdnzaFANElRvpJteCspvmv2VqrRb9lvS6odVD+jqI/zDsxAHJVsafpcheVQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-crc32": "~0.2.3",
-        "fd-slicer": "~1.1.0"
+        "pend": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/yocto-queue": {
diff --git a/package.json b/package.json
index 59daab37bd12..655d6901094c 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,9 @@
   "main": "n/a",
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf \"src/content/**/printable.mdx\"",
+    "clean-printable": "rimraf --glob \"src/content/**/printable.mdx\"",
     "preclean": "run-s clean-dist clean-printable",
-    "clean": "rimraf \"src/content/**/_*.mdx\" \"src/**/_*.json\" \"repositories/*.json\"",
+    "clean": "rimraf --glob \"src/content/**/_*.mdx\" \"src/**/_*.json\" \"repositories/*.json\"",
     "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --config-node-env development",
     "content": "node src/scripts/build-content-tree.mjs ./src/content ./src/_content.json",
     "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
@@ -43,7 +43,7 @@
     "lint": "run-s lint:*",
     "lint:prettier": "prettier --cache --list-different --ignore-unknown .",
     "lint:js": "eslint --cache --cache-location .cache/.eslintcache .",
-    "lint:markdown": "markdownlint --config ./.markdownlint.json --rules ./src/utilities/markdown-lint-enforce-lang-aliases.js '**/*.{md,mdx}'",
+    "lint:markdown": "markdownlint --config ./.markdownlint.json --rules ./src/utilities/markdown-lint-enforce-lang-aliases.js \"**/*.{md,mdx}\"",
     "lint:prose": "vale --config='.vale.ini' src/content",
     "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip /contribute/Governance --skip https:// --skip http:// --skip sw.js --skip /vendor > internal-links.tap; cat internal-links.tap | tap-spot",
     "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
@@ -51,7 +51,7 @@
     "serve": "npm run build && sirv start ./dist --port 4000",
     "preprintable": "npm run clean-printable",
     "printable": "node ./src/scripts/concatenate-docs.mjs",
-    "jest": "NODE_OPTIONS=--experimental-vm-modules jest --config=jest.config.mjs",
+    "jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --config=jest.config.mjs",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome",
     "prettier": "prettier --cache --write --ignore-unknown .",
diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx
index f9639ed68111..74f6438c90c2 100644
--- a/src/content/awesome-webpack.mdx
+++ b/src/content/awesome-webpack.mdx
@@ -86,6 +86,7 @@ _أشخاص مهتمون بـ Webpack، بدون ترتيب محدد_
 - [PostHTML Loader](https://github.com/posthtml/posthtml-loader): loader لـ PostHTML في Webpack. -- _Maintainer_: `PostHTML Team` [![Github][githubicon]](https://github.com/posthtml) [![Twitter][twittericon]](https://twitter.com/PostHTML)
 - [ELM Loader](https://github.com/rtfeldman/elm-webpack-loader): loader في Webpack للغة Elm. -- _Maintainer_: `Richard Feldman` [![Github][githubicon]](https://github.com/rtfeldman) [![Twitter][twittericon]](https://twitter.com/rtfeldman)
 - [Fengari Loader](https://github.com/fengari-lua/fengari-loader/): يشغّل كود Lua باستخدام [Fengari](https://fengari.io). -- _Maintainer_: `Daurnimator` [![Github][githubicon]](https://github.com/daurnimator) [![Twitter][twittericon]](https://twitter.com/daurnimator)
+- [MDX Loader](https://mdxjs.com/packages/loader/): loader لـ MDX في Webpack. -- _Maintainer_: `MDX Team` [![Github][githubicon]](https://github.com/mdx-js)
 
 #### أدوات مساعدة
 
diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx
index 8522a05dc3d6..57a4f774da7d 100644
--- a/src/content/configuration/experiments.mdx
+++ b/src/content/configuration/experiments.mdx
@@ -27,6 +27,7 @@ W> لمّا كانت الميزات التجريبية تتساهل مع semanti
 - [`html`](#experimentshtml)
 - [`lazyCompilation`](#experimentslazycompilation)
 - [`outputModule`](#experimentsoutputmodule)
+- [`typescript`](#experimentstypescript)
 - [`sourceImport`](#experimentssourceimport)
 - `syncWebAssembly`: يدعم WebAssembly القديم كما في webpack 4.
 - `layers`: يُفعِّل طبقات الوحدات والـ chunks، أُزيل ويعمل بلا خيارات إضافية منذ `5.102.0`.
@@ -577,3 +578,34 @@ export default {
   },
 };
 ```
+
+### experiments.typescript
+
+<Badge text="5.107.0+" />
+
+Enable native TypeScript support. With the flag turned on, webpack compiles `.ts`, `.cts`, and `.mts` files (and the matching `data:text/typescript` and `data:application/typescript` data URIs) directly, without any external loader. Under the hood it calls Node.js's built-in [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options).
+
+- Type: `boolean`
+- Default: `false` (auto-enabled by [`experiments.futureDefaults`](#experimentsfuturedefaults))
+
+W> Requires Node.js >= 22.6 for the stable `module.stripTypeScriptTypes` API.
+
+```js
+export default {
+  experiments: {
+    typescript: true,
+  },
+  entry: "./src/index.ts",
+};
+```
+
+Enabling the flag also wires up sensible defaults: default rules for `.ts` / `.cts` / `.mts`, `.ts` added to extension resolution (before `.js`), `extensionAlias` so an `import "./foo.js"` also tries `./foo.ts` (and `.cjs` / `.mjs` → `.cts` / `.mts`), [`tsconfig.json` resolution](/configuration/resolve/#resolvetsconfig), and the `"typescript"` conditional-exports key so monorepo packages can ship `.ts` sources via `package.json#exports`.
+
+W> The transform only **erases types**. It does **not** perform type checking, and it does not handle JSX / `.tsx` or non-erasable TypeScript syntax (`enum`, `namespace` with runtime members, parameter-property constructors, `export =`, decorator metadata). These are the same constraints TypeScript enforces with the [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) tsconfig option.
+
+For type checking, pair the flag with `tsc --noEmit` or [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). For JSX or non-erasable TypeScript syntax, keep using `ts-loader` or `swc-loader`.
+
+The webpack repo ships two reference examples:
+
+- [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) for the built-in `experiments.typescript` setup.
+- [`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) for the `ts-loader` fallback when non-erasable syntax is required.
diff --git a/src/content/contribute/debugging.mdx b/src/content/contribute/debugging.mdx
index 642487631aef..8d89eb7c01ce 100644
--- a/src/content/contribute/debugging.mdx
+++ b/src/content/contribute/debugging.mdx
@@ -52,4 +52,3 @@ For help see https://nodejs.org/en/docs/inspector
 ننتقل الآن إلى `chrome://inspect` في المتصفح، وستجد جميع البرامج النصية النشطة التي قمت بفحصها ضمن عنوان "_Remote Target_". انقر على رابط "inspect" أسفل كل برنامج نصي لفتح مصحح أخطاء مخصص، أو انقر على رابط "_فتح أدوات مطوري Node المخصصة_" لجلسة تتصل تلقائيًا. يمكنك أيضًا تجربة إضافة [NiM extension](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj), وهي إضافة مفيدة لمتصفح Chrome تفتح تلقائيًا علامة تبويب أدوات المطورين في كل مرة تستخدم فيها الأمر `--inspect` لفحص برنامج نصي.
 
 نوصي باستخدام الخيار `--inspect-brk` الذي يُوقف التنفيذ عند أول سطر في البرنامج النصي، مما يسمح لك بتصفح الكود المصدري (The source code) لتعيين نقاط توقف وبدء/إيقاف عملية البناء حسب رغبتك. ولا تنسَ أنه لا يزال بإمكانك تمرير وسائط إلى البرنامج النصي. على سبيل المثال، إذا كان لديك عدة ملفات تهيئة، يمكنك تمرير `--config webpack.prod.js` لتحديد ملف التهيئة الذي ترغب في تصحيحه.
-
diff --git a/src/content/contribute/writers-guide.mdx b/src/content/contribute/writers-guide.mdx
index 3b1cd6c18385..fc9b1ab54253 100644
--- a/src/content/contribute/writers-guide.mdx
+++ b/src/content/contribute/writers-guide.mdx
@@ -98,11 +98,11 @@ foo();
 
 ### الجداول (Tables)
 
-| المعامل (Parameter)    | الشرح (Explanation)                                          | نوع الإدخال (Input Type) | القيمة الافتراضية(Default Value) |
-| ----------------------- | --------------------------------------------------------------- | --------------------- | --------------------------------- |
-| --debug                 | تحويل الـ loaders إلى وضع التصحيح (debug mode)                |  Boolean              |  false                            |
-| --devtool               | تحديد نوع الـ source map للموارد المجمعة (bundled resources)  |  string               |  -                                |
-| --progress              | طباعة تقدم عملية الـ compilation كنسبة مئوية                  |  boolean              |  false                            |
+| المعامل (Parameter) | الشرح (Explanation)                                          | نوع الإدخال (Input Type) | القيمة الافتراضية(Default Value) |
+| ------------------- | ------------------------------------------------------------ | ------------------------ | -------------------------------- |
+| --debug             | تحويل الـ loaders إلى وضع التصحيح (debug mode)               | Boolean                  | false                            |
+| --devtool           | تحديد نوع الـ source map للموارد المجمعة (bundled resources) | string                   | -                                |
+| --progress          | طباعة تقدم عملية الـ compilation كنسبة مئوية                 | boolean                  | false                            |
 
 يجب أيضاً ترتيب الجداول أبجديا (alphabetically).
 
diff --git a/src/content/plugins/automatic-prefetch-plugin.mdx b/src/content/plugins/automatic-prefetch-plugin.mdx
index 463527acc898..99a9bf7d5058 100644
--- a/src/content/plugins/automatic-prefetch-plugin.mdx
+++ b/src/content/plugins/automatic-prefetch-plugin.mdx
@@ -4,8 +4,8 @@ group: webpack
 contributors:
   - MohaDev-69
 ---
-`AutomaticPrefetchPlugin` تستكشف جميع المودلات من التجميعة مسبقاً بينما تنتظر التغييرات ، في محاولة تحسين اوقات البناء كونها في ارتفاع مستمر. مقارنةً ب[`PrefetchPlugin`](/plugins/prefetch-plugin/)  التي تستكشف مودل واحد مسبقاً
 
+`AutomaticPrefetchPlugin` تستكشف جميع المودلات من التجميعة مسبقاً بينما تنتظر التغييرات ، في محاولة تحسين اوقات البناء كونها في ارتفاع مستمر. مقارنةً ب[`PrefetchPlugin`](/plugins/prefetch-plugin/) التي تستكشف مودل واحد مسبقاً
 
 ملاحظة> من غير المتوقع ان يكون لها فائدة فعلية بالنسبة للاداء كون اوقات البناء التدريجية سريعه.
 
diff --git a/src/content/plugins/banner-plugin.mdx b/src/content/plugins/banner-plugin.mdx
index 005ce2292225..c652bb4d6688 100644
--- a/src/content/plugins/banner-plugin.mdx
+++ b/src/content/plugins/banner-plugin.mdx
@@ -7,7 +7,8 @@ related:
   - title: banner-plugin-hashing test
     url: https://github.com/webpack/webpack/blob/main/test/configCases/plugins/banner-plugin-hashing/webpack.config.js
 ---
-يضيف بنر  اعلى كل جزء تم توليده
+
+يضيف بنر اعلى كل جزء تم توليده
 
 ```js
 import webpack from "webpack";
@@ -47,8 +48,7 @@ new webpack.BannerPlugin({
   banner: (yourVariable) => `yourVariable: ${yourVariable}`,
 });
 
-// سيتم اضافه رسالة البنر بعد التصغير واي تعديلات على الأصل
-It will add the banner message after minimizers and any asset manipulation
+// سيتم إضافة رسالة البنر بعد التصغير وأي تعديل على الأصل
 new webpack.BannerPlugin({
   raw: true,
   banner: "/* البنر عبارة عن سترنق */",
@@ -58,7 +58,7 @@ new webpack.BannerPlugin({
 
 ## المواضع
 
-منذ webpack 2.5.0, يتم تقييم المواضع في سترنق `banner` 
+منذ webpack 2.5.0, يتم تقييم المواضع في سترنق `banner`
 
 ```js
 import webpack from "webpack";
diff --git a/src/content/plugins/context-exclusion-plugin.mdx b/src/content/plugins/context-exclusion-plugin.mdx
index f3e20a20e1fc..d03b7f1a3591 100644
--- a/src/content/plugins/context-exclusion-plugin.mdx
+++ b/src/content/plugins/context-exclusion-plugin.mdx
@@ -6,7 +6,7 @@ contributors:
 ---
 
 _السياق_ يشير الى [التعبيرات المنطقية الديناميكية في import() او require()](/guides/dependency-management/#dynamic-expressions-in-import-or-require) مثل `require('./locale/' + الاسم + '.json')`.
-`ContextExclusionPlugin`: تسمح لك بإستبعاد السياق، ارفق تعبيرات نمطية  كـسبب عند تشغيل الإضافه لتستبعد كل السياق الذي يطابقها
+`ContextExclusionPlugin`: تسمح لك بإستبعاد السياق، ارفق تعبيرات نمطية كـسبب عند تشغيل الإضافه لتستبعد كل السياق الذي يطابقها
 
 **webpack.config.js**
 
diff --git a/src/content/plugins/limit-chunk-count-plugin.mdx b/src/content/plugins/limit-chunk-count-plugin.mdx
index f31d4f0850e4..a05336291a3d 100644
--- a/src/content/plugins/limit-chunk-count-plugin.mdx
+++ b/src/content/plugins/limit-chunk-count-plugin.mdx
@@ -4,7 +4,8 @@ group: webpack
 contributors:
   - MohaDev-69
 ---
-عندما تقوم بكتابة الكود، من المحتمل ان تكون بالفعل اضفت الكثير من نقاط الافتراق لتحميل اشياء حسب الحاجة. بعد جمع الكود (compile) ستلاحظ ان بعض الاجزاء صغيرة للغاية - مما ينشئ طلبات HTTP اكبر. 
+
+عندما تقوم بكتابة الكود، من المحتمل ان تكون بالفعل اضفت الكثير من نقاط الافتراق لتحميل اشياء حسب الحاجة. بعد جمع الكود (compile) ستلاحظ ان بعض الاجزاء صغيرة للغاية - مما ينشئ طلبات HTTP اكبر.
 `LimitChunkCountPlugin` يمكنه معالجة الطلبات بشكل مسبق عن طريق دمج الاجزاء معاً
 
 ```js
diff --git a/src/content/plugins/merge-duplicate-chunks-plugin.mdx b/src/content/plugins/merge-duplicate-chunks-plugin.mdx
index b30af7c6043f..24746b4846b6 100644
--- a/src/content/plugins/merge-duplicate-chunks-plugin.mdx
+++ b/src/content/plugins/merge-duplicate-chunks-plugin.mdx
@@ -4,6 +4,7 @@ group: webpack
 contributors:
   - MohaDev-69
 ---
+
 دمج الاجزاء التي تحتوي على نفس المودلات، هذه الإضافه مفعلة افتراضياً وهي جزء من تحسينات webpack الداخلية. استخراجها علناً يسمح للمطورين بالتحكم بالـ`مرحلة (stage)` عند ماذا يحصل الدمج — مفيدة عندما تدمج الاجزاء المطلوبة للتشغيل بعد [`إضافة تقسيم الاجزاء`](/plugins/split-chunks-plugin)
 
 ```js
@@ -18,7 +19,7 @@ new webpack.optimize.MergeDuplicateChunksPlugin({
 
 `رقم`
 
-يتحكم بتحسين المرحلة، عند أي مرحلة يتم تشغيل هذه الإضافة، إفتراضياً, يحصل الدمج قبل `إضافه تقسيم الاجزاء`. وضع رقم اعلى للـ`مرحلة (stage)` يجعل الدمج يعمل بعد تحسينات اخرى مثل  `إضافه تقسيم الاجزاء`
+يتحكم بتحسين المرحلة، عند أي مرحلة يتم تشغيل هذه الإضافة، إفتراضياً, يحصل الدمج قبل `إضافه تقسيم الاجزاء`. وضع رقم اعلى للـ`مرحلة (stage)` يجعل الدمج يعمل بعد تحسينات اخرى مثل `إضافه تقسيم الاجزاء`
 
 **webpack.config.js**
 
diff --git a/src/content/plugins/min-chunk-size-plugin.mdx b/src/content/plugins/min-chunk-size-plugin.mdx
index be76474e2c41..bcd72de227f0 100644
--- a/src/content/plugins/min-chunk-size-plugin.mdx
+++ b/src/content/plugins/min-chunk-size-plugin.mdx
@@ -4,6 +4,7 @@ group: webpack
 contributors:
   - MohaDev-69
 ---
+
 ابقاء حجم الاجزاء فوق الحد المعين عن طريق دمج الاجزاء التي تكون اصغر من `minChunkSize`.
 
 ```js
@@ -14,7 +15,7 @@ new webpack.optimize.MinChunkSizePlugin({
 
 ## الأستعمال عن طريق واجهة الاوامر (CLI)
 
-هذه الاضافه واعداداتها يمكن التحكم فيها وادارتها عن طريق واجهة الأوامر  [CLI](/api/cli/):
+هذه الاضافه واعداداتها يمكن التحكم فيها وادارتها عن طريق واجهة الأوامر [CLI](/api/cli/):
 
 ```bash
 webpack --optimize-min-chunk-size 10000
diff --git a/src/content/plugins/prefetch-plugin.mdx b/src/content/plugins/prefetch-plugin.mdx
index 2a2560627ecf..d45c91cbde45 100644
--- a/src/content/plugins/prefetch-plugin.mdx
+++ b/src/content/plugins/prefetch-plugin.mdx
@@ -4,7 +4,8 @@ group: webpack
 contributors:
   - MohaDev-69
 ---
-جلب مسبق اعتيادي لطلبات المودل، مما يؤدي الى حلها وبنائها قبل حدوث اول عملية `import` او  `require` لتلك المودل، استخدام هذه الإضافه يمكن ان يسرع الاداء. حاول تحليل البنية اولاً لتحديد نقاط الجلب المسبق الذكية
+
+جلب مسبق اعتيادي لطلبات المودل، مما يؤدي الى حلها وبنائها قبل حدوث اول عملية `import` او `require` لتلك المودل، استخدام هذه الإضافه يمكن ان يسرع الاداء. حاول تحليل البنية اولاً لتحديد نقاط الجلب المسبق الذكية
 
 ```js
 import webpack from "webpack";
diff --git a/src/content/plugins/profiling-plugin.mdx b/src/content/plugins/profiling-plugin.mdx
index 22e30bdf7d99..b01fe4b82b09 100644
--- a/src/content/plugins/profiling-plugin.mdx
+++ b/src/content/plugins/profiling-plugin.mdx
@@ -37,7 +37,6 @@ new webpack.debug.ProfilingPlugin({
 
 1. شغل webpack مع `ProfilingPlugin`.
 2. افتح متصفح كروم، افتح ادوات المطور، اذهب الى نافذة `الأداء (Performance)` سابقاً (`Timeline`)
-3. اسحب وافلت الملف المولّد  (`events.json`افتراضياً) في ال profiler.
+3. اسحب وافلت الملف المولّد (`events.json`افتراضياً) في ال profiler.
 
    سيعرض الجدول الزمني الاحصائيات والاستدعاءات لكل اضافة!
-
diff --git a/src/content/plugins/provide-plugin.mdx b/src/content/plugins/provide-plugin.mdx
index 6b155d92ccf1..12bcc5a91880 100644
--- a/src/content/plugins/provide-plugin.mdx
+++ b/src/content/plugins/provide-plugin.mdx
@@ -23,7 +23,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-بشكل افتراضي ، يكون مسار الوحدات في المجلد الحالي هو  (`./**)` و `node_modules`.
+بشكل افتراضي ، يكون مسار الوحدات في المجلد الحالي هو (`./**)` و `node_modules`.
 
 ايضاً بالأمكان تحديد مسار كامل:
 
@@ -40,7 +40,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-عندما يتم مصادفه ال `معرف (identifier)` كمتغير حر في المودل، يتم تحميل `المودل` تلقائياً وال  `معرف (identifier)` يكون مملوء بصادرات المودل المحمل (او `الممتلكة` لدعم الصادرات المسماة) 
+عندما يتم مصادفه ال `معرف (identifier)` كمتغير حر في المودل، يتم تحميل `المودل` تلقائياً وال `معرف (identifier)` يكون مملوء بصادرات المودل المحمل (او `الممتلكة` لدعم الصادرات المسماة)
 
 For importing the default export of an ES2015 module, you have to specify the default property of module.
 لإستيراد الصادرات الافتراضية لمودل ES2015، يجب عليك ان تحدد الممتلكة الافتراضية للمودل
@@ -67,7 +67,7 @@ jQuery("#item"); // <= ايضاً يعمل
 
 ## الاستعمال: jQuery مع Angular 1
 
-Angular تبحث عن  `window.jQuery` ليمكنها تحديد ما اذا كانت Jquery موجودة
+Angular تبحث عن `window.jQuery` ليمكنها تحديد ما اذا كانت Jquery موجودة
 إطلع على [الكود المصدري](https://github.com/angular/angular.js/blob/v1.5.9/src/Angular.js#L1821-L1823).
 
 ```js
diff --git a/src/content/plugins/virtual-url-plugin.mdx b/src/content/plugins/virtual-url-plugin.mdx
index f527da1140df..879acd77810a 100644
--- a/src/content/plugins/virtual-url-plugin.mdx
+++ b/src/content/plugins/virtual-url-plugin.mdx
@@ -5,7 +5,7 @@ contributors:
   - MohaDev-69
 ---
 
-يسمح بإنشاء مودلات افتراضية من اي نوع، على سبيل المثال:  `.ts`, `.json`, `.css` ، الافتراضي هو `js.`
+يسمح بإنشاء مودلات افتراضية من اي نوع، على سبيل المثال: `.ts`, `.json`, `.css` ، الافتراضي هو `js.`
 
 <Badge text="5.100.0+" />
 
@@ -26,6 +26,7 @@ console.log(msg);
 ```
 
 ## مثال مبدئي
+
 انشاء مودل افتراضي يقوم بإعطاء معلومات البناء (build)
 
 ```js
@@ -71,6 +72,7 @@ console.log(msg);
 ```
 
 ## مثال متطور
+
 انشاء عدة مودلات افتراضية بمختلف الانواع
 
 ```js
diff --git a/src/content/plugins/watch-ignore-plugin.mdx b/src/content/plugins/watch-ignore-plugin.mdx
index 7333a7e2b1ae..65a5c810d88e 100644
--- a/src/content/plugins/watch-ignore-plugin.mdx
+++ b/src/content/plugins/watch-ignore-plugin.mdx
@@ -4,7 +4,8 @@ group: webpack
 contributors:
   - MohaDev-69
 ---
-يقوم بتجاهل ملفات محددة، على سبيل المثال هؤلاء الذين يطابقون المسار المُرفق  او تعبير نمطي معين، عندما يكونون في [وضع المشاهدة](/configuration/watch).
+
+يقوم بتجاهل ملفات محددة، على سبيل المثال هؤلاء الذين يطابقون المسار المُرفق او تعبير نمطي معين، عندما يكونون في [وضع المشاهدة](/configuration/watch).
 
 ```js
 new webpack.WatchIgnorePlugin({ paths });
@@ -14,4 +15,4 @@ new webpack.WatchIgnorePlugin({ paths });
 
 - `paths` (`Array<string | RegExp>`): - قائمة من التعبيرات النمطية او مسارات حتمية الى مجلدات او ملفات التي يُفترض ان يتم تجاهلها
 
-ملاحظة> تم ايقاف هذه الاضافه واستبدالها بخيار  [watchOptions.ignored](/configuration/watch/#watchoptionsignored)
+ملاحظة> تم ايقاف هذه الاضافه واستبدالها بخيار [watchOptions.ignored](/configuration/watch/#watchoptionsignored)
diff --git a/src/server.jsx b/src/server.jsx
index 757b87b2b30c..6f9896128be6 100644
--- a/src/server.jsx
+++ b/src/server.jsx
@@ -3,7 +3,6 @@ import ReactDOMServer from "react-dom/server";
 import { HelmetProvider } from "react-helmet-async";
 import { StaticRouter } from "react-router";
 // Import Components
-// eslint-disable-next-line import/no-unresolved
 import assets from "../dist/prod-assets-manifest.json";
 import PrintScript from "./components/Print/PrintScript.jsx";
 import Site from "./components/Site/Site.jsx";

From b48107b2e4865d172a7286afc038eed2e9f98211 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 15:30:33 +0300
Subject: [PATCH 31/35] docs(ar): translating and fix main files to arabic

---
 .../NotificationBar/Notification.mdx          |   2 +-
 src/components/Splash/second/left.mdx         |   4 +-
 src/content/api/compilation-hooks.mdx         |   4 +-
 src/content/api/module-variables.mdx          |  68 +++++++---
 src/content/api/parser.mdx                    |   4 +-
 src/content/blog/2026-05-19-webpack-5-107.mdx | 116 ++++++++++++------
 src/content/configuration/experiments.mdx     |  62 +++++-----
 src/content/configuration/externals.mdx       |   8 +-
 src/content/contribute/index.mdx              |  61 ++++-----
 src/content/contribute/plugin-patterns.mdx    |   5 +-
 src/content/plugins/NoEmitOnErrorsPlugin.mdx  |   6 +-
 .../plugins/automatic-prefetch-plugin.mdx     |   7 +-
 src/content/plugins/banner-plugin.mdx         |  35 +++---
 .../plugins/context-exclusion-plugin.mdx      |   8 +-
 .../plugins/hot-module-replacement-plugin.mdx |  11 +-
 src/content/plugins/internal-plugins.mdx      |   2 +-
 .../plugins/limit-chunk-count-plugin.mdx      |  18 +--
 .../plugins/merge-duplicate-chunks-plugin.mdx |  11 +-
 src/content/plugins/min-chunk-size-plugin.mdx |  11 +-
 src/content/plugins/prefetch-plugin.mdx       |   9 +-
 src/content/plugins/profiling-plugin.mdx      |  23 ++--
 src/content/plugins/provide-plugin.mdx        |  37 +++---
 src/content/plugins/virtual-url-plugin.mdx    |  33 ++---
 src/content/plugins/watch-ignore-plugin.mdx   |   9 +-
 24 files changed, 322 insertions(+), 232 deletions(-)

diff --git a/src/components/NotificationBar/Notification.mdx b/src/components/NotificationBar/Notification.mdx
index 37c23b510fca..2ac9d03a8cba 100644
--- a/src/components/NotificationBar/Notification.mdx
+++ b/src/components/NotificationBar/Notification.mdx
@@ -1 +1 @@
-You are reading the documentation for webpack 5, the latest release. Read the <a href="https://v4.webpack.js.org/">webpack 4 documentation here</a>. See the <a href="/migrate/5">migration guide</a> for upgrading to webpack 5.
+أنت تقرأ توثيق webpack 5، وهو أحدث إصدار. يمكنك قراءة <a href="https://v4.webpack.js.org/">توثيق webpack 4 من هنا</a>. وراجع <a href="/migrate/5">دليل الترقية</a> إذا أردت الترقية إلى webpack 5.
diff --git a/src/components/Splash/second/left.mdx b/src/components/Splash/second/left.mdx
index bbec01fecb08..16aec42dd5b2 100644
--- a/src/components/Splash/second/left.mdx
+++ b/src/components/Splash/second/left.mdx
@@ -1,4 +1,4 @@
-Start without a configuration file, or provide a custom **webpack.config.js**:
+ابدأ بدون ملف configuration، أو استخدم ملف **webpack.config.js** مخصصًا:
 
 ```js
 import path from "node:path";
@@ -16,4 +16,4 @@ export default {
 };
 ```
 
-Prefer a video walkthrough? **[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)**
+تفضّل شرحًا بالفيديو؟ **[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)**
diff --git a/src/content/api/compilation-hooks.mdx b/src/content/api/compilation-hooks.mdx
index 8a53212206eb..8be57c1b3276 100644
--- a/src/content/api/compilation-hooks.mdx
+++ b/src/content/api/compilation-hooks.mdx
@@ -525,7 +525,9 @@ compilation.hooks.processAssets.tap(
    );
    ```
 
-### List of asset processing stages
+<span id="list-of-asset-processing-stages"></span>
+
+### قائمة مراحل معالجة assets
 
 هذه قائمة بالمراحل المدعومة، مرتبة حسب ترتيب المعالجة:
 
diff --git a/src/content/api/module-variables.mdx b/src/content/api/module-variables.mdx
index 43b9c2002ab7..7f6e3919f0aa 100644
--- a/src/content/api/module-variables.mdx
+++ b/src/content/api/module-variables.mdx
@@ -17,7 +17,9 @@ related:
 
 تكون قيمته `false` إذا كان module يُنفّذ حاليًا، وتكون `true` إذا اكتمل التنفيذ المتزامن.
 
-## module.hot (webpack-specific)
+<span id="modulehot-webpack-specific"></span>
+
+## module.hot (خاص بـ webpack)
 
 يوضح ما إذا كانت [Hot Module Replacement](/concepts/hot-module-replacement) مفعّلة أم لا، ويوفر واجهة للتعامل معها. راجع صفحة [HMR API](/api/hot-module-replacement) للتفاصيل.
 
@@ -151,13 +153,13 @@ console.log(import.meta.webpack); // يخرج `5` في webpack 5
 
 ترجع boolean يوضح ما إذا كان module الحالي هو entry point.
 
-**src/index.js** (entry point)
+**src/index.js** (نقطة entry)
 
 ```js
 console.log(import.meta.main); // true
 ```
 
-**src/utils.js** (ليس entry point)
+**src/utils.js** (ليس نقطة entry)
 
 ```js
 console.log(import.meta.main); // false
@@ -243,7 +245,9 @@ T> يتصرف `import.meta.env` مثل `process.env`: هو object، ويدعم 
 
 إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه `true`.
 
-## \_\_resourceQuery (webpack-specific)
+<span id="__resourcequery-webpack-specific"></span>
+
+## \_\_resourceQuery (خاص بـ webpack)
 
 يمثل resource query الخاص بالـ module الحالي. إذا كان لديك الاستدعاء التالي، فستكون query string متاحة داخل `file.js`.
 
@@ -257,17 +261,23 @@ import "file.js?test";
 __resourceQuery === "?test";
 ```
 
-## \_\_webpack_public_path\_\_ (webpack-specific)
+<span id="__webpack_public_path__-webpack-specific"></span>
+
+## \_\_webpack_public_path\_\_ (خاص بـ webpack)
 
 يساوي خيار الإعداد `output.publicPath`.
 
-## \_\_webpack_require\_\_ (webpack-specific)
+<span id="__webpack_require__-webpack-specific"></span>
+
+## \_\_webpack_require\_\_ (خاص بـ webpack)
 
 دالة `require` الخام. لا يقرأ Parser هذا التعبير لاستخراج dependencies.
 
 W> عندما تُحزّم bundles الخاصة بـ webpack مرة أخرى، مثل استخدام output محزّم سابقًا كـ input، سيعيد [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) تسمية `__webpack_require__` القادم من bundle السابق لتجنب التعارضات، مثل `__nested_webpack_require_*`. في هذه الحالات، استخدم [`__webpack_global__`](#__webpack_global__-webpack-specific) بدلًا منه، فهو يضمن الوصول دائمًا إلى دالة `__webpack_require__` الخاصة بالـ compilation الحالي.
 
-## \_\_webpack_chunk_load\_\_ (webpack-specific)
+<span id="__webpack_chunk_load__-webpack-specific"></span>
+
+## \_\_webpack_chunk_load\_\_ (خاص بـ webpack)
 
 دالة تحميل chunk الداخلية. تأخذ argument واحدًا:
 
@@ -295,27 +305,37 @@ import("./module-a").then((moduleA) => {
 });
 ```
 
-## \_\_webpack_module\_\_ (webpack-specific)
+<span id="__webpack_module__-webpack-specific"></span>
+
+## \_\_webpack_module\_\_ (خاص بـ webpack)
 
 <Badge text="5.68.0+" />
 
 يوفر وصولًا إلى `module` الحالي. لا يكون `module` متاحًا داخل strict ESM.
 
-## \_\_webpack_module\_\_.id (webpack-specific)
+<span id="__webpack_module__id-webpack-specific"></span>
+
+## \_\_webpack_module\_\_.id (خاص بـ webpack)
 
 <Badge text="5.68.0+" />
 
 يوفر وصولًا إلى ID الخاص بالـ `module` الحالي، أي `module.id`. لا يكون `module` متاحًا داخل strict ESM.
 
-## \_\_webpack_modules\_\_ (webpack-specific)
+<span id="__webpack_modules__-webpack-specific"></span>
+
+## \_\_webpack_modules\_\_ (خاص بـ webpack)
 
 يوفر وصولًا إلى الكائن الداخلي الذي يحتوي على كل modules.
 
-## \_\_webpack_hash\_\_ (webpack-specific)
+<span id="__webpack_hash__-webpack-specific"></span>
+
+## \_\_webpack_hash\_\_ (خاص بـ webpack)
 
 يوفر وصولًا إلى hash الخاص بالـ compilation.
 
-## \_\_webpack_get_script_filename\_\_ (webpack-specific)
+<span id="__webpack_get_script_filename__-webpack-specific"></span>
+
+## \_\_webpack_get_script_filename\_\_ (خاص بـ webpack)
 
 `function (chunkId)`
 
@@ -332,11 +352,15 @@ __webpack_get_script_filename__ = (chunkId) => {
 };
 ```
 
-## \_\_non_webpack_require\_\_ (webpack-specific)
+<span id="__non_webpack_require__-webpack-specific"></span>
+
+## \_\_non_webpack_require\_\_ (خاص بـ webpack)
 
 ينشئ دالة `require` لا يقرأها webpack. يمكن استخدامها لعمل أشياء متقدمة مع دالة require عامة إذا كانت متاحة.
 
-## \_\_webpack_global\_\_ (webpack-specific)
+<span id="__webpack_global__-webpack-specific"></span>
+
+## \_\_webpack_global\_\_ (خاص بـ webpack)
 
 <Badge text="5.104.0+" />
 
@@ -348,7 +372,9 @@ __webpack_get_script_filename__ = (chunkId) => {
 __webpack_global__.myProperty = "value";
 ```
 
-## \_\_webpack_exports_info\_\_ (webpack-specific)
+<span id="__webpack_exports_info__-webpack-specific"></span>
+
+## \_\_webpack_exports_info\_\_ (خاص بـ webpack)
 
 داخل modules، يكون `__webpack_exports_info__` متاحًا للسماح بفحص معلومات exports:
 
@@ -372,7 +398,9 @@ __webpack_global__.myProperty = "value";
 
 - افحص ما إذا كان يمكن تغيير أسماء exports باستخدام `__webpack_exports_info__.<name>.canMangle`.
 
-## \_\_webpack_is_included\_\_ (webpack-specific)
+<span id="__webpack_is_included__-webpack-specific"></span>
+
+## \_\_webpack_is_included\_\_ (خاص بـ webpack)
 
 <Badge text="5.16.0+" />
 
@@ -384,7 +412,9 @@ if (__webpack_is_included__("./module-a.js")) {
 }
 ```
 
-## \_\_webpack_base_uri\_\_ (webpack-specific)
+<span id="__webpack_base_uri__-webpack-specific"></span>
+
+## \_\_webpack_base_uri\_\_ (خاص بـ webpack)
 
 يغيّر base URI وقت التشغيل.
 
@@ -408,6 +438,8 @@ if (__webpack_is_included__("./module-a.js")) {
 console.log(__webpack_runtime_id__ === "main");
 ```
 
-## DEBUG (webpack-specific)
+<span id="debug-webpack-specific"></span>
+
+## DEBUG (خاص بـ webpack)
 
 يساوي خيار الإعداد `debug`.
diff --git a/src/content/api/parser.mdx b/src/content/api/parser.mdx
index d1164fbd8613..ec057df4db05 100644
--- a/src/content/api/parser.mdx
+++ b/src/content/api/parser.mdx
@@ -404,7 +404,7 @@ const a = b;
 parser.hooks.rename.for("b").tap("MyPlugin", (expression) => {});
 ```
 
-### assign (before parsing assigned expression)
+### assign (قبل parsing التعبير المسند)
 
 `SyncBailHook`
 
@@ -421,7 +421,7 @@ parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
 });
 ```
 
-### assign (before parsing target)
+### assign (قبل parsing الهدف)
 
 `SyncBailHook`
 
diff --git a/src/content/blog/2026-05-19-webpack-5-107.mdx b/src/content/blog/2026-05-19-webpack-5-107.mdx
index e8d00f1895ca..940493158808 100644
--- a/src/content/blog/2026-05-19-webpack-5-107.mdx
+++ b/src/content/blog/2026-05-19-webpack-5-107.mdx
@@ -15,28 +15,30 @@ contributors:
 
 استكشف الجديد:
 
-- [**HTML Modules (Experimental)**](#html-modules-experimental)
-  - [`experiments.html` Flag](#experimentshtml-flag)
-  - [Inline `<style>` Tags](#inline-style-tags)
-  - [Inline `<script>` Tags](#inline-script-tags)
-  - [`<script src>` and `<link rel="modulepreload">`](#script-src-and-link-relmodulepreload)
-  - [`webpackIgnore` Magic Comment](#webpackignore-magic-comment)
-- [**TypeScript Support (Experimental)**](#typescript-support-experimental)
-- [**CSS Improvements**](#css-improvements)
-  - [Scope Hoisting for CSS Modules](#scope-hoisting-for-css-modules)
-  - [Pure Mode for CSS Modules](#pure-mode-for-css-modules)
-  - [`@value` in URLs and `@import`](#value-in-urls-and-import)
-  - [Multiple Aliases via `exportsConvention`](#multiple-aliases-via-exportsconvention)
-  - [`linkInsert` Hook](#linkinsert-hook)
-  - [`orderModules` Hook](#ordermodules-hook)
-- [**JavaScript and ESM**](#javascript-and-esm)
-  - [Anonymous Default Export Naming](#anonymous-default-export-naming)
-  - [Preserving `defer` and `source` Phase on Externals](#preserving-defer-and-source-phase-on-externals)
+- [**HTML Modules (تجريبية)**](#html-modules-experimental)
+  - [خيار `experiments.html`](#experimentshtml-flag)
+  - [وسوم `<style>` الداخلية](#inline-style-tags)
+  - [وسوم `<script>` الداخلية](#inline-script-tags)
+  - [وسوم `<script src>` و`<link rel="modulepreload">`](#script-src-and-link-relmodulepreload)
+  - [تعليق `webpackIgnore` السحري](#webpackignore-magic-comment)
+- [**دعم TypeScript التجريبي**](#typescript-support-experimental)
+- [**تحسينات CSS**](#css-improvements)
+  - [Scope hoisting لـ CSS Modules](#scope-hoisting-for-css-modules)
+  - [وضع pure في CSS Modules](#pure-mode-for-css-modules)
+  - [`@value` داخل URLs و`@import`](#value-in-urls-and-import)
+  - [عدة aliases عبر `exportsConvention`](#multiple-aliases-via-exportsconvention)
+  - [hook باسم `linkInsert`](#linkinsert-hook)
+  - [hook باسم `orderModules`](#ordermodules-hook)
+- [**JavaScript وESM**](#javascript-and-esm)
+  - [تسمية default export المجهول](#anonymous-default-export-naming)
+  - [الحفاظ على مرحلتي `defer` و`source` في externals](#preserving-defer-and-source-phase-on-externals)
   - [`#__NO_SIDE_EFFECTS__` Annotation](#__no_side_effects__-annotation)
-- [**Resolver Updates**](#resolver-updates)
-- [**Bug Fixes**](#bug-fixes)
+- [**تحديثات resolver**](#resolver-updates)
+- [**إصلاحات الأخطاء**](#bug-fixes)
 
-## HTML Modules (Experimental)
+<span id="html-modules-experimental"></span>
+
+## HTML Modules (تجريبية)
 
 W> **هذه الميزة تجريبية وجزئية.** يطبق Webpack 5.107 جانب `html-loader` فقط: عند استيراد ملف HTML من JavaScript، تمر مراجع الوسوم عبر مسار webpack. أما **HTML entry points**، أي استخدام ملف `.html` مباشرة كـ `entry` وهو الجزء المرتبط بـ `html-webpack-plugin`، فهي **غير مدعومة بعد** ومخطط لها في الإصدار minor التالي. القصة الكاملة متتبعة في issue [#536](https://github.com/webpack/webpack/issues/536).
 
@@ -44,7 +46,9 @@ W> **هذه الميزة تجريبية وجزئية.** يطبق Webpack 5.107 
 
 خدم هذان الاعتمادان المجتمع لفترة طويلة، لكنهما خارج core. يبدأ Webpack 5.107 بإدخال جانب `html-loader` من هذا العمل إلى الداخل.
 
-### `experiments.html` Flag
+<span id="experimentshtml-flag"></span>
+
+### خيار `experiments.html`
 
 كل ما في هذا القسم خلف flag واحد يحتاج إلى تفعيل صريح. الخيار الجديد `experiments.html` يسجل نوع module باسم `html` على `NormalModuleFactory` ويفعل سلوكيات HTML الموضحة أدناه.
 
@@ -68,7 +72,9 @@ document.documentElement.innerHTML = page;
 
 هذه هي الصيغة نفسها التي ينتجها `html-loader`، لذلك يفترض أن يستمر الكود الموجود الذي يستورد HTML بالعمل. يقوم المسار الجديد بالعمل الذي كان loader يقوم به: تُحل مراجع الوسوم، وتُعاد كتابة أسماء الملفات التي تحتوي على hash داخل نص HTML، ثم تصل النتيجة إلى JS bundle. استخدام ملف `.html` مباشرة كـ webpack `entry` **غير** مدعوم في 5.107.
 
-### Inline `<style>` Tags
+<span id="inline-style-tags"></span>
+
+### وسوم `<style>` الداخلية
 
 عندما يجد webpack كتلة `<style>` داخل HTML module، يمرر جسم CSS عبر مسار CSS نفسه الذي تستخدمه لملف `.css`. تُعامل الكتلة كـ virtual CSS module مع `exportType: "text"`، لذلك تُحل مراجع `url()` وعبارات `@import` داخل style نسبة إلى ملف HTML. وبعد انتهاء المعالجة، يُكتب CSS المحوّل مرة أخرى داخل وسم `<style>` الأصلي في نص HTML الصادر.
 
@@ -93,7 +99,9 @@ document.documentElement.innerHTML = page;
 
 تتم معالجة `<style type="text/css">` و`<style>` بدون خاصية `type`. أما أي وسم يملك `type` غير CSS فيمر كما هو بدون تعديل. هذا يغطي سلوك inline-style الخاص بـ `html-loader` بدون الحاجة إليه في pipeline.
 
-### Inline `<script>` Tags
+<span id="inline-script-tags"></span>
+
+### وسوم `<script>` الداخلية
 
 تُمرر أجسام وسوم `<script>` الداخلية عبر مسار entry نفسه الذي يتعامل مسبقًا مع `<script src>`. يصبح كل جسم `<script>` entry مستقلًا في webpack: السكربتات الداخلية الكلاسيكية تُحزم كـ CommonJS، ووسوم `<script type="module">` الداخلية تُحزم كـ ESM. يعاد كتابة الوسم في HTML الناتج إلى `<script src="…">` يشير إلى chunk المولد، مع إفراغ الجسم.
 
@@ -120,7 +128,9 @@ document.documentElement.innerHTML = page;
 - يعمل `webpackIgnore` على وسوم `<script>` الداخلية أيضًا، فيترك الجسم الأصلي كما هو.
 - قيم `type` غير الخاصة بـ JS مثل `application/ld+json` و`importmap` تمر بدون تغيير.
 
-### `<script src>` and `<link rel="modulepreload">`
+<span id="script-src-and-link-relmodulepreload"></span>
+
+### وسوم `<script src>` و`<link rel="modulepreload">`
 
 تتحول مراجع `<script src>` و`<link rel="modulepreload">` داخل HTML module إلى webpack entries حقيقية، ثم يعاد كتابة URL الخاص بالـ chunk الصادر داخل نص HTML حتى تبقى أسماء الملفات التي تحتوي على hash صحيحة.
 
@@ -145,7 +155,9 @@ document.documentElement.innerHTML = page;
 - عند تفعيل `output.module`، تتم ترقية وسوم `<script src>` الكلاسيكية تلقائيًا إلى `<script type="module" src>` حتى تُحمّل ES-module chunks الناتجة بالوضع الصحيح.
 - أنواع script غير JS مثل `application/ld+json` أو `importmap`، وكذلك data URIs، تمر بدون تغيير ولا تُحزم كـ JS.
 
-### `webpackIgnore` Magic Comment
+<span id="webpackignore-magic-comment"></span>
+
+### تعليق `webpackIgnore` السحري
 
 أصبح magic comment المعروف `webpackIgnore: true` يعمل الآن داخل HTML modules. ضع تعليق HTML يحتوي على التوجيه قبل الوسم مباشرة، وسيترك webpack روابط ذلك الوسم كما هي في output. وهذا هو بالضبط سلوك `html-loader` للحالة نفسها.
 
@@ -159,7 +171,9 @@ document.documentElement.innerHTML = page;
 
 تُقرأ قيمة التعليق بالسياق نفسه الذي تستخدمه parsers الخاصة بـ JS وCSS، لذلك القيم غير boolean ستصدر `UnsupportedFeatureWarning`.
 
-## TypeScript Support (Experimental)
+<span id="typescript-support-experimental"></span>
+
+## دعم TypeScript التجريبي
 
 W> **هذه الميزة تجريبية وتعتمد على إصدار حديث من Node.js.** تتطلب Node.js 22.6 أو أحدث لاستخدام API المستقرة `module.stripTypeScriptTypes`. يعالج التحويل syntax الخاص بـ TypeScript القابل للإزالة فقط. للسيناريوهات الأخرى، استمر باستخدام `ts-loader` أو `swc-loader`.
 
@@ -181,9 +195,13 @@ export default {
 
 راجع [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) للإعداد المدمج، و[`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) لاستخدام `ts-loader` كخيار fallback.
 
-## CSS Improvements
+<span id="css-improvements"></span>
+
+## تحسينات CSS
 
-### Scope Hoisting for CSS Modules
+<span id="scope-hoisting-for-css-modules"></span>
+
+### Scope hoisting لـ CSS Modules
 
 كانت module concatenation، والمعروفة أيضًا باسم scope hoisting، تحسينًا خاصًا بـ JavaScript فقط. وحتى مع تفعيل `experiments.css`، كانت CSS Modules الداخلة في bundle مدمج تنتج runtime instances منفصلة. ابتداءً من 5.107، ينطبق التحسين نفسه على CSS Modules التي يكون export type الخاص بها `text` أو `css-style-sheet` أو `style` أو `link`. النتيجة runtime overhead أقل وoutput أصغر في bundles التي تحتوي CSS بكثافة.
 
@@ -207,7 +225,9 @@ module.exports = {
 };
 ```
 
-### Pure Mode for CSS Modules
+<span id="pure-mode-for-css-modules"></span>
+
+### وضع pure في CSS Modules
 
 خيار parser جديد باسم `pure` لـ `css/module` و`css/auto` يحاكي strict pure mode في `postcss-modules-local-by-default`. عند تفعيله، يجب أن يحتوي كل selector على class أو id محلي واحد على الأقل، وإلا سيرفع webpack خطأ build. الهدف هو اكتشاف selectors العالمية غير المقصودة داخل CSS Modules قبل وصولها إلى production.
 
@@ -248,7 +268,9 @@ a {
 
 القواعد المتداخلة داخل ancestor يحتوي على local class تُعد متوافقة مع pure mode، و`&` يُحل إلى purity الخاصة بالـ parent rule، كما تُستثنى أجسام `@keyframes` و`@counter-style`.
 
-### `@value` in URLs and `@import`
+<span id="value-in-urls-and-import"></span>
+
+### `@value` داخل URLs و`@import`
 
 يمكن الآن استخدام identifiers الخاصة بـ `@value` في CSS Modules كمسار داخل `@import` وداخل مراجع `url()`. هذا يسهل تعريف المسارات وassets المشتركة مرة واحدة وإعادة استخدامها بين stylesheets.
 
@@ -265,7 +287,9 @@ a {
 
 تعمل الصيغ المقتبسة (`"./x"` و`'./x'`) والصيغ غير المقتبسة (`./x`) للقيمة. أي صيغة تكتبها تُفك وتُحل كـ module request، لذلك يمر asset عبر resolver ومسار assets المعتادين بدل أن يبقى identifier حرفيًا.
 
-### Multiple Aliases via `exportsConvention`
+<span id="multiple-aliases-via-exportsconvention"></span>
+
+### عدة aliases عبر `exportsConvention`
 
 أصبح شكل الدالة في `generator.exportsConvention` الخاص بـ CSS Modules يقبل `string[]` إلى جانب `string`. إرجاع array يصدر local class بكل اسم داخل array، بما يطابق سلوك `css-loader`. هذا مفيد عندما تريد توفير عدة aliases لـ class واحد، مثل الاسم الأصلي ونسخة بحروف كبيرة.
 
@@ -290,7 +314,9 @@ console.log(styles.btn); // hashed class
 console.log(styles.BTN); // hashed class نفسه مع alias بحروف كبيرة
 ```
 
-### `linkInsert` Hook
+<span id="linkinsert-hook"></span>
+
+### hook باسم `linkInsert`
 
 إذا أردت يومًا التحكم في المكان الذي يضيف فيه webpack وسم `<link>` الخاص بـ stylesheet داخل document، أصبح لديك hook لذلك. يعرض `CssLoadingRuntimeModule.getCompilationHooks(compilation)` hook جديدًا باسم `linkInsert`. يستقبل مصدر الإدراج الافتراضي، وهو `document.head.appendChild(link);`، وكذلك chunk، ويرجع JS المستخدم لإرفاق link.
 
@@ -321,7 +347,9 @@ module.exports = {
 
 الـ hook من نوع `SyncWaterfallHook<[string, Chunk]>`. أرجع `source` الافتراضي للحفاظ على السلوك الأصلي، أو أرجع JS خاصًا بك لتغيير مكان إرفاق link وطريقته.
 
-### `orderModules` Hook
+<span id="ordermodules-hook"></span>
+
+### hook باسم `orderModules`
 
 عندما يسحب chunk ملفات CSS من عدة ملفات، يكون ترتيب webpack الافتراضي topological sort لـ import graph. هذا مناسب غالبًا، لكن في مشاريع حقيقية قد يكون import graph غامضًا بما يكفي لإظهار تحذير "Conflicting order between CSS …"، بدون حل نظيف سوى إعادة هيكلة imports.
 
@@ -358,9 +386,13 @@ module.exports = {
 
 الـ hook من نوع `SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`. أول tap يرجع قيمة غير `undefined` هو الذي يفوز.
 
-## JavaScript and ESM
+<span id="javascript-and-esm"></span>
+
+## JavaScript وESM
 
-### Anonymous Default Export Naming
+<span id="anonymous-default-export-naming"></span>
+
+### تسمية default export المجهول
 
 أضاف Webpack 5.106 إصلاحًا يضبط `.name` على `"default"` للـ anonymous default exports، بما يطابق مواصفة ES. يعمل هذا بشكل صحيح، لكنه يحقن استدعاءات `Object.defineProperty` لا يمكن تصغير أسمائها، مما يزيد حجم bundle. بالنسبة لمستهلكي المكتبات، الذين نادرًا ما يعتمدون على `.name === "default"`، يكون هذا runtime helper الإضافي تكلفة بلا فائدة كبيرة.
 
@@ -390,7 +422,9 @@ module.exports = {
 };
 ```
 
-### Preserving `defer` and `source` Phase on Externals
+<span id="preserving-defer-and-source-phase-on-externals"></span>
+
+### الحفاظ على مرحلتي `defer` و`source` في externals
 
 يحافظ webpack الآن على كلمات import phase `defer` و`source` في external dependencies عند إخراج ESM، بالطريقة نفسها التي يحافظ بها على import attributes. سابقًا، كانت كلمة phase تُزال من العبارة الصادرة، لذلك كان `import defer * as ns from "x"` ضد external يفقد دلالة التأجيل في output.
 
@@ -461,7 +495,9 @@ realWork();
 
 W> تعمل annotation حاليًا فقط **داخل module الذي أُعلنت فيه**. نقلها عبر modules مخطط له في PR مستقبلية.
 
-## Resolver Updates
+<span id="resolver-updates"></span>
+
+## تحديثات resolver
 
 يضيف webpack الآن `"module-sync"` إلى `conditionNames` الافتراضية في resolver defaults، بما يتوافق مع Node.js. يوفّر Node.js شرط المجتمع `module-sync` لـ ESM القابل للتحميل بشكل متزامن، وهذا التغيير يؤثر في resolvers الخاصة بـ ESM وCJS وAMD وworker وwasm وbuild-dependency.
 
@@ -491,10 +527,12 @@ conditionNames: ["import", "module-sync", "module", "..."];
 }
 ```
 
-## Bug Fixes
+<span id="bug-fixes"></span>
+
+## إصلاحات الأخطاء
 
 تم حل عدة bugs منذ الإصدار [5.106](https://github.com/webpack/webpack/releases/tag/v5.106.0). راجع [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) لكل التفاصيل.
 
-## Thanks
+## شكر
 
 شكر كبير لكل المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring) الذين جعلوا Webpack 5.107 ممكنًا. دعمكم، سواء عبر مساهمات الكود أو التوثيق أو الرعاية المالية، يساعد Webpack على التطور والتحسن للجميع.
diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx
index 57a4f774da7d..ac87161b5b0f 100644
--- a/src/content/configuration/experiments.mdx
+++ b/src/content/configuration/experiments.mdx
@@ -237,8 +237,8 @@ export default {
 - استيرادات CSS: سيُضمِّن webpack استيرادات CSS داخل ملفّ CSS المُولَّد.
 - إعادة التحميل الساخن (HMR): يدعم webpack الـ HMR لملفّات CSS، أي أنّ التغييرات في ملفّات CSS ستظهر في المتصفّح من دون إعادة تحميل كاملة للصفحة.
 
-- <Badge text="5.107.0+" /> Scope hoisting (module concatenation) لـ CSS
-  Modules. حين يُفعَّل
+- <Badge text="5.107.0+" /> تحسين scope hoisting، أو module concatenation، لـ
+  CSS Modules. حين يُفعَّل
   [`optimization.concatenateModules`](/configuration/optimization/#optimizationconcatenatemodules)،
   فإنّ وحدات CSS التي يكون `exportType` لها `text` أو `css-style-sheet` أو
   `style` أو `link` تُدمَج في نسخة واحدة من الوحدة بدلاً من إبقائها نسخاً منفصلة
@@ -377,10 +377,10 @@ export default {
 
 <Badge text="5.107.0+" />
 
-Enable native HTML module support. Importing a `.html` file from JavaScript runs its tag references through the normal webpack pipeline, replacing the role `html-loader` has played for years. The flag registers the `html` module type on `NormalModuleFactory` and unlocks the HTML behaviors described below.
+يفعّل الدعم الأصلي لـ HTML modules. عند استيراد ملف `.html` من JavaScript، تمر مراجع الوسوم داخل الملف عبر pipeline العادية في webpack، وهذا يستبدل الدور الذي كان يؤديه `html-loader` لسنوات. يسجل هذا flag نوع module المسمى `html` داخل `NormalModuleFactory` ويفعّل سلوكيات HTML الموضحة أدناه.
 
-- Type: `boolean`
-- Default: `false`
+- النوع: `boolean`
+- الافتراضي: `false`
 
 **webpack.config.js**
 
@@ -393,7 +393,7 @@ export default {
 };
 ```
 
-Then import the HTML file from JavaScript. The default export is the processed HTML as a string, with all asset references resolved through webpack:
+بعد ذلك، استورد ملف HTML من JavaScript. يكون default export هو HTML المعالج كنص، مع حل كل مراجع assets عبر webpack:
 
 ```js
 // src/index.js
@@ -402,11 +402,11 @@ import page from "./page.html";
 document.documentElement.innerHTML = page;
 ```
 
-W> **This feature is experimental and partial.** Webpack 5.107 only implements the `html-loader` side: importing an HTML file from JS runs its tag references through the webpack pipeline. **HTML entry points** (using a `.html` file directly as `entry`, the `html-webpack-plugin` part) are **not supported yet** and are planned for the next minor release. The full story is tracked in issue [#536](https://github.com/webpack/webpack/issues/536).
+W> **هذه الميزة تجريبية وجزئية.** في webpack 5.107 تم تنفيذ جانب `html-loader` فقط: عند استيراد ملف HTML من JS، تمر مراجع الوسوم عبر pipeline الخاصة بـ webpack. أما **HTML entry points**، أي استخدام ملف `.html` مباشرة كـ `entry`، وهو الجزء المرتبط بـ `html-webpack-plugin`، فهي **غير مدعومة بعد** ومخطط لها في الإصدار minor التالي. يمكن متابعة التفاصيل الكاملة في issue [#536](https://github.com/webpack/webpack/issues/536).
 
 #### Inline `<style>` tags
 
-Inline `<style>` blocks inside an HTML module are routed through webpack's CSS pipeline as virtual CSS modules with `exportType: "text"`. `url()` and `@import` references are resolved relative to the HTML file, and the processed CSS text is written back into the original `<style>` tag in the emitted HTML string.
+يتم تمرير كتل `<style>` المضمنة داخل HTML module عبر CSS pipeline في webpack كـ CSS modules افتراضية باستخدام `exportType: "text"`. تُحل مراجع `url()` و`@import` نسبة إلى ملف HTML، ثم يُكتب نص CSS المعالج مرة أخرى داخل وسم `<style>` الأصلي في نص HTML الناتج.
 
 ```html
 <!-- src/page.html -->
@@ -427,11 +427,11 @@ Inline `<style>` blocks inside an HTML module are routed through webpack's CSS p
 </html>
 ```
 
-`<style type="text/css">` and `<style>` with no `type` attribute are processed. Anything with a non-CSS `type` is passed through unchanged.
+تتم معالجة `<style type="text/css">` و`<style>` الذي لا يحتوي على الخاصية `type`. أما أي وسم يحمل `type` غير خاص بـ CSS فيمر بدون تغيير.
 
 #### Inline `<script>` tags
 
-Inline `<script>` bodies are routed through the same entry pipeline used for [`<script src>`](#script-src-and-link-relmodulepreload). Each `<script>` body becomes its own webpack entry: classic inline scripts are bundled as CommonJS, and `<script type="module">` bodies are bundled as ESM. The tag in the emitted HTML is rewritten to `<script src="…">` pointing at the generated chunk, with the body cleared.
+يتم تمرير محتوى وسوم `<script>` المضمنة عبر entry pipeline نفسها المستخدمة مع [`<script src>`](#script-src-and-link-relmodulepreload). يصبح كل محتوى داخل `<script>` عبارة عن webpack entry مستقل: scripts الكلاسيكية المضمنة تُحزّم كـ CommonJS، أما محتوى `<script type="module">` فيُحزّم كـ ESM. في HTML الناتج، يُعاد كتابة الوسم إلى `<script src="…">` يشير إلى chunk المولّد، مع تفريغ المحتوى الداخلي.
 
 ```html
 <!-- src/page.html -->
@@ -450,15 +450,15 @@ Inline `<script>` bodies are routed through the same entry pipeline used for [`<
 </html>
 ```
 
-The same behaviors that apply to external `<script src>` apply here too:
+تنطبق هنا السلوكيات نفسها الخاصة بـ `<script src>` الخارجي:
 
-- When [`output.module`](/configuration/output/#outputmodule) is enabled, classic inline `<script>` tags are auto-upgraded to `type="module"`, matching the auto-upgrade for `<script src>`.
-- `webpackIgnore` works on inline `<script>` tags as well, leaving the original body untouched.
-- Non-JS `type` values such as `application/ld+json` and `importmap` pass through unchanged.
+- عند تفعيل [`output.module`](/configuration/output/#outputmodule)، تتم ترقية وسوم `<script>` الكلاسيكية المضمنة تلقائيًا إلى `type="module"`، مثل الترقية التلقائية في `<script src>`.
+- يعمل `webpackIgnore` أيضًا مع وسوم `<script>` المضمنة، ويترك المحتوى الأصلي كما هو.
+- قيم `type` غير الخاصة بـ JS، مثل `application/ld+json` و`importmap`، تمر بدون تغيير.
 
 #### `<script src>` and `<link rel="modulepreload">`
 
-`<script src>` and `<link rel="modulepreload">` references inside an HTML module become real webpack entries. The emitted chunk URL is rewritten back into the HTML string, so hashed filenames work the same way they do for JavaScript imports.
+تصبح مراجع `<script src>` و`<link rel="modulepreload">` داخل HTML module عبارة عن webpack entries حقيقية. ثم يُعاد كتابة URL الخاص بالـ chunk الناتج داخل نص HTML، لذلك تعمل أسماء الملفات التي تحتوي على hash بالطريقة نفسها التي تعمل بها مع JavaScript imports.
 
 ```html
 <!-- src/page.html -->
@@ -474,16 +474,16 @@ The same behaviors that apply to external `<script src>` apply here too:
 </html>
 ```
 
-A few behaviors to keep in mind:
+هناك بعض السلوكيات التي يجب الانتباه لها:
 
-- Multiple `<script src>` tags on the same page share a single runtime. Within each group (classic or `type="module"`), the leader holds the runtime and the rest declare `dependOn` on it.
-- `<link rel="modulepreload">` entries stay independent and are never imported by sibling scripts, preserving "preload without execute" semantics.
-- When [`output.module`](/configuration/output/#outputmodule) is enabled, classic `<script src>` tags are auto-upgraded to `<script type="module" src>` so the emitted ES-module chunks load in the correct mode.
-- Non-JS script types (`application/ld+json`, `importmap`, …) and data URIs flow through unchanged and are not bundled as JS.
+- وسوم `<script src>` المتعددة في الصفحة نفسها تشارك runtime واحدًا. داخل كل مجموعة، سواء كانت classic أو `type="module"`، يحمل العنصر الرئيسي runtime وتعلن بقية العناصر `dependOn` عليه.
+- تبقى entries الخاصة بـ `<link rel="modulepreload">` مستقلة ولا يتم استيرادها من scripts المجاورة، مما يحافظ على معنى "preload without execute".
+- عند تفعيل [`output.module`](/configuration/output/#outputmodule)، تتم ترقية وسوم `<script src>` الكلاسيكية تلقائيًا إلى `<script type="module" src>` حتى تُحمّل chunks الخاصة بـ ES modules بالوضع الصحيح.
+- أنواع scripts غير الخاصة بـ JS، مثل `application/ld+json` و`importmap` وdata URIs، تمر بدون تغيير ولا تُحزّم كـ JS.
 
 #### `webpackIgnore` magic comment
 
-Placing an HTML `<!-- webpackIgnore: true -->` comment immediately before a tag tells webpack to skip URL resolution for that tag's `src`, `href`, `srcset`, and similar attributes. See the full description under [magic comments](/api/module-methods/#webpackignore).
+وضع تعليق HTML بالشكل `<!-- webpackIgnore: true -->` مباشرة قبل وسم معيّن يخبر webpack بتجاوز URL resolution لذلك الوسم في خصائص مثل `src` و`href` و`srcset` وما يشبهها. راجع الشرح الكامل ضمن [magic comments](/api/module-methods/#webpackignore).
 
 ### experiments.lazyCompilation
 
@@ -583,12 +583,12 @@ export default {
 
 <Badge text="5.107.0+" />
 
-Enable native TypeScript support. With the flag turned on, webpack compiles `.ts`, `.cts`, and `.mts` files (and the matching `data:text/typescript` and `data:application/typescript` data URIs) directly, without any external loader. Under the hood it calls Node.js's built-in [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options).
+يفعّل الدعم الأصلي لـ TypeScript. عند تفعيل هذا flag، يترجم webpack ملفات `.ts` و`.cts` و`.mts` مباشرة، وكذلك data URIs المطابقة مثل `data:text/typescript` و`data:application/typescript`، بدون أي loader خارجي. داخليًا، يستدعي webpack دالة Node.js المدمجة [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options).
 
-- Type: `boolean`
-- Default: `false` (auto-enabled by [`experiments.futureDefaults`](#experimentsfuturedefaults))
+- النوع: `boolean`
+- الافتراضي: `false`، ويتم تفعيله تلقائيًا بواسطة [`experiments.futureDefaults`](#experimentsfuturedefaults).
 
-W> Requires Node.js >= 22.6 for the stable `module.stripTypeScriptTypes` API.
+W> يتطلب Node.js >= 22.6 لاستخدام API المستقر `module.stripTypeScriptTypes`.
 
 ```js
 export default {
@@ -599,13 +599,13 @@ export default {
 };
 ```
 
-Enabling the flag also wires up sensible defaults: default rules for `.ts` / `.cts` / `.mts`, `.ts` added to extension resolution (before `.js`), `extensionAlias` so an `import "./foo.js"` also tries `./foo.ts` (and `.cjs` / `.mjs` → `.cts` / `.mts`), [`tsconfig.json` resolution](/configuration/resolve/#resolvetsconfig), and the `"typescript"` conditional-exports key so monorepo packages can ship `.ts` sources via `package.json#exports`.
+تفعيل هذا flag يضبط أيضًا إعدادات افتراضية مناسبة: rules افتراضية لـ `.ts` و`.cts` و`.mts`، وإضافة `.ts` إلى extension resolution قبل `.js`، وضبط `extensionAlias` بحيث يحاول `import "./foo.js"` أيضًا استخدام `./foo.ts`، وكذلك تحويل `.cjs` / `.mjs` إلى `.cts` / `.mts`، ودعم [`tsconfig.json` resolution](/configuration/resolve/#resolvetsconfig)، وإضافة مفتاح conditional exports باسم `"typescript"` حتى تستطيع packages داخل monorepo نشر مصادر `.ts` عبر `package.json#exports`.
 
-W> The transform only **erases types**. It does **not** perform type checking, and it does not handle JSX / `.tsx` or non-erasable TypeScript syntax (`enum`, `namespace` with runtime members, parameter-property constructors, `export =`, decorator metadata). These are the same constraints TypeScript enforces with the [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) tsconfig option.
+W> هذا التحويل **يزيل الأنواع فقط**. لا يقوم بعملية type checking، ولا يتعامل مع JSX / `.tsx` أو صياغات TypeScript التي لا يمكن إزالتها فقط، مثل `enum` و`namespace` التي تحتوي على أعضاء runtime، وparameter-property constructors، و`export =`، وdecorator metadata. هذه هي القيود نفسها التي يفرضها TypeScript عند استخدام خيار tsconfig المسمى [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly).
 
-For type checking, pair the flag with `tsc --noEmit` or [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). For JSX or non-erasable TypeScript syntax, keep using `ts-loader` or `swc-loader`.
+لإجراء type checking، استخدم هذا flag مع `tsc --noEmit` أو [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). أما عند استخدام JSX أو صياغات TypeScript غير قابلة للإزالة فقط، فاستمر في استخدام `ts-loader` أو `swc-loader`.
 
-The webpack repo ships two reference examples:
+يوفر مستودع webpack مثالين مرجعيين:
 
-- [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) for the built-in `experiments.typescript` setup.
-- [`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) for the `ts-loader` fallback when non-erasable syntax is required.
+- [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) لإعداد `experiments.typescript` المدمج.
+- [`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) لاستخدام `ts-loader` كبديل عندما تكون الصياغة غير القابلة للإزالة فقط مطلوبة.
diff --git a/src/content/configuration/externals.mdx b/src/content/configuration/externals.mdx
index a2f0f1aa05d5..4c3ea10f37bd 100644
--- a/src/content/configuration/externals.mdx
+++ b/src/content/configuration/externals.mdx
@@ -472,11 +472,11 @@ jq(".my-element").animate(/* ... */);
 
 لاحظ أنه سيكون هناك عبارة `import` في output bundle.
 
-#### Preserving phase keywords
+#### الحفاظ على phase keywords
 
 <Badge text="5.107.0+" />
 
-The `defer` and `source` import phase keywords are preserved on `module` externals the same way [import attributes](https://github.com/tc39/proposal-import-attributes) are. A static `import defer * as ns from "mod"` against a `module` external is emitted as a native `import defer * as ...` statement, and `import source v from "mod"` becomes `import source ... from "mod"`. The same external imported with two different phases produces distinct `ExternalModule` instances, so neither phase is silently dropped.
+يتم الحفاظ على import phase keywords مثل `defer` و`source` مع `module` externals بالطريقة نفسها التي يتم بها الحفاظ على [import attributes](https://github.com/tc39/proposal-import-attributes). عند استخدام import ثابت مثل `import defer * as ns from "mod"` مع `module` external، يخرجه webpack كعبارة native بالشكل `import defer * as ...`، وتصبح `import source v from "mod"` بالشكل `import source ... from "mod"`. وإذا تم استيراد external نفسه بمرحلتين مختلفتين، فسينتج webpack نسخ `ExternalModule` منفصلة، لذلك لا يتم إسقاط أي phase بصمت.
 
 {/* eslint-skip */}
 
@@ -537,11 +537,11 @@ async function foo() {
 
 لاحظ أن output bundle سيحتوي على عبارة `import()`.
 
-#### Preserving phase keywords
+#### الحفاظ على phase keywords
 
 <Badge text="5.107.0+" />
 
-Dynamic `import.defer(...)` and `import.source(...)` are also preserved on `import` externals when the import function name is the default `"import"`. The phase keyword is emitted in the output instead of being stripped.
+يتم الحفاظ أيضًا على `import.defer(...)` و`import.source(...)` الديناميكية مع `import` externals عندما يكون اسم دالة import هو الاسم الافتراضي `"import"`. يتم إخراج phase keyword في الناتج بدل إزالته.
 
 {/* eslint-skip */}
 
diff --git a/src/content/contribute/index.mdx b/src/content/contribute/index.mdx
index a8b4e0973b90..10a7f0fd0be5 100644
--- a/src/content/contribute/index.mdx
+++ b/src/content/contribute/index.mdx
@@ -3,9 +3,10 @@ title: المساهمون
 sort: -1
 contributors:
   - semon009
+  - RlxChap2
 ---
 
-الأشخاص المساهمين في تطوير Webpack بدافع حبهم للمصادر المفتوحة، ومستخدمينا، والـecosystem، والأهم من ذلك، سعيهم المشترك لتطوير الويب. وبفضل نموذج التمويل والشفافية الذي نتبعه [Open Collective](https://opencollective.com/webpack)، نستطيع توجيه الدعم والتمويل عبر المساهمين، والمشاريع التابعة، وفرق العمل الأساسية والمساهمين. للتبرع، انقر على الزر أدناه...
+يساهم أشخاص كثيرون في تطوير webpack بدافع حبهم للمصدر المفتوح، وحرصهم على المستخدمين، ورغبتهم المشتركة في تطوير الويب. وبفضل نموذج التمويل والشفافية عبر [Open Collective](https://opencollective.com/webpack)، نستطيع توجيه الدعم إلى المساهمين، والمشاريع التابعة، وفرق العمل الأساسية. للتبرع، استخدم الزر أدناه.
 
 <div className="flex justify-center">
 
@@ -17,69 +18,71 @@ contributors:
   <img
     src="https://opencollective.com/webpack/donate/button@2x.png?color=blue"
     width={300}
-    alt="Donate to webpack"
+    alt="تبرع إلى webpack"
   />
 </a>
 
 </div>
 
-لكن ما هو العائد على الاستثمار؟
+لكن ما العائد من هذا الدعم؟
 
-## المبرمجون
+## المطورون
 
-أهم ميزة أساسية نرغب في توفيرها هي تجربة تطوير ممتعة. يمكن للمطورين أمثالكم المساهمة في ذلك من خلال توثيق شامل وغني، وتقديم طلبات سحب لمساعدتنا في تغطية حالات استخدام متخصصة، ودعم ما تحبونه في Webpack.
+أهم ما نريد تقديمه هو تجربة تطوير ممتعة. يمكن للمطورين المساهمة في ذلك عبر تحسين التوثيق، وإرسال pull requests تغطي حالات استخدام متخصصة، ودعم الأجزاء التي يعتمدون عليها في webpack.
 
 ### كيف يمكنني المساعدة؟
 
-يمكن لأي شخص المساعدة من خلال القيام بأي مما يلي:
+يمكن لأي شخص المساعدة بإحدى الطرق التالية:
 
-- اطلب من صاحب العمل استخدام Webpack في المشاريع.
-- ساعدنا في كتابة المحتوى الموجود على هذا الموقع والحفاظ عليه (انظر الى [دليل الكاتب](/contribute/writers-guide/)).
-- ساهم في [core repository](https://github.com/webpack/webpack).
-- كن داعمًا أو راعيًا على [open collective](https://opencollective.com/webpack#support).
+- اطلب من جهة عملك استخدام webpack في المشاريع.
+- ساعدنا في كتابة محتوى هذا الموقع وصيانته. راجع [دليل الكاتب](/contribute/writers-guide/).
+- ساهم في [مستودع core](https://github.com/webpack/webpack).
+- كن داعمًا أو راعيًا عبر [Open Collective](https://opencollective.com/webpack#support).
 
-### طلب من صاحب العمل
+### اطلب من جهة عملك دعم webpack
 
-يمكنك أن تطلب من صاحب العمل تحسين سير عملك باستخدام Webpack: أداة شاملة للخطوط والصور وتحسينها، بالإضافة إلى JSON. اشرح لهم كيف سيحاول Webpack تجميع التعليمات البرمجية والموارد بأفضل شكل ممكن للحصول على أصغر حجم ملف، مما يؤدي إلى مواقع وتطبيقات أسرع.
+يمكنك أن تطلب من جهة عملك تحسين سير العمل باستخدام webpack: أداة واحدة تتعامل مع JavaScript وCSS والخطوط والصور وJSON وغيرها من الموارد. اشرح كيف يساعد webpack على تجميع الكود والموارد بأفضل شكل ممكن، مما ينتج ملفات أصغر ومواقع وتطبيقات أسرع.
 
 ### مساهماتكم
 
-المساهمة في تطوير Webpack ليست انضمامًا إلى نادٍ حصري. بصفتك مطورًا، فأنت تُساهم في تعزيز صحة المشاريع الأخرى التي تعتمد عليه. تعتمد مئات، بل آلاف المشاريع، على Webpack، ومساهمتك ستجعل الـecosystem أفضل لجميع المستخدمين.
+المساهمة في تطوير webpack ليست حكرًا على مجموعة مغلقة. بصفتك مطورًا، فأنت تساعد أيضًا المشاريع الأخرى التي تعتمد عليه. تعتمد مئات، بل آلاف، المشاريع على webpack، ومساهمتك تجعل المنظومة أفضل لكل المستخدمين.
 
-أما بقية هذا القسم من الموقع فهو مُخصّص للمطورين أمثالكم الراغبين في الانضمام إلى مجتمعنا المتنامي باستمرار.
+أما بقية هذا القسم من الموقع فهو مخصص للمطورين الراغبين في الانضمام إلى مجتمعنا المتنامي.
 
 - [كتابة loader](/contribute/writing-a-loader)
 - [كتابة plugin](/contribute/writing-a-plugin)
-- [أنماط الإضافات](/contribute/plugin-patterns)
+- [أنماط plugins](/contribute/plugin-patterns)
 - [عملية الإصدار](/contribute/release-process)
 
-## المديرين التنفيذيين
+## المديرون التنفيذيون
 
-يمكن للمديرين التقنيين ونواب الرئيس والمالكين المساعدة أيضاً!
+يمكن للمديرين التقنيين، ونواب الرئيس، وأصحاب القرار المساعدة أيضًا.
 
-Webpack أداة شاملة لتجميع التعليمات البرمجية. تدعم هذه الأداة الخطوط والصور والبيانات وغيرها، وذلك بفضل الإضافات والـloaders التي يطورها المجتمع. إن إدارة جميع مواردك بواسطة أداة واحدة أمرٌ في غاية الأهمية، إذ يُمكّنك أنت أو فريقك من تقليل الوقت المُستغرق في التأكد من سلامة عمل النظام، وتكريس المزيد من الوقت لتطوير منتجك.
+webpack أداة شاملة لتجميع الكود. تدعم الخطوط والصور والبيانات وغيرها بفضل plugins وloaders التي يطورها المجتمع. إدارة الموارد عبر أداة واحدة تساعد فريقك على تقليل الوقت المصروف في التأكد من سلامة نظام البناء، وتمنحه وقتًا أكبر لتطوير المنتج.
 
 ### الرعاية
 
-إلى جانب المساعدة المالية، يمكن للشركات دعم Webpack من خلال:
+إلى جانب الدعم المالي، يمكن للشركات دعم webpack عبر:
 
-- توفير مطورين غير منشغلين حاليًا بمشروع ما.
-- المساهمة بقدرات حاسوبية لتحسين التكامل المستمر (CI) وregression testing.
+- توفير مطورين غير منشغلين حاليًا بمشروع آخر.
+- المساهمة بقدرات حوسبة لتحسين التكامل المستمر (CI) واختبارات regression.
 
-يمكنكم أيضاً تشجيع مطوريكم على المساهمة في ecosystem من خلال نشر أدوات تحميل Webpack والإضافات وغيرها من الأدوات المساعدة كمصادر مفتوحة. وكما ذكرنا سابقاً، سنكون ممتنين للغاية لأي مساعدة في تطوير (CI/CD) لدينا.
+يمكنكم أيضًا تشجيع مطوريكم على المساهمة في المنظومة عبر نشر loaders وplugins وأدوات مساعدة مفتوحة المصدر. وسنكون ممتنين لأي مساعدة في تطوير سير عمل CI/CD لدينا.
 
 ### أي شخص آخر
 
-إلى كل من يرغب في دعم مهمتنا - كالمستثمرين، والجهات الحكومية، والوكالات الرقمية، وغيرها - يسعدنا التعاون معكم، فنحن نقدم إحدى أفضل حزم npm، لتحسين منتجاتكم! لا تترددوا في التواصل معنا لطرح أي استفسارات.
+إلى كل من يرغب في دعم مهمتنا، مثل المستثمرين، والجهات الحكومية، والوكالات الرقمية، وغيرها: يسعدنا التعاون معكم. webpack من أكثر حزم npm استخدامًا، ودعمكم يساعد في تحسين منتجاتكم ومنتجات آلاف المطورين. لا تترددوا في التواصل معنا لأي استفسار.
 
 ## المجتمع
 
-هل تبحث عن مساعدة، أو لديك أسئلة، أو ترغب في التواصل مع زملائك المساهمين في Webpack؟
+هل تبحث عن مساعدة، أو لديك أسئلة، أو ترغب في التواصل مع مساهمين آخرين في webpack؟
 
-انضم إلى [الـ Discord الخاص بنا](https://discord.com/invite/5sxFZPdx2k) للحصول على الدعم الفوري والمناقشات والتعاون.
+انضم إلى [Discord الخاص بنا](https://discord.com/invite/5sxFZPdx2k) للحصول على الدعم الفوري، والمناقشات، والتعاون.
 
-## Pull requests
+## طلبات السحب
 
-يتم الآن تحديث توثيق ميزات وتغييرات Webpack باستمرار مع تطور Webpack. وقد تم إنشاء نظام آلي لإنشاء الاخطاء، وقد أثبت فعاليته في السنوات الأخيرة.
-عند دمج ميزة جديدة، يتم إنشاء مشكلة في مستودعنا تتضمن طلب توثيق، ونتوقع حلها في أسرع وقت ممكن. هذا يعني وجود ميزات وتغييرات، بما في ذلك التغييرات الجذرية، بانتظار التوثيق والمراجعة والإصدار. مع ذلك، إذا تخلى صاحب طلب السحب (الـpull request) عنه لأكثر من 30 يومًا، فقد نُصنّفه على أنه قديم. وقد نتولى العمل اللازم لإكماله.
-إذا منح صاحب طلب السحب فريق توثيق Webpack صلاحية الكتابة على فرعه، فسنقوم بالدمج مباشرةً في فرعك وإكمال العمل. في الحالات الأخرى، قد نضطر إلى البدء من جديد بأنفسنا أو بتفويض المهمة إلى أعضاء المجتمع الراغبين. قد يؤدي هذا إلى جعل طلب السحب (الـpull request) الخاص بك غير ضروري، وقد يتم إغلاقه كجزء من عملية التنظيف.
+يتم تحديث توثيق ميزات وتغييرات webpack باستمرار مع تطور المشروع. لدينا نظام آلي لإنشاء issues الخاصة بالتوثيق، وقد أثبت فعاليته في السنوات الأخيرة.
+
+عند دمج ميزة جديدة، يتم إنشاء issue في مستودعنا تتضمن طلب توثيق، ونتوقع حلها في أسرع وقت ممكن. هذا يعني أن هناك ميزات وتغييرات، بما في ذلك التغييرات الجذرية، تنتظر التوثيق والمراجعة والإصدار. مع ذلك، إذا بقي pull request مهملًا لأكثر من 30 يومًا، فقد نصنفه على أنه قديم ونتولى العمل اللازم لإكماله.
+
+إذا منح صاحب pull request فريق توثيق webpack صلاحية الكتابة على الفرع، فسنقوم بالدمج مباشرة في فرعه وإكمال العمل. في الحالات الأخرى، قد نضطر إلى البدء من جديد بأنفسنا أو تفويض المهمة إلى أعضاء المجتمع الراغبين. قد يجعل ذلك pull request الخاص بك غير ضروري، وقد يتم إغلاقه كجزء من عملية التنظيف.
diff --git a/src/content/contribute/plugin-patterns.mdx b/src/content/contribute/plugin-patterns.mdx
index 5eb2df48c0b3..289793aadff1 100644
--- a/src/content/contribute/plugin-patterns.mdx
+++ b/src/content/contribute/plugin-patterns.mdx
@@ -3,6 +3,7 @@ title: أنماط الإضافات (Plugins)
 sort: 5
 contributors:
   - semon009
+  - RlxChap2
 ---
 
 تتيح الإضافات إمكانية إجراء تعديلات غير محدودة على نظام بناء Webpack. وهذا يسمح بإنشاء أنواع أصول مخصصة (custom asset)، وإجراء تعديلات فريدة على عملية البناء، أو حتى تحسين بيئة تشغيل Webpack باستخدام البرمجيات الوسيطة. فيما يلي بعض ميزات Webpack التي تُصبح مفيدة عند كتابة الإضافات.
@@ -56,7 +57,9 @@ W> **تحذير بشأن الإهمال**: ستظل وظائف المصفوفا
 - `chunk.getModules()`: مصفوفة (array) من الـ Modules المضمنة في الـ Chunk. وبالتالي، يمكنك البحث في تبعيات كل module لتعلم ما هي الـ source files الأولية التي يتم تغذيتها في الـ Chunk ما.
 - `chunk.files`: مجموعة من أسماء ملفات الـ output التي تم إنشاؤها بواسطة الـ chunk. يمكنك الوصول إلى مصادر الـ asset هذه من الجدول `compilation.assets`.
 
-### Monitoring the watch graph
+<span id="monitoring-the-watch-graph"></span>
+
+### مراقبة watch graph
 
 أثناء تشغيل برنامج وسيط Webpack، تتضمن كل عملية تجميع مجموعة `fileDependencies` (التي تحدد الملفات التي تتم مراقبتها) والـ `fileTimestamps` `Map` التي تربط مسارات الملفات التي تتم مراقبتها بالطابع الزمني. تُعد هذه المجموعات مفيدة للغاية لاكتشاف الملفات التي تغيرت أثناء عملية التجميع.
 
diff --git a/src/content/plugins/NoEmitOnErrorsPlugin.mdx b/src/content/plugins/NoEmitOnErrorsPlugin.mdx
index 78a38721caaa..9ddab84242fd 100644
--- a/src/content/plugins/NoEmitOnErrorsPlugin.mdx
+++ b/src/content/plugins/NoEmitOnErrorsPlugin.mdx
@@ -1,11 +1,13 @@
 ---
-title: إضافة منع الاصدار عند وجود الاخطاء
+title: NoEmitOnErrorsPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-`NoEmitOnErrorsPlugin`: تسمح لك بتفادي اضافة الأصول عندما يكون هناك اي أخطاء. مفعلة افتراضياً، يمكنك تعطيلها بأستخدام [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors)
+يسمح لك `NoEmitOnErrorsPlugin` بمنع emit للـ assets عند وجود أخطاء. يكون مفعّلًا افتراضيًا، ويمكن تعطيله عبر [`optimization.emitOnErrors`](/configuration/optimization/#optimizationemitonerrors).
+
 **webpack.config.js**
 
 ```js
diff --git a/src/content/plugins/automatic-prefetch-plugin.mdx b/src/content/plugins/automatic-prefetch-plugin.mdx
index 99a9bf7d5058..a98ef15e8816 100644
--- a/src/content/plugins/automatic-prefetch-plugin.mdx
+++ b/src/content/plugins/automatic-prefetch-plugin.mdx
@@ -1,13 +1,14 @@
 ---
-title: إضافة إعادة التحميل التلقائي
+title: AutomaticPrefetchPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-`AutomaticPrefetchPlugin` تستكشف جميع المودلات من التجميعة مسبقاً بينما تنتظر التغييرات ، في محاولة تحسين اوقات البناء كونها في ارتفاع مستمر. مقارنةً ب[`PrefetchPlugin`](/plugins/prefetch-plugin/) التي تستكشف مودل واحد مسبقاً
+يفحص `AutomaticPrefetchPlugin` كل modules من compilation السابقة ويجلبها مسبقًا أثناء انتظار التغييرات، بهدف تحسين أوقات rebuild. يختلف ذلك عن [`PrefetchPlugin`](/plugins/prefetch-plugin/) الذي يجلب module واحدًا مسبقًا.
 
-ملاحظة> من غير المتوقع ان يكون لها فائدة فعلية بالنسبة للاداء كون اوقات البناء التدريجية سريعه.
+T> لا يُتوقع أن يقدم هذا plugin فائدة كبيرة للأداء في أغلب الحالات، لأن أوقات rebuild التزايدية تكون سريعة عادة.
 
 **webpack.config.js**
 
diff --git a/src/content/plugins/banner-plugin.mdx b/src/content/plugins/banner-plugin.mdx
index c652bb4d6688..dedea5bd8e65 100644
--- a/src/content/plugins/banner-plugin.mdx
+++ b/src/content/plugins/banner-plugin.mdx
@@ -1,20 +1,21 @@
 ---
-title: اضافة البنر
+title: BannerPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 related:
   - title: banner-plugin-hashing test
     url: https://github.com/webpack/webpack/blob/main/test/configCases/plugins/banner-plugin-hashing/webpack.config.js
 ---
 
-يضيف بنر اعلى كل جزء تم توليده
+يضيف banner في أعلى كل chunk يتم توليده.
 
 ```js
 import webpack from "webpack";
 
 new webpack.BannerPlugin(banner);
-// او
+// أو
 new webpack.BannerPlugin(options);
 ```
 
@@ -22,23 +23,23 @@ new webpack.BannerPlugin(options);
 
 ```ts
 {
-  banner: string | function, // البنر ك سترنق او دالة ، ستكون داخل تعليق
-  raw: boolean, // اذا كانت صحيحة ، البنر لن يكون داخل تعليق
-  entryOnly: boolean, // اذا كانت صحيحة ، سيكون البنر مُضاف الى اجزاء الادخال فقط
-  test: string | RegExp | [string, RegExp], // يتضمن جميع المودلات الذي نجحت في اختبار التأكيد
-  include: string | RegExp | [string, RegExp], // يتضمن جميع المودلات التي تطابق أي من هذه الحالات
-  exclude: string | RegExp | [string, RegExp], // استثناء جميع المولات التي تطابق أي من هذه الحالات
-  footer?: boolean, // اذا كانت صحيحة، سوف يتم وضع البنر في نهاية التجميعة
-  stage?: number, // المرحلة التي يجب فيها اضافة البنر اثناء عملية التجميع
+  banner: string | function, // نص banner أو دالة، وسيتم وضعه داخل تعليق
+  raw: boolean, // إذا كانت true، فلن يضع webpack banner داخل تعليق
+  entryOnly: boolean, // إذا كانت true، فسيضاف banner إلى entry chunks فقط
+  test: string | RegExp | [string, RegExp], // يشمل كل modules التي تطابق الشرط
+  include: string | RegExp | [string, RegExp], // يشمل modules المطابقة لهذه الشروط
+  exclude: string | RegExp | [string, RegExp], // يستبعد modules المطابقة لهذه الشروط
+  footer?: boolean, // إذا كانت true، يوضع banner في نهاية bundle
+  stage?: number, // المرحلة التي يضاف فيها banner أثناء compilation
 }
 ```
 
-## الاستعمال
+## الاستخدام
 
 ```js
 import webpack from "webpack";
 
-// سترنق
+// نص
 new webpack.BannerPlugin({
   banner: "hello world",
 });
@@ -48,17 +49,17 @@ new webpack.BannerPlugin({
   banner: (yourVariable) => `yourVariable: ${yourVariable}`,
 });
 
-// سيتم إضافة رسالة البنر بعد التصغير وأي تعديل على الأصل
+// إضافة رسالة banner بعد التصغير وأي تعديل على asset
 new webpack.BannerPlugin({
   raw: true,
-  banner: "/* البنر عبارة عن سترنق */",
+  banner: "/* banner كنص خام */",
   stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
 });
 ```
 
-## المواضع
+## placeholders
 
-منذ webpack 2.5.0, يتم تقييم المواضع في سترنق `banner`
+منذ webpack 2.5.0، يتم تقييم placeholders داخل نص `banner`.
 
 ```js
 import webpack from "webpack";
diff --git a/src/content/plugins/context-exclusion-plugin.mdx b/src/content/plugins/context-exclusion-plugin.mdx
index d03b7f1a3591..942a7c14e1a9 100644
--- a/src/content/plugins/context-exclusion-plugin.mdx
+++ b/src/content/plugins/context-exclusion-plugin.mdx
@@ -1,12 +1,14 @@
 ---
-title: إضافه سياق الإستثناء
+title: ContextExclusionPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-_السياق_ يشير الى [التعبيرات المنطقية الديناميكية في import() او require()](/guides/dependency-management/#dynamic-expressions-in-import-or-require) مثل `require('./locale/' + الاسم + '.json')`.
-`ContextExclusionPlugin`: تسمح لك بإستبعاد السياق، ارفق تعبيرات نمطية كـسبب عند تشغيل الإضافه لتستبعد كل السياق الذي يطابقها
+يشير _context_ إلى [التعابير الديناميكية في `import()` أو `require()`](/guides/dependency-management/#dynamic-expressions-in-import-or-require)، مثل `require("./locale/" + name + ".json")`.
+
+يسمح لك `ContextExclusionPlugin` باستبعاد ملفات من context عبر RegExp. مرر RegExp عند إنشاء plugin، وسيتم استبعاد كل request يطابقه.
 
 **webpack.config.js**
 
diff --git a/src/content/plugins/hot-module-replacement-plugin.mdx b/src/content/plugins/hot-module-replacement-plugin.mdx
index 849fdd079fec..efa036456b44 100644
--- a/src/content/plugins/hot-module-replacement-plugin.mdx
+++ b/src/content/plugins/hot-module-replacement-plugin.mdx
@@ -1,8 +1,9 @@
 ---
-title: إضافة تبديل المودل اللحظي
+title: HotModuleReplacementPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 related:
   - title: Concepts - Hot Module Replacement
     url: /concepts/hot-module-replacement
@@ -10,13 +11,13 @@ related:
     url: /api/hot-module-replacement
 ---
 
-يُفعل [تبديل المودل اللحظي](/concepts/hot-module-replacement) كما هو معروف ب HMR
+يفعّل [Hot Module Replacement](/concepts/hot-module-replacement)، المعروف اختصارًا بـ HMR.
 
-ملاحظة> لا يُنصح بإستخدامه **على الاطلاق** في الإنتاج
+W> لا يُنصح باستخدامه في production.
 
-## الاستعمال المبدئي
+## الاستخدام الأساسي
 
-تفعيل HMR هو شيء مباشر وفي معظم الحالات لا يتطلب اي خيارات اضافية
+تفعيل HMR مباشر غالبًا ولا يحتاج إلى خيارات إضافية.
 
 ```js
 new webpack.HotModuleReplacementPlugin({
diff --git a/src/content/plugins/internal-plugins.mdx b/src/content/plugins/internal-plugins.mdx
index 044547e861fe..afcef20fad8a 100644
--- a/src/content/plugins/internal-plugins.mdx
+++ b/src/content/plugins/internal-plugins.mdx
@@ -52,7 +52,7 @@ Plugins تؤثر في compiler.
 
 ## entry
 
-Plugins تضيف entry chunks إلى compilation.
+تضيف plugins entry chunks إلى compilation.
 
 ### EntryPlugin
 
diff --git a/src/content/plugins/limit-chunk-count-plugin.mdx b/src/content/plugins/limit-chunk-count-plugin.mdx
index a05336291a3d..90c616cfd930 100644
--- a/src/content/plugins/limit-chunk-count-plugin.mdx
+++ b/src/content/plugins/limit-chunk-count-plugin.mdx
@@ -1,12 +1,12 @@
 ---
-title: إضافة تحديد عدد الاجزاء
+title: LimitChunkCountPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-عندما تقوم بكتابة الكود، من المحتمل ان تكون بالفعل اضفت الكثير من نقاط الافتراق لتحميل اشياء حسب الحاجة. بعد جمع الكود (compile) ستلاحظ ان بعض الاجزاء صغيرة للغاية - مما ينشئ طلبات HTTP اكبر.
-`LimitChunkCountPlugin` يمكنه معالجة الطلبات بشكل مسبق عن طريق دمج الاجزاء معاً
+عند تقسيم الكود، قد تضيف نقاط فصل كثيرة لتحميل أجزاء عند الحاجة. بعد compilation قد تجد chunks صغيرة جدًا، مما يزيد عدد طلبات HTTP. يساعد `LimitChunkCountPlugin` على تقليل ذلك عبر دمج chunks معًا.
 
 ```js
 new webpack.optimize.LimitChunkCountPlugin({
@@ -16,13 +16,13 @@ new webpack.optimize.LimitChunkCountPlugin({
 
 ## الخيارات
 
-الخيارات ادناه هي المدعومة:
+الخيارات أدناه هي المدعومة:
 
 ### maxChunks
 
-`رقم`
+`number`
 
-تحديد عدد اقصى من الاجزاء بأستعمال قيمة اكبر او تساوي `1` استعمال `1` يمنع اي اجزاء اضافية من اضافتها كأجزاء/مداخل رئيسية وكذلك هي محسوبة في العدد
+يحدد الحد الأقصى لعدد chunks. يجب أن تكون القيمة أكبر من أو تساوي `1`. استخدام `1` يمنع إنشاء chunks إضافية كـ entry chunks أو async chunks.
 
 **webpack.config.js**
 
@@ -41,11 +41,11 @@ export default {
 
 ### minChunkSize
 
-إبقاء عدد الاجزاء فوق الحد المسموح لم يعد ميزة خاصة بهذه الإضافة. استعمل [إضافة الحد الأدنى للاجزاء](/plugins/min-chunk-size-plugin) بدلاً عنها
+لم يعد إبقاء حجم chunks فوق حد معين جزءًا من هذا plugin. استخدم [MinChunkSizePlugin](/plugins/min-chunk-size-plugin) بدلًا منه.
 
-## الاستعمال عن طريق واجهة الأوامر (CLI)
+## الاستخدام عبر CLI
 
-هذه الإضافة وخياراتها يمكن استعمالها عن طريق واجهة الاوامر [CLI](/api/cli/):
+يمكن التحكم بهذا plugin وخياراته عبر [CLI](/api/cli/):
 
 ```bash
 webpack --optimize-max-chunks 15
diff --git a/src/content/plugins/merge-duplicate-chunks-plugin.mdx b/src/content/plugins/merge-duplicate-chunks-plugin.mdx
index 24746b4846b6..ef2cab06b4e5 100644
--- a/src/content/plugins/merge-duplicate-chunks-plugin.mdx
+++ b/src/content/plugins/merge-duplicate-chunks-plugin.mdx
@@ -1,11 +1,12 @@
 ---
-title: إضافة دمج الاجزاء المتكررة
+title: MergeDuplicateChunksPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-دمج الاجزاء التي تحتوي على نفس المودلات، هذه الإضافه مفعلة افتراضياً وهي جزء من تحسينات webpack الداخلية. استخراجها علناً يسمح للمطورين بالتحكم بالـ`مرحلة (stage)` عند ماذا يحصل الدمج — مفيدة عندما تدمج الاجزاء المطلوبة للتشغيل بعد [`إضافة تقسيم الاجزاء`](/plugins/split-chunks-plugin)
+يدمج chunks التي تحتوي على modules نفسها. هذا plugin مفعّل افتراضيًا وجزء من تحسينات webpack الداخلية. وجوده كـ plugin مستقل يسمح للمطورين بالتحكم في `stage` التي يحدث عندها الدمج، وهذا مفيد إذا أردت تشغيل الدمج بعد [`SplitChunksPlugin`](/plugins/split-chunks-plugin).
 
 ```js
 new webpack.optimize.MergeDuplicateChunksPlugin({
@@ -17,9 +18,9 @@ new webpack.optimize.MergeDuplicateChunksPlugin({
 
 ### stage
 
-`رقم`
+`number`
 
-يتحكم بتحسين المرحلة، عند أي مرحلة يتم تشغيل هذه الإضافة، إفتراضياً, يحصل الدمج قبل `إضافه تقسيم الاجزاء`. وضع رقم اعلى للـ`مرحلة (stage)` يجعل الدمج يعمل بعد تحسينات اخرى مثل `إضافه تقسيم الاجزاء`
+يتحكم في مرحلة تشغيل هذا التحسين. افتراضيًا يحدث الدمج قبل `SplitChunksPlugin`. استخدام رقم أعلى للـ `stage` يجعل الدمج يعمل بعد تحسينات أخرى، مثل `SplitChunksPlugin`.
 
 **webpack.config.js**
 
@@ -30,7 +31,7 @@ export default {
   // ...
   plugins: [
     new webpack.optimize.MergeDuplicateChunksPlugin({
-      stage: 10, // يعمل بعد اضافة تقسيم الاجزاء
+      stage: 10, // يعمل بعد SplitChunksPlugin
     }),
   ],
 };
diff --git a/src/content/plugins/min-chunk-size-plugin.mdx b/src/content/plugins/min-chunk-size-plugin.mdx
index bcd72de227f0..3f71327a6a31 100644
--- a/src/content/plugins/min-chunk-size-plugin.mdx
+++ b/src/content/plugins/min-chunk-size-plugin.mdx
@@ -1,21 +1,22 @@
 ---
-title: إضافة الحد الأدنى للاجزاء
+title: MinChunkSizePlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-ابقاء حجم الاجزاء فوق الحد المعين عن طريق دمج الاجزاء التي تكون اصغر من `minChunkSize`.
+يحافظ على حجم chunks فوق الحد المحدد عبر دمج chunks الأصغر من `minChunkSize`.
 
 ```js
 new webpack.optimize.MinChunkSizePlugin({
-  minChunkSize: 10000, // اقل عدد من الحروف
+  minChunkSize: 10000, // أقل حجم مسموح به للـ chunk
 });
 ```
 
-## الأستعمال عن طريق واجهة الاوامر (CLI)
+## الاستخدام عبر CLI
 
-هذه الاضافه واعداداتها يمكن التحكم فيها وادارتها عن طريق واجهة الأوامر [CLI](/api/cli/):
+يمكن التحكم بهذا plugin وخياراته عبر [CLI](/api/cli/):
 
 ```bash
 webpack --optimize-min-chunk-size 10000
diff --git a/src/content/plugins/prefetch-plugin.mdx b/src/content/plugins/prefetch-plugin.mdx
index d45c91cbde45..74dfb6e748f8 100644
--- a/src/content/plugins/prefetch-plugin.mdx
+++ b/src/content/plugins/prefetch-plugin.mdx
@@ -1,11 +1,12 @@
 ---
-title: إضافة الجلب المسبق
+title: PrefetchPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-جلب مسبق اعتيادي لطلبات المودل، مما يؤدي الى حلها وبنائها قبل حدوث اول عملية `import` او `require` لتلك المودل، استخدام هذه الإضافه يمكن ان يسرع الاداء. حاول تحليل البنية اولاً لتحديد نقاط الجلب المسبق الذكية
+يجلب request الخاص بـ module مسبقًا، بحيث يتم resolve وبناء module قبل أول `import` أو `require` له. قد يسرّع هذا الأداء، لكن يفضل تحليل بنية التطبيق أولًا لتحديد نقاط prefetch المفيدة.
 
 ```js
 import webpack from "webpack";
@@ -15,5 +16,5 @@ new webpack.PrefetchPlugin([context], request);
 
 ## الخيارات
 
-- `context`: مسار حتمي لمجلد
-- `request`: طلب من مودل عادية
+- `context`: مسار مطلق إلى مجلد.
+- `request`: request عادي لـ module.
diff --git a/src/content/plugins/profiling-plugin.mdx b/src/content/plugins/profiling-plugin.mdx
index b01fe4b82b09..8e2b4bb99cba 100644
--- a/src/content/plugins/profiling-plugin.mdx
+++ b/src/content/plugins/profiling-plugin.mdx
@@ -1,25 +1,26 @@
 ---
-title: إضافة البروفايلات
+title: ProfilingPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-انشاء ملف كروم يحتوي اوقات تنفيذ الإضافات، يُخرج ملف `events.json` إفتراضياً. من الممكن اضافة ملف مخصص بإستعمال خيار `outputPath`
+ينشئ ملف profiling متوافقًا مع Chrome يحتوي على أوقات تنفيذ plugins. افتراضيًا يخرج الملف باسم `events.json`. ويمكنك تحديد ملف مخصص باستخدام `outputPath`.
 
-> ملاحظة: إضافة البروفايلات تقبل فقط مسارات حتمية
+> ملاحظة: يقبل `ProfilingPlugin` المسارات المطلقة فقط.
 
 ## الخيارات
 
-- `outputPath`: مسار حتمي لملف مخصص بصيغة (json)
+- `outputPath`: مسار مطلق إلى ملف JSON مخصص.
 
-## الاستعمال: إفتراضياً
+## الاستخدام الافتراضي
 
 ```js
 new webpack.debug.ProfilingPlugin();
 ```
 
-## الاستعمال: مخصص `outputPath`
+## الاستخدام مع `outputPath` مخصص
 
 ```js
 import path from "node:path";
@@ -33,10 +34,10 @@ new webpack.debug.ProfilingPlugin({
 });
 ```
 
-لعرض ملف البروفايل:
+لعرض ملف profiling:
 
-1. شغل webpack مع `ProfilingPlugin`.
-2. افتح متصفح كروم، افتح ادوات المطور، اذهب الى نافذة `الأداء (Performance)` سابقاً (`Timeline`)
-3. اسحب وافلت الملف المولّد (`events.json`افتراضياً) في ال profiler.
+1. شغّل webpack مع `ProfilingPlugin`.
+2. افتح Chrome DevTools ثم تبويب `Performance`، والذي كان يسمى سابقًا `Timeline`.
+3. اسحب الملف المولد، وهو `events.json` افتراضيًا، وأفلته داخل profiler.
 
-   سيعرض الجدول الزمني الاحصائيات والاستدعاءات لكل اضافة!
+سيعرض timeline الإحصاءات والاستدعاءات الخاصة بكل plugin.
diff --git a/src/content/plugins/provide-plugin.mdx b/src/content/plugins/provide-plugin.mdx
index 12bcc5a91880..30804320b92b 100644
--- a/src/content/plugins/provide-plugin.mdx
+++ b/src/content/plugins/provide-plugin.mdx
@@ -1,11 +1,12 @@
 ---
-title: إضافة الإعطاء
+title: ProvidePlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-تحميل المودلات تلقائياً بدلاً من استدعائهم ب `import` أو `require` في كل مكان.
+يحمّل modules تلقائيًا بدل الحاجة إلى كتابة `import` أو `require` لها في كل ملف.
 
 ```js
 new webpack.ProvidePlugin({
@@ -14,7 +15,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-or
+أو
 
 ```js
 new webpack.ProvidePlugin({
@@ -23,9 +24,9 @@ new webpack.ProvidePlugin({
 });
 ```
 
-بشكل افتراضي ، يكون مسار الوحدات في المجلد الحالي هو (`./**)` و `node_modules`.
+بشكل افتراضي، يتم حل module من المجلد الحالي `./**` ومن `node_modules`.
 
-ايضاً بالأمكان تحديد مسار كامل:
+يمكنك أيضًا تحديد مسار كامل:
 
 ```js
 import path from "node:path";
@@ -40,14 +41,13 @@ new webpack.ProvidePlugin({
 });
 ```
 
-عندما يتم مصادفه ال `معرف (identifier)` كمتغير حر في المودل، يتم تحميل `المودل` تلقائياً وال `معرف (identifier)` يكون مملوء بصادرات المودل المحمل (او `الممتلكة` لدعم الصادرات المسماة)
+عندما يصادف webpack `identifier` كمتغير حر داخل module، يحمّل module المحدد تلقائيًا ويملأ `identifier` بصادرات ذلك module. ويمكنك تحديد property معينة لدعم named exports.
 
-For importing the default export of an ES2015 module, you have to specify the default property of module.
-لإستيراد الصادرات الافتراضية لمودل ES2015، يجب عليك ان تحدد الممتلكة الافتراضية للمودل
+لاستيراد default export من ES2015 module، يجب تحديد الخاصية `default` في module.
 
-## الاستعمال : jQuery
+## الاستخدام: jQuery
 
-لتحميل `jquery` بشكل تلقائي يمكننا توجيه كلا المتغيريين اللذين يعرضمها الى مودل node الحالي:
+لتحميل `jquery` تلقائيًا، وجّه المتغيرين `$` و`jQuery` إلى module الخاص بـ `jquery`:
 
 ```js
 new webpack.ProvidePlugin({
@@ -56,19 +56,18 @@ new webpack.ProvidePlugin({
 });
 ```
 
-ثم في اي مكان لدينا في الكود المصدري:
+ثم في أي مكان داخل الكود المصدري:
 
 ```js
-// داخل المودل
+// داخل module
 $("#item"); // <= يعمل
-jQuery("#item"); // <= ايضاً يعمل
-// $ يتم وضعها تلقائياً لصادرات المودل "jquery"
+jQuery("#item"); // <= يعمل أيضًا
+// يتم توفير $ تلقائيًا من exports الخاصة بـ "jquery"
 ```
 
-## الاستعمال: jQuery مع Angular 1
+## الاستخدام: jQuery مع Angular 1
 
-Angular تبحث عن `window.jQuery` ليمكنها تحديد ما اذا كانت Jquery موجودة
-إطلع على [الكود المصدري](https://github.com/angular/angular.js/blob/v1.5.9/src/Angular.js#L1821-L1823).
+يبحث Angular عن `window.jQuery` ليحدد هل jQuery موجودة أم لا. راجع [الكود المصدري](https://github.com/angular/angular.js/blob/v1.5.9/src/Angular.js#L1821-L1823).
 
 ```js
 new webpack.ProvidePlugin({
@@ -76,7 +75,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-## الاستعمال: Lodash Map
+## الاستخدام: Lodash Map
 
 ```js
 new webpack.ProvidePlugin({
@@ -84,7 +83,7 @@ new webpack.ProvidePlugin({
 });
 ```
 
-### الاستعمال: Vue.js
+### الاستخدام: Vue.js
 
 ```js
 new webpack.ProvidePlugin({
diff --git a/src/content/plugins/virtual-url-plugin.mdx b/src/content/plugins/virtual-url-plugin.mdx
index 879acd77810a..52b9b7068c59 100644
--- a/src/content/plugins/virtual-url-plugin.mdx
+++ b/src/content/plugins/virtual-url-plugin.mdx
@@ -1,11 +1,12 @@
 ---
-title: إضافه الرابط الافتراضي
+title: VirtualUrlPlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-يسمح بإنشاء مودلات افتراضية من اي نوع، على سبيل المثال: `.ts`, `.json`, `.css` ، الافتراضي هو `js.`
+يسمح بإنشاء virtual modules من أي نوع، مثل `.ts` و`.json` و`.css`. النوع الافتراضي هو `.js`.
 
 <Badge text="5.100.0+" />
 
@@ -13,7 +14,7 @@ contributors:
 import webpack from "webpack";
 
 new webpack.experiments.schemes.VirtualUrlPlugin({
-  myModule: 'export const msg = "من مودل افتراضي"',
+  myModule: 'export const msg = "من virtual module"',
 });
 ```
 
@@ -25,9 +26,9 @@ import { msg } from "virtual:myModule";
 console.log(msg);
 ```
 
-## مثال مبدئي
+## مثال أساسي
 
-انشاء مودل افتراضي يقوم بإعطاء معلومات البناء (build)
+إنشاء virtual module يصدّر معلومات عن build:
 
 ```js
 import webpack from "webpack";
@@ -50,7 +51,7 @@ import { buildTime } from "virtual:buildInfo";
 console.log(`App version: ${buildTime}`);
 ```
 
-استعمال مخطط خاص
+استخدام scheme مخصص:
 
 ```js
 import webpack from "webpack";
@@ -71,9 +72,9 @@ import { msg } from "v:myModule";
 console.log(msg);
 ```
 
-## مثال متطور
+## مثال متقدم
 
-انشاء عدة مودلات افتراضية بمختلف الانواع
+إنشاء عدة virtual modules بأنواع مختلفة:
 
 ```js
 import webpack from "webpack";
@@ -97,7 +98,7 @@ import json from "virtual:myJsonModule";
 import "virtual:myCssModule";
 ```
 
-محاكاة ملف التوجيه (routing)
+محاكاة ملف routing:
 
 ```js
 import path from "node:path";
@@ -112,7 +113,8 @@ const watchDir = path.join(__dirname, "./src/routes");
 new webpack.experiments.schemes.VirtualUrlPlugin({
   routes: {
     source(loaderContext) {
-      // استعمل addContextDependency لمشاهدة الاضافات او الحذوفات من المحلدات الفرعية في watchDir لتحفيز إعادة بناء المودل الافتراضي
+      // استخدم addContextDependency لمراقبة الإضافات والحذف داخل مجلد routes
+      // حتى يعاد بناء virtual module عند تغير الملفات.
       loaderContext.addContextDependency(watchDir);
 
       const files = fs.readdirSync(watchDir);
@@ -134,11 +136,10 @@ import { routes } from "virtual:routes";
 
 ## الخيارات
 
-- `module.type` (`string`): نوع محتوى المودل الافتراضي
+- `module.type` (`string`): نوع محتوى virtual module.
 
-ملاحظة> تأكد ان هذه الانواع لديها مُحمِل خاص بها عن طريق [module.rules](https://webpack.js.org/configuration/module/#modulerules)
+T> تأكد أن هذه الأنواع لديها loader مناسب عبر [`module.rules`](/configuration/module/#modulerules).
 
-- `module.source` (`string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | string))`: دالة المصنع لتوليد محتوى المودل الافتراضي
-
-- `module.version`(`boolean | string | () => string`): عند حدوث عملية إبطال ، يتم استدعاء مصدر الدالة مرةً أخرى إذا كانت قيمة الاصدار مختلفة عن القيمه السابقه، تفعيلها سيؤدي الى تحفيزه دائماً
-- `schema` (`string`): مودل افتراضي قابل للتخصيص ، الاعتيادي هو `virtual`
+- `module.source` (`string | ((loaderContext: import("webpack").LoaderContext<T>) => Promise<string> | string)`): دالة factory التي تولد محتوى virtual module.
+- `module.version` (`boolean | string | () => string`): عند حدوث invalidation، يتم استدعاء `source` مرة أخرى إذا كانت قيمة version مختلفة عن القيمة السابقة. تفعيلها يجعل module يعاد بناؤه دائمًا.
+- `schema` (`string`): scheme مخصص للـ virtual module، والقيمة الافتراضية هي `virtual`.
diff --git a/src/content/plugins/watch-ignore-plugin.mdx b/src/content/plugins/watch-ignore-plugin.mdx
index 65a5c810d88e..09cb753a361a 100644
--- a/src/content/plugins/watch-ignore-plugin.mdx
+++ b/src/content/plugins/watch-ignore-plugin.mdx
@@ -1,11 +1,12 @@
 ---
-title: إضافة تجاهل المشاهدة
+title: WatchIgnorePlugin
 group: webpack
 contributors:
   - MohaDev-69
+  - RlxChap2
 ---
 
-يقوم بتجاهل ملفات محددة، على سبيل المثال هؤلاء الذين يطابقون المسار المُرفق او تعبير نمطي معين، عندما يكونون في [وضع المشاهدة](/configuration/watch).
+يتجاهل ملفات محددة أثناء [watch mode](/configuration/watch)، مثل الملفات التي تطابق مسارًا أو RegExp معينًا.
 
 ```js
 new webpack.WatchIgnorePlugin({ paths });
@@ -13,6 +14,6 @@ new webpack.WatchIgnorePlugin({ paths });
 
 ## الخيارات
 
-- `paths` (`Array<string | RegExp>`): - قائمة من التعبيرات النمطية او مسارات حتمية الى مجلدات او ملفات التي يُفترض ان يتم تجاهلها
+- `paths` (`Array<string | RegExp>`): قائمة RegExp أو مسارات مطلقة إلى مجلدات أو ملفات يجب تجاهلها.
 
-ملاحظة> تم ايقاف هذه الاضافه واستبدالها بخيار [watchOptions.ignored](/configuration/watch/#watchoptionsignored)
+T> تم إهمال هذا plugin واستبداله بخيار [`watchOptions.ignored`](/configuration/watch/#watchoptionsignored).

From cd7afbf93351ab334ae8103b1ad7ce1cb710f602 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Tue, 9 Jun 2026 16:07:27 +0300
Subject: [PATCH 32/35] fix(docs): preserve translated heading anchors

---
 src/content/api/loaders.mdx                             | 4 +++-
 src/content/api/module-methods.mdx                      | 2 ++
 src/content/api/stats.mdx                               | 4 ++++
 src/content/contribute/debugging.mdx                    | 2 ++
 src/content/contribute/writing-a-plugin.mdx             | 2 ++
 src/content/loaders/index.mdx                           | 2 ++
 src/content/plugins/eval-source-map-dev-tool-plugin.mdx | 2 ++
 src/content/plugins/progress-plugin.mdx                 | 2 ++
 src/content/plugins/split-chunks-plugin.mdx             | 2 ++
 9 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx
index b672cd385d52..a5db79fe2ec0 100644
--- a/src/content/api/loaders.mdx
+++ b/src/content/api/loaders.mdx
@@ -178,9 +178,11 @@ export function pitch(remainingRequest, precedingRequest, data) {
 ```diff
 |- a-loader `pitch`
   |- b-loader `pitch` returns a module
-|- a-loader normal execution
+  |- a-loader normal execution
 ```
 
+<span id="the-loader-context"></span>
+
 ## سياق Loader
 
 يمثل loader context الخصائص المتاحة داخل loader والمربوطة بالخاصية `this`.
diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx
index ccddb3728fbb..3df792346886 100644
--- a/src/content/api/module-methods.mdx
+++ b/src/content/api/module-methods.mdx
@@ -23,6 +23,8 @@ related:
 - ملفات `.wasm` مع `"type": "module"` في `package.json`
   - يجب كتابة امتداد الملف عند استيراد ملف wasm.
 
+<span id="es6-recommended"></span>
+
 ## ES6 (موصى به)
 
 يدعم webpack 2 صيغة ES6 modules بشكل أصلي، وهذا يعني أنك تستطيع استخدام `import` و`export` بدون أداة مثل babel للتعامل مع ذلك. مع ذلك، قد تحتاج إلى babel لميزات ES6+ الأخرى. يدعم webpack الدوال التالية:
diff --git a/src/content/api/stats.mdx b/src/content/api/stats.mdx
index 817646e6484c..656799e6cb91 100644
--- a/src/content/api/stats.mdx
+++ b/src/content/api/stats.mdx
@@ -53,6 +53,8 @@ npx webpack --profile --json=compilation-stats.json
 }
 ```
 
+<span id="asset-objects"></span>
+
 ### كائنات Asset
 
 يمثل كل كائن داخل `assets` ملف `output` أنشأته عملية التجميع. تتبع هذه الكائنات بنية متشابهة:
@@ -196,6 +198,8 @@ npx webpack --profile --json=compilation-stats.json
 }
 ```
 
+<span id="errors-and-warnings"></span>
+
 ### الأخطاء والتحذيرات
 
 تحتوي الخاصيتان `errors` و`warnings` قائمة كائنات. يحتوي كل كائن رسالة، وstack trace، وخصائص أخرى:
diff --git a/src/content/contribute/debugging.mdx b/src/content/contribute/debugging.mdx
index 8d89eb7c01ce..c359409ddf73 100644
--- a/src/content/contribute/debugging.mdx
+++ b/src/content/contribute/debugging.mdx
@@ -30,6 +30,8 @@ related:
 
 علاوة على ذلك، فإن [أداة التحليل](https://github.com/webpack/analyse) الرسمية و[أدوات أخرى متنوعة](/guides/code-splitting/#bundle-analysis) ستقبل هذه البيانات وتصورها بطرق مختلفة.
 
+<span id="devtools"></span>
+
 ## أدوات المطورين
 
 على الرغم من أن عبارات [`console`](https://nodejs.org/api/console.html) قد تكون فعّالة في الحالات البسيطة، إلا أن الحاجة قد تدعو أحيانًا إلى حلول أكثر عملية. وكما يعلم معظم مطوري واجهات المستخدم، تُعد أدوات مطوري Chrome منقذة عند تصحيح أخطاء تطبيقات الويب، _ولكن استخدامها لا يقتصر على ذلك_. فمنذ إصدار Node v6.3.0 والإصدارات الأحدث، يُمكن للمطورين استخدام علامة `--inspect` المدمجة لتصحيح أخطاء برنامج Node في أدوات المطورين.
diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx
index 913538971416..3197f9c20128 100644
--- a/src/content/contribute/writing-a-plugin.mdx
+++ b/src/content/contribute/writing-a-plugin.mdx
@@ -444,6 +444,8 @@ this.hooks = {
   - يتم الدخول إليها باستخدام `tap` أو `tapAsync` أو `tapPromise`.
   - تُستدعى باستخدام `callAsync(...params)`.
 
+<span id="configuration-defaults"></span>
+
 ### القيم الافتراضية للإعدادات
 
 يطبق webpack القيم الافتراضية للإعدادات بعد تطبيق القيم الافتراضية الخاصة بـ plugins. هذا يسمح للـ plugins بتوفير defaults خاصة بها، ويوفر طريقة لإنشاء configuration preset plugins.
diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx
index de550d509652..5939581033c2 100644
--- a/src/content/loaders/index.mdx
+++ b/src/content/loaders/index.mdx
@@ -19,6 +19,8 @@ contributors:
 
 - [`cson-loader`](https://github.com/awnist/cson-loader) يحمّل ملف [CSON](https://github.com/bevry/cson#what-is-cson) ويحوّله.
 
+<span id="transpiling"></span>
+
 ## التحويل بين صيغ JavaScript
 
 - [`babel-loader`](/loaders/babel-loader) يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام [Babel](https://babeljs.io/).
diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
index 0bff20b322a3..5671ff937e26 100644
--- a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
+++ b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx
@@ -14,6 +14,8 @@ related:
 new webpack.EvalSourceMapDevToolPlugin(options);
 ```
 
+<span id="options"></span>
+
 ## الخيارات
 
 يدعم plugin الخيارات التالية:
diff --git a/src/content/plugins/progress-plugin.mdx b/src/content/plugins/progress-plugin.mdx
index 63e43fa7f2e3..9149dd03dc0c 100644
--- a/src/content/plugins/progress-plugin.mdx
+++ b/src/content/plugins/progress-plugin.mdx
@@ -79,6 +79,8 @@ static createDefaultHandler: (
 
 > نوصي باستخدام الإعداد `percentBy: 'entries'` في المشاريع التي تحتوي [عدة entry points مضبوطة](/configuration/entry-context/#entry). تصبح نسبة التقدم أدق لأن عدد entry points معروف مسبقًا.
 
+<span id="supported-hooks"></span>
+
 ## Hooks المدعومة
 
 تُرسل hooks التالية معلومات التقدم إلى `ProgressPlugin`.
diff --git a/src/content/plugins/split-chunks-plugin.mdx b/src/content/plugins/split-chunks-plugin.mdx
index 7abe5e108dd8..fe84d0c464da 100644
--- a/src/content/plugins/split-chunks-plugin.mdx
+++ b/src/content/plugins/split-chunks-plugin.mdx
@@ -645,6 +645,8 @@ export default {
 
 W> قد يجعل هذا الإعداد initial bundles أكبر، لذلك يُنصح باستخدام dynamic imports عندما لا تحتاج module مباشرة.
 
+<span id="split-chunks-example-2"></span>
+
 ### Split Chunks: المثال 2
 
 أنشئ chunk باسم `vendors` يحتوي على كل الكود القادم من `node_modules` في التطبيق كاملًا.

From 03d02d097043de193193869cfa4cce63f5319183 Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Sun, 14 Jun 2026 19:00:12 +0300
Subject: [PATCH 33/35] docs(ar): complete Arabic RTL localization

---
 .../CodeBlockWithCopy/CodeBlockWithCopy.jsx   |  8 +-
 src/components/Dropdown/Dropdown.jsx          |  4 +-
 src/components/Dropdown/Dropdown.test.jsx     | 13 +--
 .../__snapshots__/Dropdown.test.jsx.snap      |  8 +-
 src/components/Footer/Footer.jsx              | 85 +++++++++++--------
 src/components/HelloDarkness.jsx              |  6 +-
 src/components/Logo/Logo.jsx                  |  4 +-
 .../Logo/__snapshots__/Logo.test.jsx.snap     |  4 +-
 src/components/Navigation/Navigation.jsx      | 60 +++++++++++--
 src/components/NotificationBar/MessageBar.jsx |  4 +-
 .../OfflineBanner/OfflineBanner.jsx           |  2 +-
 .../OfflineBanner/OfflineBanner.test.jsx      |  8 +-
 .../__snapshots__/OfflineBanner.test.jsx.snap |  2 +-
 src/components/Page/AdjacentPages.jsx         | 14 +--
 src/components/Page/Page.jsx                  | 15 ++--
 src/components/PageLinks/PageLinks.jsx        | 12 +--
 src/components/PageNotFound/PageNotFound.jsx  |  8 +-
 .../__snapshots__/PageNotFound.test.jsx.snap  |  6 +-
 src/components/Print/Print.jsx                | 14 ++-
 .../ReadingProgress/ReadingProgress.jsx       |  2 +-
 src/components/ScrollToTop/ScrollToTop.jsx    |  6 +-
 src/components/Sidebar/Sidebar.jsx            | 10 +--
 src/components/SidebarItem/SidebarItem.jsx    | 10 +--
 .../SidebarItem/SidebarItem.test.jsx          |  2 +-
 .../__snapshots__/SidebarItem.test.jsx.snap   |  8 +-
 .../SidebarMobile/SidebarMobile.jsx           |  6 +-
 .../SidebarMobile/SidebarMobile.test.jsx      |  2 +-
 .../__snapshots__/SidebarMobile.test.jsx.snap | 24 +++---
 src/components/Site/Site.jsx                  | 30 +++++--
 src/components/Splash/Splash.jsx              | 24 +++---
 src/components/Splash/second/left.mdx         |  2 +-
 src/components/SplashViz/SplashViz.jsx        |  7 +-
 src/components/SplashViz/SplashVizSVG.mjs     |  6 +-
 src/components/Sponsors/Sponsors.jsx          |  4 +-
 .../StackBlitzPreview/StackBlitzPreview.jsx   |  6 +-
 src/components/Support/Support.jsx            | 78 ++++++++++-------
 .../Support/Support.latest.test.jsx           |  2 +-
 src/components/Support/Support.test.jsx       | 26 +++---
 .../__snapshots__/Support.data.test.jsx.snap  |  2 +-
 .../__snapshots__/Support.test.jsx.snap       |  2 +-
 src/components/TextRotater/TextRotater.jsx    |  2 +-
 src/content/awesome-webpack.mdx               |  2 +-
 src/content/concepts/index.mdx                |  2 +-
 src/content/concepts/manifest.mdx             |  2 +-
 src/content/concepts/under-the-hood.mdx       |  2 +-
 src/content/concepts/why-webpack.mdx          |  2 +-
 src/content/configuration/entry-context.mdx   |  2 +-
 src/content/configuration/other-options.mdx   |  2 +-
 src/content/configuration/watch.mdx           |  2 +-
 src/content/contribute/release-process.mdx    |  2 +-
 src/content/contribute/writers-guide.mdx      |  2 +-
 src/scripts/generate-rss.mjs                  | 10 +--
 src/styles/index.css                          | 23 +++++
 src/styles/tailwind.css                       |  4 +-
 54 files changed, 349 insertions(+), 246 deletions(-)

diff --git a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx
index da0ddeb1695a..3c5bd33f5f47 100644
--- a/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx
+++ b/src/components/CodeBlockWithCopy/CodeBlockWithCopy.jsx
@@ -131,13 +131,13 @@ export default function CodeBlockWithCopy({ children }) {
               ? "bg-red-500 hover:bg-red-700"
               : "bg-[#175d96] hover:bg-[#2f85d0]",
         )}
-        aria-label="Copy code to clipboard"
+        aria-label="نسخ الكود إلى الحافظة"
       >
         {copyStatus === "copied"
-          ? "Copied!"
+          ? "تم النسخ"
           : copyStatus === "error"
-            ? "Error"
-            : "Copy"}
+            ? "تعذر النسخ"
+            : "نسخ"}
       </button>
 
       <pre ref={preRef}>{children}</pre>
diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index 0ee38b033b37..6f50e77d0fa3 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -86,7 +86,7 @@ export default function Dropdown({ className = "", items = [] }) {
         ref={dropdownButtonRef}
         aria-haspopup="true"
         aria-expanded={String(active)}
-        aria-label="Select language"
+        aria-label="اختيار اللغة"
         onClick={handleClick}
         className="cursor-pointer text-white border-none bg-transparent m-0 p-0 text-[length:inherit] flex items-center"
       >
@@ -141,7 +141,7 @@ export default function Dropdown({ className = "", items = [] }) {
                 href={item.url}
                 className="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
               >
-                <span lang={item.lang} className="align-top text-left">
+                <span lang={item.lang} className="align-top text-start">
                   {item.title}
                 </span>
               </a>
diff --git a/src/components/Dropdown/Dropdown.test.jsx b/src/components/Dropdown/Dropdown.test.jsx
index f2da5a466f47..ee71d5db0632 100644
--- a/src/components/Dropdown/Dropdown.test.jsx
+++ b/src/components/Dropdown/Dropdown.test.jsx
@@ -11,6 +11,7 @@ const items = [
   { title: "French", url: "/fr/", lang: "fr" },
   { title: "Spanish", url: "/es/", lang: "es" },
 ];
+const languageButtonName = /اختيار اللغة/;
 
 function getListWrapper(container) {
   return container.querySelector("ul").closest("div");
@@ -24,7 +25,7 @@ describe("Dropdown", () => {
   it("renders the toggle button", () => {
     render(<Dropdown items={items} />);
     expect(
-      screen.getByRole("button", { name: /select language/i }),
+      screen.getByRole("button", { name: languageButtonName }),
     ).toBeTruthy();
   });
 
@@ -52,7 +53,7 @@ describe("Dropdown", () => {
 
   it("toggles dropdown on button click", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     fireEvent.click(button);
     expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
@@ -63,7 +64,7 @@ describe("Dropdown", () => {
 
   it("sets aria-expanded correctly", () => {
     render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     expect(button.getAttribute("aria-expanded")).toBe("false");
     fireEvent.click(button);
@@ -79,7 +80,7 @@ describe("Dropdown", () => {
 
   it("closes on Escape key", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     fireEvent.click(button);
     expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
@@ -95,7 +96,7 @@ describe("Dropdown", () => {
 
   it("closes when clicking outside", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
 
     fireEvent.click(button);
     expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
@@ -109,7 +110,7 @@ describe("Dropdown", () => {
 
   it("does not close dropdown when arrow keys are pressed", () => {
     const { container } = render(<Dropdown items={items} />);
-    const button = screen.getByRole("button", { name: /select language/i });
+    const button = screen.getByRole("button", { name: languageButtonName });
     fireEvent.click(button);
 
     const links = screen.getAllByRole("link");
diff --git a/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap b/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap
index 8fc4d78f4562..9f55532dfa2a 100644
--- a/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap
+++ b/src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap
@@ -7,7 +7,7 @@ exports[`Dropdown matches snapshot 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    aria-label="Select language"
+    aria-label="اختيار اللغة"
     class="cursor-pointer text-white border-none bg-transparent m-0 p-0 text-[length:inherit] flex items-center"
   >
     <svg
@@ -62,7 +62,7 @@ exports[`Dropdown matches snapshot 1`] = `
           href="/en/"
         >
           <span
-            class="align-top text-left"
+            class="align-top text-start"
             lang="en"
           >
             English
@@ -77,7 +77,7 @@ exports[`Dropdown matches snapshot 1`] = `
           href="/fr/"
         >
           <span
-            class="align-top text-left"
+            class="align-top text-start"
             lang="fr"
           >
             French
@@ -92,7 +92,7 @@ exports[`Dropdown matches snapshot 1`] = `
           href="/es/"
         >
           <span
-            class="align-top text-left"
+            class="align-top text-start"
             lang="es"
           >
             Spanish
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index d2ad336dd62a..0ca4af05117e 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -16,62 +16,73 @@ const Footer = () => (
           <img
             className="h-[40px] w-auto dark:invert"
             src={OpenJSLogo}
-            alt="OpenJS Foundation Logo"
+            alt="شعار OpenJS Foundation"
           />
         </a>
       </div>
       <p className="mx-auto text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
-        Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and
-        webpack contributors. All rights reserved. The{" "}
-        <a href="https://openjsf.org">OpenJS Foundation</a> has registered
-        trademarks and uses trademarks. For a list of trademarks of the{" "}
-        <a href="https://openjsf.org">OpenJS Foundation</a>, please see our{" "}
-        <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and{" "}
-        <a href="https://trademark-list.openjsf.org">Trademark List</a>.
-        Trademarks and logos not indicated on the{" "}
+        حقوق النشر محفوظة لـ <a href="https://openjsf.org">OpenJS Foundation</a>{" "}
+        ومساهمي webpack. جميع الحقوق محفوظة. تمتلك{" "}
+        <a href="https://openjsf.org">OpenJS Foundation</a> علامات تجارية مسجلة
+        وتستخدم علامات تجارية. للاطلاع على قائمة علامات{" "}
+        <a href="https://openjsf.org">OpenJS Foundation</a> التجارية، راجع{" "}
+        <a href="https://trademark-policy.openjsf.org">
+          سياسة العلامات التجارية
+        </a>{" "}
+        و
+        <a href="https://trademark-list.openjsf.org">قائمة العلامات التجارية</a>
+        . العلامات والشعارات غير المذكورة في{" "}
         <a href="https://trademark-list.openjsf.org">
-          list of OpenJS Foundation trademarks
+          قائمة علامات OpenJS Foundation التجارية
         </a>{" "}
-        are trademarks&trade; or registered&reg; trademarks of their respective
-        holders. Use of them does not imply any affiliation with or endorsement
-        by them.
+        هي علامات تجارية&trade; أو علامات تجارية مسجلة&reg; لمالكيها. استخدام
+        هذه العلامات لا يعني وجود ارتباط أو تأييد من مالكيها.
       </p>
       <p className="mx-auto mt-[18px] text-[15px] leading-[1.6] text-[#333333] dark:text-[#e0e0e0]">
-        <a href="https://openjsf.org">The OpenJS Foundation</a> |{" "}
-        <a href="https://terms-of-use.openjsf.org">Terms of Use</a> |{" "}
-        <a href="https://privacy-policy.openjsf.org">Privacy Policy</a> |{" "}
-        <a href="https://bylaws.openjsf.org">Bylaws</a> |{" "}
-        <a href="https://code-of-conduct.openjsf.org">Code of Conduct</a> |{" "}
-        <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> |{" "}
-        <a href="https://trademark-list.openjsf.org">Trademark List</a> |{" "}
-        <a href="https://www.linuxfoundation.org/cookies">Cookie Policy</a>
+        <a href="https://openjsf.org">OpenJS Foundation</a> |{" "}
+        <a href="https://terms-of-use.openjsf.org">شروط الاستخدام</a> |{" "}
+        <a href="https://privacy-policy.openjsf.org">سياسة الخصوصية</a> |{" "}
+        <a href="https://bylaws.openjsf.org">اللوائح الداخلية</a> |{" "}
+        <a href="https://code-of-conduct.openjsf.org">مدونة السلوك</a> |{" "}
+        <a href="https://trademark-policy.openjsf.org">
+          سياسة العلامات التجارية
+        </a>{" "}
+        |{" "}
+        <a href="https://trademark-list.openjsf.org">قائمة العلامات التجارية</a>{" "}
+        |{" "}
+        <a href="https://www.linuxfoundation.org/cookies">
+          سياسة ملفات تعريف الارتباط
+        </a>
       </p>
     </Container>
     <Container className="flex flex-wrap justify-center gap-y-4 content-center border-t border-[#f2f2f2] px-0 py-[0.4em] md:flex-row md:justify-between">
       <section
-        className="mx-auto flex max-w-full flex-[0_0_auto] flex-wrap items-center justify-center py-[0.25em] md:m-0 md:justify-start md:pl-[1.5em] md:py-0 [&>*:not(:last-child)]:mr-[1.5em]"
-        aria-label="Quick links"
+        className="mx-auto flex max-w-full flex-[0_0_auto] flex-wrap items-center justify-center gap-x-[1.5em] gap-y-2 py-[0.25em] md:m-0 md:justify-start md:ps-[1.5em] md:py-0"
+        aria-label="روابط سريعة"
       >
         <Link className={footerLinkClasses} to="/guides/getting-started/">
-          Get Started
+          البدء
         </Link>
         <Link className={footerLinkClasses} to="/comparison/">
-          Comparison
+          المقارنة
         </Link>
         <Link
           className={footerLinkClasses}
           to="https://privacy-policy.openjsf.org/"
         >
-          Privacy Policy
+          سياسة الخصوصية
         </Link>
       </section>
 
-      <section className="hidden md:block md:flex-[0_0_auto]" aria-label="Home">
+      <section
+        className="hidden md:block md:flex-[0_0_auto]"
+        aria-label="الرئيسية"
+      >
         <Link to="/" className="inline-block h-[35px]">
           <img
             className="inline-block h-full w-auto"
             src={Icon}
-            alt="webpack icon"
+            alt="أيقونة webpack"
             width={35}
             height={35}
           />
@@ -79,42 +90,42 @@ const Footer = () => (
       </section>
 
       <section
-        className="mx-auto flex max-w-full flex-[0_0_auto] flex-wrap items-center justify-center py-[0.25em] md:m-0 md:justify-end md:py-0 md:pr-[1.5em] [&>a:not(:last-child)]:mr-[1.5em]"
-        aria-label="Resources and links"
+        className="mx-auto flex max-w-full flex-[0_0_auto] flex-wrap items-center justify-center gap-x-[1.5em] gap-y-2 py-[0.25em] md:m-0 md:justify-end md:py-0 md:pe-[1.5em]"
+        aria-label="الموارد والروابط"
       >
         <Link
           className={footerLinkClasses}
           to="https://webpack.threadless.com/"
         >
-          Swag Store
+          متجر المنتجات
         </Link>
         <Link className={footerLinkClasses} to="/awesome-webpack/">
           Awesome webpack
         </Link>
         <Link className={footerLinkClasses} to="/glossary/">
-          Glossary
+          مسرد المصطلحات
         </Link>
         <Link className={footerLinkClasses} to="/branding/">
-          Branding
+          الهوية البصرية
         </Link>
         <Link
           className={footerLinkClasses}
           to="https://github.com/webpack/webpack/releases"
         >
-          Changelog
+          سجل التغييرات
         </Link>
         <Link
-          className="inline-block h-[25px] align-middle [&_img]:ml-4 [&_img]:inline-block [&_img]:h-full [&_img]:w-auto"
+          className="inline-flex h-[25px] items-center gap-4 align-middle [&_img]:inline-block [&_img]:h-full [&_img]:w-auto"
           to="/license"
         >
           <img
-            alt="Creative Commons License (CC)"
+            alt="رخصة Creative Commons (CC)"
             src={CC}
             width={25}
             height={25}
           />
           <img
-            alt="Creative Commons Attribution (CC BY)"
+            alt="نَسب Creative Commons (CC BY)"
             src={BY}
             width={25}
             height={25}
diff --git a/src/components/HelloDarkness.jsx b/src/components/HelloDarkness.jsx
index bfbaa9340830..2039f4de35e4 100644
--- a/src/components/HelloDarkness.jsx
+++ b/src/components/HelloDarkness.jsx
@@ -24,14 +24,12 @@ export default function HelloDarkness() {
   return (
     <Tooltip
       content={
-        activeTheme === DARK ? "Switch to light theme" : "Switch to dark theme"
+        activeTheme === DARK ? "التبديل للوضع الفاتح" : "التبديل للوضع الداكن"
       }
     >
       <button
         aria-label={
-          activeTheme === DARK
-            ? "Switch to light theme"
-            : "Switch to dark theme"
+          activeTheme === DARK ? "التبديل للوضع الفاتح" : "التبديل للوضع الداكن"
         }
         className="bg-transparent border-none cursor-pointer text-[16px] p-0 inline-flex items-center text-gray-100 hover:text-blue-200 transition-colors duration-200"
         onClick={themeSwitcher}
diff --git a/src/components/Logo/Logo.jsx b/src/components/Logo/Logo.jsx
index c36bbbce369f..48a69f4a3e51 100644
--- a/src/components/Logo/Logo.jsx
+++ b/src/components/Logo/Logo.jsx
@@ -3,9 +3,9 @@ import Logo from "../../assets/site-logo.svg";
 export default function LogoComp() {
   return (
     <img
-      className="float-left h-[35px] w-auto opacity-90 transition-opacity duration-200 hover:opacity-100"
+      className="float-start h-[35px] w-auto opacity-90 transition-opacity duration-200 hover:opacity-100"
       src={Logo}
-      alt="webpack logo"
+      alt="شعار webpack"
       width={122}
       height={35}
     />
diff --git a/src/components/Logo/__snapshots__/Logo.test.jsx.snap b/src/components/Logo/__snapshots__/Logo.test.jsx.snap
index bfd3b7eda14b..d27a958c87bd 100644
--- a/src/components/Logo/__snapshots__/Logo.test.jsx.snap
+++ b/src/components/Logo/__snapshots__/Logo.test.jsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Logo renders correctly 1`] = `
 <img
-  alt="webpack logo"
-  class="float-left h-[35px] w-auto opacity-90 transition-opacity duration-200 hover:opacity-100"
+  alt="شعار webpack"
+  class="float-start h-[35px] w-auto opacity-90 transition-opacity duration-200 hover:opacity-100"
   height="35"
   src="svg-mock"
   width="122"
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 666f147ec05d..fab1304378eb 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -87,11 +87,11 @@ function NavigationIcon({ children, to, title }) {
   };
 
   return (
-    <Tooltip content={`webpack on ${title}`} ref={tooltipRef}>
+    <Tooltip content={`webpack على ${title}`} ref={tooltipRef}>
       <Link
         to={to}
         className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
-        aria-label={`webpack on ${title}`}
+        aria-label={`webpack على ${title}`}
         onClick={hideTooltip}
       >
         {children}
@@ -112,6 +112,51 @@ const navigationIconProps = {
   width: 16,
 };
 
+const docSearchTranslations = {
+  button: {
+    buttonText: "بحث",
+    buttonAriaLabel: "البحث",
+  },
+  modal: {
+    searchBox: {
+      clearButtonTitle: "مسح البحث",
+      clearButtonAriaLabel: "مسح البحث",
+      closeButtonText: "إغلاق",
+      closeButtonAriaLabel: "إغلاق",
+      placeholderText: "ابحث في توثيق webpack",
+      searchInputLabel: "البحث",
+    },
+    footer: {
+      selectText: "للاختيار",
+      selectKeyAriaLabel: "Enter",
+      navigateText: "للتنقل",
+      navigateUpKeyAriaLabel: "السهم للأعلى",
+      navigateDownKeyAriaLabel: "السهم للأسفل",
+      closeText: "للإغلاق",
+      closeKeyAriaLabel: "Escape",
+      poweredByText: "مدعوم من",
+    },
+    startScreen: {
+      recentSearchesTitle: "عمليات البحث الأخيرة",
+      noRecentSearchesText: "لا توجد عمليات بحث حديثة",
+      saveRecentSearchButtonTitle: "حفظ هذا البحث",
+      removeRecentSearchButtonTitle: "إزالة هذا البحث من السجل",
+      favoriteSearchesTitle: "عمليات البحث المفضلة",
+      removeFavoriteSearchButtonTitle: "إزالة هذا البحث من المفضلة",
+    },
+    noResultsScreen: {
+      noResultsText: "لا توجد نتائج لـ",
+      suggestedQueryText: "جرّب البحث عن",
+      reportMissingResultsText: "هل تعتقد أن هذه الصفحة يجب أن تظهر هنا؟",
+      reportMissingResultsLinkText: "أبلغ عن نتيجة مفقودة",
+    },
+    errorScreen: {
+      titleText: "تعذر جلب النتائج",
+      helpText: "تحقق من اتصالك ثم حاول مرة أخرى.",
+    },
+  },
+};
+
 function Navigation({ links, pathname, hash = "", toggleSidebar }) {
   const [locationHash, setLocationHash] = useState(hash);
   const [mounted, setMounted] = useState(false);
@@ -131,7 +176,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
       <header className="bg-blue-800 dark:bg-gray-900 print:hidden">
         <div className="flex items-center py-10 px-[16px] justify-between md:px-[24px] md:max-w-[1024px] md:mx-auto md:justify-start">
           <button
-            aria-label="Toggle navigation menu"
+            aria-label="فتح قائمة التنقل"
             className="bg-transparent border-none md:hidden"
             onClick={toggleSidebar}
           >
@@ -141,12 +186,12 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
               className="fill-current text-white"
             />
           </button>
-          <Link to="/" className="navigation__brand md:mr-auto">
+          <Link to="/" className="navigation__brand md:me-auto">
             <Logo />
           </Link>
           <nav
             className="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px] md:items-center"
-            aria-label="Main navigation"
+            aria-label="التنقل الرئيسي"
           >
             {links.map(({ content, url, isActive, ariaLabel }) => (
               <NavigationItem
@@ -186,7 +231,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
             ))}
             <LanguageSwitcher pathname={pathname} hash={locationHash} />
           </nav>
-          <div className="navigation__controls inline-flex items-center gap-x-[18px] ml-[18px]">
+          <div className="navigation__controls inline-flex items-center gap-x-[18px] ms-[18px]">
             <HelloDarkness />
             {mounted && (
               <DocSearch
@@ -194,7 +239,8 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 apiKey={DOCSEARCH_API_KEY}
                 indexName={DOCSEARCH_INDEX_NAME}
                 disableUserPersonalization={true}
-                placeholder="Search webpack documentation"
+                placeholder="ابحث في توثيق webpack"
+                translations={docSearchTranslations}
                 transformItems={(items) =>
                   items.map(({ url, ...others }) => {
                     const { origin } = new URL(url);
diff --git a/src/components/NotificationBar/MessageBar.jsx b/src/components/NotificationBar/MessageBar.jsx
index 63dfa1bc70e0..3e784a6c7244 100644
--- a/src/components/NotificationBar/MessageBar.jsx
+++ b/src/components/NotificationBar/MessageBar.jsx
@@ -25,7 +25,7 @@ export default function MessageBar(props) {
     <>
       {listTransitions((styles) => (
         <animated.div
-          className="flex items-center rounded z-50 fixed left-px right-px bottom-px bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
+          className="flex items-center rounded z-50 fixed start-px end-px bottom-px bg-white border-2 border-solid border-gray-700 max-w-full ps-20 py-20 shadow-2xl md:start-20 md:end-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
           style={styles}
         >
           <Content />
@@ -36,7 +36,7 @@ export default function MessageBar(props) {
               onClick={close}
             >
               <CloseIcon
-                aria-label="Dismiss"
+                aria-label="إغلاق التنبيه"
                 className="fill-current text-gray-300 dark:text-white transform duration-200 hover:text-gray-700"
                 width={25}
               />
diff --git a/src/components/OfflineBanner/OfflineBanner.jsx b/src/components/OfflineBanner/OfflineBanner.jsx
index a382dbd82536..9acadc029e9d 100644
--- a/src/components/OfflineBanner/OfflineBanner.jsx
+++ b/src/components/OfflineBanner/OfflineBanner.jsx
@@ -40,7 +40,7 @@ export default function OfflineBanner() {
           <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
         </svg>
         <span className="tracking-[0.01em]">
-          You are currently offline. Some features may be unavailable.
+          أنت غير متصل حالياً. قد لا تتوفر بعض الميزات.
         </span>
       </div>
     </div>
diff --git a/src/components/OfflineBanner/OfflineBanner.test.jsx b/src/components/OfflineBanner/OfflineBanner.test.jsx
index 639401c978da..0cad37d95437 100644
--- a/src/components/OfflineBanner/OfflineBanner.test.jsx
+++ b/src/components/OfflineBanner/OfflineBanner.test.jsx
@@ -8,6 +8,8 @@ import { afterEach, beforeEach, describe, expect, it } from "@jest/globals";
 import { act, render, screen } from "@testing-library/react";
 import OfflineBanner from "./OfflineBanner.jsx";
 
+const offlineMessage = "أنت غير متصل حالياً. قد لا تتوفر بعض الميزات.";
+
 /**
  * Helper to mock navigator.onLine
  */
@@ -66,11 +68,7 @@ describe("OfflineBanner", () => {
       setNavigatorOnLine(false);
       window.dispatchEvent(new Event("offline"));
     });
-    expect(
-      screen.getByText(
-        "You are currently offline. Some features may be unavailable.",
-      ),
-    ).toBeTruthy();
+    expect(screen.getByText(offlineMessage)).toBeTruthy();
   });
 
   it("has accessible role and aria-live attributes", () => {
diff --git a/src/components/OfflineBanner/__snapshots__/OfflineBanner.test.jsx.snap b/src/components/OfflineBanner/__snapshots__/OfflineBanner.test.jsx.snap
index be0c2fce0d25..c353f6f71069 100644
--- a/src/components/OfflineBanner/__snapshots__/OfflineBanner.test.jsx.snap
+++ b/src/components/OfflineBanner/__snapshots__/OfflineBanner.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`OfflineBanner renders the offline banner snapshot 1`] = `
     <span
       class="tracking-[0.01em]"
     >
-      You are currently offline. Some features may be unavailable.
+      أنت غير متصل حالياً. قد لا تتوفر بعض الميزات.
     </span>
   </div>
 </div>
diff --git a/src/components/Page/AdjacentPages.jsx b/src/components/Page/AdjacentPages.jsx
index 78dba0ab2a88..d459bbce79da 100644
--- a/src/components/Page/AdjacentPages.jsx
+++ b/src/components/Page/AdjacentPages.jsx
@@ -4,19 +4,19 @@ import Link from "../Link/Link.jsx";
 export default function AdjacentPages({ previous, next }) {
   if (!previous && !next) return null;
   return (
-    <div className="flex py-[30px] justify-between print:hidden">
+    <div className="flex py-[30px] justify-between gap-x-8 print:hidden">
       {previous && (
-        <div className="mr-auto">
-          <div>« Previous</div>
-          <Link className="text-lg" to={previous.url}>
+        <div className="me-auto max-w-[48%]">
+          <div>السابق ›</div>
+          <Link className="block text-lg break-words" to={previous.url}>
             {previous.title}
           </Link>
         </div>
       )}
       {next && (
-        <div className="ml-auto">
-          <div className="text-right">Next »</div>
-          <Link className="text-lg" to={next.url}>
+        <div className="ms-auto max-w-[48%] text-end">
+          <div>‹ التالي</div>
+          <Link className="block text-lg break-words" to={next.url}>
             {next.title}
           </Link>
         </div>
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index 156ffcb5bd5c..547b5f1058ae 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -55,7 +55,7 @@ export default function Page(props) {
         .catch(() => {
           setContent({
             __error: true,
-            message: "Failed to load page content.",
+            message: "تعذر تحميل محتوى الصفحة.",
           });
           setContentLoaded(true);
         });
@@ -144,10 +144,9 @@ export default function Page(props) {
 
         {rest.thirdParty ? (
           <div className="italic my-[20px]">
-            <strong className="font-bold">Disclaimer:</strong> {title} is a
-            third-party package maintained by community members, it potentially
-            does not have the same support, security policy or license as
-            webpack, and it is not maintained by webpack.
+            <strong className="font-bold">تنبيه:</strong> {title} حزمة من طرف
+            ثالث يصونها أعضاء من المجتمع. قد لا تملك مستوى الدعم أو سياسة الأمان
+            أو الرخصة نفسها الخاصة بـ webpack، وهي ليست مصانة من فريق webpack.
           </div>
         ) : null}
 
@@ -182,7 +181,7 @@ export default function Page(props) {
                     to={post.url}
                     className="text-blue-400 font-semibold no-underline hover:underline dark:text-blue-200"
                   >
-                    Read More &rarr;
+                    اقرأ المزيد ←
                   </Link>
                 </div>
               ))}
@@ -191,7 +190,7 @@ export default function Page(props) {
 
         {loadRelated && (
           <div className="print:hidden">
-            <h2>Further Reading</h2>
+            <h2>قراءات إضافية</h2>
             <ul>
               {related.map((link, index) => (
                 <li key={index}>
@@ -212,7 +211,7 @@ export default function Page(props) {
           <div data-testid="contributors" className="print:hidden">
             <h2 className="!font-sans !font-normal">
               {numberOfContributors}{" "}
-              {numberOfContributors === 1 ? "Contributor" : "Contributors"}
+              {numberOfContributors === 1 ? "مساهم" : "مساهمون"}
             </h2>
             <Contributors contributors={contributors} />
           </div>
diff --git a/src/components/PageLinks/PageLinks.jsx b/src/components/PageLinks/PageLinks.jsx
index 75d93e49b74b..8b8a1f32702e 100644
--- a/src/components/PageLinks/PageLinks.jsx
+++ b/src/components/PageLinks/PageLinks.jsx
@@ -23,18 +23,18 @@ export default function PageLinks({ page = {} }) {
 
   return (
     <div className="print:hidden mt-8">
-      <a className={classes} href={editLink}>
-        Edit this page
-      </a>
-      <Separator />
       <button type="button" className={classes} onClick={_handlePrintClick}>
-        Print this page
+        طباعة هذه الصفحة
       </button>
+      <Separator />
+      <a className={classes} href={editLink}>
+        تعديل هذه الصفحة
+      </a>
       {page.repo ? (
         <>
           <Separator />
           <a className={classes} href={page.repo}>
-            Jump to repository
+            افتح المستودع
           </a>
         </>
       ) : null}
diff --git a/src/components/PageNotFound/PageNotFound.jsx b/src/components/PageNotFound/PageNotFound.jsx
index 122552ed30f9..f38b391c5119 100644
--- a/src/components/PageNotFound/PageNotFound.jsx
+++ b/src/components/PageNotFound/PageNotFound.jsx
@@ -5,16 +5,16 @@ export default function PageNotFound() {
   return (
     <div className="page markdown">
       <Helmet>
-        <title>Page Not Found | webpack</title>
+        <title>الصفحة غير موجودة | webpack</title>
         <meta name="robots" content="noindex,nofollow" />
       </Helmet>
-      <h1>Page Not Found</h1>
-      <p>Oops! The page you are looking for has been removed or relocated.</p>
+      <h1>الصفحة غير موجودة</h1>
+      <p>الصفحة التي تبحث عنها أُزيلت أو نُقلت إلى مكان آخر.</p>
       <Link
         className="no-underline inline-block py-[3px] px-[5px] text-[1.1rem] rounded-[5px] w-auto border border-[#175d96] text-[#175d96] hover:bg-[#175d96] hover:text-white"
         to="/"
       >
-        Go to Homepage
+        العودة للرئيسية
       </Link>
     </div>
   );
diff --git a/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap b/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap
index e465fcf69a7a..e10e9238312b 100644
--- a/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap
+++ b/src/components/PageNotFound/__snapshots__/PageNotFound.test.jsx.snap
@@ -5,17 +5,17 @@ exports[`PageNotFound renders correctly 1`] = `
   class="page markdown"
 >
   <h1>
-    Page Not Found
+    الصفحة غير موجودة
   </h1>
   <p>
-    Oops! The page you are looking for has been removed or relocated.
+    الصفحة التي تبحث عنها أُزيلت أو نُقلت إلى مكان آخر.
   </p>
   <a
     class="no-underline inline-block py-[3px] px-[5px] text-[1.1rem] rounded-[5px] w-auto border border-[#175d96] text-[#175d96] hover:bg-[#175d96] hover:text-white"
     data-discover="true"
     href="/"
   >
-    Go to Homepage
+    العودة للرئيسية
   </a>
 </div>
 `;
diff --git a/src/components/Print/Print.jsx b/src/components/Print/Print.jsx
index 6eb02aca7f61..92238fca7ded 100644
--- a/src/components/Print/Print.jsx
+++ b/src/components/Print/Print.jsx
@@ -33,7 +33,7 @@ export default function Print(props) {
   return (
     <div className="relative flex flex-wrap text-[15px] my-[0.6em]">
       <BarIcon
-        className="flex-none mt-[0.125em] mr-2 text-[#aaa] dark:text-[#69a8ee]"
+        className="flex-none mt-[0.125em] me-2 text-[#aaa] dark:text-[#69a8ee]"
         width={15}
         height={17}
         fill="#175d96"
@@ -42,11 +42,17 @@ export default function Print(props) {
         className="flex-1 max-w-[85%] overflow-hidden whitespace-nowrap text-ellipsis flex items-center flex-nowrap text-[#2b3a42] dark:text-[#b8b8b8]"
         href={printUrl}
         rel="nofollow noopener noreferrer"
-        title="Print"
+        title="طباعة"
         target="_blank"
       >
-        Print Section
-        <img src={icon} width={27} height={20} alt="Printer Icon" />
+        طباعة القسم
+        <img
+          className="ms-2"
+          src={icon}
+          width={27}
+          height={20}
+          alt="أيقونة الطابعة"
+        />
       </a>
     </div>
   );
diff --git a/src/components/ReadingProgress/ReadingProgress.jsx b/src/components/ReadingProgress/ReadingProgress.jsx
index 332493f38597..58bd1f54af60 100644
--- a/src/components/ReadingProgress/ReadingProgress.jsx
+++ b/src/components/ReadingProgress/ReadingProgress.jsx
@@ -8,7 +8,7 @@ export default function ReadingProgress() {
       role="progressbar"
       aria-valuemin={0}
       aria-valuemax={100}
-      aria-label="Reading progress"
+      aria-label="تقدم القراءة"
     >
       <div className="h-full w-full bg-[#36393c] dark:bg-[#9ab3c0] [transform-origin:left] will-change-transform [transform:scaleX(0)] [animation:grow-progress_auto_linear_forwards] animation-timeline-scroll" />
     </div>
diff --git a/src/components/ScrollToTop/ScrollToTop.jsx b/src/components/ScrollToTop/ScrollToTop.jsx
index b12a783eeb64..791f6fc5e093 100644
--- a/src/components/ScrollToTop/ScrollToTop.jsx
+++ b/src/components/ScrollToTop/ScrollToTop.jsx
@@ -27,7 +27,7 @@ function ScrollToTop() {
   }, []);
 
   return (
-    <div className="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-[999] pointer-events-none">
+    <div className="fixed bottom-4 end-4 md:bottom-8 md:end-8 z-[999] pointer-events-none">
       <button
         className={`
           group flex items-center justify-center 
@@ -46,8 +46,8 @@ function ScrollToTop() {
           }
         `}
         onClick={scrollToTop}
-        aria-label="Scroll to top"
-        title="Scroll to top"
+        aria-label="العودة إلى أعلى الصفحة"
+        title="العودة إلى أعلى الصفحة"
         disabled={!isVisible}
       >
         <svg
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 5bd75b6591a6..564233dd6cb1 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -31,10 +31,10 @@ export default function Sidebar({ className = "", pages, currentPage }) {
       <div className="p-6 sticky top-[-1px] overflow-y-auto max-h-screen">
         <div className="relative z-0 bg-white dark:bg-gray-100">
           <label htmlFor="docs-version" className="sr-only">
-            Select webpack version
+            اختر إصدار webpack
           </label>
           <select
-            aria-label="Select webpack version"
+            aria-label="اختر إصدار webpack"
             className="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"
             value={version}
             onChange={(event) => {
@@ -52,13 +52,13 @@ export default function Sidebar({ className = "", pages, currentPage }) {
           </select>
           {loading ? (
             <LoadingIcon
-              className="absolute right-5 top-5 fill-current text-gray-300 z-[-1]"
+              className="absolute end-5 top-5 fill-current text-gray-300 z-[-1]"
               width={20}
               height={20}
             />
           ) : (
             <DownIcon
-              className="absolute right-5 top-5 fill-current text-gray-300 z-[-1]"
+              className="absolute end-5 top-5 fill-current text-gray-300 z-[-1]"
               width={20}
               height={20}
             />
@@ -74,7 +74,7 @@ export default function Sidebar({ className = "", pages, currentPage }) {
           return (
             <div key={page.url}>
               {displayGroup ? (
-                <h4 className="mt-6 ml-1 capitalize text-lg font-bold text-slate-800 dark:text-slate-100">
+                <h4 className="mt-6 ms-1 text-lg font-bold text-slate-800 dark:text-slate-100">
                   {group}
                 </h4>
               ) : null}
diff --git a/src/components/SidebarItem/SidebarItem.jsx b/src/components/SidebarItem/SidebarItem.jsx
index 328c3dc5359c..7f6fe4115776 100644
--- a/src/components/SidebarItem/SidebarItem.jsx
+++ b/src/components/SidebarItem/SidebarItem.jsx
@@ -44,11 +44,11 @@ function scrollTop(event) {
 
 function Anchors({ anchors, url }) {
   return (
-    <ul className="relative hidden flex-[0_0_100%] flex-wrap my-[0.35em] pl-6 overflow-hidden list-none leading-[19px] before:content-[''] before:absolute before:h-[calc(100%-0.6em)] before:top-0 before:left-6 before:border-l before:border-dashed before:border-[#777676] group-data-[open]/item:flex">
+    <ul className="relative hidden flex-[0_0_100%] flex-wrap my-[0.35em] ps-6 overflow-hidden list-none leading-[19px] before:content-[''] before:absolute before:h-[calc(100%-0.6em)] before:top-0 before:start-6 before:border-s before:border-dashed before:border-[#777676] group-data-[open]/item:flex">
       {anchors.map((anchor) => (
         <li
           key={generateAnchorURL(url, anchor)}
-          className="relative flex-[0_0_100%] my-1 first:mt-0 last:mb-0 pl-4 overflow-hidden whitespace-nowrap text-ellipsis before:content-[''] before:absolute before:w-2 before:left-0 before:top-[10px] before:border-b before:border-dashed before:border-[#777676]"
+          className="relative flex-[0_0_100%] my-1 first:mt-0 last:mb-0 ps-4 overflow-hidden whitespace-nowrap text-ellipsis before:content-[''] before:absolute before:w-2 before:start-0 before:top-[10px] before:border-b before:border-dashed before:border-[#777676]"
           title={anchor.title}
         >
           <NavLink
@@ -92,19 +92,19 @@ export default function SidebarItem({ title, anchors = [], url, currentPage }) {
         <button
           className="bg-transparent border-none p-0 flex items-center"
           onClick={toggle}
-          aria-label={`Toggle ${title} section`}
+          aria-label={`تبديل قسم ${title}`}
           aria-expanded={open}
         >
           <ChevronRightIcon
             width={15}
             height={17}
             fill="#175d96"
-            className={`flex-none mt-[0.125em] mr-2 cursor-pointer text-[#175d96] dark:text-[#69a8ee] transition-all duration-250 hover:text-[#333] ${open ? "origin-center rotate-90" : ""}`}
+            className={`flex-none mt-[0.125em] me-2 cursor-pointer text-[#175d96] dark:text-[#69a8ee] transition-all duration-250 hover:text-[#333] ${open ? "origin-center rotate-90" : ""}`}
           />
         </button>
       ) : (
         <BarIcon
-          className="flex-none mt-[0.125em] mr-2 text-[#aaa] dark:text-[#69a8ee]"
+          className="flex-none mt-[0.125em] me-2 text-[#aaa] dark:text-[#69a8ee]"
           width={15}
           height={17}
           fill="#175d96"
diff --git a/src/components/SidebarItem/SidebarItem.test.jsx b/src/components/SidebarItem/SidebarItem.test.jsx
index c1eb4a46bcfb..40715929f1eb 100644
--- a/src/components/SidebarItem/SidebarItem.test.jsx
+++ b/src/components/SidebarItem/SidebarItem.test.jsx
@@ -56,7 +56,7 @@ describe("SidebarItem", () => {
     expect(wrapper.getAttribute("data-open")).toBeNull();
 
     const toggleButton = screen.getByRole("button", {
-      name: /toggle getting started section/i,
+      name: /تبديل قسم Getting Started/,
     });
     fireEvent.click(toggleButton);
 
diff --git a/src/components/SidebarItem/__snapshots__/SidebarItem.test.jsx.snap b/src/components/SidebarItem/__snapshots__/SidebarItem.test.jsx.snap
index edfbd4f8f5fe..b40ea08de268 100644
--- a/src/components/SidebarItem/__snapshots__/SidebarItem.test.jsx.snap
+++ b/src/components/SidebarItem/__snapshots__/SidebarItem.test.jsx.snap
@@ -6,11 +6,11 @@ exports[`SidebarItem matches snapshot 1`] = `
 >
   <button
     aria-expanded="false"
-    aria-label="Toggle Getting Started section"
+    aria-label="تبديل قسم Getting Started"
     class="bg-transparent border-none p-0 flex items-center"
   >
     <svg-mock
-      class="flex-none mt-[0.125em] mr-2 cursor-pointer text-[#175d96] dark:text-[#69a8ee] transition-all duration-250 hover:text-[#333] "
+      class="flex-none mt-[0.125em] me-2 cursor-pointer text-[#175d96] dark:text-[#69a8ee] transition-all duration-250 hover:text-[#333] "
       fill="#175d96"
       height="17"
       width="15"
@@ -25,10 +25,10 @@ exports[`SidebarItem matches snapshot 1`] = `
     Getting Started
   </a>
   <ul
-    class="relative hidden flex-[0_0_100%] flex-wrap my-[0.35em] pl-6 overflow-hidden list-none leading-[19px] before:content-[''] before:absolute before:h-[calc(100%-0.6em)] before:top-0 before:left-6 before:border-l before:border-dashed before:border-[#777676] group-data-[open]/item:flex"
+    class="relative hidden flex-[0_0_100%] flex-wrap my-[0.35em] ps-6 overflow-hidden list-none leading-[19px] before:content-[''] before:absolute before:h-[calc(100%-0.6em)] before:top-0 before:start-6 before:border-s before:border-dashed before:border-[#777676] group-data-[open]/item:flex"
   >
     <li
-      class="relative flex-[0_0_100%] my-1 first:mt-0 last:mb-0 pl-4 overflow-hidden whitespace-nowrap text-ellipsis before:content-[''] before:absolute before:w-2 before:left-0 before:top-[10px] before:border-b before:border-dashed before:border-[#777676]"
+      class="relative flex-[0_0_100%] my-1 first:mt-0 last:mb-0 ps-4 overflow-hidden whitespace-nowrap text-ellipsis before:content-[''] before:absolute before:w-2 before:start-0 before:top-[10px] before:border-b before:border-dashed before:border-[#777676]"
       title="Step 1"
     >
       <a
diff --git a/src/components/SidebarMobile/SidebarMobile.jsx b/src/components/SidebarMobile/SidebarMobile.jsx
index c6edd6e93b98..260deacb9bf6 100644
--- a/src/components/SidebarMobile/SidebarMobile.jsx
+++ b/src/components/SidebarMobile/SidebarMobile.jsx
@@ -142,7 +142,7 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
         <Link
           key={url}
           className={clsx(
-            "block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px]",
+            "block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px]",
             active
               ? "text-gray-900 font-semibold bg-[#f1f4f4] dark:text-white dark:bg-[#222424]"
               : "text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white",
@@ -169,7 +169,7 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
       return (
         <div
           className={clsx(
-            "border-l-2 pb-[0.5em]",
+            "border-s-2 pb-[0.5em]",
             active ? "border-blue-200" : "border-transparent",
           )}
           key={section.url}
@@ -220,7 +220,7 @@ export default function SidebarMobile({ isOpen, toggle, sections }) {
         <button
           className="sidebar-mobile__close absolute cursor-pointer border-none right-[22px] top-[10px] text-[1.3em] bg-[#175d96] text-white w-[30px] h-[30px] flex items-center justify-center rounded-full transition-colors duration-150 [-webkit-tap-highlight-color:transparent] hover:bg-[#135d96]"
           onClick={() => toggle(false)}
-          aria-label="Close navigation menu"
+          aria-label="إغلاق قائمة التنقل"
         >
           <CloseIcon fill="#fff" width={20} />
         </button>
diff --git a/src/components/SidebarMobile/SidebarMobile.test.jsx b/src/components/SidebarMobile/SidebarMobile.test.jsx
index bcf367f446e5..0cc97fc05670 100644
--- a/src/components/SidebarMobile/SidebarMobile.test.jsx
+++ b/src/components/SidebarMobile/SidebarMobile.test.jsx
@@ -67,7 +67,7 @@ describe("SidebarMobile", () => {
   it("calls toggle(false) when close button is clicked", () => {
     const toggle = jest.fn();
     renderSidebar({ toggle });
-    fireEvent.click(screen.getByRole("button", { name: /close navigation/i }));
+    fireEvent.click(screen.getByRole("button", { name: /إغلاق قائمة التنقل/ }));
     expect(toggle).toHaveBeenCalledWith(false);
   });
 
diff --git a/src/components/SidebarMobile/__snapshots__/SidebarMobile.test.jsx.snap b/src/components/SidebarMobile/__snapshots__/SidebarMobile.test.jsx.snap
index 968013aa5781..0a24aa23915e 100644
--- a/src/components/SidebarMobile/__snapshots__/SidebarMobile.test.jsx.snap
+++ b/src/components/SidebarMobile/__snapshots__/SidebarMobile.test.jsx.snap
@@ -11,7 +11,7 @@ exports[`SidebarMobile matches snapshot when closed 1`] = `
     class="relative w-[285px] h-screen overflow-x-hidden py-1 bg-white dark:bg-[#121212] shadow-[0_0_15px_rgba(0,0,0,0.2)]"
   >
     <button
-      aria-label="Close navigation menu"
+      aria-label="إغلاق قائمة التنقل"
       class="sidebar-mobile__close absolute cursor-pointer border-none right-[22px] top-[10px] text-[1.3em] bg-[#175d96] text-white w-[30px] h-[30px] flex items-center justify-center rounded-full transition-colors duration-150 [-webkit-tap-highlight-color:transparent] hover:bg-[#135d96]"
     >
       <svg-mock
@@ -20,7 +20,7 @@ exports[`SidebarMobile matches snapshot when closed 1`] = `
       />
     </button>
     <div
-      class="border-l-2 pb-[0.5em] border-transparent"
+      class="border-s-2 pb-[0.5em] border-transparent"
     >
       <a
         class="uppercase pt-[0.75em] px-4 pb-[0.25em] font-semibold block text-[1.1rem] text-[#2B3A42] dark:text-[#cadbe6]"
@@ -32,14 +32,14 @@ exports[`SidebarMobile matches snapshot when closed 1`] = `
         </h3>
       </a>
       <a
-        class="block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
+        class="block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
         data-discover="true"
         href="/guides/getting-started/"
       >
         Getting Started
       </a>
       <a
-        class="block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
+        class="block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
         data-discover="true"
         href="/guides/installation/"
       >
@@ -47,7 +47,7 @@ exports[`SidebarMobile matches snapshot when closed 1`] = `
       </a>
     </div>
     <div
-      class="border-l-2 pb-[0.5em] border-transparent"
+      class="border-s-2 pb-[0.5em] border-transparent"
     >
       <a
         class="uppercase pt-[0.75em] px-4 pb-[0.25em] font-semibold block text-[1.1rem] text-[#2B3A42] border-t border-gray-200 dark:border-[#343434] dark:text-[#cadbe6]"
@@ -59,7 +59,7 @@ exports[`SidebarMobile matches snapshot when closed 1`] = `
         </h3>
       </a>
       <a
-        class="block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
+        class="block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
         data-discover="true"
         href="/concepts/entry-points/"
       >
@@ -81,7 +81,7 @@ exports[`SidebarMobile matches snapshot when open 1`] = `
     class="relative w-[285px] h-screen overflow-x-hidden py-1 bg-white dark:bg-[#121212] shadow-[0_0_15px_rgba(0,0,0,0.2)]"
   >
     <button
-      aria-label="Close navigation menu"
+      aria-label="إغلاق قائمة التنقل"
       class="sidebar-mobile__close absolute cursor-pointer border-none right-[22px] top-[10px] text-[1.3em] bg-[#175d96] text-white w-[30px] h-[30px] flex items-center justify-center rounded-full transition-colors duration-150 [-webkit-tap-highlight-color:transparent] hover:bg-[#135d96]"
     >
       <svg-mock
@@ -90,7 +90,7 @@ exports[`SidebarMobile matches snapshot when open 1`] = `
       />
     </button>
     <div
-      class="border-l-2 pb-[0.5em] border-transparent"
+      class="border-s-2 pb-[0.5em] border-transparent"
     >
       <a
         class="uppercase pt-[0.75em] px-4 pb-[0.25em] font-semibold block text-[1.1rem] text-[#2B3A42] dark:text-[#cadbe6]"
@@ -102,14 +102,14 @@ exports[`SidebarMobile matches snapshot when open 1`] = `
         </h3>
       </a>
       <a
-        class="block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
+        class="block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
         data-discover="true"
         href="/guides/getting-started/"
       >
         Getting Started
       </a>
       <a
-        class="block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
+        class="block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
         data-discover="true"
         href="/guides/installation/"
       >
@@ -117,7 +117,7 @@ exports[`SidebarMobile matches snapshot when open 1`] = `
       </a>
     </div>
     <div
-      class="border-l-2 pb-[0.5em] border-transparent"
+      class="border-s-2 pb-[0.5em] border-transparent"
     >
       <a
         class="uppercase pt-[0.75em] px-4 pb-[0.25em] font-semibold block text-[1.1rem] text-[#2B3A42] border-t border-gray-200 dark:border-[#343434] dark:text-[#cadbe6]"
@@ -129,7 +129,7 @@ exports[`SidebarMobile matches snapshot when open 1`] = `
         </h3>
       </a>
       <a
-        class="block py-[0.5em] px-[17px] capitalize [-webkit-tap-highlight-color:transparent] ml-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
+        class="block py-[0.5em] px-[17px] [-webkit-tap-highlight-color:transparent] ms-[20px] text-gray-600 dark:text-[#a3a3a3] hover:text-gray-600 active:text-gray-900 active:font-semibold active:bg-[#f1f4f4] dark:active:bg-[#222424] dark:active:text-white"
         data-discover="true"
         href="/concepts/entry-points/"
       >
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 09b0d1551c8f..1abc80466cef 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -47,6 +47,18 @@ import "../../styles/index.css";
 
 import clientSideRedirections from "./clientSideRedirections.js";
 
+const SECTION_TITLES = {
+  api: "API",
+  blog: "المدونة",
+  concepts: "المفاهيم",
+  configuration: "التخصيص",
+  contribute: "المساهمة",
+  guides: "الأدلة",
+  loaders: "Loaders",
+  migrate: "الترقية",
+  plugins: "Plugins",
+};
+
 function Site(props) {
   const location = useLocation();
   const navigate = useNavigate();
@@ -90,8 +102,8 @@ function Site(props) {
           date,
           teaser,
         }) => ({
-          title: title || name,
-          content: title || name,
+          title: title || SECTION_TITLES[name] || name,
+          content: title || SECTION_TITLES[name] || name,
           url,
           group,
           sort,
@@ -195,7 +207,7 @@ function Site(props) {
 
   const description =
     getPageDescription(Content, location.pathname) ||
-    "webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.";
+    "webpack هو module bundler. هدفه الأساسي حزم ملفات JavaScript لاستخدامها في المتصفح، ويمكنه كذلك تحويل أي resource أو asset تقريبًا وحزمه أو تجهيزه.";
 
   function isPrintPage(url) {
     return url.includes("/printable");
@@ -260,7 +272,7 @@ function Site(props) {
         <link
           rel="alternate"
           type="application/rss+xml"
-          title="webpack Blog"
+          title="مدونة webpack"
           href="https://webpack.js.org/feed.xml"
         />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -282,8 +294,8 @@ function Site(props) {
           toggleSidebar={_toggleSidebar}
           links={[
             {
-              content: "Documentation",
-              ariaLabel: "webpack documentation",
+              content: "التوثيق",
+              ariaLabel: "توثيق webpack",
               url: "/concepts/",
               isActive: (_, location) =>
                 /^\/(api|concepts|configuration|guides|loaders|migrate|plugins)/.test(
@@ -296,11 +308,11 @@ function Site(props) {
               ),
             },
             {
-              content: "Contribute",
+              content: "المساهمة",
               url: "/contribute/",
-              ariaLabel: "contribute to webpack",
+              ariaLabel: "المساهمة في webpack",
             },
-            { content: "Blog", url: "/blog/", ariaLabel: "webpack blog" },
+            { content: "المدونة", url: "/blog/", ariaLabel: "مدونة webpack" },
           ]}
         />
         {location.pathname !== "/" && <ReadingProgress />}
diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
index aaaf1901d2d9..2707a9faf59c 100644
--- a/src/components/Splash/Splash.jsx
+++ b/src/components/Splash/Splash.jsx
@@ -11,22 +11,22 @@ const Support = lazy(() => import("../Support/Support.jsx"));
 
 const SponsorsPlaceholder = () => (
   <>
-    <h2>Latest Sponsors</h2>
+    <h2>أحدث الرعاة</h2>
     <PlaceholderComponent />
 
-    <h2>Platinum Sponsors</h2>
+    <h2>رعاة Platinum</h2>
     <PlaceholderComponent />
 
-    <h2>Gold Sponsors</h2>
+    <h2>رعاة Gold</h2>
     <PlaceholderComponent />
 
-    <h2>Silver Sponsors</h2>
+    <h2>رعاة Silver</h2>
     <PlaceholderComponent />
 
-    <h2>Bronze Sponsors</h2>
+    <h2>رعاة Bronze</h2>
     <PlaceholderComponent />
 
-    <h2>Backers</h2>
+    <h2>الداعمون</h2>
     <PlaceholderComponent />
   </>
 );
@@ -58,13 +58,12 @@ const Splash = () => {
       <div className="relative text-center page__content [&_p]:my-[1em]! [&_p]:mx-auto! [&_p]:max-w-200 [&_pre]:text-left [&_.icon-link]:hidden">
         <Container className="py-[5em] px-[1em] md:px-[1.5em]">
           <Markdown>
-            <h1 id="sponsors">Support the Team</h1>
+            <h1 id="sponsors">ادعم الفريق</h1>
 
             <p>
-              Through contributions, donations, and sponsorship, you allow
-              webpack to thrive. Your donations directly support office hours,
-              continued enhancements, and most importantly, great documentation
-              and learning material!
+              من خلال المساهمات والتبرعات والرعاية، تساعد webpack على الاستمرار
+              والتطور. تبرعاتك تدعم ساعات العمل المفتوحة، والتحسينات المستمرة،
+              والأهم من ذلك توثيقاً ومواد تعلم أفضل.
             </p>
 
             {showSponsors ? (
@@ -81,8 +80,7 @@ const Splash = () => {
                         )
                       }
                     />
-                    Show sponsors by their average monthly amount of sponsoring
-                    in the last year.
+                    اعرض الرعاة حسب متوسط مبلغ الرعاية الشهري خلال آخر سنة.
                   </label>
                 </p>
 
diff --git a/src/components/Splash/second/left.mdx b/src/components/Splash/second/left.mdx
index 16aec42dd5b2..ff17270dd1e9 100644
--- a/src/components/Splash/second/left.mdx
+++ b/src/components/Splash/second/left.mdx
@@ -16,4 +16,4 @@ export default {
 };
 ```
 
-تفضّل شرحًا بالفيديو؟ **[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)**
+تفضّل شرحًا بالفيديو؟ **[بدون ملف configuration](https://youtu.be/3Nv9muOkb6k?t=21293)**
diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index 3f68de14386b..ed6deb17d135 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -9,8 +9,11 @@ export default function SplashViz() {
       dir="ltr"
       className="relative h-[clamp(35rem,calc(100vh-80px),45rem)] bg-blue-800 grid grid-rows-[auto_1fr] overflow-hidden p-4 max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)] dark:bg-gray-900!"
     >
-      <h1 className="flex flex-wrap items-center justify-center text-white text-[33.178px] md:text-[39.813px] text-center font-[200] mt-[80px] md:mt-[90px] row-start-1 row-end-2">
-        <span> bundle your</span>
+      <h1
+        dir="rtl"
+        className="flex flex-wrap items-center justify-center gap-x-3 text-white text-[33.178px] md:text-[39.813px] text-center font-[200] mt-[80px] md:mt-[90px] row-start-1 row-end-2"
+      >
+        <span>حزّم</span>
         <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
           <span> assets </span>
           <span> scripts </span>
diff --git a/src/components/SplashViz/SplashVizSVG.mjs b/src/components/SplashViz/SplashVizSVG.mjs
index f2a1768c55aa..c75bac6d31d5 100644
--- a/src/components/SplashViz/SplashVizSVG.mjs
+++ b/src/components/SplashViz/SplashVizSVG.mjs
@@ -3,8 +3,8 @@ export default {
   body: `
   <svg viewBox="0 0 1088 615" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke-width="1" fill="none" fill-rule="evenodd">
-        <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
-            <tspan x="933.778" y="459">STATIC ASSETS</tspan>
+        <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA" text-anchor="end">
+            <tspan x="1060" y="459">ASSETS ثابتة</tspan>
         </text>
         <g transform="translate(1002, 326)">
             <g>
@@ -49,7 +49,7 @@ export default {
             <path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
         </g>
         <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
-            <tspan x="24.934" y="562">MODULES WITH DEPENDENCIES</tspan>
+            <tspan x="24.934" y="562">MODULES مع DEPENDENCIES</tspan>
         </text>
         <g transform="translate(228, 335)">
             <g>
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index 303d257e9843..ff2a4024086c 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -60,7 +60,7 @@ const Sponsors = () => (
       <div className="m-5 flex flex-col items-center transition-transform duration-200">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
           <div className="text-3xl font-normal text-gray-600 dark:text-gray-400 my-4 text-center leading-snug">
-            Datagrid and Charting for Enterprise Applications
+            Data grid وcharting لتطبيقات المؤسسات
           </div>
 
           <div className="flex justify-center w-full">
@@ -74,7 +74,7 @@ const Sponsors = () => (
           </div>
 
           <div className="italic text-2xl text-gray-600 dark:text-gray-400 my-4 text-center">
-            Proud to partner with webpack
+            فخورون بالشراكة مع webpack
           </div>
         </Link>
       </div>
diff --git a/src/components/StackBlitzPreview/StackBlitzPreview.jsx b/src/components/StackBlitzPreview/StackBlitzPreview.jsx
index a5a52246ad96..62178af5e03a 100644
--- a/src/components/StackBlitzPreview/StackBlitzPreview.jsx
+++ b/src/components/StackBlitzPreview/StackBlitzPreview.jsx
@@ -4,17 +4,17 @@ import openButton from "../../assets/open-in-stackblitz-button.svg";
 export default function StackBlitzPreview(props = {}) {
   const {
     example = "",
-    description = "Check out this guide live on StackBlitz.",
+    description = "جرّب هذا الدليل مباشرة على StackBlitz.",
   } = props;
 
   const url = `https://stackblitz.com/github/webpack/webpack.js.org/tree/main/examples/${example}`;
 
   return (
     <aside className="preview">
-      <h6 className="preview__prefix">live preview</h6>
+      <h6 className="preview__prefix">معاينة مباشرة</h6>
       <p>{description}</p>
       <a href={url} target="_blank" rel="noopener noreferrer">
-        <img src={openButton} alt="Open in StackBlitz" />
+        <img src={openButton} alt="افتح في StackBlitz" />
       </a>
     </aside>
   );
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index c3bb7a6976ca..75b8d90ce16e 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -85,6 +85,35 @@ function formatMoney(number) {
   return Math.round(number).toLocaleString("en-US");
 }
 
+const rankLabels = {
+  backer: "الداعمون",
+  latest: "أحدث الرعاة",
+  bronze: "رعاة Bronze",
+  silver: "رعاة Silver",
+  gold: "رعاة Gold",
+  platinum: "رعاة Platinum",
+};
+
+function getRankHeading(rank, type) {
+  if (rank === "backer" || rank === "latest") {
+    return rankLabels[rank];
+  }
+
+  return type === "monthly" ? `${rankLabels[rank]} الشهريون` : rankLabels[rank];
+}
+
+function formatAmountRange(minimum, maximum) {
+  if (minimum && maximum) {
+    return `من $${formatMoney(minimum)} إلى أقل من $${formatMoney(maximum)}`;
+  }
+
+  if (minimum) {
+    return `$${formatMoney(minimum)} أو أكثر`;
+  }
+
+  return "أي مبلغ";
+}
+
 const AVATAR_CLASSES = {
   backer:
     "inline-block w-[31px] h-[31px] rounded-full border border-white shadow-[0_0_0_1px_rgb(112,202,10)] overflow-hidden align-middle",
@@ -201,15 +230,7 @@ export default function Support({ rank, type }) {
 
   return (
     <>
-      <h2>
-        {rank === "backer"
-          ? "Backers"
-          : rank === "latest"
-            ? "Latest Sponsors"
-            : `${rank[0].toUpperCase()}${rank.slice(1)} ${
-                type === "monthly" ? "Monthly " : ""
-              }Sponsors`}
-      </h2>
+      <h2>{getRankHeading(rank, type)}</h2>
       <div
         ref={containerRef}
         className="flex flex-wrap justify-center px-2 pb-4"
@@ -217,34 +238,27 @@ export default function Support({ rank, type }) {
         <div className="w-full mb-4">
           {rank === "backer" ? (
             <p>
-              The following <b>Backers</b> are individuals who have contributed
-              various amounts of money in order to help support webpack. Every
-              little bit helps, and we appreciate even the smallest
-              contributions. This list shows {random} randomly chosen backers:
+              <b>الداعمون</b> التالية أسماؤهم أفراد ساهموا بمبالغ مختلفة لدعم
+              webpack. كل مساهمة تساعدنا، ونقدّر حتى أصغر المساهمات. تعرض هذه
+              القائمة {random} داعماً اختيروا عشوائياً:
             </p>
           ) : rank === "latest" ? (
             <p>
-              The following persons/organizations made their first donation in
-              the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days
-              (limited to the top {limit}).
+              الأشخاص أو الجهات التالية قدمت أول تبرع لها خلال آخر{" "}
+              {Math.round(maxAge / (1000 * 60 * 60 * 24))} يوماً، مع عرض أعلى{" "}
+              {limit} فقط.
             </p>
           ) : (
             <p>
-              <b className="capitalize mr-1">
-                {type === "monthly" ? `${rank} monthly` : rank} sponsors
-              </b>
+              <b className="me-1">{getRankHeading(rank, type)}</b>
               {type === "monthly" ? (
                 <span>
-                  are those who are currently pledging{" "}
-                  {minimum ? `$${formatMoney(minimum)}` : "up"}{" "}
-                  {maximum ? `to $${formatMoney(maximum)}` : "or more"} monthly
-                  to webpack.
+                  هم من يتعهدون حالياً بمبلغ{" "}
+                  {formatAmountRange(minimum, maximum)} شهرياً لدعم webpack.
                 </span>
               ) : (
                 <span>
-                  are those who have contributed{" "}
-                  {minimum ? `$${formatMoney(minimum)}` : "up"}{" "}
-                  {maximum ? `to $${formatMoney(maximum)}` : "or more"} to
+                  هم من ساهموا بمبلغ {formatAmountRange(minimum, maximum)} لدعم
                   webpack.
                 </span>
               )}
@@ -255,9 +269,9 @@ export default function Support({ rank, type }) {
         {supporters.map((supporter, index) => (
           <Tooltip
             key={supporter.slug || index}
-            content={`$${formatMoney(supporter.totalDonations / 100)} by ${
+            content={`$${formatMoney(supporter.totalDonations / 100)} بواسطة ${
               supporter.name || supporter.slug
-            } ($${formatMoney(supporter.monthlyDonations / 100)} monthly)`}
+            } ($${formatMoney(supporter.monthlyDonations / 100)} شهرياً)`}
           >
             <a
               className="relative mx-0.5 mb-0.5 dark:bg-white"
@@ -277,8 +291,8 @@ export default function Support({ rank, type }) {
                   alt={
                     supporter.alt ||
                     (supporter.name || supporter.slug
-                      ? `${supporter.name || supporter.slug}'s avatar`
-                      : "avatar")
+                      ? `صورة ${supporter.name || supporter.slug}`
+                      : "صورة داعم")
                   }
                   onError={handleImgError}
                 />
@@ -289,10 +303,10 @@ export default function Support({ rank, type }) {
 
         <div className="w-full mt-4">
           <a
-            className="inline-block py-[0.4em] px-[1em] uppercase text-[#175d96] border border-[#175d96] rounded-4xl transition-all duration-[250ms] hover:border-[#2f78c4] hover:bg-[#2f78c4] hover:text-white hover:shadow-[0_8px_18px_rgba(47,120,196,0.28)] dark:text-[#4fa8ff] dark:border-[#4fa8ff] dark:hover:border-[#4fa8ff] dark:hover:bg-[#2f78c4] dark:hover:text-white"
+            className="inline-block py-[0.4em] px-[1em] text-[#175d96] border border-[#175d96] rounded-4xl transition-all duration-[250ms] hover:border-[#2f78c4] hover:bg-[#2f78c4] hover:text-white hover:shadow-[0_8px_18px_rgba(47,120,196,0.28)] dark:text-[#4fa8ff] dark:border-[#4fa8ff] dark:hover:border-[#4fa8ff] dark:hover:bg-[#2f78c4] dark:hover:text-white"
             href="https://opencollective.com/webpack#support"
           >
-            Become a {rank === "backer" ? "backer" : "sponsor"}
+            كن {rank === "backer" ? "داعماً" : "راعياً"}
           </a>
         </div>
       </div>
diff --git a/src/components/Support/Support.latest.test.jsx b/src/components/Support/Support.latest.test.jsx
index d32417f6bc68..a4d8fe0fb82d 100644
--- a/src/components/Support/Support.latest.test.jsx
+++ b/src/components/Support/Support.latest.test.jsx
@@ -62,7 +62,7 @@ describe("Support with rank='latest'", () => {
 
   it("excludes supporters whose firstDonation is older than 21 days", () => {
     render(<Support rank="latest" type="total" />);
-    expect(screen.queryByAltText("Stale Org's avatar")).toBeNull();
+    expect(screen.queryByAltText("صورة Stale Org")).toBeNull();
   });
 
   it("shows SmallIcon for every supporter before intersection observer fires", () => {
diff --git a/src/components/Support/Support.test.jsx b/src/components/Support/Support.test.jsx
index 43534cea0eee..08520e9088ea 100644
--- a/src/components/Support/Support.test.jsx
+++ b/src/components/Support/Support.test.jsx
@@ -32,20 +32,18 @@ describe("Support", () => {
 
   it("renders a heading for backer rank", () => {
     render(<Support rank="backer" type="total" />);
-    expect(screen.getByRole("heading", { name: "Backers" })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "الداعمون" })).toBeTruthy();
   });
 
   it("renders a heading for latest rank", () => {
     render(<Support rank="latest" type="total" />);
-    expect(
-      screen.getByRole("heading", { name: "Latest Sponsors" }),
-    ).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "أحدث الرعاة" })).toBeTruthy();
   });
 
   it("renders maxAge days and limit in latest description", () => {
     render(<Support rank="latest" type="total" />);
-    expect(screen.getByText(/last 21 days/i)).toBeTruthy();
-    expect(screen.getByText(/top 30/i)).toBeTruthy();
+    expect(screen.getByText(/آخر 21 يوماً/)).toBeTruthy();
+    expect(screen.getByText(/أعلى 30/)).toBeTruthy();
   });
 
   it("renders no supporter images when latest data is empty", () => {
@@ -55,38 +53,34 @@ describe("Support", () => {
 
   it("renders a heading for gold rank", () => {
     render(<Support rank="gold" type="total" />);
-    expect(screen.getByRole("heading", { name: "Gold Sponsors" })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "رعاة Gold" })).toBeTruthy();
   });
 
   it("renders a heading for gold monthly rank", () => {
     render(<Support rank="gold" type="monthly" />);
     expect(
-      screen.getByRole("heading", { name: "Gold Monthly Sponsors" }),
+      screen.getByRole("heading", { name: "رعاة Gold الشهريون" }),
     ).toBeTruthy();
   });
 
   it("renders a heading for platinum rank", () => {
     render(<Support rank="platinum" type="total" />);
-    expect(
-      screen.getByRole("heading", { name: "Platinum Sponsors" }),
-    ).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "رعاة Platinum" })).toBeTruthy();
   });
 
   it("renders monthly description text", () => {
     render(<Support rank="gold" type="monthly" />);
-    expect(screen.getByText(/pledging/i)).toBeTruthy();
+    expect(screen.getByText(/شهرياً لدعم webpack/)).toBeTruthy();
   });
 
   it("renders the become a sponsor link for sponsor ranks", () => {
     render(<Support rank="gold" type="total" />);
-    expect(
-      screen.getByRole("link", { name: /become a sponsor/i }),
-    ).toBeTruthy();
+    expect(screen.getByRole("link", { name: /كن راعياً/ })).toBeTruthy();
   });
 
   it("renders the become a backer link for backer rank", () => {
     render(<Support rank="backer" type="total" />);
-    expect(screen.getByRole("link", { name: /become a backer/i })).toBeTruthy();
+    expect(screen.getByRole("link", { name: /كن داعماً/ })).toBeTruthy();
   });
 
   it("sets up IntersectionObserver on mount", () => {
diff --git a/src/components/Support/__snapshots__/Support.data.test.jsx.snap b/src/components/Support/__snapshots__/Support.data.test.jsx.snap
index 976ec81d11a8..c96894d5ff7b 100644
--- a/src/components/Support/__snapshots__/Support.data.test.jsx.snap
+++ b/src/components/Support/__snapshots__/Support.data.test.jsx.snap
@@ -2,6 +2,6 @@
 
 exports[`Support with supporter data matches snapshot with supporter data 1`] = `
 <h2>
-  Gold Sponsors
+  رعاة Gold
 </h2>
 `;
diff --git a/src/components/Support/__snapshots__/Support.test.jsx.snap b/src/components/Support/__snapshots__/Support.test.jsx.snap
index fba0cb14ccef..a29ff6bae776 100644
--- a/src/components/Support/__snapshots__/Support.test.jsx.snap
+++ b/src/components/Support/__snapshots__/Support.test.jsx.snap
@@ -2,6 +2,6 @@
 
 exports[`Support matches snapshot for backer rank 1`] = `
 <h2>
-  Backers
+  الداعمون
 </h2>
 `;
diff --git a/src/components/TextRotater/TextRotater.jsx b/src/components/TextRotater/TextRotater.jsx
index 9649b28b560f..46378a0b6afd 100644
--- a/src/components/TextRotater/TextRotater.jsx
+++ b/src/components/TextRotater/TextRotater.jsx
@@ -64,7 +64,7 @@ function TextRotater({ children, delay = 0, repeatDelay = 3000, maxWidth }) {
     >
       <div
         className={clsx(
-          "inline-flex flex-col text-left",
+          "inline-flex flex-col text-start",
           isAnimating && "text-rotater--slide-up",
         )}
         onTransitionEnd={handleTransitionEnd}
diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx
index acc1a93d0589..17281217cae2 100644
--- a/src/content/awesome-webpack.mdx
+++ b/src/content/awesome-webpack.mdx
@@ -1,5 +1,5 @@
 ---
-title: Awesome webpack
+title: قائمة Awesome webpack
 sort: 2
 contributors:
   - RlxChap2
diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
index f89165bb2b29..d8e95bb82aa8 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Concepts
+title: المفاهيم
 sort: -1
 contributors:
   - RlxChap2
diff --git a/src/content/concepts/manifest.mdx b/src/content/concepts/manifest.mdx
index a7dc39e205ae..818f3779a40a 100644
--- a/src/content/concepts/manifest.mdx
+++ b/src/content/concepts/manifest.mdx
@@ -1,5 +1,5 @@
 ---
-title: The Manifest
+title: ملف Manifest
 sort: 11
 contributors:
   - RlxChap2
diff --git a/src/content/concepts/under-the-hood.mdx b/src/content/concepts/under-the-hood.mdx
index 985d1bc0f14a..14e2937b88f6 100644
--- a/src/content/concepts/under-the-hood.mdx
+++ b/src/content/concepts/under-the-hood.mdx
@@ -1,5 +1,5 @@
 ---
-title: Under The Hood
+title: كيف يعمل webpack من الداخل
 sort: 14
 contributors:
   - RlxChap2
diff --git a/src/content/concepts/why-webpack.mdx b/src/content/concepts/why-webpack.mdx
index 15133a9c36b2..8a3c44df5512 100644
--- a/src/content/concepts/why-webpack.mdx
+++ b/src/content/concepts/why-webpack.mdx
@@ -1,5 +1,5 @@
 ---
-title: Why webpack
+title: لماذا webpack؟
 sort: 13
 contributors:
   - RlxChap2
diff --git a/src/content/configuration/entry-context.mdx b/src/content/configuration/entry-context.mdx
index 795cad1ff9b8..6b112aedacfb 100644
--- a/src/content/configuration/entry-context.mdx
+++ b/src/content/configuration/entry-context.mdx
@@ -1,5 +1,5 @@
 ---
-title: Entry and Context
+title: Entry وContext
 sort: 4
 contributors:
   - RlxChap2
diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx
index 0c19ba2b2011..339c95c60b85 100644
--- a/src/content/configuration/other-options.mdx
+++ b/src/content/configuration/other-options.mdx
@@ -1,5 +1,5 @@
 ---
-title: Other Options
+title: Options أخرى
 sort: 22
 contributors:
   - RlxChap2
diff --git a/src/content/configuration/watch.mdx b/src/content/configuration/watch.mdx
index 45c923c1e11b..0c1f617ff9ab 100644
--- a/src/content/configuration/watch.mdx
+++ b/src/content/configuration/watch.mdx
@@ -1,5 +1,5 @@
 ---
-title: Watch and WatchOptions
+title: Watch وWatchOptions
 sort: 14
 contributors:
   - RlxChap2
diff --git a/src/content/contribute/release-process.mdx b/src/content/contribute/release-process.mdx
index c6cd2d329f96..572f06e1a88f 100644
--- a/src/content/contribute/release-process.mdx
+++ b/src/content/contribute/release-process.mdx
@@ -1,5 +1,5 @@
 ---
-title: Release Process
+title: عملية الإصدار
 sort: 6
 contributors:
   - semon009
diff --git a/src/content/contribute/writers-guide.mdx b/src/content/contribute/writers-guide.mdx
index fc9b1ab54253..25b121f1d6f4 100644
--- a/src/content/contribute/writers-guide.mdx
+++ b/src/content/contribute/writers-guide.mdx
@@ -1,5 +1,5 @@
 ---
-title: Writer's Guide
+title: دليل الكتابة
 sort: 1
 contributors:
   - semon009
diff --git a/src/scripts/generate-rss.mjs b/src/scripts/generate-rss.mjs
index caf8ee894244..42343f70bdda 100644
--- a/src/scripts/generate-rss.mjs
+++ b/src/scripts/generate-rss.mjs
@@ -57,19 +57,19 @@ function main() {
         !child.url?.includes("/printable"),
     )
     .map((node) => ({
-      title: node.title || "Untitled",
+      title: node.title || "بدون عنوان",
       link: `${BASE_URL}${node.url}`,
       date: extractPubDate(node),
-      description: node.description || node.title || "Untitled",
+      description: node.description || node.title || "بدون عنوان",
     }))
     .toSorted((a, b) => b.date.getTime() - a.date.getTime());
 
   const feed = new Feed({
-    title: "webpack Blog",
-    description: "Announcements and updates from the webpack team",
+    title: "مدونة webpack",
+    description: "إعلانات وتحديثات من فريق webpack",
     id: `${BASE_URL}/blog/`,
     link: `${BASE_URL}/blog/`,
-    language: "en",
+    language: "ar",
     updated: new Date(),
     feedLinks: {
       rss: `${BASE_URL}/feed.xml`,
diff --git a/src/styles/index.css b/src/styles/index.css
index de55b7699cd5..f39dfa2cbcd1 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -87,6 +87,14 @@ html[dir="rtl"] [class~="group/item"] > svg {
   margin-right: 0;
 }
 
+html[dir="rtl"] [class~="group/item"] > button svg {
+  transform: rotate(180deg);
+}
+
+html[dir="rtl"] [class~="group/item"][data-open] > button svg {
+  transform: rotate(90deg);
+}
+
 html[dir="rtl"] [class~="group/item"] ul {
   padding-left: 0;
   padding-right: 1.5rem;
@@ -113,6 +121,21 @@ html[dir="rtl"] [role="progressbar"] > div {
   transform-origin: right;
 }
 
+html[dir="rtl"] .DocSearch-Container,
+html[dir="rtl"] .DocSearch-Modal {
+  direction: rtl;
+}
+
+html[dir="rtl"] .DocSearch-Input {
+  text-align: right;
+}
+
+html[dir="rtl"] .DocSearch-Hit-icon,
+html[dir="rtl"] .DocSearch-Hit-action,
+html[dir="rtl"] .DocSearch-Search-Icon {
+  transform: scaleX(-1);
+}
+
 .splash-viz__art,
 .splash-viz__art svg {
   direction: ltr;
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 5eac0eed63a1..d559636c0b83 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -83,13 +83,13 @@
   @apply max-w-100 m-auto;
 }
 .splash__left {
-  @apply w-full float-left md:w-1/2 md:px-3.75;
+  @apply w-full float-start md:w-1/2 md:px-3.75;
 }
 .splash__left p {
   text-align: start;
 }
 .splash__right {
-  @apply w-full float-left md:w-1/2 md:px-3.75 mb-[1em];
+  @apply w-full float-start md:w-1/2 md:px-3.75 mb-[1em];
 }
 .splash__right p {
   text-align: start;

From 17fd6ac76adea31f1f82f0bc586164c77b7e4dbe Mon Sep 17 00:00:00 2001
From: RlxChap2 <mmah02778@gmail.com>
Date: Sun, 14 Jun 2026 19:36:41 +0300
Subject: [PATCH 34/35] docs(cypress): fixed cypress e2e

---
 cypress/e2e/check-server-side-rendering.cy.js | 2 +-
 cypress/e2e/mobile-and-404.cy.js              | 4 ++--
 cypress/e2e/offline.cy.js                     | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/check-server-side-rendering.cy.js b/cypress/e2e/check-server-side-rendering.cy.js
index 986d94564899..ff894cfb7cf4 100644
--- a/cypress/e2e/check-server-side-rendering.cy.js
+++ b/cypress/e2e/check-server-side-rendering.cy.js
@@ -25,7 +25,7 @@ describe("server side rendered page", () => {
     cy.get('head meta[name="description"]').should(
       "have.attr",
       "content",
-      "webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.",
+      "webpack هو module bundler. هدفه الأساسي حزم ملفات JavaScript لاستخدامها في المتصفح، ويمكنه كذلك تحويل أي resource أو asset تقريبًا وحزمه أو تجهيزه.",
     );
   });
 
diff --git a/cypress/e2e/mobile-and-404.cy.js b/cypress/e2e/mobile-and-404.cy.js
index b9c403b8b233..4e1d870d3072 100644
--- a/cypress/e2e/mobile-and-404.cy.js
+++ b/cypress/e2e/mobile-and-404.cy.js
@@ -12,7 +12,7 @@ describe("Mobile Sidebar", () => {
       "sidebar-mobile--visible",
     );
 
-    cy.get('button[aria-label="Toggle navigation menu"]').click();
+    cy.get('button[aria-label="فتح قائمة التنقل"]').click();
     cy.get(".sidebar-mobile").should("have.class", "sidebar-mobile--visible");
 
     cy.get(".sidebar-mobile__close").click();
@@ -23,7 +23,7 @@ describe("Mobile Sidebar", () => {
   });
 
   it("should close sidebar when clicking outside", () => {
-    cy.get('button[aria-label="Toggle navigation menu"]').click();
+    cy.get('button[aria-label="فتح قائمة التنقل"]').click();
     // Click to the right of the 300px wide sidebar
     cy.get("body").click(350, 500, { force: true });
     cy.get(".sidebar-mobile").should(
diff --git a/cypress/e2e/offline.cy.js b/cypress/e2e/offline.cy.js
index 95bf1092bbff..440f2b985ce4 100644
--- a/cypress/e2e/offline.cy.js
+++ b/cypress/e2e/offline.cy.js
@@ -63,8 +63,7 @@ describe("offline", () => {
       cy.visit(url);
       cy.get("h1").contains(text);
 
-      // click `guides` link
-      cy.get('a[title="guides"]').click();
+      cy.get('a[title="الأدلة"]').click();
       cy.get("h1").contains("الأدلة");
     });
 

From bcaef2df57a3277f43506030d3ffa6f17bd5ee44 Mon Sep 17 00:00:00 2001
From: 0xMe2na <mennah.a.kh2@gmail.com>
Date: Wed, 17 Jun 2026 15:51:51 +0300
Subject: [PATCH 35/35] docs(concept): fixed Arabic translation

---
 src/content/concepts/configuration.mdx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/content/concepts/configuration.mdx b/src/content/concepts/configuration.mdx
index 3f5e7d5c4110..2769b7fbfbce 100644
--- a/src/content/concepts/configuration.mdx
+++ b/src/content/concepts/configuration.mdx
@@ -3,19 +3,19 @@ title: Configuration
 sort: 5
 contributors:
   - RlxChap2
+  - 0xMe2na
 ---
 
-ربما لاحظت أن ملفات تكوين webpack نادرًا ما تبدو متطابقة تمامًا. والسبب أن **ملف تكوين webpack هو ملف JavaScript يصدّر [تكوينًا](/configuration/) خاصًا بـ webpack.** بعد ذلك يعالج webpack هذا التكوين بناءً على الخصائص المعرّفة فيه.
+ربما لاحظت أن ملفات تكوين webpack نادرًا ما تبدو متطابقة تمامًا. والسبب أن **ملف تكوين webpack هو ملف JavaScript يصدّر [تكوينًا](/configuration/) خاصًا بـ webpack.** بعد ذلك يعالج webpack هذا التكوين بناءً على الخصائص المعرّفة لديه.
 
-ولأنه وحدة Node.js قياسية، يمكنك **فعل الآتي**:
+ولأنه ملف Node.js قياسي، يمكنك القيام بالآتي:
+- استيراد ملفات أخرى باستخدام `require(...)` أو `import`.
+- استخدام أدوات من npm باستخدام `require(...)` أو `import`.
+- كتابة تعبيرات التحكم الخاصة بـ JavaScript مثل `?:` و `if` و `for` وغيرها.
+- تعريف الثوابت أو المتغيرات للقيم التي تتكرر كثيرًا.
+- كتابة دوال وتنفيذها لتوليد أجزاء من التكوين.
 
-- استيراد ملفات أخرى باستخدام `require(...)` **أو** `import`
-- استخدام أدوات من npm باستخدام `require(...)` **أو** `import`
-- استخدام تعبيرات التحكم في JavaScript مثل `?:` و `if` و `for` وغيرها
-- استخدام الثوابت أو المتغيرات للقيم التي تتكرر كثيرًا
-- كتابة دوال وتنفيذها لتوليد جزء من التكوين
-
-استخدم هذه الإمكانات عندما تكون مناسبة.
+استخدم هذه الميزات وقتما تراه مناسبًا.
 
 مع أنها ممكنة تقنيًا، **ينبغي تجنب الممارسات الآتية**: