دانلود Webpack 5 and Vite: A New Way to Learn - Active Thinking

مرورگر شما از این ویدیو پشتیبانی نمی کند.

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره:

یادگیری وب‌پک و ویت با رویکردی نوین: از حدس زدن تا تسلط

با رویکرد "حدس بزن و یاد بگیر"، درک عمیق‌تری از وب‌پک پیدا کنید و ویت را بهتر بیاموزید. تجربه وب‌پک، مسیر تسلط بر ویت را هموار می‌سازد.

آنچه خواهید آموخت:

تسلط کامل بر Webpack 5 و Webpack DevServer: بهینه‌سازی و توسعه پروژه‌های مدرن.
تسلط کامل بر Vite: بهره‌گیری از سرعت و سادگی ابزار جدید.
کتابخانه Webpack و Vite: درک عمیق ساختار و کاربرد کتابخانه‌ها.
ماژول فدراسیون وب‌پک (Webpack Module Federation): مدیریت ماژول‌ها در مقیاس بزرگ.

پیش‌نیازها:

دانش پایه جاوا اسکریپت (Basic JavaScript knowledge).
دانش پایه NPM (Basic NPM knowledge).

چرا این دوره متفاوت است؟

این دوره صرفاً مجموعه‌ای از آموزش‌های وب‌پک و ویت نیست. ما رویکردی منحصر به فرد برای یادگیری سریع‌تر و مؤثرتر در پیش گرفته‌ایم.

مسیر یادگیری وب‌پک و ویت:

مطالعه وب‌پک، بنیان درک عمیق‌تر ویت را بنا می‌نهد. تجربه شما با وب‌پک، درک مفاهیم مشابه در ویت را تسهیل کرده و زمان و تلاش لازم برای یادگیری را به شدت کاهش می‌دهد.
از سوی دیگر، یادگیری ویت فرصتی عالی برای مرور و به‌کارگیری دانش وب‌پک شما فراهم می‌کند.
با مقایسه شباهت‌ها و تفاوت‌های وب‌پک و ویت، درک شما از هر دو ابزار عمیق‌تر خواهد شد.

"کشف کردن" در دل ناشناخته‌ها: رویکرد "حدس بزن و یاد بگیر"

به جای ارائه دستورالعمل‌های گام به گام، این دوره شما را به چالش می‌کشد تا خودتان راه‌حل‌ها را بیابید. در نتیجه، نه تنها "چگونه" بلکه "چرا"ی هر فرآیند را نیز خواهید آموخت.

بهینه‌سازی پیکربندی وب‌پک:

از زمانی که وب‌پک 4 به بعد، نیاز به فایل پیکربندی را کاهش داده است، ما از این ویژگی برای آموزش عملی بهره می‌بریم. با ایجاد یک پروژه و تطبیق آن با تنظیمات پیش‌فرض وب‌پک، درک دقیق‌تر و عمیق‌تری از نحوه کار وب‌پک و تنظیمات آن به دست خواهید آورد.

آموزش سنتی نیز موجود است:

اگر ترجیح می‌دهید که آموزش‌ها به صورت سنتی و با دستورالعمل‌های دقیق ارائه شوند، نگران نباشید. ما یک درس سنتی وب‌پک آماده کرده‌ایم که تمامی مباحث را گام به گام آموزش می‌دهد.

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

Webpack 5: bundling, tree shaking, lazy loading, loaders, plugins, asset modules-Webpack 5: باندلینگ، جداسازی کد، بارگذاری تدریجی، لودرها، پلاگین‌ها، ماژول‌های دارایی Webpack 5: Bundling, Tree Shaking, Lazy Loading, Loaders, Plugins, Asset Modules

