SourceMapDevToolPlugin

يعطيك هذا plugin تحكمًا أدق في إنشاء source maps. قد يفعّله webpack تلقائيًا عند استخدام بعض قيم خيار الإعداد devtool.

new webpack.SourceMapDevToolPlugin(options);

الخيارات

يدعم plugin الخيارات التالية:

• test (string RegExp function (asset) => boolean [string, RegExp, function (asset) => boolean]): يضمّن source maps للـ modules حسب الامتداد. القيمة الافتراضية تشمل .js و.mjs و.css.

• include (string RegExp function (asset) => boolean [string, RegExp, function (asset) => boolean]): يضمّن source maps لمسارات modules التي تطابق القيمة المحددة.

• exclude (string RegExp function (asset) => boolean [string, RegExp], function (asset) => boolean): يستبعد modules المطابقة من إنشاء source maps.

• filename (string): يحدد اسم ملف SourceMap الناتج. إذا لم تحدد قيمة، فسيُضمّن source map داخل الملف.

• append (string function false): يضيف القيمة المحددة إلى asset الأصلي. غالبًا تكون تعليق #sourceMappingURL. تُستبدل [url] بعنوان URL الخاص بملف source map. منذ webpack v4.36.0، يدعم هذا الخيار معاملات المسار: [chunk] و[filename] و[contenthash]. ضبط append على false يعطل الإضافة.

  ابتداءً من الإصدار 5.84.0، يسمح webpack بأن تكون قيمة append دالة تستقبل path data وكائن asset info، ثم ترجع string.

  نسخ

  (pathData: PathData, assetInfo?: AssetInfo) => string;

• moduleFilenameTemplate (string): راجع output.devtoolModuleFilenameTemplate.

• fallbackModuleFilenameTemplate (string): راجع الرابط السابق.

• ignoreList (string RegExp function (source) => boolean [string, RegExp, function (source) => boolean]): يحدد هل يجب تجاهل ملفات source المطابقة داخل source maps.

• module = true (boolean): يحدد هل يجب على loaders إنشاء source maps.

• columns = true (boolean): يحدد هل تُستخدم mappings على مستوى الأعمدة.

• namespace (string): بادئة namespace تسمح بوجود أكثر من webpack root داخل devtools. راجع output.devtoolNamespace.

• noSources = false (boolean): يمنع تضمين محتوى ملفات source داخل source map.

• publicPath (string): ينشئ URLs مطلقة مع بادئة public path، مثل https://example.com/project/.

• fileContext (string): يجعل معامل [file] نسبيًا إلى هذا المجلد.

• sourceRoot (string): يحدد قيمة مخصصة لخاصية sourceRoot داخل SourceMap.

• debugIds (boolean): إذا كانت true، فسيضيف webpack ids فريدة داخل ملفات source وsourcemaps، مما يسهل ربط sourcemaps بالبناء الصحيح. راجع اقتراح TC39 الخاص بـ sourcemap debug ID لمزيد من التفاصيل.

يفيد خيار fileContext عندما تريد تخزين source maps في مجلد أعلى بدون ظهور ../../ داخل [url] المطلق.

أمثلة

تعرض الأمثلة التالية حالات استخدام شائعة لهذا plugin.

استخدام أساسي

يمكنك استخدام الكود التالي لاستبدال خيار الإعداد devtool: inline-source-map بإعداد مخصص مكافئ باستخدام plugin:

export default {
  // ...
  devtool: false,
  plugins: [new webpack.SourceMapDevToolPlugin({})],
};

استبعاد خرائط vendor

يستبعد الكود التالي source maps لأي modules داخل bundle باسم vendor.js:

new webpack.SourceMapDevToolPlugin({
  filename: "[file].map[query]",
  exclude: ["vendor.js"],
});

استضافة source maps خارجيًا

اضبط URL للـ source maps عندما تريد استضافتها على خادم خارجي، مثل خادم يتطلب صلاحيات وصول.

new webpack.SourceMapDevToolPlugin({
  append: "\n//# sourceMappingURL=https://example.com/sourcemap/[url]",
  filename: "[file].map[query]",
});

وفي الحالات التي تُخزن فيها source maps في مجلد أعلى:

project
|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash].js.map

مع الإعداد التالي:

new webpack.SourceMapDevToolPlugin({
  filename: "sourcemaps/[file].map",
  publicPath: "https://example.com/project/",
  fileContext: "public",
});

سينتج URL بالشكل التالي:

https://example.com/project/sourcemaps/bundle-[hash].js.map