From c155b22c0069ab12bcb673119f9eb2d0d1c19b48 Mon Sep 17 00:00:00 2001 From: RlxChap2 Date: Wed, 20 May 2026 21:04:48 +0300 Subject: [PATCH 01/41] docs(concept): translated concepts files --- 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 | 39 ++-- src/content/concepts/under-the-hood.mdx | 83 ++++--- src/content/concepts/why-webpack.mdx | 49 ++-- 15 files changed, 492 insertions(+), 550 deletions(-) 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:
**`ERROR in Entry module not found: Error: Can't resolve './src'`**

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 الخطأ:
**`ERROR in Entry module not found: Error: Can't resolve './src'`**

تظهر الرسالة `'./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: { string | [string] } | {}` +الاستخدام: `entry: { string | [string] } | {}` -- ``: name of the entry chunk -- `string`: single entry file -- `[string]`: multiple entry files -- `{}`: empty object +- ``: اسم 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`).

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`.

لا يُنصح بذلك في 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 + -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:
**`ERROR in Entry module not found: Error: Can't resolve './src'`**

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 الخطأ:
**`ERROR in Entry module not found: Error: Can't resolve './src'`**

تظهر الرسالة `'./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. + -## 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). + -## 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 + -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). + -## 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) وعلى التحسينات التي تحدث مع كل قيمة. + + -## 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 + -[`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 { }; ``` + + ### 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` كلما أمكن، لأن ذلك يقلل التكرار في كودك المصدري ويسهل تصحيح محمّل أو العثور عليه عندما يحدث شيء غير متوقع. + + -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). + -## 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 + -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، لكنه لا يقتصر عليها. -## Low-level concepts + + +## مفاهيم منخفضة المستوى + +نميز بين الوحدات المحلية والوحدات البعيدة. الوحدات المحلية هي وحدات عادية تُعد جزءًا من 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). + -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. + -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`. + -## 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 + -### 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 مكتبة المكونات. يمكن نشر تغييرات مكتبة المكونات بشكل منفصل دون الحاجة إلى إعادة نشر كل التطبيقات. وسيستخدم التطبيق تلقائيًا النسخة الأحدث من مكتبة المكونات. + + ## 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) + + -## 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. + + ## 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 تلقائيًا نيابة عنك. + + -## 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(); ``` -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(); ``` -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 + + +### مسارات الوحدات ```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 `` 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 يحتوي ``. -## 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 5512ba88dbd8..774529dc7a3d 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 +## أهداف متعددة -webpack supports passing an [array of strings](/configuration/target/#string) to the `target` property, in which case the common subset of their features is used. This lets you build universal code that runs in multiple environments — for example, combine `web` and `node`: +يدعم webpack تمرير [مصفوفة من السلاسل النصية](/configuration/target/#string) إلى الخاصية `target`. وفي هذه الحالة، يستخدم مجموعة الخصائص المشتركة بين الأهداف المحددة. يتيح لك ذلك إنشاء حزمة تعمل في بيئات متعددة، مثل الجمع بين `web` و`node`: **webpack.config.js** @@ -44,7 +39,7 @@ export default { }; ``` -Alternatively, you can create an isomorphic library by bundling two separate configurations: +وبدلًا من ذلك، يمكنك إنشاء مكتبة متوافقة مع الخادم والمتصفح عبر حزم تكوينين منفصلين: **webpack.config.js** @@ -76,13 +71,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 9b91f3d09afa5c11359a7429bc20f9eccf9802f1 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 02/41] feat(arabic): initialize Arabic translation Translate initial blog and configuration index content to Arabic while preserving MDX structure. Co-authored-by: ameencfw Co-authored-by: Shimizu Hiroyuki --- .../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 | 86 +- src/content/configuration/index.mdx | 41 +- 8 files changed, 1292 insertions(+), 1309 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 <= 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 <= 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 ` @@ -1277,9 +1248,9 @@ Now the variable `MyLibrary` will be bound with the exports of your entry file, ``` -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 { @@ -1291,7 +1262,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 { @@ -1307,7 +1278,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 @@ -1318,9 +1289,9 @@ In the above example, we're passing a single entry file to `entry`, however, web ``` - 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 { @@ -1329,7 +1300,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, @@ -1350,9 +1321,9 @@ In the above example, we're passing a single entry file to `entry`, however, web -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 { @@ -1366,7 +1337,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*/); @@ -1385,9 +1356,9 @@ export default { }; ``` -Specify a name for the library. +حدد اسمًا لـ library. -- Type: +- النوع: ```ts string | string[] | {amd?: string, commonjs?: string, root?: string | string[]} @@ -1395,19 +1366,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 { @@ -1421,16 +1392,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 { @@ -1444,15 +1415,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' @@ -1468,29 +1439,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 { @@ -1504,17 +1475,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 { @@ -1528,7 +1499,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_; @@ -1536,7 +1507,7 @@ globalThis.MyLibrary = _entry_return_; globalThis.MyLibrary.doSomething(); ``` -##### type: 'global' +##### النوع: "عالمي" ```js export default { @@ -1550,7 +1521,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_; @@ -1558,7 +1529,7 @@ globalThis.MyLibrary = _entry_return_; globalThis.MyLibrary.doSomething(); ``` -##### type: 'commonjs' +##### النوع: "كومونجس" ```js export default { @@ -1572,7 +1543,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_; @@ -1580,13 +1551,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 { @@ -1596,18 +1567,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" @@ -1619,32 +1590,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_; @@ -1652,15 +1623,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" @@ -1669,16 +1640,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() {} @@ -1694,27 +1665,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 ` + -``` +```` **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 `