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

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

عنوان دوره: پیکربندی پروژه‌های مدرن با Webpack

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

موضوع میانی: جاوا اسکریپت (JavaScript)

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

• 1. مقدمه‌ای بر برنامه‌نویسی
• 2. مبانی جاوا اسکریپت
• 3. مفهوم متغیرها در جاوا اسکریپت
• 4. انواع داده‌های اساسی در جاوا اسکریپت
• 5. عملگرها در جاوا اسکریپت
• 6. ساختارهای کنترلی: شرط‌ها (if, else, switch)
• 7. حلقه‌ها (for, while, do-while)
• 8. توابع در جاوا اسکریپت
• 9. مفهوم Scope در جاوا اسکریپت
• 10. توابع Arrow در جاوا اسکریپت
• 11. مفهوم Closures در جاوا اسکریپت
• 12. اشیاء (Objects) در جاوا اسکریپت
• 13. آرایه‌ها (Arrays) در جاوا اسکریپت
• 14. متدهای آرایه (map, filter, reduce)
• 15. کلاس‌ها (Classes) در جاوا اسکریپت (ES6+)
• 16. مفهوم Inheritance در جاوا اسکریپت
• 17. Promises در جاوا اسکریپت
• 18. Async/Await در جاوا اسکریپت
• 19. ماژول‌ها (Modules) در جاوا اسکریپت (ES Modules)
• 20. مقدمه‌ای بر Node.js
• 21. نصب Node.js و npm
• 22. آشنایی با Package.json
• 23. مفهوم Bundling
• 24. چرا به Bundler نیاز داریم؟
• 25. معرفی Webpack
• 26. نصب Webpack
• 27. مفهوم Entry Point در Webpack
• 28. مفهوم Output در Webpack
• 29. نحوه پیکربندی اولیه Webpack (webpack.config.js)
• 30. Loader ها در Webpack
• 31. آشنایی با File-loader
• 32. استفاده از Babel-loader برای transpiling
• 33. استفاده از CSS-loader
• 34. استفاده از Style-loader
• 35. پیکربندی Loader ها در webpack.config.js
• 36. Plugins در Webpack
• 37. HtmlWebpackPlugin
• 38. MiniCssExtractPlugin
• 39. CleanWebpackPlugin
• 40. استفاده از Plugins در webpack.config.js
• 41. توسعه و Build در Webpack
• 42. حالت Development vs Production
• 43. Webpack Dev Server
• 44. Hot Module Replacement (HMR)
• 45. بهینه‌سازی Assets
• 46. فشرده‌سازی (Minification)
• 47. Code Splitting
• 48. Lazy Loading
• 49. Code Splitting با import()
• 50. Code Splitting با Webpack
• 51. مدیریت منابع (Assets)
• 52. تصاویر (Images)
• 53. فونت‌ها (Fonts)
• 54. استفاده از Webpack برای فریم‌ورک‌های مدرن
• 55. تنظیمات Webpack برای React
• 56. تنظیمات Webpack برای Vue.js
• 57. تنظیمات Webpack برای Angular
• 58. پیکربندی برای TypeScript
• 59. استفاده از Ts-loader
• 60. تنظیمات Webpack برای TypeScript
• 61. مدیریت Environment Variables
• 62. تفاوت بین Dev و Prod Environments
• 63. استفاده از DefinePlugin
• 64. استفاده از Dotenv Plugin
• 65. تست در پروژه‌های مدرن
• 66. تنظیمات Webpack برای تست
• 67. آشنایی با Jest
• 68. یکپارچه‌سازی Jest با Webpack
• 69. امنیت در Webpack
• 70. بهینه‌سازی امنیتی Webpack
• 71. مباحث پیشرفته Webpack
• 72. Custom Loaders
• 73. Custom Plugins
• 74. Webpack Internals
• 75. Performance Tuning
• 76. Monitoring Webpack Builds
• 77. Dlopen
• 78. Tree Shaking
• 79. Scope Hoisting
• 80. Module Federation
• 81. مفهوم Module Federation
• 82. پیاده‌سازی Module Federation
• 83. استفاده عملی از Module Federation
• 84. Best Practices در Webpack
• 85. سازماندهی فایل‌ها در پروژه
• 86. مدیریت وابستگی‌ها (Dependencies)
• 87. نکات و ترفندها
• 88. نکات عیب‌یابی Webpack
• 89. منابع آموزشی تکمیلی
• 90. پروژه‌های عملی Webpack
• 91. ساخت یک پروژه SPA با Webpack
• 92. ساخت یک کتابخانه با Webpack
• 93. استفاده از Webpack برای Micro frontends
• 94. نحوه ادغام Webpack با CI/CD
• 95. نمونه‌های پیشرفته پیکربندی
• 96. مقایسه Webpack با Bundler های دیگر (Vite, Rollup)
• 97. مقدمه‌ای بر Vite
• 98. مزایای Vite
• 99. مقایسه Vite و Webpack
• 100. مقدمه‌ای بر Rollup

پیکربندی پروژه‌های مدرن جاوا اسکریپت با Webpack | دوره جامع

معرفی دوره

آیا می‌خواهید سرعت و کارایی پروژه‌های جاوا اسکریپت خود را به طور چشمگیری افزایش دهید؟ آیا از پیچیدگی‌های پیکربندی ابزارهای مدرن Front-End خسته شده‌اید؟ دوره "پیکربندی پروژه‌های مدرن با Webpack" پاسخی قطعی به نیاز شماست! در این دوره، شما با قدرتمندترین ابزار مدیریت ماژول‌ها و بسته‌بندی (bundling) در دنیای Front-End آشنا خواهید شد: Webpack.

Webpack به شما کمک می‌کند تا کدهای جاوا اسکریپت، CSS، تصاویر و دیگر دارایی‌های پروژه خود را بهینه‌سازی، فشرده‌سازی و مدیریت کنید. این دوره از اصول اولیه شروع می‌شود و شما را به سمت پیکربندی‌های پیشرفته و بهینه‌سازی‌های عملکرد هدایت می‌کند. با یادگیری Webpack، شما می‌توانید با اطمینان بیشتری پروژه‌های پیچیده Front-End را مدیریت کرده و تجربه‌ای سریع‌تر و روان‌تر را برای کاربران خود فراهم کنید.

درباره دوره

این دوره به صورت گام به گام و عملی طراحی شده است. شما در طول دوره، با مفاهیم کلیدی Webpack، نحوه نصب و پیکربندی آن، استفاده از لودرها و پلاگین‌ها، و همچنین بهینه‌سازی‌های ضروری برای تولید یک پروژه بهینه و آماده برای تولید (Production) آشنا خواهید شد. تمرکز اصلی دوره بر روی یادگیری عملی و پروژه‌محور است تا شما بتوانید دانش کسب شده را بلافاصله در پروژه‌های واقعی خود به کار ببرید.

موضوعات کلیدی

در این دوره شما با موضوعات کلیدی زیر آشنا خواهید شد:

• مفاهیم اولیه Webpack و اهمیت آن در پروژه‌های مدرن
• نصب و راه‌اندازی Webpack در پروژه‌های مختلف
• پیکربندی فایل webpack.config.js
• استفاده از لودرها برای پردازش انواع فایل‌ها (CSS, تصاویر, فونت‌ها و ...)
• استفاده از پلاگین‌ها برای بهینه‌سازی و تولید دارایی‌های نهایی
• مدیریت Asset ها (CSS, تصاویر, فونت‌ها) با Webpack
• کاهش حجم فایل‌های نهایی (Minification) و بهینه‌سازی برای تولید
• استفاده از Code Splitting برای بارگذاری بهینه
• تنظیمات Hot Module Replacement (HMR) برای توسعه سریع
• بهبود عملکرد و بهینه‌سازی‌های پیشرفته
• استفاده از Webpack در پروژه‌های React, Vue و Angular (اشاره)

مخاطبان دوره

این دوره برای افراد زیر مناسب است:

• برنامه‌نویسان Front-End که با جاوا اسکریپت آشنایی دارند.
• توسعه‌دهندگان وب که می‌خواهند دانش خود را در زمینه ابزارهای مدرن Front-End ارتقا دهند.
• طراحان وب که به دنبال بهینه‌سازی پروژه‌های خود هستند.
• علاقه‌مندان به یادگیری Webpack و بهبود مهارت‌های خود در این زمینه.

