Output

تحديد خيارات تكوين output يخبر webpack كيف يكتب الملفات المترجمة إلى القرص. لاحظ أنه يمكن وجود عدة نقاط entry، لكن لا يتم تحديد إلا تكوين output واحد.

الاستخدام

الحد الأدنى المطلوب لخاصية output في تكوين webpack هو جعل قيمتها كائنًا وتوفير output.filename لاستخدامه اسمًا لملف أو ملفات الإخراج:

webpack.config.js

export default {
  output: {
    filename: "bundle.js",
  },
};

سيخرج هذا التكوين ملفًا واحدًا باسم bundle.js داخل مجلد dist.

نقاط دخول متعددة

إذا كان تكوينك ينشئ أكثر من "chunk" واحد، كما يحدث مع نقاط الدخول المتعددة أو عند استخدام إضافات مثل CommonsChunkPlugin، فينبغي استخدام الاستبدالات لضمان حصول كل ملف على اسم فريد.

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

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

export default {
  entry: {
    app: "./src/app.js",
    search: "./src/search.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
  },
};

// writes to disk: ./dist/app.js, ./dist/search.js

متقدم

إليك مثالًا أكثر تعقيدًا يستخدم CDN وهاشات للأصول:

config.js

export default {
  // ...
  output: {
    path: "/home/proj/cdn/assets/[fullhash]",
    publicPath: "https://cdn.example.com/assets/[fullhash]/",
  },
};

في الحالات التي لا يكون فيها publicPath النهائي لملفات الإخراج معروفًا وقت الترجمة، يمكن تركه فارغًا وتعيينه ديناميكيًا وقت التشغيل عبر المتغير __webpack_public_path__ في ملف نقطة الدخول:

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry