Other Options

هذه هي خيارات التخصيص المتبقّية التي يدعمها webpack.

AMD

object boolean: false

اضبط قيمة require.amd أو define.amd. وإذا ضبطت amd على false، فسيُعطَّل دعم AMD في webpack.

webpack.config.js

export default {
  // ...
  amd: {
    jQuery: true,
  },
};

ثمّة وحدات مكتوبة لـ AMD ذائعة الانتشار، أبرزها إصدارات jQuery من 1.7.0 إلى 1.9.1، لا تُسجِّل نفسها بوصفها وحدة AMD إلا إن أشار الـ loader إلى أنّه قد اتّخذ تنازلات خاصّة لإدراج إصدارات متعدّدة في الصفحة الواحدة.

وتمثَّلت هذه التنازلات في إمكانية قصر التسجيلات على إصدار بعينه، أو في دعم بيئات معزولة (sandboxes) مختلفة تحوي وحدات مُعرَّفة مختلفة.

ويُتيح لك هذا الخيار أن تضبط المفتاح الذي تبحث عنه وحدتك على قيمة صادقة (truthy). وعلى أيّ حال، فإنّ دعم AMD في webpack يتجاهل الاسم المُعرَّف.

الكفالة

boolean = false

يفشل عند أوّل خطأ بدلاً من التجاوز عنه. افتراضياً، يُسجِّل webpack هذه الأخطاء بلون أحمر في الطرفية، وكذلك في وحدة تحكّم المتصفّح عند استعمال HMR، لكنه يتابع الحزم. ولتفعيله:

webpack.config.js

export default {
  // ...
  bail: true,
};

سيُجبر هذا webpack على إنهاء عملية الحزم.

dependencies

[string]

قائمة name تُعرِّف كلّ التخصيصات المُجاورة التي يعتمد عليها هذا التخصيص. ولا بدّ أن تُصرَّف التخصيصات المُعتمَد عليها أوّلاً.

في وضع المراقبة، تُبطل الاعتماديات (invalidate) عملَ المُصرِّف حين:

1. تتغيّر الاعتمادية.
2. تكون الاعتمادية قيد التصريف أو في حالة إبطال.

تذكَّر أنّ التخصيص الحالي لن يُصرَّف حتى تنتهي اعتمادياته.

webpack.config.js

export default [
  {
    name: "client",
    target: "web",
    // …
  },
  {
    name: "server",
    target: "node",
    dependencies: ["client"],
  },
];

تجاهل التحذيرات

[RegExp, function (WebpackError, Compilation) => boolean, {module?: RegExp, file?: RegExp, message?: RegExp}]

يُخبر webpack أن يتجاهل تحذيرات بعينها. ويمكن أن يكون ذلك عبر RegExp، أو عبر function مخصَّصة تختار التحذيرات استناداً إلى نسخة التحذير الخام، وتتلقّى WebpackError و Compilation بوصفهما وسيطين، وتُرجع قيمة boolean، أو عبر object يحمل الخصائص الآتية:

• file — RegExp لانتقاء الملفّ الذي صدر منه التحذير.
• message — RegExp لانتقاء رسالة التحذير.
• module — RegExp لانتقاء الوحدة التي صدر منها التحذير.

يجب أن يكون ignoreWarnings array يحوي أيّاً من القيم السابقة أو كلّها.

export default {
  // ...
  ignoreWarnings: [
    {
      module: /module2\.js\?[34]/, // RegExp
    },
    {
      module: /[13]/,
      message: /homepage/,
    },
    /warning from compiler/,
    (warning) => true,
  ],
};

loader

object

اكشف قيماً مخصَّصة داخل سياق الـ loader.

فمثلاً، يمكنك تعريف متغيّر جديد ضمن سياق الـ loader:

webpack.config.js

export default {
  // ...
  loader: {
    answer: 42,
  },
};

ثمّ تستعمل this.answer للوصول إلى قيمته داخل الـ loader:

custom-loader.js

export default function (source) {
  // ...
  console.log(this.answer); // ستُطبَع هنا `42`
  return source;
}

اسم

string

