دوره مهاجرت از Create React App به پیکربندی سفارشی وب پک همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: مهاجرت از Create React App به پیکربندی سفارشی وب پک

موضوع کلی: برنامه نویسی

موضوع میانی: وب پک (Webpack)

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه ای بر Webpack و ضرورت پیکربندی سفارشی
• 2. چرا از Create React App (CRA) خارج می شویم؟ محدودیت ها و مزایا
• 3. بررسی اجمالی پروژه CRA و ساختار آن
• 4. پیش نیازها: Node.js، npm/yarn، درک پایه ای React
• 5. نصب Webpack و Webpack CLI به صورت لوکال
• 6. پیکربندی پایه Webpack: entry point، output
• 7. درک مفاهیم کلیدی: entry، output، loaders، plugins، mode
• 8. معرفی loaders: CSS loader، style loader، babel loader
• 9. پیکربندی Babel برای تبدیل ES6+ و JSX
• 10. نصب و پیکربندی Babel: @babel/core، @babel/preset-env، @babel/preset-react
• 11. تنظیمات اولیه webpack.config.js: مد development
• 12. تنظیمات اولیه webpack.config.js: مد production
• 13. کار با CSS: نصب و پیکربندی CSS Loader و Style Loader
• 14. استخراج CSS به فایل های جداگانه: MiniCssExtractPlugin
• 15. کار با SASS/SCSS: نصب و پیکربندی SASS Loader
• 16. کار با تصاویر و فونت ها: file-loader و url-loader
• 17. بهینه سازی تصاویر: image-webpack-loader
• 18. مدیریت فونت ها: بارگذاری فونت ها از منابع محلی و آنلاین
• 19. معرفی Plugins و نقش آن ها در Webpack
• 20. HtmlWebpackPlugin: ایجاد فایل HTML و تزریق bundle
• 21. DefinePlugin: تعریف متغیرهای محیطی (environment variables)
• 22. CopyWebpackPlugin: کپی کردن فایل ها و پوشه ها
• 23. CleanWebpackPlugin: پاک کردن پوشه output قبل از هر build
• 24. Hot Module Replacement (HMR): بروزرسانی خودکار بدون رفرش کامل
• 25. پیکربندی HMR در webpack.config.js
• 26. راه اندازی Server توسعه: webpack-dev-server
• 27. پیکربندی webpack-dev-server: port، host، contentBase، hot
• 28. Proxy کردن API requests در webpack-dev-server
• 29. Source Maps: تولید و پیکربندی Source Maps برای دیباگ آسان تر
• 30. انواع Source Maps و انتخاب بهترین گزینه
• 31. code splitting: چرا کد را به بخش های کوچکتر تقسیم می کنیم؟
• 32. code splitting: entry points
• 33. code splitting: prevent duplication
• 34. code splitting: Dynamic Imports
• 35. Optimization: minimize
• 36. Optimization: splitChunks
• 37. بهینه سازی bundle size: Tree Shaking
• 38. بهینه سازی bundle size: حذف کد های استفاده نشده
• 39. معرفی Webpack Bundle Analyzer: تجزیه و تحلیل bundle
• 40. استفاده از Webpack Bundle Analyzer برای شناسایی مشکلات
• 41. Lazy Loading: بارگذاری تنبلانه کامپوننت ها و ماژول ها
• 42. Prefetching و Preloading: بارگذاری پیش دستانه منابع
• 43. کار با Web Workers در Webpack
• 44. ایجاد و پیکربندی یک Web Worker با Webpack
• 45. Type Checking with TypeScript: ادغام TypeScript با Webpack
• 46. پیکربندی TypeScript Loader: ts-loader یا babel-loader
• 47. linting: ESLint و Prettier
• 48. پیکربندی ESLint و Prettier برای پروژه React
• 49. Testing: ادغام Jest و React Testing Library با Webpack
• 50. پیکربندی Jest با babel-jest
• 51. آشنایی با Webpack Module Federation
• 52. پیاده سازی Module Federation: Host و Remote
• 53. اشتراک گذاری وابستگی ها با Module Federation
• 54. استفاده از Webpack با Context API در React
• 55. کار با Webpack و Redux
• 56. پیکربندی Webpack برای پروژه های Next.js
• 57. پیکربندی Webpack برای پروژه های Gatsby
• 58. سفارشی سازی Webpack در Next.js
• 59. سفارشی سازی Webpack در Gatsby
• 60. Load کردن فایل های Markdown با Webpack
• 61. کار با GraphQL در Webpack
• 62. پیکربندی Webpack برای پروژه های Electron
• 63. مقایسه Webpack با ابزارهای Bundling دیگر: Parcel, Rollup, Esbuild
• 64. بررسی مزایا و معایب هر ابزار Bundling
• 65. ایجاد یک Webpack Boilerplate
• 66. انتشار یک کتابخانه React با Webpack
• 67. Webpack و Server-Side Rendering (SSR)
• 68. تنظیم Webpack برای SSR
• 69. Multi-Page Application (MPA) با Webpack
• 70. پیکربندی Webpack برای MPA
• 71. Build کردن اپلیکیشن برای محیط های مختلف (Staging, Production)
• 72. مدیریت نسخه های مختلف پیکربندی (Development, Production)
• 73. کار با متغیرهای محیطی (environment variables) به صورت امن
• 74. پیکربندی CI/CD با Webpack (Jenkins, GitLab CI, GitHub Actions)
• 75. بهینه سازی زمان build: caching
• 76. بهینه سازی زمان build: parallel processing
• 77. بهینه سازی زمان build: persistent caching
• 78. سفارشی سازی خروجی Webpack (output)
• 79. ایجاد فایل های manifest
• 80. مدیریت مسیرها (paths) در Webpack
• 81. عیب یابی رایج Webpack (Common errors)
• 82. دیباگ کردن پیکربندی Webpack
• 83. استفاده از console.log و debugger در Webpack
• 84. آشنایی با Webpack's Profiling API
• 85. نوشتن Loader های سفارشی
• 86. نوشتن Plugin های سفارشی
• 87. استفاده از Webpack DevTools
• 88. Webpack و Micro Frontends
• 89. پیکربندی Webpack برای Micro Frontends
• 90. مهاجرت از Webpack 4 به Webpack 5
• 91. ویژگی های جدید در Webpack 5
• 92. مدیریت dependencies در Webpack
• 93. استفاده از Yarn Workspaces با Webpack
• 94. Webpack و monorepos
• 95. پیکربندی Webpack برای monorepos
• 96. بهترین شیوه ها در پیکربندی Webpack
• 97. الگوهای طراحی Webpack
• 98. مثال های پیشرفته پیکربندی Webpack
• 99. منابع و مراجع مفید برای Webpack
• 100. جمع بندی و نکات پایانی دوره

