Awesome webpack

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

منظومة Webpack

دعم Webpack

• Webpack Open Collective - ساعد في دعم جهود التطوير المستمرة للفريق.

المجتمع

• StackOverflow
• Medium
• Gitter Chat

Twitter

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

• Sean T. Larkin - @TheLarkInn يعمل TPM في Microsoft، وهو Developer Advocate وعضو في فريق webpack core.
• Juho Vepsäläinen - @bebraw من SurviveJS، وعضو في فريق webpack core.
• Eric Clemmons - @ericclemmons يشغل منصب VP of Software Development في HigherEdHQ، وهو عضو في Webpack.
• Patrick Stapleton - @gdi2290 من AngularClass وAngularAir وAngular Universal، وهو عضو في Webpack.
• Kent C. Dodds - @kentcdodds من PayPal Engineering وJavaScript Air، وهو عضو في Webpack.
• Johannes Ewald - @Jhnnns: عضو في فريق webpack core.
• Joshua Wiens - @d3viant0ne: Technical Lead لدى EasyMetrics، وعضو في Webpack.
• Jonathan Creamer - @jcreamer898: Microsoft MVP وTelerik Developer Expert.
• Kees Kluskens - @keeskluskens: Software Engineer لدى Code Yellow، وعضو في فريق webpack core.

المكتبات

Loaders

نوع الملف

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

Components والقوالب

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

Styles

• Style Loader: Style loader module for Webpack. -- Maintainer: Webpack Team
• PostCSS Loader: PostCSS loader for Webpack. -- Maintainer: PostCSS Team
• CSS Loader: CSS loader module for Webpack. -- Maintainer: Webpack Team
• SASS Loader: SASS loader for Webpack. -- Maintainer: Jorik Tangelder
• Less Loader: Less loader module for Webpack. -- Maintainer: Webpack Team
• Stylus Loader: A stylus loader for webpack. -- Maintainer: Kyle Robinson Young
• Isomorphic Style Loader: Isomorphic CSS style loader for Webpack. -- Maintainer: Kriasoft Team
• Minify CSS-in-JS Loader: RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- Maintainer: Zack Young
• SASS Resources Loader: Globally import SASS resources (variables, mixins, etc.). -- Maintainer: ShakaCode

Language & Framework

• TS Loader: TypeScript loader for webpack. -- Maintainer: TypeStrong Team
• Coffee Loader: Coffee loader module for Webpack. -- Maintainer: Webpack Team
• Bootstrap Loader: Load Bootstrap styles in your Webpack bundle. -- Maintainer: ShakaCode Team
• PostHTML Loader: PostHTML loader for Webpack. -- Maintainer: PostHTML Team
• ELM Loader: Webpack loader for the Elm programming language. -- Maintainer: Richard Feldman
• Fengari Loader: Run Lua code using Fengari. -- Maintainer: Daurnimator
• MDX Loader: MDX loader for Webpack. -- Maintainer: MDX Team

Utility

• Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team
• Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team
• Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer: Ben Holloway
• Import Loader: Imports loader module for Webpack. -- Maintainer: Webpack Team
• Combine Loader - Converts a loaders array into a single loader string. -- Maintainer: James Friend
• Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer: Forrest R. Zhao
• Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen
• Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs
• ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf
• Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer: Tomáš Ehrlich
• Shell Loader - Run an arbitrary shell script on source files. -- Maintainer: Jo Sprague
• EXIF Loader - Extract EXIF- & IPTC-data from your JPGs during build-time. -- Maintainer: Emanuel Kluge
• esbuild Loader - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by esbuild. -- Maintainer: Hiroki Osame

Testing

• Karma Webpack: Use Karma with Webpack. -- Maintainer: Webpack Team
• Istanbul Webpack plugin: Use Istanbul instrumenter for the whole pack. -- Maintainer: Hagai Cohen

Integration Libraries

• Dotenv Webpack: Compiles environment variables into your bundle via dotenv. -- Maintainer: Matthew Steele
• Terse Webpack - Webpack simplified in a fluent API with presets. -- Maintainer: Eric Clemmons
• SystemJS Webpack - Webpack bundling for SystemJS. -- Maintainer: Guy Bedford
• Gulp Webpack Stream - Run webpack through a stream interface. -- Maintainer: Kyle Robinson Young
• Webpack Blocks - Configure webpack using functional feature blocks. -- Maintainer: Andy Wermke
• Webpacker - Official webpack gem for integration into ruby on rails projects. -- Maintainer: Rails
• WebpackAspnetMiddleware - Development middleware for ASP.NET 5. -- Maintainer: Frank Wallis
• Consul Key/Value Webpack: Compiles environment variables into your bundle via Consul KV-store. -- Maintainer: Marlon Maxwel

Webpack Plugins

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

أدوات Webpack

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

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

مقالات

