Targets

لأن JavaScript يمكن كتابته لكل من الخادم والمتصفح، يوفر webpack عدة أهداف نشر يمكنك ضبطها في تكوين webpack.

الاستخدام

لتعيين خاصية target، اضبط قيمة الهدف في تكوين webpack:

webpack.config.js

export default {
  target: "node",
};

في المثال أعلاه، سيترجم webpack الكود ليعمل في بيئة شبيهة بـ Node.js عند استخدام node، أي أنه يستخدم require الخاص بـ Node.js لتحميل chunks ولا يلمس الوحدات المدمجة مثل fs أو path.

لكل هدف إضافات ودعم خاص ببيئة النشر أو التشغيل التي يناسبها. راجع الأهداف المتاحة.

أهداف متعددة

مع أن webpack لا يدعم تمرير عدة سلاسل إلى خاصية target، يمكنك إنشاء مكتبة isomorphic عبر تجميع تكوينين منفصلين:

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const serverConfig = {
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "lib.node.js",
  },
  // …
};

const clientConfig = {
  target: "web", // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "lib.js",
  },
  // …
};

export default [serverConfig, clientConfig];

سينشئ المثال أعلاه ملفي lib.js و lib.node.js داخل مجلد dist.

موارد

كما يظهر من الخيارات أعلاه، توجد عدة أهداف نشر يمكنك الاختيار منها. فيما يلي قائمة بأمثلة وموارد يمكن الرجوع إليها.

• compare-webpack-target-bundles: مورد ممتاز لاختبار أهداف webpack المختلفة واستعراضها، ومفيد أيضًا عند الإبلاغ عن الأخطاء.
• Boilerplate of Electron-React Application: مثال جيد على عملية بناء لتطبيق Electron يشمل العملية الرئيسية وعملية العارض.