Plugins الداخلية في webpack

هذه قائمة بالـ plugins التي يستخدمها webpack داخليًا.

تصنيفات plugins الداخلية:

• environment
• compiler
• entry
• output
• source
• optimize

environment

Plugins تؤثر في بيئة compiler.

NodeEnvironmentPlugin

webpack.node.NodeEnvironmentPlugin()

يطبّق نظام ملفات بأسلوب Node.js على compiler.

compiler

Plugins تؤثر في compiler.

MemoryCachePlugin

MemoryCachePlugin()

يضيف cache إلى compiler، حيث يتم تخزين modules في الذاكرة.

ProgressPlugin

ProgressPlugin(handler)

يدخل إلى compiler لاستخراج معلومات التقدم. يجب أن تكون دالة handler بالشكل function(percentage, message). تُستدعى percentage بقيمة بين 0 و1، حيث 0 تعني البداية و1 تعني النهاية.

RecordIdsPlugin

RecordIdsPlugin()

يحفظ ويستعيد ids الخاصة بـ modules وchunks من records.

entry

Plugins تضيف entry chunks إلى compilation.

EntryPlugin

EntryPlugin(context, entry, options)

يضيف entry chunk أثناء compilation. يُسمى chunk حسب options.name ويحتوي على module واحد فقط، إضافة إلى dependencies الخاصة به. يتم حل module من entry داخل context، ويجب أن يكون context مسارًا مطلقًا.

PrefetchPlugin

PrefetchPlugin(context, request)

ينفّذ prefetch لـ request وdependencies الخاصة به لإتاحة compilation أكثر توازيًا. لا ينشئ أي chunk. يتم حل module من request داخل context، ويجب أن يكون context مسارًا مطلقًا.

output

JsonpTemplatePlugin

JsonpTemplatePlugin(options)

يتم تغليف chunks داخل JSONP calls. ويتم تضمين خوارزمية تحميل داخل entry chunks، وتحمل chunks عبر إضافة وسم <script>.

options هي خيارات output.

options.jsonpFunction هي دالة JSONP.

options.publicPath يُستخدم كمسار لتحميل chunks.

options.chunkFilename هو اسم الملف المتوقع للـ chunks.

NodeTemplatePlugin

node/NodeTemplatePlugin(options)

يتم تغليف chunks داخل modules خاصة بـ Node.js وتصدّر bundled modules. وتحمّل entry chunks بقية chunks عبر require.

options هي خيارات output.

options.chunkFilename هو اسم الملف المتوقع للـ chunks.

LibraryTemplatePlugin

LibraryTemplatePlugin(name, target)

يتم تهيئة entry chunks لتكوين مكتبة باسم name ومن نوع type.

WebWorkerTemplatePlugin

webworker/WebWorkerTemplatePlugin(options)

يتم تحميل chunks عبر importScripts. فيما عدا ذلك، فهو مشابه لـ JsonpTemplatePlugin.

options هي خيارات output.

EvalDevToolModulePlugin

يعدّل قالب module عن طريق تغليف كل module داخل eval مع تعليق // @sourceURL.

SourceMapDevToolPlugin

SourceMapDevToolPlugin(sourceMapFilename, sourceMappingURLComment, moduleFilenameTemplate, fallbackModuleFilenameTemplate)

يعدّل القوالب بإنشاء SourceMap لكل chunk.

sourceMapFilename هو قالب اسم ملف SourceMap. يتم استبدال [hash] و[name] و[id] و[file] و[filebase]. إذا لم يُمرر هذا argument، فسيتم تضمين SourceMap كـ DataUrl.

HotModuleReplacementPlugin

HotModuleReplacementPlugin(options)

يضيف دعم hot module replacement. يعدّل القوالب لإضافة كود runtime، ويضيف API باسم module.hot.

options.hotUpdateChunkFilename هو اسم ملف hot update chunks.

options.hotUpdateMainFilename هو اسم ملف hot update manifest.

options.hotUpdateFunction هو اسم دالة JSON الخاصة بالـ hot update.

source

Plugins تؤثر في كود المصدر الخاص بـ modules.

APIPlugin

يجعل webpack_public_path وwebpack_require وwebpack_modules وwebpack_chunk_load قابلة للوصول. ويتأكد من أن require.valueOf وrequire.onError لا تتم معالجتهما بواسطة plugins أخرى.

CompatibilityPlugin

حاليًا فائدته محدودة جدًا. يضمن التوافق مع module loaders أخرى.

ConstPlugin

يحاول تقييم expressions داخل عبارات if (...) والـ ternaries لاستبدالها بـ true أو false، حتى يمكن لاحقًا حذف الفروع الميتة عبر hooks يطلقها parser.

توجد عدة تحسينات في production mode للتعامل مع الفروع الميتة:

• التحسينات التي ينفذها Terser.
• التحسينات التي ينفذها webpack.

سيحاول webpack تقييم العبارات الشرطية. إذا نجح، فسيزيل الفرع الميت. لا يستطيع webpack إجراء constant folding إلا إذا كانت القيمة معروفة للـ compiler. مثال:

import { calculateTax } from "./tax";

const FOO = 1;
if (FOO === 0) {
  // فرع ميت
  calculateTax();
}

في المثال السابق، لا يستطيع webpack حذف الفرع، لكن Terser يستطيع. أما إذا عُرّف FOO باستخدام DefinePlugin، فسينجح webpack في ذلك.

من المهم أيضًا ملاحظة أن import { calculateTax } from './tax'; سيُحذف كذلك، لأن استدعاء calculateTax() كان داخل الفرع الميت وتمت إزالته.

ProvidePlugin

ProvidePlugin(name, request)

إذا استُخدم name داخل module، فسيتم ملؤه من module يتم تحميله عبر import ... from <request> أو import(<request>) أو require(<request>).

NodeStuffPlugin

NodeStuffPlugin(options, context)

يوفر أشياء تكون متاحة عادةً داخل Node.js modules.

كما يضمن ملء module ببعض خصائص Node.js إذا استخدمته.

RequireJsStuffPlugin

يوفر أشياء تكون متاحة عادةً في require.js.

تتم إزالة require[js].config. وتصبح require.version مساوية لـ 0.0.0. ويتم ربط requirejs.onError مع require.onError.

NodeSourcePlugin

node/NodeSourcePlugin(options)

يضيف هذا module أشياء من Node.js غير متاحة في البيئات غير المبنية على Node.js.

يضيف polyfills لـ process وconsole وBuffer وglobal إذا استُخدمت. كما يربط modules البديلة المدمجة الخاصة بـ Node.js.

NodeTargetPlugin

node/NodeTargetPlugin()

ينبغي استخدام هذه plugins إذا كنت ستشغّل bundle داخل بيئة Node.js.

يضمن ذلك تحميل native modules بشكل صحيح حتى لو كانت ضمن bundle.

AMDPlugin

dependencies/AMDPlugin(options)

يوفر define وrequire بأسلوب AMD داخل modules. كما يربط require.amd وdefine.amd وwebpack_amd_options## مع options الممررة كـ parameter.

CommonJsPlugin

dependencies/CommonJsPlugin

يوفر require بأسلوب CommonJs داخل modules.

RequireContextPlugin

dependencies/RequireContextPlugin(modulesDirectories, extensions)

يوفر require.context. تُستخدم parameters المسماة modulesDirectories وextensions للعثور على requests بديلة للملفات. من المفيد تمرير نفس arrays التي تمررها إلى resolver.

RequireEnsurePlugin

dependencies/RequireEnsurePlugin()

يوفر require.ensure.

RequireIncludePlugin

dependencies/RequireIncludePlugin()

يوفر require.include.

DefinePlugin

DefinePlugin(definitions)

يعرّف ثوابت للـ identifier.

definitions هو object.

optimize

لاحظ أن كل plugins الموجودة تحت namespace باسم webpack.optimize يجب استخدامها فقط عندما يكون mode مضبوطًا على 'none'. بخلاف ذلك قد تواجه مشاكل بسبب تطبيق plugins مرتين.

LimitChunkCountPlugin

optimize/LimitChunkCountPlugin(options)

يدمج chunks عندما يكون عدد chunks أقل من options.maxChunks.

يأتي overhead الخاص بكل chunk من options.chunkOverhead أو تكون قيمته الافتراضية 10000. ويتم ضرب أحجام entry chunks في options.entryChunkMultiplicator أو في 10 افتراضيًا.

يتم أولًا دمج chunks التي تخفض الحجم الإجمالي بأكبر قدر. وإذا تساوت عدة تركيبات، يفوز الدمج الذي ينتج أقل حجم.

MergeDuplicateChunksPlugin

optimize/MergeDuplicateChunksPlugin()

يدمج chunks التي تحتوي على modules نفسها.

RemoveEmptyChunksPlugin

optimize/RemoveEmptyChunksPlugin()

يزيل من chunk أي modules موجودة داخل كل parent chunk.

MinChunkSizePlugin

optimize/MinChunkSizePlugin(minChunkSize)

يدمج chunks حتى يصبح لكل chunk الحجم الأدنى minChunkSize.

ModuleConcatenationPlugin

راجع صفحة ModuleConcatenationPlugin للتفاصيل.

FlagIncludedChunksPlugin

optimize/FlagIncludedChunksPlugin()

يضيف chunk ids الخاصة بـ chunks المضمنة داخل chunk. هذا يزيل عمليات تحميل chunks غير الضرورية.

RealContentHashPlugin

optimize/RealContentHashPlugin()

عند تفعيل خيار optimization.realContentHash، سيطبق webpack داخليًا RealContentHashPlugin على compiler.

Hook

يوفر RealContentHashPlugin hook باسم updateHash 5.8.0+ لتخصيص تحديث hash:

import webpack from "webpack";

const { RealContentHashPlugin } = webpack.optimize;
// ...
compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
  const hooks = RealContentHashPlugin.getCompilationHooks(compilation);
  hooks.updateHash.tap("MyPlugin", (content, oldHash) => {
    // يمكنك حساب hash هنا بالطريقة التي تريدها
  });
});