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

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

مقدمه | مبانی بسته وب 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

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

بارگیری داده های خارجی با استفاده از 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

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

سفارشی سازی و بهبود با استفاده از پلاگین ها 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 )

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

ساخت یک وب سایت کامل با استفاده از 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

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

بهینه سازی های اضافی 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

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

پیکربندی ساخت و استقرار تولید 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

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

یک برنامه تک صفحه ای 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

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

فرانت‌اندهای میکرو با استفاده از 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

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

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

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

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

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

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