@@ -60,7 +60,7 @@ const Sponsors = () => (
- Datagrid and Charting for Enterprise Applications
+ Data grid وcharting لتطبيقات المؤسسات
@@ -74,7 +74,7 @@ const Sponsors = () => (
- Proud to partner with webpack
+ فخورون بالشراكة مع webpack
diff --git a/src/components/StackBlitzPreview/StackBlitzPreview.jsx b/src/components/StackBlitzPreview/StackBlitzPreview.jsx
index a5a52246ad96..62178af5e03a 100644
--- a/src/components/StackBlitzPreview/StackBlitzPreview.jsx
+++ b/src/components/StackBlitzPreview/StackBlitzPreview.jsx
@@ -4,17 +4,17 @@ import openButton from "../../assets/open-in-stackblitz-button.svg";
export default function StackBlitzPreview(props = {}) {
const {
example = "",
- description = "Check out this guide live on StackBlitz.",
+ description = "جرّب هذا الدليل مباشرة على StackBlitz.",
} = props;
const url = `https://stackblitz.com/github/webpack/webpack.js.org/tree/main/examples/${example}`;
return (
);
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index c3bb7a6976ca..75b8d90ce16e 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -85,6 +85,35 @@ function formatMoney(number) {
return Math.round(number).toLocaleString("en-US");
}
+const rankLabels = {
+ backer: "الداعمون",
+ latest: "أحدث الرعاة",
+ bronze: "رعاة Bronze",
+ silver: "رعاة Silver",
+ gold: "رعاة Gold",
+ platinum: "رعاة Platinum",
+};
+
+function getRankHeading(rank, type) {
+ if (rank === "backer" || rank === "latest") {
+ return rankLabels[rank];
+ }
+
+ return type === "monthly" ? `${rankLabels[rank]} الشهريون` : rankLabels[rank];
+}
+
+function formatAmountRange(minimum, maximum) {
+ if (minimum && maximum) {
+ return `من $${formatMoney(minimum)} إلى أقل من $${formatMoney(maximum)}`;
+ }
+
+ if (minimum) {
+ return `$${formatMoney(minimum)} أو أكثر`;
+ }
+
+ return "أي مبلغ";
+}
+
const AVATAR_CLASSES = {
backer:
"inline-block w-[31px] h-[31px] rounded-full border border-white shadow-[0_0_0_1px_rgb(112,202,10)] overflow-hidden align-middle",
@@ -201,15 +230,7 @@ export default function Support({ rank, type }) {
return (
<>
-
- {rank === "backer"
- ? "Backers"
- : rank === "latest"
- ? "Latest Sponsors"
- : `${rank[0].toUpperCase()}${rank.slice(1)} ${
- type === "monthly" ? "Monthly " : ""
- }Sponsors`}
-
+
{getRankHeading(rank, type)}
{rank === "backer" ? (
- The following Backers are individuals who have contributed
- various amounts of money in order to help support webpack. Every
- little bit helps, and we appreciate even the smallest
- contributions. This list shows {random} randomly chosen backers:
+ الداعمون التالية أسماؤهم أفراد ساهموا بمبالغ مختلفة لدعم
+ webpack. كل مساهمة تساعدنا، ونقدّر حتى أصغر المساهمات. تعرض هذه
+ القائمة {random} داعماً اختيروا عشوائياً:
) : rank === "latest" ? (
- The following persons/organizations made their first donation in
- the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days
- (limited to the top {limit}).
+ الأشخاص أو الجهات التالية قدمت أول تبرع لها خلال آخر{" "}
+ {Math.round(maxAge / (1000 * 60 * 60 * 24))} يوماً، مع عرض أعلى{" "}
+ {limit} فقط.
) : (
-
- {type === "monthly" ? `${rank} monthly` : rank} sponsors
-
+ {getRankHeading(rank, type)}
{type === "monthly" ? (
- are those who are currently pledging{" "}
- {minimum ? `$${formatMoney(minimum)}` : "up"}{" "}
- {maximum ? `to $${formatMoney(maximum)}` : "or more"} monthly
- to webpack.
+ هم من يتعهدون حالياً بمبلغ{" "}
+ {formatAmountRange(minimum, maximum)} شهرياً لدعم webpack.
) : (
- are those who have contributed{" "}
- {minimum ? `$${formatMoney(minimum)}` : "up"}{" "}
- {maximum ? `to $${formatMoney(maximum)}` : "or more"} to
+ هم من ساهموا بمبلغ {formatAmountRange(minimum, maximum)} لدعم
webpack.
)}
@@ -255,9 +269,9 @@ export default function Support({ rank, type }) {
{supporters.map((supporter, index) => (
@@ -289,10 +303,10 @@ export default function Support({ rank, type }) {
diff --git a/src/components/Support/Support.latest.test.jsx b/src/components/Support/Support.latest.test.jsx
index d32417f6bc68..a4d8fe0fb82d 100644
--- a/src/components/Support/Support.latest.test.jsx
+++ b/src/components/Support/Support.latest.test.jsx
@@ -62,7 +62,7 @@ describe("Support with rank='latest'", () => {
it("excludes supporters whose firstDonation is older than 21 days", () => {
render(
);
- expect(screen.queryByAltText("Stale Org's avatar")).toBeNull();
+ expect(screen.queryByAltText("صورة Stale Org")).toBeNull();
});
it("shows SmallIcon for every supporter before intersection observer fires", () => {
diff --git a/src/components/Support/Support.test.jsx b/src/components/Support/Support.test.jsx
index 43534cea0eee..08520e9088ea 100644
--- a/src/components/Support/Support.test.jsx
+++ b/src/components/Support/Support.test.jsx
@@ -32,20 +32,18 @@ describe("Support", () => {
it("renders a heading for backer rank", () => {
render(
);
- expect(screen.getByRole("heading", { name: "Backers" })).toBeTruthy();
+ expect(screen.getByRole("heading", { name: "الداعمون" })).toBeTruthy();
});
it("renders a heading for latest rank", () => {
render(
);
- expect(
- screen.getByRole("heading", { name: "Latest Sponsors" }),
- ).toBeTruthy();
+ expect(screen.getByRole("heading", { name: "أحدث الرعاة" })).toBeTruthy();
});
it("renders maxAge days and limit in latest description", () => {
render(
);
- expect(screen.getByText(/last 21 days/i)).toBeTruthy();
- expect(screen.getByText(/top 30/i)).toBeTruthy();
+ expect(screen.getByText(/آخر 21 يوماً/)).toBeTruthy();
+ expect(screen.getByText(/أعلى 30/)).toBeTruthy();
});
it("renders no supporter images when latest data is empty", () => {
@@ -55,38 +53,34 @@ describe("Support", () => {
it("renders a heading for gold rank", () => {
render(
);
- expect(screen.getByRole("heading", { name: "Gold Sponsors" })).toBeTruthy();
+ expect(screen.getByRole("heading", { name: "رعاة Gold" })).toBeTruthy();
});
it("renders a heading for gold monthly rank", () => {
render(
);
expect(
- screen.getByRole("heading", { name: "Gold Monthly Sponsors" }),
+ screen.getByRole("heading", { name: "رعاة Gold الشهريون" }),
).toBeTruthy();
});
it("renders a heading for platinum rank", () => {
render(
);
- expect(
- screen.getByRole("heading", { name: "Platinum Sponsors" }),
- ).toBeTruthy();
+ expect(screen.getByRole("heading", { name: "رعاة Platinum" })).toBeTruthy();
});
it("renders monthly description text", () => {
render(
);
- expect(screen.getByText(/pledging/i)).toBeTruthy();
+ expect(screen.getByText(/شهرياً لدعم webpack/)).toBeTruthy();
});
it("renders the become a sponsor link for sponsor ranks", () => {
render(
);
- expect(
- screen.getByRole("link", { name: /become a sponsor/i }),
- ).toBeTruthy();
+ expect(screen.getByRole("link", { name: /كن راعياً/ })).toBeTruthy();
});
it("renders the become a backer link for backer rank", () => {
render(
);
- expect(screen.getByRole("link", { name: /become a backer/i })).toBeTruthy();
+ expect(screen.getByRole("link", { name: /كن داعماً/ })).toBeTruthy();
});
it("sets up IntersectionObserver on mount", () => {
diff --git a/src/components/Support/__snapshots__/Support.data.test.jsx.snap b/src/components/Support/__snapshots__/Support.data.test.jsx.snap
index 976ec81d11a8..c96894d5ff7b 100644
--- a/src/components/Support/__snapshots__/Support.data.test.jsx.snap
+++ b/src/components/Support/__snapshots__/Support.data.test.jsx.snap
@@ -2,6 +2,6 @@
exports[`Support with supporter data matches snapshot with supporter data 1`] = `
- Gold Sponsors
+ رعاة Gold
`;
diff --git a/src/components/Support/__snapshots__/Support.test.jsx.snap b/src/components/Support/__snapshots__/Support.test.jsx.snap
index fba0cb14ccef..a29ff6bae776 100644
--- a/src/components/Support/__snapshots__/Support.test.jsx.snap
+++ b/src/components/Support/__snapshots__/Support.test.jsx.snap
@@ -2,6 +2,6 @@
exports[`Support matches snapshot for backer rank 1`] = `
- Backers
+ الداعمون
`;
diff --git a/src/components/TextRotater/TextRotater.jsx b/src/components/TextRotater/TextRotater.jsx
index 9649b28b560f..46378a0b6afd 100644
--- a/src/components/TextRotater/TextRotater.jsx
+++ b/src/components/TextRotater/TextRotater.jsx
@@ -64,7 +64,7 @@ function TextRotater({ children, delay = 0, repeatDelay = 3000, maxWidth }) {
>
`webpack-cli` v7.0.0+ requires node >= v20.9.0, `webpack >= v5.101.0`, and `webpack-dev-server >= v5.0.0`.
+W> يتطلب `webpack-cli` v7.0.0+ إصدار node >= v20.9.0، و`webpack >= v5.101.0`، و`webpack-dev-server >= v5.0.0`.
-W> If you want to run webpack using `npx` please make sure you have `webpack-cli` installed.
+W> إذا أردت تشغيل webpack باستخدام `npx` فتأكد من تثبيت `webpack-cli`.
## Commands
-webpack-cli offers a variety of commands to make working with webpack easier. By default webpack ships with
+يوفر webpack-cli مجموعة أوامر تجعل العمل مع webpack أسهل. افتراضيًا، يأتي webpack مع الأوامر التالية:
-| Command | Usage | Description |
-| --------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| [`build`](#build) | `build\|bundle\|b [entries...] [options]` | Run webpack (default command, can be omitted). |
-| [`configtest`](#configtest) | `configtest\|t [config-path]` | Validate a webpack configuration. |
-| [`help`](#help) | `help\|h [command] [option]` | Display help for commands and options. |
-| [`info`](#info) | `info\|i [options]` | Outputs information about your system. |
-| [`serve`](#serve) | `serve\|server\|s [options]` | Run the `webpack-dev-server`. |
-| [`version`](#version) | `version\|v [commands...]` | Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages. |
-| [`watch`](#watch) | `watch\|w [entries...] [options]` | Run webpack and watch for files changes. |
+| Command | Usage | الوصف |
+| --------------------------- | ----------------------------------------- | ------------------------------------------------------------------ |
+| [`build`](#build) | `build\|bundle\|b [entries...] [options]` | يشغّل webpack، وهو الأمر الافتراضي ويمكن حذفه. |
+| [`configtest`](#configtest) | `configtest\|t [config-path]` | يتحقق من إعدادات webpack. |
+| [`help`](#help) | `help\|h [command] [option]` | يعرض المساعدة للأوامر والخيارات. |
+| [`info`](#info) | `info\|i [options]` | يطبع معلومات عن نظامك. |
+| [`serve`](#serve) | `serve\|server\|s [options]` | يشغّل `webpack-dev-server`. |
+| [`version`](#version) | `version\|v [commands...]` | يطبع رقم إصدار webpack وwebpack-cli وwebpack-dev-server وحزم أخرى. |
+| [`watch`](#watch) | `watch\|w [entries...] [options]` | يشغّل webpack ويراقب تغييرات الملفات. |
### Build
-Run webpack (default command, can be omitted).
+يشغّل webpack، وهو الأمر الافتراضي ويمكن حذفه.
```bash
npx webpack build [options]
```
-**example**
+**مثال**
```bash
npx webpack build --config ./webpack.config.js --stats verbose
@@ -68,19 +52,19 @@ npx webpack build --config ./webpack.config.js --stats verbose
### Init
-Used to initialize a new webpack project using `create-webpack-app`.
+يُستخدم لتهيئة مشروع webpack جديد باستخدام `create-webpack-app`.
```bash
npx create-webpack-app [generation-path] [options]
```
-**example**
+**مثال**
```bash
npx create-webpack-app ./my-app --force --template=default
```
-Alias to:
+اختصار لـ:
```bash
npx create-webpack-app init ./my-app --force --template=default
@@ -88,7 +72,7 @@ npx create-webpack-app init ./my-app --force --template=default
#### Generation Path
-Location of where to generate the configuration. Defaults to `process.cwd()`.
+المكان الذي سيتم توليد الإعدادات فيه. القيمة الافتراضية هي `process.cwd()`.
#### Options
@@ -96,30 +80,30 @@ Location of where to generate the configuration. Defaults to `process.cwd()`.
`string = 'default'`
-Name of template to generate.
+اسم القالب المراد توليده.
**`-f`, `--force`**
`boolean`
-To generate a project without questions. When enabled, the default answer for each question will be used.
+يولّد مشروعًا بدون أسئلة. عند تفعيله، سيتم استخدام الإجابة الافتراضية لكل سؤال.
-#### Templates supported
+#### القوالب المدعومة
-- `--template=default` - Default template with basic configuration.
-- `--template=react` - Template with React configuration.
-- `--template=vue` - Template with Vue configuration.
-- `--template=svelte` - Template with Svelte configuration.`
+- `--template=default` - القالب الافتراضي مع إعدادات أساسية.
+- `--template=react` - قالب بإعدادات React.
+- `--template=vue` - قالب بإعدادات Vue.
+- `--template=svelte` - قالب بإعدادات Svelte.
### Loader
-Scaffold a loader.
+ينشئ هيكل loader.
```bash
npx create-webpack-app loader [output-path] [options]
```
-**example**
+**مثال**
```bash
npx create-webpack-app loader ./my-loader --template=default
@@ -127,7 +111,7 @@ npx create-webpack-app loader ./my-loader --template=default
#### Output Path
-Path to the output directory, e.g. `./loader-name`.
+المسار إلى مجلد output، مثل `./loader-name`.
#### Options
@@ -135,17 +119,17 @@ Path to the output directory, e.g. `./loader-name`.
`string = 'default'`
-Type of template.
+نوع القالب.
### Plugin
-Scaffold a plugin.
+ينشئ هيكل plugin.
```bash
npx create-webpack-app plugin [output-path] [options]
```
-**example**
+**مثال**
```bash
npx create-webpack-app plugin ./my-plugin --template=default
@@ -153,7 +137,7 @@ npx create-webpack-app plugin ./my-plugin --template=default
#### Output Path
-Path to the output directory, e.g. `./plugin-name`.
+المسار إلى مجلد output، مثل `./plugin-name`.
#### Options
@@ -161,33 +145,33 @@ Path to the output directory, e.g. `./plugin-name`.
`string = 'default'`
-Type of template.
+نوع القالب.
-T> See the [full documentation of `create-webpack-app`](https://github.com/webpack/webpack-cli/blob/master/packages/create-webpack-app/README.md).
+T> راجع [التوثيق الكامل لـ `create-webpack-app`](https://github.com/webpack/webpack-cli/blob/master/packages/create-webpack-app/README.md).
### Info
-Outputs information about your system.
+يطبع معلومات عن نظامك.
```bash
npx webpack info [options]
```
-**example**
+**مثال**
```bash
npx webpack info --output json --addition-package postcss
```
-#### Options for info
+#### خيارات info
**`-a`, `--additional-package`**
`string`
-Adds additional packages to the output.
+يضيف حزمًا إضافية إلى output.
-**example**
+**مثال**
```bash
npx webpack info --additional-package postcss
@@ -197,9 +181,9 @@ npx webpack info --additional-package postcss
`string : 'json' | 'markdown'`
-To get the output in a specified format.
+للحصول على output بتنسيق محدد.
-**example**
+**مثال**
```bash
npx webpack info --output markdown
@@ -207,13 +191,13 @@ npx webpack info --output markdown
### Configtest
-Validate a webpack configuration.
+يتحقق من إعدادات webpack.
```bash
npx webpack configtest [config-path]
```
-**example**
+**مثال**
```bash
npx webpack configtest ./webpack.config.js
@@ -221,33 +205,33 @@ npx webpack configtest ./webpack.config.js
#### Config Path
-Path to your webpack configuration file. Defaults to `./webpack.config.js`.
+المسار إلى ملف إعدادات webpack. القيمة الافتراضية هي `./webpack.config.js`.
### Serve
-Run the webpack dev server.
+يشغّل webpack dev server.
```bash
npx webpack serve [options]
```
-**example**
+**مثال**
```bash
npx webpack serve --static --open
```
-T> See the [full list of options for `webpack serve` command](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md) and [related documentation for webpack-dev-server](/configuration/dev-server).
+T> راجع [القائمة الكاملة لخيارات أمر `webpack serve`](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md) و[توثيق webpack-dev-server](/configuration/dev-server) المرتبط به.
### Watch
-Run webpack and watch for files changes.
+يشغّل webpack ويراقب تغييرات الملفات.
```bash
npx webpack watch [options]
```
-**example**
+**مثال**
```bash
npx webpack watch --mode development
@@ -255,52 +239,52 @@ npx webpack watch --mode development
## Flags
-By default webpack ships with the following flags:
-
-| Flag / Alias | Type | Description |
-| --------------------------------------- | --------------- | ------------------------------------------------------------------------- |
-| [`--entry`](#entry) | string[] | The entry point(s) of your application e.g. `./src/main.js` |
-| [`--config, -c`](#config) | string[] | Provide path to a webpack configuration file e.g. `./webpack.config.js` |
-| [`--config-name`](#config-name) | string[] | Name of the configuration to use |
-| `--name` | string | Name of the configuration. Used when loading multiple configurations |
-| `--color` | boolean | Enable colors on console |
-| [`--merge, -m`](#merge) | boolean | Merge two or more configurations using `webpack-merge` |
-| [`--env`](#env) | string[] | Environment passed to the configuration when it is a function |
-| [`--config-node-env`](#config-node-env) | string | Set `process.env.NODE_ENV` to the specified value |
-| [`--progress`](#progress) | boolean, string | Print compilation progress during build |
-| [`--help`](#help) | boolean | Outputs list of supported flags and commands |
-| [`--output-path, -o`](#output-path) | string | Output location of the file generated by webpack e.g. `./dist` |
-| `--target, -t` | string[] | Sets the build target |
-| `--watch, -w` | boolean | Watch for file changes |
-| `--watch-options-stdin` | boolean | Stop watching when stdin stream has ended |
-| `--devtool, -d` | string | Controls if and how source maps are generated. |
-| [`--json, -j`](#json) | boolean, string | Prints result as JSON or store it in a file |
-| `--mode` | string | Defines the mode to pass to webpack |
-| [`--version, -v`](#version) | boolean | Get current version |
-| `--stats` | boolean, string | It instructs webpack on how to treat the stats |
-| `--disable-interpret` | boolean | Disable interpret for loading the config file. |
-| `--fail-on-warnings` | boolean | Stop webpack-cli process with non-zero exit code on warnings from webpack |
-| [`--analyze`](#analyzing-bundle) | boolean | It invokes `webpack-bundle-analyzer` plugin to get bundle information |
-| [`--extends, -e`](#extends) | string[] | Extend an existing configuration |
+افتراضيًا، يأتي webpack مع flags التالية:
+
+| Flag / Alias | النوع | الوصف |
+| --------------------------------------- | --------------- | ---------------------------------------------------------------------- |
+| [`--entry`](#entry) | string[] | entry point أو أكثر لتطبيقك، مثل `./src/main.js`. |
+| [`--config, -c`](#config) | string[] | يحدد مسار ملف إعدادات webpack، مثل `./webpack.config.js`. |
+| [`--config-name`](#config-name) | string[] | اسم الإعداد المراد استخدامه. |
+| `--name` | string | اسم الإعداد. يُستخدم عند تحميل عدة إعدادات. |
+| `--color` | boolean | يفعّل الألوان في console. |
+| [`--merge, -m`](#merge) | boolean | يدمج إعدادين أو أكثر باستخدام `webpack-merge`. |
+| [`--env`](#env) | string[] | environment تُمرر إلى الإعداد عندما يكون دالة. |
+| [`--config-node-env`](#config-node-env) | string | يضبط `process.env.NODE_ENV` على القيمة المحددة. |
+| [`--progress`](#progress) | boolean, string | يطبع تقدم compilation أثناء build. |
+| [`--help`](#help) | boolean | يطبع قائمة flags والأوامر المدعومة. |
+| [`--output-path, -o`](#output-path) | string | مكان إخراج الملف الذي يولده webpack، مثل `./dist`. |
+| `--target, -t` | string[] | يحدد هدف build. |
+| `--watch, -w` | boolean | يراقب تغييرات الملفات. |
+| `--watch-options-stdin` | boolean | يوقف watch عند انتهاء stdin stream. |
+| `--devtool, -d` | string | يتحكم فيما إذا كانت source maps ستُولّد وكيف ستُولّد. |
+| [`--json, -j`](#json) | boolean, string | يطبع النتيجة كـ JSON أو يحفظها في ملف. |
+| `--mode` | string | يحدد mode الذي سيُمرر إلى webpack. |
+| [`--version, -v`](#version) | boolean | يعرض الإصدار الحالي. |
+| `--stats` | boolean, string | يوجه webpack لطريقة التعامل مع stats. |
+| `--disable-interpret` | boolean | يعطل interpret عند تحميل ملف الإعداد. |
+| `--fail-on-warnings` | boolean | يوقف webpack-cli بكود خروج غير صفري عند ظهور warnings من webpack. |
+| [`--analyze`](#analyzing-bundle) | boolean | يشغّل plugin باسم `webpack-bundle-analyzer` للحصول على معلومات bundle. |
+| [`--extends, -e`](#extends) | string[] | يمدد إعدادًا موجودًا. |
### Negated Flags
-| Flag | Description |
-| -------------------------- | ------------------------------------------------------------- |
-| `--no-color` | Disables any color on the console |
-| `--no-hot` | Disables hot reloading if you have it enabled via your config |
-| `--no-stats` | Disables any compilation stats emitted by webpack |
-| `--no-watch` | Do not watch for file changes |
-| `--no-devtool` | Do not generate source maps |
-| `--no-watch-options-stdin` | Do not stop watching when stdin stream has ended |
+| Flag | الوصف |
+| -------------------------- | ----------------------------------------------- |
+| `--no-color` | يعطل أي ألوان في console. |
+| `--no-hot` | يعطل hot reloading إذا كان مفعّلًا من إعداداتك. |
+| `--no-stats` | يعطل أي compilation stats يصدرها webpack. |
+| `--no-watch` | لا يراقب تغييرات الملفات. |
+| `--no-devtool` | لا يولد source maps. |
+| `--no-watch-options-stdin` | لا يوقف watch عند انتهاء stdin stream. |
### Core Flags
-Starting CLI v4 and webpack v5, CLI imports the entire configuration schema from webpack core to allow tuning almost every configuration option from the command line.
+ابتداءً من CLI v4 وwebpack v5، تستورد CLI كامل configuration schema من webpack core، حتى تتيح ضبط معظم خيارات الإعداد تقريبًا من سطر الأوامر.
-**Here's the list of all the core flags supported by webpack v5 with CLI v4 - [link](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md)**
+**هذه قائمة بكل core flags المدعومة في webpack v5 مع CLI v4 - [الرابط](https://github.com/webpack/webpack-cli/blob/master/OPTIONS.md)**
-For example if you want to enable performance hints in your project you'd use [this](https://webpack.js.org/configuration/performance/#performancehints) option in configuration, with core flags you can do -
+مثلًا، إذا أردت تفعيل performance hints في مشروعك، يمكنك استخدام [هذا](https://webpack.js.org/configuration/performance/#performancehints) الخيار في الإعدادات. ومع core flags يمكنك فعل ذلك بهذا الشكل:
```bash
npx webpack --performance-hints warning
@@ -308,21 +292,21 @@ npx webpack --performance-hints warning
## Usage
-### With configuration file
+### مع ملف إعدادات
```bash
npx webpack [--config webpack.config.js]
```
-See [configuration](/configuration) for the options in the configuration file.
+راجع [configuration](/configuration) لمعرفة الخيارات داخل ملف الإعدادات.
-### Without configuration file
+### بدون ملف إعدادات
```bash
npx webpack --entry
--output-path
```
-**example**
+**مثال**
```bash
npx webpack --entry ./first.js --entry ./second.js --output-path /build
@@ -330,8 +314,8 @@ npx webpack --entry ./first.js --entry ./second.js --output-path /build
#### entry
-A filename or a set of named filenames which act as the entry point to build your project. You can pass multiple entries (every entry is loaded on startup).
-Following are the multiple ways of specifying entry file(s) via CLI -
+اسم ملف أو مجموعة أسماء ملفات تعمل كـ entry point لبناء مشروعك. يمكنك تمرير أكثر من entry، حيث يتم تحميل كل entry عند بدء التشغيل.
+توجد عدة طرق لتحديد ملف أو ملفات entry عبر CLI:
```bash
npx webpack --entry-reset ./first-entry.js
@@ -349,17 +333,17 @@ npx webpack --entry-reset ./first-entry.js ./other-entry.js
npx webpack --entry-reset --entry ./first-entry.js ./other-entry.js
```
-W> The `--entry-reset` option is required to replace the existing [entry](/configuration/entry-context/#entry) option, without it the `--entry` option will add another entry to the existing entries.
+W> خيار `--entry-reset` مطلوب لاستبدال خيار [entry](/configuration/entry-context/#entry) الموجود. بدونه سيضيف `--entry` entry أخرى إلى entries الموجودة.
-T> Use `webpack [command] --entry-reset [entries...] [option]` syntax because some options can accept multiple values so `webpack --target node ./entry.js` means `target: ['node', './entry.js']`
+T> استخدم صيغة `webpack [command] --entry-reset [entries...] [option]` لأن بعض الخيارات تقبل عدة قيم، فمثلًا `webpack --target node ./entry.js` تعني `target: ['node', './entry.js']`.
#### output-path
-A path for the bundled file to be saved in. It will be mapped to the configuration options `output.path`.
+مسار حفظ الملف المحزم. يتم ربطه بخيار الإعداد `output.path`.
-**Example**
+**مثال**
-If your project structure is as follows -
+إذا كانت بنية مشروعك كالتالي:
```bash
.
@@ -375,7 +359,7 @@ If your project structure is as follows -
npx webpack ./src/index.js --output-path dist
```
-This will bundle your source code with entry as `index.js`, and the output bundle file will have a path of `dist`.
+سيتم تحزيم كود المصدر باستخدام `index.js` كـ entry، وسيكون مسار ملف output bundle هو `dist`.
```bash
asset main.js 142 bytes [compared for emit] [minimized] (name: main)
@@ -388,7 +372,7 @@ webpack 5.1.0 compiled successfully in 187 ms
npx webpack ./src/index.js ./src/others2.js --output-path dist/
```
-This will form the bundle with both the files as separate entry points.
+سيؤدي هذا إلى إنشاء bundle باستخدام الملفين كـ entry points منفصلة.
```bash
asset main.js 142 bytes [compared for emit] [minimized] (name: main)
@@ -400,11 +384,11 @@ webpack 5.1.0 compiled successfully in 198 ms
## Default Configurations
-CLI will look for some default configurations in the path of your project, here are the config files picked up by CLI.
+تبحث CLI عن بعض ملفات الإعدادات الافتراضية داخل مسار مشروعك. هذه هي ملفات الإعداد التي تلتقطها CLI.
-This is the lookup priority in increasing order
+ترتيب البحث يكون حسب الأولوية التالية:
-> example - config file lookup will be in order of webpack.config.js > .webpack/webpack.config.js > .webpack/webpackfile.js
+> مثال: سيكون ترتيب البحث عن ملف الإعداد هكذا webpack.config.js > .webpack/webpack.config.js > .webpack/webpackfile.js
```text
'webpack.config',
@@ -414,29 +398,29 @@ This is the lookup priority in increasing order
## Common Options
-W> Note that Command Line Interface has a higher precedence for the arguments you use it with than your configuration file. For instance, if you pass [`--mode="production"`](/configuration/mode/#usage) to webpack CLI and your configuration file uses `development`, `production` will be used.
+W> لاحظ أن Command Line Interface لها أولوية أعلى من ملف الإعدادات بالنسبة للـ arguments التي تستخدمها معها. مثلًا، إذا مررت [`--mode="production"`](/configuration/mode/#usage) إلى webpack CLI وكان ملف الإعدادات يستخدم `development`، فسيتم استخدام `production`.
### help
-**List basic commands and flags available on the cli**
+**عرض الأوامر والـ flags الأساسية المتاحة في cli**
-Both `webpack help [command] [option]` and `webpack [command] --help` are valid to get help:
+كل من `webpack help [command] [option]` و`webpack [command] --help` صالح للحصول على المساعدة:
```bash
npx webpack --help
-# or
+# أو
npx webpack help
```
-**List all supported commands and flags by cli**
+**عرض كل الأوامر والـ flags المدعومة من cli**
```bash
npx webpack --help=verbose
```
-**See help for a specific command or option**
+**عرض المساعدة لأمر أو خيار محدد**
```bash
npx webpack help --mode
@@ -444,26 +428,26 @@ npx webpack help --mode
### version
-**Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and other packages**
+**يطبع رقم إصدار webpack وwebpack-cli وwebpack-dev-server وحزم أخرى**
-To inspect the version of `webpack` and `webpack-cli` you are using, run the command:
+لفحص إصدار `webpack` و`webpack-cli` الذي تستخدمه، شغّل:
```bash
npx webpack --version
-# or
+# أو
npx webpack version
```
-This will output the following result:
+سيطبع نتيجة مثل:
```bash
webpack 5.31.2
webpack-cli 4.6.0
```
-It will output the version of `webpack-dev-server` as well if you have it installed:
+وسيظهر إصدار `webpack-dev-server` أيضًا إذا كان مثبتًا لديك:
```bash
webpack 5.31.2
@@ -473,9 +457,9 @@ webpack-dev-server 3.11.2
### config
-**Build source using a configuration file**
+**يبني source باستخدام ملف إعدادات**
-Specify a different [configuration](/configuration) file other than `webpack.config.js`, which is one of the defaults.
+حدد ملف [configuration](/configuration) مختلفًا عن `webpack.config.js`، وهو أحد الملفات الافتراضية.
```bash
npx webpack --config example.config.js
@@ -483,9 +467,9 @@ npx webpack --config example.config.js
### config-name
-In case your configuration file exports multiple configurations, you can use `--config-name` to specify which configuration to run.
+إذا كان ملف الإعدادات يصدّر عدة إعدادات، يمكنك استخدام `--config-name` لتحديد الإعداد الذي تريد تشغيله.
-Consider the following `webpack.config.js`:
+تخيل ملف `webpack.config.js` التالي:
```js
export default [
@@ -517,13 +501,13 @@ export default [
];
```
-To run only the `second` configuration:
+لتشغيل إعداد `second` فقط:
```bash
npx webpack --config-name second
```
-You can also pass multiple values:
+يمكنك أيضًا تمرير عدة قيم:
```bash
npx webpack --config-name first --config-name second
@@ -531,7 +515,7 @@ npx webpack --config-name first --config-name second
### merge
-You can merge two or more different webpack configurations with the help of `--merge`:
+يمكنك دمج إعدادين أو أكثر من إعدادات webpack باستخدام `--merge`:
```bash
npx webpack --config ./first.js --config ./second.js --merge
@@ -541,35 +525,35 @@ npx webpack --config ./first.js --config ./second.js --merge
-You can extend existing webpack configurations with the help of `--extends`:
+يمكنك تمديد إعدادات webpack موجودة باستخدام `--extends`:
```bash
npx webpack --extends ./base.webpack.config.js
```
-Read more about it in [extending configurations](/configuration/extending-configurations/).
+اقرأ المزيد في [تمديد الإعدادات](/configuration/extending-configurations/).
### json
-**Print result of webpack as JSON**
+**يطبع نتيجة webpack كـ JSON**
```bash
npx webpack --json
```
-**If you want to store stats as json instead of printing it, you can use -**
+**إذا أردت حفظ stats كـ json بدل طباعتها، يمكنك استخدام:**
```bash
npx webpack --json stats.json
```
-In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option, the output can be a JSON object. This response is accepted by webpack's [analyse tool](https://webpack.github.io/analyse/), or chrisbateman's [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/), or th0r's [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer). The analyse tool will take in the JSON and provide all the details of the build in graphical form.
+في الحالات الأخرى، يطبع webpack مجموعة stats تعرض تفاصيل bundle وchunk والتوقيتات. باستخدام هذا الخيار، يمكن أن يكون output كائن JSON. تقبل هذه الاستجابة أداة [analyse](https://webpack.github.io/analyse/) الخاصة بـ webpack، أو [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/) من chrisbateman، أو [webpack-bundle-analyzer](https://github.com/webpack/webpack-bundle-analyzer) من th0r. تأخذ أداة analyse ملف JSON وتعرض كل تفاصيل build بشكل رسومي.
-T> See the [stats data api](/api/stats) to read more about the stats generated here.
+T> راجع [stats data api](/api/stats) لقراءة المزيد عن stats التي يتم توليدها هنا.
## Environment Options
-When the webpack configuration [exports a function](/configuration/configuration-types/#exporting-a-function), an "environment" may be passed to it.
+عندما [تصدّر إعدادات webpack دالة](/configuration/configuration-types/#exporting-a-function)، يمكن تمرير "environment" إليها.
### env
@@ -577,9 +561,9 @@ When the webpack configuration [exports a function](/configuration/configuration
npx webpack --env production # env.production = true
```
-The `--env` argument accepts multiple values:
+يقبل argument المسمى `--env` عدة قيم:
-| Invocation | Resulting environment |
+| الاستدعاء | environment الناتج |
| ---------------------------------------------------------------- | ---------------------------------------------- |
| `npx webpack --env prod` | `{ prod: true }` |
| `npx webpack --env prod --env min` | `{ prod: true, min: true }` |
@@ -587,19 +571,19 @@ The `--env` argument accepts multiple values:
| `npx webpack --env foo=bar=app` | `{ foo: "bar=app"}` |
| `npx webpack --env app.platform="staging" --env app.name="test"` | `{ app: { platform: "staging", name: "test" }` |
-T> If you want to explicitly set a variable to empty string (`""`), you may need to escape characters on terminal like `npx webpack --env foo=\"\"`
+T> إذا أردت ضبط متغير صراحةً كنص فارغ (`""`)، فقد تحتاج إلى تهريب بعض الأحرف في terminal مثل `npx webpack --env foo=\"\"`.
-T> See the [environment variables](/guides/environment-variables/) guide for more information on its usage.
+T> راجع دليل [environment variables](/guides/environment-variables/) لمزيد من المعلومات عن الاستخدام.
-In addition to the customized `env` showed above, there are some built-in ones under `env` to be used inside your webpack configuration:
+إضافة إلى `env` المخصص الموضح أعلاه، توجد بعض القيم المدمجة تحت `env` لاستخدامها داخل إعدادات webpack:
-| Environment Variable | Description |
+| Environment Variable | الوصف |
| -------------------- | -------------------------------------------- |
-| `WEBPACK_SERVE` | `true` if `serve\|server\|s` is being used. |
-| `WEBPACK_BUILD` | `true` if `build\|bundle\|b` is being used. |
-| `WEBPACK_WATCH` | `true` if `--watch\|watch\|w` is being used. |
+| `WEBPACK_SERVE` | `true` إذا كان `serve\|server\|s` مستخدمًا. |
+| `WEBPACK_BUILD` | `true` إذا كان `build\|bundle\|b` مستخدمًا. |
+| `WEBPACK_WATCH` | `true` إذا كان `--watch\|watch\|w` مستخدمًا. |
-Note that you can not access those built-in environment variables inside the bundled code.
+لاحظ أنك لا تستطيع الوصول إلى environment variables المدمجة هذه داخل الكود المحزم.
```js
export default (env, argv) => ({
@@ -611,90 +595,90 @@ export default (env, argv) => ({
-Set `process.env.NODE_ENV` for your configuration:
+يضبط `process.env.NODE_ENV` داخل إعداداتك:
```bash
npx webpack --config-node-env production # process.env.NODE_ENV = 'production' in `webpack.config.js`
```
-When the `mode` option is not specified in the configuration, you can use the `--config-node-env` option to set the `mode`. For example, using `--config-node-env production` will set both `process.env.NODE_ENV` and `mode` to `'production'`.
+عندما لا يكون خيار `mode` محددًا داخل الإعدادات، يمكنك استخدام خيار `--config-node-env` لضبط `mode`. مثلًا، استخدام `--config-node-env production` سيضبط كلًا من `process.env.NODE_ENV` و`mode` على `'production'`.
-If your configuration exports a function, the value of `--config-node-env` is assigned to mode after the function returns. This means that `mode` will not be available in the function arguments (`env` and `argv`). However, the value of `--config-node-env` is accessible as `argv.nodeEnv` within the function and can be used accordingly.
+إذا كانت إعداداتك تصدّر دالة، يتم تعيين قيمة `--config-node-env` إلى mode بعد أن ترجع الدالة. هذا يعني أن `mode` لن يكون متاحًا داخل arguments الخاصة بالدالة، أي `env` و`argv`. لكن قيمة `--config-node-env` يمكن الوصول إليها عبر `argv.nodeEnv` داخل الدالة واستخدامها حسب الحاجة.
```js
export default (env, argv) => {
- console.log(argv.defineProcessEnvNodeEnv); // 'production' if --config-node-env production is used
+ console.log(argv.defineProcessEnvNodeEnv); // 'production' إذا استُخدم --config-node-env production
return {
- // your configuration
+ // إعداداتك
};
};
```
## Configuration Options
-| Parameter | Explanation | Input type | Default |
-| --------------- | -------------------------------------------------------------- | ---------- | --------------------------------------------------- |
-| `--config` | Path to the configuration file | string[] | [Default Configs](/api/cli/#default-configurations) |
-| `--config-name` | Name of the configuration to use | string[] | |
-| `--env` | Environment passed to the configuration, when it is a function | string[] | |
+| Parameter | الشرح | نوع الإدخال | الافتراضي |
+| --------------- | --------------------------------------------- | ----------- | --------------------------------------------------- |
+| `--config` | مسار ملف الإعدادات | string[] | [Default Configs](/api/cli/#default-configurations) |
+| `--config-name` | اسم الإعداد المراد استخدامه | string[] | |
+| `--env` | environment تُمرر إلى الإعداد عندما يكون دالة | string[] | |
## Analyzing Bundle
-You can also use `webpack-bundle-analyzer` to analyze your output bundles emitted by webpack. You can use `--analyze` flag to invoke it via CLI.
+يمكنك أيضًا استخدام `webpack-bundle-analyzer` لتحليل output bundles التي يصدرها webpack. يمكنك استخدام flag `--analyze` لتشغيله عبر CLI.
```bash
npx webpack --analyze
```
-W> Make sure you have `webpack-bundle-analyzer` installed in your project else CLI will prompt you to install it.
+W> تأكد من تثبيت `webpack-bundle-analyzer` داخل مشروعك، وإلا ستطلب منك CLI تثبيته.
## Progress
-To check the progress of any webpack compilation you can use the `--progress` flag.
+لفحص تقدم أي webpack compilation، يمكنك استخدام flag `--progress`.
```bash
npx webpack --progress
```
-To collect profile data for progress steps you can pass `profile` as value to `--progress` flag.
+لجمع profile data الخاصة بخطوات التقدم، يمكنك تمرير القيمة `profile` إلى flag `--progress`.
```bash
npx webpack --progress=profile
```
-## Pass CLI arguments to Node.js
+## تمرير CLI arguments إلى Node.js
-To pass arguments directly to Node.js process, you can use the `NODE_OPTIONS` option.
+لتمرير arguments مباشرة إلى عملية Node.js، يمكنك استخدام خيار `NODE_OPTIONS`.
-For example, to increase the memory limit of Node.js process to 4 GB
+مثلًا، لزيادة حد ذاكرة عملية Node.js إلى 4 GB:
```bash
NODE_OPTIONS="--max-old-space-size=4096" webpack
```
-Also, you can pass multiple options to Node.js process
+ويمكنك أيضًا تمرير عدة خيارات إلى عملية Node.js:
```bash
NODE_OPTIONS="--max-old-space-size=4096 -r /path/to/preload/file.js" webpack
```
-## Exit codes and their meanings
+## أكواد الخروج ومعانيها
-| Exit Code | Description |
-| --------- | -------------------------------------------------- |
-| `0` | Success |
-| `1` | Errors from webpack |
-| `2` | Configuration/options problem or an internal error |
+| Exit Code | الوصف |
+| --------- | ---------------------------------------- |
+| `0` | نجاح |
+| `1` | أخطاء من webpack |
+| `2` | مشكلة في الإعدادات/الخيارات أو خطأ داخلي |
## CLI Environment Variables
-| Environment Variable | Description |
-| ------------------------------------- | ------------------------------------------------------------------- |
-| `WEBPACK_CLI_SKIP_IMPORT_LOCAL` | when `true` it will skip using the local instance of `webpack-cli`. |
-| `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG` | when `true` it will force load the ESM config. |
-| [`WEBPACK_PACKAGE`](#webpack_package) | Use a custom webpack version in CLI. |
-| `WEBPACK_DEV_SERVER_PACKAGE` | Use a custom webpack-dev-server version in CLI. |
-| `WEBPACK_CLI_HELP_WIDTH` | Use a custom width for help output. |
+| Environment Variable | الوصف |
+| ------------------------------------- | -------------------------------------------------------------------- |
+| `WEBPACK_CLI_SKIP_IMPORT_LOCAL` | عندما تكون `true`، سيتم تجاوز استخدام النسخة المحلية من webpack-cli. |
+| `WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG` | عندما تكون `true`، سيتم إجبار تحميل إعداد ESM. |
+| [`WEBPACK_PACKAGE`](#webpack_package) | يستخدم إصدارًا مخصصًا من webpack داخل CLI. |
+| `WEBPACK_DEV_SERVER_PACKAGE` | يستخدم إصدارًا مخصصًا من webpack-dev-server داخل CLI. |
+| `WEBPACK_CLI_HELP_WIDTH` | يستخدم عرضًا مخصصًا لناتج help. |
```bash
WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm
@@ -702,7 +686,7 @@ WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm
### WEBPACK_PACKAGE
-Use a custom webpack version in CLI. Considering the following content in your `package.json`:
+يستخدم إصدارًا مخصصًا من webpack داخل CLI. بافتراض وجود المحتوى التالي في `package.json`:
```json
{
@@ -712,13 +696,13 @@ Use a custom webpack version in CLI. Considering the following content in your `
}
```
-To use `webpack v4.0.0`:
+لاستخدام `webpack v4.0.0`:
```bash
npx webpack
```
-To use `webpack v5.32.0`:
+لاستخدام `webpack v5.32.0`:
```bash
WEBPACK_PACKAGE=webpack-5 npx webpack
@@ -728,15 +712,15 @@ WEBPACK_PACKAGE=webpack-5 npx webpack
### TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts
-You might encounter this error in the case of using native ESM in TypeScript (i.e. `type: "module"` in `package.json`).
+قد تواجه هذا الخطأ عند استخدام ESM الأصلي في TypeScript، أي وجود `type: "module"` داخل `package.json`.
-`webpack-cli` supports configuration in both `CommonJS` and `ESM` format, at first it tries to load a configuration using `import()`, once it fails it would try to load the configuration using `require()`.
-However, the `import()` method won't work with `ts-node` without [loader hooks](https://nodejs.org/api/esm.html#esm_experimental_loaders) enabled (described at [`TypeStrong/ts-node#1007`](https://github.com/TypeStrong/ts-node/issues/1007)).
+يدعم `webpack-cli` الإعدادات بصيغتي `CommonJS` و`ESM`. في البداية يحاول تحميل الإعداد باستخدام `import()`، وإذا فشل يحاول تحميله باستخدام `require()`.
+لكن طريقة `import()` لن تعمل مع `ts-node` بدون تفعيل [loader hooks](https://nodejs.org/api/esm.html#esm_experimental_loaders)، كما هو موضح في [`TypeStrong/ts-node#1007`](https://github.com/TypeStrong/ts-node/issues/1007).
-To fix the error above use the following command:
+لإصلاح الخطأ السابق، استخدم الأمر التالي:
```bash
NODE_OPTIONS="--import=data:text/javascript,import { register } from 'node:module'; import { pathToFileURL } from 'node:url'; register('ts-node/esm', pathToFileURL('./'));" npx webpack --entry ./src/index.js --mode production
```
-For more information, see our documentation on [writing a webpack configuration in `TypeScript`](/configuration/configuration-languages/#typescript).
+لمزيد من المعلومات، راجع توثيقنا عن [كتابة إعدادات webpack باستخدام `TypeScript`](/configuration/configuration-languages/#typescript).
diff --git a/src/content/api/compilation-hooks.mdx b/src/content/api/compilation-hooks.mdx
index b4016b6eb23e..8be57c1b3276 100644
--- a/src/content/api/compilation-hooks.mdx
+++ b/src/content/api/compilation-hooks.mdx
@@ -3,41 +3,26 @@ title: Compilation Hooks
group: Plugins
sort: 10
contributors:
- - slavafomin
- - byzyk
- - madhavarshney
- - misterdev
- - wizardofhogwarts
- - EugeneHlushko
- - chenxsan
- - jamesgeorge007
- - snitin315
+ - RlxChap2
---
-The `Compilation` module is used by the `Compiler` to create new compilations
-(or builds). A `compilation` instance has access to all modules and their
-dependencies (most of which are circular references). It is the literal
-compilation of all the modules in the dependency graph of an application.
-During the compilation phase, modules are loaded, sealed, optimized, chunked,
-hashed and restored.
+يستخدم `Compiler` module المسمى `Compilation` لإنشاء compilations جديدة، أو builds جديدة. تملك instance من `compilation` وصولًا إلى كل modules وdependencies الخاصة بها، ومعظمها مراجع دائرية. وهي عمليًا compilation لكل modules الموجودة في dependency graph الخاص بالتطبيق. أثناء مرحلة compilation، يتم تحميل modules، وعمل seal لها، وتحسينها، وتقسيمها إلى chunks، وإنشاء hashes لها، واستعادتها.
-The `Compilation` class also extends `Tapable` and provides the following
-lifecycle hooks. They can be tapped the same way as compiler hooks:
+يرث الصنف `Compilation` أيضًا من `Tapable` ويوفر lifecycle hooks التالية. يمكن الدخول إليها بالطريقة نفسها المستخدمة مع compiler hooks:
```js
compilation.hooks.someHook.tap(/* ... */);
```
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+وكما هو الحال مع `compiler`، قد تكون `tapAsync` و`tapPromise` متاحتين أيضًا بحسب نوع hook.
-W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+W> منذ webpack 5، لم تعد `hooks` قابلة للتمديد مباشرة. استخدم `WeakMap` لإضافة hooks مخصصة.
## buildModule
`SyncHook`
-Triggered before a module build has started, can be used to modify the module.
+يُطلق قبل بدء build الخاص بـ module، ويمكن استخدامه لتعديل module.
- Callback Parameters: `module`
@@ -54,7 +39,7 @@ compilation.hooks.buildModule.tap(
`SyncHook`
-Fired before rebuilding a module.
+يُطلق قبل إعادة بناء module.
- Callback Parameters: `module`
@@ -62,7 +47,7 @@ Fired before rebuilding a module.
`SyncHook`
-Run when a module build has failed.
+يعمل عندما يفشل build الخاص بـ module.
- Callback Parameters: `module` `error`
@@ -70,7 +55,7 @@ Run when a module build has failed.
`SyncHook`
-Executed when a module has been built successfully.
+يُنفّذ عندما يتم بناء module بنجاح.
- Callback Parameters: `module`
@@ -78,7 +63,7 @@ Executed when a module has been built successfully.
`AsyncSeriesHook`
-Called when all modules have been built without errors.
+يُستدعى عندما يتم بناء كل modules بدون أخطاء.
- Callback Parameters: `modules`
@@ -86,7 +71,7 @@ Called when all modules have been built without errors.
`SyncHook`
-Executed when a module has been rebuilt, in case of both success or with errors.
+يُنفّذ عندما تنتهي إعادة بناء module، سواء نجحت أو انتهت بأخطاء.
- Callback Parameters: `module`
@@ -94,19 +79,19 @@ Executed when a module has been rebuilt, in case of both success or with errors.
`SyncHook`
-Fired when the compilation stops accepting new modules.
+يُطلق عندما يتوقف compilation عن قبول modules جديدة.
## unseal
`SyncHook`
-Fired when a compilation begins accepting new modules.
+يُطلق عندما يبدأ compilation بقبول modules جديدة.
## optimizeDependencies
`SyncBailHook`
-Fired at the beginning of dependency optimization.
+يُطلق في بداية تحسين dependencies.
- Callback Parameters: `modules`
@@ -114,7 +99,7 @@ Fired at the beginning of dependency optimization.
`SyncHook`
-Fired after the dependency optimization.
+يُطلق بعد تحسين dependencies.
- Callback Parameters: `modules`
@@ -124,10 +109,10 @@ Fired after the dependency optimization.
-The `afterChunks` hook is invoked following the creation of the chunks and module graph, and prior to their optimization.
-This hook provides an opportunity to examine, analyze, and modify the chunk graph if necessary.
+يُستدعى hook المسمى `afterChunks` بعد إنشاء chunks وmodule graph، وقبل تحسينهما.
+يوفر هذا hook فرصة لفحص chunk graph وتحليله وتعديله عند الحاجة.
-Here's [an example](https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c5841a77025a6722f11bf/lib/wasm-sync/WebAssemblyModulesPlugin.js#L114-L137) of how to utilize the `compilation.hooks.afterChunks` hook.
+هذا [مثال](https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c5841a77025a6722f11bf/lib/wasm-sync/WebAssemblyModulesPlugin.js#L114-L137) على استخدام hook `compilation.hooks.afterChunks`.
- Callback Parameters: `chunks`
@@ -135,13 +120,13 @@ Here's [an example](https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c
`SyncHook`
-Triggered at the beginning of the optimization phase.
+يُطلق في بداية مرحلة optimization.
## optimizeModules
`SyncBailHook`
-Called at the beginning of the module optimization phase. A plugin can tap into this hook to perform optimizations on modules.
+يُستدعى في بداية مرحلة تحسين modules. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسينات على modules.
- Callback Parameters: `modules`
@@ -149,7 +134,7 @@ Called at the beginning of the module optimization phase. A plugin can tap into
`SyncHook`
-Called after modules optimization has completed.
+يُستدعى بعد اكتمال تحسين modules.
- Callback Parameters: `modules`
@@ -157,7 +142,7 @@ Called after modules optimization has completed.
`SyncBailHook`
-Called at the beginning of the chunk optimization phase. A plugin can tap into this hook to perform optimizations on chunks.
+يُستدعى في بداية مرحلة تحسين chunks. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسينات على chunks.
- Callback Parameters: `chunks`
@@ -165,7 +150,7 @@ Called at the beginning of the chunk optimization phase. A plugin can tap into t
`SyncHook`
-Fired after chunk optimization has completed.
+يُطلق بعد اكتمال تحسين chunks.
- Callback Parameters: `chunks`
@@ -173,7 +158,7 @@ Fired after chunk optimization has completed.
`AsyncSeriesHook`
-Called before optimizing the dependency tree. A plugin can tap into this hook to perform a dependency tree optimization.
+يُستدعى قبل تحسين dependency tree. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسين على dependency tree.
- Callback Parameters: `chunks` `modules`
@@ -181,7 +166,7 @@ Called before optimizing the dependency tree. A plugin can tap into this hook to
`SyncHook`
-Called after the dependency tree optimization has completed with success.
+يُستدعى بعد اكتمال تحسين dependency tree بنجاح.
- Callback Parameters: `chunks` `modules`
@@ -189,7 +174,7 @@ Called after the dependency tree optimization has completed with success.
`SyncBailHook`
-Called after the tree optimization, at the beginning of the chunk modules optimization. A plugin can tap into this hook to perform optimizations of chunk modules.
+يُستدعى بعد تحسين tree، وفي بداية تحسين chunk modules. يمكن لـ plugin الدخول إلى هذا hook لتنفيذ تحسينات على chunk modules.
- Callback Parameters: `chunks` `modules`
@@ -197,7 +182,7 @@ Called after the tree optimization, at the beginning of the chunk modules optimi
`SyncHook`
-Called after the chunkmodules optimization has completed successfully.
+يُستدعى بعد اكتمال تحسين chunk modules بنجاح.
- Callback Parameters: `chunks` `modules`
@@ -205,13 +190,13 @@ Called after the chunkmodules optimization has completed successfully.
`SyncBailHook`
-Called to determine whether or not to store records. Returning anything `!== false` will prevent every other "record" hook from being executed ([`record`](#record), [`recordModules`](#recordmodules), [`recordChunks`](#recordchunks) and [`recordHash`](#recordhash)).
+يُستدعى لتحديد هل يجب تخزين records أم لا. إرجاع أي شيء `!== false` سيمنع تنفيذ بقية hooks الخاصة بـ records، وهي [`record`](#record) و[`recordModules`](#recordmodules) و[`recordChunks`](#recordchunks) و[`recordHash`](#recordhash).
## reviveModules
`SyncHook`
-Restore module information from records.
+يستعيد معلومات module من records.
- Callback Parameters: `modules` `records`
@@ -219,7 +204,7 @@ Restore module information from records.
`SyncHook`
-Executed before assigning an `id` to each module.
+يُنفّذ قبل تعيين `id` لكل module.
- Callback Parameters: `modules`
@@ -227,7 +212,7 @@ Executed before assigning an `id` to each module.
`SyncHook`
-Called to assign an `id` to each module.
+يُستدعى لتعيين `id` لكل module.
- Callback Parameters: `modules`
@@ -235,7 +220,7 @@ Called to assign an `id` to each module.
`SyncHook`
-Called at the beginning of the modules `id` optimization.
+يُستدعى في بداية تحسين `id` الخاصة بـ modules.
- Callback Parameters: `modules`
@@ -243,7 +228,7 @@ Called at the beginning of the modules `id` optimization.
`SyncHook`
-Called when the modules `id` optimization phase has completed.
+يُستدعى عندما تكتمل مرحلة تحسين `id` الخاصة بـ modules.
- Callback Parameters: `modules`
@@ -251,7 +236,7 @@ Called when the modules `id` optimization phase has completed.
`SyncHook`
-Restore chunk information from records.
+يستعيد معلومات chunk من records.
- Callback Parameters: `chunks` `records`
@@ -259,7 +244,7 @@ Restore chunk information from records.
`SyncHook`
-Executed before assigning an `id` to each chunk.
+يُنفّذ قبل تعيين `id` لكل chunk.
- Callback Parameters: `chunks`
@@ -267,7 +252,7 @@ Executed before assigning an `id` to each chunk.
`SyncHook`
-Called to assign an `id` to each chunk.
+يُستدعى لتعيين `id` لكل chunk.
- Callback Parameters: `chunks`
@@ -275,7 +260,7 @@ Called to assign an `id` to each chunk.
`SyncHook`
-Called at the beginning of the chunks `id` optimization phase.
+يُستدعى في بداية مرحلة تحسين `id` الخاصة بـ chunks.
- Callback Parameters: `chunks`
@@ -283,7 +268,7 @@ Called at the beginning of the chunks `id` optimization phase.
`SyncHook`
-Triggered after chunk `id` optimization has finished.
+يُطلق بعد انتهاء تحسين `id` الخاصة بـ chunk.
- Callback Parameters: `chunks`
@@ -291,7 +276,7 @@ Triggered after chunk `id` optimization has finished.
`SyncHook`
-Store module info to the records. This is triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات module داخل records. يُطلق هذا hook إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
- Callback Parameters: `modules` `records`
@@ -299,7 +284,7 @@ Store module info to the records. This is triggered if [`shouldRecord`](#shouldr
`SyncHook`
-Store chunk info to the records. This is only triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات chunk داخل records. لا يُطلق إلا إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
- Callback Parameters: `chunks` `records`
@@ -307,31 +292,31 @@ Store chunk info to the records. This is only triggered if [`shouldRecord`](#sho
`SyncHook`
-Called before modules are hashed.
+يُستدعى قبل إنشاء hash للـ modules.
## afterModuleHash
`syncHook`
-Called after modules are hashed.
+يُستدعى بعد إنشاء hash للـ modules.
## beforeHash
`SyncHook`
-Called before the compilation is hashed.
+يُستدعى قبل إنشاء hash للـ compilation.
## afterHash
`SyncHook`
-Called after the compilation is hashed.
+يُستدعى بعد إنشاء hash للـ compilation.
## recordHash
`SyncHook`
-Store information about record hash to the `records`. This is only triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات record hash داخل `records`. لا يُطلق إلا إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
- Callback Parameters: `records`
@@ -339,7 +324,7 @@ Store information about record hash to the `records`. This is only triggered if
`SyncHook`
-Store information about the `compilation` to the `records`. This is only triggered if [`shouldRecord`](#shouldrecord) returns a truthy value.
+يخزن معلومات عن `compilation` داخل `records`. لا يُطلق إلا إذا أرجع [`shouldRecord`](#shouldrecord) قيمة truthy.
- Callback Parameters: `compilation` `records`
@@ -347,15 +332,15 @@ Store information about the `compilation` to the `records`. This is only trigger
`SyncHook`
-Executed before module assets creation.
+يُنفّذ قبل إنشاء module assets.
## additionalChunkAssets
`SyncHook`
-W> `additionalChunkAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `additionalChunkAssets` مهمل. استخدم [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
-Create additional assets for the chunks.
+ينشئ assets إضافية للـ chunks.
- Callback Parameters: `chunks`
@@ -363,22 +348,21 @@ Create additional assets for the chunks.
`SyncBailHook`
-Called to determine whether or not generate chunks assets. Returning anything `!== false` will allow chunk assets generation.
+يُستدعى لتحديد هل يجب توليد chunk assets أم لا. إرجاع أي شيء `!== false` سيسمح بتوليد chunk assets.
## beforeChunkAssets
`SyncHook`
-Executed before creating the chunks assets.
+يُنفّذ قبل إنشاء chunk assets.
## additionalAssets
`AsyncSeriesHook`
-W> `additionalAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) hook instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `additionalAssets` مهمل. استخدم hook [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
-Create additional assets for the compilation. This hook can be used to download
-an image, for example:
+ينشئ assets إضافية للـ compilation. يمكن استخدام هذا hook لتنزيل صورة، مثلًا:
```js
compilation.hooks.additionalAssets.tapAsync("MyPlugin", (callback) => {
@@ -399,15 +383,13 @@ compilation.hooks.additionalAssets.tapAsync("MyPlugin", (callback) => {
`AsyncSeriesHook`
-W> `optimizeChunkAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `optimizeChunkAssets` مهمل. استخدم [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
-Optimize any chunk assets. The assets are stored in `compilation.assets`. A
-`Chunk` has a property `files` which points to all files created by a chunk.
-Any additional chunk assets are stored in `compilation.additionalChunkAssets`.
+يحسّن أي chunk assets. يتم تخزين assets داخل `compilation.assets`. يملك `Chunk` خاصية `files` تشير إلى كل الملفات التي أنشأها chunk. وأي chunk assets إضافية تُخزن داخل `compilation.additionalChunkAssets`.
- Callback Parameters: `chunks`
-Here's an example that adds a banner to each chunk.
+هذا مثال يضيف banner لكل chunk.
```js
compilation.hooks.optimizeChunkAssets.tapAsync(
@@ -432,13 +414,13 @@ compilation.hooks.optimizeChunkAssets.tapAsync(
`SyncHook`
-W> `afterOptimizeChunkAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) instead and use one of the Compilation.PROCESS_ASSETS_STAGE\_\* as a stage option)
+W> `afterOptimizeChunkAssets` مهمل. استخدم [Compilation.hook.processAssets](#processassets) بدلًا منه، واستخدم إحدى قيم Compilation.PROCESS_ASSETS_STAGE\_\* كخيار stage.
-The chunk assets have been optimized.
+تم تحسين chunk assets.
- Callback Parameters: `chunks`
-Here's an example plugin from [@boopathi](https://github.com/boopathi) that outputs exactly what went into each chunk.
+هذا مثال plugin من [@boopathi](https://github.com/boopathi) يطبع بالضبط ما دخل في كل chunk.
```js
compilation.hooks.afterOptimizeChunkAssets.tap("MyPlugin", (chunks) => {
@@ -456,9 +438,9 @@ compilation.hooks.afterOptimizeChunkAssets.tap("MyPlugin", (chunks) => {
`AsyncSeriesHook`
-W> `optimizeAssets` is deprecated (use the [Compilation.hook.processAssets](#processassets) hook instead)
+W> `optimizeAssets` مهمل. استخدم hook [Compilation.hook.processAssets](#processassets) بدلًا منه.
-Optimize all assets stored in `compilation.assets`.
+يحسّن كل assets المخزنة داخل `compilation.assets`.
- Callback Parameters: `assets`
@@ -466,9 +448,9 @@ Optimize all assets stored in `compilation.assets`.
`SyncHook`
-W> `afterOptimizeAssets` is deprecated (use the [Compilation.hook.afterProcessAssets](#afterprocessassets) hook instead)
+W> `afterOptimizeAssets` مهمل. استخدم hook [Compilation.hook.afterProcessAssets](#afterprocessassets) بدلًا منه.
-The assets have been optimized.
+تم تحسين assets.
- Callback Parameters: `assets`
@@ -476,25 +458,25 @@ The assets have been optimized.
`AsyncSeriesHook`
-Asset processing.
+معالجة assets.
**Hook parameters:**
-- `name: string` — a name of the plugin
-- `stage: Stage` — a stage to tap into (see the [list of supported stages](#list-of-asset-processing-stages) below)
-- `additionalAssets?: true | (assets, [callback]) => (void | Promise)` — a callback for additional assets ([see below](#additional-assets))
+- `name: string` — اسم plugin.
+- `stage: Stage` — المرحلة التي ستدخل إليها. راجع [قائمة المراحل المدعومة](#list-of-asset-processing-stages) أدناه.
+- `additionalAssets?: true | (assets, [callback]) => (void | Promise)` — callback للـ assets الإضافية. راجع [أدناه](#additional-assets).
**Callback parameters:**
-- `assets: { [pathname: string]: Source }` — a plain object, where key is the asset's pathname, and the value is data of the asset represented by the [`Source`](https://github.com/webpack/webpack-sources#source).
+- `assets: { [pathname: string]: Source }` — كائن عادي يكون مفتاحه pathname الخاص بالـ asset، وقيمته بيانات asset ممثلة بواسطة [`Source`](https://github.com/webpack/webpack-sources#source).
-**Example:**
+**مثال:**
```js
compilation.hooks.processAssets.tap(
{
name: "MyPlugin",
- stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages
+ stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // راجع أدناه لمراحل أكثر
},
(assets) => {
console.log("List of assets and their sizes:");
@@ -507,11 +489,11 @@ compilation.hooks.processAssets.tap(
### Additional assets
-In addition to `name` and `stage`, you can pass an `additionalAssets` option which accepts either a value of `true` or a callback function that receives `assets` as a first argument:
+بالإضافة إلى `name` و`stage`، يمكنك تمرير خيار `additionalAssets` ، وهو يقبل إما القيمة `true` أو callback يستقبل `assets` كأول argument:
-1. `true` — run the provided callback again for assets added later by plugins.
+1. `true` — يشغّل callback المقدم مرة أخرى للـ assets التي تضيفها plugins لاحقًا.
- In this mode, the callback will be called multiple times: once for assets added prior to the specified stage, and additional times for assets added by plugins later (on this or next stages).
+ في هذا الوضع، قد يُستدعى callback عدة مرات: مرة للـ assets المضافة قبل المرحلة المحددة، ومرات إضافية للـ assets التي تضيفها plugins لاحقًا في هذه المرحلة أو المراحل التالية.
```js
compilation.hooks.processAssets.tap(
@@ -521,12 +503,12 @@ In addition to `name` and `stage`, you can pass an `additionalAssets` {
- // this function will be called multiple times with each bulk of assets
+ // ستُستدعى هذه الدالة عدة مرات مع كل دفعة من assets
},
);
```
-2. `(assets, [callback]) => (void | Promise)` — run the specified callback against assets added by plugins later (on this or next stages). The callback must respect the type of the tap method used (e.g. when used with `tapPromise()`, it should return a promise).
+2. `(assets, [callback]) => (void | Promise)` — يشغّل callback المحدد على assets التي تضيفها plugins لاحقًا في هذه المرحلة أو المراحل التالية. يجب أن يحترم callback نوع tap method المستخدمة؛ مثلًا عند استخدام `tapPromise()` يجب أن يرجع promise.
```js
compilation.hooks.processAssets.tap(
@@ -534,40 +516,42 @@ In addition to `name` and `stage`, you can pass an `additionalAssets` {
- // this function potentially could be called multiple times for assets added on later stages
+ // قد تُستدعى هذه الدالة عدة مرات للـ assets المضافة في مراحل لاحقة
},
},
(assets) => {
- // this function will be called once with assets added by plugins on prior stages
+ // ستُستدعى هذه الدالة مرة واحدة للـ assets التي أضافتها plugins في مراحل سابقة
},
);
```
-### List of asset processing stages
-
-Here's a list of supported stages (in the order of processing):
-
-- `PROCESS_ASSETS_STAGE_ADDITIONAL` — add additional assets to the compilation.
-- `PROCESS_ASSETS_STAGE_PRE_PROCESS` — basic preprocessing of the assets.
-- `PROCESS_ASSETS_STAGE_DERIVED` — derive new assets from the existing assets.
-- `PROCESS_ASSETS_STAGE_ADDITIONS` — add additional sections to the existing assets e.g. banner or initialization code.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE` — optimize existing assets in a general way.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT` — optimize the count of existing assets, e.g. by merging them.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY` — optimize the compatibility of existing assets, e.g. add polyfills or vendor prefixes.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE` — optimize the size of existing assets, e.g. by minimizing or omitting whitespace.
-- `PROCESS_ASSETS_STAGE_DEV_TOOLING` — add development tooling to the assets, e.g. by extracting a source map.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE` — optimize the numbers of existing assets, e.g. by inlining assets into other assets.
-- `PROCESS_ASSETS_STAGE_SUMMARIZE` — summarize the list of existing assets.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_HASH` — optimize the hashes of the assets, e.g. by generating real hashes of the asset content.
-- `PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER` — optimize the transfer of existing assets, e.g. by preparing a compressed (gzip) file as separate asset.
-- `PROCESS_ASSETS_STAGE_ANALYSE` — analyze the existing assets.
-- `PROCESS_ASSETS_STAGE_REPORT` — creating assets for the reporting purposes.
+
+
+### قائمة مراحل معالجة assets
+
+هذه قائمة بالمراحل المدعومة، مرتبة حسب ترتيب المعالجة:
+
+- `PROCESS_ASSETS_STAGE_ADDITIONAL` — إضافة assets إضافية إلى compilation.
+- `PROCESS_ASSETS_STAGE_PRE_PROCESS` — معالجة أولية أساسية للـ assets.
+- `PROCESS_ASSETS_STAGE_DERIVED` — اشتقاق assets جديدة من assets الموجودة.
+- `PROCESS_ASSETS_STAGE_ADDITIONS` — إضافة أقسام إضافية إلى assets الموجودة، مثل banner أو كود تهيئة.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE` — تحسين assets الموجودة بشكل عام.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT` — تحسين عدد assets الموجودة، مثل دمجها.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY` — تحسين توافق assets الموجودة، مثل إضافة polyfills أو vendor prefixes.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE` — تحسين حجم assets الموجودة، مثل التصغير أو حذف المسافات.
+- `PROCESS_ASSETS_STAGE_DEV_TOOLING` — إضافة أدوات تطوير إلى assets، مثل استخراج source map.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE` — تحسين عدد assets الموجودة، مثل تضمين assets داخل assets أخرى.
+- `PROCESS_ASSETS_STAGE_SUMMARIZE` — تلخيص قائمة assets الموجودة.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_HASH` — تحسين hashes الخاصة بـ assets، مثل توليد hashes حقيقية من محتوى asset.
+- `PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER` — تحسين نقل assets الموجودة، مثل تجهيز ملف مضغوط gzip كـ asset منفصل.
+- `PROCESS_ASSETS_STAGE_ANALYSE` — تحليل assets الموجودة.
+- `PROCESS_ASSETS_STAGE_REPORT` — إنشاء assets لأغراض التقارير.
### Assets info
-The "asset info" metadata is not automatically provided for this hook. If needed, you will have to resolve this metadata manually using the compilation instance and the provided asset pathname. This will be improved in a future version of the webpack.
+لا يتم توفير metadata الخاصة بـ "asset info" تلقائيًا لهذا hook. إذا احتجتها، فعليك حل هذه metadata يدويًا باستخدام instance الخاصة بـ compilation وpathname الخاص بالـ asset. سيتم تحسين هذا في إصدار مستقبلي من webpack.
-**Example:**
+**مثال:**
```js
compilation.hooks.processAssets.tap(
@@ -577,7 +561,7 @@ compilation.hooks.processAssets.tap(
(assets) => {
for (const [pathname, source] of Object.entries(assets)) {
const assetInfo = compilation.assetsInfo.get(pathname);
- // @todo: do something with "pathname", "source" and "assetInfo"
+ // @todo: افعل شيئًا مع "pathname" و"source" و"assetInfo"
}
},
);
@@ -587,25 +571,25 @@ compilation.hooks.processAssets.tap(
`SyncHook`
-Called after the [`processAssets`](#processassets) hook had finished without error.
+يُستدعى بعد انتهاء hook [`processAssets`](#processassets) بدون خطأ.
## needAdditionalSeal
`SyncBailHook`
-Called to determine if the compilation needs to be unsealed to include other files.
+يُستدعى لتحديد هل يحتاج compilation إلى unseal لإضافة ملفات أخرى.
## afterSeal
`AsyncSeriesHook`
-Executed right after `needAdditionalSeal`.
+يُنفّذ مباشرة بعد `needAdditionalSeal`.
## chunkHash
`SyncHook`
-Triggered to emit the hash for each chunk.
+يُطلق لإصدار hash لكل chunk.
- Callback Parameters: `chunk` `chunkHash`
@@ -613,7 +597,7 @@ Triggered to emit the hash for each chunk.
`SyncHook`
-Called when an asset from a module was added to the compilation.
+يُستدعى عندما تتم إضافة asset من module إلى compilation.
- Callback Parameters: `module` `filename`
@@ -621,7 +605,7 @@ Called when an asset from a module was added to the compilation.
`SyncHook`
-Triggered when an asset from a chunk was added to the compilation.
+يُطلق عندما تتم إضافة asset من chunk إلى compilation.
- Callback Parameters: `chunk` `filename`
@@ -629,7 +613,7 @@ Triggered when an asset from a chunk was added to the compilation.
`SyncWaterfallHook`
-Called to determine the path of an asset.
+يُستدعى لتحديد مسار asset.
- Callback Parameters: `path` `options`
@@ -637,29 +621,29 @@ Called to determine the path of an asset.
`SyncBailHook`
-Called to determine if an asset needs to be processed further after being emitted.
+يُستدعى لتحديد ما إذا كان asset يحتاج معالجة إضافية بعد إصداره.
## childCompiler
`SyncHook`
-Executed after setting up a child compiler.
+يُنفّذ بعد إعداد child compiler.
- Callback Parameters: `childCompiler` `compilerName` `compilerIndex`
## normalModuleLoader
-Since webpack v5 `normalModuleLoader` hook was removed. Now to access the loader use `NormalModule.getCompilationHooks(compilation).loader` instead.
+منذ webpack v5، تمت إزالة hook المسمى `normalModuleLoader`. للوصول إلى loader الآن، استخدم `NormalModule.getCompilationHooks(compilation).loader` بدلًا منه.
## statsPreset
`HookMap`
-This HookMap is like a list of actions that gets triggered when a preset is used. It takes in an options object. When a plugin manages a preset, it should change settings in this object carefully without replacing existing ones.
+هذا HookMap يشبه قائمة إجراءات تُطلق عند استخدام preset. يستقبل كائن options. عندما يدير plugin preset، يجب أن يغير الإعدادات داخل هذا الكائن بحذر بدون استبدال الإعدادات الموجودة.
- Callback Parameters: `options` `context`
-Here's an illustrative plugin example:
+هذا مثال توضيحي لـ plugin:
```js
compilation.hooks.statsPreset.for("my-preset").tap("MyPlugin", (options) => {
@@ -667,17 +651,17 @@ compilation.hooks.statsPreset.for("my-preset").tap("MyPlugin", (options) => {
});
```
-This plugin ensures that for the preset `'my-preset'`, if the `all` option is undefined, it defaults to true.
+يضمن هذا plugin أنه بالنسبة للـ preset المسمى `'my-preset'`، إذا كان خيار `all` غير معرّف، فستصبح قيمته الافتراضية `true`.
## statsNormalize
`SyncHook`
-This hook is used to transform an options object into a consistent format that can be easily used by subsequent hooks. It also ensures that missing options are set to their default values.
+يُستخدم هذا hook لتحويل كائن options إلى صيغة متسقة يمكن استخدامها بسهولة بواسطة hooks اللاحقة. كما يضمن ضبط الخيارات الناقصة على قيمها الافتراضية.
- Callback Parameters: `options` `context`
-Here's an illustrative plugin example:
+هذا مثال توضيحي لـ plugin:
```js
compilation.hooks.statsNormalize.tap("MyPlugin", (options) => {
@@ -687,11 +671,11 @@ compilation.hooks.statsNormalize.tap("MyPlugin", (options) => {
});
```
-In this plugin, if the `myOption` is missing, it sets it to an empty array. Additionally, it ensures that `myOption` is always an array even if it was originally defined as a single value.
+في هذا plugin، إذا كان `myOption` ناقصًا، يضبطه على array فارغة. كذلك يتأكد من أن `myOption` دائمًا array حتى لو كان معرّفًا في الأصل كقيمة واحدة.
## statsFactory
-This hook provides access to the [`StatsFactory` class](https://github.com/webpack/webpack/blob/main/lib/stats/StatsFactory.js) for specific options.
+يوفر هذا hook وصولًا إلى الصنف [`StatsFactory`](https://github.com/webpack/webpack/blob/main/lib/stats/StatsFactory.js) لخيارات محددة.
- Callback Parameters: `statsFactory` `options`
@@ -701,9 +685,9 @@ This hook provides access to the [`StatsFactory` class](https://github.com/webpa
- Callback Parameters: `object` `data` `context`
-`data` contains the class. object is an object to which properties should be added. `context` provides contextual information, such as classes on the path.
+تحتوي `data` على الصنف. أما `object` فهو الكائن الذي يجب إضافة الخصائص إليه. ويوفر `context` معلومات سياقية، مثل الأصناف الموجودة في المسار.
-Example:
+مثال:
```js
compilation.hooks.statsFactory.tap("MyPlugin", (statsFactory, options) => {
@@ -719,13 +703,13 @@ compilation.hooks.statsFactory.tap("MyPlugin", (statsFactory, options) => {
`HookMap`
-Called with the result on each level.
+يُستدعى مع النتيجة على كل مستوى.
- Callback Parameters: `result` `context`
## statsPrinter
-This hook provides access to the [`StatsPrinter` class](https://github.com/webpack/webpack/blob/main/lib/stats/StatsPrinter.js) for specific options.
+يوفر هذا hook وصولًا إلى الصنف [`StatsPrinter`](https://github.com/webpack/webpack/blob/main/lib/stats/StatsPrinter.js) لخيارات محددة.
- Callback Parameters: `statsPrinter` `options`
@@ -733,7 +717,7 @@ This hook provides access to the [`StatsPrinter` class](https://github.com/webpa
`HookMap`
-This hook is called when a part should be printed.
+يُستدعى هذا hook عندما يجب طباعة جزء معين.
- Callback Parameters: `object` `context`
@@ -741,13 +725,13 @@ This hook is called when a part should be printed.
`HookMap`
-This hook is called for the resulting string for a part.
+يُستدعى هذا hook للنص الناتج عن جزء معين.
- Callback Parameters: `result` `context`
## CssModulesPlugin.getCompilationHooks(compilation)
-When [`experiments.css`](/configuration/experiments/#experimentscss) is enabled, the internal `CssModulesPlugin` exposes a set of per-compilation hooks for plugin authors. Access them via the static `getCompilationHooks(compilation)` method:
+عند تفعيل [`experiments.css`](/configuration/experiments/#experimentscss)، يعرض `CssModulesPlugin` الداخلي مجموعة hooks لكل compilation لمؤلفي plugins. يمكنك الوصول إليها عبر static method باسم `getCompilationHooks(compilation)`:
```js
const webpack = require("webpack");
@@ -757,13 +741,13 @@ class MyCssPlugin {
compiler.hooks.thisCompilation.tap("MyCssPlugin", (compilation) => {
const hooks =
webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
- // tap into hooks here
+ // ادخل إلى hooks هنا
});
}
}
```
-W> These hooks are only registered when `experiments.css` is enabled and may evolve while the CSS feature is experimental.
+W> لا تُسجل هذه hooks إلا عند تفعيل `experiments.css`، وقد تتغير بينما ميزة CSS ما زالت تجريبية.
### orderModules
@@ -771,9 +755,9 @@ W> These hooks are only registered when `experiments.css` is enabled and may evo
`SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`
-Called once per CSS source type (CSS imports and CSS modules) with the chunk's modules pre-sorted by full module name. Taps may return an ordered `Module[]` to override webpack's default import-order topological sort, or return `undefined` to keep the default order.
+يُستدعى مرة واحدة لكل نوع CSS source، أي CSS imports وCSS modules، مع modules الخاصة بالـ chunk مرتبة مسبقًا حسب full module name. يمكن لـ taps إرجاع `Module[]` مرتبة لتجاوز topological sort الافتراضي لترتيب imports في webpack، أو إرجاع `undefined` للإبقاء على الترتيب الافتراضي.
-The hook is the recommended escape hatch when webpack's topological sort surfaces a `Conflicting order between css ...` warning that cannot be resolved by restructuring imports. Returning the pre-sorted array (or any deterministic order) lets the build pick a stable order without changing application code.
+هذا hook هو المخرج الموصى به عندما يظهر ترتيب webpack الطوبولوجي تحذير `Conflicting order between css ...` ولا يمكن حله بإعادة هيكلة imports. إرجاع array المرتبة مسبقًا، أو أي ترتيب deterministic، يسمح للـ build باختيار ترتيب ثابت بدون تغيير كود التطبيق.
- Callback Parameters: `chunk` `modules` `compilation`
@@ -788,9 +772,9 @@ class CssOrderByPathPlugin {
const hooks =
webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
- // Modules arrive pre-sorted by full module name; return as-is to
- // enforce a deterministic file-path order across rebuilds and
- // side-step the conflicting-order warning.
+ // تصل modules مرتبة مسبقًا حسب full module name. أرجعها كما هي
+ // لفرض ترتيب deterministic حسب مسار الملف عبر rebuilds
+ // وتجنب تحذير conflicting-order.
hooks.orderModules.tap(
"CssOrderByPathPlugin",
(_chunk, modules) => modules,
@@ -801,4 +785,4 @@ class CssOrderByPathPlugin {
}
```
-The hook is a `SyncBailHook`, so the first tap to return a non-`undefined` value wins. Subsequent taps are not invoked for that call.
+الـ hook من نوع `SyncBailHook`، لذلك أول tap يرجع قيمة غير `undefined` يفوز. لا يتم استدعاء taps اللاحقة لذلك الاستدعاء.
diff --git a/src/content/api/compilation-object.mdx b/src/content/api/compilation-object.mdx
index e2b8e2ab0112..ea8703d4defa 100644
--- a/src/content/api/compilation-object.mdx
+++ b/src/content/api/compilation-object.mdx
@@ -1,230 +1,227 @@
---
-title: Compilation Object
+title: كائن Compilation
group: Objects
sort: 14
contributors:
- - EugeneHlushko
- - wizardofhogwarts
- - jamesgeorge007
- - snitin315
+ - RlxChap2
---
-The Compilation object has many methods and hooks available. On this page, we will list the available methods and properties.
+يحتوي كائن Compilation على كثير من الدوال والـ hooks. في هذه الصفحة نعرض الدوال والخصائص المتاحة عليه.
-## compilation object methods
+## دوال كائن compilation
### getStats
`function`
-Returns Stats object for the current compilation.
+ترجع كائن Stats الخاص بالـ compilation الحالي.
### addModule
`function (module, callback)`
-Adds a module to the current compilation.
+تضيف module إلى compilation الحالي.
Parameters:
-- `module` - module to be added
-- `callback` - a callback after the module has been added
+- `module` - الـ module المراد إضافته.
+- `callback` - callback تُستدعى بعد إضافة module.
### getModule
`function (module)`
-Fetches a module from a compilation by its identifier.
+تجلب module من compilation باستخدام المعرّف الخاص به.
Parameters:
-- `module` - module to be fetched. The identifier is extracted from the module by the compilation using `module.identifier()` method.
+- `module` - الـ module المراد جلبه. يستخرج compilation المعرّف من module باستخدام الدالة `module.identifier()`.
### findModule
`function (module)`
-Attempts to search for a module by its identifier.
+تحاول البحث عن module باستخدام المعرّف الخاص به.
Parameters:
-- `module` - module to be searched for. The identifier is extracted from the module by the compilation using `module.identifier()` method.
+- `module` - الـ module المراد البحث عنه. يستخرج compilation المعرّف من module باستخدام الدالة `module.identifier()`.
### buildModule
`function (module, optional, origin, dependencies)`
-Builds the given module.
+تبني module المحدد.
Parameters:
-- `module` - the module to be built.
-- `optional` - optional flag.
-- `origin` - origin module from which this module build was requested.
-- `dependencies` - optional dependencies of the module to be built.
+- `module` - الـ module المراد بناؤه.
+- `optional` - علامة اختيارية.
+- `origin` - الـ module الأصلي الذي طلب بناء هذا module.
+- `dependencies` - dependencies اختيارية للـ module المراد بناؤه.
### processModuleDependencies
`function (module, callback)`
-Process the given module dependencies.
+تعالج dependencies الخاصة بالـ module المحدد.
Parameters:
-- `module` - module to be processed for the dependencies.
-- `callback` - function to be invoked when dependencies of the module had been processed.
+- `module` - الـ module الذي ستُعالج dependencies الخاصة به.
+- `callback` - دالة تُستدعى بعد انتهاء معالجة dependencies الخاصة بالـ module.
### addEntry
`function (context, entry, name, callback)`
-Adds an entry to the compilation.
+تضيف entry إلى compilation.
Parameters:
-- `context` - context path for entry.
-- `entry` - entry dependency.
-- `name` - the name of entry.
-- `callback` - function to be invoked when addEntry finishes.
+- `context` - مسار context الخاص بالـ entry.
+- `entry` - اعتماد entry.
+- `name` - اسم entry.
+- `callback` - دالة تُستدعى عند انتهاء `addEntry`.
### rebuildModule
`function (module, thisCallback)`
-Triggers a re-build of the module.
+تشغّل إعادة بناء للـ module.
Parameters:
-- `module` - module to be rebuilt.
-- `thisCallback` - function to be invoked when the module finishes rebuilding.
+- `module` - الـ module المراد إعادة بنائه.
+- `thisCallback` - دالة تُستدعى عند انتهاء إعادة بناء module.
### finish
`function (callback)`
-Finishes compilation and invokes the given callback.
+تنهي compilation وتستدعي callback المحددة.
Parameters:
-- `callback` - function to be invoked when the compilation has been finished.
+- `callback` - دالة تُستدعى بعد انتهاء compilation.
### seal
`function (callback)`
-Seals the compilation.
+تعمل seal للـ compilation.
Parameters:
-- `callback` - function to be invoked when the compilation has been sealed.
+- `callback` - دالة تُستدعى بعد عمل seal للـ compilation.
### unseal
`function`
-Unseals the compilation.
+تلغي seal الخاص بالـ compilation.
Parameters:
-- `callback` - function to be invoked when the compilation has been unsealed.
+- `callback` - دالة تُستدعى بعد إلغاء seal للـ compilation.
### reportDependencyErrorsAndWarnings
`function (module, blocks)`
-Adds errors and warnings of the given module to the compilation errors and warnings.
+تضيف أخطاء وتحذيرات module المحدد إلى أخطاء وتحذيرات compilation.
Parameters:
-- `module` - the module whose errors and warnings are to be reported.
-- `blocks` - a set of dependency blocks to report from.
+- `module` - الـ module الذي سيتم الإبلاغ عن أخطائه وتحذيراته.
+- `blocks` - مجموعة dependency blocks سيتم الإبلاغ منها.
### addChunkInGroup
`function (groupOptions, module, loc, request)`
-Adds module to an existing chunk group or creates a new one. Returns a `chunkGroup`.
+تضيف module إلى chunk group موجود، أو تنشئ chunk group جديدًا. ترجع `chunkGroup`.
Parameters:
-- `groupOptions` - options for the chunk group.
-- `module` - a module that references the chunk group.
-- `loc` - the location from which the chunk group is referenced (inside of the module).
-- `request` - the request from which the chunk group is referenced.
+- `groupOptions` - خيارات chunk group.
+- `module` - module يشير إلى chunk group.
+- `loc` - المكان الذي تمت منه الإشارة إلى chunk group داخل module.
+- `request` - request الذي تمت منه الإشارة إلى chunk group.
### addChunk
`function (name)`
-Creates and adds a new chunk to the `compilation.chunks`. Returns that `chunk`.
+تنشئ chunk جديدًا وتضيفه إلى `compilation.chunks`. ترجع ذلك `chunk`.
Parameters:
-- `name` - the name of the chunk.
+- `name` - اسم chunk.
### assignDepth
`function (module)`
-Assigns `depth` to the given module and its dependency blocks recursively.
+تعيّن `depth` للـ module المحدد ولـ dependency blocks الخاصة به بشكل متكرر.
Parameters:
-- `module` - the module to assign depth to.
+- `module` - الـ module المراد تعيين depth له.
### getDependencyReference
`function (module, dependency)`
-Returns the reference to the dependency from a given module.
+ترجع reference الخاص بالـ dependency من module محدد.
Parameters:
-- `module` - the module at question.
-- `dependency` - the dependency to get reference to.
+- `module` - الـ module المعني.
+- `dependency` - الـ dependency المراد جلب reference له.
### processDependenciesBlocksForChunkGroups
`function (inputChunkGroups)`
-Creates the `Chunk` graph from the `Module` graph. The process is done in two phases. Phase one: traverse the module graph and build a basic chunks graph in `chunkDependencies`. Phase two: traverse every possible way through the basic chunk graph and track the available modules. While traversing, `processDependenciesBlocksForChunkGroups` connects chunks with each other and `Blocks` with `Chunks`. It stops traversing when all modules for a chunk are already available and it doesn't connect unneeded chunks.
+تنشئ graph خاصًا بـ `Chunk` من graph الخاص بـ `Module`. تتم العملية على مرحلتين. في المرحلة الأولى، يتم المرور على module graph وبناء chunks graph أساسي داخل `chunkDependencies`. في المرحلة الثانية، يتم المرور على كل طريق ممكن داخل chunk graph الأساسي وتتبع modules المتاحة. أثناء المرور، تربط `processDependenciesBlocksForChunkGroups` بين chunks وبعضها، وبين `Blocks` و`Chunks`. وتتوقف عن المرور عندما تكون كل modules الخاصة بـ chunk متاحة بالفعل، ولا تربط chunks غير ضرورية.
Parameters:
-- `inputChunkGroups` - chunk groups that are processed.
+- `inputChunkGroups` - chunk groups التي ستتم معالجتها.
### removeReasonsOfDependencyBlock
`function (module, block)`
-Removes relation of the module to the dependency block.
+تزيل علاقة module مع dependency block.
Parameters:
-- `module` - a module relationship to be removed.
+- `module` - علاقة module المراد إزالتها.
- `block` - dependency block.
### patchChunksAfterReasonRemoval
`function (module, chunk)`
-Patches ties of module and chunk after removing dependency reasons. Called automatically by `removeReasonsOfDependencyBlock`.
+تعدّل الروابط بين module وchunk بعد إزالة أسباب dependency. تُستدعى تلقائيًا بواسطة `removeReasonsOfDependencyBlock`.
Parameters:
-- `module` - a module to patch tie.
-- `chunk` - a chunk to patch tie.
+- `module` - الـ module المراد تعديل رابطه.
+- `chunk` - الـ chunk المراد تعديل رابطه.
### removeChunkFromDependencies
`function (block, chunk)`
-Removes given chunk from a dependencies block module and chunks after removing dependency reasons. Called automatically by `removeReasonsOfDependencyBlock`.
+تزيل chunk محددًا من dependency block module ومن chunks بعد إزالة أسباب dependency. تُستدعى تلقائيًا بواسطة `removeReasonsOfDependencyBlock`.
Parameters:
-- `block` - block tie for `Chunk`.
-- `chunk` - a chunk to remove from dependencies.
+- `block` - رابط block الخاص بـ `Chunk`.
+- `chunk` - الـ chunk المراد إزالته من dependencies.
### sortItemsWithChunkIds
@@ -250,35 +247,35 @@ Parameters:
`function (filename, data)`
-Returns the interpolated path.
+ترجع المسار بعد تطبيق قيم القوالب داخله.
Parameters:
-- `filename` - used to get asset path with hash.
-- `data` - data object.
+- `filename` - يُستخدم للحصول على مسار asset مع hash.
+- `data` - كائن البيانات.
### getPathWithInfo
`function (filename, data)`
-Returns interpolated path and asset information.
+ترجع المسار بعد تطبيق القيم، مع معلومات asset.
Parameters:
-- `filename` - used to get asset path with hash.
-- `data` - data object.
+- `filename` - يُستخدم للحصول على مسار asset مع hash.
+- `data` - كائن البيانات.
### createChildCompiler
`function (name, outputOptions, plugins)`
-Allows running another instance of webpack inside of webpack. However, as a child with different settings and configurations applied. It copies all hooks and plugins from the parent (or top-level compiler) and creates a child `Compiler` instance. Returns the created `Compiler`.
+تسمح بتشغيل instance أخرى من webpack داخل webpack، لكن كـ child بإعدادات وخيارات مختلفة. تنسخ كل hooks وplugins من parent أو top-level compiler، ثم تنشئ instance فرعية من `Compiler`. ترجع كائن `Compiler` الذي تم إنشاؤه.
Parameters:
-- `name` - name for the child `Compiler`.
-- `outputOptions` - output options object.
-- `plugins` - webpack plugins that will be applied.
+- `name` - اسم `Compiler` الفرعي.
+- `outputOptions` - كائن خيارات output.
+- `plugins` - webpack plugins التي سيتم تطبيقها.
### checkConstraints
@@ -290,9 +287,9 @@ Parameters:
Parameters:
-- `file` - file name of the asset
-- `source` - the source of the asset
-- `assetInfo` - additional asset information
+- `file` - اسم ملف asset.
+- `source` - مصدر asset.
+- `assetInfo` - معلومات إضافية عن asset.
### updateAsset
@@ -300,9 +297,9 @@ Parameters:
Parameters:
-- `file` - file name of the asset
-- `newSourceOrFunction` - new asset source or function converting old to new
-- `assetInfoUpdateOrFunction` - new asset info or function converting old to new
+- `file` - اسم ملف asset.
+- `newSourceOrFunction` - مصدر asset الجديد، أو دالة تحول المصدر القديم إلى جديد.
+- `assetInfoUpdateOrFunction` - معلومات asset الجديدة، أو دالة تحول المعلومات القديمة إلى جديدة.
### deleteAsset
@@ -310,13 +307,13 @@ Parameters:
Parameters:
-- `file` - file name of the asset
+- `file` - اسم ملف asset.
### getAssets
`function`
-Returns array of all assets under the current compilation.
+ترجع array تحتوي على كل assets الموجودة تحت compilation الحالي.
### getAsset
@@ -324,4 +321,4 @@ Returns array of all assets under the current compilation.
Parameters:
-- `name` - the name of the asset to return
+- `name` - اسم asset المطلوب إرجاعه.
diff --git a/src/content/api/compiler-hooks.mdx b/src/content/api/compiler-hooks.mdx
index d0ecb8d09794..2293ab28f6e9 100644
--- a/src/content/api/compiler-hooks.mdx
+++ b/src/content/api/compiler-hooks.mdx
@@ -3,39 +3,22 @@ title: Compiler Hooks
group: Plugins
sort: 9
contributors:
- - rishantagarwal
- - byzyk
- - madhavarshney
- - misterdev
- - EugeneHlushko
- - superburrito
- - chenxsan
- - snitin315
+ - RlxChap2
---
-The `Compiler` module is the main engine that creates a compilation instance
-with all the options passed through the [CLI](/api/cli) or [Node API](/api/node). It extends the
-`Tapable` class in order to register and call plugins. Most user-facing plugins
-are first registered on the `Compiler`.
+يُعد module المسمى `Compiler` المحرك الرئيسي الذي ينشئ instance من compilation باستخدام كل الخيارات القادمة من [CLI](/api/cli) أو [Node API](/api/node). يرث `Compiler` من الصنف `Tapable` حتى يتمكن من تسجيل plugins واستدعائها. أغلب plugins التي يتعامل معها المستخدم تُسجل أولًا على `Compiler`.
-When developing a plugin for webpack, you might want to know where each hook is called. To learn this, search for `hooks..call` across the webpack source.
+عند تطوير plugin لـ webpack، قد تحتاج إلى معرفة أين يتم استدعاء كل hook. لمعرفة ذلك، ابحث عن `hooks..call` داخل مصدر webpack.
-W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+W> منذ webpack 5، لم تعد `hooks` قابلة للتمديد مباشرة. استخدم `WeakMap` لإضافة hooks مخصصة.
## Watching
-The `Compiler` supports [watching](/api/node/#watching) which monitors the file
-system and recompiles as files change. When in watch mode, the compiler will
-emit the additional events such as `watchRun`, `watchClose`, and `invalid`.
-This is typically used in [development](/guides/development), usually under
-the hood of tools like `webpack-dev-server`, so that the developer doesn't
-need to re-compile manually every time. Watch mode can also be entered via the
-[CLI](/api/cli/#watch-options).
+يدعم `Compiler` وضع [watching](/api/node/#watching)، وفيه يراقب نظام الملفات ويعيد compilation عند تغيّر الملفات. عند استخدام watch mode، يطلق compiler أحداثًا إضافية مثل `watchRun` و`watchClose` و`invalid`. يستخدم هذا غالبًا أثناء [development](/guides/development)، عادةً من خلال أدوات مثل `webpack-dev-server`، حتى لا يحتاج المطور إلى إعادة compilation يدويًا في كل مرة. ويمكن تفعيل watch mode أيضًا من [CLI](/api/cli/#watch-options).
## Hooks
-The following lifecycle hooks are exposed by the `compiler` and can be accessed
-as such:
+يعرض `compiler` hooks التالية ضمن دورة حياته، ويمكن الوصول إليها بهذا الشكل:
```js
compiler.hooks.someHook.tap("MyPlugin", (params) => {
@@ -43,29 +26,29 @@ compiler.hooks.someHook.tap("MyPlugin", (params) => {
});
```
-Depending on the hook type, `tapAsync` and `tapPromise` may also be available.
+بحسب نوع hook، قد تكون `tapAsync` و`tapPromise` متاحتين أيضًا.
-For the description of hook types, see [the Tapable docs](https://github.com/webpack/tapable#tapable).
+لوصف أنواع hooks، راجع [توثيق Tapable](https://github.com/webpack/tapable#tapable).
### environment
`SyncHook`
-Called while preparing the compiler environment, right after initializing the plugins in the configuration file.
+يُستدعى أثناء تجهيز بيئة compiler، مباشرة بعد تهيئة plugins الموجودة في ملف الإعدادات.
### afterEnvironment
`SyncHook`
-Called right after the `environment` hook, when the compiler environment setup is complete.
+يُستدعى مباشرة بعد hook المسمى `environment`، عندما يكتمل إعداد بيئة compiler.
### entryOption
`SyncBailHook`
-Called after the [`entry` configuration](/configuration/entry-context/#entry) from webpack options has been processed.
+يُستدعى بعد معالجة [إعداد `entry`](/configuration/entry-context/#entry) من خيارات webpack.
-- Callback Parameters: [`context`](/configuration/entry-context/#context), [`entry`](/configuration/entry-context/#entry)
+- Parameters الخاصة بالـ callback: [`context`](/configuration/entry-context/#context)، [`entry`](/configuration/entry-context/#entry)
```js
compiler.hooks.entryOption.tap("MyPlugin", (context, entry) => {
@@ -77,17 +60,17 @@ compiler.hooks.entryOption.tap("MyPlugin", (context, entry) => {
`SyncHook`
-Called after setting up initial set of internal plugins.
+يُستدعى بعد إعداد المجموعة الأولية من plugins الداخلية.
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
### afterResolvers
`SyncHook`
-Triggered after resolver setup is complete.
+يُطلق بعد اكتمال إعداد resolvers.
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
### validate
@@ -95,9 +78,9 @@ Triggered after resolver setup is complete.
-Called to register validation work for webpack configuration, plugins, and loaders. Plugin authors can tap this hook and use `compiler.validate(...)` to participate in webpack's built-in validation flow.
+يُستدعى لتسجيل أعمال التحقق من إعدادات webpack وplugins وloaders. يستطيع مؤلفو plugins استخدام هذا hook واستدعاء `compiler.validate(...)` للمشاركة في مسار التحقق المدمج داخل webpack.
-W> The hook is always available. `compiler.validate(...)` skips validation when `validate: false` is set. With `experiments.futureDefaults`, webpack keeps validation enabled by default in development and disables it by default in production.
+W> هذا hook متاح دائمًا. تتجاوز `compiler.validate(...)` عملية التحقق عند ضبط `validate: false`. ومع `experiments.futureDefaults`، يبقي webpack التحقق مفعّلًا افتراضيًا في development ويعطله افتراضيًا في production.
```js
compiler.hooks.validate.tap("MyPlugin", () => {
@@ -114,57 +97,57 @@ compiler.hooks.validate.tap("MyPlugin", () => {
`SyncHook`
-Called when a compiler object is initialized.
+يُستدعى عند تهيئة كائن compiler.
### beforeRun
`AsyncSeriesHook`
-Adds a hook right before running the compiler.
+يضيف hook قبل تشغيل compiler مباشرة.
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
### run
`AsyncSeriesHook`
-Hook into the compiler before it begins reading [`records`](/configuration/other-options/#recordspath).
+يدخل إلى compiler قبل أن يبدأ بقراءة [`records`](/configuration/other-options/#recordspath).
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
### watchRun
`AsyncSeriesHook`
-Executes a plugin during watch mode after a new compilation is triggered but before the compilation is actually started.
+ينفّذ plugin أثناء watch mode بعد تشغيل compilation جديد، وقبل أن يبدأ compilation فعليًا.
-- Callback Parameters: `compiler`
+- Parameters الخاصة بالـ callback: `compiler`
### normalModuleFactory
`SyncHook`
-Called after a [NormalModuleFactory](/api/normalmodulefactory-hooks) is created.
+يُستدعى بعد إنشاء [NormalModuleFactory](/api/normalmodulefactory-hooks).
-- Callback Parameters: `normalModuleFactory`
+- Parameters الخاصة بالـ callback: `normalModuleFactory`
### contextModuleFactory
`SyncHook`
-Runs a plugin after a [ContextModuleFactory](/api/contextmodulefactory-hooks) is created.
+يشغّل plugin بعد إنشاء [ContextModuleFactory](/api/contextmodulefactory-hooks).
-- Callback Parameters: `contextModuleFactory`
+- Parameters الخاصة بالـ callback: `contextModuleFactory`
### beforeCompile
`AsyncSeriesHook`
-Executes a plugin after compilation parameters are created.
+ينفّذ plugin بعد إنشاء parameters الخاصة بـ compilation.
-- Callback Parameters: `compilationParams`
+- Parameters الخاصة بالـ callback: `compilationParams`
-The `compilationParams` variable is initialized as follows:
+يتم تهيئة المتغير `compilationParams` بهذا الشكل:
```js
compilationParams = {
@@ -173,7 +156,7 @@ compilationParams = {
};
```
-This hook can be used to add/modify the compilation parameters:
+يمكن استخدام هذا hook لإضافة أو تعديل parameters الخاصة بـ compilation:
```js
compiler.hooks.beforeCompile.tapAsync("MyPlugin", (params, callback) => {
@@ -186,55 +169,55 @@ compiler.hooks.beforeCompile.tapAsync("MyPlugin", (params, callback) => {
`SyncHook`
-Called right after `beforeCompile`, before a new compilation is created. This hook is _not_ copied to child compilers.
+يُستدعى مباشرة بعد `beforeCompile`، وقبل إنشاء compilation جديد. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `compilationParams`
+- Parameters الخاصة بالـ callback: `compilationParams`
### thisCompilation
`SyncHook`
-Executed while initializing the compilation, right before emitting the `compilation` event. This hook is _not_ copied to child compilers.
+يُنفّذ أثناء تهيئة compilation، مباشرة قبل إطلاق حدث `compilation`. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `compilation`, `compilationParams`
+- Parameters الخاصة بالـ callback: `compilation`, `compilationParams`
### compilation
`SyncHook`
-Runs a plugin after a compilation has been created.
+يشغّل plugin بعد إنشاء compilation.
-- Callback Parameters: `compilation`, `compilationParams`
+- Parameters الخاصة بالـ callback: `compilation`, `compilationParams`
### make
`AsyncParallelHook`
-Executed before finishing the compilation. This hook is _not_ copied to child compilers.
+يُنفّذ قبل إنهاء compilation. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
### afterCompile
`AsyncSeriesHook`
-Called after finishing and sealing the compilation.
+يُستدعى بعد إنهاء compilation وعمل seal له.
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
### shouldEmit
`SyncBailHook`
-Called before emitting assets. Should return a boolean telling whether to emit.
+يُستدعى قبل إخراج assets. يجب أن يرجع قيمة boolean توضّح هل سيتم الإخراج أم لا.
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
```js
compiler.hooks.shouldEmit.tap(
"MyPlugin",
(compilation) =>
- // return true to emit the output, otherwise false
+ // أرجع true لإخراج الملفات، أو false لمنع الإخراج
true,
);
```
@@ -243,27 +226,27 @@ compiler.hooks.shouldEmit.tap(
`AsyncSeriesHook`
-Executed right before emitting assets to output dir. This hook is _not_ copied to child compilers.
+يُنفّذ مباشرة قبل إخراج assets إلى مجلد output. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
### afterEmit
`AsyncSeriesHook`
-Called after emitting assets to output directory. This hook is _not_ copied to child compilers.
+يُستدعى بعد إخراج assets إلى مجلد output. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `compilation`
+- Parameters الخاصة بالـ callback: `compilation`
### assetEmitted
`AsyncSeriesHook`
-Executed when an asset has been emitted. Provides access to information about the emitted asset, such as its output path and byte content.
+يُنفّذ عندما يتم إخراج asset. يتيح الوصول إلى معلومات عن asset الذي أُخرج، مثل مسار الإخراج ومحتواه بالبايت.
-- Callback Parameters: `file`, `info`
+- Parameters الخاصة بالـ callback: `file`, `info`
-For example, you may access the asset's content buffer via `info.content`:
+مثلًا، يمكنك الوصول إلى buffer الخاص بمحتوى asset عبر `info.content`:
```js
compiler.hooks.assetEmitted.tap(
@@ -278,56 +261,56 @@ compiler.hooks.assetEmitted.tap(
`AsyncSeriesHook`
-Executed when the compilation has completed. This hook is _not_ copied to child compilers.
+يُنفّذ عندما يكتمل compilation. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `stats`
+- Parameters الخاصة بالـ callback: `stats`
### additionalPass
`AsyncSeriesHook`
-This hook allows you to do a one more additional pass of the build.
+يسمح لك هذا hook بتنفيذ مرور إضافي آخر لعملية build.
### failed
`SyncHook`
-Called if the compilation fails.
+يُستدعى إذا فشل compilation.
-- Callback Parameters: `error`
+- Parameters الخاصة بالـ callback: `error`
### invalid
`SyncHook`
-Executed when a watching compilation has been invalidated. This hook is _not_ copied to child compilers.
+يُنفّذ عندما يتم إبطال compilation في وضع watching. لا يتم نسخ هذا hook إلى child compilers.
-- Callback Parameters: `fileName`, `changeTime`
+- Parameters الخاصة بالـ callback: `fileName`, `changeTime`
### watchClose
`SyncHook`
-Called when a watching compilation has stopped.
+يُستدعى عندما يتوقف watching compilation.
### shutdown
`AsyncSeriesHook`
-Called when the compiler is closing.
+يُستدعى عندما يبدأ compiler بالإغلاق.
### infrastructureLog
`SyncBailHook`
-Allows to use infrastructure logging when enabled in the configuration via [`infrastructureLogging` option](/configuration/infrastructureLogging/).
+يسمح باستخدام infrastructure logging عند تفعيله في الإعدادات عبر خيار [`infrastructureLogging`](/configuration/infrastructureLogging/).
-- Callback Parameters: `name`, `type`, `args`
+- Parameters الخاصة بالـ callback: `name`, `type`, `args`
### log
`SyncBailHook`
-Allows to log into [stats](/configuration/stats/) when enabled, see [`stats.logging`, `stats.loggingDebug` and `stats.loggingTrace` options](/configuration/infrastructureLogging/).
+يسمح بالتسجيل داخل [stats](/configuration/stats/) عند تفعيله. راجع خيارات [`stats.logging` و`stats.loggingDebug` و`stats.loggingTrace`](/configuration/infrastructureLogging/).
-- Callback Parameters: `origin`, `logEntry`
+- Parameters الخاصة بالـ callback: `origin`, `logEntry`
diff --git a/src/content/api/contextmodulefactory-hooks.mdx b/src/content/api/contextmodulefactory-hooks.mdx
index f455fae9071c..e7e4d1fe1858 100644
--- a/src/content/api/contextmodulefactory-hooks.mdx
+++ b/src/content/api/contextmodulefactory-hooks.mdx
@@ -3,49 +3,47 @@ title: ContextModuleFactory Hooks
group: Plugins
sort: 11
contributors:
- - iguessitsokay
+ - RlxChap2
---
-The `ContextModuleFactory` module is used by the `Compiler` to generate dependencies from webpack specific [require.context](/api/module-methods/#requirecontext) API. It resolves the requested directory, generates requests for each file and filters against passed regExp. Matching dependencies then passes through [NormalModuleFactory](/api/normalmodulefactory-hooks).
+يستخدم `Compiler` الوحدة `ContextModuleFactory` لإنشاء dependencies من API الخاص بـ webpack وهو [require.context](/api/module-methods/#requirecontext). تحل هذه الوحدة المجلد المطلوب، ثم تنشئ requests لكل ملف، ثم تطبّق عليها RegExp الممرر. بعد ذلك تمر dependencies المطابقة عبر [NormalModuleFactory](/api/normalmodulefactory-hooks).
-The `ContextModuleFactory` class extends `Tapable` and provides the following
-lifecycle hooks. They can be tapped the same way as compiler hooks:
+ترث class `ContextModuleFactory` من `Tapable` وتوفّر lifecycle hooks التالية. يمكنك استخدام `tap` معها بالطريقة نفسها المستخدمة مع compiler hooks:
```js
ContextModuleFactory.hooks.someHook.tap(/* ... */);
```
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+كما هو الحال مع `compiler`، قد يتوفر `tapAsync` و`tapPromise` أيضًا حسب نوع hook.
## beforeResolve
`AsyncSeriesWaterfallHook`
-Called before resolving the requested directory. The request can be ignored by returning `false`.
+يُستدعى قبل حل المجلد المطلوب. يمكنك تجاهل request بإرجاع `false`.
-- Callback Parameters: `data`
+- معاملات callback: `data`
## afterResolve
`AsyncSeriesWaterfallHook`
-Called after the requested directory resolved.
+يُستدعى بعد حل المجلد المطلوب.
-- Callback Parameters: `data`
+- معاملات callback: `data`
## contextModuleFiles
`SyncWaterfallHook`
-Called after directory contents are read. On recursive mode, calls for each sub-directory as well. Callback parameter is an array of all file and folder names in each directory.
+يُستدعى بعد قراءة محتويات المجلد. في الوضع recursive، يُستدعى أيضًا لكل مجلد فرعي. معامل callback هو array تحتوي أسماء كل الملفات والمجلدات داخل كل مجلد.
-- Callback Parameters: `fileNames`
+- معاملات callback: `fileNames`
## alternativeRequests
`AsyncSeriesWaterfallHook`
-Called for each file after the request is created but before filtering against regExp.
+يُستدعى لكل ملف بعد إنشاء request وقبل التصفية باستخدام RegExp.
-- Callback Parameters: `request` `options`
+- معاملات callback: `request` `options`
diff --git a/src/content/api/hot-module-replacement.mdx b/src/content/api/hot-module-replacement.mdx
index e83e396b4820..17469d85d3dd 100644
--- a/src/content/api/hot-module-replacement.mdx
+++ b/src/content/api/hot-module-replacement.mdx
@@ -2,12 +2,7 @@
title: Hot Module Replacement
sort: 4
contributors:
- - sokra
- - skipjack
- - tbroadley
- - byzyk
- - wizardofhogwarts
- - snitin315
+ - RlxChap2
related:
- title: Concepts - Hot Module Replacement
url: /concepts/hot-module-replacement
@@ -15,151 +10,151 @@ related:
url: /guides/hot-module-replacement
---
-If [Hot Module Replacement](/concepts/hot-module-replacement) has been enabled via the [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin), its interface will be exposed under the [`module.hot`](/api/module-variables/#modulehot-webpack-specific) property as well as [`import.meta.webpackHot`](/api/module-variables/#importmetawebpackhot) property. Note that only `import.meta.webpackHot` can be used in [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm).
+إذا تم تفعيل [Hot Module Replacement](/concepts/hot-module-replacement) عبر [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)، فستظهر واجهته تحت الخاصية [`module.hot`](/api/module-variables/#modulehot-webpack-specific)، وكذلك تحت [`import.meta.webpackHot`](/api/module-variables/#importmetawebpackhot). لاحظ أن `import.meta.webpackHot` وحدها هي التي يمكن استخدامها داخل [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm).
-Typically, users will check to see if the interface is accessible, then begin working with it. As an example, here's how you might `accept` an updated module:
+عادةً يتحقق المستخدمون أولًا من توفر الواجهة، ثم يبدأون التعامل معها. هذا مثال على قبول تحديث module باستخدام `accept`:
```js
if (module.hot) {
module.hot.accept("./library.js", () => {
- // Do something with the updated library module...
+ // افعل شيئًا مع library module المحدّث...
});
}
-// or
+// أو
if (import.meta.webpackHot) {
import.meta.webpackHot.accept("./library.js", () => {
- // Do something with the updated library module…
+ // افعل شيئًا مع library module المحدّث...
});
}
```
-The following methods are supported...
+الدوال التالية مدعومة.
## Module API
### accept
-Accept updates for the given `dependencies` and fire a `callback` to react to those updates, in addition, you can attach an optional error handler:
+تقبل التحديثات للـ `dependencies` المحددة وتنفّذ `callback` للتعامل مع تلك التحديثات. ويمكنك أيضًا إضافة error handler اختياري:
```js
module.hot.accept(
- dependencies, // Either a string or an array of strings
- callback, // Function to fire when the dependencies are updated
+ dependencies, // إما string أو array من strings
+ callback, // دالة تُنفّذ عند تحديث dependencies
errorHandler, // (err, {moduleId, dependencyId}) => {}
);
-// or
+// أو
import.meta.webpackHot.accept(
- dependencies, // Either a string or an array of strings
- callback, // Function to fire when the dependencies are updated
+ dependencies, // إما string أو array من strings
+ callback, // دالة تُنفّذ عند تحديث dependencies
errorHandler, // (err, {moduleId, dependencyId}) => {}
);
```
-When using ESM `import` all imported symbols from `dependencies` are automatically updated. Note: The dependency string must match exactly with the `from` string in the `import`. In some cases `callback` can even be omitted. Using `require()` in the `callback` doesn't make sense here.
+عند استخدام `import` في ESM، يتم تحديث كل الرموز المستوردة من `dependencies` تلقائيًا. ملاحظة: يجب أن يطابق نص dependency النص الموجود بعد `from` في عبارة `import` بشكل كامل. وفي بعض الحالات يمكن حذف `callback` أصلًا. أما استخدام `require()` داخل `callback` فلا معنى له هنا.
-When using CommonJS you need to update dependencies manually by using `require()` in the `callback`. Omitting the `callback` doesn't make sense here.
+عند استخدام CommonJS، يجب تحديث dependencies يدويًا باستخدام `require()` داخل `callback`. لذلك لا يكون حذف `callback` منطقيًا هنا.
-#### errorHandler for accept
+#### errorHandler لـ accept
`(err, {moduleId, dependencyId}) => {}`
-- `err`: the error thrown by the callback in second argument or during dependency execution when using ESM dependencies.
-- `moduleId`: the current module id.
-- `dependencyId`: the module id of the (first) changed dependency.
+- `err`: الخطأ الذي رماه callback في argument الثاني، أو الخطأ أثناء تنفيذ dependency عند استخدام ESM dependencies.
+- `moduleId`: معرّف module الحالي.
+- `dependencyId`: معرّف module الخاص بأول dependency تغيّر.
### accept (self)
-Accept updates for itself.
+يقبل التحديثات الخاصة به.
```js
module.hot.accept(
- errorHandler, // Function to handle errors when evaluating the new version
+ errorHandler, // دالة لمعالجة الأخطاء عند تقييم الإصدار الجديد
);
-// or
+// أو
import.meta.webpackHot.accept(
- errorHandler, // Function to handle errors when evaluating the new version
+ errorHandler, // دالة لمعالجة الأخطاء عند تقييم الإصدار الجديد
);
```
-When this module or dependencies are updated, this module can be disposed and re-evaluated without informing parents. This makes sense if this module has no exports (or exports are updated in another way).
+عندما يتم تحديث هذا module أو dependencies الخاصة به، يمكن التخلص من هذا module وإعادة تقييمه بدون إبلاغ parents. يكون هذا منطقيًا إذا لم يكن لهذا module أي exports، أو إذا كانت exports تُحدّث بطريقة أخرى.
-The `errorHandler` is fired when the evaluation of this module (or dependencies) has thrown an exception.
+يتم تشغيل `errorHandler` عندما يرمي تقييم هذا module، أو dependencies الخاصة به، exception.
-#### errorHandler for self accept
+#### errorHandler لـ self accept
`(err, {moduleId, module}) => {}`
-- `err`: the error when evaluating the new version.
-- `moduleId`: the current module id.
-- `module`: the current module instance.
- - `module.hot`: allow to use the HMR API of the errored module instance. A common scenario is to self accept it again. It also makes sense to add a dispose handler to pass data along. Note that the errored module might be already partially executed, so make sure to not get into a inconsistent state. You can use `module.hot.data` to store partial state.
- - `module.exports`: can be overridden, but be careful since property names might be mangled in production mode.
+- `err`: الخطأ الذي حدث عند تقييم الإصدار الجديد.
+- `moduleId`: معرّف module الحالي.
+- `module`: instance الحالية من module.
+ - `module.hot`: يسمح باستخدام HMR API الخاصة بـ module instance التي حدث فيها الخطأ. سيناريو شائع هو عمل self accept لها مرة أخرى. ومن المفيد أيضًا إضافة dispose handler لتمرير البيانات. انتبه إلى أن module الذي حدث فيه الخطأ قد يكون نُفذ جزئيًا بالفعل، لذلك تأكد من عدم الدخول في حالة غير متسقة. يمكنك استخدام `module.hot.data` لتخزين حالة جزئية.
+ - `module.exports`: يمكن استبداله، لكن كن حذرًا لأن أسماء الخصائص قد يتم تغييرها في production mode.
### decline
-Reject updates for the given `dependencies` forcing the update to fail with a `'decline'` code.
+يرفض التحديثات للـ `dependencies` المحددة، مما يجبر التحديث على الفشل بكود `'decline'`.
```js
module.hot.decline(
- dependencies, // Either a string or an array of strings
+ dependencies, // إما string أو array من strings
);
-// or
+// أو
import.meta.webpackHot.decline(
- dependencies, // Either a string or an array of strings
+ dependencies, // إما string أو array من strings
);
```
-Flag a dependency as not-update-able. This makes sense when changing exports of this dependency can't be handled or handling is not implemented yet. Depending on your HMR management code, an update to these dependencies (or unaccepted dependencies of it) usually causes a full-reload of the page.
+يعلّم dependency على أنه غير قابل للتحديث. يكون هذا منطقيًا عندما لا يمكن التعامل مع تغيّر exports الخاصة بهذا dependency، أو عندما لم تُنفذ معالجة له بعد. بحسب كود إدارة HMR لديك، يؤدي تحديث هذه dependencies، أو dependencies غير المقبولة التابعة لها، غالبًا إلى full-reload للصفحة.
### decline (self)
-Reject updates for itself.
+يرفض التحديثات الخاصة به.
```js
module.hot.decline();
-// or
+// أو
import.meta.webpackHot.decline();
```
-Flag this module as not-update-able. This makes sense when this module has irreversible side-effects, or HMR handling is not implemented for this module yet. Depending on your HMR management code, an update to this module (or unaccepted dependencies) usually causes a full-reload of the page.
+يعلّم هذا module على أنه غير قابل للتحديث. يكون هذا منطقيًا عندما يملك module آثارًا جانبية لا يمكن عكسها، أو عندما لم تُنفذ معالجة HMR لهذا module بعد. بحسب كود إدارة HMR لديك، يؤدي تحديث هذا module، أو dependencies غير المقبولة، غالبًا إلى full-reload للصفحة.
### dispose (or addDisposeHandler)
-Add a handler which is executed when the current module code is replaced. This should be used to remove any persistent resource you have claimed or created. If you want to transfer state to the updated module, add it to the given `data` parameter. This object will be available at `module.hot.data` after the update.
+يضيف handler يُنفّذ عندما يتم استبدال كود module الحالي. استخدمه لإزالة أي resource دائم حجزته أو أنشأته. إذا أردت نقل state إلى module المحدّث، فأضفها إلى parameter المسمى `data`. سيكون هذا الكائن متاحًا في `module.hot.data` بعد التحديث.
```js
module.hot.dispose((data) => {
- // Clean up and pass data to the updated module...
+ // نظّف الموارد ومرر البيانات إلى module المحدّث...
});
-// or
+// أو
import.meta.webpackHot.dispose((data) => {
- // Clean up and pass data to the updated module...
+ // نظّف الموارد ومرر البيانات إلى module المحدّث...
});
```
### invalidate
-Calling this method will invalidate the current module, which disposes and recreates it when the HMR update is applied. This bubbles like a normal update of this module. `invalidate` can't be self-accepted by this module.
+استدعاء هذه الدالة يُبطل module الحالي، فيتم التخلص منه وإعادة إنشائه عند تطبيق تحديث HMR. ويتصاعد هذا مثل أي تحديث عادي لهذا module. لا يستطيع module نفسه قبول `invalidate` عبر self-accept.
-When called during the `idle` state, a new HMR update will be created containing this module. HMR will enter the `ready` state.
+عند استدعائها أثناء حالة `idle`، سيتم إنشاء تحديث HMR جديد يحتوي على هذا module، وسينتقل HMR إلى حالة `ready`.
-When called during the `ready` or `prepare` state, this module will be added to the current HMR update.
+عند استدعائها أثناء حالتي `ready` أو `prepare`، سيُضاف هذا module إلى تحديث HMR الحالي.
-When called during the `check` state, this module will be added to the update when an update is available. If no update is available it will create a new update. HMR will enter the `ready` state.
+عند استدعائها أثناء حالة `check`، سيُضاف هذا module إلى التحديث إذا كان هناك تحديث متاح. وإذا لم يكن هناك تحديث، فسيتم إنشاء تحديث جديد، وسينتقل HMR إلى حالة `ready`.
-When called during the `dispose` or `apply` state, HMR will pick it up after getting out of those states.
+عند استدعائها أثناء حالتي `dispose` أو `apply`، سيأخذها HMR بعين الاعتبار بعد الخروج من تلك الحالات.
-#### Use Cases
+#### حالات الاستخدام
-**Conditional Accepting**
+**القبول الشرطي**
-A module can accept a dependency, but can call `invalidate` when the change of the dependency is not handleable:
+يمكن لـ module قبول dependency، ثم استدعاء `invalidate` عندما يكون تغيّر dependency غير قابل للمعالجة:
```js
import { processX, processY } from "anotherDep";
@@ -173,18 +168,18 @@ export default processY(y);
module.hot.accept("./dep", () => {
if (y !== oldY) {
- // This can't be handled, bubble to parent
+ // لا يمكن التعامل مع هذا التغيير، ارفعه إلى parent
module.hot.invalidate();
return;
}
- // This can be handled
+ // يمكن التعامل مع هذا التغيير
processX(x);
});
```
-**Conditional self accept**
+**قبول self مشروط**
-A module can self-accept itself, but can invalidate itself when the change is not handleable:
+يمكن لـ module أن يقبل تحديث نفسه، لكنه يستطيع إبطال نفسه عندما يكون التغيير غير قابل للمعالجة:
```js
const VALUE = "constant";
@@ -205,7 +200,7 @@ if (
}
```
-**Triggering custom HMR updates**
+**تشغيل تحديثات HMR مخصصة**
{/* eslint-disable no-eval */}
@@ -219,18 +214,18 @@ if (require.cache[moduleId]) {
}
```
-T> When `invalidate` is called, the [`dispose`](#dispose-or-adddisposehandler) handler will be eventually called and fill `module.hot.data`. If [`dispose`](#dispose-or-adddisposehandler) handler is not registered, an empty object will be supplied to `module.hot.data`.
+T> عند استدعاء `invalidate`، سيتم في النهاية استدعاء handler الخاص بـ [`dispose`](#dispose-or-adddisposehandler) وسيملأ `module.hot.data`. إذا لم يكن handler الخاص بـ [`dispose`](#dispose-or-adddisposehandler) مسجلًا، فسيتم تمرير كائن فارغ إلى `module.hot.data`.
-W> Do not get caught in an `invalidate` loop, by calling `invalidate` again and again. This will result in stack overflow and HMR entering the `fail` state.
+W> لا تدخل في حلقة `invalidate` عبر استدعائها مرارًا. سيؤدي ذلك إلى stack overflow ودخول HMR في حالة `fail`.
### removeDisposeHandler
-Remove the handler added via `dispose` or `addDisposeHandler`.
+يزيل handler الذي تمت إضافته عبر `dispose` أو `addDisposeHandler`.
```js
module.hot.removeDisposeHandler(callback);
-// or
+// أو
import.meta.webpackHot.removeDisposeHandler(callback);
```
@@ -238,29 +233,29 @@ import.meta.webpackHot.removeDisposeHandler(callback);
### status
-Retrieve the current status of the hot module replacement process.
+تجلب الحالة الحالية لعملية hot module replacement.
```js
-module.hot.status(); // Will return one of the following strings...
+module.hot.status(); // سترجع إحدى النصوص التالية...
-// or
+// أو
import.meta.webpackHot.status();
```
-| Status | Description |
-| ------- | ----------------------------------------------------------------------------------- |
-| idle | The process is waiting for a call to [`check`](#check) |
-| check | The process is checking for updates |
-| prepare | The process is getting ready for the update (e.g. downloading the updated module) |
-| ready | The update is prepared and available |
-| dispose | The process is calling the `dispose` handlers on the modules that will be replaced |
-| apply | The process is calling the `accept` handlers and re-executing self-accepted modules |
-| abort | An update was aborted, but the system is still in its previous state |
-| fail | An update has thrown an exception and the system's state has been compromised |
+| Status | الوصف |
+| ------- | ---------------------------------------------------------------------------- |
+| idle | العملية تنتظر استدعاء [`check`](#check) |
+| check | العملية تفحص وجود تحديثات |
+| prepare | العملية تستعد للتحديث، مثل تنزيل module المحدّث |
+| ready | التحديث جاهز ومتاح |
+| dispose | العملية تستدعي handlers الخاصة بـ `dispose` على modules التي سيتم استبدالها |
+| apply | العملية تستدعي handlers الخاصة بـ `accept` وتعيد تنفيذ self-accepted modules |
+| abort | تم إلغاء التحديث، لكن النظام ما زال في حالته السابقة |
+| fail | رمى التحديث exception وأصبحت حالة النظام غير موثوقة |
### check
-Test all loaded modules for updates and, if updates exist, `apply` them.
+يفحص كل modules المحملة بحثًا عن تحديثات، وإذا وُجدت تحديثات، يطبقها عبر `apply`.
```js
module.hot
@@ -272,7 +267,7 @@ module.hot
// catch errors
});
-// or
+// أو
import.meta.webpackHot
.check(autoApply)
.then((outdatedModules) => {
@@ -283,11 +278,11 @@ import.meta.webpackHot
});
```
-The `autoApply` parameter can either be a boolean or `options` to pass to the `apply` method when called.
+يمكن أن يكون parameter المسمى `autoApply` إما boolean أو `options` تُمرر إلى الدالة `apply` عند استدعائها.
### apply
-Continue the update process (as long as `module.hot.status() === 'ready'`).
+تواصل عملية التحديث، طالما أن `module.hot.status() === 'ready'`.
```js
module.hot
@@ -299,7 +294,7 @@ module.hot
// catch errors
});
-// or
+// أو
import.meta.webpackHot
.apply(options)
.then((outdatedModules) => {
@@ -310,18 +305,18 @@ import.meta.webpackHot
});
```
-The optional `options` object can include the following properties:
+يمكن أن يحتوي كائن `options` الاختياري على الخصائص التالية:
-- `ignoreUnaccepted` (boolean): Ignore changes made to unaccepted modules.
-- `ignoreDeclined` (boolean): Ignore changes made to declined modules.
-- `ignoreErrored` (boolean): Ignore errors thrown in accept handlers, error handlers and while reevaluating module.
-- `onDeclined` (function(info)): Notifier for declined modules
-- `onUnaccepted` (function(info)): Notifier for unaccepted modules
-- `onAccepted` (function(info)): Notifier for accepted modules
-- `onDisposed` (function(info)): Notifier for disposed modules
-- `onErrored` (function(info)): Notifier for errors
+- `ignoreUnaccepted` (boolean): تجاهل التغييرات التي حدثت في modules غير المقبولة.
+- `ignoreDeclined` (boolean): تجاهل التغييرات التي حدثت في modules المرفوضة.
+- `ignoreErrored` (boolean): تجاهل الأخطاء التي تُرمى داخل accept handlers أو error handlers أو أثناء إعادة تقييم module.
+- `onDeclined` (function(info)): notifier للـ modules المرفوضة.
+- `onUnaccepted` (function(info)): notifier للـ modules غير المقبولة.
+- `onAccepted` (function(info)): notifier للـ modules المقبولة.
+- `onDisposed` (function(info)): notifier للـ modules التي تم التخلص منها.
+- `onErrored` (function(info)): notifier للأخطاء.
-The `info` parameter will be an object containing some of the following values:
+سيكون parameter المسمى `info` كائنًا يحتوي على بعض القيم التالية:
```ts
{
@@ -329,44 +324,44 @@ The `info` parameter will be an object containing some of the following values:
'unaccepted' | 'accepted' |
'disposed' | 'accept-errored' |
'self-accept-errored' | 'self-accept-error-handler-errored',
- moduleId: 4, // The module in question.
- dependencyId: 3, // For errors: the module id owning the accept handler.
- chain: [1, 2, 3, 4], // For declined/accepted/unaccepted: the chain from where the update was propagated.
- parentId: 5, // For declined: the module id of the declining parent
- outdatedModules: [1, 2, 3, 4], // For accepted: the modules that are outdated and will be disposed
- outdatedDependencies: { // For accepted: The location of accept handlers that will handle the update
+ moduleId: 4, // الـ module المعني.
+ dependencyId: 3, // للأخطاء: معرّف module الذي يملك accept handler.
+ chain: [1, 2, 3, 4], // للحالات declined/accepted/unaccepted: السلسلة التي انتشر منها التحديث.
+ parentId: 5, // لـ declined: معرّف parent module الذي رفض التحديث
+ outdatedModules: [1, 2, 3, 4], // لـ accepted: الـ modules القديمة التي سيتم التخلص منها
+ outdatedDependencies: { // لـ accepted: مكان accept handlers التي ستتعامل مع التحديث
5: [4]
},
- error: new Error(...), // For errors: the thrown error
- originalError: new Error(...) // For self-accept-error-handler-errored:
- // the error thrown by the module before the error handler tried to handle it.
+ error: new Error(...), // للأخطاء: الخطأ المرمي
+ originalError: new Error(...) // لـ self-accept-error-handler-errored:
+ // الخطأ الذي رماه module قبل أن يحاول error handler التعامل معه.
}
```
### addStatusHandler
-Register a function to listen for changes in `status`.
+يسجل دالة للاستماع إلى التغييرات في `status`.
```js
module.hot.addStatusHandler((status) => {
- // React to the current status...
+ // تفاعل مع الحالة الحالية...
});
-// or
+// أو
import.meta.webpackHot.addStatusHandler((status) => {
- // React to the current status...
+ // تفاعل مع الحالة الحالية...
});
```
-Bear in mind that when the status handler returns a `Promise`, the HMR system will wait for the `Promise` to resolve before continuing.
+ضع في بالك أنه عندما يرجع status handler كائن `Promise`، سينتظر نظام HMR حتى يتم حل `Promise` قبل المتابعة.
### removeStatusHandler
-Remove a registered status handler.
+يزيل status handler مسجلًا.
```js
module.hot.removeStatusHandler(callback);
-// or
+// أو
import.meta.webpackHot.removeStatusHandler(callback);
```
diff --git a/src/content/api/index.mdx b/src/content/api/index.mdx
index dabb5fa9121b..9d6b05c49586 100644
--- a/src/content/api/index.mdx
+++ b/src/content/api/index.mdx
@@ -1,54 +1,38 @@
---
-title: Introduction
+title: مقدمة
sort: -1
contributors:
- - tbroadley
+ - RlxChap2
---
-A variety of interfaces are available to customize the compilation process.
-Some features overlap between interfaces, e.g. a configuration option may be
-available via a CLI flag, while others exist only through a single interface.
-The following high-level information should get you started.
+يوفّر webpack أكثر من واجهة لتخصيص عملية التجميع. بعض الميزات يمكن الوصول إليها بأكثر من طريقة؛ مثلًا قد تجد خيارًا في ملف الإعدادات وله أيضًا flag في CLI. وفي المقابل توجد ميزات لا تتوفر إلا من واجهة واحدة. هذه الصفحة تعطيك نظرة عامة تساعدك على اختيار الواجهة المناسبة.
## CLI
-The Command Line Interface (CLI) to configure and interact with your build. It
-is especially useful in the case of early prototyping and profiling. For the
-most part, the CLI is used to kick off the process using a configuration
-file and a few flags (e.g. `--env`).
+واجهة سطر الأوامر (CLI) هي الطريقة المباشرة لتشغيل البناء والتعامل معه. تفيدك كثيرًا في التجارب السريعة وقياس الأداء. غالبًا ستستخدمها لتشغيل webpack مع ملف إعدادات وبعض flags مثل `--env`.
-[Learn more about the CLI!](/api/cli)
+[تعرّف أكثر على CLI](/api/cli)
## Module
-When processing modules with webpack, it is important to understand the
-different module syntaxes – specifically the [methods](/api/module-methods)
-and [variables](/api/module-variables) – that are supported.
+عند معالجة modules باستخدام webpack، من المهم أن تفهم صيغ modules التي يدعمها، خصوصًا [الدوال](/api/module-methods) و[المتغيرات](/api/module-variables). هذا الفهم يساعدك على معرفة كيف يقرأ webpack الكود وكيف يتعامل مع الاستيراد والتصدير.
-[Learn more about modules!](/api/module-methods)
+[تعرّف أكثر على modules](/api/module-methods)
## Node
-While most users can get away with using the CLI along with a
-configuration file, more fine-grained control of the compilation can be
-achieved via the Node interface. This includes passing multiple configurations,
-programmatically running or watching, and collecting stats.
+غالبًا يكفي استخدام CLI مع ملف إعدادات، لكن إذا احتجت تحكمًا أدق في عملية التجميع فاستخدم واجهة Node. من خلالها تستطيع تمرير أكثر من إعداد، أو تشغيل webpack ومراقبته من داخل كود JavaScript، أو جمع إحصاءات البناء برمجيًا.
-[Learn more about the Node API!](/api/node)
+[تعرّف أكثر على Node API](/api/node)
## Loaders
-Loaders are transformations that are applied to the source code of a module.
-They are written as functions that accept source code as a parameter and return
-a new version of that code with transformations applied.
+الـ loaders هي تحويلات تُطبّق على كود module قبل أن يدخل في عملية التجميع. عمليًا، الـ loader دالة تستقبل الكود الأصلي وتعيد نسخة جديدة منه بعد التحويل، مثل تحويل TypeScript إلى JavaScript أو معالجة ملفات CSS.
-[Learn more about loaders!](/api/loaders)
+[تعرّف أكثر على loaders](/api/loaders)
## Plugins
-The plugin interface allows users to tap directly into the compilation process.
-Plugins can register handlers on lifecycle hooks that run at different points
-throughout a compilation. When each hook is executed, the plugin will have full
-access to the current state of the compilation.
+واجهة plugins تسمح لك بالدخول إلى مراحل التجميع نفسها. يستطيع plugin تسجيل handlers على lifecycle hooks تعمل في نقاط مختلفة أثناء البناء. وعندما يعمل hook معيّن، يحصل plugin على إمكانية الوصول إلى حالة التجميع في تلك اللحظة.
-[Learn more about plugins!](/api/plugins)
+[تعرّف أكثر على plugins](/api/plugins)
diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx
index d3572e748537..a5db79fe2ec0 100644
--- a/src/content/api/loaders.mdx
+++ b/src/content/api/loaders.mdx
@@ -1,29 +1,17 @@
---
-title: Loader Interface
+title: واجهة Loader
sort: 5
contributors:
- - TheLarkInn
- - jhnns
- - tbroadley
- - byzyk
- - sokra
- - EugeneHlushko
- - jantimon
- - superburrito
- - wizardofhogwarts
- - snitin315
- - chenxsan
- - jamesgeorge007
- - alexeyr
+ - RlxChap2
---
-A loader is a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters.
+الـ loader هو JavaScript module يصدّر دالة. يستدعي [loader runner](https://github.com/webpack/loader-runner) هذه الدالة ويمرر لها نتيجة loader السابق أو ملف resource. يملأ webpack و[loader runner](https://github.com/webpack/loader-runner) سياق `this` داخل الدالة بمجموعة دوال مفيدة تسمح للـ loader، من بين أشياء أخرى، بتغيير أسلوب الاستدعاء إلى async أو قراءة query parameters.
-The first loader is passed one argument: the content of the resource file. The compiler expects a result from the last loader. The result should be a `String` or a `Buffer` (which is converted to a string), representing the JavaScript source code of the module. An optional SourceMap result (as a JSON object) may also be passed.
+يُمرر إلى أول loader argument واحد: محتوى ملف resource. ويتوقع compiler نتيجة من آخر loader. يجب أن تكون النتيجة `String` أو `Buffer`، ويتم تحويل Buffer إلى string، وتمثل كود JavaScript المصدري للـ module. ويمكن أيضًا تمرير SourceMap اختياري ككائن JSON.
-A single result can be returned in [sync mode](#synchronous-loaders). For multiple results the `this.callback()` must be called and the loader must return `undefined`.
+يمكن إرجاع نتيجة واحدة في [الوضع المتزامن](#synchronous-loaders). أما النتائج المتعددة فتتطلب استدعاء `this.callback()`، ويجب أن يرجع loader القيمة `undefined`.
-In [async mode](#asynchronous-loaders) you can return a single result from an `async function`. Alternatively, you may call `this.async()` to indicate that the [loader runner](https://github.com/webpack/loader-runner) should wait for an asynchronous result. It returns `this.callback()`. In this case the loader must return `undefined` and call that callback. This is the only option for multiple results.
+في [الوضع غير المتزامن](#asynchronous-loaders)، يمكنك إرجاع نتيجة واحدة من `async function`. بدلًا من ذلك، يمكنك استدعاء `this.async()` للإشارة إلى أن [loader runner](https://github.com/webpack/loader-runner) يجب أن ينتظر نتيجة غير متزامنة. ترجع هذه الدالة `this.callback()`. في هذه الحالة يجب أن يرجع loader القيمة `undefined` ويستدعي ذلك callback. وهذا هو الخيار الوحيد عند وجود نتائج متعددة.
```js
/**
@@ -33,17 +21,17 @@ In [async mode](#asynchronous-loaders) you can return a single result from an `a
* @param {any} [meta] Meta data, could be anything
*/
function webpackLoader(content, map, meta) {
- // code of your webpack loader
+ // كود webpack loader الخاص بك
}
```
-## Examples
+## أمثلة
-The following sections provide some basic examples of the different types of loaders. Note that the `map` and `meta` parameters are optional, see [`this.callback`](#thiscallback) below.
+تقدم الأقسام التالية أمثلة أساسية لأنواع loaders المختلفة. لاحظ أن parameters المسماة `map` و`meta` اختيارية. راجع [`this.callback`](#thiscallback) أدناه.
### Synchronous Loaders
-Either `return` or `this.callback` can be used to return the transformed `content` synchronously:
+يمكن استخدام `return` أو `this.callback` لإرجاع `content` بعد تحويله بشكل متزامن:
**sync-loader.js**
@@ -53,7 +41,7 @@ export default function syncLoader(content, map, meta) {
}
```
-The `this.callback` method is more flexible as you pass multiple arguments instead of using `content` only.
+دالة `this.callback` أكثر مرونة لأنك تستطيع تمرير عدة arguments بدل استخدام `content` فقط.
**sync-loader-with-multiple-results.js**
@@ -62,13 +50,13 @@ The `this.callback` method is more flexible as you pass multiple arguments inste
```js
export default function syncLoaderWithMultipleResults(content, map, meta) {
this.callback(null, someSyncOperation(content), map, meta);
- return; // always return undefined when calling callback()
+ return; // أرجع undefined دائمًا عند استدعاء callback()
}
```
### Asynchronous Loaders
-For asynchronous loaders, you can return the transformed `content` from an `async function`:
+بالنسبة للـ loaders غير المتزامنة، يمكنك إرجاع `content` بعد تحويله من `async function`:
**async-loader.js**
@@ -79,7 +67,7 @@ export default async function asyncLoader(content, map, meta) {
}
```
-Or you can use [`this.async`](#thisasync) to retrieve the `callback` function:
+أو يمكنك استخدام [`this.async`](#thisasync) للحصول على دالة `callback`:
**async-loader-with-callback.js**
@@ -105,11 +93,11 @@ export default function asyncLoaderWithMultipleResults(content, map, meta) {
}
```
-T> Loaders were originally designed to work in synchronous loader pipelines, like Node.js (using [enhanced-require](https://github.com/webpack/enhanced-require)), _and_ asynchronous pipelines, like in webpack. However, since expensive synchronous computations are a bad idea in a single-threaded environment like Node.js, we advise making your loader asynchronous if possible. Synchronous loaders are ok if the amount of computation is trivial.
+T> صُممت loaders في الأصل للعمل داخل pipelines متزامنة مثل Node.js باستخدام [enhanced-require](https://github.com/webpack/enhanced-require)، _وكذلك_ داخل pipelines غير متزامنة كما في webpack. لكن بما أن العمليات المتزامنة المكلفة فكرة سيئة في بيئة single-threaded مثل Node.js، ننصح بجعل loader غير متزامنًا إن أمكن. loaders المتزامنة مقبولة إذا كان حجم الحسابات بسيطًا.
### "Raw" Loader
-By default, the resource file is converted to a UTF-8 string and passed to the loader. By setting the `raw` flag to `true`, the loader will receive the raw `Buffer`. Every loader is allowed to deliver its result as a `String` or as a `Buffer`. The compiler converts them between loaders.
+افتراضيًا، يتم تحويل ملف resource إلى نص UTF-8 ثم تمريره إلى loader. عند ضبط flag المسمى `raw` على `true`، سيستقبل loader الـ `Buffer` الخام. يمكن لأي loader أن يعطي نتيجته كـ `String` أو `Buffer`. يحول compiler بينهما عند تمرير النتيجة بين loaders.
**raw-loader.js**
@@ -117,19 +105,19 @@ By default, the resource file is converted to a UTF-8 string and passed to the l
export default function rawLoader(content) {
assert(content instanceof Buffer);
return someSyncOperation(content);
- // return value can be a `Buffer` too
- // This is also allowed if loader is not "raw"
+ // يمكن أن تكون قيمة الإرجاع `Buffer` أيضًا
+ // وهذا مسموح حتى لو لم يكن loader "raw"
}
export const raw = true;
```
### Pitching Loader
-Loaders are **always** called from right to left. There are some instances where the loader only cares about the **metadata** behind a request and can ignore the results of the previous loader. The `pitch` method on loaders is called from **left to right** before the loaders are actually executed (from right to left).
+تُستدعى loaders **دائمًا** من اليمين إلى اليسار. توجد حالات يهتم فيها loader فقط بـ **metadata** وراء request ويمكنه تجاهل نتائج loader السابق. تُستدعى دالة `pitch` في loaders من **اليسار إلى اليمين** قبل تنفيذ loaders فعليًا من اليمين إلى اليسار.
-T> Loaders may be added inline in requests and disabled via inline prefixes, which will impact the order in which they are "pitched" and executed. See [`Rule.enforce`](/configuration/module/#ruleenforce) for more details.
+T> يمكن إضافة loaders inline داخل requests وتعطيلها عبر inline prefixes، وهذا يؤثر في ترتيب "pitch" والتنفيذ. راجع [`Rule.enforce`](/configuration/module/#ruleenforce) لمزيد من التفاصيل.
-For the following configuration of [`use`](/configuration/module/#ruleuse):
+في إعداد [`use`](/configuration/module/#ruleuse) التالي:
```js
export default {
@@ -145,7 +133,7 @@ export default {
};
```
-These steps would occur:
+ستحدث الخطوات التالية:
```diff
|- a-loader `pitch`
@@ -157,9 +145,9 @@ These steps would occur:
|- a-loader normal execution
```
-So why might a loader take advantage of the "pitching" phase?
+لماذا قد يستفيد loader من مرحلة "pitching"؟
-First, the `data` passed to the `pitch` method is exposed in the execution phase as well under `this.data` and could be useful for capturing and sharing information from earlier in the cycle.
+أولًا، `data` التي تُمرر إلى دالة `pitch` تكون متاحة أيضًا في مرحلة التنفيذ تحت `this.data`، وقد تفيد لالتقاط معلومات ومشاركتها من مرحلة مبكرة في الدورة.
```js
export default function myLoaderName(content) {
@@ -171,7 +159,7 @@ export function pitch(remainingRequest, precedingRequest, data) {
}
```
-Second, if a loader delivers a result in the `pitch` method, the process turns around and skips the remaining loaders. In our example above, if the `b-loader`s `pitch` method returned something:
+ثانيًا، إذا أعطى loader نتيجة داخل دالة `pitch`، تنعكس العملية ويتم تجاوز loaders المتبقية. في المثال السابق، إذا أرجعت دالة `pitch` الخاصة بـ `b-loader` شيئًا:
```js
export default function myLoaderName(content) {
@@ -185,23 +173,25 @@ export function pitch(remainingRequest, precedingRequest, data) {
}
```
-The steps above would be shortened to:
+ستُختصر الخطوات السابقة إلى:
```diff
|- a-loader `pitch`
|- b-loader `pitch` returns a module
-|- a-loader normal execution
+ |- a-loader normal execution
```
-## The Loader Context
+
+
+## سياق Loader
-The loader context represents the properties that are available inside of a loader assigned to the `this` property.
+يمثل loader context الخصائص المتاحة داخل loader والمربوطة بالخاصية `this`.
### Example for the loader context
-Given the following example, this require call is used:
+في المثال التالي، يتم استخدام require call هذه:
-In `/abc/file.js`:
+داخل `/abc/file.js`:
```js
import "./loader1?xyz!loader2!./resource?rrr";
@@ -213,16 +203,16 @@ import "./loader1?xyz!loader2!./resource?rrr";
addContextDependency(directory: string)
```
-Add a directory as dependency of the loader result.
+يضيف مجلدًا كاعتماد لنتيجة loader.
### this.addDependency
```ts
addDependency(file: string)
-dependency(file: string) // shortcut
+dependency(file: string) // اختصار
```
-Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack/less-loader) uses this to recompile whenever any imported `css` file changes.
+يضيف ملفًا موجودًا كاعتماد لنتيجة loader حتى يصبح قابلًا للمراقبة. مثلًا، يستخدم [`sass-loader`](https://github.com/webpack/sass-loader) و[`less-loader`](https://github.com/webpack/less-loader) ذلك لإعادة compilation كلما تغيّر أي ملف `css` مستورد.
### this.addMissingDependency
@@ -230,27 +220,27 @@ Add an existing file as a dependency of the loader result in order to make them
addMissingDependency(file: string)
```
-Add a non-existing file as a dependency of the loader result in order to make them watchable. Similar to `addDependency`, but handles the creation of files during compilation before watchers are attached correctly.
+يضيف ملفًا غير موجود كاعتماد لنتيجة loader حتى يصبح قابلًا للمراقبة. يشبه `addDependency`، لكنه يتعامل مع إنشاء الملفات أثناء compilation قبل إرفاق watchers بشكل صحيح.
### this.async
-Tells the [loader-runner](https://github.com/webpack/loader-runner) that the loader intends to call back asynchronously. Returns `this.callback`.
+يخبر [loader-runner](https://github.com/webpack/loader-runner) أن loader ينوي استدعاء callback بشكل غير متزامن. ترجع `this.callback`.
### this.cacheable
-A function that sets the cacheable flag:
+دالة تضبط cacheable flag:
```ts
cacheable(flag = true: boolean)
```
-By default, loader results are flagged as cacheable. Call this method passing `false` to make the loader's result not cacheable.
+افتراضيًا، تُعلّم نتائج loader على أنها قابلة للتخزين المؤقت. استدعِ هذه الدالة مع `false` لجعل نتيجة loader غير قابلة للتخزين المؤقت.
-A cacheable loader must have a deterministic result when inputs and dependencies haven't changed. This means the loader shouldn't have dependencies other than those specified with `this.addDependency`.
+يجب أن يعطي cacheable loader نتيجة deterministic عندما لا تتغير inputs وdependencies. هذا يعني أن loader لا ينبغي أن يملك dependencies غير تلك المحددة عبر `this.addDependency`.
### this.callback
-A function that can be called synchronously or asynchronously in order to return multiple results. The expected arguments are:
+دالة يمكن استدعاؤها بشكل متزامن أو غير متزامن لإرجاع عدة نتائج. arguments المتوقعة هي:
```ts
this.callback(
@@ -261,14 +251,14 @@ this.callback(
);
```
-1. The first argument must be an `Error` or `null`
-2. The second argument is a `string` or a [`Buffer`](https://nodejs.org/api/buffer.html).
-3. Optional: The third argument must be a source map that is parsable by [this module](https://github.com/mozilla/source-map).
-4. Optional: The fourth option, ignored by webpack, can be anything (e.g. some metadata).
+1. يجب أن يكون argument الأول `Error` أو `null`.
+2. argument الثاني هو `string` أو [`Buffer`](https://nodejs.org/api/buffer.html).
+3. اختياري: يجب أن يكون argument الثالث source map يمكن قراءتها بواسطة [هذه الحزمة](https://github.com/mozilla/source-map).
+4. اختياري: argument الرابع، الذي يتجاهله webpack، يمكن أن يكون أي شيء، مثل metadata.
-T> It can be useful to pass an abstract syntax tree (AST), like [`ESTree`](https://github.com/estree/estree), as the fourth argument (`meta`) to speed up the build time if you want to share common ASTs between loaders.
+T> قد يكون من المفيد تمرير abstract syntax tree (AST)، مثل [`ESTree`](https://github.com/estree/estree)، كـ argument رابع (`meta`) لتسريع وقت build إذا أردت مشاركة ASTs مشتركة بين loaders.
-In case this function is called, you should return undefined to avoid ambiguous loader results.
+إذا استُدعيت هذه الدالة، فيجب إرجاع undefined لتجنب نتائج loader الغامضة.
### this.clearDependencies
@@ -276,17 +266,17 @@ In case this function is called, you should return undefined to avoid ambiguous
clearDependencies();
```
-Remove all dependencies of the loader result, even initial dependencies and those of other loaders. Consider using `pitch`.
+يزيل كل dependencies الخاصة بنتيجة loader، حتى dependencies الأولية وتلك الخاصة بـ loaders أخرى. فكر في استخدام `pitch`.
### this.context
-**The directory of the module.** Can be used as a context for resolving other stuff.
+**مجلد module.** يمكن استخدامه كـ context لحل أشياء أخرى.
-In [the example](#example-for-the-loader-context): `/abc` because `resource.js` is in this directory
+في [المثال](#example-for-the-loader-context): `/abc` لأن `resource.js` موجود داخل هذا المجلد.
### this.data
-A data object shared between the pitch and the normal phase.
+كائن بيانات مشترك بين مرحلة pitch والمرحلة العادية.
### this.emitError
@@ -294,7 +284,7 @@ A data object shared between the pitch and the normal phase.
emitError(error: Error)
```
-Emit an error that also can be displayed in the output.
+يصدر خطأ يمكن عرضه أيضًا في output.
```bash
ERROR in ./src/lib.js (./src/loader.js!./src/lib.js)
@@ -303,7 +293,7 @@ Here is an Error!
@ ./src/index.js 1:0-25
```
-T> Unlike throwing an Error directly, it will NOT interrupt the compilation process of the current module.
+T> بخلاف رمي Error مباشرة، لن يقطع هذا عملية compilation الخاصة بالـ module الحالي.
### this.emitFile
@@ -311,7 +301,7 @@ T> Unlike throwing an Error directly, it will NOT interrupt the compilation proc
emitFile(name: string, content: Buffer|string, sourceMap: {...})
```
-Emit a file. This is webpack-specific.
+يصدر ملفًا. هذا خاص بـ webpack.
### this.emitWarning
@@ -319,7 +309,7 @@ Emit a file. This is webpack-specific.
emitWarning(warning: Error)
```
-Emit a warning that will be displayed in the output like the following:
+يصدر تحذيرًا سيظهر في output بالشكل التالي:
```bash
WARNING in ./src/lib.js (./src/loader.js!./src/lib.js)
@@ -328,50 +318,50 @@ Here is a Warning!
@ ./src/index.js 1:0-25
```
-T> Note that the warnings will not be displayed if `stats.warnings` is set to `false`, or some other omit setting is used to `stats` such as `none` or `errors-only`. See the [stats presets configuration](/configuration/stats/#stats-presets).
+T> لاحظ أن التحذيرات لن تُعرض إذا تم ضبط `stats.warnings` على `false`، أو إذا استُخدم إعداد omit آخر في `stats` مثل `none` أو `errors-only`. راجع [إعدادات stats presets](/configuration/stats/#stats-presets).
### this.environment
-Check what kind of ES-features may be used in the generated runtime-code.
+يفحص نوع ميزات ES التي يمكن استخدامها في runtime-code المولّد.
-E.g.,
+مثال:
```json
{
- // The environment supports arrow functions ('() => { ... }').
+ // تدعم البيئة arrow functions مثل '() => { ... }'
"arrowFunction": true,
- // The environment supports BigInt as literal (123n).
+ // تدعم البيئة BigInt كقيمة literal مثل 123n
"bigIntLiteral": false,
- // The environment supports const and let for variable declarations.
+ // تدعم البيئة const وlet في تعريف المتغيرات
"const": true,
- // The environment supports destructuring ('{ a, b } = obj').
+ // تدعم البيئة destructuring مثل '{ a, b } = obj'
"destructuring": true,
- // The environment supports an async import() function to import EcmaScript modules.
+ // تدعم البيئة دالة import() غير متزامنة لاستيراد EcmaScript modules
"dynamicImport": false,
- // The environment supports an async import() when creating a worker, only for web targets at the moment.
+ // تدعم البيئة import() غير متزامنة عند إنشاء worker، حاليًا لأهداف web فقط
"dynamicImportInWorker": false,
- // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+ // تدعم البيئة for of مثل 'for (const x of array) { ... }'
"forOf": true,
- // The environment supports 'globalThis'.
+ // تدعم البيئة 'globalThis'
"globalThis": true,
- // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+ // تدعم البيئة صيغة ECMAScript Module لاستيراد modules
"module": false,
- // The environment supports optional chaining ('obj?.a' or 'obj?.()').
+ // تدعم البيئة optional chaining مثل 'obj?.a' أو 'obj?.()'
"optionalChaining": true,
- // The environment supports template literals.
+ // تدعم البيئة template literals
"templateLiteral": true
}
```
### this.fs
-Access to the `compilation`'s `inputFileSystem` property.
+وصول إلى خاصية `inputFileSystem` الخاصة بـ `compilation`.
### this.getOptions(schema)
-Extracts given loader options. Optionally, accepts JSON schema as an argument.
+يستخرج خيارات loader المعطاة. ويمكنه اختياريًا استقبال JSON schema كـ argument.
-T> Since webpack 5, `this.getOptions` is available in loader context. It substitutes `getOptions` method from [loader-utils](https://github.com/webpack/loader-utils#getoptions).
+T> منذ webpack 5، أصبحت `this.getOptions` متاحة في loader context. وهي تستبدل دالة `getOptions` من [loader-utils](https://github.com/webpack/loader-utils#getoptions).
### this.getResolve
@@ -382,21 +372,21 @@ resolve(context: string, request: string, callback: function(err, result: string
resolve(context: string, request: string): Promise
```
-Creates a resolve function similar to [`this.resolve`](#thisresolve).
+ينشئ دالة resolve مشابهة لـ [`this.resolve`](#thisresolve).
-Any options under webpack [`resolve` options](/configuration/resolve/#resolve) are possible. They are merged with the configured `resolve` options. Note that `"..."` can be used in arrays to extend the value from `resolve` options, e.g. `{ extensions: [".sass", "..."] }`.
+يمكن استخدام أي خيارات تحت إعدادات webpack [`resolve`](/configuration/resolve/#resolve). يتم دمجها مع خيارات `resolve` المعرّفة في الإعدادات. لاحظ أن `"..."` يمكن استخدامها داخل arrays لتمديد القيمة القادمة من خيارات `resolve`، مثل `{ extensions: [".sass", "..."] }`.
-`options.dependencyType` is an additional option. It allows us to specify the type of dependency, which is used to resolve `byDependency` from the `resolve` options.
+`options.dependencyType` خيار إضافي. يسمح بتحديد نوع dependency، ويُستخدم لحل `byDependency` من خيارات `resolve`.
-All dependencies of the resolving operation are automatically added as dependencies to the current module.
+كل dependencies الخاصة بعملية resolving تُضاف تلقائيًا كـ dependencies إلى module الحالي.
### this.hot
-Information about HMR for loaders.
+معلومات عن HMR للـ loaders.
```js
export default function (source) {
- console.log(this.hot); // true if HMR is enabled via --hot flag or webpack configuration
+ console.log(this.hot); // true إذا كان HMR مفعّلًا عبر --hot flag أو إعدادات webpack
return source;
}
```
@@ -407,7 +397,7 @@ export default function (source) {
-The encoding to use when generating the hash. See [output.hashDigest](/configuration/output/#outputhashdigest).
+الترميز المستخدم عند توليد hash. راجع [output.hashDigest](/configuration/output/#outputhashdigest).
### this.hashDigestLength
@@ -415,7 +405,7 @@ The encoding to use when generating the hash. See [output.hashDigest](/configura
-The prefix length of the hash digest to use. See [output.hashDigestLength](/configuration/output/#outputhashdigestlength).
+طول prefix الخاص بـ hash digest المراد استخدامه. راجع [output.hashDigestLength](/configuration/output/#outputhashdigestlength).
### this.hashFunction
@@ -423,7 +413,7 @@ The prefix length of the hash digest to use. See [output.hashDigestLength](/conf
-The hashing algorithm to use. See [output.hashFunction](/configuration/output/#outputhashfunction).
+خوارزمية hashing المراد استخدامها. راجع [output.hashFunction](/configuration/output/#outputhashfunction).
### this.hashSalt
@@ -431,7 +421,7 @@ The hashing algorithm to use. See [output.hashFunction](/configuration/output/#o
-An optional salt to update the hash via Node.JS' [`hash.update`](https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding). See [output.hashSalt](/configuration/output/#outputhashsalt).
+salt اختياري لتحديث hash عبر [`hash.update`](https://nodejs.org/api/crypto.html#crypto_hash_update_data_inputencoding) في Node.JS. راجع [output.hashSalt](/configuration/output/#outputhashsalt).
### this.importModule
@@ -439,13 +429,13 @@ An optional salt to update the hash via Node.JS' [`hash.update`](https://nodejs.
`this.importModule(request, options, [callback]): Promise`
-An alternative lightweight solution for the child compiler to compile and execute a request at build time.
+حل بديل خفيف للـ child compiler لتجميع request وتنفيذه وقت build.
-- `request`: the request string to load the module from
+- `request`: نص request لتحميل module منه.
- `options`:
- - `layer`: specify a layer in which this module is placed/compiled
- - `publicPath`: the public path used for the built modules
-- `callback`: an optional Node.js style callback returning the exports of the module or a namespace object for ESM. `importModule` will return a Promise if no callback is provided.
+ - `layer`: يحدد layer التي يوضع أو يُجمّع فيها هذا module.
+ - `publicPath`: public path المستخدم للـ modules المبنية.
+- `callback`: callback اختياري بأسلوب Node.js يرجع exports الخاصة بالـ module أو namespace object لـ ESM. سترجع `importModule` كائن Promise إذا لم يتم تمرير callback.
**webpack.config.js**
@@ -456,7 +446,7 @@ export default {
{
test: /stylesheet\.js$/i,
use: ["./a-pitching-loader.js"],
- type: "asset/source", // we set type to 'asset/source' as the loader will return a string
+ type: "asset/source", // نضبط النوع على 'asset/source' لأن loader سيرجع string
},
],
},
@@ -493,22 +483,22 @@ export const green = "#0f0";
```js
import stylesheet from "./stylesheet.js";
-// stylesheet will be a string `body { background: #f00; color: #0f0; }` at build time
+// ستكون stylesheet نصًا `body { background: #f00; color: #0f0; }` وقت build
```
-You might notice something in the above example:
+قد تلاحظ شيئًا في المثال السابق:
-1. We have a [pitching loader](#pitching-loader),
-2. We use `!=!` syntax in that pitching loader to set [matchResource](#inline-matchresource) for the request, i.e., we'll use `this.resourcePath + '.webpack[javascript/auto]'` to match with the [`module.rules`](/configuration/module/#modulerules) instead of the original resource,
-3. `.webpack[javascript/auto]` is a pseudo extension of the `.webpack[type]` pattern, we use it to specify a default [module type](/configuration/module/#ruletype) when no other module type is specified. It's typically used in conjunction with `!=!` syntax.
+1. لدينا [pitching loader](#pitching-loader).
+2. نستخدم صيغة `!=!` داخل pitching loader لضبط [matchResource](#inline-matchresource) للـ request. أي سنستخدم `this.resourcePath + '.webpack[javascript/auto]'` للمطابقة مع [`module.rules`](/configuration/module/#modulerules) بدل resource الأصلي.
+3. `.webpack[javascript/auto]` امتداد شبه وهمي من نمط `.webpack[type]`. نستخدمه لتحديد [module type](/configuration/module/#ruletype) افتراضي عندما لا يتم تحديد module type آخر. يُستخدم عادةً مع صيغة `!=!`.
-Note that the above example is a simplified one, you can check [the full example on webpack repository](https://github.com/webpack/webpack/tree/master/test/configCases/loader-import-module/css).
+لاحظ أن المثال السابق مبسط. يمكنك مراجعة [المثال الكامل في مستودع webpack](https://github.com/webpack/webpack/tree/master/test/configCases/loader-import-module/css).
### this.loaderIndex
-The index in the loaders array of the current loader.
+الفهرس داخل array الخاصة بـ loaders للـ loader الحالي.
-In [the example](#example-for-the-loader-context): in loader1: `0`, in loader2: `1`
+في [المثال](#example-for-the-loader-context): في loader1 تكون `0`، وفي loader2 تكون `1`.
### this.loadModule
@@ -516,19 +506,19 @@ In [the example](#example-for-the-loader-context): in loader1: `0`, in loader2:
loadModule(request: string, callback: function(err, source, sourceMap, module))
```
-Resolves the given request to a module, applies all configured loaders and calls back with the generated source, the sourceMap and the module instance (usually an instance of [`NormalModule`](https://github.com/webpack/webpack/blob/main/lib/NormalModule.js)). Use this function if you need to know the source code of another module to generate the result.
+يحل request المحدد إلى module، ويطبّق كل loaders المعدة، ثم يستدعي callback مع source المولّد وsourceMap وmodule instance، والتي تكون عادةً instance من [`NormalModule`](https://github.com/webpack/webpack/blob/main/lib/NormalModule.js). استخدم هذه الدالة إذا كنت تحتاج معرفة كود المصدر الخاص بـ module آخر لتوليد النتيجة.
-`this.loadModule` in a loader context uses CommonJS resolve rules by default. Use `this.getResolve` with an appropriate `dependencyType`, e.g. `'esm'`, `'commonjs'` or a custom one before using a different semantic.
+تستخدم `this.loadModule` داخل loader context قواعد resolve الخاصة بـ CommonJS افتراضيًا. استخدم `this.getResolve` مع `dependencyType` مناسب، مثل `'esm'` أو `'commonjs'` أو نوع مخصص، قبل استخدام semantics مختلفة.
### this.loaders
-An array of all the loaders. It is writable in the pitch phase.
+array تحتوي على كل loaders. وهي قابلة للكتابة في مرحلة pitch.
```ts
loaders = [{request: string, path: string, query: string, module: function}]
```
-In [the example](#example-for-the-loader-context):
+في [المثال](#example-for-the-loader-context):
```js
[
@@ -549,20 +539,20 @@ In [the example](#example-for-the-loader-context):
### this.mode
-Read in which [`mode`](/configuration/mode/) webpack is running.
+يقرأ [`mode`](/configuration/mode/) الذي يعمل به webpack.
-Possible values: `'production'`, `'development'`, `'none'`
+القيم الممكنة: `'production'` و`'development'` و`'none'`.
### this.query
-1. If the loader was configured with an [`options`](/configuration/module/#useentry) object, this will point to that object.
-2. If the loader has no `options`, but was invoked with a query string, this will be a string starting with `?`.
+1. إذا كان loader معدًا بكائن [`options`](/configuration/module/#useentry)، فستشير هذه الخاصية إلى ذلك الكائن.
+2. إذا لم يكن لدى loader `options`، لكنه استُدعي بـ query string، فستكون هذه الخاصية نصًا يبدأ بـ `?`.
### this.request
-The resolved request string.
+نص request بعد حله.
-In [the example](#example-for-the-loader-context): `'/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr'`
+في [المثال](#example-for-the-loader-context): `'/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr'`
### this.resolve
@@ -570,55 +560,55 @@ In [the example](#example-for-the-loader-context): `'/abc/loader1.js?xyz!/abc/no
resolve(context: string, request: string, callback: function(err, result: string))
```
-Resolve a request like a require expression.
+يحل request مثل require expression.
-- `context` must be an absolute path to a directory. This directory is used as the starting location for the resolving.
-- `request` is the request to be resolved. Usually either relative requests like `./relative` or module requests like `module/path` are used, but absolute paths like `/some/path` are also possible as requests.
-- `callback` is a normal Node.js-style callback function giving the resolved path.
+- يجب أن يكون `context` مسارًا مطلقًا إلى مجلد. يُستخدم هذا المجلد كنقطة بداية للـ resolving.
+- `request` هو الطلب المراد حله. عادةً تكون الطلبات نسبية مثل `./relative` أو module requests مثل `module/path`، لكن يمكن أيضًا استخدام مسارات مطلقة مثل `/some/path` كـ requests.
+- `callback` دالة callback عادية بأسلوب Node.js تعطي المسار المحلول.
-All dependencies of the resolving operation are automatically added as dependencies to the current module.
+كل dependencies الخاصة بعملية resolving تُضاف تلقائيًا كـ dependencies إلى module الحالي.
### this.resource
-The resource part of the request, including query.
+جزء resource من request، مع query.
-In [the example](#example-for-the-loader-context): `'/abc/resource.js?rrr'`
+في [المثال](#example-for-the-loader-context): `'/abc/resource.js?rrr'`
### this.resourcePath
-The resource file.
+ملف resource.
-In [the example](#example-for-the-loader-context): `'/abc/resource.js'`
+في [المثال](#example-for-the-loader-context): `'/abc/resource.js'`
### this.resourceQuery
-The query of the resource.
+query الخاصة بالـ resource.
-In [the example](#example-for-the-loader-context): `'?rrr'`
+في [المثال](#example-for-the-loader-context): `'?rrr'`
### this.rootContext
-Since webpack 4, the formerly `this.options.context` is provided as `this.rootContext`.
+منذ webpack 4، أصبحت القيمة التي كانت سابقًا `this.options.context` متاحة باسم `this.rootContext`.
### this.sourceMap
-Tells if source map should be generated. Since generating source maps can be an expensive task, you should check if source maps are actually requested.
+يخبرك هل يجب توليد source map أم لا. لأن توليد source maps قد يكون مكلفًا، يجب فحص هل هي مطلوبة فعلًا.
### this.target
-Target of compilation. Passed from configuration options.
+هدف compilation. يُمرر من خيارات الإعداد.
-Example values: `'web'`, `'node'`
+أمثلة للقيم: `'web'` و`'node'`.
### this.utils
-Access to the following utilities.
+وصول إلى الأدوات التالية.
-- `absolutify`: Return a new request string using absolute paths when possible.
-- `contextify`: Return a new request string avoiding absolute paths when possible.
-- `createHash`: Return a new Hash object from provided hash function.
+- `absolutify`: يرجع request string جديدًا باستخدام مسارات مطلقة عندما يكون ذلك ممكنًا.
+- `contextify`: يرجع request string جديدًا يتجنب المسارات المطلقة عندما يكون ذلك ممكنًا.
+- `createHash`: يرجع كائن Hash جديدًا من دالة hash المقدمة.
**my-sync-loader.js**
@@ -641,63 +631,63 @@ export default function (content) {
### this.version
-**Loader API version.** Currently `2`. This is useful for providing backwards compatibility. Using the version you can specify custom logic or fallbacks for breaking changes.
+**إصدار Loader API.** حاليًا `2`. هذا مفيد لتوفير التوافق مع الإصدارات السابقة. باستخدام الإصدار يمكنك تحديد منطق مخصص أو fallbacks للتغييرات الكاسرة.
### this.webpack
-This boolean is set to true when this is compiled by webpack.
+تكون هذه boolean مضبوطة على true عندما يتم التجميع بواسطة webpack.
-T> Loaders were originally designed to also work as Babel transforms. Therefore, if you write a loader that works for both, you can use this property to know if there is access to additional loaderContext and webpack features.
+T> صُممت loaders في الأصل لتعمل أيضًا كتحويلات Babel. لذلك إذا كتبت loader يعمل في الحالتين، يمكنك استخدام هذه الخاصية لمعرفة هل يوجد وصول إلى loaderContext إضافي وميزات webpack.
-## Webpack specific properties
+## خصائص خاصة بـ Webpack
-The loader interface provides all module relate information. However, in rare cases you might need access to the compiler API itself.
+توفر واجهة loader كل المعلومات المتعلقة بـ module. لكن في حالات نادرة قد تحتاج إلى الوصول إلى Compiler API نفسها.
-W> Please note that using these webpack specific properties will have a negative impact on your loaders compatibility.
+W> لاحظ أن استخدام هذه الخصائص الخاصة بـ webpack سيؤثر سلبًا في توافق loader.
-Therefore you should only use them as a last resort. Using them will reduce the portability of your loader.
+لذلك لا تستخدمها إلا كحل أخير. استخدامها يقلل قابلية نقل loader.
### this.\_compilation
-Access to the current Compilation object of webpack.
+وصول إلى كائن Compilation الحالي في webpack.
### this.\_compiler
-Access to the current Compiler object of webpack.
+وصول إلى كائن Compiler الحالي في webpack.
-## Deprecated context properties
+## خصائص context مهملة
-W> The usage of these properties is highly discouraged since we are planning to remove them from the context. They are still listed here for documentation purposes.
+W> لا ننصح باستخدام هذه الخصائص لأننا نخطط لإزالتها من context. ما زالت مذكورة هنا لأغراض التوثيق.
### this.debug
-A boolean flag. It is set when in debug mode.
+boolean flag. يتم ضبطه عند العمل في debug mode.
### this.inputValue
-Passed from the last loader. If you would execute the input argument as a module, consider reading this variable for a shortcut (for performance).
+تُمرر من آخر loader. إذا كنت ستنفذ input argument كـ module، ففكر في قراءة هذا المتغير كاختصار لأسباب أداء.
### this.minimize
-Tells if result should be minimized.
+يخبرك هل يجب تصغير النتيجة أم لا.
### this.value
-Pass values to the next loader. If you know what your result exports if executed as a module, set this value here (as an only element array).
+يمرر قيمًا إلى loader التالي. إذا كنت تعرف ماذا ستصدّر النتيجة عند تنفيذها كـ module، فاضبط هذه القيمة هنا، كـ array تحتوي عنصرًا واحدًا فقط.
### this.\_module
-Hacky access to the Module object being loaded.
+وصول غير رسمي إلى كائن Module الجاري تحميله.
-## Error Reporting
+## الإبلاغ عن الأخطاء
-You can report errors from inside a loader by:
+يمكنك الإبلاغ عن الأخطاء من داخل loader عبر:
-- Using [this.emitError](/api/loaders/#thisemiterror). Will report the errors without interrupting module's compilation.
-- Using `throw` (or other uncaught exception). Throwing an error while a loader is running will cause current module compilation failure.
-- Using `callback` (in async mode). Pass an error to the callback will also cause module compilation failure.
+- استخدام [this.emitError](/api/loaders/#thisemiterror). سيبلّغ عن الأخطاء بدون إيقاف compilation الخاص بالـ module.
+- استخدام `throw` أو أي exception غير ممسوكة. رمي خطأ أثناء تشغيل loader سيؤدي إلى فشل compilation للـ module الحالي.
+- استخدام `callback` في الوضع غير المتزامن. تمرير خطأ إلى callback سيؤدي أيضًا إلى فشل compilation للـ module.
-For example:
+مثال:
**./src/index.js**
@@ -705,7 +695,7 @@ For example:
import "./loader!./lib";
```
-Throwing an error from loader:
+رمي خطأ من loader:
**./src/loader.js**
@@ -715,7 +705,7 @@ export default function (source) {
}
```
-Or pass an error to the callback in async mode:
+أو تمرير خطأ إلى callback في الوضع غير المتزامن:
**./src/loader.js**
@@ -727,7 +717,7 @@ export default function (source) {
}
```
-The module will get bundled like this:
+سيُحزم module بهذا الشكل:
```text
/***/ "./src/loader.js!./src/lib.js":
@@ -742,7 +732,7 @@ throw new Error("Module build failed (from ./src/loader.js):\nError: This is a F
/***/ })
```
-Then the build output will also display the error (Similar to `this.emitError`):
+ثم سيعرض build output الخطأ أيضًا، بشكل مشابه لـ `this.emitError`:
```bash
ERROR in ./src/lib.js (./src/loader.js!./src/lib.js)
@@ -752,30 +742,30 @@ Error: This is a Fatal Error!
@ ./src/index.js 1:0-25
```
-As you can see below, not only error message, but also details about which loader and module are involved:
+كما ترى، لا تعرض الرسالة نص الخطأ فقط، بل تعرض أيضًا تفاصيل عن loader وmodule المعنيين:
-- the module path: `ERROR in ./src/lib.js`
-- the request string: `(./src/loader.js!./src/lib.js)`
-- the loader path: `(from ./src/loader.js)`
-- the caller path: `@ ./src/index.js 1:0-25`
+- مسار module: `ERROR in ./src/lib.js`
+- نص request: `(./src/loader.js!./src/lib.js)`
+- مسار loader: `(from ./src/loader.js)`
+- مسار المستدعي: `@ ./src/index.js 1:0-25`
-W> The loader path in the error is displayed since webpack 4.12
+W> يُعرض مسار loader داخل الخطأ منذ webpack 4.12.
-T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings).
+T> سيتم تسجيل كل الأخطاء والتحذيرات داخل `stats`. راجع [Stats Data](/api/stats/#errors-and-warnings).
## Inline matchResource
-A new inline request syntax was introduced in webpack v4. Prefixing `!=!` to a request will set the `matchResource` for this request.
+أُضيفت صيغة inline request جديدة في webpack v4. إضافة `!=!` قبل request ستضبط `matchResource` لذلك request.
-W> It is not recommended to use this syntax in application code.
-Inline request syntax is intended to only be used by loader generated code.
-Not following this recommendation will make your code webpack-specific and non-standard.
+W> لا يُنصح باستخدام هذه الصيغة داخل كود التطبيق.
+صيغة inline request مخصصة للاستخدام فقط في الكود الذي تولده loaders.
+عدم اتباع هذه التوصية سيجعل كودك خاصًا بـ webpack وغير قياسي.
-T> A relative `matchResource` will resolve relative to the current context of the containing module.
+T> يتم حل `matchResource` النسبي نسبة إلى context الحالي للـ module الذي يحتويه.
-When a `matchResource` is set, it will be used to match with the [`module.rules`](/configuration/module/#modulerules) instead of the original resource. This can be useful if further loaders should be applied to the resource, or if the module type needs to be changed. It's also displayed in the stats and used for matching [`Rule.issuer`](/configuration/module/#ruleissuer) and [`test` in `splitChunks`](/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest).
+عند ضبط `matchResource`، سيُستخدم للمطابقة مع [`module.rules`](/configuration/module/#modulerules) بدل resource الأصلي. يفيد ذلك إذا كان يجب تطبيق loaders إضافية على resource، أو إذا كان نوع module يحتاج إلى تغيير. كما يظهر في stats ويُستخدم لمطابقة [`Rule.issuer`](/configuration/module/#ruleissuer) و[`test` في `splitChunks`](/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest).
-Example:
+مثال:
**file.js**
@@ -784,9 +774,9 @@ Example:
console.log("yep");
```
-A loader could transform the file into the following file and use the `matchResource` to apply the user-specified CSS processing rules:
+يمكن لـ loader تحويل الملف إلى الملف التالي واستخدام `matchResource` لتطبيق قواعد معالجة CSS التي حددها المستخدم:
-**file.js** (transformed by loader)
+**file.js** (تم تحويله بواسطة loader)
```js
import "./file.js.css!=!extract-style-loader/getStyles!./file.js";
@@ -794,9 +784,9 @@ import "./file.js.css!=!extract-style-loader/getStyles!./file.js";
console.log("yep");
```
-This will add a dependency to `extract-style-loader/getStyles!./file.js` and treat the result as `file.js.css`. Because [`module.rules`](/configuration/module/#modulerules) has a rule matching `/\.css$/` and it will apply to this dependency.
+سيضيف هذا dependency إلى `extract-style-loader/getStyles!./file.js` ويعامل النتيجة كأنها `file.js.css`. وبما أن [`module.rules`](/configuration/module/#modulerules) لديها rule تطابق `/\.css$/`، فسيتم تطبيقها على هذا dependency.
-The loader could look like this:
+قد يكون loader بهذا الشكل:
**extract-style-loader/index.js**
@@ -828,8 +818,8 @@ export default function (source) {
## Logging
-Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/infrastructureLogging) is enabled, loaders may log messages which will be printed out in the respective logger format (stats, infrastructure).
+واجهة Logging API متاحة منذ webpack 4.37. عند تفعيل `logging` في [إعدادات stats](/configuration/stats/#statslogging)، أو عند تفعيل [`infrastructure logging`](/configuration/infrastructureLogging)، يمكن لـ loaders تسجيل رسائل تُطبع بتنسيق logger المناسب، سواء stats أو infrastructure.
-- Loaders should prefer to use `this.getLogger()` for logging which is a shortcut to `compilation.getLogger()` with loader path and processed file. This kind of logging is stored to the Stats and formatted accordingly. It can be filtered and exported by the webpack user.
-- Loaders may use `this.getLogger('name')` to get an independent logger with a child name. Loader path and processed file is still added.
-- Loaders may use specific fallback logic for detecting logging support `this.getLogger ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method.
+- يُفضّل أن تستخدم loaders الدالة `this.getLogger()` للتسجيل، وهي اختصار لـ `compilation.getLogger()` مع مسار loader والملف المعالج. هذا النوع من logging يُخزن داخل Stats ويُنسق بناءً عليها. ويمكن لمستخدم webpack فلترته أو تصديره.
+- يمكن لـ loaders استخدام `this.getLogger('name')` للحصول على logger مستقل باسم فرعي. ما زال مسار loader والملف المعالج يضافان.
+- يمكن لـ loaders استخدام fallback خاص لاكتشاف دعم logging، مثل `this.getLogger ? this.getLogger() : console`، لتوفير fallback عند استخدام إصدار webpack قديم لا يدعم دالة `getLogger`.
diff --git a/src/content/api/logging.mdx b/src/content/api/logging.mdx
index 05c54a11a29d..422c31afcfe7 100644
--- a/src/content/api/logging.mdx
+++ b/src/content/api/logging.mdx
@@ -1,32 +1,29 @@
---
-title: Logger Interface
+title: واجهة Logger
sort: 6
contributors:
- - EugeneHlushko
- - wizardofhogwarts
- - chenxsan
- - snitin315
+ - RlxChap2
---
-Logging output is an additional way to display messages to the end users.
+تسجيل الرسائل طريقة إضافية لعرض معلومات مفيدة للمستخدمين أثناء البناء أو عند تحليل نتائجه.
-Webpack logger is available to [loaders](/loaders/) and [plugins](/api/plugins/#logging). Emitting as part of the [Stats](/api/stats/) and configured by the user in [webpack configuration](/configuration/).
+يوفّر webpack logger يمكن استخدامه داخل [loaders](/loaders/) و[plugins](/api/plugins/#logging). ويمكن إخراج هذه الرسائل ضمن [Stats](/api/stats/) أو التحكم بها من خلال [إعدادات webpack](/configuration/).
-Benefits of custom logging API in webpack:
+فوائد logging API المخصص في webpack:
-- Common place to [configure the logging](/configuration/stats/#statslogging) display level
-- Logging output exportable as part of the `stats.json`
-- Stats presets affect logging output
-- Plugins can affect logging capturing and display level
-- When using multiple plugins and loaders they use a common logging solution
-- CLI, UI tools for webpack may choose different ways to display logging
-- webpack core can emit logging output, e.g. timing data
+- مكان موحّد [لضبط مستوى عرض الرسائل](/configuration/stats/#statslogging).
+- إمكانية تصدير رسائل logging ضمن ملف `stats.json`.
+- تأثير stats presets على رسائل logging.
+- قدرة plugins على التأثير في التقاط الرسائل ومستوى عرضها.
+- استخدام حل logging موحد عندما يعمل أكثر من plugin أو loader معًا.
+- إمكانية اختيار CLI أو أدوات UI الخاصة بـ webpack طرقًا مختلفة لعرض الرسائل.
+- قدرة webpack core على إخراج رسائل logging، مثل بيانات التوقيت.
-By introducing webpack logging API we hope to unify the way webpack plugins and loaders emit logs and allow better ways to inspect build problems. Integrated logging solution supports plugins and loaders developers by improving their development experience. Paves the way for non-CLI webpack solutions like dashboards or other UIs.
+من خلال webpack logging API، يحاول webpack توحيد طريقة إخراج logs من plugins وloaders، وتوفير طرق أفضل لفحص مشاكل البناء. هذا الحل المدمج يساعد مطوري plugins وloaders ويحسّن تجربة التطوير، ويمهّد لحلول غير CLI مثل dashboards أو واجهات UI أخرى.
-W> **Avoid noise in the log!** Keep in mind that multiple plugins and loaders are used together. Loaders are usually processing multiple files and are invoked for every file. Choose a logging level as low as possible to keep the log output informative.
+W> **تجنب الضوضاء في السجل.** تذكّر أن عدة plugins وloaders قد تعمل معًا، وأن loaders غالبًا تعالج ملفات كثيرة وتُستدعى لكل ملف. اختر أقل مستوى logging ممكن حتى يبقى السجل مفيدًا وسهل القراءة.
-## Examples of how to get and use webpack logger in loaders and plugins
+## أمثلة لاستخدام webpack logger داخل loaders وplugins
**my-webpack-plugin.js**
@@ -59,35 +56,35 @@ export default function (source) {
}
```
-As you can see from the above `my-webpack-plugin.js` example, there're two types of logging methods,
+كما يظهر في مثال `my-webpack-plugin.js` أعلاه، توجد طريقتان أساسيتان للحصول على logger:
1. `compilation.getLogger`
2. `compiler.getInfrastructureLogger`
-It's advised to use `compilation.getLogger` when plugin/logging is related to the compilation, and they will be stored within the stats. For logging that happens outside the compilation cycle, use `compiler.getInfrastructureLogger` instead.
+ينصح باستخدام `compilation.getLogger` عندما تكون الرسائل مرتبطة بعملية compilation نفسها، لأنها ستُحفظ ضمن stats. أما logging الذي يحدث خارج دورة compilation، فاستخدم له `compiler.getInfrastructureLogger`.
-## Logger methods
+## دوال Logger
-- `logger.error(...)`: for error messages
-- `logger.warn(...)`: for warnings
-- `logger.info(...)`: for **important** information messages. These messages are displayed by default. Only use this for messages that the user really needs to see
-- `logger.log(...)`: for **unimportant** information messages. These messages are displayed only when user had opted-in to see them
-- `logger.debug(...)`: for debugging information. These messages are displayed only when user had opted-in to see debug logging for specific modules
-- `logger.trace()`: to display a stack trace. Displayed like `logger.debug`
-- `logger.group(...)`: to group messages. Displayed collapsed like `logger.log`
-- `logger.groupEnd()`: to end a logging group
-- `logger.groupCollapsed(...)`: to group messages together. Displayed collapsed like `logger.log`. Displayed expanded when logging level is set to `'verbose'` or `'debug'`.
-- `logger.status`: writes a temporary message, setting a new status, overrides the previous one
-- `logger.clear()`: to print a horizontal line. Displayed like `logger.log`
-- `logger.profile(...)`, `logger.profileEnd(...)`: to capture a profile. Delegated to `console.profile` when supported
+- `logger.error(...)`: لرسائل الأخطاء.
+- `logger.warn(...)`: للتحذيرات.
+- `logger.info(...)`: للرسائل المهمة. تظهر هذه الرسائل افتراضيًا، لذلك استخدمها فقط للمعلومات التي يحتاج المستخدم إلى رؤيتها فعلًا.
+- `logger.log(...)`: للرسائل المعلوماتية الأقل أهمية. لا تظهر هذه الرسائل إلا إذا اختار المستخدم عرضها.
+- `logger.debug(...)`: لمعلومات التصحيح. لا تظهر إلا إذا اختار المستخدم تفعيل debug logging لـ modules محددة.
+- `logger.trace()`: لعرض stack trace. تُعرض مثل `logger.debug`.
+- `logger.group(...)`: لتجميع الرسائل. تُعرض مطوية مثل `logger.log`.
+- `logger.groupEnd()`: لإنهاء مجموعة logging.
+- `logger.groupCollapsed(...)`: لتجميع الرسائل معًا. تُعرض مطوية مثل `logger.log`، وتظهر مفتوحة عندما يكون مستوى logging هو `'verbose'` أو `'debug'`.
+- `logger.status`: يكتب رسالة مؤقتة ويضبط status جديدًا بدل السابق.
+- `logger.clear()`: لطباعة خط فاصل. تُعرض مثل `logger.log`.
+- `logger.profile(...)`, `logger.profileEnd(...)`: لالتقاط profile. تُمرر إلى `console.profile` عندما يكون مدعومًا.
## Runtime Logger API
-Runtime logger API is only intended to be used as a development tool, it is not intended to be included in [production mode](/configuration/mode/#mode-production).
+Runtime logger API مخصص للاستخدام كأداة تطوير فقط، وليس المقصود تضمينه في [وضع الإنتاج](/configuration/mode/#mode-production).
-- `import logging from 'webpack/lib/logging/runtime'`: to use the logger in runtime, require it directly from webpack
-- `logging.getLogger('name')`: to get individual logger by name
-- `logging.configureDefaultLogger(...)`: to override the default logger.
+- `import logging from 'webpack/lib/logging/runtime'`: لاستخدام logger وقت التشغيل، استورده مباشرة من webpack.
+- `logging.getLogger('name')`: للحصول على logger مستقل بالاسم.
+- `logging.configureDefaultLogger(...)`: لاستبدال logger الافتراضي.
```js
import logging from "webpack/lib/logging/runtime";
@@ -98,4 +95,4 @@ logging.configureDefaultLogger({
});
```
-- `logging.hooks.log`: to apply Plugins to the runtime logger
+- `logging.hooks.log`: لتطبيق plugins على runtime logger.
diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx
index 673a7f266294..3df792346886 100644
--- a/src/content/api/module-methods.mdx
+++ b/src/content/api/module-methods.mdx
@@ -1,20 +1,9 @@
---
-title: Module Methods
+title: دوال Module
group: Modules
sort: 7
contributors:
- - skipjack
- - sokra
- - fadysamirsadek
- - byzyk
- - debs-obrien
- - wizardofhogwarts
- - EugeneHlushko
- - chenxsan
- - jamesgeorge007
- - WofWca
- - snitin315
- - adriancuadrado
+ - RlxChap2
related:
- title: CommonJS Wikipedia
url: https://en.wikipedia.org/wiki/CommonJS
@@ -22,34 +11,36 @@ related:
url: https://en.wikipedia.org/wiki/Asynchronous_module_definition
---
-This section covers all methods available in code compiled with webpack. When using webpack to bundle your application, you can pick from a variety of module syntax styles including [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015), [CommonJS](https://en.wikipedia.org/wiki/CommonJS), and [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition).
+يغطي هذا القسم كل الدوال المتاحة داخل الكود الذي تم تجميعه بواسطة webpack. عند استخدام webpack لتحزيم تطبيقك، يمكنك الاختيار بين عدة صيغ للـ modules، مثل [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015) و[CommonJS](https://en.wikipedia.org/wiki/CommonJS) و[AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition).
-While webpack supports multiple module syntaxes, we recommend following a single syntax for consistency and to avoid odd behaviors/bugs. Actually webpack would enforce the recommendation for `.mjs` files, `.cjs` files or `.js` files when their nearest parent `package.json` file contains a `"type"` field with a value of either `"module"` or `"commonjs"`. Please pay attention to these enforcements before you read on:
+رغم أن webpack يدعم عدة صيغ للـ modules، فإننا نوصي باتباع صيغة واحدة للمحافظة على الاتساق وتجنب السلوكيات الغريبة أو الأخطاء. في الواقع، يفرض webpack هذه التوصية على ملفات `.mjs` وملفات `.cjs` وملفات `.js` عندما يحتوي أقرب ملف `package.json` أب على حقل `"type"` بقيمة `"module"` أو `"commonjs"`. انتبه لهذه القيود قبل المتابعة:
-- `.mjs` or `.js` with `"type": "module"` in `package.json`
- - No CommonJS allowed, for example, you can't use `require`, `module.exports` or `exports`
- - File extensions are required when importing, e.g, you should use `import './src/App.mjs'` instead of `import './src/App'` (you can disable this enforcement with [`Rule.resolve.fullySpecified`](/configuration/module/#resolvefullyspecified))
-- `.cjs` or `.js` with `"type": "commonjs"` in `package.json`
- - Neither `import` nor `export` is available
-- `.wasm` with `"type": "module"` in `package.json`
- - File extensions are required when importing wasm file
+- ملفات `.mjs` أو `.js` مع `"type": "module"` في `package.json`
+ - لا يُسمح بـ CommonJS، مثل `require` أو `module.exports` أو `exports`.
+ - يجب كتابة امتدادات الملفات عند الاستيراد، مثل استخدام `import './src/App.mjs'` بدل `import './src/App'`. يمكنك تعطيل هذا القيد عبر [`Rule.resolve.fullySpecified`](/configuration/module/#resolvefullyspecified).
+- ملفات `.cjs` أو `.js` مع `"type": "commonjs"` في `package.json`
+ - لا تتوفر `import` ولا `export`.
+- ملفات `.wasm` مع `"type": "module"` في `package.json`
+ - يجب كتابة امتداد الملف عند استيراد ملف wasm.
-## ES6 (Recommended)
+
-Version 2 of webpack supports ES6 module syntax natively, meaning you can use `import` and `export` without a tool like babel to handle this for you. Keep in mind that you will still probably need babel for other ES6+ features. The following methods are supported by webpack:
+## ES6 (موصى به)
+
+يدعم webpack 2 صيغة ES6 modules بشكل أصلي، وهذا يعني أنك تستطيع استخدام `import` و`export` بدون أداة مثل babel للتعامل مع ذلك. مع ذلك، قد تحتاج إلى babel لميزات ES6+ الأخرى. يدعم webpack الدوال التالية:
### import
-Statically `import` the `export`s of another module.
+يستورد `export`s من module آخر بشكل ثابت.
```js
import MyModule from "./my-module.js";
import { NamedExport } from "./other-module.js";
```
-W> The keyword here is **statically**. A normal `import` statement cannot be used dynamically within other logic or contain variables. See the [spec](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) for more information and `import()` below for dynamic usage.
+W> الكلمة المهمة هنا هي **ثابت**. لا يمكن استخدام عبارة `import` العادية بشكل ديناميكي داخل منطق آخر أو مع متغيرات. راجع [المواصفة](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) لمزيد من المعلومات، وراجع `import()` أدناه للاستخدام الديناميكي.
-You can also `import` Data URI:
+يمكنك أيضًا استيراد Data URI:
```js
import "data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7";
@@ -61,7 +52,7 @@ import {
### export
-Export anything as a `default` or named export.
+صدّر أي شيء كـ `default` أو كتصدير مسمى.
```js
// Named exports
@@ -80,43 +71,43 @@ export default {
`function(string path):Promise`
-Dynamically load modules. Calls to `import()` are treated as split points, meaning the requested module and its children are split out into a separate chunk.
+يحمّل modules بشكل ديناميكي. يتعامل webpack مع استدعاءات `import()` كنقاط تقسيم، أي أن module المطلوب وأبناءه يُفصلون داخل chunk مستقل.
-T> The [ES2015 Loader spec](https://whatwg.github.io/loader/) defines `import()` as method to load ES2015 modules dynamically on runtime.
+T> تعرّف [مواصفة ES2015 Loader](https://whatwg.github.io/loader/) الدالة `import()` كطريقة لتحميل ES2015 modules ديناميكيًا وقت التشغيل.
```js
if (module.hot) {
import("lodash").then((_) => {
- // Do something with lodash (a.k.a '_')...
+ // افعل شيئًا باستخدام lodash، المعروف أيضًا باسم '_'
});
}
```
-W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `import()` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تعتمد هذه الميزة داخليًا على [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). إذا استخدمت `import()` مع متصفحات قديمة، فتذكر إضافة shim لـ `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
### Dynamic expressions in import()
-It is not possible to use a fully dynamic import statement, such as `import(foo)`. Because `foo` could potentially be any path to any file in your system or project.
+لا يمكن استخدام عبارة import ديناميكية بالكامل مثل `import(foo)`. السبب أن `foo` قد يكون أي مسار لأي ملف في نظامك أو مشروعك.
-The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included.
-For example, ``import(`./locale/${language}.json`)`` will only bundle all `.json` files in the `./locale` directory and subdirectories into the new chunk and exclude files with other file extensions. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
+يجب أن تحتوي `import()` على قدر من المعلومات عن مكان module. يمكن حصر bundling في مجلد محدد أو مجموعة ملفات محددة، بحيث عند استخدام expression ديناميكي يتم تضمين كل module يمكن طلبه عبر `import()`.
+مثلًا، ``import(`./locale/${language}.json`)`` سيحزم فقط كل ملفات `.json` داخل مجلد `./locale` ومجلداته الفرعية داخل chunk الجديد، وسيستبعد الملفات ذات الامتدادات الأخرى. وقت التشغيل، بعد حساب المتغير `language`، سيكون أي ملف مثل `english.json` أو `german.json` متاحًا للاستخدام.
```js
-// imagine we had a method to get language from cookies or other storage
+// تخيل أن لدينا دالة لمعرفة اللغة من cookies أو تخزين آخر
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
- // do something with the translations
+ // افعل شيئًا بالترجمات
});
```
-T> Using the [`webpackInclude` and `webpackExclude`](/api/module-methods/#magic-comments) options allows you to add regex patterns that reduce the number of files that webpack will bundle for this import.
+T> يسمح استخدام خياري [`webpackInclude` و`webpackExclude`](/api/module-methods/#magic-comments) بإضافة regex patterns تقلل عدد الملفات التي سيحزمها webpack لهذا الاستيراد.
#### Magic Comments
-By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
+عند إضافة comments إلى import، يمكننا فعل أشياء مثل تسمية chunk أو اختيار modes مختلفة. للاطلاع على القائمة الكاملة لهذه magic comments، راجع الكود أدناه ثم شرح وظيفة كل تعليق.
```js
-// Single target
+// هدف واحد
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
@@ -125,7 +116,7 @@ import(
"node:module"
);
-// Multiple possible targets
+// عدة أهداف محتملة
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
@@ -139,15 +130,15 @@ import(
import(/* webpackIgnore: true */ "ignored-module.js");
```
-T> Single line comments (`//`) are also supported. JSDoc comments (`/** */`) are not.
+T> التعليقات ذات السطر الواحد (`//`) مدعومة أيضًا. أما تعليقات JSDoc (`/** */`) فليست مدعومة.
##### webpackIgnore
-**JavaScript Usage**
+**استخدام JavaScript**
-Disables dynamic import parsing when set to `true`.
+يعطل تحليل dynamic import عند ضبطه على `true`.
-When using `import.meta.url`, it does not remain as-is; instead, it gets replaced based on the `baseURI`. For modules, it is replaced with `new URL("./", import.meta.url)`, and for other cases, it defaults to `document.baseURI`. This ensures that relative URLs work correctly, aligning with the base URL context.
+عند استخدام `import.meta.url`، لا يبقى كما هو؛ بل يُستبدل بناءً على `baseURI`. في modules، يُستبدل بـ `new URL("./", import.meta.url)`، وفي الحالات الأخرى تكون القيمة الافتراضية `document.baseURI`. هذا يضمن عمل relative URLs بشكل صحيح، بما يتوافق مع سياق base URL.
```js
import(/* webpackIgnore: true */ "ignored-module.js");
@@ -155,14 +146,14 @@ import(/* webpackIgnore: true */ "ignored-module.js");
new URL(/* webpackIgnore: true */ "./file1.css", import.meta.url);
```
-W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
+W> لاحظ أن ضبط `webpackIgnore` على `true` يعني الخروج من code splitting.
-**CSS Usage**
+**استخدام CSS**
-The `webpackIgnore` comment can control whether webpack processes a specific import or URL reference.
-It works in certain cases out of the box but **doesn’t support all cases** by default due to performance reasons.
+يمكن لتعليق `webpackIgnore` التحكم فيما إذا كان webpack سيعالج import أو مرجع URL محددًا.
+يعمل في حالات معينة مباشرة، لكنه **لا يدعم كل الحالات** افتراضيًا لأسباب تتعلق بالأداء.
-We support `webpackIgnore` in the following cases:
+ندعم `webpackIgnore` في الحالات التالية:
```css
@import /* webpackIgnore: false */ url(./basic.css);
@@ -181,13 +172,13 @@ We support `webpackIgnore` in the following cases:
}
```
-T> For other CSS scenarios, [`css-loader` fully supports `webpackIgnore`](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment), allowing more flexibility if needed.
+T> في سيناريوهات CSS الأخرى، يدعم [`css-loader` خيار `webpackIgnore` بالكامل](/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment)، مما يعطيك مرونة أكبر عند الحاجة.
-**HTML Usage**
+**استخدام HTML**
-When [`experiments.html`](/configuration/experiments/#experimentshtml) is enabled, `webpackIgnore` can be placed as an HTML comment immediately before a tag to skip URL resolution for that tag's `src`, `href`, `srcset`, and similar attributes. The tag is left untouched in the emitted HTML. This mirrors the behavior provided by `html-loader`.
+عند تفعيل [`experiments.html`](/configuration/experiments/#experimentshtml)، يمكن وضع `webpackIgnore` كتعليق HTML مباشرة قبل الوسم لتجاوز حل URL لخصائص مثل `src` و`href` و`srcset` وما شابه. يُترك الوسم كما هو في HTML الصادر. هذا يعكس السلوك الذي يوفره `html-loader`.
```html
@@ -197,17 +188,17 @@ When [`experiments.html`](/configuration/experiments/#experimentshtml) is enable
```
-The magic-comment value is parsed with the same context used by the JS and CSS parsers; non-boolean values emit an `UnsupportedFeatureWarning`.
+تُقرأ قيمة magic-comment بالسياق نفسه المستخدم في parsers الخاصة بـ JS وCSS؛ القيم غير boolean تصدر `UnsupportedFeatureWarning`.
##### webpackChunkName
-A name for the new chunk. Since webpack 2.6.0, the placeholders `[index]` and `[request]` are supported within the given string to an incremented number or the actual resolved filename respectively. Adding this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.
+اسم chunk الجديد. منذ webpack 2.6.0، يتم دعم placeholders `[index]` و`[request]` داخل النص المعطى، حيث تُستبدل برقم متزايد أو باسم الملف المحلول فعليًا على الترتيب. إضافة هذا التعليق تجعل chunk المنفصل يسمى [my-chunk-name].js بدل [id].js.
##### webpackFetchPriority
-Set [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) for specific dynamic imports. It's also possible to set a global default value for all dynamic imports by using the [`module.parser.javascript.dynamicImportFetchPriority`](/configuration/module/#moduleparserjavascriptdynamicimportfetchpriority) option.
+يضبط [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) لاستيرادات ديناميكية محددة. ويمكن أيضًا ضبط قيمة افتراضية عامة لكل dynamic imports باستخدام خيار [`module.parser.javascript.dynamicImportFetchPriority`](/configuration/module/#moduleparserjavascriptdynamicimportfetchpriority).
```js
import(
@@ -218,42 +209,42 @@ import(
##### webpackMode
-Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:
+منذ webpack 2.6.0، يمكن تحديد modes مختلفة لحل dynamic imports. الخيارات التالية مدعومة:
-- `'lazy'` (default): Generates a lazy-loadable chunk for each `import()`ed module.
-- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. ``import(`./locales/${language}.json`)``, where multiple module paths that can potentially be requested.
-- `'eager'`: Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A `Promise` is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to `import()` is made.
-- `'weak'`: Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A `Promise` is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the `Promise` is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.
+- `'lazy'` (الافتراضي): يولد chunk قابلًا للتحميل الكسول لكل module يتم استيراده عبر `import()`.
+- `'lazy-once'`: يولد chunk واحدًا قابلًا للتحميل الكسول يكفي كل استدعاءات `import()`. يتم جلب chunk عند أول استدعاء لـ `import()`، وتستخدم الاستدعاءات اللاحقة الاستجابة الشبكية نفسها. هذا لا يكون منطقيًا إلا في حالة عبارة ديناميكية جزئية، مثل ``import(`./locales/${language}.json`)``، حيث توجد عدة مسارات modules يمكن طلبها.
+- `'eager'`: لا يولد chunk إضافيًا. تُضمّن كل modules داخل chunk الحالي ولا تُرسل طلبات شبكة إضافية. ما زالت الدالة ترجع `Promise` لكنها تكون محلولة مسبقًا. بخلاف static import، لا يُنفّذ module إلا عند استدعاء `import()`.
+- `'weak'`: يحاول تحميل module إذا كانت دالة module قد حُمّلت بطريقة أخرى، مثل أن chunk آخر استوردها أو script يحتوي على module تم تحميله. ما زالت الدالة ترجع `Promise`، لكنها لا تنجح إلا إذا كانت chunks موجودة بالفعل على client. إذا لم يكن module متاحًا، تُرفض `Promise`. لن يتم تنفيذ طلب شبكة أبدًا. هذا مفيد لـ universal rendering عندما تكون chunks المطلوبة مقدمة يدويًا دائمًا في الطلبات الأولية، مثل تضمينها داخل الصفحة، لكنه ليس مناسبًا عندما يؤدي تنقل المستخدم داخل التطبيق إلى import لم يكن مقدمًا أوليًا.
##### webpackPrefetch
-Tells the browser that the resource is probably needed for some navigation in the future. Check out the guide for more information on [how webpackPrefetch works](/guides/code-splitting/#prefetchingpreloading-modules).
+يخبر المتصفح أن resource قد تكون مطلوبة غالبًا في تنقل مستقبلي. راجع الدليل لمزيد من المعلومات عن [طريقة عمل webpackPrefetch](/guides/code-splitting/#prefetchingpreloading-modules).
##### webpackPreload
-Tells the browser that the resource might be needed during the current navigation. Check out the guide for more information on [how webpackPreload works](/guides/code-splitting/#prefetchingpreloading-modules).
+يخبر المتصفح أن resource قد تكون مطلوبة أثناء التنقل الحالي. راجع الدليل لمزيد من المعلومات عن [طريقة عمل webpackPreload](/guides/code-splitting/#prefetchingpreloading-modules).
-T> Note that all options can be combined like so `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. This is wrapped in a JavaScript object and executed using [node VM](https://nodejs.org/dist/latest-v8.x/docs/api/vm.html). You do not need to add curly brackets.
+T> لاحظ أن كل الخيارات يمكن دمجها هكذا: `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. يتم تغليف ذلك داخل كائن JavaScript وتنفيذه باستخدام [node VM](https://nodejs.org/dist/latest-v8.x/docs/api/vm.html). لا تحتاج إلى إضافة الأقواس `{}`.
##### webpackInclude
-A regular expression that will be matched against during import resolution. Only modules that match **will be bundled**.
+تعبير regular expression تتم مطابقته أثناء حل import. فقط modules المطابقة **سيتم حزمها**.
##### webpackExclude
-A regular expression that will be matched against during import resolution. Any module that matches **will not be bundled**.
+تعبير regular expression تتم مطابقته أثناء حل import. أي module يطابقه **لن يتم حزمها**.
-T> Note that `webpackInclude` and `webpackExclude` options do not interfere with the prefix. eg: `./locale`.
+T> لاحظ أن خياري `webpackInclude` و`webpackExclude` لا يتداخلان مع prefix، مثل: `./locale`.
##### webpackExports
-Tells webpack to only bundle the specified exports of a dynamically `import()`ed module. It can decrease the output size of a chunk. Available since [webpack 5.0.0-beta.18](https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.18).
+يخبر webpack بأن يحزم فقط exports المحددة من module المستورد ديناميكيًا عبر `import()`. يمكن أن يقلل حجم output الخاص بـ chunk. متاح منذ [webpack 5.0.0-beta.18](https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.18).
-W> `webpackExports` cannot be used with destructuring assignments.
+W> لا يمكن استخدام `webpackExports` مع destructuring assignments.
## CommonJS
-The goal of CommonJS is to specify an ecosystem for JavaScript outside the browser. The following CommonJS methods are supported by webpack:
+هدف CommonJS هو تحديد منظومة JavaScript خارج المتصفح. يدعم webpack دوال CommonJS التالية:
### require
@@ -261,16 +252,16 @@ The goal of CommonJS is to specify an ecosystem for JavaScript outside the brows
require(dependency: String);
```
-Synchronously retrieve the exports from another module. The compiler will ensure that the dependency is available in the output bundle.
+يجلب exports من module آخر بشكل متزامن. سيضمن compiler توفر dependency داخل output bundle.
```js
import $ from "jquery";
import myModule from "my-module";
```
-It's possible to enable magic comments for `require` as well, see [`module.parser.javascript.commonjsMagicComments`](/configuration/module/#moduleparserjavascriptcommonjsmagiccomments) for more.
+يمكن أيضًا تفعيل magic comments لـ `require`. راجع [`module.parser.javascript.commonjsMagicComments`](/configuration/module/#moduleparserjavascriptcommonjsmagiccomments) للمزيد.
-W> Using it asynchronously may not have the expected effect.
+W> استخدامه بشكل غير متزامن قد لا يعطي الأثر المتوقع.
### require.resolve
@@ -278,39 +269,39 @@ W> Using it asynchronously may not have the expected effect.
require.resolve(dependency: String);
```
-Synchronously retrieve a module's ID. The compiler will ensure that the dependency is available in the output bundle. It is recommended to treat it as an opaque value which can only be used with `require.cache[id]` or `__webpack_require__(id)` (best to avoid such usage).
+يجلب ID الخاص بـ module بشكل متزامن. سيضمن compiler توفر dependency داخل output bundle. يُنصح بالتعامل معه كقيمة opaque لا تُستخدم إلا مع `require.cache[id]` أو `__webpack_require__(id)`، والأفضل تجنب هذا الاستخدام.
-W> Module ID's type can be a `number` or a `string` depending on the [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) configuration.
+W> يمكن أن يكون نوع Module ID رقمًا أو نصًا بحسب إعداد [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids).
-See [`module.id`](/api/module-variables/#moduleid-commonjs) for more information.
+راجع [`module.id`](/api/module-variables/#moduleid-commonjs) لمزيد من المعلومات.
### require.cache
-Multiple requires of the same module result in only one module execution and only one export. Therefore a cache in the runtime exists. Removing values from this cache causes new module execution and a new export.
+عدة استدعاءات `require` للـ module نفسه تؤدي إلى تنفيذ module مرة واحدة فقط وتصدير واحد فقط. لذلك يوجد cache في runtime. إزالة قيم من هذا cache تؤدي إلى تنفيذ جديد للـ module وتصدير جديد.
-W> This is only needed in rare cases for compatibility!
+W> هذا مطلوب فقط في حالات توافق نادرة.
```js
import d1 from "dependency";
-// In ESM, module caching is handled automatically.
-// Manual cache deletion like in CommonJS is not supported.
+// في ESM، تتم إدارة module caching تلقائيًا.
+// حذف cache يدويًا كما في CommonJS غير مدعوم.
if (import.meta.webpackHot) {
import.meta.webpackHot.accept("dependency", (newModule) => {
- // Handle module update here
+ // تعامل مع تحديث module هنا
});
}
```
```js
// in file.js
-// In ESM, manual cache manipulation is not supported.
-// Webpack handles module caching internally.
+// في ESM، التلاعب اليدوي بالـ cache غير مدعوم.
+// يتعامل webpack مع module caching داخليًا.
```
### require.ensure
-W> `require.ensure()` is specific to webpack and superseded by `import()`.
+W> `require.ensure()` خاص بـ webpack واستُبدل عمليًا بـ `import()`.
```ts
require.ensure(
@@ -321,9 +312,9 @@ require.ensure(
)
```
-Split out the given `dependencies` to a separate bundle that will be loaded asynchronously. When using CommonJS module syntax, this is the only way to dynamically load dependencies. Meaning, this code can be run within execution, only loading the `dependencies` if certain conditions are met.
+يفصل `dependencies` المحددة إلى bundle مستقل يتم تحميله بشكل غير متزامن. عند استخدام صيغة CommonJS modules، هذه هي الطريقة الوحيدة لتحميل dependencies ديناميكيًا. أي يمكن تشغيل هذا الكود أثناء التنفيذ، ولا تُحمّل `dependencies` إلا إذا تحققت شروط معينة.
-W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `require.ensure` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تعتمد هذه الميزة داخليًا على [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). إذا استخدمت `require.ensure` مع متصفحات قديمة، فتذكر إضافة shim لـ `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
```js
const a = require("normal-dep");
@@ -331,26 +322,26 @@ const a = require("normal-dep");
if (module.hot) {
import("b").then(() => {
import("c").then((c) => {
- // Do something special...
+ // افعل شيئًا خاصًا...
});
});
}
```
-The following parameters are supported in the order specified above:
+parameters التالية مدعومة بالترتيب الموضح أعلاه:
-- `dependencies`: An array of strings declaring all modules required for the code in the `callback` to execute.
-- `callback`: A function that webpack will execute once the dependencies are loaded. An implementation of the `require` function is sent as a parameter to this function. The function body can use this to further `require()` modules it needs for execution.
-- `errorCallback`: A function that is executed when webpack fails to load the dependencies.
-- `chunkName`: A name given to the chunk created by this particular `require.ensure()`. By passing the same `chunkName` to various `require.ensure()` calls, we can combine their code into a single chunk, resulting in only one bundle that the browser must load.
+- `dependencies`: array من strings تعلن كل modules المطلوبة لتنفيذ الكود داخل `callback`.
+- `callback`: دالة ينفذها webpack بعد تحميل dependencies. يتم إرسال implementation لدالة `require` كـ parameter إلى هذه الدالة. يمكن لجسم الدالة استخدامه لاستدعاء `require()` لأي modules إضافية يحتاجها للتنفيذ.
+- `errorCallback`: دالة تُنفّذ عندما يفشل webpack في تحميل dependencies.
+- `chunkName`: اسم يُعطى للـ chunk الذي ينشئه استدعاء `require.ensure()` هذا. عبر تمرير `chunkName` نفسه لعدة استدعاءات `require.ensure()`، يمكن دمج كودها داخل chunk واحد، مما ينتج bundle واحدًا فقط يحتاج المتصفح إلى تحميله.
-W> Although the implementation of `require` is passed as an argument to the `callback` function, using an arbitrary name e.g. `require.ensure([], function(request) { request('someModule'); })` isn't handled by webpack's static parser. Use `require` instead, e.g. `require.ensure([], function(require) { require('someModule'); })`.
+W> رغم أن implementation الخاص بـ `require` يُمرر كـ argument إلى دالة `callback`، فإن استخدام اسم عشوائي مثل `require.ensure([], function(request) { request('someModule'); })` لا يتعامل معه parser الثابت في webpack. استخدم `require` بدلًا من ذلك، مثل: `require.ensure([], function(require) { require('someModule'); })`.
## AMD
-W> These syntaxes are legacy. We highly recommend using ES6 Modules for modern applications.
+W> هذه الصيغ قديمة. نوصي بشدة باستخدام ES6 Modules في التطبيقات الحديثة.
-Asynchronous Module Definition (AMD) is a JavaScript specification that defines an interface for writing and loading modules. The following AMD methods are supported by webpack:
+Asynchronous Module Definition (AMD) هي مواصفة JavaScript تحدد واجهة لكتابة modules وتحميلها. يدعم webpack دوال AMD التالية:
### define (with factory)
@@ -358,21 +349,21 @@ Asynchronous Module Definition (AMD) is a JavaScript specification that defines
define([name: String], [dependencies: String[]], factoryMethod: function(...))
```
-If `dependencies` are provided, `factoryMethod` will be called with the exports of each dependency (in the same order). If `dependencies` are not provided, `factoryMethod` is called with `require`, `exports` and `module` (for compatibility!). If this function returns a value, this value is exported by the module. The compiler ensures that each dependency is available.
+إذا تم توفير `dependencies`، فسيتم استدعاء `factoryMethod` مع exports الخاصة بكل dependency بالترتيب نفسه. إذا لم يتم توفير `dependencies`، فسيتم استدعاء `factoryMethod` مع `require` و`exports` و`module` لأسباب توافقية. إذا أرجعت هذه الدالة قيمة، فسيتم تصدير تلك القيمة من module. يضمن compiler توفر كل dependency.
-W> Note that webpack ignores the `name` argument.
+W> لاحظ أن webpack يتجاهل argument المسمى `name`.
```js
define(["jquery", "my-module"], ($, myModule) =>
- // Do something with $ and myModule...
+ // افعل شيئًا باستخدام $ وmyModule...
- // Export a function
+ // صدّر دالة
function doSomething() {
// ...
});
```
-W> This CANNOT be used in an asynchronous function.
+W> لا يمكن استخدام هذا داخل دالة غير متزامنة.
### define (with value)
@@ -380,7 +371,7 @@ W> This CANNOT be used in an asynchronous function.
define(value: !Function)
```
-This will export the provided `value`. The `value` here can be anything except a function.
+سيصدّر هذا `value` المقدمة. يمكن أن تكون `value` هنا أي شيء باستثناء دالة.
```js
define({
@@ -388,7 +379,7 @@ define({
});
```
-W> This CANNOT be used in an async function.
+W> لا يمكن استخدام هذا داخل دالة async.
### require (amd-version)
@@ -396,49 +387,49 @@ W> This CANNOT be used in an async function.
require(dependencies: String[], [callback: function(...)])
```
-Similar to `require.ensure`, this will split the given `dependencies` into a separate bundle that will be loaded asynchronously. The `callback` will be called with the exports of each dependency in the `dependencies` array.
+بشكل مشابه لـ `require.ensure`، ستُفصل `dependencies` المحددة إلى bundle مستقل يتم تحميله بشكل غير متزامن. سيتم استدعاء `callback` مع exports الخاصة بكل dependency داخل array المسماة `dependencies`.
-W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use AMD with older browsers (e.g. Internet Explorer 11), remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
+W> تعتمد هذه الميزة داخليًا على [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). إذا استخدمت AMD مع متصفحات قديمة، مثل Internet Explorer 11، فتذكر إضافة shim لـ `Promise` باستخدام polyfill مثل [es6-promise](https://github.com/stefanpenner/es6-promise) أو [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
```js
import("b").then((b) => {
import("c").then((c) => {
- // b और c का इस्तेमाल करें
+ // استخدم b و c
});
});
```
-W> There is no option to provide a chunk name.
+W> لا يوجد خيار لتوفير اسم chunk.
## Labeled Modules
-W> These syntaxes are legacy. We highly recommend using ES6 Modules for modern applications.
+W> هذه الصيغ قديمة. نوصي بشدة باستخدام ES6 Modules في التطبيقات الحديثة.
-The internal `LabeledModulesPlugin` enables you to use the following methods for exporting and requiring within your modules:
+يفعّل `LabeledModulesPlugin` الداخلي استخدام الدوال التالية للتصدير والطلب داخل modules:
### export label
-Export the given `value`. The label can occur before a function declaration or a variable declaration. The function name or variable name is the identifier under which the value is exported.
+يصدّر `value` المحددة. يمكن أن تأتي label قبل function declaration أو variable declaration. يكون اسم الدالة أو اسم المتغير هو identifier الذي تُصدر تحته القيمة.
```ts
export: const answer = 42;
export: function method(value) {
- // Do something...
+ // افعل شيئًا...
};
```
-W> Using it in an async function may not have the expected effect.
+W> استخدامه داخل دالة async قد لا يعطي الأثر المتوقع.
### require label
-Make all exports from the dependency available in the current scope. The `require` label can occur before a string. The dependency must export values with the `export` label. CommonJS or AMD modules cannot be consumed.
+يجعل كل exports من dependency متاحة داخل النطاق الحالي. يمكن أن تظهر label الخاصة بـ `require` قبل string. يجب أن تصدّر dependency القيم باستخدام label الخاصة بـ `export`. لا يمكن استهلاك CommonJS أو AMD modules بهذه الطريقة.
**some-dependency.js**
```ts
export: const answer = 42;
export: function method(value) {
- // Do something...
+ // افعل شيئًا...
};
```
@@ -450,20 +441,20 @@ method(...);
## Webpack
-Aside from the module syntaxes described above, webpack also allows a few custom, webpack-specific methods:
+إلى جانب صيغ modules الموضحة أعلاه، يسمح webpack أيضًا بعدة دوال مخصصة خاصة به:
### require.context
```ts
require.context(
(directory: String),
- (includeSubdirs: Boolean) /* optional, default true */,
- (filter: RegExp) /* optional, default /^\.\/.*$/, any file */,
- (mode: String) /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
+ (includeSubdirs: Boolean) /* اختياري، الافتراضي true */,
+ (filter: RegExp) /* اختياري، الافتراضي /^\.\/.*$/ أي ملف */,
+ (mode: String) /* اختياري، 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'، الافتراضي 'sync' */
);
```
-Specify a whole group of dependencies using a path to the `directory`, an option to `includeSubdirs`, a `filter` for more fine grained control of the modules included, and a `mode` to define the way how loading will work. Underlying modules can then be resolved later on:
+حدد مجموعة كاملة من dependencies باستخدام مسار إلى `directory`، وخيار `includeSubdirs`، و`filter` للتحكم الأدق في modules المضمنة، و`mode` لتحديد طريقة التحميل. يمكن بعد ذلك حل modules الأساسية لاحقًا:
```js
const context = import.meta.webpackContext("components", {
@@ -473,7 +464,7 @@ const context = import.meta.webpackContext("components", {
const componentA = context.resolve("componentA");
```
-If `mode` is set to `'lazy'`, the underlying modules will be loaded asynchronously:
+إذا تم ضبط `mode` على `'lazy'`، فسيتم تحميل modules الأساسية بشكل غير متزامن:
```js
const context = import.meta.webpackContext("locales", {
@@ -482,11 +473,11 @@ const context = import.meta.webpackContext("locales", {
mode: "lazy",
});
context("localeA").then((locale) => {
- // do something with locale
+ // افعل شيئًا باستخدام locale
});
```
-The full list of available modes and their behavior is described in [`import()`](#import-1) documentation.
+القائمة الكاملة للـ modes المتاحة وسلوكها موضحة في توثيق [`import()`](#import-1).
### require.include
@@ -494,49 +485,49 @@ The full list of available modes and their behavior is described in [`import()`]
require.include((dependency: String));
```
-Include a `dependency` without executing it. This can be used for optimizing the position of a module in the output chunks.
+يضمّن `dependency` بدون تنفيذه. يمكن استخدام ذلك لتحسين موضع module داخل output chunks.
```js
import("a");
import("b");
import("c").then((moduleC) => {
- // Use moduleC here
+ // استخدم moduleC هنا
});
```
-This will result in the following output:
+سينتج عن ذلك output التالي:
-- entry chunk: `file.js` and `a`
-- anonymous chunk: `b`
-- anonymous chunk: `c`
+- entry chunk: `file.js` و`a`.
+- anonymous chunk: `b`.
+- anonymous chunk: `c`.
-Without `require.include('a')` it would be duplicated in both anonymous chunks.
+بدون `require.include('a')` كان سيتم تكراره في كلا anonymous chunks.
### require.resolveWeak
-Similar to `require.resolve`, but this won't pull the `module` into the bundle. It's what is considered a "weak" dependency.
+يشبه `require.resolve`، لكنه لا يسحب `module` إلى bundle. هذا ما يُعد dependency "ضعيفًا".
```js
if (__webpack_modules__[require.resolveWeak("module")]) {
- // Do something when module is available...
+ // افعل شيئًا عندما يكون module متاحًا...
}
if (require.cache[require.resolveWeak("module")]) {
- // Do something when module was loaded before...
+ // افعل شيئًا عندما يكون module قد حُمّل سابقًا...
}
-// You can perform dynamic resolves ("context")
-// similarly to other require/import methods.
+// يمكنك تنفيذ resolves ديناميكية "context"
+// بطريقة مشابهة لدوال require/import الأخرى.
const page = "Foo";
__webpack_modules__[require.resolveWeak(`./page/${page}`)];
```
-T> `require.resolveWeak` is the foundation of _universal rendering_ (SSR + Code Splitting), as used in packages such as [react-universal-component](https://github.com/faceyspacey/react-universal-component). It allows code to render synchronously on both the server and initial page-loads on the client. It requires that chunks are manually served or somehow available. It's able to require modules without indicating they should be bundled into a chunk. It's used in conjunction with `import()` which takes over when user navigation triggers additional imports.
+T> `require.resolveWeak` هو أساس _universal rendering_، أي SSR + Code Splitting، كما في حزم مثل [react-universal-component](https://github.com/faceyspacey/react-universal-component). يسمح للكود بأن يرندر بشكل متزامن على الخادم وعند أول تحميل للصفحة على العميل. يتطلب أن تكون chunks مقدمة يدويًا أو متاحة بطريقة ما. يستطيع طلب modules بدون الإشارة إلى أنه يجب حزمها داخل chunk. ويُستخدم مع `import()` التي تتولى الأمر عندما يؤدي تنقل المستخدم إلى imports إضافية.
### warning
-If the module source contains a require that cannot be statically analyzed, critical dependencies warning is emitted.
+إذا كان مصدر module يحتوي على require لا يمكن تحليله بشكل ثابت، فسيصدر تحذير critical dependencies.
-Example code:
+مثال:
```js
someFn(require);
diff --git a/src/content/api/module-variables.mdx b/src/content/api/module-variables.mdx
index 14ab60d100c9..7f6e3919f0aa 100644
--- a/src/content/api/module-variables.mdx
+++ b/src/content/api/module-variables.mdx
@@ -1,19 +1,9 @@
---
-title: Module Variables
+title: متغيرات Module
group: Modules
sort: 8
contributors:
- - skipjack
- - sokra
- - ahmehri
- - tbroadley
- - byzyk
- - EugeneHlushko
- - wizardofhogwarts
- - anikethsaha
- - chenxsan
- - jamesgeorge007
- - snitin315
+ - RlxChap2
related:
- title: CommonJS
url: https://en.wikipedia.org/wiki/CommonJS
@@ -21,19 +11,21 @@ related:
url: https://en.wikipedia.org/wiki/Asynchronous_module_definition
---
-This section covers all **variables** available in code compiled with webpack. Modules will have access to certain data from the compilation process through `module` and other variables.
+يغطي هذا القسم كل **المتغيرات** المتاحة داخل الكود الذي تم تجميعه بواسطة webpack. تستطيع modules الوصول إلى بعض بيانات عملية compilation عبر `module` ومتغيرات أخرى.
## module.loaded (NodeJS)
-This is `false` if the module is currently executing, and `true` if the sync execution has finished.
+تكون قيمته `false` إذا كان module يُنفّذ حاليًا، وتكون `true` إذا اكتمل التنفيذ المتزامن.
-## module.hot (webpack-specific)
+
-Indicates whether or not [Hot Module Replacement](/concepts/hot-module-replacement) is enabled and provides an interface to the process. See the [HMR API page](/api/hot-module-replacement) for details.
+## module.hot (خاص بـ webpack)
+
+يوضح ما إذا كانت [Hot Module Replacement](/concepts/hot-module-replacement) مفعّلة أم لا، ويوفر واجهة للتعامل معها. راجع صفحة [HMR API](/api/hot-module-replacement) للتفاصيل.
## module.id (CommonJS)
-The ID of the current module.
+معرّف module الحالي.
```js
console.log(import.meta.url);
@@ -41,19 +33,19 @@ console.log(import.meta.url);
## export default
-Defines the value that will be returned when a consumer makes a `import` call to the module (defaults to a new object).
+يحدد القيمة التي سترجع عندما يستورد مستخدم آخر هذا module باستخدام `import`. القيمة الافتراضية تكون كائنًا جديدًا.
```js
export default function doSomething() {
- // Do something...
+ // افعل شيئًا...
}
```
-W> This CANNOT be used in an asynchronous function.
+W> لا يمكن استخدام هذا داخل دالة غير متزامنة.
## exports (CommonJS)
-Named exports allow you to export multiple variables, functions, or objects from a single module. Unlike a default export, you must use the exact name when importing these values.
+تسمح named exports بتصدير عدة متغيرات أو دوال أو كائنات من module واحد. بخلاف default export، يجب استخدام الاسم نفسه تمامًا عند استيراد هذه القيم.
```js
export const someValue = 42;
@@ -61,70 +53,70 @@ export const anObject = {
x: 123,
};
export function doSomething() {
- // Do something
+ // افعل شيئًا
}
```
## global (NodeJS)
-See [node.js global](https://nodejs.org/api/globals.html#globals_global).
+راجع [global في node.js](https://nodejs.org/api/globals.html#globals_global).
-For compatibility reasons webpack polyfills the `global` variable by default.
+لأسباب توافقية، يضيف webpack polyfill للمتغير `global` افتراضيًا.
## \_\_dirname (NodeJS)
-Depending on the configuration option `node.__dirname`:
+بحسب خيار الإعداد `node.__dirname`:
-- `false`: Not defined
-- `mock`: equal to `'/'`
-- `true`: [node.js \_\_dirname](https://nodejs.org/api/globals.html#globals_dirname)
+- `false`: غير معرّف.
+- `mock`: يساوي `'/'`.
+- `true`: [\_\_dirname في node.js](https://nodejs.org/api/globals.html#globals_dirname).
-If used inside an expression that is parsed by the Parser, the configuration option is treated as `true`.
+إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه `true`.
## import.meta
-The `import.meta` exposes context-specific metadata to a JavaScript module, such as the URL of the module. It is only available in [ESM](/guides/ecma-script-modules/).
+يعرض `import.meta` بيانات وصفية مرتبطة بسياق JavaScript module، مثل URL الخاص بالـ module. وهو متاح فقط في [ESM](/guides/ecma-script-modules/).
-Please note that webpack does not support direct access to `import.meta`. Instead, you should access its properties or use destructuring assignment. E.g.,
+انتبه إلى أن webpack لا يدعم الوصول المباشر إلى `import.meta`. بدلًا من ذلك، استخدم خصائصه أو استخدم destructuring assignment. مثلًا:
```js
-// webpack will warn about this
+// سيعرض webpack تحذيرًا لهذا الاستخدام
Object.keys(import.meta);
-// fine to use
+// هذا الاستخدام صحيح
console.log(import.meta.url);
const { url } = import.meta;
```
### import.meta.url
-Returns the absolute `file:` URL of the module.
+ترجع URL مطلقًا بصيغة `file:` للـ module.
**src/index.js**
```js
-console.log(import.meta.url); // output something like `file:///path/to/your/project/src/index.js`
+console.log(import.meta.url); // يخرج شيئًا مثل `file:///path/to/your/project/src/index.js`
```
### import.meta.webpack
-Returns the webpack version.
+ترجع إصدار webpack.
**src/index.js**
```js
-console.log(import.meta.webpack); // output `5` for webpack 5
+console.log(import.meta.webpack); // يخرج `5` في webpack 5
```
### import.meta.webpackHot
-Webpack specific. An alias for [`module.hot`](#modulehot-webpack-specific), however `import.meta.webpackHot` can be used in [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm) while `module.hot` can't.
+خاص بـ webpack. هو alias لـ [`module.hot`](#modulehot-webpack-specific)، لكن يمكن استخدام `import.meta.webpackHot` داخل [strict ESM](/guides/ecma-script-modules/#flagging-modules-as-esm)، بينما لا يمكن استخدام `module.hot` هناك.
### import.meta.webpackContext
-Returns the same value as `require.context` but only for `javascript/auto` and `javascript/esm`.
+ترجع القيمة نفسها التي ترجعها `require.context`، لكنها تعمل فقط مع `javascript/auto` و`javascript/esm`.
-- Type:
+- النوع:
```ts
(
@@ -143,8 +135,8 @@ Returns the same value as `require.context` but only for `javascript/auto` and `
) => webpack.Context;
```
-- Available: 5.70.0+
-- Example:
+- متاح منذ: 5.70.0+
+- مثال:
```js
const contextRequire = import.meta.webpackContext(".", {
@@ -159,27 +151,27 @@ Returns the same value as `require.context` but only for `javascript/auto` and `
-Returns a boolean indicating whether the current module is an entry point.
+ترجع boolean يوضح ما إذا كان module الحالي هو entry point.
-**src/index.js** (entry point)
+**src/index.js** (نقطة entry)
```js
console.log(import.meta.main); // true
```
-**src/utils.js** (not an entry point)
+**src/utils.js** (ليس نقطة entry)
```js
console.log(import.meta.main); // false
```
-This is useful for conditional logic that should only run in entry modules, similar to Node.js's `require.main === module` check.
+هذا مفيد للمنطق الشرطي الذي يجب أن يعمل فقط داخل entry modules، بطريقة تشبه فحص `require.main === module` في Node.js.
### import.meta.env
-Access environment variables from multiple sources. `import.meta.env` is an object that behaves similarly to `process.env`, allowing you to access environment variables defined through various webpack plugins and configuration options.
+تسمح بالوصول إلى environment variables من مصادر متعددة. `import.meta.env` هو object يتصرف بطريقة قريبة من `process.env`، مما يتيح لك الوصول إلى متغيرات البيئة المعرّفة عبر plugins وإعدادات webpack المختلفة.
**webpack.config.js**
@@ -187,16 +179,16 @@ Access environment variables from multiple sources. `import.meta.env` is an obje
import webpack from "webpack";
export default {
- mode: "production", // NODE_ENV is automatically set to "production"
+ mode: "production", // يتم ضبط NODE_ENV تلقائيًا إلى "production"
dotenv: {
- prefix: "WEBPACK_", // Only expose variables with WEBPACK_ prefix
+ prefix: "WEBPACK_", // اكشف فقط المتغيرات التي تبدأ بالبادئة WEBPACK_
},
plugins: [
- // EnvironmentPlugin exposes variables from process.env
+ // يكشف EnvironmentPlugin المتغيرات من process.env
new webpack.EnvironmentPlugin({
API_URL: "https://api.example.com",
}),
- // DefinePlugin allows custom definitions
+ // يسمح DefinePlugin بتعريفات مخصصة
new webpack.DefinePlugin({
"import.meta.env.CUSTOM_VAR": JSON.stringify("custom_value"),
}),
@@ -207,55 +199,57 @@ export default {
**src/index.js**
```js
-// Access environment variables
-console.log(import.meta.env.NODE_ENV); // "production" (from mode)
-console.log(import.meta.env.API_URL); // Value from EnvironmentPlugin or process.env
-console.log(import.meta.env.CUSTOM_VAR); // "custom_value" (from DefinePlugin)
+// الوصول إلى environment variables
+console.log(import.meta.env.NODE_ENV); // "production" من mode
+console.log(import.meta.env.API_URL); // قيمة من EnvironmentPlugin أو process.env
+console.log(import.meta.env.CUSTOM_VAR); // "custom_value" من DefinePlugin
-// Type checking
+// فحص النوع
console.log(typeof import.meta.env); // "object"
-// Truthy check
+// فحص truthy
if (import.meta.env) {
- // import.meta.env is truthy
+ // import.meta.env قيمته truthy
}
-// Accessing non-existent properties returns undefined
+// الوصول إلى خصائص غير موجودة يرجع undefined
if (!import.meta.env.NOT_EXIST) {
- // NOT_EXIST is undefined/falsy
+ // NOT_EXIST تساوي undefined/falsy
}
-// Destructuring assignment
+// destructuring assignment
const { NODE_ENV, API_URL } = import.meta.env;
```
-**Sources of environment variables:**
+**مصادر environment variables:**
-1. **`mode` option**: Automatically sets `import.meta.env.NODE_ENV` based on the webpack mode (`development`, `production`, or `none`).
+1. **خيار `mode`**: يضبط `import.meta.env.NODE_ENV` تلقائيًا بناءً على وضع webpack، مثل `development` أو `production` أو `none`.
-2. **[`EnvironmentPlugin`](/plugins/environment-plugin)**: Exposes variables from `process.env` or provides default values.
+2. **[`EnvironmentPlugin`](/plugins/environment-plugin)**: يكشف المتغيرات من `process.env` أو يوفر قيمًا افتراضية.
-3. **[`DotenvPlugin`](/configuration/dotenv)**: Loads variables from `.env` files. Only variables with the specified prefix (default: `WEBPACK_`) are exposed.
+3. **[`DotenvPlugin`](/configuration/dotenv)**: يحمّل المتغيرات من ملفات `.env`. لا تُكشف إلا المتغيرات التي تملك البادئة المحددة، والقيمة الافتراضية هي `WEBPACK_`.
-4. **[`DefinePlugin`](/plugins/define-plugin)**: Allows custom definitions using the `"import.meta.env.*"` pattern.
+4. **[`DefinePlugin`](/plugins/define-plugin)**: يسمح بتعريفات مخصصة باستخدام النمط `"import.meta.env.*"`.
-T> Variables from different sources are merged together. If the same variable is defined in multiple sources, the order of precedence depends on plugin execution order.
+T> يتم دمج المتغيرات من المصادر المختلفة معًا. إذا عُرّف المتغير نفسه في أكثر من مصدر، فترتيب الأولوية يعتمد على ترتيب تنفيذ plugins.
-T> `import.meta.env` behaves like `process.env` - it's an object, supports `typeof` checks, and accessing non-existent properties returns `undefined`.
+T> يتصرف `import.meta.env` مثل `process.env`: هو object، ويدعم فحوصات `typeof`، والوصول إلى خصائص غير موجودة يرجع `undefined`.
## \_\_filename (NodeJS)
-Depending on the configuration option `node.__filename`:
+بحسب خيار الإعداد `node.__filename`:
+
+- `false`: غير معرّف.
+- `mock`: يساوي `'/index.js'`.
+- `true`: [\_\_filename في node.js](https://nodejs.org/api/globals.html#globals_filename).
-- `false`: Not defined
-- `mock`: equal to `'/index.js'`
-- `true`: [node.js \_\_filename](https://nodejs.org/api/globals.html#globals_filename)
+إذا استُخدم داخل expression تتم قراءته بواسطة Parser، فسيتم التعامل مع خيار الإعداد كأنه `true`.
-If used inside an expression that is parsed by the Parser, the configuration option is treated as `true`.
+
-## \_\_resourceQuery (webpack-specific)
+## \_\_resourceQuery (خاص بـ webpack)
-The resource query of the current module. If the following `import` call was made, then the query string would be available in `file.js`.
+يمثل resource query الخاص بالـ module الحالي. إذا كان لديك الاستدعاء التالي، فستكون query string متاحة داخل `file.js`.
```js
import "file.js?test";
@@ -267,23 +261,29 @@ import "file.js?test";
__resourceQuery === "?test";
```
-## \_\_webpack_public_path\_\_ (webpack-specific)
+
+
+## \_\_webpack_public_path\_\_ (خاص بـ webpack)
+
+يساوي خيار الإعداد `output.publicPath`.
-Equals the configuration option's `output.publicPath`.
+
-## \_\_webpack_require\_\_ (webpack-specific)
+## \_\_webpack_require\_\_ (خاص بـ webpack)
-The raw require function. This expression isn't parsed by the Parser for dependencies.
+دالة `require` الخام. لا يقرأ Parser هذا التعبير لاستخراج dependencies.
-W> When webpack bundles are bundled again (e.g., when a previously bundled output is used as input), the [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) will rename `__webpack_require__` from the previous bundle to avoid conflicts (e.g., `__nested_webpack_require_*`). In such cases, use [`__webpack_global__`](#__webpack_global__-webpack-specific) instead, which ensures you can always access the current compilation's `__webpack_require__` function.
+W> عندما تُحزّم bundles الخاصة بـ webpack مرة أخرى، مثل استخدام output محزّم سابقًا كـ input، سيعيد [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) تسمية `__webpack_require__` القادم من bundle السابق لتجنب التعارضات، مثل `__nested_webpack_require_*`. في هذه الحالات، استخدم [`__webpack_global__`](#__webpack_global__-webpack-specific) بدلًا منه، فهو يضمن الوصول دائمًا إلى دالة `__webpack_require__` الخاصة بالـ compilation الحالي.
-## \_\_webpack_chunk_load\_\_ (webpack-specific)
+
-The internal chunk loading function. Takes one argument:
+## \_\_webpack_chunk_load\_\_ (خاص بـ webpack)
-- `chunkId` The id for the chunk to load.
+دالة تحميل chunk الداخلية. تأخذ argument واحدًا:
-Example to load chunks from alternate public path when one failed:
+- `chunkId` معرّف chunk المطلوب تحميله.
+
+مثال لتحميل chunks من public path بديل عند فشل أحد المسارات:
```js
const originalLoad = __webpack_chunk_load__;
@@ -301,37 +301,47 @@ __webpack_chunk_load__ = async (id) => {
throw error;
};
import("./module-a").then((moduleA) => {
- // now webpack will use the custom __webpack_chunk_load__ to load chunk
+ // الآن سيستخدم webpack دالة __webpack_chunk_load__ المخصصة لتحميل chunk
});
```
-## \_\_webpack_module\_\_ (webpack-specific)
+
+
+## \_\_webpack_module\_\_ (خاص بـ webpack)
-It provides access to the current `module`. `module` is not available in strict ESM.
+يوفر وصولًا إلى `module` الحالي. لا يكون `module` متاحًا داخل strict ESM.
-## \_\_webpack_module\_\_.id (webpack-specific)
+
+
+## \_\_webpack_module\_\_.id (خاص بـ webpack)
-It provides access to the ID of current `module` (`module.id`). `module` is not available in strict ESM.
+يوفر وصولًا إلى ID الخاص بالـ `module` الحالي، أي `module.id`. لا يكون `module` متاحًا داخل strict ESM.
+
+
-## \_\_webpack_modules\_\_ (webpack-specific)
+## \_\_webpack_modules\_\_ (خاص بـ webpack)
-Access to the internal object of all modules.
+يوفر وصولًا إلى الكائن الداخلي الذي يحتوي على كل modules.
-## \_\_webpack_hash\_\_ (webpack-specific)
+
-It provides access to the hash of the compilation.
+## \_\_webpack_hash\_\_ (خاص بـ webpack)
-## \_\_webpack_get_script_filename\_\_ (webpack-specific)
+يوفر وصولًا إلى hash الخاص بالـ compilation.
+
+
+
+## \_\_webpack_get_script_filename\_\_ (خاص بـ webpack)
`function (chunkId)`
-It provides filename of the chunk by its id.
+يوفر اسم ملف chunk من خلال id الخاص به.
-It is assignable, which allows changing the filename used by the runtime. For example, it can be used to determine the final path when loading chunks.
+يمكن إعادة تعيينه، وهذا يسمح بتغيير اسم الملف الذي يستخدمه runtime. مثلًا، يمكن استخدامه لتحديد المسار النهائي عند تحميل chunks.
```js
const oldFn = __webpack_get_script_filename__;
@@ -342,15 +352,19 @@ __webpack_get_script_filename__ = (chunkId) => {
};
```
-## \_\_non_webpack_require\_\_ (webpack-specific)
+
+
+## \_\_non_webpack_require\_\_ (خاص بـ webpack)
+
+ينشئ دالة `require` لا يقرأها webpack. يمكن استخدامها لعمل أشياء متقدمة مع دالة require عامة إذا كانت متاحة.
-Generates a `require` function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.
+
-## \_\_webpack_global\_\_ (webpack-specific)
+## \_\_webpack_global\_\_ (خاص بـ webpack)
-An alias for [`__webpack_require__`](#__webpack_require__-webpack-specific). When webpack bundles are bundled again (e.g., when a previously bundled output is used as input), the [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) will rename `__webpack_require__` from the previous bundle to avoid conflicts. `__webpack_global__` ensures you can always access the current compilation's `__webpack_require__` function.
+هو alias لـ [`__webpack_require__`](#__webpack_require__-webpack-specific). عندما تُحزّم bundles الخاصة بـ webpack مرة أخرى، مثل استخدام output محزّم سابقًا كـ input، سيعيد [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) تسمية `__webpack_require__` القادم من bundle السابق لتجنب التعارضات. يضمن `__webpack_global__` الوصول دائمًا إلى دالة `__webpack_require__` الخاصة بالـ compilation الحالي.
**src/module.js**
@@ -358,49 +372,55 @@ An alias for [`__webpack_require__`](#__webpack_require__-webpack-specific). Whe
__webpack_global__.myProperty = "value";
```
-## \_\_webpack_exports_info\_\_ (webpack-specific)
+
-In modules, `__webpack_exports_info__` is available to allow exports introspection:
+## \_\_webpack_exports_info\_\_ (خاص بـ webpack)
-- `__webpack_exports_info__` is always `true`
+داخل modules، يكون `__webpack_exports_info__` متاحًا للسماح بفحص معلومات exports:
-- `__webpack_exports_info__..used` is `false` when the export is known to be unused, `true` otherwise
+- `__webpack_exports_info__` يساوي دائمًا `true`.
-- `__webpack_exports_info__..useInfo` is
- - `false` when the export is known to be unused
- - `true` when the export is known to be used
- - `null` when the export usage could depend on runtime conditions
- - `undefined` when no info is available
+- `__webpack_exports_info__..used` تكون `false` عندما يكون export معروفًا أنه غير مستخدم، وتكون `true` في غير ذلك.
-- `__webpack_exports_info__..provideInfo` is
- - `false` when the export is known to be not provided
- - `true` when the export is known to be provided
- - `null` when the export provision could depend on runtime conditions
- - `undefined` when no info is available
+- `__webpack_exports_info__..useInfo` تكون:
+ - `false` عندما يكون export معروفًا أنه غير مستخدم.
+ - `true` عندما يكون export معروفًا أنه مستخدم.
+ - `null` عندما قد يعتمد استخدام export على شروط runtime.
+ - `undefined` عندما لا تتوفر معلومات.
-- Accessing the info from nested exports is possible: i. e. `__webpack_exports_info__....used`
+- `__webpack_exports_info__..provideInfo` تكون:
+ - `false` عندما يكون export معروفًا أنه غير مقدّم.
+ - `true` عندما يكون export معروفًا أنه مقدّم.
+ - `null` عندما قد يعتمد تقديم export على شروط runtime.
+ - `undefined` عندما لا تتوفر معلومات.
-- Check whether exports can be mangled with `__webpack_exports_info__..canMangle`
+- يمكن الوصول إلى معلومات nested exports، مثل: `__webpack_exports_info__....used`.
-## \_\_webpack_is_included\_\_ (webpack-specific)
+- افحص ما إذا كان يمكن تغيير أسماء exports باستخدام `__webpack_exports_info__..canMangle`.
+
+
+
+## \_\_webpack_is_included\_\_ (خاص بـ webpack)
-Test whether or not the given module is bundled by webpack.
+يفحص ما إذا كان module المحدد مضمنًا في bundle بواسطة webpack أم لا.
```js
if (__webpack_is_included__("./module-a.js")) {
- // do something
+ // افعل شيئًا
}
```
-## \_\_webpack_base_uri\_\_ (webpack-specific)
+
-Change base URI at runtime.
+## \_\_webpack_base_uri\_\_ (خاص بـ webpack)
-- Type: `string`
-- Available: 5.21.0+
-- Example:
+يغيّر base URI وقت التشغيل.
+
+- النوع: `string`
+- متاح منذ: 5.21.0+
+- مثال:
```js
__webpack_base_uri__ = "https://example.com";
@@ -408,9 +428,9 @@ Change base URI at runtime.
## \_\_webpack_runtime_id\_\_
-Access the [runtime](/blog/2020-10-10-webpack-5-release/#entry-point-runtime) id of current entry.
+يوفر وصولًا إلى id الخاص بـ [runtime](/blog/2020-10-10-webpack-5-release/#entry-point-runtime) للـ entry الحالي.
-This is a webpack specific feature and it's available since webpack 5.25.0.
+هذه ميزة خاصة بـ webpack، وهي متاحة منذ webpack 5.25.0.
**src/index.js**
@@ -418,6 +438,8 @@ This is a webpack specific feature and it's available since webpack 5.25.0.
console.log(__webpack_runtime_id__ === "main");
```
-## DEBUG (webpack-specific)
+
+
+## DEBUG (خاص بـ webpack)
-Equals the configuration option `debug`.
+يساوي خيار الإعداد `debug`.
diff --git a/src/content/api/node.mdx b/src/content/api/node.mdx
index fe0b6c2423d9..47fd4805c901 100644
--- a/src/content/api/node.mdx
+++ b/src/content/api/node.mdx
@@ -1,32 +1,23 @@
---
-title: Node Interface
+title: واجهة Node
sort: 2
contributors:
- - sallar
- - rynclark
- - byzyk
- - wizardofhogwarts
- - EugeneHlushko
- - lukasgeiter
- - toshihidetagami
- - chenxsan
- - jamesgeorge007
- - textbook
+ - RlxChap2
---
-Webpack provides a Node.js API which can be used directly in Node.js runtime.
+يوفر webpack واجهة Node.js API يمكن استخدامها مباشرة داخل بيئة تشغيل Node.js.
-The Node.js API is useful in scenarios in which you need to customize the build or development process since all the reporting and error handling must be done manually and webpack only does the compiling part. For this reason the [`stats`](/configuration/stats) configuration options will not have any effect in the `webpack()` call.
+تفيد Node.js API عندما تحتاج إلى تخصيص عملية build أو عملية التطوير؛ لأن عرض النتائج ومعالجة الأخطاء يصبحان مسؤوليتك أنت، بينما يتولى webpack جزء compilation فقط. لهذا السبب، لن تؤثر خيارات إعداد [`stats`](/configuration/stats) عند استدعاء `webpack()`.
-## Installation
+## التثبيت
-To start using the webpack Node.js API, first install webpack if you haven’t yet:
+لبدء استخدام webpack Node.js API، ثبّت webpack أولًا إذا لم يكن مثبتًا لديك:
```bash
npm install --save-dev webpack
```
-Then import the webpack module in your Node.js script:
+ثم استورد module الخاص بـ webpack داخل سكربت Node.js:
```js
import webpack from "webpack";
@@ -34,7 +25,7 @@ import webpack from "webpack";
## webpack()
-The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided:
+تستقبل الدالة `webpack` المستوردة [كائن إعدادات](/configuration/) webpack، وتُشغّل webpack compiler إذا مررت لها callback:
```js
import webpack from "webpack";
@@ -43,50 +34,32 @@ webpack({}, (err, stats) => {
if (err || stats.hasErrors()) {
// ...
}
- // Done processing
+ // انتهت المعالجة
});
```
-T> The `err` object **will not** include compilation errors. Those must be handled separately using `stats.hasErrors()`, which will be covered in detail in the [Error Handling](#error-handling) section of this guide. The `err` object will only contain webpack-related issues, such as misconfiguration, etc.
+T> كائن `err` **لن** يحتوي على أخطاء compilation. يجب التعامل مع هذه الأخطاء بشكل منفصل عبر `stats.hasErrors()`، وسيتم شرح ذلك بتفصيل أكبر في قسم [معالجة الأخطاء](#معالجة-الأخطاء). يحتوي `err` فقط على مشاكل مرتبطة بـ webpack نفسه، مثل إعدادات غير صحيحة وما شابه.
-T> You can provide the `webpack` function with an array of configurations. See
-the [MultiCompiler](#multicompiler) section below for more information.
+T> يمكنك تمرير array من الإعدادات إلى الدالة `webpack`. راجع قسم [MultiCompiler](#multicompiler) أدناه لمزيد من التفاصيل.
-## Compiler Instance
+## نسخة Compiler
-If you don’t pass the `webpack` runner function a callback, it will return a
-webpack `Compiler` instance. This instance can be used to manually trigger the
-webpack runner or have it build and watch for changes, much like the
-[CLI](/api/cli/). The `Compiler` instance provides the following methods:
+إذا لم تمرر callback إلى دالة تشغيل `webpack`، فسترجع instance من `Compiler` الخاص بـ webpack. يمكن استخدام هذه instance لتشغيل webpack يدويًا، أو لجعله يبني ويراقب التغييرات، بطريقة مشابهة لـ [CLI](/api/cli/). توفر instance الخاصة بـ `Compiler` الدوال التالية:
- `.run(callback)`
- `.watch(watchOptions, handler)`
-Typically, only one master `Compiler` instance is created, although child
-compilers can be created in order to delegate specific tasks. The `Compiler` is
-ultimately a function which performs bare minimum functionality to keep a
-lifecycle running. It delegates all the loading, bundling, and writing work to
-registered plugins.
+عادةً يتم إنشاء instance رئيسية واحدة فقط من `Compiler`، لكن يمكن إنشاء child compilers لتفويض مهام محددة. في النهاية، `Compiler` هو دالة توفر الحد الأدنى اللازم لإبقاء دورة الحياة تعمل. أما عمليات loading وbundling والكتابة فتُفوّض إلى plugins المسجلة.
-The `hooks` property on a `Compiler` instance is used to register a plugin to
-any hook event in the `Compiler`'s lifecycle. The
-[`WebpackOptionsDefaulter`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsDefaulter.js)
-and [`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js)
-utilities are used by webpack to configure its `Compiler` instance with all the
-built-in plugins.
+تُستخدم الخاصية `hooks` على instance الخاصة بـ `Compiler` لتسجيل plugin على أي hook event ضمن دورة حياة `Compiler`. ويستخدم webpack الأداتين [`WebpackOptionsDefaulter`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsDefaulter.js) و[`WebpackOptionsApply`](https://github.com/webpack/webpack/blob/main/lib/WebpackOptionsApply.js) لإعداد instance الخاصة بـ `Compiler` مع كل plugins المدمجة.
-The `run` method is then used to kickstart all compilation work. Upon
-completion, the given `callback` function is executed. The final logging of
-stats and errors should be done in this `callback` function.
+تُستخدم الدالة `run` لبدء كل عمل compilation. وبعد الانتهاء، تُنفّذ دالة `callback` التي مررتها. يجب أن يتم تسجيل stats والأخطاء النهائية داخل هذه الدالة.
-W> The API only supports a single concurrent compilation at a time. When using `run` or
-`watch`, call `close` and wait for it to finish before calling `run` or `watch`
-again. Concurrent compilations will corrupt the output files.
+W> تدعم هذه API عملية compilation واحدة فقط في الوقت نفسه. عند استخدام `run` أو `watch`، استدعِ `close` وانتظر انتهاءه قبل استدعاء `run` أو `watch` مرة أخرى. تشغيل compilations متزامنة قد يفسد ملفات output.
## Run
-Calling the `run` method on the `Compiler` instance is much like the quick run
-method mentioned above:
+استدعاء الدالة `run` على instance الخاصة بـ `Compiler` يشبه طريقة التشغيل السريعة المذكورة أعلاه:
```js
import webpack from "webpack";
@@ -104,13 +77,11 @@ compiler.run((err, stats) => {
});
```
-W> Don't forget to close the compiler, so that low-priority work (like persistent caching) have the opportunity to complete.
+W> لا تنس إغلاق compiler حتى تحصل الأعمال ذات الأولوية المنخفضة، مثل persistent caching، على فرصة للاكتمال.
## Watching
-Calling the `watch` method triggers the webpack runner, but then watches for
-changes (much like CLI: `webpack --watch`), as soon as webpack detects a
-change, runs again. Returns an instance of `Watching`.
+استدعاء الدالة `watch` يشغّل webpack runner، ثم يراقب التغييرات بطريقة مشابهة لـ CLI عند استخدام `webpack --watch`. بمجرد أن يكتشف webpack تغييرًا، يعيد التشغيل. وترجع الدالة instance من `Watching`.
```js
watch(watchOptions, callback);
@@ -125,29 +96,24 @@ const compiler = webpack({
const watching = compiler.watch(
{
- // Example
+ // مثال
aggregateTimeout: 300,
poll: undefined,
},
(err, stats) => {
- // Print watch/build result here...
+ // اطبع نتيجة watch/build هنا...
console.log(stats);
},
);
```
-`Watching` options are covered in detail
-[here](/configuration/watch/#watchoptions).
+خيارات `Watching` مشروحة بتفصيل [هنا](/configuration/watch/#watchoptions).
-W> Filesystem inaccuracies may trigger multiple builds for a single change.
-In the example above, the `console.log` statement may fire multiple times for a
-single modification. Users should expect this behavior and may check
-`stats.hash` to see if the file hash has actually changed.
+W> قد تؤدي عدم دقة نظام الملفات إلى تشغيل أكثر من build لتغيير واحد. في المثال السابق، قد تُنفّذ `console.log` أكثر من مرة لتعديل واحد. يجب توقع هذا السلوك، ويمكن فحص `stats.hash` لمعرفة ما إذا كان hash الملف قد تغيّر فعلًا.
-### Close `Watching`
+### إغلاق `Watching`
-The `watch` method returns a `Watching` instance that exposes
-`.close(callback)` method. Calling this method will end watching:
+ترجع الدالة `watch` instance من `Watching` توفر الدالة `.close(callback)`. استدعاء هذه الدالة ينهي المراقبة:
```js
watching.close((closeErr) => {
@@ -155,51 +121,41 @@ watching.close((closeErr) => {
});
```
-W> It’s not allowed to watch or run again before the existing watcher has been
-closed or invalidated.
+W> لا يُسمح بتشغيل watch أو run مرة أخرى قبل إغلاق watcher الحالي أو إبطاله.
-### Invalidate `Watching`
+### إبطال `Watching`
-Using `watching.invalidate`, you can manually invalidate the current compiling
-round, without stopping the watch process:
+باستخدام `watching.invalidate` يمكنك إبطال جولة compilation الحالية يدويًا، بدون إيقاف عملية watch:
```js
watching.invalidate();
```
-## Stats Object
+## كائن Stats
-The `stats` object that is passed as a second argument of the
-[`webpack()`](#webpack) callback, is a good source of information about the
-code compilation process. It includes:
+كائن `stats` الذي يُمرر كثاني argument إلى callback الخاصة بـ [`webpack()`](#webpack)، مصدر جيد للمعلومات عن عملية compilation. يحتوي على:
-- Errors and Warnings (if any)
-- Timings
-- Module and Chunk information
+- الأخطاء والتحذيرات إن وجدت.
+- التوقيتات.
+- معلومات Module وChunk.
-The [webpack CLI](/api/cli) uses this information to display nicely formatted
-output in your console.
+تستخدم [webpack CLI](/api/cli) هذه المعلومات لعرض ناتج منسق بشكل جيد في console.
-T> When using the [`MultiCompiler`](#multicompiler), a
-`MultiStats` instance is returned that fulfills the same interface as `stats`,
-i.e. the methods described below.
+T> عند استخدام [`MultiCompiler`](#multicompiler)، يتم إرجاع instance من `MultiStats` تحقق الواجهة نفسها الخاصة بـ `stats`، أي الدوال الموضحة أدناه.
-This `stats` object exposes the following methods:
+يعرض كائن `stats` الدوال التالية:
### stats.hasErrors()
-Can be used to check if there were errors while compiling. Returns `true` or
-`false`.
+تُستخدم لمعرفة ما إذا حدثت أخطاء أثناء compilation. ترجع `true` أو `false`.
### stats.hasWarnings()
-Can be used to check if there were warnings while compiling. Returns `true` or
-`false`.
+تُستخدم لمعرفة ما إذا ظهرت تحذيرات أثناء compilation. ترجع `true` أو `false`.
### stats.toJson(options)
-Returns compilation information as a JSON object. `options` can be either a
-string (a preset) or an object for more granular control:
+ترجع معلومات compilation ككائن JSON. يمكن أن تكون `options` نصًا يمثل preset، أو object للتحكم بتفاصيل أكثر:
```js
stats.toJson("minimal");
@@ -212,26 +168,25 @@ stats.toJson({
});
```
-All available options and presets are described in the stats [documentation](/configuration/stats).
+كل الخيارات والـ presets المتاحة موضحة في [توثيق stats](/configuration/stats).
-> Here’s an [example](https://raw.githubusercontent.com/webpack/analyse/master/app/pages/upload/example2.json)
-> of this function’s output.
+> هذا [مثال](https://raw.githubusercontent.com/webpack/analyse/master/app/pages/upload/example2.json)
+> على ناتج هذه الدالة.
### stats.toString(options)
-Returns a formatted string of the compilation information (similar to
-[CLI](/api/cli) output).
+ترجع نصًا منسقًا لمعلومات compilation، بشكل مشابه لناتج [CLI](/api/cli).
-Options are the same as [`stats.toJson(options)`](/api/node/#statstojsonoptions) with one addition:
+الخيارات هي نفسها خيارات [`stats.toJson(options)`](/api/node/#statstojsonoptions)، مع إضافة واحدة:
```js
stats.toString({
- // Add console colors
+ // أضف ألوان console
colors: true,
});
```
-Here’s an example of `stats.toString()` usage:
+هذا مثال على استخدام `stats.toString()`:
```js
import webpack from "webpack";
@@ -248,8 +203,8 @@ webpack(
console.log(
stats.toString({
- chunks: false, // Makes the build much quieter
- colors: true, // Shows colors in the console
+ chunks: false, // يجعل ناتج build أهدأ بكثير
+ colors: true, // يعرض الألوان في console
}),
);
},
@@ -258,10 +213,7 @@ webpack(
## MultiCompiler
-The `MultiCompiler` module allows webpack to run multiple configurations in
-separate compilers. If the `options` parameter in the webpack's NodeJS api is
-an array of options, webpack applies separate compilers and calls the
-`callback` after all compilers have been executed.
+يسمح module المسمى `MultiCompiler` لـ webpack بتشغيل عدة إعدادات داخل compilers منفصلة. إذا كان parameter المسمى `options` في NodeJS API الخاصة بـ webpack عبارة عن array من الخيارات، فسيطبّق webpack compilers منفصلة ويستدعي `callback` بعد تنفيذ كل compilers.
```js
import webpack from "webpack";
@@ -277,19 +229,17 @@ webpack(
);
```
-W> Multiple configurations will **not be run in parallel**. Each
-configuration is only processed after the previous one has finished
-processing.
+W> الإعدادات المتعددة **لن تعمل بالتوازي**. كل إعداد يُعالج بعد انتهاء الإعداد السابق.
-## Error Handling
+## معالجة الأخطاء
-For good error handling, you need to account for these three types of errors:
+لمعالجة الأخطاء بشكل جيد، يجب أن تراعي ثلاثة أنواع:
-- Fatal webpack errors (wrong configuration, etc)
-- Compilation errors (missing modules, syntax errors, etc)
-- Compilation warnings
+- أخطاء webpack الحرجة، مثل إعدادات خاطئة.
+- أخطاء compilation، مثل modules مفقودة أو أخطاء syntax.
+- تحذيرات compilation.
-Here’s an example that does all that:
+هذا مثال يتعامل مع الأنواع كلها:
```js
import webpack from "webpack";
@@ -317,20 +267,14 @@ webpack(
console.warn(info.warnings);
}
- // Log result...
+ // سجّل النتيجة...
},
);
```
-## Custom File Systems
+## أنظمة ملفات مخصصة
-By default, webpack reads files and writes files to disk using a normal file
-system. However, it is possible to change the input or output behavior using a
-different kind of file system (memory, webDAV, etc). To accomplish this, one
-can change the `inputFileSystem` or `outputFileSystem`. For example, you can
-replace the default `outputFileSystem` with
-[`memfs`](https://github.com/streamich/memfs) to write files to memory
-instead of to disk:
+افتراضيًا، يقرأ webpack الملفات ويكتبها على القرص باستخدام نظام الملفات العادي. لكن يمكن تغيير سلوك الإدخال أو الإخراج باستخدام نوع مختلف من أنظمة الملفات، مثل memory أو webDAV وغيرها. لفعل ذلك، يمكن تغيير `inputFileSystem` أو `outputFileSystem`. مثلًا، يمكنك استبدال `outputFileSystem` الافتراضي بـ [`memfs`](https://github.com/streamich/memfs) لكتابة الملفات في الذاكرة بدل القرص:
```js
import { Volume, createFsFromVolume } from "memfs";
@@ -343,7 +287,7 @@ const compiler = webpack({
compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
- // Read the output later:
+ // اقرأ output لاحقًا:
const content = fs.readFileSync("...");
compiler.close((closeErr) => {
// ...
@@ -351,12 +295,6 @@ compiler.run((err, stats) => {
});
```
-Note that this is what
-[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware),
-used by [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
-and many other packages, uses to mysteriously hide your files but continue
-serving them up to the browser!
+لاحظ أن هذا هو الأسلوب الذي يستخدمه [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware)، والذي يستخدمه [webpack-dev-server](https://github.com/webpack/webpack-dev-server) وحزم أخرى كثيرة. لذلك قد تشعر أن ملفاتك "مختفية"، لكنها في الحقيقة تُقدّم للمتصفح من الذاكرة.
-T> The output file system you provide needs to be compatible with Node’s own
-[`fs`](https://nodejs.org/api/fs.html) interface, which requires the `mkdirp`
-and `join` helper methods.
+T> يجب أن يكون نظام ملفات output الذي توفره متوافقًا مع واجهة [`fs`](https://nodejs.org/api/fs.html) الخاصة بـ Node، والتي تتطلب دوال مساعدة مثل `mkdirp` و`join`.
diff --git a/src/content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.mdx
index d66e64d69abe..e87b2505e785 100644
--- a/src/content/api/normalmodulefactory-hooks.mdx
+++ b/src/content/api/normalmodulefactory-hooks.mdx
@@ -3,14 +3,12 @@ title: NormalModuleFactory Hooks
group: Plugins
sort: 13
contributors:
- - iguessitsokay
- - chenxsan
+ - RlxChap2
---
-The `NormalModuleFactory` module is used by the `Compiler` to generate modules. Starting with entry points, it resolves each request, parses the content to find further requests, and keeps crawling through files by resolving all and parsing any new files. At last stage, each dependency becomes a Module instance.
+يستخدم `Compiler` الوحدة `NormalModuleFactory` لإنشاء modules. تبدأ العملية من entry points، ثم يحل webpack كل request، ويحلل المحتوى للعثور على requests إضافية، ويستمر في التنقل بين الملفات عبر حل كل request وتحليل أي ملف جديد. في المرحلة الأخيرة، تتحول كل dependency إلى instance من `Module`.
-The `NormalModuleFactory` class extends `Tapable` and provides the following
-lifecycle hooks. They can be tapped the same way as compiler hooks:
+ترث class `NormalModuleFactory` من `Tapable` وتوفّر lifecycle hooks التالية. يمكنك استخدام `tap` معها بالطريقة نفسها المستخدمة مع compiler hooks:
```js
const nmf = NormalModuleFactory.hooks;
@@ -19,7 +17,7 @@ nmf.someHook.tap("MyPlugin", (resolveData) => {
});
```
-NormalModuleFactory creates `Parser` and `Generator` instances which can be accessed by HookMaps. Identifier must be passed to tap into these:
+ينشئ `NormalModuleFactory` instances من `Parser` و`Generator`، ويمكن الوصول إليها عبر HookMaps. يجب تمرير identifier لاستخدام `tap` معها:
```js
NormalModuleFactory.hooks.parser
@@ -29,56 +27,55 @@ NormalModuleFactory.hooks.parser
});
```
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+كما هو الحال مع `compiler`، قد يتوفر `tapAsync` و`tapPromise` أيضًا حسب نوع hook.
## beforeResolve
`AsyncSeriesBailHook`
-Called when a new dependency request is encountered. A dependency can be ignored by returning `false`. Otherwise, it should return `undefined` to proceed.
+يُستدعى عند ظهور dependency request جديد. يمكن تجاهل dependency بإرجاع `false`. وإلا، أرجع `undefined` حتى تستمر العملية.
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
## factorize
`AsyncSeriesBailHook`
-Called before initiating resolve. It should return `undefined` to proceed.
+يُستدعى قبل بدء resolve. يجب إرجاع `undefined` حتى تستمر العملية.
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
## resolve
`AsyncSeriesBailHook`
-Called before the request is resolved. A dependency can be ignored by returning `false`. Returning a Module instance would finalize the process. Otherwise, it should return `undefined` to proceed.
+يُستدعى قبل حل request. يمكن تجاهل dependency بإرجاع `false`. كما أن إرجاع instance من `Module` ينهي العملية. وإلا، أرجع `undefined` حتى تستمر العملية.
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
## resolveForScheme
`AsyncSeriesBailHook`
-Called before a request with scheme (URI) is resolved.
+يُستدعى قبل حل request يحتوي scheme، مثل URI.
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
## afterResolve
`AsyncSeriesBailHook`
-Called after the request is resolved.
+يُستدعى بعد حل request.
-- Callback Parameters: `resolveData`
+- معاملات callback: `resolveData`
## createModule
`AsyncSeriesBailHook`
-Called before a `NormalModule` instance is created.
+يُستدعى قبل إنشاء instance من `NormalModule`.
-- Callback Parameters: `createData` `resolveData`
+- معاملات callback: `createData` `resolveData`
## createModuleClass
@@ -86,41 +83,41 @@ Called before a `NormalModule` instance is created.
-A hook that allows you to override the `NormalModule` class when creating modules. This hook is called after the [`createModule`](#createmodule) hook and before the [`module`](#module) hook.
+يسمح لك هذا hook باستبدال class `NormalModule` عند إنشاء modules. يُستدعى هذا hook بعد [`createModule`](#createmodule) وقبل [`module`](#module).
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
-- Callback Parameters: `createData` `resolveData`
+- معاملات callback: `createData` `resolveData`
## module
`SyncWaterfallHook`
-Called after a `NormalModule` instance is created.
+يُستدعى بعد إنشاء instance من `NormalModule`.
-- Callback Parameters: `module` `createData` `resolveData`
+- معاملات callback: `module` `createData` `resolveData`
## createParser
`HookMap`
-Called before a `Parser` instance is created. `parserOptions` is options in [module.parser](/configuration/module/#moduleparser) for the corresponding identifier or an empty object.
+يُستدعى قبل إنشاء instance من `Parser`. تمثل `parserOptions` الخيارات الموجودة في [module.parser](/configuration/module/#moduleparser) للـ identifier المطابق، أو تكون object فارغًا.
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
-- Callback Parameters: `parserOptions`
+- معاملات callback: `parserOptions`
## parser
`HookMap`
-Fired after a `Parser` instance is created.
+يُستدعى بعد إنشاء instance من `Parser`.
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
-- Callback Parameters: `parser` `parserOptions`
+- معاملات callback: `parser` `parserOptions`
-Possible default identifiers:
+القيم الافتراضية الممكنة للـ identifiers:
1. `javascript/auto`
2. `javascript/dynamic`
@@ -134,23 +131,23 @@ Possible default identifiers:
`HookMap`
-Called before a `Generator` instance is created. `generatorOptions` is options in [module.parser](/configuration/module/#modulegenerator) for the corresponding identifier or an empty object.
+يُستدعى قبل إنشاء instance من `Generator`. تمثل `generatorOptions` الخيارات الموجودة في [module.generator](/configuration/module/#modulegenerator) للـ identifier المطابق، أو تكون object فارغًا.
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
-- Callback Parameters: `generatorOptions`
+- معاملات callback: `generatorOptions`
## generator
`HookMap`
-Called after a `Generator` instance is created.
+يُستدعى بعد إنشاء instance من `Generator`.
-- Hook Parameters: `identifier`
+- معاملات hook: `identifier`
-- Callback Parameters: `generator` `generatorOptions`
+- معاملات callback: `generator` `generatorOptions`
-Possible default identifiers:
+القيم الافتراضية الممكنة للـ identifiers:
1. `json`
2. `webassembly/sync`
diff --git a/src/content/api/parser.mdx b/src/content/api/parser.mdx
index 963554c7259f..ec057df4db05 100644
--- a/src/content/api/parser.mdx
+++ b/src/content/api/parser.mdx
@@ -3,32 +3,22 @@ title: JavascriptParser Hooks
group: Plugins
sort: 12
contributors:
- - byzyk
- - DeTeam
- - misterdev
- - EugeneHlushko
- - chenxsan
- - snitin315
- - moshams272
+ - RlxChap2
---
-The `parser` instance, found in the `compiler`, is used to parse each module
-being processed by webpack. The `parser` is yet another webpack class that
-extends `tapable` and provides a variety of `tapable` hooks that can be used by
-plugin authors to customize the parsing process.
+تُستخدم instance المسماة `parser`، والموجودة داخل `compiler`، لتحليل كل module يعالجه webpack. ويُعد `parser` صنفًا آخر من أصناف webpack التي ترث من `tapable`، ويوفر مجموعة متنوعة من `tapable` hooks يستطيع مؤلفو plugins استخدامها لتخصيص عملية parsing.
-The `parser` is found within [NormalModuleFactory](/api/compiler-hooks/#normalmodulefactory) and therefore takes little
-more work to access:
+يوجد `parser` داخل [NormalModuleFactory](/api/compiler-hooks/#normalmodulefactory)، لذلك يحتاج الوصول إليه إلى خطوة إضافية بسيطة:
```js
compiler.hooks.normalModuleFactory.tap("MyPlugin", (factory) => {
factory.hooks.parser
.for("javascript/auto")
.tap("MyPlugin", (parser, options) => {
- // The `parser` provides many hooks, which are explained in detail below.
- // Here is a practical example using the `call` hook to detect and warn
- // about a deprecated API function when a developer calls it
- // (e.g., `myCustomApiFunction()`):
+ // يوفر `parser` عدة hooks، وسيتم شرحها بالتفصيل أدناه.
+ // هذا مثال عملي يستخدم hook المسمى `call` لاكتشاف دالة API قديمة
+ // وتحذير المطور عند استدعائها
+ // مثل: `myCustomApiFunction()`
parser.hooks.call
.for("myCustomApiFunction")
.tap("MyPlugin", (expression) => {
@@ -40,21 +30,19 @@ compiler.hooks.normalModuleFactory.tap("MyPlugin", (factory) => {
});
```
-As with the `compiler`, `tapAsync` and `tapPromise` may also be available
-depending on the type of hook.
+كما هو الحال مع `compiler`، قد تكون `tapAsync` و`tapPromise` متاحتين أيضًا بحسب نوع hook.
## Hooks
-The following lifecycle hooks are exposed by the `parser` and can be accessed
-as such:
+يعرض `parser` hooks التالية ضمن دورة حياته، ويمكن الوصول إليها بهذا الشكل:
-W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+W> منذ webpack 5، لم تعد `hooks` قابلة للتمديد مباشرة. استخدم `WeakMap` لإضافة hooks مخصصة.
### evaluateTypeof
`SyncBailHook`
-Triggered when evaluating an expression consisting in a `typeof` of a free variable
+يُطلق عند تقييم expression مكوّن من `typeof` لمتغير حر.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -68,13 +56,13 @@ parser.hooks.evaluateTypeof.for("myIdentifier").tap(
);
```
-This will trigger the `evaluateTypeof` hook:
+هذا الكود سيطلق hook المسمى `evaluateTypeof`:
```js
const a = typeof myIdentifier;
```
-This won't trigger:
+وهذا الكود لن يطلقه:
```js
const myIdentifier = 0;
@@ -85,12 +73,12 @@ const b = typeof myIdentifier;
`SyncBailHook`
-Called when evaluating an expression.
+يُستدعى عند تقييم expression.
- Hook parameters: `expressionType`
- Callback parameters: `expression`
-For example:
+مثال:
**index.js**
@@ -109,7 +97,7 @@ parser.hooks.evaluate.for("NewExpression").tap(
);
```
-Where the expressions types are:
+أنواع expressions الممكنة هي:
- `'ArrowFunctionExpression'`
- `'AssignmentExpression'`
@@ -136,7 +124,7 @@ Where the expressions types are:
`SyncBailHook`
-Called when evaluating an identifier that is a free variable.
+يُستدعى عند تقييم identifier يمثل متغيرًا حرًا.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -145,7 +133,7 @@ Called when evaluating an identifier that is a free variable.
`SyncBailHook`
-Called when evaluating an identifier that is a defined variable.
+يُستدعى عند تقييم identifier يمثل متغيرًا معرّفًا.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -154,12 +142,12 @@ Called when evaluating an identifier that is a defined variable.
`SyncBailHook`
-Called when evaluating a call to a member function of a successfully evaluated expression.
+يُستدعى عند تقييم استدعاء دالة عضو ضمن expression تم تقييمه بنجاح.
- Hook Parameters: `identifier`
- Callback Parameters: `expression` `param`
-This expression will trigger the hook:
+هذا التعبير سيطلق hook:
**index.js**
@@ -182,7 +170,7 @@ parser.hooks.evaluateCallExpressionMember.for("myFunc").tap(
`SyncBailHook`
-General purpose hook that is called for every parsed statement in a code fragment.
+Hook عام يُستدعى لكل statement يتم تحليلها داخل جزء من الكود.
- Callback Parameters: `statement`
@@ -192,7 +180,7 @@ parser.hooks.statement.tap("MyPlugin", (statement) => {
});
```
-Where the `statement.type` could be:
+يمكن أن تكون قيمة `statement.type` واحدة من الآتي:
- `'BlockStatement'`
- `'VariableDeclaration'`
@@ -220,7 +208,7 @@ Where the `statement.type` could be:
`SyncBailHook`
-Called when parsing an if statement. Same as the `statement` hook, but triggered only when `statement.type == 'IfStatement'`.
+يُستدعى عند تحليل `if statement`. يشبه hook المسمى `statement`، لكنه لا يُطلق إلا عندما تكون `statement.type == 'IfStatement'`.
- Callback Parameters: `statement`
@@ -228,7 +216,7 @@ Called when parsing an if statement. Same as the `statement` hook, but triggered
`SyncBailHook`
-Called when parsing statements with a [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Those statements have `statement.type === 'LabeledStatement'`.
+يُستدعى عند تحليل statements التي تحتوي على [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). هذه statements تكون لديها `statement.type === 'LabeledStatement'`.
- Hook Parameters: `labelName`
- Callback Parameters: `statement`
@@ -237,11 +225,11 @@ Called when parsing statements with a [label](https://developer.mozilla.org/en-U
`SyncBailHook`
-Called for every import statement in a code fragment. The `source` parameter contains the name of the imported file.
+يُستدعى لكل عبارة import داخل جزء من الكود. يحتوي parameter المسمى `source` على اسم الملف المستورد.
- Callback Parameters: `statement` `source`
-The following import statement will trigger the hook once:
+عبارة import التالية ستطلق hook مرة واحدة:
**index.js**
@@ -261,11 +249,11 @@ parser.hooks.import.tap("MyPlugin", (statement, source) => {
`SyncBailHook`
-Called for every specifier of every `import` statement.
+يُستدعى لكل specifier في كل عبارة `import`.
- Callback Parameters: `statement` `source` `exportName` `identifierName`
-The following import statement will trigger the hook twice:
+عبارة import التالية ستطلق hook مرتين:
**index.js**
@@ -279,12 +267,12 @@ import _, { has } from "lodash";
parser.hooks.importSpecifier.tap(
"MyPlugin",
(statement, source, exportName, identifierName) => {
- /* First call
+ /* الاستدعاء الأول
source == 'lodash'
exportName == 'default'
identifierName == '_'
*/
- /* Second call
+ /* الاستدعاء الثاني
source == 'lodash'
exportName == 'has'
identifierName == 'has'
@@ -297,7 +285,7 @@ parser.hooks.importSpecifier.tap(
`SyncBailHook`
-Called for every `export` statement in a code fragment.
+يُستدعى لكل عبارة `export` داخل جزء من الكود.
- Callback Parameters: `statement`
@@ -305,7 +293,7 @@ Called for every `export` statement in a code fragment.
`SyncBailHook`
-Called for every `export`-import statement eg: `export * from 'otherModule';`.
+يُستدعى لكل عبارة `export` مع import، مثل: `export * from 'otherModule';`.
- Callback Parameters: `statement` `source`
@@ -313,14 +301,14 @@ Called for every `export`-import statement eg: `export * from 'otherModule';`.
`SyncBailHook`
-Called for every `export` statement exporting a declaration.
+يُستدعى لكل عبارة `export` تصدّر declaration.
- Callback Parameters: `statement` `declaration`
-Those exports will trigger this hook:
+هذه exports ستطلق هذا hook:
```js
-export const myVar = "hello"; // also var, let
+export const myVar = "hello"; // وينطبق أيضًا على var وlet
export function FunctionName() {}
export class ClassName {}
```
@@ -329,7 +317,7 @@ export class ClassName {}
`SyncBailHook`
-Called for every `export` statement exporting an expression e.g.`export default expression;`.
+يُستدعى لكل عبارة `export` تصدّر expression، مثل: `export default expression;`.
- Callback Parameters: `statement` `declaration`
@@ -337,7 +325,7 @@ Called for every `export` statement exporting an expression e.g.`export default
`SyncBailHook`
-Called for every specifier of every `export` statement.
+يُستدعى لكل specifier في كل عبارة `export`.
- Callback Parameters: `statement` `identifierName` `exportName` `index`
@@ -345,7 +333,7 @@ Called for every specifier of every `export` statement.
`SyncBailHook`
-Called for every specifier of every `export`-import statement.
+يُستدعى لكل specifier في كل عبارة `export` مع import.
- Callback Parameters: `statement` `source` `identifierName` `exportName` `index`
@@ -353,7 +341,7 @@ Called for every specifier of every `export`-import statement.
`SyncBailHook`
-Called when parsing a variable declaration.
+يُستدعى عند تحليل variable declaration.
- Callback Parameters: `declaration`
@@ -361,7 +349,7 @@ Called when parsing a variable declaration.
`SyncBailHook`
-Called when parsing a variable declaration defined using `let`
+يُستدعى عند تحليل variable declaration مُعرّفة باستخدام `let`.
- Callback Parameters: `declaration`
@@ -369,7 +357,7 @@ Called when parsing a variable declaration defined using `let`
`SyncBailHook`
-Called when parsing a variable declaration defined using `const`
+يُستدعى عند تحليل variable declaration مُعرّفة باستخدام `const`.
- Callback Parameters: `declaration`
@@ -377,7 +365,7 @@ Called when parsing a variable declaration defined using `const`
`SyncBailHook`
-Called when parsing a variable declaration defined using `var`
+يُستدعى عند تحليل variable declaration مُعرّفة باستخدام `var`.
- Callback Parameters: `declaration`
@@ -385,7 +373,7 @@ Called when parsing a variable declaration defined using `var`
`SyncBailHook`
-Triggered before renaming an identifier to determine if the renaming is allowed. This is usually used together with the `rename` hook.
+يُطلق قبل إعادة تسمية identifier لتحديد ما إذا كانت إعادة التسمية مسموحة. يُستخدم غالبًا مع hook المسمى `rename`.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -396,7 +384,7 @@ const a = b;
parser.hooks.canRename.for("b").tap(
"MyPlugin",
(expression) =>
- // returning true allows renaming
+ // إرجاع true يسمح بإعادة التسمية
true,
);
```
@@ -405,7 +393,7 @@ parser.hooks.canRename.for("b").tap(
`SyncBailHook`
-Triggered when renaming to get the new identifier. This hook will be called only if `canRename` returns `true`.
+يُطلق عند إعادة التسمية للحصول على identifier الجديد. لا يُستدعى هذا hook إلا إذا أرجع `canRename` القيمة `true`.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -416,11 +404,11 @@ const a = b;
parser.hooks.rename.for("b").tap("MyPlugin", (expression) => {});
```
-### assign (before parsing assigned expression)
+### assign (قبل parsing التعبير المسند)
`SyncBailHook`
-Called when parsing an `AssignmentExpression` before parsing the assigned expression.
+يُستدعى عند تحليل `AssignmentExpression` قبل تحليل expression المسندة.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -429,15 +417,15 @@ Called when parsing an `AssignmentExpression` before parsing the assigned expres
a += b;
parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
- // this is called before parsing b
+ // يُستدعى هذا قبل تحليل b
});
```
-### assign (before parsing target)
+### assign (قبل parsing الهدف)
`SyncBailHook`
-Called when parsing an `AssignmentExpression` before parsing the assign expression.
+يُستدعى عند تحليل `AssignmentExpression` قبل تحليل expression الهدف.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -446,7 +434,7 @@ Called when parsing an `AssignmentExpression` before parsing the assign expressi
a += b;
parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
- // this is called before parsing a
+ // يُستدعى هذا قبل تحليل a
});
```
@@ -454,7 +442,7 @@ parser.hooks.assign.for("a").tap("MyPlugin", (expression) => {
`SyncBailHook`
-Triggered when parsing the `typeof` of an identifier
+يُطلق عند تحليل `typeof` الخاص بـ identifier.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -463,7 +451,7 @@ Triggered when parsing the `typeof` of an identifier
`SyncBailHook`
-Called when parsing a function call.
+يُستدعى عند تحليل استدعاء دالة.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -480,7 +468,7 @@ parser.hooks.call.for("eval").tap("MyPlugin", (expression) => {});
`SyncBailHook`
-Triggered when parsing a call to a member function of an object.
+يُطلق عند تحليل استدعاء دالة عضو من كائن.
- Hook Parameters: `objectIdentifier`
- Callback Parameters: `expression, properties`
@@ -497,7 +485,7 @@ parser.hooks.callMemberChain
`SyncBailHook`
-Invoked when parsing a `new` expression.
+يُستدعى عند تحليل expression من نوع `new`.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -512,7 +500,7 @@ parser.hooks.new.for("MyClass").tap("MyPlugin", (expression) => {});
`SyncBailHook`
-Called when parsing an expression.
+يُستدعى عند تحليل expression.
- Hook Parameters: `identifier`
- Callback Parameters: `expression`
@@ -527,7 +515,7 @@ parser.hooks.expression.for("this").tap("MyPlugin", (expression) => {});
`SyncBailHook`
-Called when parsing a `ConditionalExpression` e.g. `condition ? a : b`
+يُستدعى عند تحليل `ConditionalExpression` مثل: `condition ? a : b`.
- Callback Parameters: `expression`
@@ -535,6 +523,6 @@ Called when parsing a `ConditionalExpression` e.g. `condition ? a : b`
`SyncBailHook`
-Get access to the abstract syntax tree (AST) of a code fragment
+يتيح الوصول إلى abstract syntax tree (AST) الخاص بجزء من الكود.
- Parameters: `ast` `comments`
diff --git a/src/content/api/plugins.mdx b/src/content/api/plugins.mdx
index acc36c2755a6..df8354461197 100644
--- a/src/content/api/plugins.mdx
+++ b/src/content/api/plugins.mdx
@@ -3,53 +3,26 @@ title: Plugin API
group: Plugins
sort: 14
contributors:
- - thelarkinn
- - pksjce
- - e-cloud
- - byzyk
- - EugeneHlushko
- - wizardofhogwarts
- - snitin315
- - evenstensberg
+ - RlxChap2
---
-Plugins are a key piece of the webpack ecosystem and provide the community with
-a powerful way to tap into webpack's compilation process. A plugin is able to
-[hook](/api/compiler-hooks/#hooks) into key events that are fired throughout each compilation. Every step
-of the way, the plugin will have full access to the `compiler` and, when
-applicable, the current `compilation`.
+تُعد plugins جزءًا أساسيًا من منظومة webpack، فهي تمنح المجتمع طريقة قوية للدخول إلى عملية compilation الخاصة بـ webpack. يستطيع plugin أن يستخدم [hook](/api/compiler-hooks/#hooks) في أحداث مهمة تُطلق خلال كل compilation. وفي كل مرحلة، يحصل plugin على وصول كامل إلى `compiler`، وإلى `compilation` الحالي عندما يكون ذلك مناسبًا.
-T> For a high-level introduction to writing plugins, start with
-[writing a plugin](/contribute/writing-a-plugin).
+T> إذا كنت تريد مقدمة عامة عن كتابة plugins، ابدأ من [كتابة Plugin](/contribute/writing-a-plugin).
-Let's start by going over `tapable` utility, which provides the backbone of
-webpack's plugin interface.
+لنبدأ بأداة `tapable`، فهي الأساس الذي بُنيت عليه واجهة plugins في webpack.
## Tapable
-This small library is a core utility in webpack but can also be used elsewhere
-to provide a similar plugin interface. Many objects in webpack extend the
-`Tapable` class. The class exposes `tap`, `tapAsync`, and `tapPromise` methods
-which plugins can use to inject custom build steps that will be fired
-throughout a compilation.
+هذه المكتبة الصغيرة أداة محورية داخل webpack، ويمكن استخدامها أيضًا خارج webpack لتوفير واجهة plugins مشابهة. كثير من الكائنات في webpack ترث من الصنف `Tapable`. يوفّر هذا الصنف الدوال `tap` و`tapAsync` و`tapPromise`، وتستخدمها plugins لإضافة خطوات build مخصصة تُنفّذ أثناء compilation.
-Please see the [documentation](https://github.com/webpack/tapable) to learn
-more. An understanding of the three `tap` methods, as well as the hooks that
-provide them, is crucial. The objects that extend `Tapable` (e.g. the compiler),
-the hooks they provide, and each hook's type (e.g. the `SyncHook`) will be
-noted.
+راجع [التوثيق](https://github.com/webpack/tapable) لمعرفة المزيد. من المهم فهم دوال `tap` الثلاث، وكذلك أنواع hooks التي توفرها. في التوثيق ستجد الكائنات التي ترث من `Tapable`، مثل compiler، والـ hooks التي توفرها، ونوع كل hook، مثل `SyncHook`.
-## Plugin Types
+## أنواع Plugins
-Depending on the hooks used and `tap` methods applied, plugins can function in
-a different number of ways. The way this works is closely related to the
-[hooks](https://github.com/webpack/tapable#tapable) provided by `Tapable`. The
-[compiler hooks](/api/compiler-hooks/#hooks) each note the underlying `Tapable` hook indicating which
-`tap` methods are available.
+بحسب hooks التي تستخدمها، وبحسب دوال `tap` التي تعتمد عليها، يمكن أن تعمل plugins بعدة طرق. هذا مرتبط مباشرةً بالـ [hooks](https://github.com/webpack/tapable#tapable) التي توفرها `Tapable`. توضح صفحة [compiler hooks](/api/compiler-hooks/#hooks) نوع hook الأساسي من `Tapable`، وهذا يحدد دوال `tap` المتاحة.
-So depending on which event you `tap` into, the plugin may run differently. For
-example, when hooking into the `compile` stage, only the synchronous `tap` method
-can be used:
+لذلك يختلف سلوك plugin حسب الحدث الذي تستخدم معه `tap`. مثلًا، عند الدخول في مرحلة `compile`، يمكنك استخدام `tap` المتزامنة فقط:
```js
compiler.hooks.compile.tap("MyPlugin", (params) => {
@@ -57,8 +30,7 @@ compiler.hooks.compile.tap("MyPlugin", (params) => {
});
```
-However, for `run` which utilizes the `AsyncHook`, we can utilize `tapAsync`
-or `tapPromise` (as well as `tap`):
+أما hook مثل `run`، لأنه يستخدم `AsyncHook`، فيمكنك معه استخدام `tapAsync` أو `tapPromise`، بالإضافة إلى `tap`:
```js
compiler.hooks.run.tapAsync(
@@ -88,15 +60,13 @@ compiler.hooks.run.tapPromise(
);
```
-The moral of the story is that there are a variety of ways to `hook` into the
-`compiler`, each one allowing your plugin to run as it sees fit.
+الفكرة الأساسية: توجد أكثر من طريقة للدخول إلى `compiler`، وكل طريقة تسمح لـ plugin أن يعمل بالشكل المناسب للمرحلة التي يحتاجها.
-## Custom Hooks
+## Hooks مخصصة
-In order to offer a custom hook to the compilation for other plugins to `tap` into,
-you need to do the following:
+إذا أردت توفير hook مخصص داخل compilation حتى تتمكن plugins أخرى من استخدام `tap` معه، فاتبع الخطوات التالية:
-1. Create a module-scope `WeakMap` for compilation hooks:
+1. أنشئ `WeakMap` على مستوى module لحفظ hooks الخاصة بكل compilation:
```ts
const compilationHooks = new WeakMap();
@@ -106,7 +76,7 @@ you need to do the following:
}
```
-2. Create a static method on your plugin:
+2. أنشئ static method داخل plugin:
```ts
static getCompilationHooks(compilation: Compilation) : MyHooks {
@@ -120,7 +90,7 @@ you need to do the following:
}
```
-3. Call hooks like below in your plugin:
+3. استدعِ hooks داخل plugin بهذا الشكل:
```ts
const hooks = MyPlugin.getCompilationHooks(compilation);
@@ -128,7 +98,7 @@ you need to do the following:
hooks.custom.call(1, "hello");
```
-4. Other plugins can access your custom hooks too:
+4. يمكن لـ plugins أخرى الوصول إلى hooks المخصصة أيضًا:
```ts
import MyPlugin from "my-plugin";
@@ -140,16 +110,15 @@ you need to do the following:
});
```
-Again, see the [documentation](https://github.com/webpack/tapable) for `tapable` to learn more about the
-different hook classes and how they work.
+مرة أخرى، راجع [توثيق tapable](https://github.com/webpack/tapable) لمعرفة أنواع hook المختلفة وطريقة عملها.
-## Reporting Progress
+## الإبلاغ عن التقدم
-Plugins can report progress via [`ProgressPlugin`](/plugins/progress-plugin/), which prints progress messages to stderr by default. In order to enable progress reporting, pass a `--progress` argument when running the [webpack CLI](/api/cli/).
+يمكن لـ plugins الإبلاغ عن التقدم عبر [`ProgressPlugin`](/plugins/progress-plugin/)، والذي يطبع رسائل التقدم إلى stderr افتراضيًا. لتفعيل إظهار التقدم، مرّر الخيار `--progress` عند تشغيل [webpack CLI](/api/cli/).
-It is possible to customize the printed output by passing different arguments to the `reportProgress` function of [`ProgressPlugin`](/plugins/progress-plugin/).
+يمكن تخصيص النص المطبوع بتمرير arguments مختلفة إلى الدالة `reportProgress` الخاصة بـ [`ProgressPlugin`](/plugins/progress-plugin/).
-To report progress, a plugin must `tap` into a hook using the `context: true` option:
+لكي يبلّغ plugin عن التقدم، يجب أن يستخدم `tap` على hook مع الخيار `context: true`:
```js
compiler.hooks.emit.tapAsync(
@@ -168,26 +137,25 @@ compiler.hooks.emit.tapAsync(
);
```
-The `reportProgress` function may be called with these arguments:
+يمكن استدعاء الدالة `reportProgress` بهذه arguments:
```js
reportProgress(percentage, ...args);
```
-- `percentage`: This argument is unused; instead, [`ProgressPlugin`](/plugins/progress-plugin/) will calculate a percentage based on the current hook.
-- `...args`: Any number of strings, which will be passed to the `ProgressPlugin` handler to be reported to the user.
+- `percentage`: هذا argument غير مستخدم مباشرة؛ بدلًا من ذلك يحسب [`ProgressPlugin`](/plugins/progress-plugin/) النسبة بناءً على hook الحالي.
+- `...args`: أي عدد من النصوص، وستُمرر إلى handler الخاص بـ `ProgressPlugin` ليتم عرضها للمستخدم.
-Note that only a subset of compiler and compilation hooks support the `reportProgress` function. See [`ProgressPlugin`](/plugins/progress-plugin/#supported-hooks) for a full list.
+انتبه إلى أن جزءًا فقط من compiler hooks وcompilation hooks يدعم الدالة `reportProgress`. راجع [`ProgressPlugin`](/plugins/progress-plugin/#supported-hooks) للقائمة الكاملة.
-## Logging
+## التسجيل
-Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/infrastructureLogging) is enabled, plugins may log messages which will be printed out in the respective logger format (stats, infrastructure).
+واجهة Logging API متاحة منذ إصدار webpack 4.37. عند تفعيل `logging` في [إعدادات stats](/configuration/stats/#statslogging)، أو عند تفعيل [`infrastructure logging`](/configuration/infrastructureLogging)، يمكن لـ plugins تسجيل رسائل تُطبع بتنسيق logger المناسب، سواء stats أو infrastructure.
-- Plugins should prefer to use `compilation.getLogger('PluginName')` for logging. This kind of logging is stored in the Stats and formatted accordingly. It can be filtered and exported by the user.
-- Plugins may use the `compiler.getInfrastructureLogger('PluginName')` for logging. Using `infrastructure` logging is not stored in the Stats and therefore not formatted. It's usually logged to the console/dashboard/GUI directly. It can be filtered by the user.
-- Plugins may use specific fallback logic for detecting logging support `compilation.getLogger ? compilation.getLogger('PluginName') : console` to provide a fallback for cases when an older webpack version is used which does not support `getLogger` method on `compilation` object.
+- يُفضّل أن تستخدم plugins الدالة `compilation.getLogger('PluginName')` للتسجيل. هذا النوع من logging يُخزّن داخل Stats ويُنسّق بناءً عليها. ويمكن للمستخدم فلترته أو تصديره.
+- يمكن لـ plugins استخدام `compiler.getInfrastructureLogger('PluginName')` للتسجيل. تسجيل `infrastructure` لا يُخزّن داخل Stats، ولذلك لا يُنسّق معها. عادةً يُسجّل مباشرةً إلى console أو dashboard أو GUI. ويمكن للمستخدم فلترته.
+- يمكن لـ plugins استخدام fallback خاص لاكتشاف دعم logging، مثل `compilation.getLogger ? compilation.getLogger('PluginName') : console`، لدعم إصدارات webpack القديمة التي لا توفر دالة `getLogger` على كائن `compilation`.
-## Next Steps
+## الخطوة التالية
-See the [compiler hooks](/api/compiler-hooks/) section for a detailed listing of all the available
-`compiler` hooks and the parameters they make available.
+راجع قسم [compiler hooks](/api/compiler-hooks/) للحصول على قائمة مفصلة بكل `compiler` hooks المتاحة والـ parameters التي توفرها.
diff --git a/src/content/api/resolvers.mdx b/src/content/api/resolvers.mdx
index 7225281dae2d..20a2612ba2c5 100644
--- a/src/content/api/resolvers.mdx
+++ b/src/content/api/resolvers.mdx
@@ -3,29 +3,22 @@ title: Resolvers
group: Plugins
sort: 15
contributors:
- - EugeneHlushko
- - chenxsan
+ - RlxChap2
---
-Resolvers are created using the `enhanced-resolve` package. The `Resolver`
-class extends the `tapable` class and uses `tapable` to provide a few hooks.
-The `enhanced-resolve` package can be used directly to create new resolvers,
-however any [`compiler` instance](/api/node/#compiler-instance) has a few resolver instances that can be
-tapped into.
+تُنشأ resolvers باستخدام حزمة `enhanced-resolve`. ترث class `Resolver` من `tapable` وتستخدمها لتوفير بعض hooks. يمكنك استخدام `enhanced-resolve` مباشرة لإنشاء resolvers جديدة، لكن كل [`compiler` instance](/api/node/#compiler-instance) يحتوي أصلًا على عدة resolver instances يمكنك استخدام hooks الخاصة بها.
-Before reading on, make sure to have a look at the
-[`enhanced-resolve`](https://github.com/webpack/enhanced-resolve) and [`tapable`](/api/plugins/#tapable) documentation.
+قبل المتابعة، من الأفضل مراجعة توثيق [`enhanced-resolve`](https://github.com/webpack/enhanced-resolve) وتوثيق [`tapable`](/api/plugins/#tapable).
-## Types
+## الأنواع
-There are three types of built-in resolvers available on the `compiler` class:
+توجد ثلاثة أنواع مدمجة من resolvers داخل class `compiler`:
-- `normal`: Resolves a module via an absolute or relative path.
-- `context`: Resolves a module within a given context.
-- `loader`: Resolves a webpack [loader](/loaders).
+- `normal`: يحل module باستخدام مسار مطلق أو نسبي.
+- `context`: يحل module داخل سياق محدد.
+- `loader`: يحل webpack [loader](/loaders).
-Depending on need, any one of these built-in resolvers, that are used by the `compiler`,
-can be customized via plugins:
+حسب حاجتك، يمكنك تخصيص أي resolver مدمج يستخدمه `compiler` عن طريق plugins:
```js
compiler.resolverFactory.hooks.resolver
@@ -35,18 +28,14 @@ compiler.resolverFactory.hooks.resolver
});
```
-Where `[type]` is one of the three resolvers mentioned above.
+حيث تكون `[type]` واحدًا من resolvers الثلاثة المذكورة أعلاه.
-See the [`enhanced-resolve` documentation](https://github.com/webpack/enhanced-resolve) for a full list of hooks and their description.
+راجع [توثيق `enhanced-resolve`](https://github.com/webpack/enhanced-resolve) للاطلاع على القائمة الكاملة للـ hooks وشرح كل واحد منها.
-## Configuration Options
+## خيارات الإعداد
-The resolvers mentioned above can also be customized via a configuration file
-with the [`resolve`](/configuration/resolve/) or [`resolveLoader`](/configuration/resolve/#resolveloader) options. These options allow
-users to change the resolving behavior through a variety of options including
-through resolve `plugins`.
+يمكن أيضًا تخصيص resolvers المذكورة أعلاه من ملف الإعدادات باستخدام خياري [`resolve`](/configuration/resolve/) أو [`resolveLoader`](/configuration/resolve/#resolveloader). تسمح هذه الخيارات بتغيير طريقة حل المسارات بعدة طرق، ومنها استخدام `plugins` داخل `resolve`.
-The resolver plugins, e.g. [`DirectoryNamedPlugin`](https://github.com/shaketbaby/directory-named-webpack-plugin), can be included
-directly in `resolve.plugins` rather than using directly in [`plugins` configuration option](/configuration/plugins/#plugins).
+يمكن وضع resolver plugins، مثل [`DirectoryNamedPlugin`](https://github.com/shaketbaby/directory-named-webpack-plugin)، مباشرة داخل `resolve.plugins` بدل استخدامها في خيار الإعداد [`plugins`](/configuration/plugins/#plugins).
-T> Note that the `resolve` configuration affects the `normal` and `context` resolvers while `resolveLoader` is used to modify the `loader` resolver.
+T> لاحظ أن إعداد `resolve` يؤثر في resolvers من نوع `normal` و`context`، بينما يُستخدم `resolveLoader` لتعديل resolver الخاص بـ `loader`.
diff --git a/src/content/api/stats.mdx b/src/content/api/stats.mdx
index 673d0509419d..656799e6cb91 100644
--- a/src/content/api/stats.mdx
+++ b/src/content/api/stats.mdx
@@ -1,184 +1,179 @@
---
-title: Stats Data
+title: بيانات Stats
sort: 3
contributors:
- - skipjack
- - franjohn21
- - byzyk
- - EugeneHlushko
- - superburrito
- - chenxsan
- - rahul3v
- - snitin315
+ - RlxChap2
---
-When compiling source code with webpack, users can generate a JSON file containing statistics about modules. These statistics can be used to analyze an application's dependency graph as well as to optimize compilation speed. The file is typically generated with the following CLI command:
+عند تجميع الكود باستخدام webpack، يمكنك إنشاء ملف JSON يحتوي إحصاءات عن modules وchunks وassets. تساعدك هذه البيانات على فهم dependency graph الخاص بالتطبيق، وعلى تحسين سرعة التجميع. غالبًا يُنشأ الملف بالأمر التالي من CLI:
```bash
npx webpack --profile --json=compilation-stats.json
```
-The `--json=compilation-stats.json` flag indicates to webpack that it should emit the `compilation-stats.json` containing the dependency graph and various other build information. Typically, the `--profile` flag is also added so that a `profile` section is added to each [`modules` object](#module-objects) containing module-specific compilation stats.
+يخبر flag `--json=compilation-stats.json` webpack أن ينشئ ملف `compilation-stats.json` وفيه dependency graph ومعلومات أخرى عن عملية البناء. وغالبًا يُضاف flag `--profile` أيضًا حتى يضيف webpack قسم `profile` داخل كل كائن من [`modules`](#كائنات-module)، وفيه إحصاءات خاصة بتجميع ذلك module.
-## Structure
+## البنية
-The top-level structure of the output JSON file is fairly straightforward but there are a few nested data structures as well. Each nested structure has a dedicated section below to make this document more consumable. Note that you can click links within the top-level structure below to jump to relevant sections and documentation:
+بنية ملف JSON على المستوى الأعلى مباشرة نسبيًا، لكنها تحتوي أيضًا بعض البنى المتداخلة. لكل بنية متداخلة قسم مستقل أدناه حتى يسهل فهم الملف. يمكنك الضغط على الروابط داخل البنية العامة التالية للانتقال إلى الأقسام المرتبطة:
```json
{
- "version": "5.9.0", // Version of webpack used for the compilation
- "hash": "11593e3b3ac85436984a", // Compilation specific hash
- "time": 2469, // Compilation time in milliseconds
+ "version": "5.9.0", // إصدار webpack المستخدم في التجميع
+ "hash": "11593e3b3ac85436984a", // hash خاص بعملية التجميع
+ "time": 2469, // وقت التجميع بالميلي ثانية
"publicPath": "auto",
- "outputPath": "/", // path to webpack output directory
+ "outputPath": "/", // مسار مجلد إخراج webpack
"assetsByChunkName": {
- // Chunk name to emitted asset(s) mapping
+ // ربط اسم chunk بالـ asset أو assets الناتجة عنه
"main": ["web.js?h=11593e3b3ac85436984a"],
"named-chunk": ["named-chunk.web.js"],
"other-chunk": ["other-chunk.js", "other-chunk.css"]
},
"assets": [
- // A list of asset objects
+ // قائمة بكائنات asset
],
"chunks": [
- // A list of chunk objects
+ // قائمة بكائنات chunk
],
"modules": [
- // A list of module objects
+ // قائمة بكائنات module
],
"entryPoints": {
- // A list of entry objects
+ // قائمة بكائنات entry
},
"errors": [
- // A list of error objects
+ // قائمة بكائنات error
],
- "errorsCount": 0, // number of errors
+ "errorsCount": 0, // عدد الأخطاء
"warnings": [
- // A list of warning objects
+ // قائمة بكائنات warning
],
- "warningsCount": 0 // nummber of warnings
+ "warningsCount": 0 // عدد التحذيرات
}
```
-### Asset Objects
+
-Each `assets` object represents an `output` file emitted from the compilation. They all follow a similar structure:
+### كائنات Asset
+
+يمثل كل كائن داخل `assets` ملف `output` أنشأته عملية التجميع. تتبع هذه الكائنات بنية متشابهة:
```json
{
- "chunkNames": [], // The chunks this asset contains
- "chunks": [10, 6], // The chunk IDs this asset contains
- "comparedForEmit": false, // Indicates whether or not the asset was compared with the same file on the output file system
- "emitted": true, // Indicates whether or not the asset made it to the `output` directory
- "name": "10.web.js", // The `output` filename
- "size": 1058, // The size of the file in bytes
+ "chunkNames": [], // أسماء chunks التي يحتويها هذا asset
+ "chunks": [10, 6], // IDs الخاصة بالـ chunks التي يحتويها هذا asset
+ "comparedForEmit": false, // هل تمت مقارنة asset مع الملف نفسه في نظام ملفات الإخراج
+ "emitted": true, // هل وصل asset إلى مجلد `output`
+ "name": "10.web.js", // اسم ملف `output`
+ "size": 1058, // حجم الملف بالبايت
"info": {
- "immutable": true, // A flag telling whether the asset can be long term cached (contains a hash)
- "size": 1058, // The size in bytes, only becomes available after asset has been emitted
- "development": true, // A flag telling whether the asset is only used for development and doesn't count towards user-facing assets
- "hotModuleReplacement": true, // A flag telling whether the asset ships data for updating an existing application (HMR)
- "sourceFilename": "originalfile.js", // sourceFilename when asset was created from a source file (potentially transformed)
- "javascriptModule": true // true, when asset is javascript and an ESM
+ "immutable": true, // هل يمكن تخزين asset في cache طويل المدى لأنه يحتوي hash
+ "size": 1058, // الحجم بالبايت، ولا يظهر إلا بعد إخراج asset
+ "development": true, // هل يُستخدم asset للتطوير فقط ولا يُحسب ضمن assets التي يراها المستخدم
+ "hotModuleReplacement": true, // هل يحمل asset بيانات لتحديث تطبيق موجود باستخدام HMR
+ "sourceFilename": "originalfile.js", // اسم ملف المصدر عندما يُنشأ asset من ملف source، وقد يكون محوّلًا
+ "javascriptModule": true // true إذا كان asset ملف JavaScript وبصيغة ESM
}
}
```
-### Chunk Objects
+### كائنات Chunk
-Each `chunks` object represents a group of modules known as a [chunk](/glossary/#c). Each object follows the following structure:
+يمثل كل كائن داخل `chunks` مجموعة modules تُسمى [chunk](/glossary/#c). تتبع كل كائنات chunk البنية التالية:
```json
{
- "entry": true, // Indicates whether or not the chunk contains the webpack runtime
+ "entry": true, // هل يحتوي chunk على webpack runtime
"files": [
- // An array of filename strings that contain this chunk
+ // array من أسماء الملفات التي تحتوي هذا chunk
],
- "filteredModules": 0, // See the description in the [top-level structure](#structure) above
- "id": 0, // The ID of this chunk
- "initial": true, // Indicates whether this chunk is loaded on initial page load or [on demand](/guides/lazy-loading)
+ "filteredModules": 0, // راجع الوصف في [البنية](#البنية) أعلاه
+ "id": 0, // ID الخاص بهذا chunk
+ "initial": true, // هل يُحمّل هذا chunk عند فتح الصفحة لأول مرة أم [عند الطلب](/guides/lazy-loading)
"modules": [
- // A list of [module objects](#module-objects)
+ // قائمة [كائنات module](#كائنات-module)
"web.js?h=11593e3b3ac85436984a"
],
"names": [
- // An list of chunk names contained within this chunk
+ // قائمة أسماء chunks الموجودة داخل هذا chunk
],
"origins": [
- // See the description below...
+ // راجع الوصف أدناه
],
- "parents": [], // Parent chunk IDs
- "rendered": true, // Indicates whether or not the chunk went through Code Generation
- "size": 188057 // Chunk size in bytes
+ "parents": [], // IDs الخاصة بالـ parent chunks
+ "rendered": true, // هل مر chunk بمرحلة Code Generation
+ "size": 188057 // حجم chunk بالبايت
}
```
-The `chunks` object will also contain a list of `origins` describing how the given chunk originated. Each `origins` object follows the following schema:
+يحتوي كائن `chunks` أيضًا قائمة `origins` توضّح كيف نشأ هذا chunk. يتبع كل كائن داخل `origins` الشكل التالي:
```json
{
- "loc": "", // Lines of code that generated this chunk
- "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
- "moduleId": 0, // The ID of the module
- "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
- "moduleName": "./lib/index.web.js", // Relative path to the module
- "name": "main", // The name of the chunk
+ "loc": "", // أسطر الكود التي أنشأت هذا chunk
+ "module": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
+ "moduleId": 0, // ID الخاص بالـ module
+ "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
+ "moduleName": "./lib/index.web.js", // المسار النسبي للـ module
+ "name": "main", // اسم chunk
"reasons": [
- // A list of the same `reasons` found in [module objects](#module-objects)
+ // قائمة بنفس كائنات `reasons` الموجودة في [كائنات module](#كائنات-module)
]
}
```
-### Module Objects
+### كائنات Module
-What good would these statistics be without some description of the compiled application's actual modules? Each module in the dependency graph is represented by the following structure:
+لن تكون الإحصاءات مفيدة دون وصف modules الفعلية داخل التطبيق المجمع. يمثل كل module في dependency graph بالبنية التالية:
```json
{
"assets": [
- // A list of [asset objects](#asset-objects)
+ // قائمة [كائنات asset](#كائنات-asset)
],
- "built": true, // Indicates that the module went through [Loaders](/concepts/loaders), Parsing, and Code Generation
- "cacheable": true, // Whether or not this module is cacheable
+ "built": true, // هل مر module عبر [Loaders](/concepts/loaders) ثم Parsing ثم Code Generation
+ "cacheable": true, // هل يمكن تخزين هذا module في cache
"chunks": [
- // IDs of chunks that contain this module
+ // IDs الخاصة بالـ chunks التي تحتوي هذا module
],
- "errors": 0, // Number of errors when resolving or processing the module
- "failed": false, // Whether or not compilation failed on this module
- "id": 0, // The ID of the module (analogous to [`module.id`](/api/module-variables/#moduleid-commonjs))
- "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // A unique ID used internally
- "name": "./lib/index.web.js", // Path to the actual file
- "optional": false, // All requests to this module are with `try... catch` blocks (irrelevant with ESM)
- "prefetched": false, // Indicates whether or not the module was [prefetched](/plugins/prefetch-plugin)
+ "errors": 0, // عدد الأخطاء أثناء حل module أو معالجته
+ "failed": false, // هل فشل التجميع عند هذا module
+ "id": 0, // ID الخاص بالـ module، ويشبه [`module.id`](/api/module-variables/#moduleid-commonjs)
+ "identifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // ID فريد يستخدم داخليًا
+ "name": "./lib/index.web.js", // مسار الملف الفعلي
+ "optional": false, // هل كل requests إلى هذا module داخل كتل `try... catch`، وهذا غير مهم مع ESM
+ "prefetched": false, // هل تم [prefetch](/plugins/prefetch-plugin) لهذا module
"profile": {
- // Module specific compilation stats corresponding to the [`--profile` flag](/api/cli/#profiling) (in milliseconds)
- "building": 73, // Loading and parsing
- "dependencies": 242, // Building dependencies
- "factory": 11 // Resolving dependencies
+ // إحصاءات خاصة بتجميع module مرتبطة بـ [`--profile`](/api/cli/#profiling)، بالميلي ثانية
+ "building": 73, // التحميل والتحليل
+ "dependencies": 242, // بناء dependencies
+ "factory": 11 // حل dependencies
},
"reasons": [
- // See the description below...
+ // راجع الوصف أدناه
],
- "size": 3593, // Estimated size of the module in bytes
- "source": "// Should not break it...\r\nif(typeof...", // The stringified raw source
- "warnings": 0 // Number of warnings when resolving or processing the module
+ "size": 3593, // الحجم التقديري للـ module بالبايت
+ "source": "// Should not break it...\r\nif(typeof...", // النص الخام للمصدر بعد تحويله إلى string
+ "warnings": 0 // عدد التحذيرات أثناء حل module أو معالجته
}
```
-Every module also contains a list of `reasons` objects describing why that module was included in the dependency graph. Each "reason" is similar to the `origins` seen above in the [chunk objects](#chunk-objects) section:
+يحتوي كل module أيضًا قائمة من كائنات `reasons` توضّح سبب تضمين ذلك module في dependency graph. كل "reason" يشبه كائنات `origins` المذكورة في قسم [كائنات chunk](#كائنات-chunk):
```json
{
- "loc": "33:24-93", // Lines of code that caused the module to be included
- "module": "./lib/index.web.js", // Relative path to the module based on [context](/configuration/entry-context/#context)
- "moduleId": 0, // The ID of the module
- "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // Path to the module
- "moduleName": "./lib/index.web.js", // A more readable name for the module (used for "pretty-printing")
- "type": "require.context", // The [type of request](/api/module-methods) used
- "userRequest": "../../cases" // Raw string used for the `import` or `require` request
+ "loc": "33:24-93", // أسطر الكود التي جعلت module يُضمّن
+ "module": "./lib/index.web.js", // المسار النسبي للـ module اعتمادًا على [context](/configuration/entry-context/#context)
+ "moduleId": 0, // ID الخاص بالـ module
+ "moduleIdentifier": "(webpack)\\test\\browsertest\\lib\\index.web.js", // مسار module
+ "moduleName": "./lib/index.web.js", // اسم أسهل قراءة للـ module ويُستخدم عند تنسيق العرض
+ "type": "require.context", // [نوع request](/api/module-methods) المستخدم
+ "userRequest": "../../cases" // النص الخام المستخدم في request الخاص بـ `import` أو `require`
}
```
-### Entry Objects
+### كائنات Entry
```json
"main": {
@@ -203,9 +198,11 @@ Every module also contains a list of `reasons` objects describing why that modul
}
```
-### Errors and Warnings
+
+
+### الأخطاء والتحذيرات
-The `errors` and `warnings` properties each contain a list of objects. Each object contains a message, a stack trace and various other properties:
+تحتوي الخاصيتان `errors` و`warnings` قائمة كائنات. يحتوي كل كائن رسالة، وstack trace، وخصائص أخرى:
```json
{
@@ -247,4 +244,4 @@ The `errors` and `warnings` properties each contain a list of objects. Each obje
}
```
-W> Note that the stack traces are removed when `errorStack: false` is passed to the `toJson` method. The `errorStack` option is set to `true` by default.
+W> لاحظ أن stack traces تُزال عند تمرير `errorStack: false` إلى دالة `toJson`. القيمة الافتراضية لخيار `errorStack` هي `true`.
diff --git a/src/content/api/webpack-dev-server.mdx b/src/content/api/webpack-dev-server.mdx
index 96c99f8ab3b5..8723de7ed7ae 100644
--- a/src/content/api/webpack-dev-server.mdx
+++ b/src/content/api/webpack-dev-server.mdx
@@ -2,20 +2,20 @@
title: webpack-dev-server API
sort: 3
contributors:
- - snitin315
+ - RlxChap2
---
-`webpack-dev-server` provides a Node.js API which can be used directly in Node.js runtime.
+يوفّر `webpack-dev-server` واجهة Node.js API يمكنك استخدامها مباشرة من داخل بيئة تشغيل Node.js.
-## Installation
+## التثبيت
-To start using the `webpack-dev-server` Node.js API, first install `webpack` and `webpack-dev-server` if you haven’t yet:
+لاستخدام Node.js API الخاص بـ `webpack-dev-server`، ثبّت أولًا `webpack` و`webpack-dev-server` إذا لم يكونا مثبتين لديك:
```bash
npm install --save-dev webpack webpack-dev-server
```
-Then require the modules in your Node.js script:
+بعد ذلك استورد الحزم داخل سكربت Node.js:
```js
import webpack from "webpack";
@@ -24,7 +24,7 @@ import WebpackDevServer from "webpack-dev-server";
## start
-It instructs `webpack-dev-server` instance to start the server.
+تستخدم `start` لتشغيل الخادم من instance الخاص بـ `webpack-dev-server`.
**server.js**
@@ -45,7 +45,7 @@ const runServer = async () => {
runServer();
```
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
```bash
node server.js
@@ -53,7 +53,7 @@ node server.js
## startCallback(callback)
-It instructs `webpack-dev-server` instance to start the server and then run the callback function.
+تستخدم `startCallback(callback)` لتشغيل الخادم، ثم تنفيذ دالة `callback` بعد بدء التشغيل.
**server.js**
@@ -71,7 +71,7 @@ server.startCallback(() => {
});
```
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
```bash
node server.js
@@ -79,7 +79,7 @@ node server.js
## stop
-It instructs `webpack-dev-server` instance to stop the server.
+تستخدم `stop` لإيقاف الخادم من instance الخاص بـ `webpack-dev-server`.
**server.js**
@@ -107,7 +107,7 @@ runServer();
setTimeout(stopServer, 5000);
```
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
```bash
node server.js
@@ -115,7 +115,7 @@ node server.js
## stopCallback(callback)
-It instructs `webpack-dev-server` instance to stop the server and then run the callback function.
+تستخدم `stopCallback(callback)` لإيقاف الخادم، ثم تنفيذ دالة `callback` بعد اكتمال الإيقاف.
**server.js**
@@ -140,7 +140,7 @@ const stopServer = () =>
setTimeout(stopServer, 5000);
```
-And then run the server with the following command:
+ثم شغّل الخادم بهذا الأمر:
```bash
node server.js
@@ -148,7 +148,7 @@ node server.js
## internalIP(family: "v4" | "v6")
-Returns the internal `IPv4`/`IPv6` address asynchronously.
+ترجع هذه الدالة عنوان `IPv4` أو `IPv6` الداخلي بشكل غير متزامن.
**server.js**
@@ -168,7 +168,7 @@ logInternalIPs();
## internalIPSync(family: "v4" | "v6")
-Returns the internal `IPv4`/`IPv6` address synchronously.
+ترجع هذه الدالة عنوان `IPv4` أو `IPv6` الداخلي بشكل متزامن.
**server.js**
diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx
index 2028a8f52828..17281217cae2 100644
--- a/src/content/awesome-webpack.mdx
+++ b/src/content/awesome-webpack.mdx
@@ -1,22 +1,19 @@
---
-title: Awesome webpack
+title: قائمة Awesome webpack
sort: 2
contributors:
- - snitin315
- - licg9999
- - evenstensberg
- - mr-baraiya
+ - RlxChap2
---
-A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the [awesome](https://github.com/sindresorhus/awesome) list. Feel free to improve this list by contributing.
+قائمة منتقاة من موارد webpack ومكتباته وأدواته وتطبيقاته المميزة. استُلهمت من قائمة [awesome](https://github.com/sindresorhus/awesome). يمكنك تحسين هذه القائمة بالمساهمة فيها.
-## Webpack Ecosystem
+## منظومة Webpack
-### Support Webpack
+### دعم Webpack
-- [Webpack Open Collective](https://opencollective.com/webpack) - Help support the teams ongoing development efforts.
+- [Webpack Open Collective](https://opencollective.com/webpack) - ساعد في دعم جهود التطوير المستمرة للفريق.
-### Community
+### المجتمع
- [StackOverflow](https://stackoverflow.com/tags/webpack)
- [Medium](https://medium.com/tag/webpack)
@@ -24,185 +21,184 @@ A curated list of awesome webpack resources, libraries, tools and applications.
### Twitter
-_People passionate about Webpack (In no particular order)_
+_أشخاص مهتمون بـ Webpack، بدون ترتيب محدد_
-- [Sean T. Larkin - @TheLarkInn](https://twitter.com/TheLarkInn) TPM at [Microsoft](https://twitter.com/MSEdgeDev). Developer Advocate and webpack core team member.
-- [Juho Vepsäläinen - @bebraw](https://twitter.com/bebraw) from [SurviveJS](https://twitter.com/survivejs) and webpack core team member.
-- [Eric Clemmons - @ericclemmons](https://twitter.com/ericclemmons) VP of Software Development at [HigherEdHQ](https://twitter.com/HigherEdHQ). Webpack member.
-- [Patrick Stapleton - @gdi2290](https://twitter.com/gdi2290) from [AngularClass](https://angularclass.com), [AngularAir](https://angularair.com) and [Angular Universal](https://github.com/angular/universal). Webpack member.
-- [Kent C. Dodds - @kentcdodds](https://twitter.com/kentcdodds) from [PayPal Engineering](https://twitter.com/PayPalEng) and [JavaScript Air](https://twitter.com/JavaScriptAir). Webpack member.
-- [Johannes Ewald - @Jhnnns](https://twitter.com/Jhnnns): Webpack core team member.
-- [Joshua Wiens - @d3viant0ne](https://twitter.com/d3viant0ne): Technical Lead for [EasyMetrics](https://easymetrics.com). Webpack member.
-- [Jonathan Creamer - @jcreamer898](https://twitter.com/jcreamer898): Microsoft MVP and [Telerik](https://github.com/telerik) Developer Expert.
-- [Kees Kluskens - @keeskluskens](https://twitter.com/keeskluskens): - Software Engineer at [Code Yellow](https://codeyellow.nl), Webpack core team member.
+- [Sean T. Larkin - @TheLarkInn](https://twitter.com/TheLarkInn) يعمل TPM في [Microsoft](https://twitter.com/MSEdgeDev)، وهو Developer Advocate وعضو في فريق webpack core.
+- [Juho Vepsäläinen - @bebraw](https://twitter.com/bebraw) من [SurviveJS](https://twitter.com/survivejs)، وعضو في فريق webpack core.
+- [Eric Clemmons - @ericclemmons](https://twitter.com/ericclemmons) يشغل منصب VP of Software Development في [HigherEdHQ](https://twitter.com/HigherEdHQ)، وهو عضو في Webpack.
+- [Patrick Stapleton - @gdi2290](https://twitter.com/gdi2290) من [AngularClass](https://angularclass.com) و[AngularAir](https://angularair.com) و[Angular Universal](https://github.com/angular/universal)، وهو عضو في Webpack.
+- [Kent C. Dodds - @kentcdodds](https://twitter.com/kentcdodds) من [PayPal Engineering](https://twitter.com/PayPalEng) و[JavaScript Air](https://twitter.com/JavaScriptAir)، وهو عضو في Webpack.
+- [Johannes Ewald - @Jhnnns](https://twitter.com/Jhnnns): عضو في فريق webpack core.
+- [Joshua Wiens - @d3viant0ne](https://twitter.com/d3viant0ne): Technical Lead لدى [EasyMetrics](https://easymetrics.com)، وعضو في Webpack.
+- [Jonathan Creamer - @jcreamer898](https://twitter.com/jcreamer898): Microsoft MVP و[Telerik](https://github.com/telerik) Developer Expert.
+- [Kees Kluskens - @keeskluskens](https://twitter.com/keeskluskens): Software Engineer لدى [Code Yellow](https://codeyellow.nl)، وعضو في فريق webpack core.
-## Libraries
+## المكتبات
### Loaders
-#### File Type
-
-- [HTML Loader](https://github.com/webpack/html-loader): HTML loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Responsive Loader](https://github.com/herrstucki/responsive-loader): Loader for responsive images. -- _Maintainer_: `Jeremy Stucki` [![Github][githubicon]](https://github.com/herrstucki)
-- [SVG Url Loader](https://github.com/bhovhannes/svg-url-loader): Loader which loads SVG file as utf-8 encoded Url. -- _Maintainer_: `Hovhannes Babayan` [![Github][githubicon]](https://github.com/bhovhannes)
-- [mermaid Loader](https://github.com/popul/mermaid-loader): [mermaid](https://github.com/mermaid-js/mermaid) loader module (diagrams) for Webpack. -- _Maintainer_: `Paul Musso` [![Github][githubicon]](https://github.com/popul)
-- [wasm loader](https://github.com/ballercat/wasm-loader): wasm binary loader module for Webpack. -- _Maintainer_: `Arthur Buldauskas` [![Github][githubicon]](https://github.com/ballercat)
-- [Imagemin Loader/Plugin](https://github.com/itgalaxy/imagemin-webpack): Image minimizing loader + plugin for webpack. -- _Maintainer_: `itgalaxy inc.` [![Github][githubicon]](https://github.com/itgalaxy)
-- [Bin Exec Loader](https://github.com/milewski/bin-exec-loader): Pipe any file through any binary. -- _Maintainer_: `Rafael Milewski` [![Github][githubicon]](https://github.com/milewski)
-- [GraphQL Loader](https://github.com/stephen/graphql-loader): `.graphql` document loader. -- _Maintainer_: `Stephen Wan` [![Github][githubicon]](https://github.com/stephen)
-
-#### Component & Template
-
-- [Angular2 Template Loader](https://github.com/TheLarkInn/angular2-template-loader): Inlines html and style's in Angular2 components. -- _Maintainer_: `Sean Larkin` [![Github][githubicon]](https://github.com/TheLarkInn) [![Twitter][twittericon]](https://twitter.com/TheLarkInn)
-- [Handlebars Loader](https://github.com/pcardune/handlebars-loader): A handlebars template loader for Webpack. -- _Maintainer_: `Paul Carduner` [![Github][githubicon]](https://github.com/pcardune) [![Twitter][twittericon]](https://twitter.com/pcardune)
-- [Vue Loader](https://github.com/vuejs/vue-loader): Webpack loader for Vue.js components. -- _Maintainer_: `Vuejs Team` [![Github][githubicon]](https://github.com/vuejs) [![Twitter][twittericon]](https://twitter.com/vuejs)
-- [SVG React Loader](https://github.com/jhamlet/svg-react-loader) - Webpack SVG to React Component Loader. -- _Maintainer_: `Jerry Hamlet` [![Github][githubicon]](https://github.com/jhamlet) [![Twitter][twittericon]](https://twitter.com/jerryhamlet)
-- [Underscore Loader](https://github.com/emaphp/underscore-template-loader) - Underscore and Lodash template loader. -- _Maintainer_: `Emmanuel Antico` [![Github][githubicon]](https://github.com/emaphp) [![Twitter][twittericon]](https://twitter.com/emaphp)
-- [ngTemplate Loader](https://github.com/WearyMonkey/ngtemplate-loader) - Angular1 Template Loader. -- _Maintainer_: `Toby Rahilly` [![Github][githubicon]](https://github.com/WearyMonkey)
-- [ngInlineStylesLoader](https://github.com/seveves/ng-inline-styles-loader): Optimizes inlined css of angular components. -- _Maintainer_: `Severin Friede` [![Github][githubicon]](https://github.com/seveves)
-- [Markup-inline Loader](https://github.com/asnowwolf/markup-inline-loader) Inline SVGs to HTML -- _Maintainer_: `Zhicheng Wang` [![Github][githubicon]](https://github.com/asnowwolf)
-- [Polymer Loader](https://github.com/webpack-contrib/polymer-webpack-loader) - Loader for Polymer elements. -- _Maintainers_: `Rob Dodson` [![Github][githubicon]](https://github.com/robdodson) - `Chad Killingsworth` [![Github][githubicon]](https://github.com/ChadKillingsworth) - `Bryan Coulter` [![Github][githubicon]](https://github.com/bryandcoulter)
-- [Tag Loader](https://github.com/riot/tag-loader) - Loader for Riot tag files. -- _Maintainer_: `Riot Team` [![Github][githubicon]](https://github.com/riot) [![Twitter][twittericon]](https://twitter.com/riotjs_)
-- [Twig Loader](https://github.com/zimmo-be/twig-loader) - Twig template loader. -- _Maintainer_: `Zimmo.be Team` [![Github][githubicon]](https://github.com/zimmo-be)
-- [Auto ngTemplate Loader](https://github.com/YashdalfTheGray/auto-ngtemplate-loader): Autodetect Angular 1 templates and load them. -- _Maintainer_: `Yash Kulshrestha` [![Github][githubicon]](https://github.com/YashdalfTheGray)
-- [Pug Loader](https://github.com/pugjs/pug-loader) - Pug template loader (formerly Jade). -- _Maintainer_: `Pug Team` [![Github][githubicon]](https://github.com/pugjs)
-- [Simple Nunjucks Loader](https://github.com/ogonkov/nunjucks-loader) - Nunjucks template loader. -- _Maintainer_: `ogonkov` [![Github][githubicon]](https://github.com/ogonkov)
-- [PWA Manifest Loader](https://github.com/autopulated/webpack-pwa-manifest-loader) - PWA manifest loader. -- _Maintainer_: `autopulated` [![Github][githubicon]](https://github.com/autopulated)
+#### نوع الملف
+
+- [HTML Loader](https://github.com/webpack/html-loader): loader لـ HTML في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Responsive Loader](https://github.com/herrstucki/responsive-loader): loader للصور المتجاوبة. -- _Maintainer_: `Jeremy Stucki` [![Github][githubicon]](https://github.com/herrstucki)
+- [SVG Url Loader](https://github.com/bhovhannes/svg-url-loader): loader يحمّل ملف SVG كـ URL بترميز utf-8. -- _Maintainer_: `Hovhannes Babayan` [![Github][githubicon]](https://github.com/bhovhannes)
+- [mermaid Loader](https://github.com/popul/mermaid-loader): loader لـ [mermaid](https://github.com/mermaid-js/mermaid)، أي الرسوم البيانية، في Webpack. -- _Maintainer_: `Paul Musso` [![Github][githubicon]](https://github.com/popul)
+- [wasm loader](https://github.com/ballercat/wasm-loader): loader لملفات wasm binary في Webpack. -- _Maintainer_: `Arthur Buldauskas` [![Github][githubicon]](https://github.com/ballercat)
+- [Imagemin Loader/Plugin](https://github.com/itgalaxy/imagemin-webpack): loader وplugin لتصغير الصور في webpack. -- _Maintainer_: `itgalaxy inc.` [![Github][githubicon]](https://github.com/itgalaxy)
+- [Bin Exec Loader](https://github.com/milewski/bin-exec-loader): يمرر أي ملف عبر أي binary. -- _Maintainer_: `Rafael Milewski` [![Github][githubicon]](https://github.com/milewski)
+- [GraphQL Loader](https://github.com/stephen/graphql-loader): loader لمستندات `.graphql`. -- _Maintainer_: `Stephen Wan` [![Github][githubicon]](https://github.com/stephen)
+
+#### Components والقوالب
+
+- [Angular2 Template Loader](https://github.com/TheLarkInn/angular2-template-loader): يضمّن html وstyles داخل Angular2 components. -- _Maintainer_: `Sean Larkin` [![Github][githubicon]](https://github.com/TheLarkInn) [![Twitter][twittericon]](https://twitter.com/TheLarkInn)
+- [Handlebars Loader](https://github.com/pcardune/handlebars-loader): loader لقوالب Handlebars في Webpack. -- _Maintainer_: `Paul Carduner` [![Github][githubicon]](https://github.com/pcardune) [![Twitter][twittericon]](https://twitter.com/pcardune)
+- [Vue Loader](https://github.com/vuejs/vue-loader): loader لـ Vue.js components في Webpack. -- _Maintainer_: `Vuejs Team` [![Github][githubicon]](https://github.com/vuejs) [![Twitter][twittericon]](https://twitter.com/vuejs)
+- [SVG React Loader](https://github.com/jhamlet/svg-react-loader) - loader يحوّل SVG إلى React Component في Webpack. -- _Maintainer_: `Jerry Hamlet` [![Github][githubicon]](https://github.com/jhamlet) [![Twitter][twittericon]](https://twitter.com/jerryhamlet)
+- [Underscore Loader](https://github.com/emaphp/underscore-template-loader) - loader لقوالب Underscore وLodash. -- _Maintainer_: `Emmanuel Antico` [![Github][githubicon]](https://github.com/emaphp) [![Twitter][twittericon]](https://twitter.com/emaphp)
+- [ngTemplate Loader](https://github.com/WearyMonkey/ngtemplate-loader) - loader لقوالب Angular1. -- _Maintainer_: `Toby Rahilly` [![Github][githubicon]](https://github.com/WearyMonkey)
+- [ngInlineStylesLoader](https://github.com/seveves/ng-inline-styles-loader): يحسّن CSS المضمّن داخل Angular components. -- _Maintainer_: `Severin Friede` [![Github][githubicon]](https://github.com/seveves)
+- [Markup-inline Loader](https://github.com/asnowwolf/markup-inline-loader) يضمّن SVG داخل HTML. -- _Maintainer_: `Zhicheng Wang` [![Github][githubicon]](https://github.com/asnowwolf)
+- [Polymer Loader](https://github.com/webpack-contrib/polymer-webpack-loader) - loader لعناصر Polymer. -- _Maintainers_: `Rob Dodson` [![Github][githubicon]](https://github.com/robdodson) - `Chad Killingsworth` [![Github][githubicon]](https://github.com/ChadKillingsworth) - `Bryan Coulter` [![Github][githubicon]](https://github.com/bryandcoulter)
+- [Tag Loader](https://github.com/riot/tag-loader) - loader لملفات Riot tag. -- _Maintainer_: `Riot Team` [![Github][githubicon]](https://github.com/riot) [![Twitter][twittericon]](https://twitter.com/riotjs_)
+- [Twig Loader](https://github.com/zimmo-be/twig-loader) - loader لقوالب Twig. -- _Maintainer_: `Zimmo.be Team` [![Github][githubicon]](https://github.com/zimmo-be)
+- [Auto ngTemplate Loader](https://github.com/YashdalfTheGray/auto-ngtemplate-loader): يكتشف قوالب Angular 1 تلقائيًا ويحمّلها. -- _Maintainer_: `Yash Kulshrestha` [![Github][githubicon]](https://github.com/YashdalfTheGray)
+- [Pug Loader](https://github.com/pugjs/pug-loader) - loader لقوالب Pug، وكانت تُعرف سابقًا باسم Jade. -- _Maintainer_: `Pug Team` [![Github][githubicon]](https://github.com/pugjs)
+- [Simple Nunjucks Loader](https://github.com/ogonkov/nunjucks-loader) - loader لقوالب Nunjucks. -- _Maintainer_: `ogonkov` [![Github][githubicon]](https://github.com/ogonkov)
+- [PWA Manifest Loader](https://github.com/autopulated/webpack-pwa-manifest-loader) - loader لملف PWA manifest. -- _Maintainer_: `autopulated` [![Github][githubicon]](https://github.com/autopulated)
#### Styles
-- [Style Loader](https://github.com/webpack/style-loader): Style loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [PostCSS Loader](https://github.com/webpack/postcss-loader): PostCSS loader for Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS)
-- [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [SASS Loader](https://github.com/webpack/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik)
-- [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Stylus Loader](https://github.com/webpack/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
-- [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): Isomorphic CSS style loader for Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft)
-- [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
-- [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): Globally import SASS resources (variables, mixins, etc.). -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
-
-#### Language & Framework
-
-- [TS Loader](https://github.com/TypeStrong/ts-loader): TypeScript loader for webpack. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
-- [Coffee Loader](https://github.com/webpack/coffee-loader): Coffee loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Bootstrap Loader](https://github.com/shakacode/bootstrap-loader): Load Bootstrap styles in your Webpack bundle. -- _Maintainer_: `ShakaCode Team` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
-- [PostHTML Loader](https://github.com/posthtml/posthtml-loader): PostHTML loader for Webpack. -- _Maintainer_: `PostHTML Team` [![Github][githubicon]](https://github.com/posthtml) [![Twitter][twittericon]](https://twitter.com/PostHTML)
-- [ELM Loader](https://github.com/rtfeldman/elm-webpack-loader): Webpack loader for the Elm programming language. -- _Maintainer_: `Richard Feldman` [![Github][githubicon]](https://github.com/rtfeldman) [![Twitter][twittericon]](https://twitter.com/rtfeldman)
-- [Fengari Loader](https://github.com/fengari-lua/fengari-loader/): Run Lua code using [Fengari](https://fengari.io). -- _Maintainer_: `Daurnimator` [![Github][githubicon]](https://github.com/daurnimator) [![Twitter][twittericon]](https://twitter.com/daurnimator)
-- [MDX Loader](https://mdxjs.com/packages/loader/): MDX loader for Webpack. -- _Maintainer_: `MDX Team` [![Github][githubicon]](https://github.com/mdx-js)
-
-#### Utility
-
-- [Babel Loader](https://github.com/babel/babel-loader): Webpack plugin for Babel. -- _Maintainer_: `Babel Team` [![Github][githubicon]](https://github.com/babel) [![Twitter][twittericon]](https://twitter.com/babel)
-- [Worker Loader](https://github.com/webpack/worker-loader): Worker loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): Resolves relative paths in url() statements. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway)
-- [Import Loader](https://github.com/webpack/imports-loader): Imports loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - Converts a loaders array into a single loader string. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf)
-- [Icon Font Loader](https://github.com/vusion/icon-font-loader) - Converts svgs into font icons in CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore)
-- [Icons Loader](https://www.npmjs.com/package/icons-loader) - Generates an iconfont from SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen)
-- [Modernizr Loader](https://www.npmjs.com/package/modernizr-loader) - Get your modernizr build bundled with webpack. -- _Maintainer_: `Peerigon Devs` [![Github][githubicon]](https://github.com/peerigon)
-- [ngRouter Loader](https://github.com/shlomiassaf/ng-router-loader) - AOT capable NgModule lazy loading using angular router -- _Maintainer_: `Shlomi Assaf` [![Github][githubicon]](https://github.com/shlomiassaf) [![Twitter][twittericon]](https://twitter.com/shlomiassaf)
-- [Lingui Loader](https://github.com/lingui/js-lingui/tree/master/packages/loader) - Compile message catalogs on the fly for jsLingui, i18n library -- _Maintainer_: `Tomáš Ehrlich` [![Github][githubicon]](https://github.com/tricoder42) [![Twitter][twittericon]](https://twitter.com/tomas_ehrlich)
-- [Shell Loader](https://github.com/localjo/shell-loader) - Run an arbitrary shell script on source files. -- _Maintainer_: `Jo Sprague` [![Github][githubicon]](https://github.com/localjo)
-- [EXIF Loader](https://github.com/herschel666/exif-loader) - Extract EXIF- & IPTC-data from your JPGs during build-time. -- _Maintainer_: `Emanuel Kluge` [![Github][githubicon]](https://github.com/herschel666/exif-loader) [![Twitter][twittericon]](https://twitter.com/herschel_r)
-- [esbuild Loader](https://github.com/privatenumber/esbuild-loader) - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by [esbuild](https://github.com/evanw/esbuild). -- _Maintainer_: `Hiroki Osame` [![Github][githubicon]](https://github.com/privatenumber/esbuild-loader) [![Twitter][twittericon]](https://twitter.com/privatenumbr)
-
-#### Testing
-
-- [Karma Webpack](https://github.com/webpack/karma-webpack): Use Karma with Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Istanbul Webpack plugin](https://github.com/DxCx/webpack-istanbul-plugin): Use Istanbul instrumenter for the whole pack. -- _Maintainer_: `Hagai Cohen` [![Github][githubicon]](https://github.com/DxCx)
-
-### Integration Libraries
-
-- [Dotenv Webpack](https://github.com/mrsteele/dotenv-webpack): Compiles environment variables into your bundle via dotenv. -- _Maintainer_: `Matthew Steele` [![Github][githubicon]](https://github.com/mrsteele) [![Twitter][twittericon]](https://twitter.com/Matt_R_Steele)
-- [Terse Webpack](https://github.com/ericclemmons/terse-webpack) - Webpack simplified in a fluent API with presets. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
-- [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - Webpack bundling for SystemJS. -- _Maintainer_: `Guy Bedford` [![Github][githubicon]](https://github.com/guybedford) [![Twitter][twittericon]](https://twitter.com/guybedford)
-- [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - Run webpack through a stream interface. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
-- [Webpack Blocks](https://github.com/andywer/webpack-blocks) - Configure webpack using functional feature blocks. -- _Maintainer_: `Andy Wermke` [![Github][githubicon]](https://github.com/andywer) [![Twitter][twittericon]](https://twitter.com/andywritescode)
-- [Webpacker](https://github.com/rails/webpacker) - Official webpack gem for integration into ruby on rails projects. -- _Maintainer_: `Rails` [![Github][githubicon]](https://github.com/rails)
-- [WebpackAspnetMiddleware](https://github.com/frankwallis/WebpackAspnetMiddleware) - Development middleware for ASP.NET 5. -- _Maintainer_: `Frank Wallis` [![Github][githubicon]](https://github.com/frankwallis)
-- [Consul Key/Value Webpack](https://github.com/marlonmleite/consul-env-webpack-plugin): Compiles environment variables into your bundle via [Consul KV-store](https://www.consul.io/api/kv.html). -- _Maintainer_: `Marlon Maxwel` [![Github][githubicon]](https://github.com/marlonmleite)
+- [Style Loader](https://github.com/webpack/style-loader): loader للـ styles في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [PostCSS Loader](https://github.com/webpack/postcss-loader): loader لـ PostCSS في Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS)
+- [CSS Loader](https://github.com/webpack/css-loader): loader لـ CSS في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [SASS Loader](https://github.com/webpack/sass-loader): loader لـ SASS في Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik)
+- [Less Loader](https://github.com/webpack/less-loader): loader لـ Less في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Stylus Loader](https://github.com/webpack/stylus-loader): loader لـ Stylus في webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
+- [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): loader لـ CSS style بنمط isomorphic في Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft)
+- [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): loader يعتمد على RegExp لتصغير CSS-in-JS في Webpack بدون الحاجة إلى Babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
+- [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): يستورد SASS resources، مثل variables وmixins، بشكل عام. -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
+
+#### اللغة وأطر العمل
+
+- [TS Loader](https://github.com/TypeStrong/ts-loader): loader لـ TypeScript في webpack. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
+- [Coffee Loader](https://github.com/webpack/coffee-loader): loader لـ Coffee في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Bootstrap Loader](https://github.com/shakacode/bootstrap-loader): يحمّل Bootstrap styles داخل Webpack bundle. -- _Maintainer_: `ShakaCode Team` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
+- [PostHTML Loader](https://github.com/posthtml/posthtml-loader): loader لـ PostHTML في Webpack. -- _Maintainer_: `PostHTML Team` [![Github][githubicon]](https://github.com/posthtml) [![Twitter][twittericon]](https://twitter.com/PostHTML)
+- [ELM Loader](https://github.com/rtfeldman/elm-webpack-loader): loader في Webpack للغة Elm. -- _Maintainer_: `Richard Feldman` [![Github][githubicon]](https://github.com/rtfeldman) [![Twitter][twittericon]](https://twitter.com/rtfeldman)
+- [Fengari Loader](https://github.com/fengari-lua/fengari-loader/): يشغّل كود Lua باستخدام [Fengari](https://fengari.io). -- _Maintainer_: `Daurnimator` [![Github][githubicon]](https://github.com/daurnimator) [![Twitter][twittericon]](https://twitter.com/daurnimator)
+- [MDX Loader](https://mdxjs.com/packages/loader/): loader لـ MDX في Webpack. -- _Maintainer_: `MDX Team` [![Github][githubicon]](https://github.com/mdx-js)
+
+#### أدوات مساعدة
+
+- [Babel Loader](https://github.com/babel/babel-loader): تكامل Babel مع Webpack عبر loader. -- _Maintainer_: `Babel Team` [![Github][githubicon]](https://github.com/babel) [![Twitter][twittericon]](https://twitter.com/babel)
+- [Worker Loader](https://github.com/webpack/worker-loader): loader لـ Worker في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): يحل المسارات النسبية داخل عبارات `url()`. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway)
+- [Import Loader](https://github.com/webpack/imports-loader): loader لإضافة imports في Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - يحوّل array من loaders إلى نص loader واحد. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf)
+- [Icon Font Loader](https://github.com/vusion/icon-font-loader) - يحوّل SVGs إلى font icons داخل CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore)
+- [Icons Loader](https://www.npmjs.com/package/icons-loader) - يولّد iconfont من SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen)
+- [Modernizr Loader](https://www.npmjs.com/package/modernizr-loader) - يضمّن build الخاص بـ Modernizr مع webpack. -- _Maintainer_: `Peerigon Devs` [![Github][githubicon]](https://github.com/peerigon)
+- [ngRouter Loader](https://github.com/shlomiassaf/ng-router-loader) - يتيح lazy loading لـ NgModule عبر angular router مع دعم AOT. -- _Maintainer_: `Shlomi Assaf` [![Github][githubicon]](https://github.com/shlomiassaf) [![Twitter][twittericon]](https://twitter.com/shlomiassaf)
+- [Lingui Loader](https://github.com/lingui/js-lingui/tree/master/packages/loader) - يجمّع message catalogs أثناء التشغيل لـ jsLingui، وهي مكتبة i18n. -- _Maintainer_: `Tomáš Ehrlich` [![Github][githubicon]](https://github.com/tricoder42) [![Twitter][twittericon]](https://twitter.com/tomas_ehrlich)
+- [Shell Loader](https://github.com/localjo/shell-loader) - يشغّل أي shell script على ملفات المصدر. -- _Maintainer_: `Jo Sprague` [![Github][githubicon]](https://github.com/localjo)
+- [EXIF Loader](https://github.com/herschel666/exif-loader) - يستخرج بيانات EXIF وIPTC من ملفات JPG أثناء build. -- _Maintainer_: `Emanuel Kluge` [![Github][githubicon]](https://github.com/herschel666/exif-loader) [![Twitter][twittericon]](https://twitter.com/herschel_r)
+- [esbuild Loader](https://github.com/privatenumber/esbuild-loader) - بديل سريع جدًا لـ babel-loader وts-loader وTerser، مدعوم بـ [esbuild](https://github.com/evanw/esbuild). -- _Maintainer_: `Hiroki Osame` [![Github][githubicon]](https://github.com/privatenumber/esbuild-loader) [![Twitter][twittericon]](https://twitter.com/privatenumbr)
+
+#### الاختبار
+
+- [Karma Webpack](https://github.com/webpack/karma-webpack): استخدام Karma مع Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Istanbul Webpack plugin](https://github.com/DxCx/webpack-istanbul-plugin): استخدام Istanbul instrumenter على الحزمة كلها. -- _Maintainer_: `Hagai Cohen` [![Github][githubicon]](https://github.com/DxCx)
+
+### مكتبات التكامل
+
+- [Dotenv Webpack](https://github.com/mrsteele/dotenv-webpack): يضمّن environment variables داخل bundle عبر dotenv. -- _Maintainer_: `Matthew Steele` [![Github][githubicon]](https://github.com/mrsteele) [![Twitter][twittericon]](https://twitter.com/Matt_R_Steele)
+- [Terse Webpack](https://github.com/ericclemmons/terse-webpack) - تبسيط Webpack عبر fluent API مع presets. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
+- [SystemJS Webpack](https://github.com/guybedford/systemjs-webpack-plugin) - تحزيم Webpack لـ SystemJS. -- _Maintainer_: `Guy Bedford` [![Github][githubicon]](https://github.com/guybedford) [![Twitter][twittericon]](https://twitter.com/guybedford)
+- [Gulp Webpack Stream](https://github.com/shama/webpack-stream) - تشغيل webpack عبر stream interface. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
+- [Webpack Blocks](https://github.com/andywer/webpack-blocks) - إعداد webpack باستخدام functional feature blocks. -- _Maintainer_: `Andy Wermke` [![Github][githubicon]](https://github.com/andywer) [![Twitter][twittericon]](https://twitter.com/andywritescode)
+- [Webpacker](https://github.com/rails/webpacker) - gem رسمية لـ webpack للتكامل مع مشاريع Ruby on Rails. -- _Maintainer_: `Rails` [![Github][githubicon]](https://github.com/rails)
+- [WebpackAspnetMiddleware](https://github.com/frankwallis/WebpackAspnetMiddleware) - middleware للتطوير في ASP.NET 5. -- _Maintainer_: `Frank Wallis` [![Github][githubicon]](https://github.com/frankwallis)
+- [Consul Key/Value Webpack](https://github.com/marlonmleite/consul-env-webpack-plugin): يضمّن environment variables داخل bundle عبر [Consul KV-store](https://www.consul.io/api/kv.html). -- _Maintainer_: `Marlon Maxwel` [![Github][githubicon]](https://github.com/marlonmleite)
### Webpack Plugins
-- [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): Create global constants which can be configured at compile time. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): Prepare assets to serve with Content-Encoding. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Offline Plugin](https://github.com/NekR/offline-plugin): Offline plugin (ServiceWorker, AppCache) for Webpack. -- _Maintainer_: `Arthur Stolyar` [![Github][githubicon]](https://github.com/NekR) [![Twitter][twittericon]](https://twitter.com/nekrtemplar)
-- [Rewire Plugin](https://github.com/jhnns/rewire-webpack): Dependency injection for Webpack bundles. -- _Maintainer_: `Johannes Ewald` [![Github][githubicon]](https://github.com/jhnns) [![Twitter][twittericon]](https://twitter.com/Jhnnns)
-- [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): Simplifies creation of HTML files. -- _Maintainer_: `Jan Nicklas` [![Github][githubicon]](https://github.com/jantimon) [![Twitter][twittericon]](https://twitter.com/jantimon)
-- [Copy Webpack Plugin](https://github.com/webpack/copy-webpack-plugin): Copy files and directories in webpack. -- _Maintainer_: `Len Boyette` [![Github][githubicon]](https://github.com/kevlened) [![Twitter][twittericon]](https://twitter.com/kevlened)
-- [Split By Path](https://github.com/BohdanTkachenko/webpack-split-by-path): Split By Path Webpack Plugin. -- _Maintainer_: `Bohdan Tkachenko` [![Github][githubicon]](https://github.com/BohdanTkachenko) [![Twitter][twittericon]](https://twitter.com/bohdantkachenko)
-- [SW Precache](https://github.com/goldhand/sw-precache-webpack-plugin) - Generates a service worker to precache bundle. -- _Maintainer_: `Will Farley` [![Github][githubicon]](https://github.com/goldhand)
-- [CoreJS Plugin](https://github.com/gdi2290/core-js-webpack-plugin) - Core-JS as a webpack plugin. -- _Maintainer_: `PatrickJS` [![Github][githubicon]](https://github.com/gdi2290)
-- [Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer) - Utility that represents bundles as an interactive treemap. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r)
-- [Module Mapping](https://github.com/spartez/module-mapping-webpack-plugin) - Maps modules onto different files. -- _Maintainer_: `Spartez Team` [![Github][githubicon]](https://github.com/spartez) [![Twitter][twittericon]](https://twitter.com/thisisspartez)
-- [Serverless Webpack](https://github.com/elastic-coders/serverless-webpack) - Serverless plugin to bundle your lambdas. -- _Maintainer_: `Elastic Coders` [![Github][githubicon]](https://github.com/elastic-coders) [![Twitter][twittericon]](https://twitter.com/ElasticCoders)
-- [Prerender SPA](https://github.com/chrisvfritz/prerender-spa-plugin) - Framework-agnostic static site generation for SPAs. -- _Maintainer_: `Chris Fritz` [![Github][githubicon]](https://github.com/chrisvfritz) [![Twitter][twittericon]](https://twitter.com/chrisvfritz)
-- [Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) - Minimal, unopinionated static site generator. -- _Maintainer_: `Mark Dalgleish` [![Github][githubicon]](https://github.com/markdalgleish)
-- [SVG Sprite Plugin](https://github.com/TodayTix/svg-sprite-webpack-plugin) - Plugin for SVG sprites and icons. -- _Maintainer_: `Jeremy Tice` ([`TodayTix`](https://github.com/TodayTix)) [![Github][githubicon]](https://github.com/jetpacmonkey) [![Twitter][twittericon]](https://twitter.com/jetpacmonkey)
-- [Imagemin Webpack Plugin](https://github.com/Klathmon/imagemin-webpack-plugin) - Minify images with Imagemin. -- _Maintainer_: `Gregory Benner` [![Github][githubicon]](https://github.com/Klathmon) [![Twitter][twittericon]](https://twitter.com/Klathmon)
-- [Prepack Webpack Plugin](https://github.com/gajus/prepack-webpack-plugin) - A webpack plugin for prepack. -- _Maintainer_: `Gajus Kuizinas` [![Github][githubicon]](https://github.com/gajus)
-- [Modules CDN Webpack Plugin](https://github.com/mastilver/modules-cdn-webpack-plugin) - Dynamically load your modules from a CDN. -- _Maintainer_: `Thomas Sileghem` [![Github][githubicon]](https://github.com/mastilver)
-- [Generate package.json Plugin](https://github.com/lostpebble/generate-package-json-webpack-plugin) - Limit dependencies in a deployment `package.json` to only those that are actually being used by your bundle. -- _Maintainer_: `Paul Myburgh` [![Github][githubicon]](https://github.com/lostpebble)
-- [Progressive Web App Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest) - PWA manifest manager and generator. -- _Maintainer_: `Arthur A. Bergamaschi` [![Github][githubicon]](https://github.com/arthurbergmz)
-- [FileManager Webpack Plugin](https://github.com/gregnb/filemanager-webpack-plugin) - Copy, move, delete files and directories before and after Webpack builds -- _Maintainer_: `Gregory Nowakowski` [![Github][githubicon]](https://github.com/gregnb)
-- [Fork TS Checker Webpack Plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) - Webpack plugin that runs typescript type checker on a separate process. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
-- [Duplicate Package Checker Webpack Plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) - Warns you when multiple versions of the same package exist in your bundle -- _Maintainer_: `Darren Scerri` [![Github][githubicon]](https://github.com/darrenscerri)
-- [Circular Dependency Plugin](https://github.com/aackerman/circular-dependency-plugin) - Detect modules with circular dependencies when bundling -- _Maintainer_: `Aaron Ackerman` [![Github][githubicon]](https://github.com/aackerman)
-- [webpack-inject-plugin](https://github.com/adierkens/webpack-inject-plugin) - A webpack plugin to dynamically inject code into the bundle. -- _Maintainer_: `Adam Dierkens` [![Github][githubicon]](https://github.com/adierkens)
-- [Public Path Manipulation Plugin](https://github.com/agoldis/webpack-require-from) - control `publicPath` of dynamically loaded resources at runtime -- _Maintainer_: `Andrew Goldis` [![Github][githubicon]](https://github.com/agoldis)
-- [Build Notifier Plugin](https://github.com/roccoc/webpack-build-notifier) - Display OS-level notifications for build errors and warnings. -- _Maintainer_: `Rocco Cataldo` [![Github][githubicon]](https://github.com/roccoc)
-- [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - A plugin to remove duplicated and unused css rules -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web)
-- [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - Hot reloading while developing browser extensions -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc)
-- [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): Simple and fast multiple-htmls-generating plugin for webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
+- [DefinePlugin](https://webpack.js.org/plugins/define-plugin/): ينشئ ثوابت global يمكن ضبطها وقت compile. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Compression Plugin](https://github.com/webpack/compression-webpack-plugin): يجهز assets لتقديمها مع Content-Encoding. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Offline Plugin](https://github.com/NekR/offline-plugin): plugin للعمل offline، ويشمل ServiceWorker وAppCache، في Webpack. -- _Maintainer_: `Arthur Stolyar` [![Github][githubicon]](https://github.com/NekR) [![Twitter][twittericon]](https://twitter.com/nekrtemplar)
+- [Rewire Plugin](https://github.com/jhnns/rewire-webpack): dependency injection داخل Webpack bundles. -- _Maintainer_: `Johannes Ewald` [![Github][githubicon]](https://github.com/jhnns) [![Twitter][twittericon]](https://twitter.com/Jhnnns)
+- [HTML Webpack Plugin](https://github.com/ampedandwired/html-webpack-plugin): يبسّط إنشاء ملفات HTML. -- _Maintainer_: `Jan Nicklas` [![Github][githubicon]](https://github.com/jantimon) [![Twitter][twittericon]](https://twitter.com/jantimon)
+- [Copy Webpack Plugin](https://github.com/webpack/copy-webpack-plugin): ينسخ الملفات والمجلدات في webpack. -- _Maintainer_: `Len Boyette` [![Github][githubicon]](https://github.com/kevlened) [![Twitter][twittericon]](https://twitter.com/kevlened)
+- [Split By Path](https://github.com/BohdanTkachenko/webpack-split-by-path): plugin لتقسيم Webpack حسب المسار. -- _Maintainer_: `Bohdan Tkachenko` [![Github][githubicon]](https://github.com/BohdanTkachenko) [![Twitter][twittericon]](https://twitter.com/bohdantkachenko)
+- [SW Precache](https://github.com/goldhand/sw-precache-webpack-plugin) - يولّد service worker لعمل precache للـ bundle. -- _Maintainer_: `Will Farley` [![Github][githubicon]](https://github.com/goldhand)
+- [CoreJS Plugin](https://github.com/gdi2290/core-js-webpack-plugin) - Core-JS كـ webpack plugin. -- _Maintainer_: `PatrickJS` [![Github][githubicon]](https://github.com/gdi2290)
+- [Bundle Analyzer](https://github.com/webpack/webpack-bundle-analyzer) - أداة تعرض bundles على شكل treemap تفاعلية. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r)
+- [Module Mapping](https://github.com/spartez/module-mapping-webpack-plugin) - يربط modules بملفات مختلفة. -- _Maintainer_: `Spartez Team` [![Github][githubicon]](https://github.com/spartez) [![Twitter][twittericon]](https://twitter.com/thisisspartez)
+- [Serverless Webpack](https://github.com/elastic-coders/serverless-webpack) - plugin لـ Serverless لتحزيم lambdas. -- _Maintainer_: `Elastic Coders` [![Github][githubicon]](https://github.com/elastic-coders) [![Twitter][twittericon]](https://twitter.com/ElasticCoders)
+- [Prerender SPA](https://github.com/chrisvfritz/prerender-spa-plugin) - توليد static site لـ SPAs بدون ارتباط بإطار معين. -- _Maintainer_: `Chris Fritz` [![Github][githubicon]](https://github.com/chrisvfritz) [![Twitter][twittericon]](https://twitter.com/chrisvfritz)
+- [Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) - مولّد static site بسيط وبدون فرض آراء كثيرة. -- _Maintainer_: `Mark Dalgleish` [![Github][githubicon]](https://github.com/markdalgleish)
+- [SVG Sprite Plugin](https://github.com/TodayTix/svg-sprite-webpack-plugin) - plugin لـ SVG sprites والأيقونات. -- _Maintainer_: `Jeremy Tice` ([`TodayTix`](https://github.com/TodayTix)) [![Github][githubicon]](https://github.com/jetpacmonkey) [![Twitter][twittericon]](https://twitter.com/jetpacmonkey)
+- [Imagemin Webpack Plugin](https://github.com/Klathmon/imagemin-webpack-plugin) - يصغّر الصور باستخدام Imagemin. -- _Maintainer_: `Gregory Benner` [![Github][githubicon]](https://github.com/Klathmon) [![Twitter][twittericon]](https://twitter.com/Klathmon)
+- [Prepack Webpack Plugin](https://github.com/gajus/prepack-webpack-plugin) - webpack plugin لـ prepack. -- _Maintainer_: `Gajus Kuizinas` [![Github][githubicon]](https://github.com/gajus)
+- [Modules CDN Webpack Plugin](https://github.com/mastilver/modules-cdn-webpack-plugin) - يحمّل modules ديناميكيًا من CDN. -- _Maintainer_: `Thomas Sileghem` [![Github][githubicon]](https://github.com/mastilver)
+- [Generate package.json Plugin](https://github.com/lostpebble/generate-package-json-webpack-plugin) - يحد dependencies في `package.json` الخاص بالنشر إلى التي يستخدمها bundle فعليًا فقط. -- _Maintainer_: `Paul Myburgh` [![Github][githubicon]](https://github.com/lostpebble)
+- [Progressive Web App Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest) - مدير ومولّد PWA manifest. -- _Maintainer_: `Arthur A. Bergamaschi` [![Github][githubicon]](https://github.com/arthurbergmz)
+- [FileManager Webpack Plugin](https://github.com/gregnb/filemanager-webpack-plugin) - ينسخ وينقل ويحذف الملفات والمجلدات قبل وبعد Webpack builds. -- _Maintainer_: `Gregory Nowakowski` [![Github][githubicon]](https://github.com/gregnb)
+- [Fork TS Checker Webpack Plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) - webpack plugin يشغّل TypeScript type checker في process منفصلة. -- _Maintainer_: `TypeStrong Team` [![Github][githubicon]](https://github.com/TypeStrong)
+- [Duplicate Package Checker Webpack Plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) - يحذرك عند وجود عدة إصدارات من الحزمة نفسها داخل bundle. -- _Maintainer_: `Darren Scerri` [![Github][githubicon]](https://github.com/darrenscerri)
+- [Circular Dependency Plugin](https://github.com/aackerman/circular-dependency-plugin) - يكتشف modules ذات circular dependencies أثناء bundling. -- _Maintainer_: `Aaron Ackerman` [![Github][githubicon]](https://github.com/aackerman)
+- [webpack-inject-plugin](https://github.com/adierkens/webpack-inject-plugin) - webpack plugin لحقن الكود ديناميكيًا داخل bundle. -- _Maintainer_: `Adam Dierkens` [![Github][githubicon]](https://github.com/adierkens)
+- [Public Path Manipulation Plugin](https://github.com/agoldis/webpack-require-from) - يتحكم في `publicPath` للموارد التي تُحمّل ديناميكيًا وقت runtime. -- _Maintainer_: `Andrew Goldis` [![Github][githubicon]](https://github.com/agoldis)
+- [Build Notifier Plugin](https://github.com/roccoc/webpack-build-notifier) - يعرض إشعارات على مستوى نظام التشغيل لأخطاء وتحذيرات build. -- _Maintainer_: `Rocco Cataldo` [![Github][githubicon]](https://github.com/roccoc)
+- [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - plugin لإزالة قواعد CSS المكررة وغير المستخدمة. -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web)
+- [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - hot reloading أثناء تطوير browser extensions. -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc)
+- [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): plugin بسيط وسريع لتوليد عدة ملفات HTML في webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
- [Mini css extract plugin](https://github.com/webpack/mini-css-extract-plugin):
- Lightweight CSS extraction plugin -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib)
-- [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda)
-- [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - run any shell commands before or after webpack builds -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne)
-- [Dynamic Vendor Webpack Plugin](https://github.com/bios21/dynamic-vendor-webpack-plugin) - Gives you a way to import vendors with dynamic variable and specific code splitting. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
-- [Define Variable Webpack Plugin](https://github.com/bios21/define-variable-webpack-plugin) - Enhancement of DefinePlugin to store defined things in actual variables. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
-- [Shell Script Webpack Plugin](https://github.com/drewloomer/hook-shell-script-webpack-plugin) - A plugin for running arbitrary shell scripts when [compiler hooks](https://webpack.js.org/api/compiler-hooks/) are triggered. -- _Maintainer_ `Drew Loomer` [![Github][githubicon]](https://github.com/drewloomer) [![Twitter][twittericon]](https://twitter.com/drewloomer)
-- [Stylelint Webpack Plugin](https://github.com/webpack/stylelint-webpack-plugin): A Stylelint plugin for webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
-- [ESLint Webpack Plugin](https://github.com/webpack-contrib/eslint-webpack-plugin): A ESLint plugin for webpack
- . -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
-- [Exclude Assets Webpack Plugin](https://github.com/klaytonfaria/webpack-exclude-assets-plugin): A plugin to exclude assets from webpack output based on a path RegExp pattern. -- _Maintainer_: `Klayton Faria` [![Github][githubicon]](https://github.com/klaytonfaria)
-- [Webpack Shell Plugin Next](https://github.com/s00d/webpack-shell-plugin-next): A plugin allows you to run any shell commands before or after webpack builds. -- _Maintainer_: `Kuzmin Pavel` [![Github][githubicon]](https://github.com/s00d)
-- [Gettext Webpack Plugin](https://github.com/juanluispaz/gettext-webpack-plugin): Embed localization into your bundle using gettext. -- _Maintainer_: `Juan Luis Paz` [![Github][githubicon]](https://github.com/juanluispaz)
-- [Node Polyfill Plugin](https://github.com/Richienb/node-polyfill-webpack-plugin): Polyfill Node.js core modules. -- _Maintainer_: `Richie Bendall` [![Github][githubicon]](https://github.com/Richienb) [![Twitter][twittericon]](https://twitter.com/Richienb2)
-- [Bytenode Plugin](https://github.com/herberttn/bytenode-webpack-plugin): Compile JavaScript into bytecode using bytenode. -- _Maintainer_: `Herbert Treis Neto` [![Github][githubicon]](https://github.com/herberttn)
-- [Chrome Extension Archive Webpack Plugin](https://github.com/KeisukeYamashita/chrome-extension-archive-webpack-plugin): Create archive file to publish Chrome Extensions to Chrome Web Store. -- _Maintainer_: `KeisukeYamashita` [![Github][githubicon]](https://github.com/KeisukeYamashita)
-- [Layer-pack Webpack Plugin](https://github.com/layer-pack/layer-pack) Allow to glob imports file & directories, build mono repo apps via inheritable source code / npm packages & share webpack configs -- _Maintainer_: `Braun Nathanaël` [![Github][githubicon]](https://github.com/N8tz)
-- [webpack-typescript-directory-compile-plugin](https://github.com/ssigwart/webpack-typescript-directory-compile-plugin) Configure an source directory of typescript files and an output directory for JavaScript files. Each typescript file in the source directory and any newly added files will be compiled to individual JavaScript files. -- _Maintainer_: `Stephen Sigwart` [![Github][githubicon]](https://github.com/ssigwart)
-- [CycloneDX Webpack Plugin](https://github.com/CycloneDX/cyclonedx-webpack-plugin#readme): Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- _Maintainer_: `OWASP CycloneDX Team` [![Github][githubicon]](https://github.com/CycloneDX)
-- [Transpile Webpack Plugin](https://github.com/licg9999/transpile-webpack-plugin#readme): Transpiles input files into output files individually without bundling together. -- _Maintainer_: `Chungen Li` [![Github][githubicon]](https://github.com/licg9999) [![Twitter][twittericon]](https://twitter.com/licg9999)
-- [Manifest Extraction Plugin](https://github.com/shellscape/webpack-manifest-plugin): Generates an asset manifest after compiling webpack. -- _Maintainer_: `Andrew Powell` [![Github][githubicon]](https://github.com/shellscape)
-- [Transform Async Modules Plugin](https://github.com/steverep/transform-async-modules-webpack-plugin): A Webpack plugin to transpile async module output using Babel. Allows transpiling top level await to ES5. -- _Maintainer_: `Steve Repsher` [![Github][githubicon]](https://github.com/steverep)
-- [CSS Layering Plugin](https://github.com/kburich/css-layering-webpack-plugin): Wrap CSS in cascade layers. -- _Maintainer_: `Kresimir Buric` [![Github][githubicon]](https://github.com/kburich)
-
-### Webpack Tools
-
-- [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): Middleware which arguments a live bundle. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server): Serves a webpack app. Updates the browser on changes. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Webpack Merge](https://github.com/survivejs/webpack-merge) - Merge designed for Webpack. -- _Maintainer_: `Juho Vepsäläinen` [![Github][githubicon]](https://github.com/bebraw) [![Twitter][twittericon]](https://twitter.com/bebraw)
-- [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - Automatically install & save deps with Webpack. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
-- [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - Validates your webpack config with Joi. -- _Maintainer_: `js-dxtools Team` [![Github][githubicon]](https://github.com/js-dxtools)
-- [Webpack Config Utils](https://github.com/kentcdodds/webpack-config-utils) - Util. to make your webpack config easier to read. -- _Maintainer_: `Kent C. Dodds` [![Github][githubicon]](https://github.com/kentcdodds) [![Twitter][twittericon]](https://twitter.com/kentcdodds)
-- [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - Webpack tools and helpers for Angular 2. -- _Maintainer_: `AngularClass` [![Github][githubicon]](https://github.com/AngularClass) [![Twitter][twittericon]](https://twitter.com/AngularClass)
-- [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer) - Represents bundles as an interactive treemap. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r) [![Twitter][twittericon]](https://twitter.com/grunin_ya)
-- [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): Helpers/presets for setting up webpack with hotloading. -- _Maintainer_: `Henrik Joreteg` [![Github][githubicon]](https://github.com/HenrikJoreteg)
-- [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard): A CLI dashboard for webpack dev server. -- _Maintainer_: `Formidable Labs` [![Github][githubicon]](https://github.com/FormidableLabs)
-- [Neutrino](https://github.com/mozilla-neutrino/neutrino-dev): Combines the power of Webpack with the simplicity of presets. -- _Maintainer_: `Eli Perelman` [![Github][githubicon]](https://github.com/eliperelman)
-- [Speed Measure Plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) - Measures the speed of your webpack plugins and loaders. -- _Maintainer_: `Stephen Cook` [![Github][githubicon]](https://github.com/stephencookdev)
-- [Time Analytics Plugin](https://github.com/ShuiRuTian/time-analytics-webpack-plugin) - Analytics the time cost of loaders and plugins in webpack. Successor of Speed Measure Plugin -- _Maintainer_: `Song Gao` [![Github][githubicon]](https://github.com/ShuiRuTian)
-- [packtracker.io](https://packtracker.io/?utm_source=github&utm_medium=awesome-webpack&utm_campaign=social) - Webpack bundle analysis on every commit, report webpack stats to every pull request.
-- [BundleStats](https://github.com/relative-ci/bundle-stats): Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds. -- _Maintainer_: `Vio` [![Github][githubicon]](https://github.com/vio) [![Twitter][twittericon]](https://twitter.com/vio)
-- [Webpack Landing Generator](https://github.com/kuncevic/webpack-landing-generator): Easy way to create landing page that converts. -- _Maintainer_: `Aliaksei Kuncevic` [![Github][githubicon]](https://github.com/kuncevic) [![Twitter][twittericon]](https://twitter.com/kuncevic)
-- [Webpack Dev Server Firewall](https://github.com/funbox/webpack-dev-server-firewall): Prevents access to dev server from unknown IPs. -- _Maintainer_: `Igor Adamenko` [![Github][githubicon]](https://github.com/igoradamenko) [![Twitter][twittericon]](https://twitter.com/igoradamenko)
-- [RelativeCI](https://relative-ci.com): Run in-depth bundle analyses on every build and monitor webpack bundle size, assets, modules, and packages. [![Github][githubicon]](https://github.com/relative-ci)
-
-## Research & Training
-
-### Articles
+ plugin خفيف لاستخراج CSS. -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib)
+- [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) يولّد Webpack لكل build hash داخل الذاكرة لمعرفة هل مخرجات build متطابقة أم لا. يكتب هذا plugin ذلك hash في ملف json منفصل. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda)
+- [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - يشغّل أي shell commands قبل أو بعد webpack builds. -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne)
+- [Dynamic Vendor Webpack Plugin](https://github.com/bios21/dynamic-vendor-webpack-plugin) - يوفر طريقة لاستيراد vendors بمتغير ديناميكي وcode splitting محدد. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
+- [Define Variable Webpack Plugin](https://github.com/bios21/define-variable-webpack-plugin) - تحسين لـ DefinePlugin لتخزين الأشياء المعرّفة داخل متغيرات فعلية. -- _Maintainer_ `Lilian Saget-Lethias` [![Github][githubicon]](https://github.com/bios21) [![Twitter][twittericon]](https://twitter.com/lsagetlethias)
+- [Shell Script Webpack Plugin](https://github.com/drewloomer/hook-shell-script-webpack-plugin) - plugin لتشغيل shell scripts عشوائية عند تشغيل [compiler hooks](https://webpack.js.org/api/compiler-hooks/). -- _Maintainer_ `Drew Loomer` [![Github][githubicon]](https://github.com/drewloomer) [![Twitter][twittericon]](https://twitter.com/drewloomer)
+- [Stylelint Webpack Plugin](https://github.com/webpack/stylelint-webpack-plugin): plugin لـ Stylelint في webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
+- [ESLint Webpack Plugin](https://github.com/webpack-contrib/eslint-webpack-plugin): plugin لـ ESLint في webpack. -- _Maintainer_: `Ricardo Gobbo de Souza` [![Github][githubicon]](https://github.com/ricardogobbosouza)
+- [Exclude Assets Webpack Plugin](https://github.com/klaytonfaria/webpack-exclude-assets-plugin): plugin لاستبعاد assets من output الخاص بـ webpack بناءً على path RegExp pattern. -- _Maintainer_: `Klayton Faria` [![Github][githubicon]](https://github.com/klaytonfaria)
+- [Webpack Shell Plugin Next](https://github.com/s00d/webpack-shell-plugin-next): plugin يسمح بتشغيل أي shell commands قبل أو بعد webpack builds. -- _Maintainer_: `Kuzmin Pavel` [![Github][githubicon]](https://github.com/s00d)
+- [Gettext Webpack Plugin](https://github.com/juanluispaz/gettext-webpack-plugin): يضمّن localization داخل bundle باستخدام gettext. -- _Maintainer_: `Juan Luis Paz` [![Github][githubicon]](https://github.com/juanluispaz)
+- [Node Polyfill Plugin](https://github.com/Richienb/node-polyfill-webpack-plugin): يضيف polyfill لـ Node.js core modules. -- _Maintainer_: `Richie Bendall` [![Github][githubicon]](https://github.com/Richienb) [![Twitter][twittericon]](https://twitter.com/Richienb2)
+- [Bytenode Plugin](https://github.com/herberttn/bytenode-webpack-plugin): يجمّع JavaScript إلى bytecode باستخدام bytenode. -- _Maintainer_: `Herbert Treis Neto` [![Github][githubicon]](https://github.com/herberttn)
+- [Chrome Extension Archive Webpack Plugin](https://github.com/KeisukeYamashita/chrome-extension-archive-webpack-plugin): ينشئ archive file لنشر Chrome Extensions على Chrome Web Store. -- _Maintainer_: `KeisukeYamashita` [![Github][githubicon]](https://github.com/KeisukeYamashita)
+- [Layer-pack Webpack Plugin](https://github.com/layer-pack/layer-pack) يسمح باستخدام glob imports للملفات والمجلدات، وبناء mono repo apps عبر source code أو npm packages قابلة للوراثة، ومشاركة إعدادات webpack. -- _Maintainer_: `Braun Nathanaël` [![Github][githubicon]](https://github.com/N8tz)
+- [webpack-typescript-directory-compile-plugin](https://github.com/ssigwart/webpack-typescript-directory-compile-plugin) يضبط مجلد source لملفات TypeScript ومجلد output لملفات JavaScript. سيتم تجميع كل ملف TypeScript في مجلد source، وكذلك أي ملفات جديدة، إلى ملفات JavaScript مستقلة. -- _Maintainer_: `Stephen Sigwart` [![Github][githubicon]](https://github.com/ssigwart)
+- [CycloneDX Webpack Plugin](https://github.com/CycloneDX/cyclonedx-webpack-plugin#readme): ينشئ CycloneDX Software Bill of Materials (SBOM) من webpack bundles وقت compile. -- _Maintainer_: `OWASP CycloneDX Team` [![Github][githubicon]](https://github.com/CycloneDX)
+- [Transpile Webpack Plugin](https://github.com/licg9999/transpile-webpack-plugin#readme): يحوّل ملفات input إلى ملفات output بشكل منفرد بدون حزمها معًا. -- _Maintainer_: `Chungen Li` [![Github][githubicon]](https://github.com/licg9999) [![Twitter][twittericon]](https://twitter.com/licg9999)
+- [Manifest Extraction Plugin](https://github.com/shellscape/webpack-manifest-plugin): يولّد asset manifest بعد تجميع webpack. -- _Maintainer_: `Andrew Powell` [![Github][githubicon]](https://github.com/shellscape)
+- [Transform Async Modules Plugin](https://github.com/steverep/transform-async-modules-webpack-plugin): webpack plugin لتحويل async module output باستخدام Babel. يسمح بتحويل top level await إلى ES5. -- _Maintainer_: `Steve Repsher` [![Github][githubicon]](https://github.com/steverep)
+- [CSS Layering Plugin](https://github.com/kburich/css-layering-webpack-plugin): يغلّف CSS داخل cascade layers. -- _Maintainer_: `Kresimir Buric` [![Github][githubicon]](https://github.com/kburich)
+
+### أدوات Webpack
+
+- [Webpack Dev Middleware](https://github.com/webpack/webpack-dev-middleware): middleware يتيح bundle مباشرًا أثناء التطوير. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server): يقدم تطبيق webpack ويحدّث المتصفح عند التغييرات. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
+- [Webpack Merge](https://github.com/survivejs/webpack-merge) - أداة دمج مصممة لـ Webpack. -- _Maintainer_: `Juho Vepsäläinen` [![Github][githubicon]](https://github.com/bebraw) [![Twitter][twittericon]](https://twitter.com/bebraw)
+- [NPM Install Webpack](https://github.com/ericclemmons/npm-install-webpack-plugin) - يثبت dependencies ويحفظها تلقائيًا مع Webpack. -- _Maintainer_: `Eric Clemmons` [![Github][githubicon]](https://github.com/ericclemmons) [![Twitter][twittericon]](https://twitter.com/ericclemmons)
+- [Webpack Validator](https://github.com/js-dxtools/webpack-validator) - يتحقق من إعدادات webpack باستخدام Joi. -- _Maintainer_: `js-dxtools Team` [![Github][githubicon]](https://github.com/js-dxtools)
+- [Webpack Config Utils](https://github.com/kentcdodds/webpack-config-utils) - أدوات تجعل إعدادات webpack أسهل للقراءة. -- _Maintainer_: `Kent C. Dodds` [![Github][githubicon]](https://github.com/kentcdodds) [![Twitter][twittericon]](https://twitter.com/kentcdodds)
+- [Angular2 Webpack Toolkit](https://github.com/AngularClass/webpack-toolkit) - أدوات ومساعدات Webpack لـ Angular 2. -- _Maintainer_: `AngularClass` [![Github][githubicon]](https://github.com/AngularClass) [![Twitter][twittericon]](https://twitter.com/AngularClass)
+- [Webpack Bundle Analyzer](https://github.com/th0r/webpack-bundle-analyzer) - يعرض bundles كـ treemap تفاعلية. -- _Maintainer_: `Yuriy Grunin` [![Github][githubicon]](https://github.com/th0r) [![Twitter][twittericon]](https://twitter.com/grunin_ya)
+- [HJS Webpack](https://github.com/HenrikJoreteg/hjs-webpack): مساعدات وpresets لإعداد webpack مع hotloading. -- _Maintainer_: `Henrik Joreteg` [![Github][githubicon]](https://github.com/HenrikJoreteg)
+- [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard): dashboard في CLI لـ webpack dev server. -- _Maintainer_: `Formidable Labs` [![Github][githubicon]](https://github.com/FormidableLabs)
+- [Neutrino](https://github.com/mozilla-neutrino/neutrino-dev): يجمع قوة Webpack مع بساطة presets. -- _Maintainer_: `Eli Perelman` [![Github][githubicon]](https://github.com/eliperelman)
+- [Speed Measure Plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) - يقيس سرعة webpack plugins وloaders. -- _Maintainer_: `Stephen Cook` [![Github][githubicon]](https://github.com/stephencookdev)
+- [Time Analytics Plugin](https://github.com/ShuiRuTian/time-analytics-webpack-plugin) - يحلل تكلفة الوقت للـ loaders وplugins في webpack. وهو خليفة Speed Measure Plugin. -- _Maintainer_: `Song Gao` [![Github][githubicon]](https://github.com/ShuiRuTian)
+- [packtracker.io](https://packtracker.io/?utm_source=github&utm_medium=awesome-webpack&utm_campaign=social) - تحليل webpack bundle عند كل commit، وإرسال webpack stats إلى كل pull request.
+- [BundleStats](https://github.com/relative-ci/bundle-stats): يحلل webpack stats، مثل bundle size وassets وmodules وpackages، ويقارن النتائج بين builds مختلفة. -- _Maintainer_: `Vio` [![Github][githubicon]](https://github.com/vio) [![Twitter][twittericon]](https://twitter.com/vio)
+- [Webpack Landing Generator](https://github.com/kuncevic/webpack-landing-generator): طريقة سهلة لإنشاء landing page قابلة للتحويل. -- _Maintainer_: `Aliaksei Kuncevic` [![Github][githubicon]](https://github.com/kuncevic) [![Twitter][twittericon]](https://twitter.com/kuncevic)
+- [Webpack Dev Server Firewall](https://github.com/funbox/webpack-dev-server-firewall): يمنع الوصول إلى dev server من IPs غير معروفة. -- _Maintainer_: `Igor Adamenko` [![Github][githubicon]](https://github.com/igoradamenko) [![Twitter][twittericon]](https://twitter.com/igoradamenko)
+- [RelativeCI](https://relative-ci.com): يشغّل تحليلات bundle معمقة على كل build ويراقب حجم webpack bundle وassets وmodules وpackages. [![Github][githubicon]](https://github.com/relative-ci)
+
+## البحث والتعلم
+
+### مقالات
- Aniketh Saha | 16-Oct-19 - [Creating a Custom webpack Plugin](https://alligator.io/js/create-custom-webpack-plugin/)
- Antoine Caron | 18-Jan-19 - [Webpack : an unexpected journey](https://medium.zenika.com/webpack-an-unexpected-journey-26f987efd1c5)
@@ -223,7 +219,7 @@ _People passionate about Webpack (In no particular order)_
- Maxime Fabre | 16-Oct-15 - [Webpack your bags.](https://blog.madewithlove.be/post/webpack-your-bags/?utm_content=buffer480f4&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
- Hridayesh Sharma | 18-Aug-20 - [Webpack Setup for a JavaScript Library](https://www.loginradius.com/engineering/blog/write-a-javascript-library-using-webpack-and-babel/)
-### Videos
+### فيديوهات
- Sean Larkin JS Kongress | Apr-2-2019 - [Everything’s a plugin: Understanding webpack from the inside out](https://youtu.be/H3g0BdyVVxA)
- Colt Steele via Youtube| Mar-7-2019 - [Learn Webpack Course](https://www.youtube.com/playlist?list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8)
@@ -238,63 +234,63 @@ _People passionate about Webpack (In no particular order)_
- Tasveer Singh at TorontoJS Tech Talk | 09-Apr-15 - [Webpack.](https://www.youtube.com/watch?v=TaWKUpahFZM)
- Jeremy Lund at Mountain West JS | 28-Mar-15 - [Gift Wrap Your Code with Webpack.](https://www.youtube.com/watch?v=ANMN9M9LhNQ)
-### Courses
+### دورات
-- [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone) - Free Laracasts series by [Jeffrey Way](http://twitter.com/jeffrey_way)
-- [Webpack Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/) - Brief introduction about Webpack fundamentals by [Sean Larkin](https://twitter.com/thelarkinn)
-- [Web Performance with Webpack](https://frontendmasters.com/courses/performance-webpack/) - Solving common web performance problems using Webpack by [Sean Larkin](https://twitter.com/thelarkinn)
-- [Intro to webpack (playlist)](https://egghead.io/playlists/intro-to-webpack-4ca2d994) - Egghead.io playlist of a few videos by [Kent C. Dodds](https://twitter.com/kentcdodds) (the first is free).
-- [Angular and Webpack for modular applications](https://egghead.io/courses/angular-and-webpack-for-modular-applications) - Egghead.io course by [Kent C. Dodds](https://twitter.com/kentcdodds)
-- [Using Webpack for Production JavaScript Applications](https://egghead.io/courses/using-webpack-for-production-javascript-applications) - Egghead.io course by [Kent C. Dodds](https://twitter.com/kentcdodds) (advanced)
-- [Webpack Fundamentals](https://www.pluralsight.com/courses/webpack-fundamentals) - [Joe Eames](https://twitter.com/josepheames) for Pluralsight (intermediate)
-- [Webpack Academy](https://webpack.academy) - A comprehensive webpack learning resource.
-- [Webpack from scratch series](https://www.youtube.com/playlist?list=PLLhEJK7fQIxB2gZBIzYI50NPsAQERD9rL) on YouTube by Paris Nakita Kejser
+- [Webpack for Everyone](https://laracasts.com/series/webpack-for-everyone) - سلسلة مجانية من Laracasts يقدمها [Jeffrey Way](http://twitter.com/jeffrey_way).
+- [Webpack Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/) - مقدمة مختصرة عن أساسيات Webpack يقدمها [Sean Larkin](https://twitter.com/thelarkinn).
+- [Web Performance with Webpack](https://frontendmasters.com/courses/performance-webpack/) - حل مشاكل أداء الويب الشائعة باستخدام Webpack مع [Sean Larkin](https://twitter.com/thelarkinn).
+- [Intro to webpack (playlist)](https://egghead.io/playlists/intro-to-webpack-4ca2d994) - قائمة تشغيل من Egghead.io تضم عدة فيديوهات لـ [Kent C. Dodds](https://twitter.com/kentcdodds)، وأولها مجاني.
+- [Angular and Webpack for modular applications](https://egghead.io/courses/angular-and-webpack-for-modular-applications) - دورة من Egghead.io يقدمها [Kent C. Dodds](https://twitter.com/kentcdodds).
+- [Using Webpack for Production JavaScript Applications](https://egghead.io/courses/using-webpack-for-production-javascript-applications) - دورة متقدمة من Egghead.io يقدمها [Kent C. Dodds](https://twitter.com/kentcdodds).
+- [Webpack Fundamentals](https://www.pluralsight.com/courses/webpack-fundamentals) - دورة [Joe Eames](https://twitter.com/josepheames) على Pluralsight، مستوى متوسط.
+- [Webpack Academy](https://webpack.academy) - مورد شامل لتعلم webpack.
+- [Webpack from scratch series](https://www.youtube.com/playlist?list=PLLhEJK7fQIxB2gZBIzYI50NPsAQERD9rL) سلسلة على YouTube يقدمها Paris Nakita Kejser.
-### Books
+### كتب
-- [SurviveJS - Webpack](http://survivejs.com/webpack/introduction): Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.
+- [SurviveJS - Webpack](http://survivejs.com/webpack/introduction): كتاب مجاني يرشدك من مبتدئ في webpack إلى مستوى متقدم، ويغطي التطوير وproduction ومواضيع متقدمة.
-### Webpack Examples
+### أمثلة Webpack
-- [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples): Examples of common Webpack functionality.
+- [Webpack Examples](https://github.com/webpack/webpack/tree/master/examples): أمثلة على وظائف Webpack الشائعة.
-### Community Examples
+### أمثلة من المجتمع
#### Angular
-- [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) - A Webpack driven Angular 2 Starter kit from [AngularClass](https://github.com/AngularClass).
-- [Angular2 Webpack](https://github.com/preboot/angular2-webpack) - A complete, yet simple, starter for Angular 2 using Webpack from [Preboot](https://github.com/preboot).
-- [Angular2 Webpack Visual Studio](https://github.com/damienbod/Angular2WebpackVisualStudio) - ASP.NET Core, Angular2 with Webpack and Visual Studio from [Damien Bod](https://github.com/damienbod).
-- [Angular2 Starter](https://github.com/schempy/angular2-typescript-webpack) - Angular2 starter kit with Typescript and Webpack from [Brian Schemp](https://github.com/schempy).
-- [Angular2 Seed](https://github.com/angular/angular2-seed/) - A simple starter demonstrating the basic concepts of Angular2 from [Pawel Kozlowski](https://github.com/pkozlowski-opensource).
+- [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) - starter kit لـ Angular 2 يعمل عبر Webpack من [AngularClass](https://github.com/AngularClass).
+- [Angular2 Webpack](https://github.com/preboot/angular2-webpack) - starter كامل وبسيط لـ Angular 2 باستخدام Webpack من [Preboot](https://github.com/preboot).
+- [Angular2 Webpack Visual Studio](https://github.com/damienbod/Angular2WebpackVisualStudio) - ASP.NET Core وAngular2 مع Webpack وVisual Studio من [Damien Bod](https://github.com/damienbod).
+- [Angular2 Starter](https://github.com/schempy/angular2-typescript-webpack) - starter kit لـ Angular2 مع Typescript وWebpack من [Brian Schemp](https://github.com/schempy).
+- [Angular2 Seed](https://github.com/angular/angular2-seed/) - starter بسيط يوضح المفاهيم الأساسية في Angular2 من [Pawel Kozlowski](https://github.com/pkozlowski-opensource).
-#### Framework Agnostic
+#### بدون ارتباط بإطار معين
-- [ES6 TodoMVC with Webpack](https://github.com/kentcdodds/es6-todomvc) - Repo used to teach webpack. (Check branches). from [Kent C. Dodds](https://github.com/kentcdodds).
+- [ES6 TodoMVC with Webpack](https://github.com/kentcdodds/es6-todomvc) - مستودع يُستخدم لتعليم webpack. راجع الفروع. من [Kent C. Dodds](https://github.com/kentcdodds).
#### React
-- [Create React App](https://github.com/facebookincubator/create-react-app) - Create React apps with no build configuration from [Dan Abramov](https://github.com/gaearon).
-- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) - Isomorphic web app boilerplate from [Kriasoft Team](https://github.com/kriasoft).
-- [React Redux Universal](https://github.com/erikras/react-redux-universal-hot-example) - A starter boilerplate for a universal webapp from [Erik Rasmussen](https://github.com/erikras).
-- [Frontend Boilerplate](https://github.com/tj/frontend-boilerplate) - A boilerplate of things that mostly shouldn't exist from [TJ Holowaychuk](https://github.com/tj).
-- [ReactGo](https://github.com/reactGo/reactGo) - Your One-Stop solution for a full-stack universal Redux from [Ken Ding](https://github.com/choonkending).
-- [React Native Calculator](https://github.com/benoitvallon/react-native-nw-react-calculator) - Mobile, desktop and website Apps with the same code from [Benoit Vallon](https://github.com/benoitvallon).
-- [React Cordova Boilerplate](https://github.com/unimonkiez/react-cordova-boilerplate) - TodoMVC example for React with Cordova from [Yuval Saraf](https://github.com/unimonkiez).
-- [React Universally](https://github.com/ctrlplusb/react-universally) - A starter kit giving you the minimum for a production ready universal react application.
-- [Razzle Material-UI Styled Example](https://github.com/kireerik/razzle-material-ui-styled-example) - With Styled Components using Express with compression from [Erik Engi](https://github.com/kireerik).
-- [Read](https://github.com/logustra/read) - A highly scalable react boilerplate from [logustra](https://github.com/logustra)
-- [@route-resource-preload/webpack-plugin](https://github.com/AwesomeDevin/route-resource-preload/tree/main/packages/webpack-plugin) - Focus on improving the first screen loading speed of applications and providing the best user experience, inspiration comes from the preloading of NextJS from [Devin Deng](https://github.com/AwesomeDevin).
+- [Create React App](https://github.com/facebookincubator/create-react-app) - إنشاء تطبيقات React بدون إعداد build من [Dan Abramov](https://github.com/gaearon).
+- [React Starter Kit](https://github.com/kriasoft/react-starter-kit) - boilerplate لتطبيق ويب isomorphic من [Kriasoft Team](https://github.com/kriasoft).
+- [React Redux Universal](https://github.com/erikras/react-redux-universal-hot-example) - starter boilerplate لتطبيق ويب universal من [Erik Rasmussen](https://github.com/erikras).
+- [Frontend Boilerplate](https://github.com/tj/frontend-boilerplate) - boilerplate لأشياء غالبًا لا ينبغي أن تكون موجودة من [TJ Holowaychuk](https://github.com/tj).
+- [ReactGo](https://github.com/reactGo/reactGo) - حل كامل لتطبيق full-stack universal Redux من [Ken Ding](https://github.com/choonkending).
+- [React Native Calculator](https://github.com/benoitvallon/react-native-nw-react-calculator) - تطبيقات mobile وdesktop وweb بالكود نفسه من [Benoit Vallon](https://github.com/benoitvallon).
+- [React Cordova Boilerplate](https://github.com/unimonkiez/react-cordova-boilerplate) - مثال TodoMVC لـ React مع Cordova من [Yuval Saraf](https://github.com/unimonkiez).
+- [React Universally](https://github.com/ctrlplusb/react-universally) - starter kit يعطيك الحد الأدنى لتطبيق React universal جاهز للـ production.
+- [Razzle Material-UI Styled Example](https://github.com/kireerik/razzle-material-ui-styled-example) - مثال يستخدم Styled Components وExpress مع compression من [Erik Engi](https://github.com/kireerik).
+- [Read](https://github.com/logustra/read) - boilerplate لـ React قابل للتوسع بدرجة عالية من [logustra](https://github.com/logustra).
+- [@route-resource-preload/webpack-plugin](https://github.com/AwesomeDevin/route-resource-preload/tree/main/packages/webpack-plugin) - يركز على تحسين سرعة تحميل الشاشة الأولى للتطبيقات وتقديم أفضل تجربة مستخدم، وفكرته مستلهمة من preloading في NextJS، من [Devin Deng](https://github.com/AwesomeDevin).
#### Vue
-- [Vuad](https://github.com/logustra/vuad) - A highly scalable vue boilerplate from [logustra](https://github.com/logustra)
+- [Vuad](https://github.com/logustra/vuad) - boilerplate لـ Vue قابل للتوسع بدرجة عالية من [logustra](https://github.com/logustra).
-### Other
+### أخرى
-- [Juho, Johannes, Tobias & Sean on JavaScript Air](http://jsair.io/webpack) - [JavaScript Air](https://javascriptair.com) podcast
-- [Webpack interview questions](https://github.com/styopdev/webpack-interview-questions) - Interview questions with answers.
-- [Visual config tool for webpack](https://webpack.jakoblind.no) - A visual tool for creating webpack configs in your browser
+- [Juho, Johannes, Tobias & Sean on JavaScript Air](http://jsair.io/webpack) - حلقة podcast على [JavaScript Air](https://javascriptair.com).
+- [Webpack interview questions](https://github.com/styopdev/webpack-interview-questions) - أسئلة مقابلات عن Webpack مع إجاباتها.
+- [Visual config tool for webpack](https://webpack.jakoblind.no) - أداة مرئية لإنشاء إعدادات webpack داخل المتصفح.
[twittericon]: https://img.shields.io/badge/-%231DA1F2?style=flat-round&logo=x&logoColor=white
[githubicon]: https://img.shields.io/badge/-181717?style=flat-round&logo=github&logoColor=white
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..b2dc43a938fc 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 `
```
-The comment value is parsed with the same context the JS and CSS parsers use, so non-boolean values raise an `UnsupportedFeatureWarning`.
+تُقرأ قيمة التعليق بالسياق نفسه الذي تستخدمه parsers الخاصة بـ JS وCSS، لذلك القيم غير boolean ستصدر `UnsupportedFeatureWarning`.
+
+
-## TypeScript Support (Experimental)
+## دعم TypeScript التجريبي
-W> **This feature is experimental and depends on a recent Node.js.** It requires Node.js 22.6 or later for the stable `module.stripTypeScriptTypes` API. The transform handles only erasable TypeScript syntax (see limitations below). For anything else, keep using `ts-loader` or `swc-loader`.
+W> **هذه الميزة تجريبية وتعتمد على إصدار حديث من Node.js.** تتطلب Node.js 22.6 أو أحدث لاستخدام API المستقرة `module.stripTypeScriptTypes`. يعالج التحويل syntax الخاص بـ TypeScript القابل للإزالة فقط. للسيناريوهات الأخرى، استمر باستخدام `ts-loader` أو `swc-loader`.
-Webpack 5.107 adds first-class TypeScript support behind a new `experiments.typescript` flag. With it enabled, webpack compiles `.ts`, `.cts`, and `.mts` files directly through Node.js's built-in [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options), no external loader required. The flag is also turned on automatically by [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
+يضيف Webpack 5.107 دعمًا مباشرًا لـ TypeScript خلف flag جديد باسم `experiments.typescript`. عند تفعيله، يجمّع webpack ملفات `.ts` و`.cts` و`.mts` مباشرة عبر [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options) المدمجة في Node.js، بدون loader خارجي. كما يتم تفعيل flag تلقائيًا بواسطة [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
```js
// webpack.config.js
@@ -175,17 +189,21 @@ export default {
};
```
-Enabling the flag also wires up sensible defaults: rules for `.ts` / `.cts` / `.mts`, `.ts` added to extension resolution before `.js`, `extensionAlias` so `import "./foo.js"` also tries `./foo.ts`, `tsconfig.json` resolution, and the `"typescript"` conditional-exports key for monorepos that ship `.ts` sources.
+تفعيل flag يربط أيضًا defaults مناسبة: rules لملفات `.ts` / `.cts` / `.mts`، وإضافة `.ts` إلى extension resolution قبل `.js`، و`extensionAlias` حتى يجرب `import "./foo.js"` الملف `./foo.ts` أيضًا، وحل `tsconfig.json`، ومفتاح conditional exports باسم `"typescript"` للـ monorepos التي تنشر مصادر `.ts`.
+
+التحويل **يزيل الأنواع فقط**: لا يوجد type checking، ولا JSX / `.tsx`، ولا syntax غير قابلة للإزالة مثل `enum` و`namespace` وparameter-property constructors وdecorator metadata. هذه هي القيود نفسها التي يفرضها TypeScript مع [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly). لفحص الأنواع، استخدم flag مع `tsc --noEmit` أو [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). ولـ JSX أو syntax غير قابلة للإزالة، استمر باستخدام `ts-loader` أو `swc-loader`.
-The transform only **erases types**: no type checking, no JSX / `.tsx`, and no non-erasable syntax (`enum`, `namespace`, parameter-property constructors, decorator metadata). These are the same constraints TypeScript enforces with [`erasableSyntaxOnly`](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly). For type checking, pair the flag with `tsc --noEmit` or [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). For JSX or non-erasable syntax, keep using `ts-loader` or `swc-loader`.
+راجع [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) للإعداد المدمج، و[`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) لاستخدام `ts-loader` كخيار fallback.
-See [`examples/typescript`](https://github.com/webpack/webpack/tree/main/examples/typescript) for the built-in setup and [`examples/typescript-non-erasable`](https://github.com/webpack/webpack/tree/main/examples/typescript-non-erasable) for the `ts-loader` fallback.
+
-## CSS Improvements
+## تحسينات CSS
-### Scope Hoisting for CSS Modules
+
-Module concatenation (also known as scope hoisting) used to be a JavaScript-only optimization. Even with `experiments.css` enabled, CSS Modules pulled into a concatenated bundle still produced separate runtime instances. Starting with 5.107, the same optimization applies to CSS Modules whose export type is `text`, `css-style-sheet`, `style`, or `link`. The result is lower runtime overhead and smaller output in CSS-heavy bundles.
+### Scope hoisting لـ CSS Modules
+
+كانت module concatenation، والمعروفة أيضًا باسم scope hoisting، تحسينًا خاصًا بـ JavaScript فقط. وحتى مع تفعيل `experiments.css`، كانت CSS Modules الداخلة في bundle مدمج تنتج runtime instances منفصلة. ابتداءً من 5.107، ينطبق التحسين نفسه على CSS Modules التي يكون export type الخاص بها `text` أو `css-style-sheet` أو `style` أو `link`. النتيجة runtime overhead أقل وoutput أصغر في bundles التي تحتوي CSS بكثافة.
```js
module.exports = {
@@ -207,9 +225,11 @@ module.exports = {
};
```
-### Pure Mode for CSS Modules
+
+
+### وضع pure في CSS Modules
-A new `pure` parser option for `css/module` and `css/auto` mirrors the strict pure mode of `postcss-modules-local-by-default`. When enabled, every selector must contain at least one local class or id; otherwise webpack raises a build error. The point is to catch accidentally global selectors in CSS Modules before they make it into production.
+خيار parser جديد باسم `pure` لـ `css/module` و`css/auto` يحاكي strict pure mode في `postcss-modules-local-by-default`. عند تفعيله، يجب أن يحتوي كل selector على class أو id محلي واحد على الأقل، وإلا سيرفع webpack خطأ build. الهدف هو اكتشاف selectors العالمية غير المقصودة داخل CSS Modules قبل وصولها إلى production.
```js
module.exports = {
@@ -224,33 +244,35 @@ module.exports = {
};
```
-Two comments offer opt-outs when you need them. The first suppresses the check for a single rule:
+يوجد تعليقان للخروج من هذا الفحص عند الحاجة. الأول يعطّل الفحص لقاعدة واحدة:
```css
/* cssmodules-pure-ignore */
a {
- /* suppressed only for this rule */
+ /* معطّل لهذه القاعدة فقط */
color: blue;
}
```
-The second, placed among the leading comments of a file before any rule, disables the check for the entire file:
+والثاني، عند وضعه ضمن التعليقات الأولى في الملف قبل أي قاعدة، يعطّل الفحص للملف كاملًا:
```css
/* cssmodules-pure-no-check */
-/* disables pure mode for this file */
+/* يعطل pure mode لهذا الملف */
a {
- /* would normally fail under pure mode */
+ /* كان سيفشل عادةً تحت pure mode */
color: red;
}
```
-Nested rules inside a local-bearing ancestor count as pure-compliant, `&` resolves to the parent rule's purity, and `@keyframes` and `@counter-style` bodies are exempt.
+القواعد المتداخلة داخل ancestor يحتوي على local class تُعد متوافقة مع pure mode، و`&` يُحل إلى purity الخاصة بالـ parent rule، كما تُستثنى أجسام `@keyframes` و`@counter-style`.
-### `@value` in URLs and `@import`
+
-CSS Modules `@value` identifiers can now be used as the path argument to `@import` and inside `url()` references. This makes it easy to define shared paths and assets once and reuse them across stylesheets.
+### `@value` داخل URLs و`@import`
+
+يمكن الآن استخدام identifiers الخاصة بـ `@value` في CSS Modules كمسار داخل `@import` وداخل مراجع `url()`. هذا يسهل تعريف المسارات وassets المشتركة مرة واحدة وإعادة استخدامها بين stylesheets.
```css
@value path: "./other.module.css";
@@ -263,11 +285,13 @@ CSS Modules `@value` identifiers can now be used as the path argument to `@impor
}
```
-Both quoted (`"./x"`, `'./x'`) and bare (`./x`) forms of the value work. Whichever form you write is unwrapped and resolved as a module request, so the asset flows through the normal webpack resolver and asset pipeline instead of being left as a literal identifier.
+تعمل الصيغ المقتبسة (`"./x"` و`'./x'`) والصيغ غير المقتبسة (`./x`) للقيمة. أي صيغة تكتبها تُفك وتُحل كـ module request، لذلك يمر asset عبر resolver ومسار assets المعتادين بدل أن يبقى identifier حرفيًا.
+
+
-### Multiple Aliases via `exportsConvention`
+### عدة aliases عبر `exportsConvention`
-The function form of `generator.exportsConvention` for CSS Modules now accepts `string[]` in addition to `string`. Returning an array exports the local class under every name in the array, matching `css-loader`'s behavior. This is handy when you want to expose multiple aliases for a single class, for example both the original name and an uppercase version.
+أصبح شكل الدالة في `generator.exportsConvention` الخاص بـ CSS Modules يقبل `string[]` إلى جانب `string`. إرجاع array يصدر local class بكل اسم داخل array، بما يطابق سلوك `css-loader`. هذا مفيد عندما تريد توفير عدة aliases لـ class واحد، مثل الاسم الأصلي ونسخة بحروف كبيرة.
```js
module.exports = {
@@ -283,16 +307,18 @@ module.exports = {
```
```js
-// Usage in JS
+// الاستخدام في JS
import styles from "./button.module.css";
console.log(styles.btn); // hashed class
-console.log(styles.BTN); // same hashed class, uppercase alias
+console.log(styles.BTN); // hashed class نفسه مع alias بحروف كبيرة
```
-### `linkInsert` Hook
+
+
+### hook باسم `linkInsert`
-If you've ever wanted to control where webpack inserts a stylesheet `` in the document, you now have a hook for it. `CssLoadingRuntimeModule.getCompilationHooks(compilation)` exposes a new `linkInsert` hook. It receives the default insertion source (`document.head.appendChild(link);`) and the chunk, and returns the JS used to attach the link.
+إذا أردت يومًا التحكم في المكان الذي يضيف فيه webpack وسم `` الخاص بـ stylesheet داخل document، أصبح لديك hook لذلك. يعرض `CssLoadingRuntimeModule.getCompilationHooks(compilation)` hook جديدًا باسم `linkInsert`. يستقبل مصدر الإدراج الافتراضي، وهو `document.head.appendChild(link);`، وكذلك chunk، ويرجع JS المستخدم لإرفاق link.
```js
const webpack = require("webpack");
@@ -303,7 +329,7 @@ class MyLinkInsertPlugin {
const hooks =
webpack.web.CssLoadingRuntimeModule.getCompilationHooks(compilation);
- // Override the default `document.head.appendChild(link);`
+ // استبدال `document.head.appendChild(link);` الافتراضي
hooks.linkInsert.tap(
"MyLinkInsertPlugin",
(source, chunk) =>
@@ -319,13 +345,15 @@ module.exports = {
};
```
-The hook is a `SyncWaterfallHook<[string, Chunk]>`. Return the default `source` to keep the original behavior, or return your own JS to override where (and how) the link is attached.
+الـ hook من نوع `SyncWaterfallHook<[string, Chunk]>`. أرجع `source` الافتراضي للحفاظ على السلوك الأصلي، أو أرجع JS خاصًا بك لتغيير مكان إرفاق link وطريقته.
-### `orderModules` Hook
+
-When a chunk pulls in CSS from several files, webpack's default ordering is a topological sort of their import graph. That's the right call in most cases, but on real-world projects the import graph can be ambiguous enough to trigger the "Conflicting order between CSS …" warning, with no clean way out short of restructuring imports.
+### hook باسم `orderModules`
-A new `orderModules` hook on `CssModulesPlugin.getCompilationHooks(compilation)` gives plugin authors a deterministic escape hatch. It runs once per CSS source type (`CSS_IMPORT_TYPE` and `CSS_TYPE`) with the chunk's modules pre-sorted by full module name. Return an ordered `Module[]` to override the default, or return `undefined` to fall through to webpack's existing import-order topological sort.
+عندما يسحب chunk ملفات CSS من عدة ملفات، يكون ترتيب webpack الافتراضي topological sort لـ import graph. هذا مناسب غالبًا، لكن في مشاريع حقيقية قد يكون import graph غامضًا بما يكفي لإظهار تحذير "Conflicting order between CSS …"، بدون حل نظيف سوى إعادة هيكلة imports.
+
+يوفر hook جديد باسم `orderModules` على `CssModulesPlugin.getCompilationHooks(compilation)` مخرجًا deterministic لمؤلفي plugins. يعمل مرة لكل نوع CSS source، أي `CSS_IMPORT_TYPE` و`CSS_TYPE`، مع modules الخاصة بالـ chunk مرتبة مسبقًا حسب full module name. أرجع `Module[]` مرتبة لتجاوز الترتيب الافتراضي، أو أرجع `undefined` للرجوع إلى topological sort الحالي الخاص بـ webpack.
```js
const webpack = require("webpack");
@@ -338,9 +366,9 @@ class CssOrderByPathPlugin {
const hooks =
webpack.css.CssModulesPlugin.getCompilationHooks(compilation);
- // Modules arrive pre-sorted by full module name; return as-is for
- // a deterministic file-path order that side-steps the conflicting
- // order warning.
+ // تصل modules مرتبة مسبقًا حسب full module name. إرجاعها كما هي
+ // يعطي ترتيبًا deterministic حسب مسار الملف ويتجنب تحذير
+ // conflicting order.
hooks.orderModules.tap(
"CssOrderByPathPlugin",
(_chunk, modules) => modules,
@@ -356,15 +384,19 @@ module.exports = {
};
```
-The hook is a `SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`. The first tap to return a non-`undefined` value wins.
+الـ hook من نوع `SyncBailHook<[Chunk, Module[], Compilation], Module[] | undefined>`. أول tap يرجع قيمة غير `undefined` هو الذي يفوز.
+
+
-## JavaScript and ESM
+## JavaScript وESM
-### Anonymous Default Export Naming
+
-Webpack 5.106 introduced a fix-up that sets `.name` to `"default"` for anonymous default exports, matching the ES spec. It works correctly, but it injects unmangleable `Object.defineProperty` calls that inflate the bundle. For library consumers, who rarely rely on `.name === "default"`, that extra runtime helper is pure overhead.
+### تسمية default export المجهول
-5.107 introduces a new option, `module.parser.javascript.anonymousDefaultExportName`, to control this behavior. It defaults to `true` for applications and `false` for libraries (when `output.library` is set). Apps stay spec-compliant by default; library authors stop paying for the extra runtime helper without having to know about it.
+أضاف Webpack 5.106 إصلاحًا يضبط `.name` على `"default"` للـ anonymous default exports، بما يطابق مواصفة ES. يعمل هذا بشكل صحيح، لكنه يحقن استدعاءات `Object.defineProperty` لا يمكن تصغير أسمائها، مما يزيد حجم bundle. بالنسبة لمستهلكي المكتبات، الذين نادرًا ما يعتمدون على `.name === "default"`، يكون هذا runtime helper الإضافي تكلفة بلا فائدة كبيرة.
+
+يضيف 5.107 خيارًا جديدًا باسم `module.parser.javascript.anonymousDefaultExportName` للتحكم في هذا السلوك. تكون قيمته الافتراضية `true` للتطبيقات و`false` للمكتبات عند ضبط `output.library`. تبقى التطبيقات مطابقة للمواصفة افتراضيًا، ويتوقف مؤلفو المكتبات عن دفع تكلفة runtime helper الإضافي بدون الحاجة لمعرفة التفاصيل.
```js
// input
@@ -372,11 +404,11 @@ export default function () {
/* ... */
}
-// with `anonymousDefaultExportName: true` (default for apps)
-// the runtime sets .name = "default" matching native ESM behavior
+// مع `anonymousDefaultExportName: true`، وهي القيمة الافتراضية للتطبيقات
+// يضبط runtime قيمة .name إلى "default" لمطابقة سلوك ESM الأصلي
```
-You can override the default explicitly:
+يمكنك تجاوز القيمة الافتراضية صراحة:
```js
module.exports = {
@@ -390,11 +422,13 @@ module.exports = {
};
```
-### Preserving `defer` and `source` Phase on Externals
+
+
+### الحفاظ على مرحلتي `defer` و`source` في externals
-Webpack now preserves the `defer` and `source` import phase keywords on external dependencies in ESM output, the same way import attributes are already preserved. Previously, the phase keyword was stripped from the emitted statement, so an `import defer * as ns from "x"` against an external lost its deferred semantics in the output.
+يحافظ webpack الآن على كلمات import phase `defer` و`source` في external dependencies عند إخراج ESM، بالطريقة نفسها التي يحافظ بها على import attributes. سابقًا، كانت كلمة phase تُزال من العبارة الصادرة، لذلك كان `import defer * as ns from "x"` ضد external يفقد دلالة التأجيل في output.
-For static `module` externals, namespace defer imports and single-default source imports are now emitted as native phase syntax at the top of the bundle:
+بالنسبة لـ static `module` externals، تُصدر namespace defer imports وsingle-default source imports كصيغة phase أصلية في أعلى bundle:
```js
// webpack.config.js
@@ -415,7 +449,7 @@ import defer * as ns from "external-mod";
import source v from "external-mod";
```
-For dynamic `import` externals, `import.defer("x")` and `import.source("x")` are emitted directly:
+وبالنسبة لـ dynamic `import` externals، يتم إخراج `import.defer("x")` و`import.source("x")` مباشرة:
```text
// input
@@ -427,11 +461,11 @@ const ns = await import.defer("external-mod");
const src = await import.source("external-mod");
```
-One related improvement: the same external imported with two different phases (or attribute sets) no longer collapses into a single `ExternalModule`. Each combination produces its own emit, so neither phase is silently dropped.
+تحسين مرتبط: عندما يتم استيراد external نفسه بمرحلتين مختلفتين، أو بمجموعة attributes مختلفة، لم يعد يُدمج في `ExternalModule` واحد. كل تركيبة تنتج emit خاصًا بها، لذلك لا تضيع أي phase بصمت.
### `#__NO_SIDE_EFFECTS__` Annotation
-Webpack now supports the [`#__NO_SIDE_EFFECTS__`](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-spec.md#2-const-variable-declaration) annotation to mark functions as pure for better tree shaking. Calls to functions annotated this way can be eliminated from the bundle when their return value is unused, even if the function body is not statically analyzable as pure.
+يدعم webpack الآن annotation باسم [`#__NO_SIDE_EFFECTS__`](https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/no-side-effects-notation-spec.md#2-const-variable-declaration) لتعليم الدوال كـ pure من أجل tree shaking أفضل. يمكن حذف استدعاءات الدوال المعلّمة بهذه الطريقة من bundle عندما لا تُستخدم قيمة الإرجاع، حتى لو لم يكن جسم الدالة قابلًا للتحليل الثابت كـ pure.
{/* eslint-disable */}
@@ -453,19 +487,21 @@ export function realWork() {
// app.js
import { createLogger, realWork } from "./utils";
-// dropped, because `createLogger` is annotated and its result is unused
+// سيتم حذف هذا لأن `createLogger` معلّمة، ونتيجتها غير مستخدمة
const unused = createLogger("debug");
realWork();
```
-W> The annotation currently only takes effect **within the module where it is declared**. Cross-module propagation is planned for a future PR.
+W> تعمل annotation حاليًا فقط **داخل module الذي أُعلنت فيه**. نقلها عبر modules مخطط له في PR مستقبلية.
-## Resolver Updates
+
-Webpack now adds `"module-sync"` to the default `conditionNames` for resolver defaults, aligning with Node.js. Node.js exposes the `module-sync` community condition for synchronously-loadable ESM, and this change affects the ESM, CJS, AMD, worker, wasm, and build-dependency resolvers.
+## تحديثات resolver
-Concretely, the resolver defaults now include `module-sync` right before `module` in the condition chain:
+يضيف webpack الآن `"module-sync"` إلى `conditionNames` الافتراضية في resolver defaults، بما يتوافق مع Node.js. يوفّر Node.js شرط المجتمع `module-sync` لـ ESM القابل للتحميل بشكل متزامن، وهذا التغيير يؤثر في resolvers الخاصة بـ ESM وCJS وAMD وworker وwasm وbuild-dependency.
+
+بشكل عملي، أصبحت resolver defaults تتضمن `module-sync` مباشرة قبل `module` في سلسلة الشروط:
```js
// Before (5.106)
@@ -477,7 +513,7 @@ conditionNames: ["require", "module-sync", "module", "..."];
conditionNames: ["import", "module-sync", "module", "..."];
```
-This means packages that publish a `module-sync` export condition in their `package.json` will be picked up automatically without any additional configuration:
+هذا يعني أن الحزم التي تنشر شرط export باسم `module-sync` داخل `package.json` سيتم اختيارها تلقائيًا بدون أي إعداد إضافي:
```json
{
@@ -491,11 +527,12 @@ This means packages that publish a `module-sync` export condition in their `pack
}
```
-## Bug Fixes
+
+
+## إصلاحات الأخطاء
-Several bug fixes have been resolved since version [5.106](https://github.com/webpack/webpack/releases/tag/v5.106.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for all the details.
+تم حل عدة bugs منذ الإصدار [5.106](https://github.com/webpack/webpack/releases/tag/v5.106.0). راجع [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) لكل التفاصيل.
-## Thanks
+## شكر
-A big thank you to all our contributors and [sponsors](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
-who made Webpack 5.107 possible. Your support, whether through code contributions, documentation, or financial sponsorship, helps keep Webpack evolving and improving for everyone.
+شكر كبير لكل المساهمين و[الرعاة](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring) الذين جعلوا Webpack 5.107 ممكنًا. دعمكم، سواء عبر مساهمات الكود أو التوثيق أو الرعاية المالية، يساعد Webpack على التطور والتحسن للجميع.
diff --git a/src/content/blog/index.mdx b/src/content/blog/index.mdx
index d546e8920b44..1d753b2b3cd3 100644
--- a/src/content/blog/index.mdx
+++ b/src/content/blog/index.mdx
@@ -1,10 +1,11 @@
---
-title: Blog
+title: المدونة
sort: -1
contributors:
- - sokra
+ - ameencfw
+ - RlxChap2
---
-Read here for announcements.
+اقرأ الإعلانات هنا.
-See recent blog posts in the side bar.
+شاهد أحدث مقالات المدونة في الشريط الجانبي.
diff --git a/src/content/branding.mdx b/src/content/branding.mdx
index 4116acb1e645..bfa1e1fd4c80 100644
--- a/src/content/branding.mdx
+++ b/src/content/branding.mdx
@@ -1,35 +1,32 @@
---
-title: Branding Guidelines
+title: إرشادات الهوية البصرية
sort: 2
contributors:
- - jhnns
- - skipjack
- - rouzbeh84
- - byzyk
+ - RlxChap2
---
import BrandingSample from "../components/BrandingSample.jsx";
-Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them.
+هنا تجد إرشادات الهوية البصرية لمشروع **webpack**، مع الأصول والرخصة. للمزيد من التفاصيل وللعثور على [الرخصة](https://github.com/webpack/media/blob/master/LICENSE) التي تنظّم استخدام هذه الأصول، راجع [مستودع الوسائط الرسمي](https://github.com/webpack/media). يمكنك الضغط على أي صورة لتنزيلها.
-## The Name
+## الاسم
-Webpack can be written with a capital W when used at the start of a sentence, otherwise it should be written in lower-case letters.
+يمكن كتابة Webpack بحرف W كبير عندما يأتي في بداية الجملة. في غير ذلك، يُفضّل كتابته بحروف صغيرة: webpack.
-## Logo
+## الشعار
-The webpack logo should be placed on a white background with enough space around it like this:
+يجب وضع شعار webpack على خلفية بيضاء مع مساحة كافية حوله، مثل المثال التالي:
[svg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.jpg)
-Double the size of the inner dark blue cube to get an idea how much space the logo should have.
+لأخذ فكرة عن مقدار المساحة المطلوبة حول الشعار، تخيّل أن حجم المكعب الأزرق الداكن الداخلي قد تضاعف.
-For dark backgrounds, you can use the negative version of the logo:
+للخلفيات الداكنة، يمكنك استخدام النسخة العكسية من الشعار:
export const style = {
display: "block",
@@ -39,59 +36,59 @@ export const style = {
[svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg)
-T> Please use the **icon + text** whenever possible.
+T> استخدم نسخة **الأيقونة + النص** كلما كان ذلك ممكنًا.
-## Icon only
+## الأيقونة فقط
-**The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
+**صُممت الأيقونة للاستخدام في المساحات الضيقة. وكما ذكرنا، الأفضل استخدام الأيقونة مع النص عندما تسمح المساحة بذلك.**
[svg](https://github.com/webpack/media/blob/master/logo/icon.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon.jpg)
-Square-sized icon for bigger areas (like avatars or profile pictures):
+أيقونة مربعة للمساحات الأكبر، مثل avatars أو صور الحسابات:
[svg](https://github.com/webpack/media/blob/master/logo/icon-square-big.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-big.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-big.jpg)
-Square-sized icon for smaller areas (like favicons):
+أيقونة مربعة للمساحات الأصغر، مثل favicons:
[svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg)
-T> For those of you following our guidelines and have gotten this far, we've made a smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
+T> لمن التزم بالإرشادات ووصل إلى هنا، وفرنا نسخة أصغر مخصصة لاستخدامات custom emoji، مثل Slack أو Gitter.
-## Color Palette
+## لوحة الألوان
-The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)!
+الألوان التالية مستخدمة في الموقع بتركيبات مختلفة، وكذلك في مجموعة الملابس التي أُطلقت بمساعدة [Open Collective](https://opencollective.com/) و[Threadless](https://medium.com/u/840563ee2a56) عبر [متجر webpack الرسمي](https://webpack.threadless.com/collections/the-final-release-collection/).
-| Color Name | HEX Code | RGB Code | Sample |
+| اسم اللون | كود HEX | كود RGB | عينة |
| ------------ | ------------- | -------------------- | ---------------------------------- |
| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` | |
| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` | |
@@ -105,11 +102,11 @@ The following colors are used throughout the site in various combinations and on
| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | |
| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | |
-In addition, you can grab the following file types directly from these links:
+بالإضافة إلى ذلك، يمكنك تنزيل هذه الأنواع من الملفات مباشرة من الروابط التالية:
[psd](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.psd) | [png](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.png)
| [ai](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.ai) | [svg](https://raw.githubusercontent.com/webpack/media/master/design/webpack-palette.svg)
-## License
+## الرخصة
-The logo and the brand name are **not MIT licensed**. Please check [our LICENSE](https://github.com/webpack/media/blob/master/LICENSE) for usage guidelines.
+الشعار واسم العلامة التجارية **ليسا مرخّصين برخصة MIT**. يرجى مراجعة [LICENSE](https://github.com/webpack/media/blob/master/LICENSE) لمعرفة إرشادات الاستخدام.
diff --git a/src/content/comparison.mdx b/src/content/comparison.mdx
index 61150db89d8c..02bc203357c4 100644
--- a/src/content/comparison.mdx
+++ b/src/content/comparison.mdx
@@ -1,59 +1,54 @@
---
-title: Comparison
+title: المقارنة
sort: 1
contributors:
- - pksjce
- - bebraw
- - chrisVillanueva
- - tashian
- - simon04
- - byzyk
+ - RlxChap2
related:
- - title: JSPM vs. webpack
+ - title: JSPM مقابل webpack
url: https://ilikekillnerds.com/2015/07/jspm-vs-webpack/
- - title: webpack vs. Browserify vs. SystemJS
+ - title: webpack مقابل Browserify مقابل SystemJS
url: https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0
---
-Webpack is not the only module bundler out there. If you are choosing between using webpack or any of the bundlers below, here is a feature-by-feature comparison on how webpack fares against the current competition.
+webpack ليس أداة تحزيم الوحدات الوحيدة. إذا كنت تفاضل بين استخدام webpack أو إحدى الأدوات التالية، فهذا جدول يقارن الميزات نقطة بنقطة ويوضح كيف يقف webpack أمام المنافسين الحاليين.
-| Feature | webpack/webpack | jrburke/requirejs | substack/node-browserify | jspm/jspm-cli | rollup/rollup | brunch/brunch |
-| -------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| Additional chunks are loaded on demand | **yes** | **yes** | no | [System.import](https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemimportmodulename--normalizedparentname---promisemodule) | no | no |
-| AMD `define` | **yes** | **yes** | [deamdify](https://github.com/jaredhanson/deamdify) | yes | [rollup-plugin-amd](https://github.com/piuccio/rollup-plugin-amd) | yes |
-| AMD `require` | **yes** | **yes** | no | yes | no | yes |
-| AMD `require` loads on demand | **yes** | with manual configuration | no | yes | no | no |
-| CommonJS `exports` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes |
-| CommonJS `require` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes |
-| CommonJS `require.resolve` | **yes** | no | no | no | no | |
-| Concat in require `require("./fi" + "le")` | **yes** | no♦ | no | no | no | |
-| Debugging support | **SourceUrl, SourceMaps** | not required | SourceMaps | **SourceUrl, SourceMaps** | **SourceUrl, SourceMaps** | SourceMaps |
-| Dependencies | 19MB / 127 packages | 11MB / 118 packages | **1.2MB / 1 package** | 26MB / 131 packages | ?MB / 3 packages | |
-| ES2015 `import`/`export` | **yes** (webpack 2) | no | no | **yes** | **yes** | yes, via [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) |
-| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)** | no♦ | no | no | no | no |
-| Expressions in require (free) `require(moduleName)` | with manual configuration | no♦ | no | no | no | |
-| Generate a single bundle | **yes** | yes♦ | yes | yes | yes | yes |
-| Indirect require `var r = require; r("./file")` | **yes** | no♦ | no | no | no | |
-| Load each file separate | no | yes | no | yes | no | no |
-| Mangle path names | **yes** | no | partial | yes | not required (path names are not included in the bundle) | no |
-| Minimizing | [Terser](https://github.com/fabiosantoscode/terser) | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | yes | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch) |
-| Multi pages build with common bundle | with manual configuration | **yes** | with manual configuration | with bundle arithmetic | no | no |
-| Multiple bundles | **yes** | with manual configuration | with manual configuration | yes | no | yes |
-| Node.js built-in libs `require("path")` | **yes** | no | **yes** | **yes** | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve) | |
-| Other Node.js stuff | process, \_\_dir/filename, global | - | process, \_\_dir/filename, global | process, \_\_dir/filename, global for cjs | global ([commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)) | |
-| Plugins | **yes** | yes | **yes** | yes | yes | yes |
-| Preprocessing | **loaders** | loaders | transforms | plugin translate | plugin transforms | compilers, optimizers |
-| Replacement for browser | `web_modules`, `.web.js`, package.json field, alias configuration option | alias option | package.json field, alias option | package.json, alias option | no | |
-| Requirable files | file system | **web** | file system | through plugins | file system or through plugins | file system |
-| Runtime overhead | **243B + 20B per module + 4B per dependency** | 14.7kB + 0B per module + (3B + X) per dependency | 415B + 25B per module + (6B + 2X) per dependency | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip | **none for ES2015 modules** (other formats may have) | |
-| Watch mode | yes | not required | [watchify](https://github.com/browserify/watchify) | not needed in dev | [rollup-watch](https://github.com/rollup/rollup-watch) | yes |
+| الميزة | webpack/webpack | jrburke/requirejs | substack/node-browserify | jspm/jspm-cli | rollup/rollup | brunch/brunch |
+| ------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| تحميل chunks إضافية عند الطلب | **نعم** | **نعم** | لا | [System.import](https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemimportmodulename--normalizedparentname---promisemodule) | لا | لا |
+| AMD `define` | **نعم** | **نعم** | [deamdify](https://github.com/jaredhanson/deamdify) | نعم | [rollup-plugin-amd](https://github.com/piuccio/rollup-plugin-amd) | نعم |
+| AMD `require` | **نعم** | **نعم** | لا | نعم | لا | نعم |
+| تحميل AMD `require` عند الطلب | **نعم** | يتطلب ضبطًا يدويًا | لا | نعم | لا | لا |
+| CommonJS `exports` | **نعم** | فقط عند التغليف داخل `define` | **نعم** | نعم | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | نعم |
+| CommonJS `require` | **نعم** | فقط عند التغليف داخل `define` | **نعم** | نعم | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | نعم |
+| CommonJS `require.resolve` | **نعم** | لا | لا | لا | لا | |
+| الدمج داخل require `require("./fi" + "le")` | **نعم** | لا♦ | لا | لا | لا | |
+| دعم التصحيح | **SourceUrl, SourceMaps** | غير مطلوب | SourceMaps | **SourceUrl, SourceMaps** | **SourceUrl, SourceMaps** | SourceMaps |
+| التبعيات | 19MB / 127 حزمة | 11MB / 118 حزمة | **1.2MB / 1 حزمة** | 26MB / 131 حزمة | ?MB / 3 حزم | |
+| ES2015 `import`/`export` | **نعم** (webpack 2) | لا | لا | **نعم** | **نعم** | نعم، عبر [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) |
+| التعابير داخل require (موجهة) `require("./templates/" + template)` | **نعم (تُضمّن كل الملفات المطابقة)** | لا♦ | لا | لا | لا | لا |
+| التعابير داخل require (حرة) `require(moduleName)` | يتطلب ضبطًا يدويًا | لا♦ | لا | لا | لا | |
+| إنشاء bundle واحد | **نعم** | نعم♦ | نعم | نعم | نعم | نعم |
+| require غير مباشر `var r = require; r("./file")` | **نعم** | لا♦ | لا | لا | لا | |
+| تحميل كل ملف على حدة | لا | نعم | لا | نعم | لا | لا |
+| تغيير أسماء المسارات | **نعم** | لا | جزئيًا | نعم | غير مطلوب (أسماء المسارات لا تُضمّن في bundle) | لا |
+| التصغير (Minification) | [Terser](https://github.com/fabiosantoscode/terser) | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | نعم | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch) |
+| بناء صفحات متعددة مع bundle مشترك | يتطلب ضبطًا يدويًا | **نعم** | يتطلب ضبطًا يدويًا | باستخدام حسابات bundle | لا | لا |
+| عدة bundles | **نعم** | يتطلب ضبطًا يدويًا | يتطلب ضبطًا يدويًا | نعم | لا | نعم |
+| مكتبات Node.js المدمجة `require("path")` | **نعم** | لا | **نعم** | **نعم** | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve) | |
+| عناصر Node.js الأخرى | process, \_\_dir/filename, global | - | process, \_\_dir/filename, global | process, \_\_dir/filename, global لـ cjs | global ([commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)) | |
+| Plugins | **نعم** | نعم | **نعم** | نعم | نعم | نعم |
+| المعالجة المسبقة | **loaders** | loaders | تحويلات | تحويل عبر plugin | تحويلات عبر plugin | compilers, optimizers |
+| الاستبدال الخاص بالمتصفح | `web_modules`, `.web.js`, package.json field, alias configuration option | alias option | package.json field, alias option | package.json, alias option | لا | |
+| الملفات التي يمكن طلبها عبر require | نظام الملفات | **web** | نظام الملفات | عبر plugins | نظام الملفات أو عبر plugins | نظام الملفات |
+| الكلفة الإضافية وقت التشغيل | **243B + 20B لكل module + 4B لكل dependency** | 14.7kB + 0B لكل module + (3B + X) لكل dependency | 415B + 25B لكل module + (6B + 2X) لكل dependency | 5.5kB لـ self-executing bundles، و38kB للـ loader الكامل مع polyfill، و0 للـ plain modules، و293B لـ CJS، و139B لـ ES2015 System.register قبل gzip | **لا توجد لوحدات ES2015** (قد توجد في الصيغ الأخرى) | |
+| وضع المراقبة | نعم | غير مطلوب | [watchify](https://github.com/browserify/watchify) | غير مطلوب أثناء التطوير | [rollup-watch](https://github.com/rollup/rollup-watch) | نعم |
-♦ in production mode (opposite in development mode)
+♦ في وضع الإنتاج (والعكس في وضع التطوير)
-X is the length of the path string
+X تمثل طول سلسلة المسار.
-## Bundling vs. Loading
+## التحزيم (Bundling) مقابل التحميل (Loading)
-It's important to note some key differences between _loading_ and _bundling_ modules. A tool like [SystemJS](https://github.com/systemjs/systemjs), which can be found under the hood of [JSPM](https://github.com/jspm/jspm-cli), is used to load and transpile modules at runtime in the browser. This differs significantly from webpack, where modules are transpiled (through "loaders") and bundled before hitting the browser.
+من المهم توضيح بعض الفروقات الأساسية بين تحميل الوحدات وتحزيمها. أداة مثل [SystemJS](https://github.com/systemjs/systemjs)، وهي مستخدمة داخليًا في [JSPM](https://github.com/jspm/jspm-cli)، تُستخدم لتحميل الوحدات وتحويلها وقت التشغيل داخل المتصفح. يختلف هذا كثيرًا عن webpack، حيث تُحوّل الوحدات عبر "loaders" ثم تُحزّم قبل أن تصل إلى المتصفح.
-Each method has its advantages and disadvantages. Loading and transpiling modules at runtime can add a lot of overhead for larger sites and applications comprised of many modules. For this reason, SystemJS makes more sense for smaller projects where fewer modules are required. However, this may change a bit as [HTTP/2](https://http2.github.io/) will improve the speed at which files can be transferred from server to client. Note that HTTP/2 doesn't change anything about _transpiling_ modules, which will always take longer when done client-side.
+لكل أسلوب مزاياه وعيوبه. تحميل الوحدات وتحويلها وقت التشغيل قد يضيف كلفة كبيرة على المواقع والتطبيقات الأكبر، خصوصًا عندما تتكون من عدد كبير من الوحدات. لذلك يكون SystemJS أنسب للمشاريع الأصغر التي تحتاج إلى وحدات أقل. قد يتغير هذا جزئيًا مع [HTTP/2](https://http2.github.io/) لأنه يحسن سرعة نقل الملفات من الخادم إلى العميل. لكن لاحظ أن HTTP/2 لا يغير شيئًا في تكلفة تحويل الوحدات، فهي ستبقى أبطأ عندما تتم من جهة العميل.
diff --git a/src/content/concepts/configuration.mdx b/src/content/concepts/configuration.mdx
index 34ce7c721cf3..2769b7fbfbce 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
+ - 0xMe2na
---
-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 قياسي، يمكنك القيام بالآتي:
+- استيراد ملفات أخرى باستخدام `require(...)` أو `import`.
+- استخدام أدوات من npm باستخدام `require(...)` أو `import`.
+- كتابة تعبيرات التحكم الخاصة بـ JavaScript مثل `?:` و `if` و `for` وغيرها.
+- تعريف الثوابت أو المتغيرات للقيم التي تتكرر كثيرًا.
+- كتابة دوال وتنفيذها لتوليد أجزاء من التكوين.
-- 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
+استخدم هذه الميزات وقتما تراه مناسبًا.
-Use these features when appropriate.
+مع أنها ممكنة تقنيًا، **ينبغي تجنب الممارسات الآتية**:
-While they are technically feasible, **the following practices should be avoided**:
+- الوصول إلى وسائط CLI عند استخدام webpack CLI. قد يجعل ذلك التكوين غير قابل للنقل وأصعب في الصيانة. بدلًا من ذلك، اكتب CLI خاصًا بك، أو [استخدم `--env`](/api/cli/#env) لتمرير متغيرات البيئة.
+- تصدير قيم غير حتمية؛ تشغيل webpack مرتين يجب أن ينتج الملفات نفسها.
+- كتابة تكوينات طويلة؛ من الأفضل تقسيم التكوين إلى عدة ملفات.
-- 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)
+T> أهم ما ينبغي الخروج به من هذه الصفحة هو أن هناك طرقًا كثيرة لتنسيق وكتابة تكوين 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.
+توضح الأمثلة التالية كيف يمكن لتكوين webpack أن يكون معبرًا وقابلًا للضبط لأنه _كود_:
-The examples below describe how webpack's configuration can be both expressive and configurable because _it is code_:
-
-## 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..33ae6f3bc380 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,24 @@ 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 +120,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 +137,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 +151,7 @@ export default {
};
```
-Also `dependOn` must not be circular, the following example again would throw an error:
+كذلك يجب ألا يكون `dependOn` دائريًا. المثال التالي سيرمي خطأ أيضًا:
```js
export default {
@@ -183,11 +168,13 @@ 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 +187,7 @@ export default {
};
```
-When building in `production` mode:
+عند البناء في وضع `production`:
**webpack.prod.js**
@@ -212,7 +199,7 @@ export default {
};
```
-When building in `development` mode:
+عند البناء في وضع `development`:
**webpack.dev.js**
@@ -224,13 +211,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 +231,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..d8e95bb82aa8 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -1,35 +1,17 @@
---
-title: Concepts
+title: المفاهيم
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..818f3779a40a 100644
--- a/src/content/concepts/manifest.mdx
+++ b/src/content/concepts/manifest.mdx
@@ -1,9 +1,8 @@
---
-title: The Manifest
+title: ملف 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 8180c0e55a6b..be1f13945fbc 100644
--- a/src/content/concepts/targets.mdx
+++ b/src/content/concepts/targets.mdx
@@ -2,21 +2,16 @@
title: Targets
sort: 10
contributors:
- - TheLarkInn
- - rouzbeh84
- - johnstew
- - srilman
- - byzyk
- - EugeneHlushko
+ - RlxChap2
---
-Because JavaScript can be written for both server and browser, webpack offers multiple deployment _targets_ that you can set in your webpack [configuration](/configuration).
+لأن JavaScript يمكن كتابته لكل من الخادم والمتصفح، يوفر webpack عدة _أهداف_ نشر يمكنك ضبطها في [تكوين](/configuration) webpack.
-W> The webpack `target` property is not to be confused with the `output.libraryTarget` property. For more information see [our guide](/concepts/output/) on the `output` property.
+W> لا ينبغي الخلط بين خاصية `target` في webpack وخاصية `output.libraryTarget`. لمزيد من المعلومات، راجع [دليلنا](/concepts/output/) حول خاصية `output`.
-## Usage
+## الاستخدام
-To set the `target` property, you set the target value in your webpack config:
+لتعيين خاصية `target`، اضبط قيمة الهدف في تكوين webpack:
**webpack.config.js**
@@ -26,15 +21,15 @@ export default {
};
```
-In the example above, using `node` webpack will compile for usage in a Node.js-like environment (uses Node.js `require` to load chunks and not touch any built in modules like `fs` or `path`).
+في المثال أعلاه، سيترجم webpack الكود ليعمل في بيئة شبيهة بـ Node.js عند استخدام `node`، أي أنه يستخدم `require` الخاص بـ Node.js لتحميل chunks ولا يلمس الوحدات المدمجة مثل `fs` أو `path`.
-Each _target_ has a variety of deployment/environment specific additions, support to fit its needs. See what [targets are available](/configuration/target/).
+لكل _هدف_ إضافات ودعم خاص ببيئة النشر أو التشغيل التي يناسبها. راجع [الأهداف المتاحة](/configuration/target/).
-?> Further expansion for other popular target values
+?> توسعة لاحقة لقيم أهداف شائعة أخرى.
-## Multiple Targets
+## أهداف متعددة
-Although webpack does **not** support multiple strings being passed into the `target` property, you can create an isomorphic library by bundling two separate configurations:
+مع أن webpack **لا** يدعم تمرير عدة سلاسل إلى خاصية `target`، يمكنك إنشاء مكتبة isomorphic عبر تجميع تكوينين منفصلين:
**webpack.config.js**
@@ -66,13 +61,13 @@ const clientConfig = {
export default [serverConfig, clientConfig];
```
-The example above will create a `lib.js` and `lib.node.js` file in your `dist` folder.
+سينشئ المثال أعلاه ملفي `lib.js` و `lib.node.js` داخل مجلد `dist`.
-## Resources
+## موارد
-As seen from the options above, there are multiple deployment _targets_ that you can choose from. Below is a list of examples and resources that you can refer to.
+كما يظهر من الخيارات أعلاه، توجد عدة _أهداف_ نشر يمكنك الاختيار منها. فيما يلي قائمة بأمثلة وموارد يمكن الرجوع إليها.
-- **[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**: A great resource for testing and viewing different webpack _targets_. Also great for bug reporting.
-- **[Boilerplate of Electron-React Application](https://github.com/chentsulin/electron-react-boilerplate)**: A good example of a build process for electron's main process and renderer process.
+- **[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**: مورد ممتاز لاختبار أهداف webpack المختلفة واستعراضها، ومفيد أيضًا عند الإبلاغ عن الأخطاء.
+- **[Boilerplate of Electron-React Application](https://github.com/chentsulin/electron-react-boilerplate)**: مثال جيد على عملية بناء لتطبيق Electron يشمل العملية الرئيسية وعملية العارض.
-?> Need to find up to date examples of these webpack targets being used in live code or boilerplates.
+?> نحتاج إلى إيجاد أمثلة محدثة لاستخدام أهداف webpack هذه في كود حي أو قوالب جاهزة.
diff --git a/src/content/concepts/under-the-hood.mdx b/src/content/concepts/under-the-hood.mdx
index 8929b1d9f27e..14e2937b88f6 100644
--- a/src/content/concepts/under-the-hood.mdx
+++ b/src/content/concepts/under-the-hood.mdx
@@ -1,22 +1,19 @@
---
-title: Under The Hood
+title: كيف يعمل webpack من الداخل
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..8a3c44df5512 100644
--- a/src/content/concepts/why-webpack.mdx
+++ b/src/content/concepts/why-webpack.mdx
@@ -1,53 +1,52 @@
---
-title: Why webpack
+title: لماذا 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.
+
-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 مشكلات النطاق في المشاريع الكبيرة؛ عندما تُلف ملفات السكربت داخل IIFE، يمكنك دمج الملفات أو جمعها بأمان دون القلق من تصادم النطاقات.
-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?
+أدى استخدام IIFEs إلى ظهور أدوات مثل Make و Gulp و Grunt و Broccoli و Brunch. تُعرف هذه الأدوات باسم مشغلات المهام، وهي تجمع كل ملفات مشروعك معًا.
-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.
+لكن تغيير ملف واحد يعني أنك تحتاج إلى إعادة بناء كل شيء. يجعل الجمع إعادة استخدام السكربتات عبر الملفات أسهل، لكنه يجعل تحسينات البناء أصعب. كيف يمكنك معرفة ما إذا كان الكود مستخدمًا فعلًا أم لا؟
-## Birth of JavaScript Modules happened thanks to Node.js
+حتى لو كنت تستخدم دالة واحدة فقط من lodash، يجب عليك إضافة المكتبة كاملة ثم ضغطها معًا. كيف تنفذ treeshaking لتبعيات كودك؟ قد يكون التحميل الكسول لأجزاء من الكود صعبًا على نطاق واسع ويتطلب الكثير من العمل اليدوي من المطور.
-Webpack runs on Node.js, a JavaScript runtime that can be used in computers and servers outside a browser environment.
+## ولادة وحدات JavaScript بفضل Node.js
-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.
+يعمل webpack على Node.js، وهو runtime لـ JavaScript يمكن استخدامه في الحواسيب والخوادم خارج بيئة المتصفح.
-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.
+عندما صدر Node.js بدأت حقبة جديدة، وجاءت معها تحديات جديدة. بما أن JavaScript لم تعد تعمل داخل المتصفح فقط، كيف يفترض بتطبيقات Node أن تحمل أجزاء جديدة من الكود؟ لا توجد ملفات HTML ولا وسوم script يمكن إضافتها إليها.
-## npm + Node.js + modules – mass distribution
+ظهر CommonJS وقدم `require`، مما يسمح بتحميل وحدة واستخدامها داخل الملف الحالي. حلّ ذلك مشكلات النطاق مباشرة عبر استيراد كل وحدة عند الحاجة إليها.
-JavaScript is taking over the world as a language, as a platform and as a way to rapidly develop and create fast applications.
+## npm + Node.js + modules - توزيع واسع النطاق
-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.
+تسيطر JavaScript على العالم كلغة ومنصة وطريقة لتطوير تطبيقات سريعة وإنشائها بسرعة.
-## ESM - ECMAScript Modules
+لكن المتصفحات لا تدعم CommonJS. لا توجد [live bindings](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358). توجد مشكلات مع المراجع الدائرية. كما أن حل الوحدات وتحميلها بشكل متزامن بطيء. ومع أن CommonJS كان حلًا رائعًا لمشاريع Node.js، لم تكن المتصفحات تدعم الوحدات، لذلك ظهرت مجمعات وأدوات مثل Browserify و RequireJS و SystemJS، مما سمح لنا بكتابة وحدات CommonJS تعمل في المتصفح.
-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.
+## ESM - وحدات ECMAScript
-## Automatic Dependency Collection
+الخبر الجيد لمشاريع الويب هو أن الوحدات أصبحت ميزة رسمية في معيار ECMAScript. لكن دعم المتصفحات ما زال غير مكتمل، وما زال التجميع أسرع وموصى به حاليًا مقارنة بهذه التطبيقات المبكرة للوحدات.
-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.
+## جمع التبعيات تلقائيًا
-## Wouldn't it be nice…
+كانت مشغلات المهام القديمة، وحتى Google Closure Compiler، تتطلب منك إعلان كل التبعيات يدويًا مقدمًا. أما المجمعات مثل webpack فتبني وتستنتج [مخطط التبعيات](/concepts/dependency-graph/) تلقائيًا بناءً على ما يتم استيراده وتصديره. ومع [الإضافات](/concepts/plugins/) و[المحمّلات](/concepts/loaders/) الأخرى، ينتج عن ذلك تجربة تطوير ممتازة.
-...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?
+## ألن يكون رائعًا...
-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.
+...لو كان هناك شيء لا يسمح لنا بكتابة الوحدات فقط، بل يدعم أيضًا أي صيغة وحدات، على الأقل إلى أن نصل إلى ESM، ويتعامل مع الموارد والأصول في الوقت نفسه؟
-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. إنه أداة تسمح لك بتجميع تطبيقات JavaScript، مع دعم ESM و CommonJS، ويمكن توسيعها لدعم أصول مختلفة كثيرة مثل الصور والخطوط وملفات التنسيق.
+
+يهتم webpack بالأداء وأوقات التحميل؛ فهو يتحسن دائمًا أو يضيف ميزات جديدة، مثل تحميل chunks بشكل غير متزامن و prefetching، لتقديم أفضل تجربة ممكنة لمشروعك ومستخدميك.
diff --git a/src/content/configuration/cache.mdx b/src/content/configuration/cache.mdx
index 0a1bba4fcf90..ff6f601d755c 100644
--- a/src/content/configuration/cache.mdx
+++ b/src/content/configuration/cache.mdx
@@ -2,20 +2,18 @@
title: Cache
sort: 12
contributors:
- - snitin315
- - chenxsan
- - shivxmsharma
+ - RlxChap2
---
## cache
`boolean` `object`
-Cache the generated webpack modules and chunks to improve build speed. `cache: true` is an alias to `cache: { type: 'memory' }`. To disable caching pass `false`:
+يُخزِّن وحدات webpack و chunks المُولَّدة في الذاكرة المؤقَّتة لتحسين سرعة البناء. `cache: true` اختصارٌ لـ `cache: { type: 'memory' }`. ولتعطيل التخزين المؤقَّت مرِّر `false`:
-The default value of `cache` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `cache` على [`mode`](/configuration/mode/):
-| Mode | Default |
+| Mode | الافتراضي |
| --------------- | -------------------- |
| `"production"` | `false` |
| `"development"` | `{ type: 'memory' }` |
@@ -30,21 +28,21 @@ export default {
};
```
-While setting `cache.type` to `'filesystem'` opens up more options for configuration.
+أمّا ضبط `cache.type` على `'filesystem'` فيفتح أمامك خيارات تخصيص أكثر.
### cache.allowCollectingMemory
-Collect unused memory allocated during deserialization, only available when [`cache.type`](#cachetype) is set to `'filesystem'`. This requires copying data into smaller buffers and has a performance cost.
+اجمع الذاكرة غير المستعمَلة التي خُصِّصت أثناء فكّ التسلسل (deserialization)، وهو خيار لا يتوفّر إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`. ويتطلّب نسخ البيانات إلى buffers أصغر، وله تكلفته على الأداء.
-- Type: `boolean`
+- النوع: `boolean`
-The default value of `cache.allowCollectingMemory` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `cache.allowCollectingMemory` على [`mode`](/configuration/mode/):
-| Mode | Default |
-| --------------- | ------- |
-| `"production"` | `false` |
-| `"development"` | `true` |
-| `"none"` | `false` |
+| Mode | الافتراضي |
+| --------------- | --------- |
+| `"production"` | `false` |
+| `"development"` | `true` |
+| `"none"` | `false` |
-
@@ -63,11 +61,11 @@ export default {
`object`
-`cache.buildDependencies` is an object of arrays of additional code dependencies for the build. Webpack will use a hash of each of these items and all dependencies to invalidate the filesystem cache.
+`cache.buildDependencies` كائن يحوي مصفوفات من اعتماديات الشيفرة الإضافية للبناء. يستعمل webpack hash لكلّ عنصر منها مع كلّ اعتمادياتها لإبطال الذاكرة المؤقَّتة على نظام الملفّات.
-Defaults to `webpack/lib` to get all dependencies of webpack.
+القيمة الافتراضية هي `webpack/lib` لجلب كلّ اعتماديات webpack.
-T> It's recommended to set `cache.buildDependencies.config: [__filename]` in your webpack configuration to get the latest configuration and all dependencies.
+T> يُستحسَن ضبط `cache.buildDependencies.config: [__filename]` في تخصيصك حتى تحصل دائماً على أحدث تخصيص وكلّ اعتمادياته.
**webpack.config.js**
@@ -80,9 +78,9 @@ const __filename = fileURLToPath(import.meta.url);
export default {
cache: {
buildDependencies: {
- // This makes all dependencies of this file - build dependencies
+ // هذا يجعل كلّ اعتماديات هذا الملفّ اعتماديات بناء
config: [__filename],
- // By default webpack and loaders are build dependencies
+ // افتراضياً، يُعدّ webpack والـ loaders اعتماديات بناء
},
},
};
@@ -92,9 +90,9 @@ export default {
`string`
-Base directory for the cache. Defaults to `node_modules/.cache/webpack`.
+المجلَّد الأساسي للذاكرة المؤقَّتة. القيمة الافتراضية هي `node_modules/.cache/webpack`.
-`cache.cacheDirectory` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.cacheDirectory` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -114,13 +112,13 @@ export default {
};
```
-W> The final location of the cache is a combination of `cache.cacheDirectory` + `cache.name`.
+W> الموقع النهائي للذاكرة المؤقَّتة هو حصيلة جمع `cache.cacheDirectory` و `cache.name`.
### cache.cacheLocation
`string`
-Locations for the cache. Defaults to `path.resolve(cache.cacheDirectory, cache.name)`.
+موقع الذاكرة المؤقَّتة. القيمة الافتراضية هي `path.resolve(cache.cacheDirectory, cache.name)`.
**webpack.config.js**
@@ -142,9 +140,9 @@ export default {
### cache.cacheUnaffected
-Cache computation of modules which are unchanged and reference only unchanged modules. It can only be used along with [`cache.type`](#cachetype) of `'memory'`, besides, [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) must be enabled to use it.
+يُخزِّن في الذاكرة المؤقَّتة حساب الوحدات التي لم تتغيّر، والتي تُشير إلى وحدات لم تتغيّر هي الأخرى. ولا يمكن استعماله إلا مع [`cache.type`](#cachetype) المضبوطة على `'memory'`، فضلاً عن ذلك يلزم تفعيل [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) قبل استعماله.
-- Type: `boolean`
+- النوع: `boolean`
- v5.54.0+
**webpack.config.js**
@@ -165,9 +163,9 @@ export default {
-Compression type used for the cache files. By default it is `false`.
+نوع الضغط المستعمَل لملفّات الذاكرة المؤقَّتة. القيمة الافتراضية `false`.
-`cache.compression` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.compression` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -185,9 +183,9 @@ export default {
`string`
-Algorithm used the hash generation. See [Node.js crypto](https://nodejs.org/api/crypto.html) for more details. Defaults to `md4`.
+الخوارزمية المستعمَلة لتوليد الـ hash. اطّلع على [Node.js crypto](https://nodejs.org/api/crypto.html) لمزيد من التفاصيل. القيمة الافتراضية `md4`.
-`cache.hashAlgorithm` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.hashAlgorithm` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -205,9 +203,9 @@ export default {
`number = 60000`
-Time in milliseconds. `cache.idleTimeout` denotes the time period after which the cache storing should happen.
+الزمن بالميلي ثانية. يُحدِّد `cache.idleTimeout` المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة.
-`cache.idleTimeout` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.idleTimeout` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -227,9 +225,9 @@ export default {
-Time in milliseconds. `cache.idleTimeoutAfterLargeChanges` is the time period after which the cache storing should happen when larger changes have been detected.
+الزمن بالميلي ثانية. `cache.idleTimeoutAfterLargeChanges` هو المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة عند رصد تغييرات كبيرة.
-`cache.idleTimeoutAfterLargeChanges` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.idleTimeoutAfterLargeChanges` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -247,9 +245,9 @@ export default {
`number = 5000`
-Time in milliseconds. `cache.idleTimeoutForInitialStore` is the time period after which the initial cache storing should happen.
+الزمن بالميلي ثانية. `cache.idleTimeoutForInitialStore` هو المدّة التي يتمّ بعدها حفظ الذاكرة المؤقَّتة الأوّل.
-`cache.idleTimeoutForInitialStore` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.idleTimeoutForInitialStore` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -267,9 +265,9 @@ export default {
`[string] = ['./node_modules']`
-W> Moved to [snapshot.managedPaths](/configuration/other-options/#managedpaths)
+W> نُقل إلى [snapshot.managedPaths](/configuration/other-options/#managedpaths)
-`cache.managedPaths` is an array of package-manager only managed paths. Webpack will avoid hashing and timestamping them, assume the version is unique and will use it as a snapshot (for both memory and filesystem cache).
+`cache.managedPaths` مصفوفة من المسارات التي لا يديرها سوى مدير حزم. وسيتجنّب webpack عمل hash أو timestamp لها، ويفترض أنّ الإصدار فريد، وسيستعمله بوصفه لقطة (سواء للذاكرة المؤقَّتة في الذاكرة أو على نظام الملفّات).
### cache.maxAge
@@ -277,9 +275,9 @@ W> Moved to [snapshot.managedPaths](/configuration/other-options/#managedpaths)
-The amount of time in milliseconds that unused cache entries are allowed to stay in the filesystem cache; defaults to one month.
+المدّة بالميلي ثانية التي يُسمح فيها لمدخلات الذاكرة المؤقَّتة غير المستعمَلة بالبقاء في ذاكرة نظام الملفّات؛ القيمة الافتراضية شهر واحد.
-`cache.maxAge` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.maxAge` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -299,13 +297,12 @@ export default {
-Define the lifespan of unused cache entries in the memory cache.
+عرِّف عمر مدخلات الذاكرة المؤقَّتة غير المستعمَلة في ذاكرة الـ memory.
-- `cache.maxGenerations: 1`: Cache entries are removed after being unused for a single compilation.
+- `cache.maxGenerations: 1`: تُحذَف مدخلات الذاكرة المؤقَّتة بعد عدم استعمالها لعملية تصريف واحدة.
+- `cache.maxGenerations: Infinity`: تُحفظ المدخلات إلى الأبد.
-- `cache.maxGenerations: Infinity`: Cache entries are kept forever.
-
-`cache.maxGenerations` option is only available when [`cache.type`](#cachetype) is set to `'memory'`.
+لا يتوفّر الخيار `cache.maxGenerations` إلا حين يُضبط [`cache.type`](#cachetype) على `'memory'`.
**webpack.config.js**
@@ -325,17 +322,15 @@ export default {
-Define the lifespan of unused cache entries in the memory cache.
-
-- `cache.maxMemoryGenerations: 0`: Persistent cache will not use an additional memory cache. It will only cache items in memory until they are serialized to disk. Once serialized the next read will deserialize them from the disk again. This mode will minimize memory usage but introduce a performance cost.
-
-- `cache.maxMemoryGenerations: 1`: This will purge items from the memory cache once they are serialized and unused for at least one compilation. When they are used again they will be deserialized from the disk. This mode will minimize memory usage while still keeping active items in the memory cache.
+عرِّف عمر مدخلات الذاكرة المؤقَّتة غير المستعمَلة في ذاكرة الـ memory.
-- `cache.maxMemoryGenerations`: small numbers > 0 will have a performance cost for the GC operation. It gets lower as the number increases.
+- `cache.maxMemoryGenerations: 0`: لن تستعمل الذاكرة المؤقَّتة الدائمة (persistent cache) ذاكرة memory إضافية. ولن تُخزِّن العناصر في الذاكرة إلا إلى حين تسلسلها (serialize) إلى القرص. وحين تُقرأ مجدَّداً ستُفكّ من القرص. هذا الوضع يُقلِّص استعمال الذاكرة إلى أدنى حدّ، لكنه يأتي بكلفة على الأداء.
+- `cache.maxMemoryGenerations: 1`: سيُنظِّف العناصر من ذاكرة الـ memory بمجرّد تسلسلها وعدم استعمالها لعملية تصريف واحدة على الأقلّ. وحين تُستعمَل مجدَّداً، ستُفكّ من القرص. هذا الوضع يُقلِّص استعمال الذاكرة مع الإبقاء على العناصر النشطة في ذاكرة الـ memory.
+- `cache.maxMemoryGenerations`: الأرقام الصغيرة الأكبر من 0 ستحمل كلفة على الأداء بسبب عملية الـ GC. وتقلّ هذه الكلفة كلّما زاد الرقم.
-The default value of `cache.maxMemoryGenerations` depends on the [`mode`](/configuration/mode/):
+تعتمد القيمة الافتراضية لـ `cache.maxMemoryGenerations` على [`mode`](/configuration/mode/):
-| Mode | Default |
+| Mode | الافتراضي |
| --------------- | ---------- |
| `"production"` | `Infinity` |
| `"development"` | `5` |
@@ -355,9 +350,9 @@ export default {
### cache.memoryCacheUnaffected
-Cache computation of modules which are unchanged and reference only unchanged modules in memory. It can only be used along with [`cache.type`](#cachetype) of `'filesystem'`, besides, [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) must be enabled to use it.
+يُخزِّن في ذاكرة الـ memory حساب الوحدات التي لم تتغيّر، والتي تُشير إلى وحدات لم تتغيّر هي الأخرى. ولا يمكن استعماله إلا مع [`cache.type`](#cachetype) المضبوطة على `'filesystem'`، فضلاً عن ذلك يلزم تفعيل [`experiments.cacheUnaffected`](/configuration/experiments/#experimentscacheunaffected) قبل استعماله.
-- Type: `boolean`
+- النوع: `boolean`
- v5.54.0+
**webpack.config.js**
@@ -376,9 +371,9 @@ export default {
`string`
-Name for the cache. Different names will lead to different coexisting caches. Defaults to `${config.name}-${config.mode}`. Using `cache.name` makes sense when you have multiple configurations which should have independent caches.
+اسم الذاكرة المؤقَّتة. الأسماء المختلفة تؤدّي إلى ذاكرات مؤقَّتة متعايشة. القيمة الافتراضية هي `${config.name}-${config.mode}`. ويُجدي `cache.name` نفعاً حين يكون لديك عدّة تخصيصات ينبغي أن يكون لكلّ منها ذاكرة مؤقَّتة مستقلّة.
-`cache.name` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.name` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -396,7 +391,7 @@ export default {
`boolean = false`
-Track and log detailed timing information for individual cache items of type `'filesystem'`.
+يتعقّب ويُسجِّل معلومات زمنية تفصيلية لكلّ عنصر في الذاكرة المؤقَّتة من نوع `'filesystem'`.
**webpack.config.js**
@@ -414,7 +409,7 @@ export default {
`boolean`
-Prevent webpack from storing cache into file system. Only available when `cache.type === "filesystem"` and `cache.store === 'pack'`.
+يمنع webpack من حفظ الذاكرة المؤقَّتة في نظام الملفّات. لا يتوفّر إلا حين تكون `cache.type === "filesystem"` و `cache.store === 'pack'`.
```js
export default {
@@ -431,13 +426,13 @@ export default {
`string = 'pack': 'pack'`
-`cache.store` tells webpack when to store data on the file system.
+يُخبر `cache.store` webpack متى يحفظ البيانات في نظام الملفّات.
-- `'pack'`: Store data when compiler is idle in a single file for all cached items
+- `'pack'`: احفظ البيانات حين يكون المُصرِّف خاملاً في ملفّ واحد يضمّ كلّ العناصر المُخزَّنة مؤقَّتاً.
-`cache.store` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.store` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
-W> `pack` is the only supported mode since webpack 5.0.x
+W> الوضع `pack` هو الوضع الوحيد المدعوم منذ webpack 5.0.x
**webpack.config.js**
@@ -455,7 +450,7 @@ export default {
`string: 'memory' | 'filesystem'`
-Sets the `cache` type to either in memory or on the file system. The `memory` option is straightforward, it tells webpack to store cache in memory and doesn't allow additional configuration:
+يضبط نوع `cache` ليكون في الذاكرة أو على نظام الملفّات. الخيار `memory` بسيط ومباشر، فهو يُخبر webpack بحفظ الذاكرة المؤقَّتة في الذاكرة، ولا يسمح بأيّ تخصيص إضافي:
**webpack.config.js**
@@ -472,9 +467,9 @@ export default {
`string = ''`
-Version of the cache data. Different versions won't allow to reuse the cache and override existing content. Update the version when configuration changed in a way which doesn't allow to reuse cache. This will invalidate the cache.
+إصدار بيانات الذاكرة المؤقَّتة. لا تسمح الإصدارات المختلفة بإعادة استعمال الذاكرة المؤقَّتة، وتكتب فوق المحتوى القائم. حدِّث الإصدار حين يتغيّر تخصيصك تغيُّراً لا يسمح بإعادة استعمال الذاكرة المؤقَّتة، وهو ما يُبطل الذاكرة المؤقَّتة.
-`cache.version` option is only available when [`cache.type`](#cachetype) is set to `'filesystem'`.
+لا يتوفّر الخيار `cache.version` إلا حين يُضبط [`cache.type`](#cachetype) على `'filesystem'`.
**webpack.config.js**
@@ -488,44 +483,44 @@ export default {
};
```
-W> Don't share the cache between calls with different options.
+W> لا تُشارك الذاكرة المؤقَّتة بين استدعاءات بخيارات مختلفة.
-## Setup cache in CI/CD system
+## ضبط الذاكرة المؤقَّتة في أنظمة CI/CD
-Filesystem cache allows to share cache between builds in CI. To setup cache:
+تتيح ذاكرة نظام الملفّات المؤقَّتة مشاركة الذاكرة المؤقَّتة بين البُنى في CI. ولضبطها:
-- CI should have an option to share cache between builds.
-- CI should run job in the same absolute path. This is important since webpack cache files store absolute paths.
+- يجب أن يدعم نظام الـ CI خيار مشاركة الذاكرة المؤقَّتة بين البُنى.
+- يجب أن يُشغِّل الـ CI المهمّة في نفس المسار المطلق، إذ أنّ ملفّات الذاكرة المؤقَّتة في webpack تحفظ مسارات مطلقة.
### GitLab CI/CD
-Common config could looks like
+قد يبدو التخصيص المعتاد كالآتي:
```yaml
variables:
- # fallback to use "main" branch cache, requires GitLab Runner 13.4
+ # العودة إلى ذاكرة فرع "main" المؤقَّتة، تتطلّب GitLab Runner 13.4
CACHE_FALLBACK_KEY: main
-# this is webpack build job
+# هذه مهمّة بناء webpack
build-job:
cache:
- key: "$CI_COMMIT_REF_SLUG" # branch/tag name
+ key: "$CI_COMMIT_REF_SLUG" # اسم الفرع أو الوسم
paths:
- # cache directory
- # make sure that you don't run "npm ci" in this job or change default cache directory
- # otherwise "npm ci" will prune cache files
+ # مجلَّد الذاكرة المؤقَّتة
+ # تأكّد ألا تُشغِّل "npm ci" في هذه المهمّة ولا أن تُغيِّر مجلَّد الذاكرة المؤقَّتة الافتراضي
+ # وإلا فإنّ "npm ci" سيحذف ملفّات الذاكرة المؤقَّتة
- node_modules/.cache/webpack/
```
-### Github actions
+### إجراءات جيثب
```yaml
- uses: actions/cache@v3
with:
- # cache directory
+ # مجلَّد الذاكرة المؤقَّتة
path: node_modules/.cache/webpack/
key: ${{ GITHUB_REF_NAME }}-webpack-build
- # fallback to use "main" branch cache
+ # العودة إلى ذاكرة فرع "main" المؤقَّتة
restore-keys: |
main-webpack-build
```
diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx
index 9f0a1055bd0c..d321b3f74f08 100644
--- a/src/content/configuration/configuration-languages.mdx
+++ b/src/content/configuration/configuration-languages.mdx
@@ -1,35 +1,23 @@
---
-title: Configuration Languages
+title: لغات التخصيص
sort: 2
contributors:
- - piouson
- - sokra
- - skipjack
- - tarang9211
- - simon04
- - peterblazejewicz
- - youta1119
- - byzyk
- - Nek-
- - liyiming22
- - daimalou
- - ChocolateLoverRaj
- - snitin315
+ - RlxChap2
---
-Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the [node-interpret](https://github.com/gulpjs/interpret) package. Using [node-interpret](https://github.com/gulpjs/interpret), webpack can handle many different types of configuration files.
+يقبل webpack ملفات تخصيص مكتوبة بعدّة لغات برمجة ولغات بيانات. تجد قائمة بامتدادات الملفات المدعومة في حزمة [node-interpret](https://github.com/gulpjs/interpret). فعبر [node-interpret](https://github.com/gulpjs/interpret)، يستطيع webpack التعامل مع أنواع كثيرة ومختلفة من ملفات التخصيص.
## TypeScript
-To write the webpack configuration in [TypeScript](http://www.typescriptlang.org/), you would first install the necessary dependencies, i.e., TypeScript and the relevant type definitions from the [DefinitelyTyped](https://definitelytyped.org/) project:
+لكتابة تخصيص webpack بلغة [TypeScript](http://www.typescriptlang.org/)، ثبّت أوّلاً الاعتماديات اللازمة، وهي TypeScript وتعريفات الأنواع ذات الصلة من مشروع [DefinitelyTyped](https://definitelytyped.org/):
```bash
npm install --save-dev typescript ts-node @types/node
-# and, if using webpack-dev-server < v4.7.0
+# وإن كنت تستخدم webpack-dev-server بإصدار أقل من v4.7.0
npm install --save-dev @types/webpack-dev-server
```
-and then proceed to write your configuration:
+ثم ابدأ بكتابة التخصيص:
**webpack.config.ts**
@@ -38,7 +26,7 @@ import path from "node:path";
import { fileURLToPath } from "node:url";
import webpack from "webpack";
-// in case you run into any typescript error when configuring `devServer`
+// في حال واجهتك أخطاء TypeScript عند تخصيص `devServer`
import "webpack-dev-server";
const __filename = fileURLToPath(import.meta.url);
@@ -69,31 +57,31 @@ export default config;
"resolveJsonModule": true,
"isolatedModules": true,
- // Allows you to write `import ... from './file.ts';`
+ // يتيح لك كتابة `import ... from './file.ts';`
"rewriteRelativeImportExtensions": true
}
}
```
-The above sample assumes version >= 2.7 or newer of TypeScript is used with the new `esModuleInterop` and `allowSyntheticDefaultImports` compiler options in your `tsconfig.json` file.
+يفترض المثال السابق أنّك تستخدم إصدار TypeScript رقم 2.7 أو أحدث، مع تفعيل خياري `esModuleInterop` و `allowSyntheticDefaultImports` في ملف `tsconfig.json`.
-We support configuration in both `CommonJS` and `ESM` format.
+ندعم التخصيص بصيغة `CommonJS` و `ESM` معاً.
-Starting with v22.18.0 Node.js supports built-in [type stripping](https://nodejs.org/api/typescript.html#type-stripping), so the additional settings described below are only required for older versions.
+بدءاً من الإصدار v22.18.0، أصبح Node.js يدعم [إزالة الأنواع (type stripping)](https://nodejs.org/api/typescript.html#type-stripping) بشكل أصلي، ولذلك فإنّ الإعدادات الإضافية الموضّحة أدناه ليست مطلوبة إلا للإصدارات الأقدم.
-> To enable the transformation of non erasable TypeScript syntax, which requires JavaScript code generation, such as enum declarations, parameter properties use the flag [--experimental-transform-types](https://nodejs.org/api/cli.html#experimental-transform-types).
+> لتفعيل تحويل صياغات TypeScript غير القابلة للحذف، التي تحتاج إلى توليد شيفرة JavaScript مثل تصريحات `enum` وخصائص المُعاملات (parameter properties)، استخدم الراية [--experimental-transform-types](https://nodejs.org/api/cli.html#experimental-transform-types).
-If you are using an older version of Node.js that does not support the `typescript` format, or want to set `module` in `compilerOptions` in `tsconfig.json` to `commonjs` there are three solutions to this issue:
+إذا كنت تستخدم إصداراً أقدم من Node.js لا يدعم صيغة `typescript`، أو أردت ضبط `module` في `compilerOptions` ضمن `tsconfig.json` على `commonjs`، فأمامك ثلاثة حلول لهذه المشكلة:
-- Modify `tsconfig.json`.
-- Modify `tsconfig.json` and add settings for `ts-node`.
-- Install `tsconfig-paths`.
+- تعديل `tsconfig.json`.
+- تعديل `tsconfig.json` وإضافة إعدادات خاصة بـ `ts-node`.
+- تثبيت `tsconfig-paths`.
-The **first option** is to open your `tsconfig.json` file and look for `compilerOptions`. Set `target` to `"ES5"` and `module` to `"CommonJS"` (or completely remove the `module` option).
+**الحلّ الأول**: افتح ملف `tsconfig.json` وابحث عن `compilerOptions`، ثم اضبط `target` على `"ES5"` و `module` على `"CommonJS"` (أو احذف خيار `module` تماماً).
-The **second option** is to add settings for ts-node:
+**الحلّ الثاني**: أضِف إعدادات خاصة بـ ts-node.
-You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another build tool, set an override for ts-node. [ts-node config](https://typestrong.org/ts-node/docs/imports/)
+يمكنك إبقاء `"module": "ESNext"` لـ `tsc`، وإن كنت تستعمل webpack أو أداة بناء أخرى، فاضبط قيمة بديلة لـ ts-node. [توثيق إعداد ts-node](https://typestrong.org/ts-node/docs/imports/)
```json
{
@@ -108,13 +96,13 @@ You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another
}
```
-The **third option** is to install the `tsconfig-paths` package:
+**الحلّ الثالث**: ثبّت حزمة `tsconfig-paths`:
```bash
npm install --save-dev tsconfig-paths
```
-And create a separate TypeScript configuration specifically for your webpack configs:
+ثم أنشئ تخصيصاً مستقلاً لـ TypeScript مخصّصاً لملفات تخصيص webpack:
**tsconfig-for-webpack-config.json**
@@ -128,9 +116,9 @@ And create a separate TypeScript configuration specifically for your webpack con
}
```
-T> `ts-node` can resolve a `tsconfig.json` file using the environment variable provided by `tsconfig-paths`.
+T> يستطيع `ts-node` تحديد ملف `tsconfig.json` المطلوب عبر متغيّر البيئة الذي توفّره `tsconfig-paths`.
-Then set the environment variable `process.env.TS_NODE_PROJECT` provided by `tsconfig-paths` like so:
+ثم اضبط متغيّر البيئة `process.env.TS_NODE_PROJECT` الذي توفّره `tsconfig-paths` على النحو التالي:
**package.json**
@@ -142,17 +130,17 @@ Then set the environment variable `process.env.TS_NODE_PROJECT` provided by `tsc
}
```
-W> We had been getting reports that `TS_NODE_PROJECT` might not work with `"TS_NODE_PROJECT" unrecognized command` error. Therefore running it with `cross-env` seems to fix the issue, for more info [see this issue](https://github.com/webpack/webpack.js.org/issues/2733).
+W> وردتنا بلاغات بأن `TS_NODE_PROJECT` قد لا يعمل أحياناً ويُظهر الخطأ `"TS_NODE_PROJECT" unrecognized command`. وقد ظهر أنّ تشغيله عبر `cross-env` يحلّ المشكلة. لمزيد من التفاصيل [راجع هذه القضية](https://github.com/webpack/webpack.js.org/issues/2733).
-## CoffeeScript
+## كوفي سكريبت
-Similarly, to use [CoffeeScript](https://coffeescript.org/), you would first install the necessary dependencies:
+بالطريقة نفسها، لاستخدام [CoffeeScript](https://coffeescript.org/)، ثبّت أوّلاً الاعتماديات اللازمة:
```bash
npm install --save-dev coffeescript
```
-and then proceed to write your configuration:
+ثم اكتب التخصيص:
**webpack.config.coffee**
@@ -185,13 +173,13 @@ config =
export default config
```
-## Babel and JSX
+## Babel و JSX
-In the example below JSX (React JavaScript Markup) and Babel are used, to create a JSON configuration that webpack can understand.
+في المثال أدناه، يُستخدم JSX (صياغة JavaScript الخاصة بـ React) مع Babel لإنشاء تخصيص بصيغة JSON يستطيع webpack فهمه.
-> Courtesy of [Jason Miller](https://twitter.com/_developit)
+> بفضل من [Jason Miller](https://twitter.com/_developit)
-First, install the necessary dependencies:
+ثبّت أوّلاً الاعتماديات اللازمة:
```bash
npm install --save-dev babel-register jsxobj babel-preset-es2015
@@ -212,7 +200,7 @@ npm install --save-dev babel-register jsxobj babel-preset-es2015
```jsx
import jsxobj from "jsxobj";
-// example of an imported plugin
+// مثال على plugin مستورد
const CustomPlugin = (config) => ({
...config,
name: "custom-plugin",
@@ -236,4 +224,4 @@ export default (
);
```
-W> If you are using Babel elsewhere and have `modules` set to `false`, you will have to either maintain two separate `.babelrc` files or use `const jsxobj = require('jsxobj');` and `module.exports` instead of the new `import` and `export` syntax. This is because while Node does support many new ES6 features, they don't yet support ES6 module syntax.
+W> إن كنت تستخدم Babel في أماكن أخرى وضبطت `modules` على `false`، فستضطر إمّا للاحتفاظ بملفَّي `.babelrc` منفصلين، أو استخدام `const jsxobj = require('jsxobj');` و `module.exports` بدلاً من صياغة `import` و `export` الجديدة. ذلك أنّ Node يدعم كثيراً من ميزات ES6 الجديدة، لكنه لا يدعم بعدُ صياغة وحدات ES6.
diff --git a/src/content/configuration/configuration-types.mdx b/src/content/configuration/configuration-types.mdx
index e8767839ca54..9d5e22ebe658 100644
--- a/src/content/configuration/configuration-types.mdx
+++ b/src/content/configuration/configuration-types.mdx
@@ -1,28 +1,20 @@
---
-title: Configuration Types
+title: أنواع التخصيص
sort: 3
contributors:
- - sokra
- - skipjack
- - kbariotis
- - simon04
- - fadysamirsadek
- - byzyk
- - EugeneHlushko
- - dhurlburtusa
- - anshumanv
- - thorn0
- - tusharthakur04
+ - RlxChap2
---
-Besides exporting a single configuration object, there are a few more ways that cover other needs as well.
+إلى جانب تصدير كائن تخصيص واحد، هناك طرق أخرى تغطّي احتياجات مختلفة.
-## Exporting a Function
+## تصدير دالّة
-Eventually you will find the need to disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production). There are multiple ways to do that. One option is to export a function from your webpack configuration instead of exporting an object. The function will be invoked with two arguments:
+
-- An environment as the first parameter. See the [environment options CLI documentation](/api/cli/#environment-options) for syntax examples.
-- An options map (`argv`) as the second parameter. This describes the options passed to webpack, with keys such as [`output-path`](/api/cli/#flags) and [`mode`](/api/cli/#flags).
+ستجد عاجلاً أم آجلاً حاجة إلى التمييز داخل `webpack.config.js` بين [بناء التطوير](/guides/development) و[بناء الإنتاج](/guides/production). وثمّة طرق متعددة لذلك. من بينها أن تُصدّر دالّة من ملف تخصيص webpack بدلاً من تصدير كائن. سيتمّ استدعاء هذه الدالّة بمعاملين:
+
+- بيئة (environment) بوصفها المعامل الأول. راجع [توثيق خيارات البيئة في الـ CLI](/api/cli/#environment-options) لأمثلة على الصياغة.
+- خريطة خيارات (`argv`) بوصفها المعامل الثاني. تصف هذه الخريطة الخيارات الممرَّرة إلى webpack، بمفاتيح مثل [`output-path`](/api/cli/#flags) و[`mode`](/api/cli/#flags).
```diff
-export default {
@@ -33,7 +25,7 @@ Eventually you will find the need to disambiguate in your `webpack.config.js` be
plugins: [
new MinimizerPlugin({
minimizerOptions: {
-+ compress: argv.mode === 'production' // only if `--mode production` was passed
++ compress: argv.mode === 'production' // فقط في حال تمرير `--mode production`
}
})
]
@@ -41,11 +33,13 @@ Eventually you will find the need to disambiguate in your `webpack.config.js` be
};
```
-## Exporting a Promise
+## تصدير Promise
+
+
-Webpack will run the function exported by the configuration file and wait for a Promise to be returned. Handy when you need to asynchronously load configuration variables.
+سيُشغّل webpack الدالّة المُصدَّرة من ملف التخصيص، وينتظر منها إرجاع Promise. وهذا مفيد حين تحتاج إلى تحميل متغيّرات التخصيص بشكل غير متزامن.
-T> It is possible to export multiple promises by wrapping them into `Promise.all([/* Your promises */]).`
+T> يمكنك تصدير عدّة Promises عبر تغليفها داخل `Promise.all([/* Promises الخاصة بك */])`.
```js
export default () =>
@@ -59,11 +53,13 @@ export default () =>
});
```
-W> Returning a `Promise` only works when using webpack via CLI. [`webpack()`](/api/node/#webpack) expects an object.
+W> إرجاع `Promise` يعمل فقط حين تستخدم webpack عبر الـ CLI. أمّا [`webpack()`](/api/node/#webpack) فيتوقّع كائناً.
+
+## تصدير تخصيصات متعددة
-## Exporting multiple configurations
+
-Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built. For instance, this is useful for [bundling a library](/guides/author-libraries) for multiple [targets](/configuration/output/#outputlibrarytarget) such as AMD and CommonJS:
+عوضاً عن تصدير كائن أو دالّة تخصيص واحدة، يمكنك تصدير عدّة تخصيصات (وقد دُعمت الدوال المتعددة منذ webpack 3.1.0). وعند تشغيل webpack، تُبنى كل التخصيصات معاً. وهذا مفيد مثلاً عند [حزم مكتبة](/guides/author-libraries) لعدّة [أهداف (targets)](/configuration/output/#outputlibrarytarget) كـ AMD و CommonJS:
```js
export default [
@@ -88,11 +84,11 @@ export default [
];
```
-T> If you pass a name to [`--config-name`](/api/cli/#config-name) flag, webpack will only build that specific configuration.
+T> لو مرّرت اسماً إلى الراية [`--config-name`](/api/cli/#config-name)، فلن يبني webpack إلا التخصيص المطابق لذلك الاسم فقط.
### dependencies
-In case you have a configuration that depends on the output of another configuration, you can specify a list of dependencies using the [`dependencies`](/configuration/other-options/#dependencies) array.
+إن كان لديك تخصيص يعتمد على ناتج تخصيص آخر، فيمكنك تحديد قائمة بالاعتماديات عبر مصفوفة [`dependencies`](/configuration/other-options/#dependencies).
**webpack.config.js**
@@ -111,22 +107,22 @@ export default [
];
```
-### parallelism
+### التوازي
-In case you export multiple configurations, you can use the `parallelism` option on the configuration array to specify the maximum number of compilers that will compile in parallel.
+عند تصدير تخصيصات متعددة، يمكنك استخدام الخيار `parallelism` على مصفوفة التخصيصات لتحديد الحدّ الأقصى لعدد الـ compilers التي ستعمل بالتوازي.
-- Type: `number`
-- Available: 5.22.0+
+- النوع: `number`
+- متاح: 5.22.0+
**webpack.config.js**
```js
const config = [
{
- // config-1
+ // التخصيص-1
},
{
- // config-2
+ // التخصيص-2
},
];
diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx
index 364c17f99bbe..1bc93c00c889 100644
--- a/src/content/configuration/dev-server.mdx
+++ b/src/content/configuration/dev-server.mdx
@@ -2,40 +2,20 @@
title: DevServer
sort: 11
contributors:
- - sokra
- - skipjack
- - spacek33z
- - charlespwd
- - orteth01
- - byzyk
- - EugeneHlushko
- - Yiidiir
- - Loonride
- - dmohns
- - EslamHiko
- - digitaljohn
- - bhavya9107
- - wizardofhogwarts
- - jamesgeorge007
- - g100g
- - anikethsaha
- - snitin315
- - Biki-das
- - SaulSilver
- - malcolm-kee
+ - RlxChap2
---
-[webpack-dev-server](https://github.com/webpack/webpack-dev-server) can be used to quickly develop an application. See the [development guide](/guides/development/) to get started.
+يمكن استخدام [webpack-dev-server](https://github.com/webpack/webpack-dev-server) لتطوير التطبيق بسرعة. راجع [دليل التطوير](/guides/development/) للبدء.
-This page describes the options that affect the behavior of webpack-dev-server (short: dev-server) . Migration guide from `v4` to `v5` can be found [here](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md).
+تصف هذه الصفحة الخيارات التي تؤثر على سلوك webpack-dev-server (باختصار: dev-server) . يمكن العثور على دليل الترحيل من `v4` إلى `v5` [هنا](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md).
-W> `webpack-dev-server v5.0.0+` requires `node >= v18.12.0`, `webpack >= v5.0.0` and `webpack-cli >= v4.7.0`, we recommend using the latest version.
+W> `webpack-dev-server v5.0.0+` يتطلب `Node.js >= v18.12.0`، `webpack >= v5.0.0` و`webpack-cli >= v4.7.0`، نوصي باستخدام أحدث إصدار.
## devServer
`object`
-This set of options is picked up by [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our `public/` directory in the project root:
+يلتقط [webpack-dev-server](https://github.com/webpack/webpack-dev-server) مجموعة الخيارات هذه، ويمكنك استخدامها لتغيير سلوكه بطرق مختلفة. في المثال البسيط التالي نفعّل ضغط gzip ونخدم كل شيء من دليل `public/` في جذر المشروع:
**webpack.config.js**
@@ -58,7 +38,7 @@ export default {
};
```
-When the server is started, there will be a message prior to the list of resolved modules:
+عند بدء تشغيل server، ستكون هناك رسالة قبل قائمة الحلول modules:
```bash
[webpack-dev-server] Project is running at:
@@ -68,41 +48,41 @@ When the server is started, there will be a message prior to the list of resolve
[webpack-dev-server] Content not from webpack is served from '/path/to/public' directory
```
-that will give some background on where the server is located and what it's serving.
+سيعطي ذلك بعض المعلومات الأساسية عن مكان وجود server وما الذي يقدمه.
-If you're using dev-server through the Node.js API, the options in `devServer` will be ignored. Pass the options as the first parameter instead: `new WebpackDevServer({...}, compiler)`. [See here](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) for an example of how to use webpack-dev-server through the Node.js API.
+إذا كنت تستخدم dev-server من خلال Node.js API، فسيتم تجاهل الخيارات الموجودة في `devServer`. قم بتمرير الخيارات كمعلمة أولى بدلاً من ذلك: `new WebpackDevServer({...}, compiler)`. [انظر هنا](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) للحصول على مثال حول كيفية استخدام webpack-dev-server من خلال Node.js API.
-W> You cannot use the second `compiler` argument (a callback) when using `WebpackDevServer`.
+W> لا يمكنك استخدام الوسيطة `compiler` الثانية (رد الاتصال) عند استخدام `WebpackDevServer`.
-W> Be aware that when [exporting multiple configurations](/configuration/configuration-types/#exporting-multiple-configurations) only the `devServer` options for the first configuration will be taken into account and used for all the configurations in the array.
+W> انتبه إلى أنه عند [تصدير تخصيصات متعددة](/configuration/configuration-types/#exporting-multiple-configurations) سيتم أخذ خيارات `devServer` فقط للتخصيص الأول في الاعتبار واستخدامها لجميع التخصيصات في array.
-T> If you're having trouble, navigating to the `/webpack-dev-server` route will show where files are served. For example, `http://localhost:9000/webpack-dev-server`.
+T> إذا كنت تواجه مشكلة، فإن الانتقال إلى المسار `/webpack-dev-server` سيُظهر مكان تقديم الملفات. على سبيل المثال، `http://localhost:9000/webpack-dev-server`.
-T> If you want to manually recompile the bundle, navigating to the `/webpack-dev-server/invalidate` route will [invalidate](/api/node/#invalidate-watching) the current compilation of the bundle and recompile it for you via [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate). Depending on your configuration, the URL may look like `http://localhost:9000/webpack-dev-server/invalidate`.
+T> إذا كنت تريد إعادة ترجمة bundle يدويًا، فإن الانتقال إلى المسار `/webpack-dev-server/invalidate` سيؤدي إلى [إبطال](/api/node/#invalidate-watching) compilation الحالي لـ bundle وإعادة ترجمته لك عبر [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate). اعتمادًا على التخصيص الذي قمت به، قد يبدو عنوان URL بالشكل `http://localhost:9000/webpack-dev-server/invalidate`.
-T> HTML template is required to serve the bundle, usually, it is an `index.html` file. Make sure that script references are added into HTML, webpack-dev-server doesn't inject them automatically.
+T> يلزم وجود HTML template لخدمة bundle، ويكون عادةً ملف `index.html`. تأكد من إضافة مراجع `
@@ -945,9 +916,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 {
@@ -959,7 +930,7 @@ In the above example, we're passing a single entry file to `entry`, however, web
};
```
-2. If an `object` is provided as the `entry` point, all entries can be exposed using the `array` syntax of `library`:
+2. إذا تم توفير `object` كنقطة `entry`، فيمكن كشف جميع الإدخالات باستخدام بناء جملة `array` لـ `library`:
```js
export default {
@@ -975,52 +946,52 @@ 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
-
-
-
- ```
+```html
+
+
+
+```
- 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 {
- // …
- entry: {
- main: {
- import: "./src/index.js",
- library: {
- // all options under `output.library` can be used here
- name: "MyLibrary",
- type: "umd",
- umdNamedDefine: true,
- },
- },
- another: {
- import: "./src/another.js",
- library: {
- name: "AnotherLibrary",
- type: "commonjs2",
- },
- },
- },
- };
- ```
+```js
+export default {
+ // …
+ entry: {
+ main: {
+ import: "./src/index.js",
+ library: {
+ // يمكن استخدام جميع الخيارات ضمن `output.library` هنا
+ name: "MyLibrary",
+ type: "umd",
+ umdNamedDefine: true,
+ },
+ },
+ another: {
+ import: "./src/another.js",
+ library: {
+ name: "AnotherLibrary",
+ type: "commonjs2",
+ },
+ },
+ },
+};
+```
### output.library.amdContainer
-Use a container(defined in global space) for calling `define`/`require` functions in an AMD module.
+استخدم حاوية (محددة في المساحة العالمية) للاتصال بوظائف `define`/`require` في AMD module.
-W> Note that the value of `amdContainer` **must be** set as a global variable.
+W> لاحظ أنه يجب تعيين قيمة `amdContainer` \*\*كمتغير عام.
```js
export default {
@@ -1034,7 +1005,7 @@ export default {
};
```
-Which will result in the following bundle:
+مما سيؤدي إلى ما يلي bundle:
```js
globalThis.clientContainer.define(/* define args */); // or 'amd-require' window['clientContainer'].require(/*require args*/);
@@ -1053,9 +1024,9 @@ export default {
};
```
-Specify a name for the library.
+حدد اسمًا لـ library.
-- Type:
+- النوع:
```ts
string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}
@@ -1063,19 +1034,21 @@ Specify a name for the library.
### output.library.type
-Configure how the library will be exposed.
+قم بتخصيص كيفية عرض library.
-- Type: `string`
+- النوع: `string`
- Types included by default are `'var'`, `'module'`, `'modern-module'`, `'assign'`, `'assign-properties'`, `'this'`, `'window'`, `'self'`, `'global'`, `'commonjs'`, `'commonjs2'`, `'commonjs-module'`, `'commonjs-static'`, `'amd'`, `'amd-require'`, `'umd'`, `'umd2'`, `'jsonp'` and `'system'`, but others might be added by plugins.
+الأنواع المضمنة افتراضيًا هي `'var'`، `'module'`، `'modern-module'`، `'assign'`، `'assign-properties'`، `'this'`، `'window'`، `'self'`، `'global'`، `'commonjs'`، `'commonjs2'`، `'commonjs-module'`، `'commonjs-static'`، `'amd'`، `'amd-require'`، `'umd'`، `'umd2'`، `'jsonp'` و`'system'`، ولكن يمكن إضافة أشياء أخرى بواسطة plugins.
-For the following examples, we'll use `_entry_return_` to indicate the values returned by the entry point.
+بالنسبة للأمثلة التالية، سنستخدم `_entry_return_` للإشارة إلى القيم التي يتم إرجاعها بواسطة entry point.
-#### Expose a Variable
+#### فضح متغير
-These options assign the return value of the entry point (e.g. whatever the entry point exported) to the name provided by [`output.library.name`](#outputlibraryname) at whatever scope the bundle was included at.
+تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى الاسم المقدم بواسطة [`output.library.name`](#outputlibraryname) في أي نطاق تم تضمين bundle فيه.
-##### type: 'var'
+##### النوع: "فار"
+
+
```js
export default {
@@ -1089,16 +1062,18 @@ export default {
};
```
-When your library is loaded, the **return value of your entry point** will be assigned to a variable:
+عندما يتم تحميل library، سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى متغير:
```js
const MyLibrary = _entry_return_;
-// In a separate script with `MyLibrary` loaded…
+// في برنامج نصي منفصل مع تحميل `MyLibrary`...
MyLibrary.doSomething();
```
-##### type: 'assign'
+##### النوع: "تعيين"
+
+
```js
export default {
@@ -1112,15 +1087,17 @@ 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'
+
+
@@ -1136,29 +1113,33 @@ export default {
};
```
-Similar to [`type: 'assign'`](#type-assign) but a safer option as it will reuse `MyLibrary` if it already exists:
+يشبه [`type: 'assign'`](#type-assign) ولكنه خيار أكثر أمانًا لأنه سيعيد استخدام `MyLibrary` إذا كان موجودًا بالفعل:
```js
-// only create MyLibrary if it doesn't exist
+// قم بإنشاء MyLibrary فقط إذا لم يكن موجودًا
MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary;
-// then copy the return value to MyLibrary
-// similarly to what Object.assign does
+// ثم انسخ القيمة المرجعة إلى MyLibrary
+// بشكل مشابه لما يفعله Object.assistant
-// for instance, you export a `hello` function in your entry as follow
+// على سبيل المثال، يمكنك تصدير `hello` function في entry الخاص بك على النحو التالي
export function hello(name) {
console.log(`Hello ${name}`);
}
-// In another script with MyLibrary loaded
-// you can run `hello` function like so
+// في برنامج نصي آخر مع MyLibrary تحميلها
+// يمكنك تشغيل `hello` function بهذه الطريقة
MyLibrary.hello("World");
```
-#### Expose Via Object Assignment
+#### فضح عبر Object المهمة
+
+
-These options assign the return value of the entry point (e.g. whatever the entry point exported) to a specific object under the name defined by [`output.library.name`](#outputlibraryname).
+تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى object محدد تحت الاسم المحدد بواسطة [`output.library.name`](#outputlibraryname).
-##### type: 'this'
+##### اكتب: "هذا"
+
+
```js
export default {
@@ -1172,17 +1153,19 @@ export default {
};
```
-The **return value of your entry point** will be assigned to `this` under the property named by `output.library.name`. The meaning of `this` is up to you:
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `this` ضمن الخاصية المسماة بواسطة `output.library.name`. معنى `this` متروك لك:
```js
this.MyLibrary = _entry_return_;
-// In a separate script...
+// في نص منفصل...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if `this` is window
```
-##### type: 'window'
+##### النوع: "نافذة"
+
+
```js
export default {
@@ -1196,7 +1179,7 @@ export default {
};
```
-The **return value of your entry point** will be assigned to the `window` object using the `output.library.name` value.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `window` object باستخدام القيمة `output.library.name`.
```js
globalThis.MyLibrary = _entry_return_;
@@ -1204,7 +1187,9 @@ globalThis.MyLibrary = _entry_return_;
globalThis.MyLibrary.doSomething();
```
-##### type: 'global'
+##### النوع: "عالمي"
+
+
```js
export default {
@@ -1218,7 +1203,7 @@ export default {
};
```
-The **return value of your entry point** will be assigned to the global object using the `output.library.name` value. Depending on the [`target`](/configuration/target/) value, the global object could change respectively, e.g., `self`, `global` or `globalThis`.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى object العامة باستخدام القيمة `output.library.name`. اعتمادًا على قيمة [`target`](/configuration/target/)، يمكن أن تتغير القيمة العامة object على التوالي، على سبيل المثال، `self` أو `global` أو `globalThis`.
```js
globalThis.MyLibrary = _entry_return_;
@@ -1226,7 +1211,9 @@ globalThis.MyLibrary = _entry_return_;
globalThis.MyLibrary.doSomething();
```
-##### type: 'commonjs'
+##### النوع: "كومونجس"
+
+
```js
export default {
@@ -1240,7 +1227,7 @@ export default {
};
```
-The **return value of your entry point** will be assigned to the `exports` object using the `output.library.name` value. As the name implies, this is used in CommonJS environments.
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `exports` object باستخدام القيمة `output.library.name`. كما يوحي الاسم، يتم استخدام هذا في بيئات CommonJS.
```js
exports.MyLibrary = _entry_return_;
@@ -1248,13 +1235,15 @@ 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 أنظمة التعريف
-#### Module Definition Systems
+ستؤدي هذه الخيارات إلى bundle الذي يأتي مع رأس كامل لضمان التوافق مع أنظمة module المختلفة. سيأخذ خيار `output.library.name` معنى مختلفًا ضمن خيارات `output.library.type` التالية.
-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.
+##### النوع: 'module'
-##### type: 'module'
+
```js
export default {
@@ -1264,18 +1253,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"
@@ -1287,32 +1276,34 @@ export default {
},
output: {
library: {
- // do not specify a `name` here
+ // لا تحدد `name` هنا
type: "modern-module",
},
},
};
```
-This configuration generates tree-shakable output for ES Modules.
+ينشئ هذا التخصيص output شجرة قابلة للاهتزاز لـ ES Modules.
-However this feature is still experimental and not fully supported yet, so make sure to enable [experiments.outputModule](/configuration/experiments/) beforehand.
+ومع ذلك، لا تزال هذه الميزة تجريبية وغير مدعومة بشكل كامل حتى الآن، لذا تأكد من تمكين [experiments.outputModule](/configuration/experiments/) مسبقًا.
-##### type: 'commonjs2'
+##### النوع: "commonjs2"
+
+
```js
export default {
// …
output: {
library: {
- // note there's no `name` here
+ // لاحظ أنه لا يوجد `name` هنا
type: "commonjs2",
},
},
};
```
-The **return value of your entry point** will be assigned to the `module.exports`. As the name implies, this is used in Node.js (CommonJS) environments:
+سيتم تعيين **قيمة الإرجاع الخاصة بـ entry point** إلى `module.exports`. كما يوحي الاسم، يُستخدم هذا في بيئات Node.js (CommonJS):
```js
export default _entry_return_;
@@ -1320,15 +1311,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"
@@ -1337,16 +1328,16 @@ export default {
// …
output: {
library: {
- // note there's no `name` here
+ // لاحظ أنه لا يوجد `name` هنا
type: "commonjs-static",
},
},
};
```
-Individual exports will be set as properties on `module.exports`. The "static" in the name refers to the output being statically analysable, and thus named exports are importable into ESM via Node.js:
+سيتم تعيين الصادرات الفردية كخصائص على `module.exports`. تشير كلمة "ثابت" في الاسم إلى أن output قابل للتحليل بشكل ثابت، وبالتالي فإن الصادرات المسماة قابلة للاستيراد إلى ESM عبر Node.js:
-Input:
+الإدخال:
```js
export function doSomething() {}
@@ -1362,27 +1353,29 @@ 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 `
@@ -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
+npm run build
```
-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 `