قائمة Awesome webpack

قائمة منتقاة من موارد webpack ومكتباته وأدواته وتطبيقاته المميزة. استُلهمت من قائمة awesome. يمكنك تحسين هذه القائمة بالمساهمة فيها.

منظومة Webpack

دعم Webpack

المجتمع

Twitter

أشخاص مهتمون بـ Webpack، بدون ترتيب محدد

المكتبات

Loaders

نوع الملف

  • HTML Loader: loader لـ HTML في Webpack. -- Maintainer: Webpack Team Github
  • Responsive Loader: loader للصور المتجاوبة. -- Maintainer: Jeremy Stucki Github
  • SVG Url Loader: loader يحمّل ملف SVG كـ URL بترميز utf-8. -- Maintainer: Hovhannes Babayan Github
  • mermaid Loader: loader لـ mermaid، أي الرسوم البيانية، في Webpack. -- Maintainer: Paul Musso Github
  • wasm loader: loader لملفات wasm binary في Webpack. -- Maintainer: Arthur Buldauskas Github
  • Imagemin Loader/Plugin: loader وplugin لتصغير الصور في webpack. -- Maintainer: itgalaxy inc. Github
  • Bin Exec Loader: يمرر أي ملف عبر أي binary. -- Maintainer: Rafael Milewski Github
  • GraphQL Loader: loader لمستندات .graphql. -- Maintainer: Stephen Wan Github

Components والقوالب

  • Angular2 Template Loader: يضمّن html وstyles داخل Angular2 components. -- Maintainer: Sean Larkin Github Twitter
  • Handlebars Loader: loader لقوالب Handlebars في Webpack. -- Maintainer: Paul Carduner Github Twitter
  • Vue Loader: loader لـ Vue.js components في Webpack. -- Maintainer: Vuejs Team Github Twitter
  • SVG React Loader - loader يحوّل SVG إلى React Component في Webpack. -- Maintainer: Jerry Hamlet Github Twitter
  • Underscore Loader - loader لقوالب Underscore وLodash. -- Maintainer: Emmanuel Antico Github Twitter
  • ngTemplate Loader - loader لقوالب Angular1. -- Maintainer: Toby Rahilly Github
  • ngInlineStylesLoader: يحسّن CSS المضمّن داخل Angular components. -- Maintainer: Severin Friede Github
  • Markup-inline Loader يضمّن SVG داخل HTML. -- Maintainer: Zhicheng Wang Github
  • Polymer Loader - loader لعناصر Polymer. -- Maintainers: Rob Dodson Github - Chad Killingsworth Github - Bryan Coulter Github
  • Tag Loader - loader لملفات Riot tag. -- Maintainer: Riot Team Github Twitter
  • Twig Loader - loader لقوالب Twig. -- Maintainer: Zimmo.be Team Github
  • Auto ngTemplate Loader: يكتشف قوالب Angular 1 تلقائيًا ويحمّلها. -- Maintainer: Yash Kulshrestha Github
  • Pug Loader - loader لقوالب Pug، وكانت تُعرف سابقًا باسم Jade. -- Maintainer: Pug Team Github
  • Simple Nunjucks Loader - loader لقوالب Nunjucks. -- Maintainer: ogonkov Github
  • PWA Manifest Loader - loader لملف PWA manifest. -- Maintainer: autopulated Github

Styles

  • Style Loader: loader للـ styles في Webpack. -- Maintainer: Webpack Team Github
  • PostCSS Loader: loader لـ PostCSS في Webpack. -- Maintainer: PostCSS Team Github Twitter
  • CSS Loader: loader لـ CSS في Webpack. -- Maintainer: Webpack Team Github
  • SASS Loader: loader لـ SASS في Webpack. -- Maintainer: Jorik Tangelder Github Twitter
  • Less Loader: loader لـ Less في Webpack. -- Maintainer: Webpack Team Github
  • Stylus Loader: loader لـ Stylus في webpack. -- Maintainer: Kyle Robinson Young Github Twitter
  • Isomorphic Style Loader: loader لـ CSS style بنمط isomorphic في Webpack. -- Maintainer: Kriasoft Team Github Twitter
  • Minify CSS-in-JS Loader: loader يعتمد على RegExp لتصغير CSS-in-JS في Webpack بدون الحاجة إلى Babel. -- Maintainer: Zack Young Github Twitter
  • SASS Resources Loader: يستورد SASS resources، مثل variables وmixins، بشكل عام. -- Maintainer: ShakaCode Github Twitter

