Output

يحتوي مفتاح المستوى الأعلى output على مجموعة خيارات ترشد webpack إلى كيفية ومكان إخراج bundles وassets، وأي شيء آخر تعمل له bundle أو تحمّله عبر webpack.

output.assetModuleFilename

string = '[hash][ext][query]' function (pathData, assetInfo) => string

نفس output.filename ولكن بالنسبة لـ Asset Modules.

تُضبط [name]، و[file]، و[query]، و[fragment]، و[base]، و[path] على string فارغ عند بناء assets من بدائل data URI.

output.asyncChunks

boolean = true

أنشئ async chunks تُحمّل عند الطلب.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    asyncChunks: true,
  },
};

output.auxiliaryComment

string object

عند استخدامه جنبًا إلى جنب مع output.library وoutput.libraryTarget، يتيح هذا الخيار للمستخدمين إدراج التعليقات داخل غلاف التصدير. لإدراج نفس التعليق لكل نوع libraryTarget، اضبط auxiliaryComment على string:

webpack.config.js

export default {
  // ...
  output: {
    library: "someLibName",
    libraryTarget: "umd",
    filename: "someLibName.js",
    auxiliaryComment: "Test Comment",
  },
};

وسينتج عنه ما يلي:

someLibName.js

(function webpackUniversalModuleDefinition(root, factory) {
  // تعليق الاختبار
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory(require("lodash"));
  }
  // تعليق الاختبار
  else if (typeof define === "function" && define.amd) {
    define(["lodash"], factory);
  }
  // تعليق الاختبار
  else if (typeof exports === "object") {
    exports.someLibName = factory(require("lodash"));
  }
  // تعليق الاختبار
  else {
    root.someLibName = factory(root._);
  }
})(this, (__WEBPACK_EXTERNAL_MODULE_1__) => {
  // ...
});

للتحكم الدقيق في كل تعليق libraryTarget، مرّر object:

webpack.config.js

export default {
  // ...
  output: {
    // ...
    auxiliaryComment: {
      root: "Root Comment",
      commonjs: "CommonJS Comment",
      commonjs2: "CommonJS2 Comment",
      amd: "AMD Comment",
    },
  },
};

output.charset

boolean = true

يخبر webpack بإضافة charset="utf-8" إلى HTML <script> tag.

output.chunkFilename

string = '[id].js' function (pathData, assetInfo) => string

يحدد هذا الخيار اسم ملفات chunk غير الأولية. راجع الخيار output.filename للحصول على تفاصيل حول القيم المحتملة.

لاحظ أنه يجب إنشاء أسماء الملفات هذه في runtime لإرسال طلبات chunks. ولهذا السبب، تحتاج العناصر النائبة مثل [name] و[chunkhash] إلى إضافة تعيين من معرف chunk إلى قيمة العنصر النائب إلى output bundle مع webpack runtime. يؤدي هذا إلى زيادة الحجم وقد يؤدي إلى إبطال bundle عند تغيير قيمة العنصر النائب لأي chunk.

افتراضيًا، يتم استخدام [id].js أو يتم استنتاج قيمة من output.filename (يتم استبدال [name] بـ [id] أو يتم إضافة [id]. مسبقًا).

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkFilename: "[id].js",
  },
};

الاستخدام كـ function:

webpack.config.js

export default {
  // ...
  output: {
    chunkFilename: (pathData) =>
      pathData.chunk.name === "main" ? "[name].js" : "[name]/[name].js",
  },
};

output.chunkFormat

false string: 'array-push' | 'commonjs' | 'module' | <any string>

تنسيق chunks (التنسيقات المضمنة افتراضيًا هي 'array-push' (web/WebWorker)، 'commonjs' (node.js)، 'module' (ESM)، ولكن يمكن إضافة تنسيقات أخرى بواسطة plugins).

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkFormat: "commonjs",
  },
};

output.chunkLoadTimeout

number = 120000

عدد المللي ثانية قبل انتهاء صلاحية طلب chunk. هذا الخيار مدعوم منذ webpack 2.6.0.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkLoadTimeout: 30000,
  },
};

output.chunkLoadingGlobal

string = 'webpackChunkwebpack'

يستخدم webpack المتغيّر global لتحميل chunks.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkLoadingGlobal: "myCustomFunc",
  },
};

output.chunkLoading

طريقة تحميل chunks. الطرق المضمّنة افتراضياً هي 'jsonp' (web)، و'import' (ESM)، و'importScripts' (WebWorker)، و'require' (sync Node.js)، و'async-node' (async Node.js)، ويمكن أن تضيف plugins طرقاً أخرى.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    chunkLoading: "async-node",
  },
};

output.clean

5.20.0+

boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }

export default {
  // ...
  output: {
    clean: true, // Clean the output directory before emit.
  },
};

export default {
  // ...
  output: {
    clean: {
      dry: true, // Log the assets that should be removed instead of deleting them.
    },
  },
};

export default {
  // ...
  output: {
    clean: {
      keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'.
    },
  },
};

export default {
  // ...
  output: {
    clean: {
      keep(asset) {
        return asset.includes("ignored/dir");
      },
    },
  },
};

يمكنك أيضًا استخدامه مع الخطاف:

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap(
  "Test",
  (asset) => {
    if (/ignored\/dir\//.test(asset)) return true;
  },
);

output.compareBeforeEmit

boolean = true

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

export default {
  // ...
  output: {
    compareBeforeEmit: false,
  },
};

output.crossOriginLoading

boolean = false string: 'anonymous' | 'use-credentials'

يطلب من webpack تمكين تحميل الأصل المتقاطع لـ chunks. يسري مفعوله فقط عند تعيين target على 'web'، والذي يستخدم JSONP لتحميل chunks عند الطلب، عن طريق إضافة <script> tags.

'anonymous' - تمكين التحميل عبر الأصل بدون بيانات اعتماد
'use-credentials' - تمكين التحميل المشترك ببيانات الاعتماد

output.cssChunkFilename

string function (pathData, assetInfo) => string

يحدد هذا الخيار اسم الملفات غير الأولية CSS output الموجودة على القرص. راجع الخيار output.filename للحصول على تفاصيل حول القيم المحتملة.

لا يجب عليك تحديد مسار مطلق هنا. ومع ذلك، لا تتردد في تضمين المجلدات المفصولة بـ '/'. يتم دمج هذا المسار المحدد مع القيمة output.path لتحديد الموقع على القرص.

output.cssFilename

string function (pathData, assetInfo) => string

يحدد هذا الخيار اسم ملفات CSS output الموجودة على القرص. راجع الخيار output.filename للحصول على تفاصيل حول القيم المحتملة.

output.devtoolFallbackModuleFilenameTemplate

string function (info)

يتم استخدام البديل عندما ينتج عن القالب string أو function أعلاه نسخ مكررة.

راجع output.devtoolModuleFilenameTemplate.

output.devtoolModuleFilenameTemplate

string = 'webpack://[namespace]/[resource-path]?[loaders]' function (info) => string

يتم استخدام هذا الخيار فقط عندما يستخدم devtool خيارًا يتطلب أسماء module.

قم بتخصيص الأسماء المستخدمة في كل خريطة مصدر sources array. يمكن القيام بذلك عن طريق تمرير القالب string أو function. على سبيل المثال، عند استخدام devtool: 'eval'.

webpack.config.js

export default {
  // ...
  output: {
    devtoolModuleFilenameTemplate:
      "webpack://[namespace]/[resource-path]?[loaders]",
  },
};

البدائل التالية متاحة في سلاسل القالب (عبر webpack الداخلي ModuleFilenameHelpers):

القالب	الوصف
[مسار المورد المطلق]	اسم الملف المطلق
[الكل-loaders]	تلقائية وصريحة loaders ومعلمات تصل إلى الاسم الأول loader
[hash]	hash للمعرف module
[id]	المعرف module
[loaders]	صريح loaders ومعلمات تصل إلى اسم loader الأول
[المصدر]	المسار المستخدم لـ resolve الملف وأي معلمات استعلام مستخدمة في loader الأول
[مسار المورد]	المسار المستخدم لـ resolve الملف بدون أي معلمات استعلام
[مساحة الاسم]	مساحة اسم modules. غالبا اسم library عند البناء كـ library، أو تكون فارغة

عند استخدام function، تتوفر نفس الخيارات في علبة الجمل عبر المعلمة info:

export default {
  // ...
  output: {
    devtoolModuleFilenameTemplate: (info) =>
      `webpack:///${info.resourcePath}?${info.loaders}`,
  },
};

إذا كان modules المتعدد سيؤدي إلى نفس الاسم، فسيتم استخدام output.devtoolFallbackModuleFilenameTemplate بدلاً من ذلك لـ modules.

output.devtoolNamespace

string

يحدد هذا الخيار مساحة الاسم module المستخدمة مع output.devtoolModuleFilenameTemplate. عند عدم التحديد، سيتم تعيينه افتراضيًا على القيمة: output.uniqueName. يتم استخدامه لمنع تصادمات مسار الملف المصدر في Source Maps عند تحميل مكتبات متعددة تم إنشاؤها باستخدام webpack.

على سبيل المثال، إذا كان لديك مكتبتان، بمساحات الأسماء library1 وlibrary2، وكلاهما يحتوي على ملف ./src/index.js (مع محتويات محتملة مختلفة)، فسوف يعرضان هذه الملفات على أنها webpack://library1/./src/index.js وwebpack://library2/./src/index.js.

يمكنك استخدام سلاسل القالب مثل [name] لإنشاء مساحات أسماء ديناميكيًا استنادًا إلى سياق build، مما يوفر مرونة إضافية.

webpack.config.js

export default {
  // ...
  output: {
    filename: "[name]-bundle.js",
    library: "library-[name]",
    libraryTarget: "commonjs",
    devtoolNamespace: "library-[name]", // Sets a unique namespace for each library
  },
};

output.enabledChunkLoadingTypes

[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>]

قائمة أنواع التحميل chunk الممكّنة للاستخدام بواسطة entry points. سيتم ملؤه تلقائيًا بواسطة webpack. مطلوب فقط عند استخدام خيار function كخيار entry وإرجاع خيارchunkLoading من هناك.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    enabledChunkLoadingTypes: ["jsonp", "require"],
  },
};

output.enabledLibraryTypes

[string]

قائمة أنواع library الممكّنة للاستخدام بواسطة entry points.

export default {
  // ...
  output: {
    enabledLibraryTypes: ["module"],
  },
};

output.enabledWasmLoadingTypes

[string]

قائمة أنواع تحميل Wasm المُمكّنة للاستخدام بواسطة entry points.

export default {
  // ...
  output: {
    enabledWasmLoadingTypes: ["fetch"],
  },
};

output.environment

أخبر webpack ما هو نوع ميزات ES التي يمكن استخدامها في كود runtime الذي تم إنشاؤه.

export default {
  output: {
    environment: {
      // تدعم البيئة وظائف الأسهم ('() => { ... }').
      arrowFunction: true,
      // تدعم البيئة المزامنة function والانتظار ('async function () { انتظار ... }').
      asyncFunction: true,
      // تدعم البيئة BigInt بشكل حرفي (123n).
      bigIntLiteral: false,
      // تدعم البيئة const وتسمح للإعلانات المتغيرة.
      const: true,
      // تدعم البيئة التدمير ('{ a, b } = obj').
      destructuring: true,
      // تدعم البيئة متغير "المستند".
      document: true,
      // تدعم البيئة عملية `import()` غير المتزامن لاستيراد ECMAScript modules.
      dynamicImport: false,
      // تدعم البيئة عملية الاستيراد غير المتزامنة () عند إنشاء worker، فقط للويب targets في الوقت الحالي.
      dynamicImportInWorker: false,
      // تدعم البيئة التكرار "for of" ("for (const x of array) { ... }").
      forOf: true,
      // البيئة تدعم "globalThis".
      globalThis: true,
      // تدعم البيئة بناء الجملة ECMAScript Module لاستيراد ECMAScript modules (استيراد ... من '...').
      module: false,
      // تدعم البيئة اختصار أسلوب object ('{ module() {} }').
      methodShorthand: true,
      // يحدد ما إذا تم إنشاء بادئة `node:` لاستيرادات module الأساسية في البيئات التي تدعمها.
      // ينطبق هذا فقط على كود webpack runtime.
      nodePrefixForCoreModules: false,
      // تدعم البيئة التسلسل الاختياري ("obj?.a" أو "obj?.()").
      optionalChaining: true,
      // تدعم البيئة القيم الحرفية للقالب.
      templateLiteral: true,
      // تدعم البيئة `import.meta.dirname` و`import.meta.filename`.
      importMetaDirnameAndFilename: false,
    },
  },
};

output.filename

string function (pathData, assetInfo) => string

يحدد هذا الخيار اسم كل output bundle. تتم كتابة bundle إلى الدليل المحدد بواسطة الخيار output.path.

بالنسبة لنقطة entry واحدة، يمكن أن يكون هذا اسمًا ثابتًا.

webpack.config.js

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

ومع ذلك، عند إنشاء عدة bundles عبر أكثر من entry point، أو تقسيم الكود، أو plugins مختلف، يجب عليك استخدام أحد البدائل التالية لمنح كل bundle اسمًا فريدًا...

باستخدام اسم entry:

webpack.config.js

export default {
  // ...
  output: {
    filename: "[name].bundle.js",
  },
};

باستخدام معرف chunk الداخلي:

webpack.config.js

export default {
  // ...
  output: {
    filename: "[id].bundle.js",
  },
};

استخدام التجزئة التي تم إنشاؤها من المحتوى الذي تم إنشاؤه:

webpack.config.js

export default {
  // ...
  output: {
    filename: "[contenthash].bundle.js",
  },
};

الجمع بين البدائل المتعددة:

webpack.config.js

export default {
  // ...
  output: {
    filename: "[name].[contenthash].bundle.js",
  },
};

استخدام function لإرجاع اسم الملف:

webpack.config.js

export default {
  // ...
  output: {
    filename: (pathData) =>
      pathData.chunk.name === "main" ? "[name].js" : "[name]/[name].js",
  },
};

تأكد من قراءة Caching الدليل للحصول على التفاصيل. هناك خطوات أكثر من مجرد تعيين هذا الخيار.

لاحظ أن هذا الخيار يسمى اسم الملف ولكن لا يزال مسموحًا لك باستخدام شيء مثل 'js/[name]/bundle.js' لإنشاء بنية المجلد.

سلاسل القالب

البدائل التالية متاحة في سلاسل القالب (عبر webpack الداخلي TemplatedPathPlugin):

البدائل المتاحة على مستوى Compilation:

القالب	الوصف
[fullhash]	كامل hash من compilation
[hash]	نفسه، ولكن إهماله

البدائل المتاحة على مستوى Chunk:

القالب	الوصف
[id]	معرف chunk
[الاسم]	اسم chunk، إذا تم تعيينه، وإلا معرف chunk
[chunkhash]	hash لـ chunk، بما في ذلك جميع عناصر chunk
[contenthash]	hash الخاص بـ chunk، بما في ذلك عناصر نوع المحتوى هذا فقط (المتأثرة بـ `optimization.realContentHash`)

البدائل المتاحة على مستوى Module:

القالب	الوصف
[id]	معرف module
[مودوليد]	نفسه، ولكن إهماله
[hash]	hash من module
[مودولهاش]	نفسه، ولكن إهماله
[contenthash]	hash لمحتوى module

البدائل المتاحة على مستوى الملف:

القالب	الوصف
[ملف]	اسم الملف والمسار، بدون استعلام أو جزء
[استعلام]	الاستعلام باستخدام البادئة `?`
[جزء]	جزء ذو مسافة بادئة `#`
[قاعدة]	اسم الملف فقط (بما في ذلك الامتدادات)، بدون مسار
[قاعدة الملفات]	نفسه، ولكن إهماله
[المسار]	المسار الوحيد، بدون اسم الملف
[الاسم]	اسم الملف فقط بدون ملحق أو مسار
[تحويلة]	الامتداد بالبادئة `.` (غير متوفر لـ output.filename)

البدائل المتاحة على مستوى URL:

القالب	الوصف
[رابط]	عنوان URL

يمكن تحديد طول التجزئات ([hash]، [contenthash] أو [chunkhash]) باستخدام [hash:16] (القيمة الافتراضية هي 20). وبدلاً من ذلك، حدد output.hashDigestLength لتخصيص الطول بشكل عام.

من الممكن تصفية استبدال العنصر النائب عندما تريد استخدام أحد العناصر النائبة في اسم الملف الفعلي. على سبيل المثال، بالنسبة إلى output ملف [name].js، يجب عليك الهروب من العنصر النائب [name] عن طريق إضافة خطوط مائلة عكسية بين الأقواس. بحيث يُنشئ [\name\] [name] بدلاً من استبداله بـ name الخاص بـ asset.

على سبيل المثال: يُنشئ [\id\] [id] بدلاً من استبداله بـ id.

في حالة استخدام function لهذا الخيار، سيتم تمرير function إلى object يحتوي على بيانات للبدائل في الجدول أعلاه. سيتم تطبيق البدائل على string الذي تم إرجاعه أيضًا. سيكون للـ object الذي تم تمريره هذا النوع: (الخصائص المتاحة حسب السياق)

type PathData = {
  hash: string;
  hashWithLength: (number) => string;
  chunk: Chunk | ChunkPathData;
  module: Module | ModulePathData;
  contentHashType: string;
  contentHash: string;
  contentHashWithLength: (number) => string;
  filename: string;
  url: string;
  runtime: string | SortableSet<string>;
  chunkGraph: ChunkGraph;
};
type ChunkPathData = {
  id: string | number;
  name: string;
  hash: string;
  hashWithLength: (number) => string;
  contentHash: Record<string, string>;
  contentHashWithLength: Record<string, (number) => string>;
};
type ModulePathData = {
  id: string | number;
  hash: string;
  hashWithLength: (number) => string;
};

output.globalObject

string = 'self'

عند استهداف library، خاصة عندما يكون library.type هو 'umd'، يشير هذا الخيار إلى ما هو object العام الذي سيتم استخدامه لتركيب library. لجعل UMD build متاحًا على كل من browsers وNode.js، اضبط خيار output.globalObject على 'this'. الإعدادات الافتراضية هي self لـ targets المشابه للويب.

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى object العامة باستخدام قيمة output.library.name. اعتمادًا على قيمة الخيار type، يمكن أن يتغير object العام على التوالي، على سبيل المثال، self، global، أو globalThis.

على سبيل المثال:

webpack.config.js

export default {
  // ...
  output: {
    library: {
      name: "myLib",
      type: "umd",
    },
    filename: "myLib.js",
    globalObject: "this",
  },
};

output.hashDigest

string = 'hex'

الترميز الذي سيتم استخدامه عند إنشاء hash. جميع الترميزات من Node.JS 'hash.digest مدعومة. قد يكون استخدام 'base64' لأسماء الملفات مشكلة نظرًا لأنه يحتوي على الحرف / في أبجديته. وبالمثل، يمكن أن يحتوي 'latin1' على أي حرف.

5.104.0+

بالإضافة إلى ترميزات Node.js القياسية، يدعم webpack أيضًا خوارزميات الملخص المخصصة التالية لإنشاء قيم hash أقصر أو آمنة لعنوان URL:

'base64url' - ترميز base64 الآمن لعنوان URL (RFC 4648)، يوصى به لأسماء الملفات
'base62' - ترميز Base62 (0-9، A-Z، a-z)
'base58' - ترميز Base58 (أبجدية Bitcoin)
'base52' - ترميز Base52 (A-Z، a-z)
'base49' - ترميز Base49
'base36' - ترميز Base36 (0-9، A-Z)
'base32' - ترميز Base32 (RFC 4648)
'base25' - ترميز Base25

تعد هذه الترميزات المخصصة مفيدة بشكل خاص لإنشاء قيم hash أقصر في أسماء الملفات مع الحفاظ على أمان URL.

webpack.config.js

export default {
  output: {
    hashDigest: "base64url", // URL-safe encoding for filenames
  },
};

output.hashDigestLength

number = 20

طول البادئة للملخص hash المطلوب استخدامه.

output.hashFunction

string = 'md4' function

خوارزمية التجزئة المستخدمة. جميع الوظائف من Node.JS 'crypto.createHash مدعومة. منذ 4.0.0-alpha2، يمكن أن يكون hashFunction الآن مُنشئًا لـ hash function مخصص. يمكنك تقديم hash function غير مشفر لأسباب performance.

export default {
  // ...
  output: {
    hashFunction: require("metrohash").MetroHash64,
  },
};

تأكد من أن التجزئة function ستحتوي على طريقتين update وdigest متاحة.

output.hashSalt

ملح اختياري لتحديث hash عبر Node.JS' hash.update.

output.hotUpdateChunkFilename

string = '[id].[fullhash].hot-update.js'

قم بتخصيص أسماء ملفات التحديث الساخن chunks. راجع الخيار output.filename للحصول على تفاصيل حول القيم المحتملة.

العناصر النائبة الوحيدة المسموح بها هنا هي [id] و[fullhash]، والعنصر الافتراضي هو:

webpack.config.js

export default {
  // ...
  output: {
    hotUpdateChunkFilename: "[id].[fullhash].hot-update.js",
  },
};

output.hotUpdateGlobal

string

يُستخدم فقط عند ضبط target على 'web'، والذي يستخدم JSONP لتحميل التحديثات الساخنة.

يتم استخدام JSONP function لتحميل التحديث السريع chunks بشكل غير متزامن.

للحصول على تفاصيل، راجع output.chunkLoadingGlobal.

output.hotUpdateMainFilename

string = '[runtime].[fullhash].hot-update.json' function

تخصيص اسم ملف التحديث الساخن الرئيسي. [fullhash] و[runtime] متاحان كعنصر نائب.

output.iife

boolean = true

يخبر webpack بإضافة غلاف IIFE حول الكود المنبعث.

export default {
  // ...
  output: {
    iife: true,
  },
};

output.ignoreBrowserWarnings

5.81.0+

boolean = false

إخفاء التحذيرات من وحدة التحكم browser في الإنتاج. لا يؤثر هذا الخيار على الوحدة الطرفية/وحدة التحكم output.

webpack.config.js

export default {
  // ...
  output: {
    ignoreBrowserWarnings: true,
  },
};

output.importFunctionName

string = 'import'

اسم الموطن الأصلي import() function. يمكن استخدامها للحشو المتعدد، على سبيل المثال، مع dynamic-import-polyfill.

webpack.config.js

export default {
  // ...
  output: {
    importFunctionName: "__import__",
  },
};

output.importMetaName

string