اسم التخصيص. يُستعمَل عند تحميل عدّة تخصيصات.

وهذا مفيد بوجه خاصّ عند تصدير مصفوفة تخصيصات، إذ يستعمل webpack name للتمييز بين كلّ تخصيص في السجلّات وفي مخرَجات stats.

webpack.config.js

export default {
  // ...
  name: "admin-app",
};

ولبُنى متعدّدة التخصيص:

export default [
  {
    name: "client",
    target: "web",
    // ...
  },
  {
    name: "server",
    target: "node",
    // ...
  },
];

التوازي

number = 100

يُحدِّد سقفاً لعدد الوحدات التي تُعالَج بالتوازي. ويمكن استعماله لضبط الأداء بدقّة أو للحصول على نتائج profiling أكثر موثوقية.

تُقلِّل القيم المنخفضة العمل المتزامن والضغط على الذاكرة، لكنها قد تُطيل زمن البناء الإجمالي. أمّا القيم المرتفعة فقد تُحسِّن الإنتاجية على الأجهزة القوية.

webpack.config.js

export default {
  // ...
  parallelism: 50,
};

حالات الاستخدام:

• قلِّل parallelism حين تصطدم بُناك بحدود الذاكرة (كما في مُشغِّلات CI المُقيَّدة).
• ارفعه حين تتوفّر لك معالجة وذاكرة كافيتان وتريد أن تُعظِّم إنتاجية البناء.

الملف الشخصي

boolean

التقط "profile" للتطبيق، يشمل إحصاءات وتلميحات يمكن تحليلها لاحقاً عبر أداة Analyze. كما أنّه سيُسجِّل ملخّصاً عن أزمنة الوحدات.

webpack.config.js

export default {
  // ...
  profile: true,
};

RecordsInputPath

string

حدِّد الملفّ الذي يقرأ منه webpack آخر مجموعة من السجلّات. وهذا يُستعمَل لإعادة تسمية ملفّ السجلّات. انظر المثال أدناه.

حين يُضبط هذا الخيار، يقرأ webpack السجلّات المُولَّدة سابقاً من هذا المسار، ويُوظِّفها مدخلاً لتعقّب معرّفات الوحدات والـ chunks تعقّباً مستقرّاً.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  recordsInputPath: path.join(__dirname, "records.json"),
  recordsOutputPath: path.join(__dirname, "records-next.json"),
};

RecordsOutputPath

string

حدِّد المسار الذي تُكتَب فيه السجلّات. يُبيِّن المثال الآتي كيف يمكن أن تستعمل هذا الخيار مع recordsInputPath لإعادة تسمية ملفّ السجلّات:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  recordsInputPath: path.join(__dirname, "records.json"),
  recordsOutputPath: path.join(__dirname, "newRecords.json"),
};

RecordsPath

string

استعمل هذا الخيار لتوليد ملفّ JSON يحوي "records" خاصّة بـ webpack، وهي قطع بيانات تُستعمَل لحفظ معرّفات الوحدات عبر بُنى متعدّدة. ويمكنك توظيف هذا الملفّ لتعقّب كيف تتغيّر الوحدات بين البُنى. ولتوليده، حدِّد موقعاً:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  recordsPath: path.join(__dirname, "records.json"),
};

تكون الـ records مفيدة بوجه خاص حين يكون لديك إعداد معقَّد يعتمد تقسيم الشيفرة (Code Splitting). وتُستعمَل بياناتها لضمان أنّ الحزم المُقسَّمة تحقِّق سلوك التخزين المؤقَّت (caching) الذي تنشده.

لقطة

object

تُحدِّد خيارات snapshot كيفية إنشاء لقطات نظام الملفّات وكيفية إبطالها.

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  snapshot: {
    managedPaths: [path.resolve(__dirname, "../node_modules")],
    immutablePaths: [],
    unmanagedPaths: [],
    buildDependencies: {
      hash: true,
      timestamp: true,
    },
    module: {
      timestamp: true,
    },
    contextModule: {
      hash: true,
      timestamp: true,
    },
    resolve: {
      timestamp: true,
    },
    resolveBuildDependencies: {
      hash: true,
      timestamp: true,
    },
  },
};

