Target

يستطيع webpack أن يُصرّف لعدّة بيئات أو targets. ولفهم المقصود بـ target تفصيلاً، اقرأ صفحة مفهوم الـ targets.

target

string [string] false

يأمر هذا الخيار webpack بتوليد شيفرة runtime مناسبة لبيئة بعينها. ولاحظ أنّ شيفرة runtime في webpack ليست هي شيفرة المستخدم التي تكتبها أنت، فإن كنت تريد استهداف بيئات معيّنة فعليك أن تُحوِّل شيفرتك بمُحوِّل كـ Babel. فإن كانت شيفرتك المصدرية فيها arrow functions وأردت تنفيذ الحزمة في بيئات ES5، فلن يُحوِّلها webpack تلقائياً لمجرّد أنّك ضبطت target.

القيمة الافتراضية هي 'browserslist'، أو 'web' حين لا يُعثر على تخصيص browserslist.

string

تُدعَم القيم النصّية الآتية عبر WebpackOptionsApply:

فمثلاً، حين يكون 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 وبيئةً صراحةً.

universal

إعداد مسبق واحد يجمع منصات web وweb worker وnode وelectron وnwjs، ويترك مؤشر كل منصة محايدًا كي تتكيف الحزمة في وقت التشغيل بدل التقيد ببيئة واحدة. وهو بديل مختصر لكتابة target: ["web", "node"] يدويًا، وتكون مخرجاته دائمًا ECMAScript modules. القيمة الافتراضية لـ experiments.outputModule مع هذا الهدف هي true.

webpack.config.js

export default {
  // ...
  target: "universal",
};

ملاحظات حول عمليات البناء الشاملة:

• يحل new Worker(new URL(...)) مُنشئ Worker من worker_threads في Node، ومن Worker العام في الويب.
• تدعم مخرجات ESM عناصر commonjs وnode-commonjs الخارجية، وتُحمّل عبر createRequire من process.getBuiltinModule. أما العناصر الخارجية من نوع global فتستخدم globalThis ككائن عام.
• يعمل CSS في Node لأغراض التصيير من جهة الخادم؛ إذ تُجمع الأنماط المحقونة عبر style والـchunks المحمّلة عبر link في globalThis["__webpack_css__" + output.uniqueName] ليقرأها مضيف SSR.

bun

يُصرِّف هذا الهدف الشيفرة لـBun. تخرج الحزمة بصيغة ECMAScript modules، وتكون القيمة الافتراضية لـexperiments.outputModule هي true. كما يعامل وحدات bun:* الخاصة بـBun ووحدات Node.js المدمجة التي يوفرها بوصفها externals بدل تضمينها في الحزمة.

webpack.config.js

export default {
  // ...
  target: "bun",
};

deno

يُصرِّف هذا الهدف الشيفرة لـDeno. تخرج الحزمة بصيغة ECMAScript modules، وتكون القيمة الافتراضية لـexperiments.outputModule هي true. تُحل وحدات Node.js المدمجة باستخدام بادئة node: التي يتطلبها Deno، وتبقى بروتوكولات الاستيراد الخاصة بـDeno (npm: وjsr: وnode: وعناوين http(s)://) خارج الحزمة ليتولى runtime تحميلها. ويمكن تحديد إصدار، مثل deno2 أو deno1.40.

webpack.config.js

export default {
  // ...
  target: "deno", // أو "deno2" و"deno1.40" وغيرها
};

[string]

حين تُمرَّر عدّة أهداف، فلن يُستعمَل إلا المشترك بين الميزات:

webpack.config.js

export default {
  // ...
  target: ["web", "es5"],
};

سيُولِّد webpack شيفرة runtime لمنصّة الويب، ولن يستعمل سوى ميزات ES5.

يمكنك أيضاً الجمع بين أهداف المنصات لبناء كود universal يعمل في عدة بيئات:

webpack.config.js

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

سيُولِّد webpack شيفرة runtime تعمل في بيئتي المتصفح وNode.js.

false

اضبط 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.