الاسم الأصلي import.meta object (يمكن استبداله بـ polyfill).

webpack.config.js

export default {
  // ...
  output: {
    importMetaName: "pseudoImport.meta",
  },
};

output.library

Output a library يعرض صادرات entry point.

النوع: string | string[] | object

دعونا نلقي نظرة على مثال.

webpack.config.js

export default {
  // …
  entry: "./src/index.js",
  output: {
    library: "MyLibrary",
  },
};

لنفترض أنك قمت بتصدير function في src/index.js entry:

export function hello(name) {
  console.log(`hello ${name}`);
}

الآن سيتم ربط المتغير MyLibrary بصادرات ملف entry الخاص بك، وإليك كيفية استهلاك webpack المجمعة library:

<script src="https://example.org/path/to/my-library.js"></script>
<script>
  MyLibrary.hello("webpack");
</script>

في المثال أعلاه، نقوم بتمرير ملف entry واحد إلى entry، ومع ذلك، يمكن أن يقبل webpack العديد من أنواع entry point، على سبيل المثال، array، أو object.

إذا قمت بتوفير array كنقطة entry، فسيتم عرض النقطة الأخيرة فقط في array.

export default {
  // …
  entry: ["./src/a.js", "./src/b.js"], // only exports in b.js will be exposed
  output: {
    library: "MyLibrary",
  },
};

إذا تم توفير object كنقطة entry، فيمكن كشف جميع الإدخالات باستخدام بناء جملة array لـ library:

export default {
  // …
  entry: {
    a: "./src/a.js",
    b: "./src/b.js",
  },
  output: {
    filename: "[name].js",
    library: ["MyLibrary", "[name]"], // name is a placeholder here
  },
};

بافتراض أن كلا من a.js وb.js يقومان بتصدير function hello، فإليك كيفية استهلاك المكتبات:

<script src="https://example.org/path/to/a.js"></script>
<script src="https://example.org/path/to/b.js"></script>
<script>
  MyLibrary.a.hello("webpack");
  MyLibrary.b.hello("webpack");
</script>

راجع هذا المثال للمزيد.

لاحظ أن التخصيص أعلاه لن يعمل كما هو متوقع إذا كنت ستقوم بتخصيص خيارات library لكل entry point. إليك كيفية القيام بذلك تحت كل إدخال من إدخالاتك:

export default {
  // …
  entry: {
    main: {
      import: "./src/index.js",
      library: {
        // يمكن استخدام جميع الخيارات ضمن `output.library` هنا
        name: "MyLibrary",
        type: "umd",
        umdNamedDefine: true,
      },
    },
    another: {
      import: "./src/another.js",
      library: {
        name: "AnotherLibrary",
        type: "commonjs2",
      },
    },
  },
};

output.library.amdContainer

5.78.0+

استخدم حاوية (محددة في المساحة العالمية) للاتصال بوظائف define/require في AMD module.

export default {
  // …
  output: {
    library: {
      amdContainer: 'window["clientContainer"]',
      type: "amd", // or 'amd-require'
    },
  },
};

مما سيؤدي إلى ما يلي bundle:

globalThis.clientContainer.define(/* define args */); // or 'amd-require' window['clientContainer'].require(/*require args*/);

output.library.name

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
    },
  },
};

حدد اسمًا لـ library.

النوع:

string | string[] | {amd?: string, commonjs?: string, root?: string | string[]}

output.library.type

قم بتخصيص كيفية عرض library.

النوع: string

الأنواع المضمنة افتراضيًا هي 'var'، 'module'، 'modern-module'، 'assign'، 'assign-properties'، 'this'، 'window'، 'self'، 'global'، 'commonjs'، 'commonjs2'، 'commonjs-module'، 'commonjs-static'، 'amd'، 'amd-require'، 'umd'، 'umd2'، 'jsonp' و'system'، ولكن يمكن إضافة أشياء أخرى بواسطة plugins.

بالنسبة للأمثلة التالية، سنستخدم _entry_return_ للإشارة إلى القيم التي يتم إرجاعها بواسطة entry point.

فضح متغير

تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى الاسم المقدم بواسطة output.library.name في أي نطاق تم تضمين bundle فيه.

النوع: "فار"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "var",
    },
  },
};

عندما يتم تحميل library، سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى متغير:

const MyLibrary = _entry_return_;

// في برنامج نصي منفصل مع تحميل `MyLibrary`...
MyLibrary.doSomething();

النوع: "تعيين"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "assign",
    },
  },
};

سيؤدي هذا إلى إنشاء عمومية ضمنية لديها القدرة على إعادة تعيين قيمة موجودة (استخدمها بحذر):

MyLibrary = _entry_return_;

انتبه إلى أنه إذا لم يتم تعريف MyLibrary مسبقًا، فسيتم تعيين library في النطاق العام.

النوع: 'assign-properties'

5.16.0+

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "assign-properties",
    },
  },
};

يشبه type: 'assign' ولكنه خيار أكثر أمانًا لأنه سيعيد استخدام MyLibrary إذا كان موجودًا بالفعل:

// قم بإنشاء MyLibrary فقط إذا لم يكن موجودًا
MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary;
// ثم انسخ القيمة المرجعة إلى MyLibrary
// بشكل مشابه لما يفعله Object.assistant

// على سبيل المثال، يمكنك تصدير `hello` function في entry الخاص بك على النحو التالي
export function hello(name) {
  console.log(`Hello ${name}`);
}

// في برنامج نصي آخر مع MyLibrary تحميلها
// يمكنك تشغيل `hello` function بهذه الطريقة
MyLibrary.hello("World");

فضح عبر Object المهمة

تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى object محدد تحت الاسم المحدد بواسطة output.library.name.

اكتب: "هذا"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "this",
    },
  },
};

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى this ضمن الخاصية المسماة بواسطة output.library.name. معنى this متروك لك:

this.MyLibrary = _entry_return_;

// في نص منفصل...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if `this` is window

النوع: "نافذة"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "window",
    },
  },
};

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى window object باستخدام القيمة output.library.name.

globalThis.MyLibrary = _entry_return_;

globalThis.MyLibrary.doSomething();

النوع: "عالمي"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "global",
    },
  },
};

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى object العامة باستخدام القيمة output.library.name. اعتمادًا على قيمة target، يمكن أن تتغير القيمة العامة object على التوالي، على سبيل المثال، self أو global أو globalThis.

globalThis.MyLibrary = _entry_return_;

globalThis.MyLibrary.doSomething();

النوع: "كومونجس"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "commonjs",
    },
  },
};

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى exports object باستخدام القيمة output.library.name. كما يوحي الاسم، يتم استخدام هذا في بيئات CommonJS.

exports.MyLibrary = _entry_return_;

require("MyLibrary").doSomething();

Module أنظمة التعريف

ستؤدي هذه الخيارات إلى bundle الذي يأتي مع رأس كامل لضمان التوافق مع أنظمة module المختلفة. سيأخذ خيار output.library.name معنى مختلفًا ضمن خيارات output.library.type التالية.

النوع: 'module'

export default {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // لا تحدد `name` هنا
      type: "module",
    },
  },
};

Output كـ ES module.

ومع ذلك، لا تزال هذه الميزة تجريبية وغير مدعومة بشكل كامل حتى الآن، لذا تأكد من تمكين experiments.outputModule مسبقًا. بالإضافة إلى ذلك، يمكنك تتبع تقدم التطوير في هذا الموضوع.

النوع: "حديث-module"

v5.93.0+

export default {
  // …
  experiments: {
    outputModule: true,
  },
  output: {
    library: {
      // لا تحدد `name` هنا
      type: "modern-module",
    },
  },
};

