إضافة الإعطاء

تحميل المودلات تلقائياً بدلاً من استدعائهم ب import أو require في كل مكان.

new webpack.ProvidePlugin({
  identifier: "module1",
  // ...
});

or

new webpack.ProvidePlugin({
  identifier: ["module1", "property1"],
  // ...
});

بشكل افتراضي ، يكون مسار الوحدات في المجلد الحالي هو (./**) و node_modules.

ايضاً بالأمكان تحديد مسار كامل:

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

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

new webpack.ProvidePlugin({
  identifier: path.resolve(path.join(__dirname, "src/module1")),
  // ...
});

عندما يتم مصادفه ال معرف (identifier) كمتغير حر في المودل، يتم تحميل المودل تلقائياً وال معرف (identifier) يكون مملوء بصادرات المودل المحمل (او الممتلكة لدعم الصادرات المسماة)

For importing the default export of an ES2015 module, you have to specify the default property of module. لإستيراد الصادرات الافتراضية لمودل ES2015، يجب عليك ان تحدد الممتلكة الافتراضية للمودل

الاستعمال : jQuery

لتحميل jquery بشكل تلقائي يمكننا توجيه كلا المتغيريين اللذين يعرضمها الى مودل node الحالي:

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
});

ثم في اي مكان لدينا في الكود المصدري:

// داخل المودل
$("#item"); // <= يعمل
jQuery("#item"); // <= ايضاً يعمل
// $ يتم وضعها تلقائياً لصادرات المودل "jquery"

الاستعمال: jQuery مع Angular 1

Angular تبحث عن window.jQuery ليمكنها تحديد ما اذا كانت Jquery موجودة إطلع على الكود المصدري.

new webpack.ProvidePlugin({
  "window.jQuery": "jquery",
});

الاستعمال: Lodash Map

new webpack.ProvidePlugin({
  _map: ["lodash", "map"],
});

الاستعمال: Vue.js

new webpack.ProvidePlugin({
  Vue: ["vue/dist/vue.esm.js", "default"],
});