Loaders

يتيح لك webpack استخدام loaders لمعالجة الملفات قبل إضافتها إلى الحزمة. بهذه الطريقة لا تكون محدودًا بملفات JavaScript فقط؛ يمكنك إدخال CSS، والصور، والقوالب، وأنواع كثيرة من الموارد الثابتة ضمن عملية البناء. ويمكنك أيضًا كتابة loaders خاصة بك بسهولة باستخدام Node.js.

الـ loaders هي حزم مستقلة توسّع قدرات webpack، ويجري تطويرها وصيانتها ضمن مجتمع webpack الأوسع.

يمكن تفعيل loader مباشرة باستخدام بادئة مثل loadername! داخل عبارات import .. from "mod"; أو require()، أو يمكن تطبيقه تلقائيًا من إعدادات webpack باستخدام تعبيرات regex. راجع الإعدادات للتفاصيل.

الملفات

• ref-loader ينشئ علاقات اعتماد بين أي ملفات يدويًا.

JSON

• cson-loader يحمّل ملف CSON ويحوّله.

التحويل بين صيغ JavaScript

• babel-loader يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام Babel.
• esbuild-loader يحمّل كود ES2015+ ويحوّله إلى ES6+ باستخدام esbuild.
• buble-loader يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام Bublé.
• traceur-loader يحمّل كود ES2015+ ويحوّله إلى ES5 باستخدام Traceur.
• ts-loader يحمّل TypeScript 2.0+ ويعامله مثل JavaScript.
• coffee-loader يحمّل CoffeeScript ويعامله مثل JavaScript.
• fengari-loader يحمّل كود Lua باستخدام fengari.
• elm-webpack-loader يحمّل Elm ويعامله مثل JavaScript.

القوالب

• html-loader يصدّر HTML كنص، ويتعامل مع المراجع إلى الموارد الثابتة.
• pug-loader يحمّل قوالب Pug وJade ويعيد دالة.
• markdown-loader يحوّل Markdown إلى HTML.
• react-markdown-loader يحوّل Markdown إلى React Component باستخدام parser الخاص بـ markdown-parse.
• posthtml-loader يحمّل ملف HTML ويحوّله باستخدام PostHTML.
• handlebars-loader يحوّل Handlebars إلى HTML.
• markup-inline-loader يضمّن ملفات SVG/MathML داخل HTML. يفيد ذلك عند استخدام icon font أو تطبيق CSS animation على SVG.
• twig-loader يحوّل قوالب Twig ويعيد دالة.
• remark-loader يحمّل Markdown عبر remark مع حل مراجع الصور تلقائيًا.

التنسيقات

• style-loader يضيف صادرات module كـ styles داخل DOM.
• css-loader يحمّل ملف CSS بعد حل imports ويعيد كود CSS.
• css-utility-loader يحلل خصائص CSS القديمة تلقائيًا ويحوّلها إلى utility classes حديثة مثل Tailwind وقت البناء.
• less-loader يحمّل ملف LESS ويحوّله.
• sass-loader يحمّل ملف SASS/SCSS ويحوّله.
• postcss-loader يحمّل ملف CSS/SSS ويحوّله باستخدام PostCSS.
• stylus-loader يحمّل ملف Stylus ويحوّله.

أطر العمل

• vue-loader يحمّل Vue Components ويحوّلها.
• angular2-template-loader يحمّل Angular Components ويحوّلها.

Awesome

لمزيد من loaders الخارجية، راجع قائمة awesome-webpack.