ينشئ هذا التخصيص output شجرة قابلة للاهتزاز لـ ES Modules.

ومع ذلك، لا تزال هذه الميزة تجريبية وغير مدعومة بشكل كامل حتى الآن، لذا تأكد من تمكين experiments.outputModule مسبقًا.

النوع: "commonjs2"

export default {
  // …
  output: {
    library: {
      // لاحظ أنه لا يوجد `name` هنا
      type: "commonjs2",
    },
  },
};

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى module.exports. كما يوحي الاسم، يُستخدم هذا في بيئات Node.js (CommonJS):

export default _entry_return_;

require("MyLibrary").doSomething();

إذا قمنا بتحديد output.library.name مع type: commonjs2، فسيتم تعيين القيمة المرجعة لـ entry point إلى module.exports.[output.library.name].

النوع: "commonjs-module"

commonjs-module يعادل commonjs2. قد نقوم بإزالة commonjs-module في الإصدارات المستقبلية.

النوع: "commonjs-static"

5.66.0+

export default {
  // …
  output: {
    library: {
      // لاحظ أنه لا يوجد `name` هنا
      type: "commonjs-static",
    },
  },
};

سيتم تعيين الصادرات الفردية كخصائص على module.exports. تشير كلمة "ثابت" في الاسم إلى أن output قابل للتحليل بشكل ثابت، وبالتالي فإن الصادرات المسماة قابلة للاستيراد إلى ESM عبر Node.js:

الإدخال:

export function doSomething() {}

Output:

function doSomething() {}

// …

exports.doSomething = __webpack_exports__.doSomething;

الاستهلاك (CommonJS):

const { doSomething } = require("./output.cjs"); // doSomething => [Function: doSomething]

الاستهلاك (ESM):

import { doSomething } from "./output.cjs"; // doSomething => [Function: doSomething]

النوع: "أيه إم دي"

سيؤدي هذا إلى كشف library باعتباره AMD module.

AMD modules يتطلب تعريف entry chunk (على سبيل المثال، أول script الذي تم تحميله بواسطة علامة <script>) بخصائص محددة، مثل define وrequire والتي يتم توفيرها عادةً بواسطة RequireJS أو أي loaders متوافق (مثل almond). وإلا فإن تحميل AMD bundle الناتج مباشرة سيؤدي إلى خطأ مثل define is not defined.

بالتخصيص التالي...

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "amd",
    },
  },
};

سيتم تعريف output الذي تم إنشاؤه بالاسم "MyLibrary"، أي:

define("MyLibrary", [], () => _entry_return_);

يمكن تضمين bundle كجزء من <script> tag، ويمكن استدعاء bundle كما يلي:

require(["MyLibrary"], (MyLibrary) => {
  // افعل شيئًا باستخدام library...
});

إذا كان output.library.name غير محدد، فسيتم إنشاء ما يلي بدلاً من ذلك.

define(() => _entry_return_);

لن يعمل bundle كما هو متوقع، أو لن يعمل على الإطلاق (في حالة almond loader) إذا تم تحميله مباشرة بعلامة <script>. سيعمل فقط من خلال RequireJS غير المتزامن المتوافق module loader من خلال المسار الفعلي لهذا الملف، لذلك في هذه الحالة، قد يصبح output.path وoutput.filename مهمًا لهذا الإعداد المحدد إذا تم عرضهما مباشرة على server.

النوع: "يتطلب AMD"

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "amd-require",
    },
  },
};

هذا packages الخاص بك output مع غلاف AMD require(dependencies, factory) الذي تم تنفيذه على الفور.

يسمح النوع 'amd-require' باستخدام AMD dependencies دون الحاجة إلى استدعاء لاحق منفصل. كما هو الحال مع النوع 'amd'، يعتمد هذا على توفر require function المناسب في البيئة التي يتم فيها تحميل webpack output.

مع هذا النوع، لا يمكن استخدام الاسم library.

النوع: "أومد"

يؤدي هذا إلى كشف library الخاص بك تحت جميع تعريفات module، مما يسمح له بالعمل مع CommonJS، AMD، وكمتغير عام. ألقِ نظرة على UMD المستودع لمعرفة المزيد.

في هذه الحالة، أنت بحاجة إلى الخاصية library.name لتسمية module الخاص بك:

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
    },
  },
};

وأخيرًا output هو:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define([], factory);
  } else if (typeof exports === "object") {
    exports.MyLibrary = factory();
  } else {
    root.MyLibrary = factory();
  }
})(globalThis, () => _entry_return_);

لاحظ أن حذف library.name سيؤدي إلى تعيين كافة الخصائص التي يتم إرجاعها بواسطة entry point مباشرة إلى الجذر object، كما هو موثق ضمن object قسم التعيين. مثال:

export default {
  // ...
  output: {
    type: "umd",
  },
};

سيكون output:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define([], factory);
  } else {
    const a = factory();
    for (const i in a) (typeof exports === "object" ? exports : root)[i] = a[i];
  }
})(globalThis, () => _entry_return_);

يمكنك تحديد object لـ library.name للأسماء المختلفة لكل targets:

export default {
  // ...
  output: {
    library: {
      name: {
        root: "MyLibrary",
        amd: "my-library",
        commonjs: "my-common-library",
      },
      type: "umd",
    },
  },
};

النوع: "النظام"

سيؤدي هذا إلى كشف library كـ System.register module. تم إصدار هذه الميزة لأول مرة في webpack 4.30.0.

يتطلب النظام modules وجود global variable System في browser عند تنفيذ webpack bundle. يتيح لك التجميع إلى تنسيق System.register إمكانية System.import('/bundle.js') بدون تخصيص إضافي ويتم تحميل webpack bundle في سجل النظام module.

export default {
  // ...
  output: {
    library: {
      type: "system",
    },
  },
};

Output:

System.register([], (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) => ({
  execute() {
    // ...
  },
}));

بإضافة output.library.name إلى التخصيص بالإضافة إلى تعيين output.library.type على system، سيكون للـ output bundle اسم library كوسيطة لـ System.register:

System.register(
  "MyLibrary",
  [],
  (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) => ({
    execute() {
      // ...
    },
  }),
);

أنواع أخرى

النوع: "jsonp"

export default {
  // …
  output: {
    library: {
      name: "MyLibrary",
      type: "jsonp",
    },
  },
};

سيؤدي هذا إلى تغليف القيمة المرجعة لـ entry point في غلاف jsonp.

MyLibrary(_entry_return_);

سيتم تحديد dependencies لـ library من خلال التخصيص externals.

output.library.export

حدد التصدير الذي يجب عرضه كـ library.

النوع: string | string[]

إنه undefined افتراضيًا، والذي سيقوم بتصدير (مساحة الاسم) بالكامل object. توضح الأمثلة أدناه تأثير هذا التخصيص عند استخدام output.library.type: 'var'.

export default {
  output: {
    library: {
      name: "MyLibrary",
      type: "var",
      export: "default",
    },
  },
};

سيتم تعيين التصدير الافتراضي لـ entry point إلى الاسم library:

// إذا كان entry الخاص بك يحتوي على تصدير افتراضي
const MyLibrary = _entry_return_.default;

يمكنك تمرير array إلى output.library.export أيضًا، وسيتم تفسيره على أنه مسار إلى module ليتم تخصيصه لاسم library:

export default {
  output: {
    library: {
      name: "MyLibrary",
      type: "var",
      export: ["default", "subModule"],
    },
  },
};

وإليك الكود library:

const MyLibrary = _entry_return_.default.subModule;

output.library.auxiliaryComment

أضف تعليقًا في غلاف UMD.

النوع: string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }

لإدراج نفس التعليق لكل نوع umd، اضبط auxiliaryComment على string:

export default {
  // …
  mode: "development",
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      auxiliaryComment: "Test Comment",
    },
  },
};

وسينتج عنه ما يلي:

(function webpackUniversalModuleDefinition(root, factory) {
  // تعليق الاختبار
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  }
  // تعليق الاختبار
  else if (typeof define === "function" && define.amd) {
    define([], factory);
  }
  // تعليق الاختبار
  else if (typeof exports === "object") {
    exports.MyLibrary = factory();
  }
  // تعليق الاختبار
  else {
    root.MyLibrary = factory();
  }
})(globalThis, () => _entry_return_);

للتحكم الدقيق، مرّر object:

export default {
  // …
  mode: "development",
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      auxiliaryComment: {
        root: "Root Comment",
        commonjs: "CommonJS Comment",
        commonjs2: "CommonJS2 Comment",
        amd: "AMD Comment",
      },
    },
  },
};

output.library.umdNamedDefine

boolean

عند استخدام output.library.type: "umd"، سيؤدي ضبط output.library.umdNamedDefine إلى true إلى تسمية AMD module لـ UMD build. وبخلاف ذلك، يتم استخدام define مجهول.

export default {
  // ...
  output: {
    library: {
      name: "MyLibrary",
      type: "umd",
      umdNamedDefine: true,
    },
  },
};

AMD module سيكون:

define("MyLibrary", [], factory);

output.libraryExport

string [string]

قم بتخصيص module أو modules الذي سيتم عرضه عبر libraryTarget. إنه undefined بشكل افتراضي، وسيتم تطبيق نفس السلوك إذا قمت بتعيين libraryTarget إلى string فارغ، على سبيل المثال، '' سيتم تصدير (مساحة الاسم) بالكامل object. توضح الأمثلة أدناه تأثير هذا التخصيص عند استخدام libraryTarget: 'var'.

يتم دعم التخصيصات التالية:

libraryExport: 'default' - سيتم تعيين التصدير الافتراضي لـ entry point إلى library target:

// إذا كان entry يحتوي على تصدير افتراضي لـ `MyDefaultModule`
const MyDefaultModule = _entry_return_.default;

libraryExport: 'MyModule' - سيتم تعيين module المحدد إلى library target:

const { MyModule } = _entry_return_;

libraryExport: ['MyModule', 'MySubModule'] - يتم تفسير array على أنه مسار إلى module ليتم تخصيصه إلى library target:

const { MySubModule } = _entry_return_.MyModule;

مع تخصيصات libraryExport المحددة أعلاه، يمكن استخدام المكتبات الناتجة على هذا النحو:

MyDefaultModule.doSomething();
MyModule.doSomething();
MySubModule.doSomething();

output.libraryTarget

string = 'var'

قم بتخصيص كيفية عرض library. يمكن استخدام أي من الخيارات التالية. يرجى ملاحظة أن هذا الخيار يعمل مع القيمة المخصصة لـ output.library. بالنسبة للأمثلة التالية، من المفترض أن قيمة output.library تم تخصيصها كـ MyLibrary.

فضح متغير

تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى الاسم المقدم بواسطة output.library في أي نطاق تم تضمين bundle فيه.

libraryTarget: "فار"

عندما يتم تحميل library، سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى متغير:

const MyLibrary = _entry_return_;

// في نص منفصل...
MyLibrary.doSomething();

libraryTarget: "تعيين"

سيؤدي هذا إلى إنشاء عمومية ضمنية لديها القدرة على إعادة تعيين قيمة موجودة (استخدمها بحذر):

MyLibrary = _entry_return_;

انتبه إلى أنه إذا لم يتم تعريف MyLibrary مسبقًا، فسيتم تعيين library في النطاق العام.

libraryTarget: 'تعيين الخصائص'

5.16.0+

انسخ القيمة المرجعة إلى target object إذا كانت موجودة، وإلا قم بإنشاء target object أولاً:

// أنشئ target object إذا لم يكن موجودًا
MyLibrary = typeof MyLibrary === "undefined" ? {} : MyLibrary;
// ثم انسخ القيمة المرجعة إلى MyLibrary
// بشكل مشابه لما يفعله Object.assistant

// على سبيل المثال، يمكنك تصدير `hello` function في entry الخاص بك على النحو التالي
export function hello(name) {
  console.log(`Hello ${name}`);
}

// في برنامج نصي آخر يقوم بتشغيل MyLibrary
// يمكنك تشغيل `hello` function بهذه الطريقة
MyLibrary.hello("World");

فضح عبر Object المهمة

تقوم هذه الخيارات بتعيين القيمة المرجعة لـ entry point (على سبيل المثال، مهما كان entry point الذي تم تصديره) إلى object محدد تحت الاسم المحدد بواسطة output.library.

إذا لم يتم تعيين output.library إلى string غير فارغ، فإن السلوك الافتراضي هو أن جميع الخصائص التي يتم إرجاعها بواسطة entry point سيتم تعيينها إلى object كما هو محدد لـ output.libraryTarget المعين، عبر جزء التعليمات البرمجية التالي:

(function (e, a) {
  for (const i in a) {
    e[i] = a[i];
  }
})(output.libraryTarget, _entry_return_);

libraryTarget: "هذا"

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى هذا ضمن الخاصية المسماة بواسطة output.library. معنى this متروك لك:

this.MyLibrary = _entry_return_;

// في نص منفصل...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if this is window

libraryTarget: "نافذة"

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى window object باستخدام القيمة output.library.

globalThis.MyLibrary = _entry_return_;

globalThis.MyLibrary.doSomething();

libraryTarget: "عالمي"

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى global object باستخدام القيمة output.library.

globalThis.MyLibrary = _entry_return_;

globalThis.MyLibrary.doSomething();

libraryTarget: 'commonjs'

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى exports object باستخدام القيمة output.library. كما يوحي الاسم، يتم استخدام هذا في بيئات CommonJS.

exports.MyLibrary = _entry_return_;

require("MyLibrary").doSomething();

Module أنظمة التعريف

ستؤدي هذه الخيارات إلى bundle الذي يأتي مع رأس كامل لضمان التوافق مع أنظمة module المختلفة. سيأخذ خيار output.library معنى مختلفًا ضمن خيارات output.libraryTarget التالية.

libraryTarget: 'module'

Output كـ ES module. تأكد من تمكين experiments.outputModule مسبقًا.

لاحظ أن هذه الميزة غير مدعومة بشكل كامل حتى الآن، يرجى تتبع التقدم في هذا الموضوع.

libraryTarget: 'commonjs2'

سيتم تعيين قيمة الإرجاع الخاصة بـ entry point إلى module.exports. كما يوحي الاسم، يُستخدم هذا في بيئات CommonJS:

export default _entry_return_;

require("MyLibrary").doSomething();

لاحظ أنه لا يمكن استخدام output.library مع هذا output.libraryTarget بالتحديد، لمزيد من التفاصيل، يرجى قراءة هذه المشكلة.

libraryTarget: 'أمد'

سيؤدي هذا إلى كشف library باعتباره AMD module.

بالتخصيص التالي...

export default {
  // ...
  output: {
    library: "MyLibrary",
    libraryTarget: "amd",
  },
};

سيتم تعريف output الذي تم إنشاؤه بالاسم "MyLibrary"، أي.

define("MyLibrary", [], () => _entry_return_);

يمكن تضمين bundle كجزء من <script> tag، ويمكن استدعاء bundle كما يلي:

require(["MyLibrary"], (MyLibrary) => {
  // افعل شيئًا باستخدام library...
});

إذا كان output.library غير محدد، فسيتم إنشاء ما يلي بدلاً من ذلك.

