Devtool

يتحكم هذا الخيار في إمكانية وكيفية إنشاء Source Maps. استخدم SourceMapDevToolPlugin للحصول على تخصيص أكثر دقة. راجع Rule.extractSourceMap للتعامل مع Source Maps الموجودة.

devtool

string = 'eval' Array<{ type: "all" | "javascript" | "css", use: string }> false

اختر النمط source mapping لتحسين عملية التصحيح. يمكن أن تؤثر هذه القيم على سرعة build وrebuild بشكل كبير.

يمكنك أيضًا توفير array من الكائنات لتخصيص أنماط مختلفة لـ Source Map لأنواع asset مختلفة:

webpack.config.js

export default {
  // ...
  devtool: [
    { type: "javascript", use: "source-map" },
    { type: "css", use: "inline-source-map" },
  ],
};

يحدد الحقل type نوع asset الذي يجب أن يتلقى القيمة devtool:

• "all" - ينطبق على جميع أنواع asset (JavaScript وCSS)
• "javascript" - ينطبق فقط على ملفات JavaScript
• "css" - ينطبق فقط على ملفات CSS

عند استخدام array، ستتم معالجة كل entry بالترتيب. إذا قمت بتوفير قيمة string، فسيتم التعامل معها على أنها { type: "all", use: "your-string-value" }.

بعض هذه القيم مناسبة للتطوير وبعضها مناسب للإنتاج. للتطوير، تحتاج عادةً إلى Source Maps سريع بتكلفة bundle الحجم، ولكن بالنسبة للإنتاج، فأنت تريد Source Maps منفصلة دقيقة وتدعم التقليل.

الصفات

bundled code - ترى كل التعليمات البرمجية التي تم إنشاؤها كنقطة كبيرة من التعليمات البرمجية. لا ترى modules منفصلة عن بعضها البعض.

generated code - ترى كل module منفصلاً عن بعضها البعض، ومزودًا بتعليقات توضيحية بأسماء module. ترى الكود الذي تم إنشاؤه بواسطة webpack. مثال: بدلاً من import {test} from "module"; test(); ترى شيئًا مثل var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();.

transformed code - ترى كل module منفصلاً عن بعضها البعض، ومزودًا بتعليقات توضيحية بأسماء module. ترى الكود قبل أن يقوم webpack بتحويله، ولكن بعد loaders ينقله. مثال: بدلاً من import {test} from "module"; class A extends test {} ترى شيئًا مثل import {test} from "module"; var A = function(_test) { ... }(test);

original source - ترى كل module منفصلاً عن بعضها البعض، ومزودًا بتعليقات توضيحية بأسماء module. ترى الكود قبل الترجمة، كما قمت بتأليفه. هذا يعتمد على دعم Loader.

without source content - لم يتم تضمين محتويات المصادر في Source Maps. يحاول browsers عادةً تحميل المصدر من web server أو نظام الملفات. يجب عليك التأكد من تعيين output.devtoolModuleFilenameTemplate بشكل صحيح لمطابقة عناوين URL المصدر.

(lines only) - يتم تبسيط Source Maps تبسيطها إلى تعيين واحد لكل سطر. يعني هذا عادةً تعيينًا واحدًا لكل عبارة (على افتراض أنك تقوم بتأليفها بهذه الطريقة). يمنعك هذا من تصحيح أخطاء التنفيذ على مستوى العبارة ومن نقاط توقف الإعدادات على أعمدة السطر. الدمج مع التصغير غير ممكن لأن أدوات التصغير عادةً ما تصدر سطرًا واحدًا فقط.

التنمية

الخيارات التالية مثالية للتطوير:

eval - يتم تنفيذ كل module باستخدام eval() و//# sourceURL. هذا سريع جدًا. العيب الرئيسي هو أنه لا يعرض أرقام الأسطر بشكل صحيح حيث يتم تعيينه للكود المنقول بدلاً من الكود الأصلي (لا يوجد Source Maps من loaders).

eval-source-map - يتم تنفيذ كل module باستخدام eval() ويتم إضافة Source Map كـ Data URL إلى eval(). في البداية كان بطيئًا، لكنه يوفر سرعة rebuild سريعة وينتج ملفات حقيقية. يتم تعيين أرقام الأسطر بشكل صحيح حيث يتم تعيينها إلى الكود الأصلي. إنها تنتج أفضل جودة Source Maps للتطوير.

eval-cheap-source-map - على غرار eval-source-map، يتم تنفيذ كل module باستخدام eval(). إنه "رخيص" لأنه لا يحتوي على تعيينات للأعمدة، بل يقوم فقط بتعيين أرقام الأسطر. إنه يتجاهل Source Maps من loaders ويعرض فقط الكود المنقول المشابه لـ eval devtool.

eval-cheap-module-source-map - يشبه eval-cheap-source-map، ومع ذلك، في هذه الحالة تتم معالجة Source Maps من loaders للحصول على نتائج أفضل. ومع ذلك، تم تبسيط Loader Source Maps إلى تعيين واحد لكل سطر.

حالات خاصة

الخيارات التالية ليست مثالية للتطوير أو الإنتاج. فهي ضرورية لبعض الحالات الخاصة، مثلاً لبعض أدوات الطرف الثالث.

inline-source-map - تتم إضافة Source Map كـ Data URL إلى bundle.

cheap-source-map - Source Map بدون تعيينات الأعمدة التي تتجاهل loader Source Maps.

inline-cheap-source-map - يشبه cheap-source-map ولكن تتم إضافة Source Map كـ Data URL إلى bundle.

cheap-module-source-map - Source Map بدون تعيينات أعمدة تعمل على تبسيط loader Source Maps إلى تعيين واحد لكل سطر.

inline-cheap-module-source-map - يشبه cheap-module-source-map ولكن تتم إضافة Source Map كـ Data URL إلى bundle.

الإنتاج

تُستخدم هذه الخيارات عادةً في الإنتاج:

(none) (احذف الخيار devtool أو اضبط devtool: false) - لا ينبعث Source Map. هذا خيار جيد للبدء به.

source-map - يتم إصدار Source Map كامل كملف منفصل. فهو يضيف تعليقًا مرجعيًا إلى bundle حتى تعرف أدوات التطوير مكان العثور عليه.

hidden-source-map - مثل source-map، لكنه لا يضيف تعليقًا مرجعيًا إلى bundle. يكون ذلك مفيدًا إذا كنت تريد فقط أن يقوم Source Maps بتعيين تتبعات مكدس الأخطاء من تقارير الأخطاء، ولكنك لا تريد كشف Source Map لأدوات تطوير browser.

nosources-source-map - يتم إنشاء Source Map بدون sourcesContent بداخله. يمكن استخدامه لتعيين آثار المكدس على client دون الكشف عن كافة التعليمات البرمجية المصدر. يمكنك نشر الملف Source Map على web server.