• Aniketh Saha | 16-Oct-19 - Creating a Custom webpack Plugin
• Antoine Caron | 18-Jan-19 - Webpack : an unexpected journey
• Mark Erikson | 07-Mar-17 - Declaratively Rendering Earth in 3D, Building a Cesium + React App with Webpack
• Joseph Zimmerman | 2-Feb-17 - A Detailed Introduction To Webpack.
• Jamund Ferguson | 22-Jul-16 - Manually Tuning Webpack Builds.
• Sean T. Larkin | 21-Jul-16 - Learn and Debug webpack with Chrome Dev Tools!.
• Raja Rao DV | 10-Apr-16 - Webpack — The Confusing Parts.
• Andrew Ray | 09-Apr-16 - Webpack: When To Use and Why.
• Jonathan Creamer | 25-Feb-16 - WebPack Code splitting with ES6 and Babel 6.
• Ilya Zayats | 07-Feb-16 - How to split your apps by routes with Webpack.
• Sebastian De Deyne | 04-Feb-16 - Adventure Time With Webpack.
• Jonathan Creamer | 10-Jan-16 - Advanced WebPack Part 2 - Code Splitting.
• Andy Ccs | 02-Jan-16 - Webpack and Docker for Development and Deployment.
• Jonathan Creamer | 08-Jun-16 - Advanced WebPack Part 3 - Creating a custom notifier plugin.
• Nader Dabit | 07-Sept-15 - Beginner’s guide to Webpack.
• Jonathan Creamer | 02-Sept-15 - Advanced WebPack Part 1 - The CommonsChunk Plugin.
• Maxime Fabre | 16-Oct-15 - Webpack your bags.
• Hridayesh Sharma | 18-Aug-20 - Webpack Setup for a JavaScript Library

فيديوهات

• Sean Larkin JS Kongress | Apr-2-2019 - Everything’s a plugin: Understanding webpack from the inside out
• Colt Steele via Youtube| Mar-7-2019 - Learn Webpack Course
• Naomi A. Jacobs via BuzzJS 2.0 2017 | Feb-27-2017 - Webpack: It's Not Magic
• Jack Franklin at HalfStack2016 | 18-Nov-16 | Seamless client side JavaScript w/ Webpack
• Sean Larkin NEJS Conf | 30-Sep-16 | Webpack: Core Concepts
• Front End Center Webpack from First Principles | 22-Aug-16 - Intro to Webpack
• Eric Clemmons chat with Kent C. Dodds | 01-Jul-16 - Webpack HMR.
• Mirko Nasato (5 Part Series) | 07-Jun-16 - Angular2 with Webpack Project Setup.
• Jonathan Creamer at Nodevember | 05-Dec-15 - Advanced WebPack.
• Kyle Robinson Young | 08-Jul-15 - Getting Started with Webpack.
• Tasveer Singh at TorontoJS Tech Talk | 09-Apr-15 - Webpack.
• Jeremy Lund at Mountain West JS | 28-Mar-15 - Gift Wrap Your Code with Webpack.

دورات

• Webpack for Everyone - سلسلة مجانية من Laracasts يقدمها Jeffrey Way.
• Webpack Fundamentals - مقدمة مختصرة عن أساسيات Webpack يقدمها Sean Larkin.
• Web Performance with Webpack - حل مشاكل أداء الويب الشائعة باستخدام Webpack مع Sean Larkin.
• Intro to webpack (playlist) - قائمة تشغيل من Egghead.io تضم عدة فيديوهات لـ Kent C. Dodds، وأولها مجاني.
• Angular and Webpack for modular applications - دورة من Egghead.io يقدمها Kent C. Dodds.
• Using Webpack for Production JavaScript Applications - دورة متقدمة من Egghead.io يقدمها Kent C. Dodds.
• Webpack Fundamentals - دورة Joe Eames على Pluralsight، مستوى متوسط.
• Webpack Academy - مورد شامل لتعلم webpack.
• Webpack from scratch series سلسلة على YouTube يقدمها Paris Nakita Kejser.

كتب

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

أمثلة Webpack

• Webpack Examples: أمثلة على وظائف Webpack الشائعة.

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

Angular

• Angular2 Webpack Starter - starter kit لـ Angular 2 يعمل عبر Webpack من AngularClass.
• Angular2 Webpack - starter كامل وبسيط لـ Angular 2 باستخدام Webpack من Preboot.
• Angular2 Webpack Visual Studio - ASP.NET Core وAngular2 مع Webpack وVisual Studio من Damien Bod.
• Angular2 Starter - starter kit لـ Angular2 مع Typescript وWebpack من Brian Schemp.
• Angular2 Seed - starter بسيط يوضح المفاهيم الأساسية في Angular2 من Pawel Kozlowski.

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

• ES6 TodoMVC with Webpack - مستودع يُستخدم لتعليم webpack. راجع الفروع. من Kent C. Dodds.

React

• Create React App - إنشاء تطبيقات React بدون إعداد build من Dan Abramov.
• React Starter Kit - boilerplate لتطبيق ويب isomorphic من Kriasoft Team.
• React Redux Universal - starter boilerplate لتطبيق ويب universal من Erik Rasmussen.
• Frontend Boilerplate - boilerplate لأشياء غالبًا لا ينبغي أن تكون موجودة من TJ Holowaychuk.
• ReactGo - حل كامل لتطبيق full-stack universal Redux من Ken Ding.
• React Native Calculator - تطبيقات mobile وdesktop وweb بالكود نفسه من Benoit Vallon.
• React Cordova Boilerplate - مثال TodoMVC لـ React مع Cordova من Yuval Saraf.
• React Universally - starter kit يعطيك الحد الأدنى لتطبيق React universal جاهز للـ production.
• Razzle Material-UI Styled Example - مثال يستخدم Styled Components وExpress مع compression من Erik Engi.
• Read - boilerplate لـ React قابل للتوسع بدرجة عالية من logustra.
• @route-resource-preload/webpack-plugin - يركز على تحسين سرعة تحميل الشاشة الأولى للتطبيقات وتقديم أفضل تجربة مستخدم، وفكرته مستلهمة من preloading في NextJS، من Devin Deng.

Vue

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

أخرى

• Juho, Johannes, Tobias & Sean on JavaScript Air - حلقة podcast على JavaScript Air.
• Webpack interview questions - أسئلة مقابلات عن Webpack مع إجاباتها.
• Visual config tool for webpack - أداة مرئية لإنشاء إعدادات webpack داخل المتصفح.