define([], () => _entry_return_);

libraryTarget: "يتطلب AMD"

هذا packages الخاص بك output مع غلاف AMD require(dependencies, factory) الذي تم تنفيذه على الفور.

يسمح 'amd-require' target باستخدام AMD dependencies دون الحاجة إلى استدعاء لاحق منفصل. كما هو الحال مع 'amd' target، يعتمد هذا على توفر require function المناسب في البيئة التي يتم فيها تحميل webpack output.

مع هذا target، يتم تجاهل الاسم library.

libraryTarget: "أومد"

يؤدي هذا إلى كشف library الخاص بك تحت جميع تعريفات module، مما يسمح له بالعمل مع CommonJS، AMD وكمتغير عام. ألقِ نظرة على UMD المستودع لمعرفة المزيد.

في هذه الحالة، أنت بحاجة إلى الخاصية library لتسمية module الخاص بك:

export default {
  // ...
  output: {
    library: "MyLibrary",
    libraryTarget: "umd",
  },
};

وأخيرًا output هو:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define([], factory);
  } else if (typeof exports === "object") {
    exports.MyLibrary = factory();
  } else {
    root.MyLibrary = factory();
  }
})(
  typeof globalThis.self !== "undefined" ? globalThis : this,
  () => _entry_return_,
);

لاحظ أن حذف library سيؤدي إلى تعيين كافة الخصائص التي يتم إرجاعها بواسطة entry point مباشرةً إلى الجذر object، كما هو موثق ضمن object قسم التعيين. مثال:

export default {
  // ...
  output: {
    libraryTarget: "umd",
  },
};

سيكون output:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object") {
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    define([], factory);
  } else {
    const a = factory();
    for (const i in a) (typeof exports === "object" ? exports : root)[i] = a[i];
  }
})(
  typeof globalThis.self !== "undefined" ? globalThis : this,
  () => _entry_return_,
);

منذ webpack 3.1.0، يمكنك تحديد object لـ library للأسماء المختلفة لكل targets:

export default {
  // ...
  output: {
    library: {
      root: "MyLibrary",
      amd: "my-library",
      commonjs: "my-common-library",
    },
    libraryTarget: "umd",
  },
};

libraryTarget: "النظام"

سيؤدي هذا إلى كشف library كـ System.register module. تم إصدار هذه الميزة لأول مرة في webpack 4.30.0.

export default {
  // ...
  output: {
    libraryTarget: "system",
  },
};

Output:

System.register([], (_export) => ({
  setters: [],
  execute() {
    // ...
  },
}));

بإضافة output.library إلى التخصيص بالإضافة إلى تعيين output.libraryTarget على system، سيكون للـ output bundle اسم library كوسيطة لـ System.register:

System.register("my-library", [], (_export) => ({
  setters: [],
  execute() {
    // ...
  },
}));

يمكنك الوصول إلى SystemJS السياق عبر __system_context__:

// قم بتسجيل عنوان URL الحالي SystemJS module
console.log(__system_context__.meta.url);

// قم باستيراد SystemJS module، باستخدام عنوان URL الحالي لـ SystemJS module باعتباره الأصل
__system_context__.import("./other-file.js").then((m) => {
  console.log(m);
});

أخرى Targets

libraryTarget: 'jsonp'

سيؤدي هذا إلى تغليف القيمة المرجعة لـ entry point في غلاف jsonp.

MyLibrary(_entry_return_);

سيتم تحديد dependencies لـ library من خلال التخصيص externals.

output.module

boolean = false

Output JavaScript الملفات كنوع module. يتم تعطيله افتراضيًا لأنه ميزة تجريبية.

عند التمكين، سيقوم webpack بتعيين output.iife إلى false، output.scriptType إلى 'module' وminimizerOptions.module إلى true داخليًا.

إذا كنت تستخدم webpack لتجميع library ليستهلكه الآخرون، فتأكد من ضبط output.libraryTarget على 'module' عندما يكون output.module هو true.

export default {
  // ...
  experiments: {
    outputModule: true,
  },
  output: {
    module: true,
  },
};

output.path

string = path.join(process.cwd(), 'dist')

الدليل output كمسار مطلق.

webpack.config.js

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

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

export default {
  // ...
  output: {
    path: path.resolve(__dirname, "dist/assets"),
  },
};

لاحظ أنه سيتم استبدال [fullhash] في هذه المعلمة بـ hash من compilation. راجع Caching الدليل للحصول على التفاصيل.

output.pathinfo

boolean string: 'verbose'

يخبر webpack بتضمين التعليقات في bundles مع معلومات حول المحتوى المتضمن modules. يعرض 'verbose' مزيدًا من المعلومات مثل الصادرات ومتطلبات runtime وعمليات الإنقاذ.

تعتمد القيمة الافتراضية لـ output.pathinfo على mode:

Mode	الافتراضي
`"production"`	`false`
`"development"`	`true`
`"none"`	`false`

webpack.config.js

export default {
  // ...
  output: {
    pathinfo: true,
  },
};

output.publicPath

النوع:
- function
- string

الإعدادات الافتراضية لـ output.publicPath هي 'auto' مع web وweb-worker targets، راجع هذا الدليل للتعرف على حالات الاستخدام الخاصة به.

يعد هذا خيارًا مهمًا عند استخدام التحميل حسب الطلب أو تحميل موارد external مثل الصور والملفات وما إلى ذلك. إذا تم تحديد قيمة غير صحيحة، فستتلقى أخطاء 404 أثناء تحميل هذه الموارد.

يحدد هذا الخيار عنوان URL العام للدليل output عند الإشارة إليه في browser. يتم حل عنوان URL النسبي بالنسبة إلى صفحة HTML (أو علامة <base>). Server-عناوين URL النسبية أو عناوين URL ذات الصلة بالبروتوكول أو عناوين URL المطلقة ممكنة أيضًا ومطلوبة في بعض الأحيان، مثلاً عند استضافة assets على CDN.

تكون قيمة الخيار مسبوقة بكل عنوان URL تم إنشاؤه بواسطة runtime أو loaders. ولهذا السبب تنتهي قيمة هذا الخيار بـ / في معظم الحالات.

قاعدة يجب مراعاتها: عنوان URL الخاص بـ output.path من عرض صفحة HTML.

webpack.config.js

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

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

export default {
  // ...
  output: {
    path: path.resolve(__dirname, "public/assets"),
    publicPath: "https://cdn.example.com/assets/",
  },
};

لهذا التخصيص:

webpack.config.js

export default {
  // ...
  output: {
    publicPath: "/assets/",
    chunkFilename: "[id].chunk.js",
  },
};

سيبدو الطلب إلى chunk بالشكل /assets/4.chunk.js.

قد يُصدر إخراج loader HTML شيئًا مثل هذا:

<link href="/assets/spinner.gif" />

أو عند تحميل صورة في CSS:

background-image: url(/assets/spinner.gif);

يأخذ webpack-dev-server أيضًا تلميحًا من publicPath، ويستخدمه لتحديد مكان خدمة ملفات output منه.

لاحظ أنه سيتم استبدال [fullhash] في هذه المعلمة بـ hash من compilation. راجع Caching الدليل للحصول على التفاصيل.

أمثلة (واحد مما يلي):

export default {
  // ...
  output: {
    // فهو يحدد تلقائيًا المسار العام من `import.meta.url` أو `document.currentScript` أو `<script />` أو `self.location`.
    publicPath: "auto",
  },
};

export default {
  // ...
  output: {
    // CDN (HTTPS دائمًا)
    publicPath: "https://cdn.example.com/assets/",
  },
};

export default {
  // ...
  output: {
    // CDN (نفس البروتوكول)
    publicPath: "//cdn.example.com/assets/",
  },
};

