Target
يستطيع webpack أن يُصرّف لعدّة بيئات أو targets. ولفهم المقصود بـ target تفصيلاً، اقرأ صفحة مفهوم الـ targets.
target
string [string] false
يأمر هذا الخيار webpack بتوليد شيفرة runtime مناسبة لبيئة بعينها. ولاحظ أنّ شيفرة runtime في webpack ليست هي شيفرة المستخدم التي تكتبها أنت، فإن كنت تريد استهداف بيئات معيّنة فعليك أن تُحوِّل شيفرتك بمُحوِّل كـ Babel. فإن كانت شيفرتك المصدرية فيها arrow functions وأردت تنفيذ الحزمة في بيئات ES5، فلن يُحوِّلها webpack تلقائياً لمجرّد أنّك ضبطت target.
القيمة الافتراضية هي 'browserslist'، أو 'web' حين لا يُعثر على تخصيص browserslist.
string
تُدعَم القيم النصّية الآتية عبر WebpackOptionsApply:
| الخيار | الوصف |
|---|---|
async-node[[X].Y] | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل fs و vm لتحميل الـ chunks بشكل غير متزامن). |
electron[[X].Y]-main | تصريف لـ Electron خاصّ بالعملية الرئيسية (main process). |
electron[[X].Y]-renderer | تصريف لـ Electron خاصّ بعملية العرض (renderer process)، ويُوفِّر هدفاً يستعمل JsonpTemplatePlugin و FunctionModulePlugin لبيئات المتصفّح، و NodeTargetPlugin و ExternalsPlugin لوحدات CommonJS ووحدات Electron المدمجة. |
electron[[X].Y]-preload | تصريف لـ Electron خاصّ بعملية العرض، ويُوفِّر هدفاً يستعمل NodeTemplatePlugin مع ضبط asyncChunkLoading على true، و FunctionModulePlugin لبيئات المتصفّح، و NodeTargetPlugin و ExternalsPlugin لوحدات CommonJS ووحدات Electron المدمجة. |
node[[X].Y] | تصريف للاستعمال في بيئة شبيهة بـ Node.js (تستعمل require الخاصة بـ Node.js لتحميل الـ chunks). |
node-webkit[[X].Y] | تصريف للاستعمال في WebKit، ويستعمل JSONP لتحميل الـ chunks. ويُتيح استيراد وحدات Node.js المدمجة و nw.gui (تجريبي). |
nwjs[[X].Y] | مثل node-webkit تماماً. |
web | تصريف للاستعمال في بيئة شبيهة بالمتصفّح (الافتراضي). |
webworker | تصريف بوصفه WebWorker. |
esX | تصريف لإصدار ECMAScript المُحدَّد. أمثلة: es5، es2020. |
browserslist | استنتاج المنصّة وميزات ES من تخصيص browserslist (افتراضي إن كان تخصيص browserslist متاحاً). |
فمثلاً، حين يكون target مضبوطاً على "electron-main"، يُضيف webpack عدّة متغيّرات خاصّة بـ electron.
ويمكن اختياراً تحديد إصدار من node أو electron، وهو ما يُعبَّر عنه بـ [[X].Y] في الجدول أعلاه.
webpack.config.js
export default {
// ...
target: "node12.18",
};وهذا يُعين على تحديد ميزات ES التي قد تُستعمَل في توليد شيفرة runtime (إذ تُغلَّف جميع الـ chunks والوحدات داخل شيفرة runtime).
browserslist
إن كان للمشروع تخصيص browserslist، فإنّ webpack سيُوظِّفه في:
- تحديد ميزات ES التي قد تُستعمَل في توليد شيفرة runtime.
- استنتاج بيئة العمل (مثلاً:
last 2 node versionsتكافئtarget: "node"مع بعض إعداداتoutput.environment).
القيم المدعومة لـ browserslist:
browserslist— استعمل تخصيص browserslist والبيئة المحلولين تلقائياً (من أقربpackage.jsonأو من متغيّر البيئةBROWSERSLIST، انظر توثيق browserslist للتفاصيل).browserslist:modern— استعمل بيئةmodernمن تخصيص browserslist المحلول تلقائياً.browserslist:last 2 versions— استعمل استعلام browserslist صريحاً (وسيُتجاهَل ملفّ التخصيص).browserslist:/path/to/config— حدِّد ملفّ تخصيص browserslist صراحةً.browserslist:/path/to/config:modern— حدِّد ملفّ تخصيص browserslist وبيئةً صراحةً.
[string]
حين تُمرَّر عدّة أهداف، فلن يُستعمَل إلا المشترك بين الميزات:
webpack.config.js
export default {
// ...
target: ["web", "es5"],
};سيُولِّد webpack شيفرة runtime لمنصّة الويب، ولن يستعمل سوى ميزات ES5.
وفي الوقت الحالي، لا يمكن مزج جميع الأهداف بحرّية.
webpack.config.js
export default {
// ...
target: ["web", "node"],
};سيُسبِّب ذلك خطأً، إذ لا يدعم webpack حتى الآن هدفاً عمومياً (universal target).
خطأ شنيع
اضبط target على false إن لم تكفِ احتياجاتك أيّ من الأهداف المعرَّفة مُسبقاً، ولن يُطبَّق عندئذٍ أيّ plugin.
webpack.config.js
export default {
// ...
target: false,
};أو يمكنك تطبيق ما تشاء من plugins بنفسك:
webpack.config.js
import webpack from "webpack";
export default {
// ...
target: false,
plugins: [
new webpack.web.JsonpTemplatePlugin(options.output),
new webpack.LoaderTargetPlugin("web"),
],
};وإن لم تُقدَّم أيّ معلومات عن الهدف أو عن ميزات البيئة، فستُستعمَل ES2015.
1 Contributor