چرا این دوره را بگذرانیم؟

گذراندن این دوره به شما مزایای فراوانی می‌بخشد:

• افزایش سرعت و کارایی: با یادگیری Webpack، سرعت بارگذاری وب‌سایت‌ها و برنامه‌های وب خود را به طور چشمگیری افزایش دهید.
• مدیریت آسان‌تر پروژه‌ها: Webpack به شما کمک می‌کند تا پروژه‌های بزرگ و پیچیده را به راحتی مدیریت کنید.
• بهینه‌سازی برای تولید: با استفاده از Webpack، پروژه‌های خود را برای تولید بهینه‌سازی کرده و آماده انتشار کنید.
• یادگیری مهارت‌های ارزشمند: Webpack یک مهارت کلیدی در دنیای Front-End است و یادگیری آن، شما را در بازار کار متمایز می‌کند.
• ارتقاء دانش و مهارت: این دوره به شما کمک می‌کند تا دانش و مهارت‌های خود را در زمینه Front-End ارتقا دهید و به یک توسعه‌دهنده حرفه‌ای‌تر تبدیل شوید.
• پشتیبانی و راهنمایی: در طول دوره، از پشتیبانی کامل و راهنمایی‌های لازم برخوردار خواهید بود.

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

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

بخش اول: مقدمه‌ای بر Webpack

• مفاهیم اولیه Webpack
• اهمیت Webpack در توسعه Front-End
• نصب و راه‌اندازی Webpack
• اولین پیکربندی Webpack
• ساختار فایل webpack.config.js
• ورودی (Entry) و خروجی (Output)
• مبانی بسته‌بندی (Bundling)

بخش دوم: لودرها (Loaders)

• آشنایی با لودرها
• لودرهای CSS و SASS
• لودرهای تصاویر و فونت‌ها
• لودرهای Babel برای تبدیل کد ES6 به ES5
• لودرهای TypeScript
• لودرها و مدیریت فایل‌های JSON
• تنظیمات پیشرفته لودرها

بخش سوم: پلاگین‌ها (Plugins)

• آشنایی با پلاگین‌ها
• پلاگین‌ها و بهینه‌سازی پروژه
• پلاگین HtmlWebpackPlugin
• پلاگین MiniCssExtractPlugin
• پلاگین CleanWebpackPlugin
• پلاگین TerserWebpackPlugin
• پلاگین DefinePlugin

بخش چهارم: مدیریت Asset ها

• مدیریت فایل‌های CSS
• مدیریت تصاویر و آیکون‌ها
• مدیریت فونت‌ها
• مدیریت فایل‌های SVG
• استفاده از فایل‌های Static
• بهینه‌سازی Asset ها

بخش پنجم: بهینه‌سازی و عملکرد

• Minification و فشرده‌سازی کد
• Code Splitting
• Lazy Loading
• Tree Shaking
• Caching
• Production vs Development
• بهینه‌سازی تصاویر

بخش ششم: توسعه سریع با HMR

• آشنایی با Hot Module Replacement (HMR)
• پیکربندی HMR
• استفاده از HMR در پروژه‌ها
• افزایش سرعت توسعه با HMR

بخش هفتم: پروژه‌های عملی

• پروژه 1: پیکربندی Webpack برای یک پروژه React
• پروژه 2: پیکربندی Webpack برای یک پروژه Vue
• پروژه 3: پیکربندی Webpack برای یک پروژه ساده
• بهینه‌سازی پروژه‌ها

بخش هشتم: مباحث پیشرفته (اختیاری)

• استفاده از Webpack در پروژه‌های بزرگ
• انتخاب ابزارهای مناسب
• عیب‌یابی مشکلات رایج
• بهترین شیوه‌ها در Webpack
• آینده Webpack و ابزارهای مشابه

همین امروز در دوره "پیکربندی پروژه‌های مدرن با Webpack" ثبت‌نام کنید و مهارت‌های خود را به سطح بالاتری ارتقا دهید! با یادگیری Webpack، به یک توسعه‌دهنده حرفه‌ای‌تر تبدیل شوید و پروژه‌های خود را بهینه و کارآمد کنید.