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

A single preset that combines the web, web worker, node, electron and nwjs platforms, leaving each platform flag neutral so the bundle adapts at runtime instead of being locked to one environment. It is a convenient replacement for hand-writing target: ["web", "node"], and it always outputs ECMAScript modules. experiments.outputModule defaults to true for this target.

webpack.config.js

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

Notes for universal builds:

• new Worker(new URL(...)) resolves the Worker constructor from worker_threads in Node and from the global Worker on the web.
• commonjs and node-commonjs externals are supported in the ESM output (loaded via createRequire from process.getBuiltinModule), and global externals use globalThis as the global object.
• CSS runs in Node for server-side rendering: styles from style injection and link-loaded chunks are collected into globalThis["__webpack_css__" + output.uniqueName] for an SSR host to read.

bun

Compile for Bun. The bundle is emitted as ECMAScript modules (experiments.outputModule defaults to true), and Bun's own bun:* modules together with the Node.js built-in modules Bun provides are externalized instead of being bundled.

webpack.config.js

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

deno

Compile for Deno. The bundle is emitted as ECMAScript modules (experiments.outputModule defaults to true). Node.js built-ins are resolved through the node: specifier Deno requires, and Deno's own import protocols (npm:, jsr:, node: and http(s):// URLs) are kept external so the runtime loads them. A version may be specified, for example deno2 or deno1.40.

webpack.config.js

export default {
  // ...
  target: "deno", // also "deno2", "deno1.40", ...
};

[string]

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

webpack.config.js

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

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

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

webpack.config.js

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

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

خطأ شنيع

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