اللغة وأطر العمل

  • TS Loader: loader لـ TypeScript في webpack. -- Maintainer: TypeStrong Team Github
  • Coffee Loader: loader لـ Coffee في Webpack. -- Maintainer: Webpack Team Github
  • Bootstrap Loader: يحمّل Bootstrap styles داخل Webpack bundle. -- Maintainer: ShakaCode Team Github Twitter
  • PostHTML Loader: loader لـ PostHTML في Webpack. -- Maintainer: PostHTML Team Github Twitter
  • ELM Loader: loader في Webpack للغة Elm. -- Maintainer: Richard Feldman Github Twitter
  • Fengari Loader: يشغّل كود Lua باستخدام Fengari. -- Maintainer: Daurnimator Github Twitter
  • MDX Loader: loader لـ MDX في Webpack. -- Maintainer: MDX Team Github

أدوات مساعدة

  • Babel Loader: تكامل Babel مع Webpack عبر loader. -- Maintainer: Babel Team Github Twitter
  • Worker Loader: loader لـ Worker في Webpack. -- Maintainer: Webpack Team Github
  • Resolve URL Loader: يحل المسارات النسبية داخل عبارات url(). -- Maintainer: Ben Holloway Github
  • Import Loader: loader لإضافة imports في Webpack. -- Maintainer: Webpack Team Github
  • Combine Loader - يحوّل array من loaders إلى نص loader واحد. -- Maintainer: James Friend Github
  • Icon Font Loader - يحوّل SVGs إلى font icons داخل CSS. -- Maintainer: Forrest R. Zhao Github
  • Icons Loader - يولّد iconfont من SVG dependencies. -- Maintainer: Mike Vercoelen Github
  • Modernizr Loader - يضمّن build الخاص بـ Modernizr مع webpack. -- Maintainer: Peerigon Devs Github
  • ngRouter Loader - يتيح lazy loading لـ NgModule عبر angular router مع دعم AOT. -- Maintainer: Shlomi Assaf Github Twitter
  • Lingui Loader - يجمّع message catalogs أثناء التشغيل لـ jsLingui، وهي مكتبة i18n. -- Maintainer: Tomáš Ehrlich Github Twitter
  • Shell Loader - يشغّل أي shell script على ملفات المصدر. -- Maintainer: Jo Sprague Github
  • EXIF Loader - يستخرج بيانات EXIF وIPTC من ملفات JPG أثناء build. -- Maintainer: Emanuel Kluge Github Twitter
  • esbuild Loader - بديل سريع جدًا لـ babel-loader وts-loader وTerser، مدعوم بـ esbuild. -- Maintainer: Hiroki Osame Github Twitter

الاختبار

  • Karma Webpack: استخدام Karma مع Webpack. -- Maintainer: Webpack Team Github
  • Istanbul Webpack plugin: استخدام Istanbul instrumenter على الحزمة كلها. -- Maintainer: Hagai Cohen Github