Active Thinking: Exploring Webpack By Guessing-تفکر فعال: کاوش وب‌پک با حدس زدن Active Thinking: Exploring Webpack By Guessing
Active Thinking: Reverse Engineering the Webpack Config File-تفکر فعال: مهندسی معکوس فایل پیکربندی وب‌پک Active Thinking: Reverse Engineering the Webpack Config File
Webpack Introduction (the Traditional Approach)-مقدمه وب‌پک (رویکرد سنتی) Webpack Introduction (the Traditional Approach)
Webpack Watch & WatchOptions-وب‌پک Watch و WatchOptions Webpack Watch & WatchOptions
Webpack Dev Server-سرور توسعه وب‌پک Webpack Dev Server
Static Files-فایل‌های ایستا Static Files
Deduplication-حذف موارد تکراری Deduplication
Multiple Entry Points-نقاط ورودی متعدد Multiple Entry Points
Tree Shaking-جداسازی کد بدون استفاده (Tree Shaking) Tree Shaking
Side Effects-اثرات جانبی Side Effects
ES6 Dynamic Module Crash Course-دوره‌ی فشرده ماژول‌های پویا ES6 ES6 Dynamic Module Crash Course
Lazy Loading-بارگذاری تدریجی Lazy Loading
splitChunksPlugin-پلاگین splitChunks splitChunksPlugin
htmlWebpackPlugin-پلاگین htmlWebpackPlugin htmlWebpackPlugin
htmlWebpackPlugin: Multiple Pages-htmlWebpackPlugin: صفحات متعدد htmlWebpackPlugin: Multiple Pages
Webpack.ProvidePlugin-پلاگین Webpack.ProvidePlugin Webpack.ProvidePlugin
Webpack Asset Modules-ماژول‌های دارایی وب‌پک Webpack Asset Modules
Asset-دارایی Asset
Asset Modules Public Path-مسیر عمومی ماژول‌های دارایی Asset Modules Public Path
CSS-CSS CSS
Minimizing CSS-فشرده‌سازی CSS Minimizing CSS
On-demand CSS-CSS در صورت نیاز On-demand CSS
SASS-SASS SASS
PublicPath and Deployment-مسیر عمومی و استقرار PublicPath and Deployment
Separate Config Files-فایل‌های پیکربندی جداگانه Separate Config Files
Challenge: HTML File as Static Asset-چالش: فایل HTML به عنوان دارایی ایستا Challenge: HTML File as Static Asset

Vite-Vite Vite

Vite Introduction: Making Educated Guesses Based on Webpack Experience-مقدمه Vite: حدس‌های آگاهانه بر اساس تجربه وب‌پک Vite Introduction: Making Educated Guesses Based on Webpack Experience
Vite Lazy Loading: Proving a Hypothesis-بارگذاری تدریجی Vite: اثبات یک فرضیه Vite Lazy Loading: Proving a Hypothesis
Vite Asset Files: "File-loader"-فایل‌های دارایی Vite: "File-loader" Vite Asset Files: "File-loader"
Vite Asset Files: RAW and Data URI-فایل‌های دارایی Vite: RAW و Data URI Vite Asset Files: RAW and Data URI
Vite Asset Files: Public Directory and HTML Files-فایل‌های دارایی Vite: دایرکتوری عمومی و فایل‌های HTML Vite Asset Files: Public Directory and HTML Files
CWD-CWD CWD
Vite Config File: Custom Vite Root-فایل پیکربندی Vite: ریشه سفارشی Vite Vite Config File: Custom Vite Root
Vite Config File: Custom Input and Output-فایل پیکربندی Vite: ورودی و خروجی سفارشی Vite Config File: Custom Input and Output
Vite Config File: Split CSS and Control Data URI-فایل پیکربندی Vite: جداسازی CSS و کنترل Data URI Vite Config File: Split CSS and Control Data URI
Vite Config File: Base Path-فایل پیکربندی Vite: مسیر پایه Vite Config File: Base Path

Library with Webpack & Vite-کتابخانه با Webpack و Vite Library with Webpack & Vite

Webpack Library Preparation-آماده‌سازی کتابخانه وب‌پک Webpack Library Preparation
Webpack Library Type-نوع کتابخانه وب‌پک Webpack Library Type
Webpack External Dependencies-وابستگی‌های خارجی وب‌پک Webpack External Dependencies
Vite Library: All in One-کتابخانه Vite: همه در یک Vite Library: All in One

Webpack Module Federation-فدراسیون ماژول وب‌پک Webpack Module Federation

Preparation: Lerna-آماده‌سازی: Lerna Preparation: Lerna
The "REMOTE" Project-پروژه "REMOTE" The "REMOTE" Project
The "LOCAL" Project-پروژه "LOCAL" The "LOCAL" Project
Shared Dependencies-وابستگی‌های مشترک Shared Dependencies

آموزش وب‌پک 5 و وایت: روشی نوین برای یادگیری - تفکر فعال - آخرین آپدیت

دانلود Webpack 5 and Vite: A New Way to Learn - Active Thinking

آنچه خواهید آموخت:

پیش‌نیازها:

چرا این دوره متفاوت است؟

"کشف کردن" در دل ناشناخته‌ها: رویکرد "حدس بزن و یاد بگیر"

Active Thinking: Exploring Webpack By Guessing-تفکر فعال: کاوش وب‌پک با حدس زدن Active Thinking: Exploring Webpack By Guessing

Active Thinking: Reverse Engineering the Webpack Config File-تفکر فعال: مهندسی معکوس فایل پیکربندی وب‌پک Active Thinking: Reverse Engineering the Webpack Config File

