آموزش وب پک 5 در سال 2023: راهنمای کامل برای مبتدیان

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

معرفی Introduction

• معرفی Introduction

• آنچه برای این دوره نیاز دارید What you need for this course

معرفی Introduction

• معرفی Introduction

• آنچه برای این دوره نیاز دارید What you need for this course

راه اندازی اولیه و یکپارچه سازی Webpack Initial Setup and Integrating Webpack

• چرا به Webpack نیاز داریم؟ Why Do We Need Webpack

• راه اندازی برنامه ما Setting Up Our Application

• Webpack را نصب کنید و آن را با NPM ادغام کنید Install Webpack And Integrate It With NPM

• نکته کوچک در مورد مخزن Github Small Note about Github Repository

• ادغام Webpack در برنامه JS ما Integrating Webpack Into Our JS Application

• پیکربندی بسته وب سفارشی Custom Webpack Configuration

راه اندازی اولیه و یکپارچه سازی Webpack Initial Setup and Integrating Webpack

• چرا به Webpack نیاز داریم؟ Why Do We Need Webpack

• راه اندازی برنامه ما Setting Up Our Application

• Webpack را نصب کنید و آن را با NPM ادغام کنید Install Webpack And Integrate It With NPM

• نکته کوچک در مورد مخزن Github Small Note about Github Repository

• ادغام Webpack در برنامه JS ما Integrating Webpack Into Our JS Application

• پیکربندی بسته وب سفارشی Custom Webpack Configuration

ماژول های دارایی Asset Modules

• مقدمه ای بر ماژول های دارایی Introduction to Asset Modules

• مدیریت تصاویر با Webpack Handling Images With Webpack

• publicPath publicPath

• نوع ماژول دارایی/داخلی Asset/inline Module Type

• نوع دارایی عمومی General Asset Type

• نوع ماژول دارایی/منبع Asset/source Module Type

ماژول های دارایی Asset Modules

• مقدمه ای بر ماژول های دارایی Introduction to Asset Modules

• مدیریت تصاویر با Webpack Handling Images With Webpack

• publicPath publicPath

• نوع ماژول دارایی/داخلی Asset/inline Module Type

• نوع دارایی عمومی General Asset Type

• نوع ماژول دارایی/منبع Asset/source Module Type

لودرها Loaders

• Webpack Loader چیست؟ What Is Webpack Loader?

• مدیریت CSS با Webpack Handling CSS With Webpack

• مدیریت SASS Handling SASS

• استفاده از آخرین ویژگی های جاوا اسکریپت با Babel Using Latest JavaScript Features With Babel

• ویژگی های آزمایشی جاوا اسکریپت Experimental JavaScript Features

لودرها Loaders

• Webpack Loader چیست؟ What Is Webpack Loader?

• مدیریت CSS با Webpack Handling CSS With Webpack

• مدیریت SASS Handling SASS

• استفاده از آخرین ویژگی های جاوا اسکریپت با Babel Using Latest JavaScript Features With Babel

• ویژگی های آزمایشی جاوا اسکریپت Experimental JavaScript Features

پلاگین ها Plugins

• افزونه Webpack چیست؟ What Is Webpack Plugin?

• کوچک سازی بسته وب بسته حاصل Minification of the Resulting Webpack Bundle

• استخراج CSS در یک بسته مجزا با افزونه mini-css-extract، قسمت 1 Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1

• استخراج CSS در یک بسته جداگانه، قسمت 2 Extracting CSS Into a Separate Bundle, Part 2

• ذخیره مرورگر Browser Caching

• نحوه پاک کردن پوشه Dist قبل از ایجاد بسته های جدید How To Clean Dist Folder Before Generating New Bundles

• تولید فایل های HTML به صورت خودکار در طول فرآیند ساخت Webpack Generating HTML Files Automatically During Webpack Build Process

• سفارشی سازی فایل های HTML تولید شده Customizing Generated HTML Files

• ادغام با Handlebars Integration with Handlebars

• افزونه های Webpack بیشتر More Webpack Plugins

پلاگین ها Plugins

• افزونه Webpack چیست؟ What Is Webpack Plugin?

• کوچک سازی بسته وب بسته حاصل Minification of the Resulting Webpack Bundle

• استخراج CSS در یک بسته مجزا با افزونه mini-css-extract، قسمت 1 Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1

• استخراج CSS در یک بسته جداگانه، قسمت 2 Extracting CSS Into a Separate Bundle, Part 2

• ذخیره مرورگر Browser Caching

• نحوه پاک کردن پوشه Dist قبل از ایجاد بسته های جدید How To Clean Dist Folder Before Generating New Bundles

• تولید فایل های HTML به صورت خودکار در طول فرآیند ساخت Webpack Generating HTML Files Automatically During Webpack Build Process

• سفارشی سازی فایل های HTML تولید شده Customizing Generated HTML Files

• ادغام با Handlebars Integration with Handlebars

• افزونه های Webpack بیشتر More Webpack Plugins

تولید در مقابل ساخت‌های توسعه Production vs Development Builds

• معرفی Introduction

• حالت Mode

• مدیریت پیکربندی Webpack برای موارد استفاده تولید و توسعه Managing Webpack Config for Production and Development Use Cases

• توسعه سریعتر با سرور توسعه دهنده webpack Faster Development with webpack dev server

• تمیز کردن کمی Cleaning Up A Bit

تولید در مقابل ساخت‌های توسعه Production vs Development Builds

• معرفی Introduction

• حالت Mode

• مدیریت پیکربندی Webpack برای موارد استفاده تولید و توسعه Managing Webpack Config for Production and Development Use Cases