buildDependeency

object = { hash boolean = true, timestamp boolean = true }

اللقطات الخاصّة باعتماديات البناء حين تُستعمَل ذاكرة التخزين المؤقَّت الدائمة.

• hash — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من timestamp، لكنه يتغيّر بوتيرة أقلّ).
• timestamp — قارِن الطوابع الزمنية لتقرير الإبطال.

كلاهما اختياريّ.

• { hash: true } — مناسب لـ CI caching مع checkout جديد لا يحفظ الطوابع الزمنية ويعتمد على hashes.
• { timestamp: true } — مناسب للتخزين المؤقَّت في التطوير المحلي.
• { timestamp: true, hash: true } — مناسب لكلتا الحالتين أعلاه. تُقارَن الطوابع الزمنية أوّلاً، وهو ما يكون رخيصاً لأنّ webpack لا يحتاج إلى قراءة الملفّات لحساب hashes لها. ثمّ تُقارَن hashes المحتوى لاحقاً حين تتطابق الطوابع الزمنية فقط، وهو ما يُكلِّف خسارة طفيفة في الأداء عند البناء الأوّل.

immutablePaths

(RegExp | string)[]

مصفوفة من المسارات التي يُديرها مدير حزم، وتتضمّن إصداراً أو hash في مساراتها بحيث تكون جميع ملفّاتها غير قابلة للتغيير.

تأكّد من تغليف المسار في مجموعة التقاط (capture group) إن استعملت تعابير نمطية.

ManagedPaths

(RegExp | string)[]

مصفوفة من المسارات التي يُديرها مدير حزم ويمكن الثقة بأنها لن تُعدَّل بطرق أخرى.

تأكّد من تغليف المسار في مجموعة التقاط (capture group) إن استعملت تعابير نمطية حتى يستطيع webpack استخراج المسار. ومن أمثلة ذلك RegExp التي يستعملها webpack داخلياً لمطابقة مجلَّد node_modules:

/^(.+?[\\/]node_modules)[\\/]/

ومن حالات الاستخدام الشائعة لـ managedPaths استثناء بعض المجلَّدات من node_modules، فمثلاً قد ترغب في أن يعلم webpack أنّ الملفّات في مجلَّد node_modules/@azure/msal-browser يُتوقَّع تغيُّرها، وذلك يمكن إنجازه بتعبير نمطي كالآتي:

export default {
  snapshot: {
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@azure[\\/]msal-browser))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
};

مسارات غير مُدارة

(RegExp | string)[]

مصفوفة من المسارات التي لا يُديرها مدير حزم، ومحتوياتها قابلة للتغيُّر.

تأكّد من تغليف المسار في مجموعة التقاط (capture group) إن استعملت تعابير نمطية.

module

object = {hash boolean = true, timestamp boolean = true}

اللقطات الخاصّة ببناء الوحدات.

• hash — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من timestamp، لكنه يتغيّر بوتيرة أقلّ).
• timestamp — قارِن الطوابع الزمنية لتقرير الإبطال.

contextModule

object = {hash boolean = true, timestamp boolean = true}

اللقطات الخاصّة ببناء وحدات السياق (context modules).

• hash — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من timestamp، لكنه يتغيّر بوتيرة أقلّ).
• timestamp — قارِن الطوابع الزمنية لتقرير الإبطال.

resolve

object = {hash boolean = true, timestamp boolean = true}

اللقطات الخاصّة بتحليل الطلبات.

• hash — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من timestamp، لكنه يتغيّر بوتيرة أقلّ).
• timestamp — قارِن الطوابع الزمنية لتقرير الإبطال.

ResolveBuildDependeency

object = {hash boolean = true, timestamp boolean = true}

اللقطات الخاصّة بتحليل اعتماديات البناء حين تُستعمَل ذاكرة التخزين المؤقَّت الدائمة.

• hash — قارِن hashes المحتوى لتقرير الإبطال (أبهظ من timestamp، لكنه يتغيّر بوتيرة أقلّ).
• timestamp — قارِن الطوابع الزمنية لتقرير الإبطال.