Webpack Introduction (the Traditional Approach)-مقدمه وب‌پک (رویکرد سنتی) Webpack Introduction (the Traditional Approach)

Webpack Watch & WatchOptions-وب‌پک Watch و WatchOptions Webpack Watch & WatchOptions

Webpack Dev Server-سرور توسعه وب‌پک Webpack Dev Server

Static Files-فایل‌های ایستا Static Files

Deduplication-حذف موارد تکراری Deduplication

Multiple Entry Points-نقاط ورودی متعدد Multiple Entry Points

Tree Shaking-جداسازی کد بدون استفاده (Tree Shaking) Tree Shaking

Side Effects-اثرات جانبی Side Effects

ES6 Dynamic Module Crash Course-دوره‌ی فشرده ماژول‌های پویا ES6 ES6 Dynamic Module Crash Course

Lazy Loading-بارگذاری تدریجی Lazy Loading

splitChunksPlugin-پلاگین splitChunks splitChunksPlugin

htmlWebpackPlugin-پلاگین htmlWebpackPlugin htmlWebpackPlugin

htmlWebpackPlugin: Multiple Pages-htmlWebpackPlugin: صفحات متعدد htmlWebpackPlugin: Multiple Pages

Webpack.ProvidePlugin-پلاگین Webpack.ProvidePlugin Webpack.ProvidePlugin

Webpack Asset Modules-ماژول‌های دارایی وب‌پک Webpack Asset Modules

Asset-دارایی Asset

Asset Modules Public Path-مسیر عمومی ماژول‌های دارایی Asset Modules Public Path

CSS-CSS CSS

Minimizing CSS-فشرده‌سازی CSS Minimizing CSS

On-demand CSS-CSS در صورت نیاز On-demand CSS

SASS-SASS SASS

PublicPath and Deployment-مسیر عمومی و استقرار PublicPath and Deployment

Separate Config Files-فایل‌های پیکربندی جداگانه Separate Config Files

Challenge: HTML File as Static Asset-چالش: فایل HTML به عنوان دارایی ایستا Challenge: HTML File as Static Asset

Vite-Vite Vite

Vite Introduction: Making Educated Guesses Based on Webpack Experience-مقدمه Vite: حدس‌های آگاهانه بر اساس تجربه وب‌پک Vite Introduction: Making Educated Guesses Based on Webpack Experience

Vite Lazy Loading: Proving a Hypothesis-بارگذاری تدریجی Vite: اثبات یک فرضیه Vite Lazy Loading: Proving a Hypothesis

Vite Asset Files: "File-loader"-فایل‌های دارایی Vite: "File-loader" Vite Asset Files: "File-loader"

Vite Asset Files: RAW and Data URI-فایل‌های دارایی Vite: RAW و Data URI Vite Asset Files: RAW and Data URI

Vite Asset Files: Public Directory and HTML Files-فایل‌های دارایی Vite: دایرکتوری عمومی و فایل‌های HTML Vite Asset Files: Public Directory and HTML Files

CWD-CWD CWD

Vite Config File: Custom Vite Root-فایل پیکربندی Vite: ریشه سفارشی Vite Vite Config File: Custom Vite Root

Vite Config File: Custom Input and Output-فایل پیکربندی Vite: ورودی و خروجی سفارشی Vite Config File: Custom Input and Output

Vite Config File: Split CSS and Control Data URI-فایل پیکربندی Vite: جداسازی CSS و کنترل Data URI Vite Config File: Split CSS and Control Data URI

Vite Config File: Base Path-فایل پیکربندی Vite: مسیر پایه Vite Config File: Base Path

Library with Webpack & Vite-کتابخانه با Webpack و Vite Library with Webpack & Vite

Webpack Library Preparation-آماده‌سازی کتابخانه وب‌پک Webpack Library Preparation

Webpack Library Type-نوع کتابخانه وب‌پک Webpack Library Type

Webpack External Dependencies-وابستگی‌های خارجی وب‌پک Webpack External Dependencies

Vite Library: All in One-کتابخانه Vite: همه در یک Vite Library: All in One

Webpack Module Federation-فدراسیون ماژول وب‌پک Webpack Module Federation

Preparation: Lerna-آماده‌سازی: Lerna Preparation: Lerna

The "REMOTE" Project-پروژه "REMOTE" The "REMOTE" Project

The "LOCAL" Project-پروژه "LOCAL" The "LOCAL" Project

Shared Dependencies-وابستگی‌های مشترک Shared Dependencies

نمایش نظرات

https://donyad.com/d/d0b3c3