Loaders

المحمّلات هي تحويلات تُطبق على الكود المصدري للوحدة. تسمح لك بمعالجة الملفات مسبقًا أثناء import لها أو "تحميلها". لذلك تشبه المحمّلات "المهام" في أدوات البناء الأخرى، وتوفر طريقة قوية للتعامل مع خطوات بناء الواجهة الأمامية. يمكن للمحمّلات تحويل الملفات من لغة أخرى، مثل TypeScript، إلى JavaScript، أو تحميل الصور المضمنة كعناوين data URLs. بل تسمح لك المحمّلات بأشياء مثل import ملفات CSS مباشرة من وحدات JavaScript.

مثال

على سبيل المثال، يمكنك استخدام المحمّلات لإخبار webpack بتحميل ملف CSS أو تحويل TypeScript إلى JavaScript. للقيام بذلك، تبدأ بتثبيت المحمّلات التي تحتاجها:

npm install --save-dev css-loader ts-loader

ثم تطلب من webpack استخدام css-loader لكل ملف .css و ts-loader لكل ملفات .ts:

webpack.config.js

export default {
  module: {
    rules: [
      { test: /\.css$/, use: "css-loader" },
      { test: /\.ts$/, use: "ts-loader" },
    ],
  },
};

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

توجد طريقتان لاستخدام المحمّلات في تطبيقك:

التكوين (موصى به): تحديدها في ملف webpack.config.js.
Inline: تحديدها صراحة في كل تعليمة import.

لاحظ أن المحمّلات يمكن استخدامها من CLI في webpack v4، لكن هذه الميزة أُهملت في webpack v5.

التكوين

تسمح لك module.rules بتحديد عدة محمّلات داخل تكوين webpack. هذه طريقة موجزة لعرض المحمّلات، وتساعد على الحفاظ على كود نظيف. كما تمنحك نظرة كاملة على كل محمّل.

تُقيّم أو تُنفذ المحمّلات من اليمين إلى اليسار، أو من الأسفل إلى الأعلى. في المثال أدناه يبدأ التنفيذ بـ sass-loader، ثم يستمر مع css-loader، وينتهي أخيرًا بـ style-loader. راجع "ميزات المحمّلات" لمزيد من المعلومات حول ترتيب المحمّلات.

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

Inline

يمكن تحديد المحمّلات داخل تعليمة import أو أي طريقة "استيراد" مكافئة. افصل المحمّلات عن المورد باستخدام !. يُحل كل جزء نسبيًا إلى المجلد الحالي.

import * as styles from "style-loader!css-loader?modules!./styles.css";

يمكن تجاوز أي محمّلات و preLoaders و postLoaders من التكوين عبر بادئة في تعليمة import inline:

البادئة ! تعطل كل المحمّلات العادية المكوّنة.
```
import * as styles from "!style-loader!css-loader?modules!./styles.css";
```
البادئة !! تعطل كل المحمّلات المكوّنة، بما في ذلك preLoaders و loaders و postLoaders.
```
import * as styles from "!!style-loader!css-loader?modules!./styles.css";
```
البادئة -! تعطل كل preLoaders و loaders المكوّنة، لكنها لا تعطل postLoaders.
```
import * as styles from "-!style-loader!css-loader?modules!./styles.css";
```

يمكن تمرير الخيارات باستخدام query parameter مثل ?key=value&foo=bar، أو كائن JSON مثل ?{"key":"value","foo":"bar"}.

ميزات المحمّلات

يمكن ربط المحمّلات في سلسلة. يطبق كل محمّل في السلسلة تحويلات على المورد الجاري معالجته. تُنفذ السلسلة بترتيب عكسي. يمرر أول محمّل نتيجته، أي المورد بعد تطبيق التحويلات، إلى المحمّل التالي، وهكذا. وفي النهاية يتوقع webpack أن يعيد آخر محمّل في السلسلة JavaScript.
يمكن أن تكون المحمّلات متزامنة أو غير متزامنة.
تعمل المحمّلات في Node.js ويمكنها فعل كل ما هو ممكن هناك.
يمكن تكوين المحمّلات باستخدام كائن options؛ ما زال استخدام معاملات query لضبط الخيارات مدعومًا لكنه أُهمل.
يمكن للوحدات العادية تصدير محمّل إضافة إلى main العادي عبر حقل loader في package.json.
يمكن للإضافات أن تمنح المحمّلات ميزات أكثر.
يمكن للمحمّلات إصدار ملفات إضافية عشوائية.

توفر المحمّلات طريقة لتخصيص الإخراج عبر دوال المعالجة المسبقة. أصبح لدى المستخدمين مرونة أكبر لإدراج منطق دقيق مثل الضغط والتغليف وترجمات اللغة والمزيد.

حلّ المحمّلات

تتبع المحمّلات آلية حلّ الوحدات القياسية. في معظم الحالات ستُحمّل من مسار الوحدة، مثل npm install و node_modules.

من المتوقع أن تصدر وحدة المحمّل دالة وأن تُكتب بلغة JavaScript متوافقة مع Node.js. غالبًا تُدار هذه المحمّلات باستخدام npm، لكن يمكنك أيضًا امتلاك محمّلات مخصصة كملفات داخل تطبيقك. وبحسب العرف، تُسمى المحمّلات عادة بالشكل xxx-loader، مثل json-loader. راجع "كتابة محمّل" لمزيد من المعلومات.

Edit this page·

« Previous

Output

Plugins