آموزش Webpack 5 Ninja (2023) - ساخت Micro frontend و برنامه های وب

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

مقدمه | مبانی بسته وب Introduction | Webpack Basics

مقدمه | مبانی بسته وب Introduction | Webpack Basics

• معرفی Introduction

• وب پک چیست؟ What is Webpack

• نصب نرم افزار Software installations

• درک مفاهیم اساسی Understanding basic concepts

• دانلود مخزن کد دوره Download Course code repository

• ***IMP*** دانلود کد منبع ***IMP*** Source Code download

• راه اندازی اولیه جاوا اسکریپت HTML Basic HTML Javascript Setup

• افزودن پیکربندی بسته وب Adding webpack configuration

• رفع کلیک دکمه ما Fixing our button click

• ماژول های CommonJS CommonJS modules

• ماژول های ES6 ES6 Modules

بارگیری داده های خارجی با استفاده از Webpack Loading external data using Webpack

بارگیری داده های خارجی با استفاده از Webpack Loading external data using Webpack

• معرفی بخش Loaders Loaders Section Introduction

• لودرها چیست؟ What are loaders ?

• لودرهای CSS قسمت 1 CSS loaders Part 1

• لودرهای CSS قسمت 2 CSS loaders Part 2

• لودرهای SCSS SCSS Loaders

• بارگذاری تصاویر در JS Loading images in JS

• لودرهای فونت Fonts loaders

• Loaders Recap Loaders Recap

سفارشی سازی و بهبود با استفاده از پلاگین ها Customization and Enhancement using Plugins

سفارشی سازی و بهبود با استفاده از پلاگین ها Customization and Enhancement using Plugins

• معرفی بخش پلاگین ها Plugins section introduction

• بسته ورودی چندگانه Multiple entry bundle

• پلاگین ها چیست؟ what are plugins ?

• استفاده از افزونه HTML Webpack Using HTML Webpack plugin

• تعمیر صفحه خراب ما Fixing our broken page

• بارگیری مجدد خودکار (سرور توسعه دهنده) Automated Reloading ( Dev Server )

ساخت یک وب سایت کامل با استفاده از Webpack (پروژه دوره) Build a full website using Webpack ( Course Project )

ساخت یک وب سایت کامل با استفاده از Webpack (پروژه دوره) Build a full website using Webpack ( Course Project )

• نمای کلی بخش وب‌سایت Webpack Section overview Webpack Website

• وابستگی ها را از طریق NPM نصب کنید Install dependencies via NPM

• پیکربندی پایه Webpack Basic Webpack config

• CSS | راه اندازی لودرهای SCSS CSS | SCSS loaders setup

• راه اندازی سرور توسعه دهنده Dev server setup

• موضوع را تحلیل کنید Analyse the issue

• دارایی ها را در پوشه dist کپی کنید Copy assets to dist folder

• رفع واردات در صفحه دوره ها Fixing the imports in courses page

بهینه سازی های اضافی Additional Optimizations

بهینه سازی های اضافی Additional Optimizations

• معرفی بخش بهینه سازی Optimization section introduction

• تقسیم کد چیست؟ What is code splitting ?

• تجزیه و تحلیل ساخت وب پک Analyzing the Webpack build

• تکه تقسیم وب بسته Webpack split chunk

• بارگذاری تنبل | واردات دینامیک Lazy loading | Dynamic imports

• افزودن هش به فایل های بسته خروجی Adding hash to output bundle files

پیکربندی ساخت و استقرار تولید Production Build and Deployment configurations

پیکربندی ساخت و استقرار تولید Production Build and Deployment configurations

• معرفی بخش بهینه سازی تولید Production Optimization section introduction

• CSS را از HTML استخراج کنید Extract CSS from HTML

• شیمینگ Shimming

• CSS مرده را حذف کنید Remove dead CSS

• تکان درخت | حالت تولید پک وب Tree shaking | Webpack Production mode

• حالت تولید در مقابل توسعه Production vs Development mode

• بخش پیکربندی بسته وب تقسیم - 1 Splitting webpack configuration part - 1

• بخش پیکربندی بسته وب تقسیم - 2 Splitting webpack configuration part - 2

یک برنامه تک صفحه ای React بسازید Build a React single page application

یک برنامه تک صفحه ای React بسازید Build a React single page application

• معرفی بخش برنامه React با استفاده از Webpack Section introduction React app using Webpack

• پیکربندی اولیه HTML و JS Basic HTML and JS configuration

• تنظیمات ورودی، خروجی را تعریف کنید Define Entry , Output configurations

• اضافه کردن لودر | تنظیمات سرور توسعه دهنده Adding Loaders | Dev server configurations

• اضافه کردن بابل لودر Adding Babel loader

• رفع مشکل مسیریابی ما Fixing our routing issue

• پیکربندی بارگذارهای CSS را ارسال کنید Post CSS Loaders configuration

• پیکربندی ESLint ESLint configuration

فرانت‌اندهای میکرو با استفاده از Webpack Module Federation Micro frontends using Webpack Module Federation

فرانت‌اندهای میکرو با استفاده از Webpack Module Federation Micro frontends using Webpack Module Federation

• معرفی بخش Micro-frontends Section introduction Micro-frontends

• چرا Micro-frontends Why Micro-frontends

• معرفی پروژه Micro-frontends Micro-frontends project introduction

• راه اندازی سرورهای برنامه های کاربردی Starting of applications servers

• مبانی فدراسیون ماژول Module federation basics

• افشای اجزاء Exposing components

• واکشی داده های فیلم به صفحه اصلی Fetching movies data to homepage

• وارد کردن قطعات از راه دور Importing remote components

• در حال ارائه لیست تمام فیلم ها Rendering all movies list

• تمرین: از جزء تایپوگرافی استفاده کنید Exercise: Use the Typography component

• Micro-frontend های بیشتری را راه اندازی کنید Initialise more Micro-frontends

• پایه برنامه فیلم را راه اندازی کنید Setup movie app base

• افزودن صفحه اصلی به برنامه فیلم Adding homepage to movie app

• رفع مشکل رندرینگ Fixing the rendering issue

• افزودن صفحه جزئیات و مسیر رزرو Adding details page and booking route

• حرکت به صفحه جزئیات Navigating to the details page

• ارسال شناسه فیلم به عنوان پارامتر مسیر مسیر Passing movie id as the path path parameter

• پیمایش از طریق رزرو سریع Navigating via quick booking

• مقدمه مدیریت دولتی State management introduction

• اصول اولیه RXJS RXJS basics

• انتشار داده های رزرو به ovservable Publishing booking data to ovservable

• مصرف رویداد در صفحه رزرو Consuming the event on booking page

• ارائه داده ها در صفحه رزرو Rendering the data on booking page

• انتشار اطلاعات رزرو و مسیریابی به صفحه جزئیات Publish booking and routing data to details page

• نتیجه گیری میکرو فرانتند Micro-frontend conclusion

• نتیجه گیری دوره Course Conclusion

جایزه: اصول اولیه Nodejs BONUS: Nodejs basics

جایزه: اصول اولیه Nodejs BONUS: Nodejs basics

• مدیریت محیط سیستم Managing System Environment

• ماژول مسیر NodeJS NodeJS Path Module

• عبارات با قاعده Regular Expressions