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

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

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

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

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

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

📋 سرفصل‌های دوره

• 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. جمع بندی و نکات پایانی دوره