export default {
  // ...
  output: {
    // server-نسبي
    publicPath: "/assets/", // server-relative
  },
};

export default {
  // ...
  output: {
    // نسبة إلى صفحة HTML
    publicPath: "assets/",
  },
};

export default {
  // ...
  output: {
    // نسبة إلى صفحة HTML
    publicPath: "../assets/",
  },
};

export default {
  // ...
  output: {
    // نسبة إلى صفحة HTML (نفس الدليل)
    publicPath: "",
  },
};

في الحالات التي لا يمكن فيها معرفة publicPath لملفات output في وقت الترجمة، يمكن تركها فارغة وتعيينها ديناميكيًا عند runtime في ملف entry باستخدام المتغير الحر __webpack_public_path__.

__webpack_public_path__ = myRuntimePublicPath;

// بقية طلبك entry

راجع هذه المناقشة لمزيد من المعلومات حول __webpack_public_path__.

output.scriptType

string: 'module' | 'text/javascript' boolean = false

يسمح هذا الخيار بتحميل chunks غير المتزامن بنوع برنامج نصي مخصص، مثل <script type="module" ...>.

export default {
  // ...
  output: {
    scriptType: "module",
  },
};

output.sourceMapFilename

string = '[file].map[query]'

تخصيص كيفية تسمية Source Maps. يسري مفعوله فقط عند ضبط devtool على 'source-map'، والذي يكتب ملف output.

يمكن استخدام البدائل [name]، [id]، [fullhash] و[chunkhash] من output.filename. بالإضافة إلى تلك البدائل، يمكنك استخدام البدائل المدرجة ضمن مستوى اسم الملف في سلاسل القالب.

output.sourcePrefix

string = ''

قم بتغيير البادئة لكل سطر في output bundles.

webpack.config.js

export default {
  // ...
  output: {
    sourcePrefix: "\t",
  },
};

output.strictModuleErrorHandling

تعامل مع الخطأ في تحميل module وفقًا لمواصفات ECMAScript Modules بتكلفة performance.

النوع: boolean
متاح: 5.25.0+

export default {
  // ...
  output: {
    strictModuleErrorHandling: true,
  },
};

output.strictModuleExceptionHandling

boolean = false

اطلب من webpack إزالة module من مثيل module cache (require.cache) إذا ألقى استثناءً عندما يكون required.

يتم تعيينه افتراضيًا على false لأسباب performance.

عند التعيين على false، لا تتم إزالة module من cache، مما يؤدي إلى طرح الاستثناء فقط عند استدعاء require الأول (مما يجعله غير متوافق مع Node.js).

على سبيل المثال، فكر في module.js:

throw new Error("error");

مع ضبط strictModuleExceptionHandling على false، فإن require الأول فقط يطرح استثناءً:

// مع الصارمModuleExceptionHandling = false
require("node:module"); // <- throws
require("node:module"); // <- doesn't throw

بدلاً من ذلك، مع تعيين strictModuleExceptionHandling على true، ستطرح جميع requires في module استثناءً:

// with الصارمModuleExceptionHandling = true
require("node:module"); // <- throws
require("node:module"); // <- also throws

output.trustedTypes

true string object

5.37.0+

التحكم في التوافق Trusted Types. عند التمكين، سيكتشف webpack دعم Trusted Types، وإذا كان مدعومًا، استخدم سياسات Trusted Types لإنشاء عناوين URL للبرنامج النصي الذي يتم تحميله ديناميكيًا. يُستخدم عند تشغيل التطبيق بموجب التوجيه require-trusted-types-for Content Security Policy.

يتم تعطيله افتراضيًا (لا يوجد توافق، عناوين URL للبرنامج النصي عبارة عن سلاسل).

عند التعيين على true، سيستخدم webpack output.uniqueName كاسم السياسة Trusted Types.
عند التعيين على string غير فارغ، سيتم استخدام قيمته كاسم سياسة.
عند التعيين على object، يتم أخذ اسم السياسة من خاصية policyName الخاصة بـ object.

webpack.config.js

export default {
  // ...
  output: {
    // ...
    trustedTypes: {
      policyName: "my-application#webpack",
    },
  },
};

output.trustedTypes.onPolicyCreationFailure

string = 'stop': 'continue' | 'stop'

5.82.0+

حدد ما إذا كنت تريد متابعة التحميل تحسبًا لعدم فرض require-trusted-types-for 'script' أو الفشل فورًا عند فشل استدعاء trustedTypes.createPolicy(...) بسبب غياب اسم السياسة من قائمة CSP trusted-types أو كونه مكررًا.

export default {
  // ...
  output: {
    // ...
    trustedTypes: {
      policyName: "my-application#webpack",
      onPolicyCreationFailure: "continue",
    },
  },
};

output.umdNamedDefine

boolean

عند استخدام libraryTarget: "umd"، سيؤدي ضبط output.umdNamedDefine إلى true إلى تسمية AMD module لـ UMD build. وإلا فسيتم استخدام define مجهول.

export default {
  // ...
  output: {
    umdNamedDefine: true,
  },
};

output.uniqueName

string

اسم فريد لـ webpack build لتجنب تعارض أوقات تشغيل webpack المتعددة عند استخدام العناصر العالمية. يتم تعيينه افتراضيًا على اسم output.library أو اسم package من package.json في السياق، وإذا لم يتم العثور على كليهما، فسيتم تعيينه على ''.

سيتم استخدام output.uniqueName لإنشاء عوالم فريدة من أجل:

output.chunkLoadingGlobal

webpack.config.js

export default {
  // ...
  output: {
    uniqueName: "my-package-xyz",
  },
};

output.wasmLoading

false 'fetch' | 'async-node' string

خيار لضبط طريقة التحميل WebAssembly Modules. الأساليب المضمنة افتراضيًا هي 'fetch' (web/WebWorker)، 'async-node' (Node.js)، ولكن يمكن إضافة طرق أخرى بواسطة plugins.

يمكن أن تتأثر القيمة الافتراضية بـ target مختلفة:

الافتراضي هو 'fetch' إذا تم ضبط target على 'web' أو 'webworker' أو 'electron-renderer' أو 'node-webkit'.
الافتراضي هو 'async-node' إذا تم ضبط target على 'node' أو 'async-node' أو 'electron-main' أو 'electron-preload'.

export default {
  // ...
  output: {
    wasmLoading: "fetch",
  },
};

output.webassemblyModuleFilename

string = '[hash].module.wasm'

يحدد اسم الملف WebAssembly modules. يجب توفيره كمسار نسبي داخل الدليل output.path

export default {
  // ...
  output: {
    webassemblyModuleFilename: "[id].[hash].wasm",
  },
};

output.workerChunkLoading

string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal' boolean: false

يتحكم الخيار الجديد workerChunkLoading في تحميل chunk لـ workers.

webpack.config.js

export default {
  // ...
  output: {
    workerChunkLoading: false,
  },
};

output.workerPublicPath

string

قم بتعيين مسار عام لـ Worker، القيمة الافتراضية هي output.publicPath. استخدم هذا الخيار فقط إذا كانت worker scripts موجودة في مسار مختلف عن البرامج النصية الأخرى.

webpack.config.js

export default {
  // ...
  output: {
    workerPublicPath: "/workerPublicPath2/",
  },
};

output.workerWasmLoading

false 'fetch-streaming' | 'fetch' | 'async-node' string

خيار لضبط طريقة التحميل WebAssembly Modules في workers، القيمة الافتراضية هي output.wasmLoading.

webpack.config.js

export default {
  // ...
  output: {
    workerWasmLoading: "fetch",
  },
};

Edit this page·

« Previous

Mode

Module