• توسعه سریعتر با سرور توسعه دهنده webpack Faster Development with webpack dev server

• تمیز کردن کمی Cleaning Up A Bit

برنامه های کاربردی چند صفحه و تقسیم کد Multiple Page Applications and Code Splitting

• معرفی Introduction

• ایجاد کامپوننت KiwiImage Creating KiwiImage Component

• تقسیم کد در Webpack: چند بسته JS و CSS Code Splitting in Webpack: Multiple JS and CSS Bundles

• نحوه تولید چندین فایل HTML How To Generate Multiple HTML Files

• استخراج وابستگی های رایج در حین تقسیم کد Extracting Common Dependencies While Code Splitting

• تنظیم گزینه های سفارشی برای تقسیم کد Setting Custom Options for Code Splitting

• نحوه راه اندازی محیط توسعه برای برنامه چند صفحه How To Setup Development Environment For Multiple Page Application

برنامه های کاربردی چند صفحه و تقسیم کد Multiple Page Applications and Code Splitting

• معرفی Introduction

• ایجاد کامپوننت KiwiImage Creating KiwiImage Component

• تقسیم کد در Webpack: چند بسته JS و CSS Code Splitting in Webpack: Multiple JS and CSS Bundles

• نحوه تولید چندین فایل HTML How To Generate Multiple HTML Files

• استخراج وابستگی های رایج در حین تقسیم کد Extracting Common Dependencies While Code Splitting

• تنظیم گزینه های سفارشی برای تقسیم کد Setting Custom Options for Code Splitting

• نحوه راه اندازی محیط توسعه برای برنامه چند صفحه How To Setup Development Environment For Multiple Page Application

مخزن Github Github Repository

• نحوه استفاده از مخزن Github How To Use Github Repository

مخزن Github Github Repository

• نحوه استفاده از مخزن Github How To Use Github Repository

ادغام پک وب با Node و Express Webpack Integration With Node And Express

• معرفی Introduction

• دریافت کد برای برنامه تک صفحه Getting Code for Single Page Application

• ادغام Express در برنامه ما Integrating Express Into Our Application

• ارائه صفحات HTML از طریق Express Serving HTML Pages via Express

• مدیریت JS و CSS از طریق Express Handling JS and CSS via Express

• دریافت کد برای برنامه چند صفحه Getting Code for Multiple Page Application

• ادغام Express.js در یک برنامه چند صفحه Integrating Express.js Into A Multiple Page Application

ادغام پک وب با Node و Express Webpack Integration With Node And Express

• معرفی Introduction

• دریافت کد برای برنامه تک صفحه Getting Code for Single Page Application

• ادغام Express در برنامه ما Integrating Express Into Our Application

• ارائه صفحات HTML از طریق Express Serving HTML Pages via Express

• مدیریت JS و CSS از طریق Express Handling JS and CSS via Express

• دریافت کد برای برنامه چند صفحه Getting Code for Multiple Page Application

• ادغام Express.js در یک برنامه چند صفحه Integrating Express.js Into A Multiple Page Application

فدراسیون ماژول Module Federation

• ایجاد 2 برنامه جداگانه، قسمت 1 Creating 2 Separate Applications, Part 1

• ایجاد 2 برنامه جداگانه، قسمت 2 Creating 2 Separate Applications, Part 2

• راه اندازی فدراسیون ماژول Setting Up Module Federation

• مصرف ماژول های فدرال Consuming Federated Modules

• ماژول ها در زمان اجرا بارگذاری می شوند Modules Are Loaded At Runtime

• ایجاد Micro Frontends Creating Micro Frontends

• Micro Frontends In Action، قسمت 1 Micro Frontends In Action, Part 1

• Micro Frontends In Action، قسمت 2 Micro Frontends In Action, Part 2

• جزء نوار ناوبری Navigation Bar Component

• فدراسیون ماژول تو در تو. قسمت 1 Nested Module Federation. Part 1

• فدراسیون ماژول تو در تو. قسمت 2 Nested Module Federation. Part 2

فدراسیون ماژول Module Federation

• ایجاد 2 برنامه جداگانه، قسمت 1 Creating 2 Separate Applications, Part 1

• ایجاد 2 برنامه جداگانه، قسمت 2 Creating 2 Separate Applications, Part 2

• راه اندازی فدراسیون ماژول Setting Up Module Federation

• مصرف ماژول های فدرال Consuming Federated Modules

• ماژول ها در زمان اجرا بارگذاری می شوند Modules Are Loaded At Runtime

• ایجاد Micro Frontends Creating Micro Frontends

• Micro Frontends In Action، قسمت 1 Micro Frontends In Action, Part 1

• Micro Frontends In Action، قسمت 2 Micro Frontends In Action, Part 2

• جزء نوار ناوبری Navigation Bar Component

• فدراسیون ماژول تو در تو. قسمت 1 Nested Module Federation. Part 1

• فدراسیون ماژول تو در تو. قسمت 2 Nested Module Federation. Part 2

ادغام با جی کوئری Integration with jQuery

• دریافت کد منبع Getting the Source Code

• ادغام با جی کوئری Integration with jQuery

ادغام با جی کوئری Integration with jQuery

• دریافت کد منبع Getting the Source Code

• ادغام با جی کوئری Integration with jQuery

با استفاده از ESLint Using ESLint

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

• نکات بیشتر در مورد ESLint More hints about ESLint

با استفاده از ESLint Using ESLint

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

• نکات بیشتر در مورد ESLint More hints about ESLint

خلاصه Summary

• خلاصه Summary

• سخنرانی پاداش Bonus Lecture

خلاصه Summary

• خلاصه Summary

• سخنرانی پاداش Bonus Lecture