مكتبات التكامل

  • Dotenv Webpack: يضمّن environment variables داخل bundle عبر dotenv. -- Maintainer: Matthew Steele Github Twitter
  • Terse Webpack - تبسيط Webpack عبر fluent API مع presets. -- Maintainer: Eric Clemmons Github Twitter
  • SystemJS Webpack - تحزيم Webpack لـ SystemJS. -- Maintainer: Guy Bedford Github Twitter
  • Gulp Webpack Stream - تشغيل webpack عبر stream interface. -- Maintainer: Kyle Robinson Young Github Twitter
  • Webpack Blocks - إعداد webpack باستخدام functional feature blocks. -- Maintainer: Andy Wermke Github Twitter
  • Webpacker - gem رسمية لـ webpack للتكامل مع مشاريع Ruby on Rails. -- Maintainer: Rails Github
  • WebpackAspnetMiddleware - middleware للتطوير في ASP.NET 5. -- Maintainer: Frank Wallis Github
  • Consul Key/Value Webpack: يضمّن environment variables داخل bundle عبر Consul KV-store. -- Maintainer: Marlon Maxwel Github

Webpack Plugins

  • DefinePlugin: ينشئ ثوابت global يمكن ضبطها وقت compile. -- Maintainer: Webpack Team Github
  • Compression Plugin: يجهز assets لتقديمها مع Content-Encoding. -- Maintainer: Webpack Team Github
  • Offline Plugin: plugin للعمل offline، ويشمل ServiceWorker وAppCache، في Webpack. -- Maintainer: Arthur Stolyar Github Twitter
  • Rewire Plugin: dependency injection داخل Webpack bundles. -- Maintainer: Johannes Ewald Github Twitter
  • HTML Webpack Plugin: يبسّط إنشاء ملفات HTML. -- Maintainer: Jan Nicklas Github Twitter
  • Copy Webpack Plugin: ينسخ الملفات والمجلدات في webpack. -- Maintainer: Len Boyette Github Twitter
  • Split By Path: plugin لتقسيم Webpack حسب المسار. -- Maintainer: Bohdan Tkachenko Github Twitter
  • SW Precache - يولّد service worker لعمل precache للـ bundle. -- Maintainer: Will Farley Github
  • CoreJS Plugin - Core-JS كـ webpack plugin. -- Maintainer: PatrickJS Github
  • Bundle Analyzer - أداة تعرض bundles على شكل treemap تفاعلية. -- Maintainer: Yuriy Grunin Github
  • Module Mapping - يربط modules بملفات مختلفة. -- Maintainer: Spartez Team Github Twitter
  • Serverless Webpack - plugin لـ Serverless لتحزيم lambdas. -- Maintainer: Elastic Coders Github Twitter
  • Prerender SPA - توليد static site لـ SPAs بدون ارتباط بإطار معين. -- Maintainer: Chris Fritz Github Twitter
  • Static Site Generator Plugin - مولّد static site بسيط وبدون فرض آراء كثيرة. -- Maintainer: Mark Dalgleish Github
  • SVG Sprite Plugin - plugin لـ SVG sprites والأيقونات. -- Maintainer: Jeremy Tice (TodayTix) Github Twitter
  • Imagemin Webpack Plugin - يصغّر الصور باستخدام Imagemin. -- Maintainer: Gregory Benner Github Twitter
  • Prepack Webpack Plugin - webpack plugin لـ prepack. -- Maintainer: Gajus Kuizinas Github
  • Modules CDN Webpack Plugin - يحمّل modules ديناميكيًا من CDN. -- Maintainer: Thomas Sileghem Github
  • Generate package.json Plugin - يحد dependencies في package.json الخاص بالنشر إلى التي يستخدمها bundle فعليًا فقط. -- Maintainer: Paul Myburgh Github
  • Progressive Web App Manifest - مدير ومولّد PWA manifest. -- Maintainer: Arthur A. Bergamaschi Github
  • FileManager Webpack Plugin - ينسخ وينقل ويحذف الملفات والمجلدات قبل وبعد Webpack builds. -- Maintainer: Gregory Nowakowski Github
  • Fork TS Checker Webpack Plugin - webpack plugin يشغّل TypeScript type checker في process منفصلة. -- Maintainer: TypeStrong Team Github
  • Duplicate Package Checker Webpack Plugin - يحذرك عند وجود عدة إصدارات من الحزمة نفسها داخل bundle. -- Maintainer: Darren Scerri Github
  • Circular Dependency Plugin - يكتشف modules ذات circular dependencies أثناء bundling. -- Maintainer: Aaron Ackerman Github
  • webpack-inject-plugin - webpack plugin لحقن الكود ديناميكيًا داخل bundle. -- Maintainer: Adam Dierkens Github
  • Public Path Manipulation Plugin - يتحكم في publicPath للموارد التي تُحمّل ديناميكيًا وقت runtime. -- Maintainer: Andrew Goldis Github
  • Build Notifier Plugin - يعرض إشعارات على مستوى نظام التشغيل لأخطاء وتحذيرات build. -- Maintainer: Rocco Cataldo Github
  • CSS Cleanup Webpack Plugin - plugin لإزالة قواعد CSS المكررة وغير المستخدمة. -- Maintainer: Dominik Weber Github
  • Extension Reloader - hot reloading أثناء تطوير browser extensions. -- Maintainer: Rubens P. G. Cavalcante Github Twitter
  • Htmls Webpack Plugin: plugin بسيط وسريع لتوليد عدة ملفات HTML في webpack. -- Maintainer: Zack Young Github Twitter
  • Mini css extract plugin: plugin خفيف لاستخراج CSS. -- Maintainer: Webpack Contrib Github
  • build-hash-webpack-plugin يولّد Webpack لكل build hash داخل الذاكرة لمعرفة هل مخرجات build متطابقة أم لا. يكتب هذا plugin ذلك hash في ملف json منفصل. -- Maintainer: Réda Housni Alaoui Github Twitter
  • webpack-hook-plugin - يشغّل أي shell commands قبل أو بعد webpack builds. -- Maintainer: David Kwon Github
  • Dynamic Vendor Webpack Plugin - يوفر طريقة لاستيراد vendors بمتغير ديناميكي وcode splitting محدد. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Define Variable Webpack Plugin - تحسين لـ DefinePlugin لتخزين الأشياء المعرّفة داخل متغيرات فعلية. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Shell Script Webpack Plugin - plugin لتشغيل shell scripts عشوائية عند تشغيل compiler hooks. -- Maintainer Drew Loomer Github Twitter
  • Stylelint Webpack Plugin: plugin لـ Stylelint في webpack. -- Maintainer: Ricardo Gobbo de Souza Github
  • ESLint Webpack Plugin: plugin لـ ESLint في webpack. -- Maintainer: Ricardo Gobbo de Souza Github
  • Exclude Assets Webpack Plugin: plugin لاستبعاد assets من output الخاص بـ webpack بناءً على path RegExp pattern. -- Maintainer: Klayton Faria Github
  • Webpack Shell Plugin Next: plugin يسمح بتشغيل أي shell commands قبل أو بعد webpack builds. -- Maintainer: Kuzmin Pavel Github
  • Gettext Webpack Plugin: يضمّن localization داخل bundle باستخدام gettext. -- Maintainer: Juan Luis Paz Github
  • Node Polyfill Plugin: يضيف polyfill لـ Node.js core modules. -- Maintainer: Richie Bendall Github Twitter
  • Bytenode Plugin: يجمّع JavaScript إلى bytecode باستخدام bytenode. -- Maintainer: Herbert Treis Neto Github
  • Chrome Extension Archive Webpack Plugin: ينشئ archive file لنشر Chrome Extensions على Chrome Web Store. -- Maintainer: KeisukeYamashita Github
  • Layer-pack Webpack Plugin يسمح باستخدام glob imports للملفات والمجلدات، وبناء mono repo apps عبر source code أو npm packages قابلة للوراثة، ومشاركة إعدادات webpack. -- Maintainer: Braun Nathanaël Github
  • webpack-typescript-directory-compile-plugin يضبط مجلد source لملفات TypeScript ومجلد output لملفات JavaScript. سيتم تجميع كل ملف TypeScript في مجلد source، وكذلك أي ملفات جديدة، إلى ملفات JavaScript مستقلة. -- Maintainer: Stephen Sigwart Github
  • CycloneDX Webpack Plugin: ينشئ CycloneDX Software Bill of Materials (SBOM) من webpack bundles وقت compile. -- Maintainer: OWASP CycloneDX Team Github
  • Transpile Webpack Plugin: يحوّل ملفات input إلى ملفات output بشكل منفرد بدون حزمها معًا. -- Maintainer: Chungen Li Github Twitter
  • Manifest Extraction Plugin: يولّد asset manifest بعد تجميع webpack. -- Maintainer: Andrew Powell Github
  • Transform Async Modules Plugin: webpack plugin لتحويل async module output باستخدام Babel. يسمح بتحويل top level await إلى ES5. -- Maintainer: Steve Repsher Github
  • CSS Layering Plugin: يغلّف CSS داخل cascade layers. -- Maintainer: Kresimir Buric Github