مهاجرت از Create React App به پیکربندی سفارشی وب پک: کنترل کامل پروژه شما

آیا شما هم از آن دسته توسعه‌دهندگانی هستید که با Create React App (CRA) شروع کرده‌اید و اکنون احساس می‌کنید که در جعبه‌ای محدود قرار گرفته‌اید؟ آیا نیاز به انعطاف‌پذیری بیشتر، بهینه‌سازی‌های پیشرفته‌تر، و کنترل کامل بر روی ابزارهای ساخت پروژه خود دارید؟ اگر پاسخ شما بله است، این دوره آموزشی دقیقاً برای شما طراحی شده است.

در دنیای پویای توسعه وب، تسلط بر ابزارهای Build مانند Webpack، کلید پیشرفت و خلق پروژه‌های مقیاس‌پذیر و کارآمد است. Create React App یک نقطه شروع عالی است، اما برای پروژه‌های حرفه‌ای و بزرگ‌تر، فراتر رفتن از تنظیمات پیش‌فرض آن امری ضروری است. این دوره شما را گام به گام در مسیر مهاجرت از CRA به یک پیکربندی سفارشی Webpack همراهی می‌کند، تا بتوانید قدرت واقعی توسعه وب را در دستان خود بگیرید.

درباره دوره: از محدودیت تا رهایی در توسعه وب

این دوره آموزشی به طور اختصاصی بر روی فرآیند مهاجرت پروژه‌های React از محیط ساده Create React App به یک محیط توسعه مجهز به پیکربندی سفارشی Webpack تمرکز دارد. ما از مفاهیم پایه‌ای Webpack شروع کرده و به تدریج به سمت تنظیمات پیچیده‌تر و بهینه‌سازی‌های حرفه‌ای پیش می‌رویم. هدف این است که شما پس از گذراندن این دوره، نه تنها بتوانید پروژه خود را با موفقیت مهاجرت دهید، بلکه قادر به درک کامل نحوه عملکرد Webpack و سفارشی‌سازی آن برای نیازهای خاص خود باشید.

موضوعات کلیدی که یاد خواهید گرفت:

• درک عمیق اصول و معماری Webpack
• شناخت محدودیت‌های Create React App و مزایای پیکربندی سفارشی
• استخراج پیکربندی CRA و جایگزینی آن با Webpack
• تنظیم loaders برای پردازش انواع فایل‌ها (JS, CSS, Images, Fonts)
• پیکربندی plugins برای وظایف مختلف (HTML generation, code splitting, optimization)
• مدیریت assets و منابع پروژه
• بهینه‌سازی کد برای بهبود عملکرد و کاهش حجم
• تنظیمات توسعه (Development Server, Hot Module Replacement)
• تنظیمات تولید (Production Build, Minification, Tree Shaking)
• ادغام با فریم‌ورک‌ها و کتابخانه‌های محبوب (مانند React)
• اشکال‌زدایی (Debugging) و حل مشکلات رایج
• ایجاد پیکربندی‌های انعطاف‌پذیر و قابل نگهداری

این دوره برای چه کسانی مناسب است؟

اگر شما یکی از افراد زیر هستید، این دوره آموزشی به شما کمک شایانی خواهد کرد:

• توسعه‌دهندگان فرانت‌اند React که با Create React App کار می‌کنند و به دنبال آزادی عمل و کنترل بیشتری هستند.
• توسعه‌دهندگانی که می‌خواهند درک خود از ابزارهای Build را عمیق‌تر کنند و با Webpack به صورت حرفه‌ای آشنا شوند.
• افرادی که پروژه‌های React آن‌ها در حال رشد است و نیاز به بهینه‌سازی‌های پیچیده‌تر و مدیریت بهتر منابع دارند.
• توسعه‌دهندگانی که قصد مهاجرت پروژه‌های خود به فریم‌ورک‌ها یا تنظیمات جدیدتر را دارند و نیاز به دانش Webpack دارند.
• هر کسی که علاقه‌مند به درک عمیق‌تر چرخه Build در پروژه‌های مدرن وب است.

چرا این دوره را بگذرانیم؟ کلید رهایی از محدودیت‌ها!

در دنیای پر سرعت توسعه وب، دانش شما بزرگترین سرمایه شماست. مهاجرت از Create React App به یک پیکربندی سفارشی Webpack، گامی حیاتی برای ارتقاء مهارت‌های شماست و مزایای بی‌شماری دارد:

• کنترل کامل و انعطاف‌پذیری بی‌نهایت: دیگر محدود به تنظیمات پیش‌فرض CRA نخواهید بود. شما تصمیم می‌گیرید که چه ابزارها و چگونه در پروژه شما کار کنند.
• بهینه‌سازی پیشرفته عملکرد: با یادگیری تکنیک‌های پیشرفته Webpack، می‌توانید سرعت بارگذاری و عملکرد کلی برنامه‌های خود را به طور چشمگیری بهبود بخشید.
• مدیریت بهتر کد و منابع: تکنیک‌هایی مانند Code Splitting و Tree Shaking به شما کمک می‌کنند تا حجم کد نهایی را کاهش داده و تجربه کاربری بهتری ارائه دهید.
• کاهش وابستگی‌ها و افزایش قابلیت نگهداری: با درک عمیق‌تر چرخه Build، می‌توانید پروژه‌های خود را تمیزتر، سازمان‌یافته‌تر و قابل نگهداری‌تر بسازید.
• افزایش ارزش شغلی شما: تسلط بر Webpack یکی از مهارت‌های کلیدی و پرتقاضا در بازار کار توسعه وب است که رزومه شما را قوی‌تر می‌کند.
• کسب آمادگی برای پروژه‌های بزرگ و پیچیده: این دانش پایه محکمی برای کار بر روی پروژه‌های Enterprise و مقیاس‌پذیر فراهم می‌آورد.

سرفصل‌های جامع دوره: بیش از 100 ساعت یادگیری عمیق و کاربردی!

ما با افتخار بیش از 100 سرفصل جامع و کاربردی را برای این دوره آموزشی آماده کرده‌ایم که شما را از صفر به نقطه تسلط کامل بر پیکربندی سفارشی Webpack هدایت می‌کند. این سرفصل‌ها به گونه‌ای طراحی شده‌اند که تمام جنبه‌های لازم را پوشش دهند و شما را برای چالش‌های واقعی آماده سازند.

(به دلیل محدودیت فضا، امکان نمایش کامل 100+ سرفصل در اینجا وجود ندارد، اما اطمینان داشته باشید که هیچ نکته‌ای از قلم نیفتاده است.)

نمونه‌هایی از سرفصل‌های کلیدی شامل:

• مقدمه‌ای بر مدیریت بسته‌ها و ابزارهای Build
• آشنایی با مفاهیم اصلی Webpack: Entry, Output, Loaders, Plugins
• نصب و راه‌اندازی اولیه Webpack
• پیکربندی Entry Points و Output Destinations
• استفاده از JavaScript Loaders (Babel, ts-loader)
• پردازش فایل‌های CSS و Sass/Less
• مدیریت تصاویر و فونت‌ها با Webpack
• تنظیم HTMLWebpackPlugin برای تولید خودکار HTML
• مفهوم و کاربرد Hot Module Replacement (HMR)
• تنظیم Webpack Dev Server برای تجربه توسعه سریع
• بهینه‌سازی Bundle برای محیط Production
• Code Splitting و Lazy Loading
• Tree Shaking برای حذف کد مرده
• مدیریت Environment Variables
• پیکربندی برای React و JSX
• ادغام با Redux, Styled Components و سایر کتابخانه‌ها
• استفاده از Webpack Bundle Analyzer
• اشکال‌زدایی (Debugging) پیکربندی Webpack
• معرفی ابزارهای مشابه و مقایسه
• و صدها مبحث کاربردی و تکنیک‌های پیشرفته دیگر...

با گذراندن این دوره، شما ابزارهای لازم برای کنترل کامل پروژه‌های وب خود را به دست خواهید آورد. دیگر زمان آن رسیده که از محدودیت‌های ابزارهای آماده فاصله گرفته و به یک توسعه‌دهنده قدرتمند و استراتژیک تبدیل شوید.