دوره معماری وب‌پک: چگونه وب‌پک در پشت صحنه کار می‌کند؟ همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره معماری وب‌پک: چگونه وب‌پک در پشت صحنه کار می‌کند؟

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

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

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

• 1. مقدمه‌ای بر معماری نرم‌افزار
• 2. مقدمه‌ای بر برنامه‌نویسی در وب
• 3. چرخه توسعه برنامه‌های وب
• 4. نیاز به ابزارهای مدرن توسعه
• 5. معرفی مفهوم Bundling
• 6. اهمیت Bundling در پروژه‌های وب
• 7. تاریخچه ابزارهای Bundling
• 8. معرفی Webpack به عنوان یک Bundler قدرتمند
• 9. اهداف اصلی دوره
• 10. آنچه از این دوره خواهید آموخت
• 11. معماری کلی Webpack
• 12. مفاهیم پایه: Entry Point
• 13. تعریف Entry Point در Webpack
• 14. چند Entry Point در یک پروژه
• 15. مفاهیم پایه: Output
• 16. تنظیمات Output برای فایل‌های خروجی
• 17. نام‌گذاری فایل‌های خروجی (Filename)
• 18. مسیر خروجی (Path)
• 19. مفاهیم پایه: Loaders
• 20. نقش Loaders در Webpack
• 21. کار با Loaders برای پردازش فایل‌ها
• 22. انواع مختلف Loaders
• 23. نحوه پیکربندی Loaders
• 24. مثال: پردازش فایل‌های CSS
• 25. مثال: پردازش فایل‌های JavaScript
• 26. مثال: پردازش فایل‌های تصاویر
• 27. مثال: پردازش فایل‌های SVG
• 28. مفاهیم پایه: Plugins
• 29. نقش Plugins در Webpack
• 30. تفاوت Loaders و Plugins
• 31. انواع مختلف Plugins
• 32. نحوه استفاده از Plugins
• 33. مثال: CleanWebpackPlugin
• 34. مثال: HtmlWebpackPlugin
• 35. مثال: MiniCssExtractPlugin
• 36. ساختار فایل پیکربندی Webpack (webpack.config.js)
• 37. تنظیمات اولیه webpack.config.js
• 38. استفاده از CommonJS در webpack.config.js
• 39. تعریف Entry Point در config
• 40. تعریف Output در config
• 41. تعریف Loaders در config
• 42. تعریف Plugins در config
• 43. مدیریت Module Resolution
• 44. نحوه جستجوی ماژول‌ها توسط Webpack
• 45. تنظیمات resolve.modules
• 46. تنظیمات resolve.extensions
• 47. تنظیمات resolve.alias
• 48. مدیریت Source Maps
• 49. اهمیت Source Maps برای Debugging
• 50. انواع Source Maps
• 51. تنظیمات devtool در Webpack
• 52. کار با Debugger در مرورگر
• 53. مدیریت Asset Management
• 54. پردازش فایل‌های JavaScript مدرن (ES6+)
• 55. استفاده از Babel با Webpack
• 56. پیکربندی Babel (babel-loader)
• 57. تبدیل JSX به JavaScript
• 58. مدیریت فایل‌های CSS (Plain CSS)
• 59. استفاده از Style-loader
• 60. استفاده از Css-loader
• 61. استفاده از Postcss-loader
• 62. مدیریت فایل‌های SASS/SCSS
• 63. استفاده از Sass-loader
• 64. مدیریت فایل‌های Less
• 65. مدیریت فایل‌های Stylus
• 66. مدیریت تصاویر (Images)
• 67. استفاده از File-loader
• 68. استفاده از Asset Modules (Webpack 5+)
• 69. مدیریت فونت‌ها (Fonts)
• 70. مدیریت فایل‌های ویدیویی و صوتی
• 71. مدیریت فایل‌های JSON
• 72. مدیریت فایل‌های XML
• 73. مدیریت فایل‌های CSV
• 74. مدیریت فایل‌های Text
• 75. مدیریت Environment Variables
• 76. استفاده از DefinePlugin
• 77. استفاده از EnvironmentPlugin
• 78. مدیریت Hot Module Replacement (HMR)
• 79. مفهوم HMR
• 80. نحوه فعال‌سازی HMR
• 81. پیکربندی HMR
• 82. کاربرد HMR در توسعه
• 83. مدیریت Code Splitting
• 84. مفهوم Code Splitting
• 85. اهمیت Code Splitting برای Performance
• 86. استراتژی‌های Code Splitting
• 87. تنظیمات entry برای Code Splitting
• 88. استفاده از dynamic import
• 89. تنظیمات output.chunkFilename
• 90. مدیریت Caching
• 91. اهمیت Caching در Build Time
• 92. استفاده از Webpack Caching
• 93. تنظیمات cache در webpack.config.js
• 94. مدیریت Optimization
• 95. تنظیمات optimization.splitChunks
• 96. تنظیمات optimization.minimizer
• 97. استفاده از TerserPlugin برای Minification JS
• 98. استفاده از CssMinimizerPlugin برای Minification CSS
• 99. مدیریت Tree Shaking
• 100. مفهوم Tree Shaking