أدوات Webpack

  • Webpack Dev Middleware: middleware يتيح bundle مباشرًا أثناء التطوير. -- Maintainer: Webpack Team Github
  • Webpack Dev Server: يقدم تطبيق webpack ويحدّث المتصفح عند التغييرات. -- Maintainer: Webpack Team Github
  • Webpack Merge - أداة دمج مصممة لـ Webpack. -- Maintainer: Juho Vepsäläinen Github Twitter
  • NPM Install Webpack - يثبت dependencies ويحفظها تلقائيًا مع Webpack. -- Maintainer: Eric Clemmons Github Twitter
  • Webpack Validator - يتحقق من إعدادات webpack باستخدام Joi. -- Maintainer: js-dxtools Team Github
  • Webpack Config Utils - أدوات تجعل إعدادات webpack أسهل للقراءة. -- Maintainer: Kent C. Dodds Github Twitter
  • Angular2 Webpack Toolkit - أدوات ومساعدات Webpack لـ Angular 2. -- Maintainer: AngularClass Github Twitter
  • Webpack Bundle Analyzer - يعرض bundles كـ treemap تفاعلية. -- Maintainer: Yuriy Grunin Github Twitter
  • HJS Webpack: مساعدات وpresets لإعداد webpack مع hotloading. -- Maintainer: Henrik Joreteg Github
  • Webpack Dashboard: dashboard في CLI لـ webpack dev server. -- Maintainer: Formidable Labs Github
  • Neutrino: يجمع قوة Webpack مع بساطة presets. -- Maintainer: Eli Perelman Github
  • Speed Measure Plugin - يقيس سرعة webpack plugins وloaders. -- Maintainer: Stephen Cook Github
  • Time Analytics Plugin - يحلل تكلفة الوقت للـ loaders وplugins في webpack. وهو خليفة Speed Measure Plugin. -- Maintainer: Song Gao Github
  • packtracker.io - تحليل webpack bundle عند كل commit، وإرسال webpack stats إلى كل pull request.
  • BundleStats: يحلل webpack stats، مثل bundle size وassets وmodules وpackages، ويقارن النتائج بين builds مختلفة. -- Maintainer: Vio Github Twitter
  • Webpack Landing Generator: طريقة سهلة لإنشاء landing page قابلة للتحويل. -- Maintainer: Aliaksei Kuncevic Github Twitter
  • Webpack Dev Server Firewall: يمنع الوصول إلى dev server من IPs غير معروفة. -- Maintainer: Igor Adamenko Github Twitter
  • RelativeCI: يشغّل تحليلات bundle معمقة على كل build ويراقب حجم webpack bundle وassets وmodules وpackages. Github

البحث والتعلم

مقالات

فيديوهات

دورات

كتب

  • SurviveJS - Webpack: كتاب مجاني يرشدك من مبتدئ في webpack إلى مستوى متقدم، ويغطي التطوير وproduction ومواضيع متقدمة.

أمثلة Webpack

أمثلة من المجتمع

Angular

بدون ارتباط بإطار معين

React

Vue

  • Vuad - boilerplate لـ Vue قابل للتوسع بدرجة عالية من logustra.

أخرى

·تعديل هذه الصفحة

1 مساهم

RlxChap2