المسار العام

يمكن أن يكون خيار الإعداد publicPath مفيدًا جدًا في سيناريوهات متعددة. فهو يسمح لك بتحديد المسار الأساسي لجميع ملفات assets داخل تطبيقك.

حالات الاستخدام

توجد بعض حالات الاستخدام في التطبيقات الحقيقية حيث تصبح هذه الميزة مفيدة على نحو خاص. بشكل أساسي، كل ملف يتم إخراجه إلى مجلد output.path سيُشار إليه من موقع output.publicPath. يشمل ذلك الأجزاء الفرعية (التي تُنشأ عبر تقسيم الكود) وأي ملفات assets أخرى (مثل الصور والخطوط وغيرها) تكون جزءًا من dependency graph الخاص بك.

بناءً على البيئة

في التطوير مثلًا، قد يكون لدينا مجلد assets/ موجود على المستوى نفسه لصفحة index. هذا جيد، لكن ماذا لو أردنا استضافة كل هذه الملفات الثابتة على CDN في الإنتاج؟

لمعالجة هذه المشكلة يمكنك ببساطة استخدام متغير بيئة مألوف. لنفترض أن لدينا المتغير ASSET_PATH:

import webpack from "webpack";

// جرّب متغير البيئة، وإلا فاستخدم الجذر
const ASSET_PATH = process.env.ASSET_PATH || "/";

export default {
  output: {
    publicPath: ASSET_PATH,
  },

  plugins: [
    // يتيح لنا هذا استخدام متغيرات البيئة بأمان داخل الكود
    new webpack.DefinePlugin({
      "process.env.ASSET_PATH": JSON.stringify(ASSET_PATH),
    }),
  ],
};

أثناء التشغيل

حالة استخدام أخرى ممكنة هي تعيين publicPath أثناء التشغيل. يوفّر Webpack متغيرًا عامًا باسم __webpack_public_path__ يسمح لك بذلك. في نقطة إدخال تطبيقك، يمكنك فعل الآتي:

__webpack_public_path__ = process.env.ASSET_PATH;

هذا كل ما تحتاج إليه. وبما أننا نستخدم بالفعل DefinePlugin في إعداداتنا، فسيكون process.env.ASSET_PATH معرّفًا دائمًا، ولذلك يمكننا فعل ذلك بأمان.

// entry.js
import "./public-path";
import "./app";

publicPath التلقائي

قد لا تعرف مسبقًا ما ستكون قيمة publicPath، ويمكن لـ webpack التعامل مع ذلك تلقائيًا عبر تحديد المسار العام من متغيرات مثل import.meta.url، أو document.currentScript، أو script.src، أو self.location. ما تحتاج إليه هو تعيين output.publicPath إلى 'auto':

webpack.config.js

export default {
  output: {
    publicPath: "auto",
  },
};

لاحظ أنه في الحالات التي لا يكون فيها document.currentScript مدعومًا، مثل متصفح IE، ستحتاج إلى تضمين polyfill مثل currentScript Polyfill.