آموزش Webpack 2: The Complete Developer's Guide

Webpack 2: The Complete Developer's Guide

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با استقرار برنامه های وب پشتیبانی شده توسط Babel، تقسیم کد و ماژول های ES2015، Webpack 2 را استاد کنید. درک هدف Webpack در یک برنامه وب مدرن ساخت پروژه های دیگ بخار سفارشی برای خدمت ES2015 جاوا اسکریپت استقرار پروژه های مبتنی بر Webpack در AWS، Heroku و موارد دیگر بهبود عملکرد برنامه های وب با استفاده از اکوسیستم افزونه های Webpack. سازماندهی کد را با استفاده از ES2015 بهبود بخشید. ماژول های JS پیش نیازها: دانش پایه جاوا اسکریپت در مک یا رایانه شخصی

Webpack ابزار ساخت برتر برای برنامه‌های React و Angular 2 است.

استقرار؟ تحت پوشش. بهینه سازی عملکرد؟ گرفتیم. ایجاد دیگ بخار سفارشی؟ اینجاست!

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

این دوره شما را به سرعت راه اندازی می کند و دانش اصلی مورد نیاز برای درک عمیق و ساخت پروژه های مبتنی بر Webpack را به شما آموزش می دهد.

از بارگیری بسته‌های دیگ بخاری بدون اطلاع از نحوه تغییر آنها خسته شده‌اید؟

React و Angular 2 شاهد شکوفایی بسته‌های دیگ بخاری مستقل بوده‌اند، اما با پیکربندی‌های متراکمی عرضه می‌شوند که تغییر آن‌ها را به چالش می‌کشد. با تجربه ای که در این دوره کسب می کنید، می توانید پروژه های خود را مطابق با نیازهای خاص خود سفارشی کنید.

مطالب بسیار زیاد!

  • تفاوت بین سیستم های ماژول ES2015 و CommonJS را بیاموزید
  • کد ES2015 را با Babel Loader Webpack بارگیری کنید
  • از Webpack برای تغییر اندازه و فشرده سازی خودکار تصاویر برای زمان بارگذاری بهینه استفاده کنید
  • برای کاهش چشمگیر زمان بارگذاری، تقسیم کد را اجرا کنید
  • یاد بگیرید که پروژه React خود را به گونه ای تنظیم کنید که به طور کامل با Webpack کار کند
  • نسخه اصلی برنامه شما برای کاهش مقدار کد دانلود شده توسط کاربران
  • برنامه خود را در AWS، Heroku، Github Pages یا Surge مستقر کنید


آموزش بسته وب ممکن است گیج کننده باشد، اما پس از گذراندن این دوره خواهید فهمید که این ابزاری است که برای تسلط بر آن فقط به کمی تمرکز نیاز دارد. هنگامی که توضیحات من در مورد Webpack را بشنوید، متوجه خواهید شد که هر مفهومی سرراست است و فقط به کوچکترین لمس صبر نیاز دارد تا درک کنید. اینجا هیچ پرکننده ای وجود ندارد، فقط بر روی مهمترین جنبه های Webpack تمرکز لیزری دارید.

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


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

نحوه استفاده از این دوره How to Use This Course

  • از اینجا شروع کنید! Start Here!

  • منابع دوره Course Resources

  • به انجمن ما بپیوندید! Join Our Community!

نحوه استفاده از این دوره How to Use This Course

  • از اینجا شروع کنید! Start Here!

  • منابع دوره Course Resources

  • به انجمن ما بپیوندید! Join Our Community!

Webpack چه کاری انجام می دهد؟ What Does Webpack Do?

  • چرا از ابزارهای ساخت استفاده می کنیم؟ Why Do We Use Build Tools?

  • ماژول های جاوا اسکریپت Javascript Modules

  • هدف Webpack The Purpose of Webpack

  • درک خود را آزمایش کنید Test Your Understanding

  • بسته وب در عمل Webpack in Action

  • نحو ماژول جاوا اسکریپت Javascript Module Syntax

  • پیوند دادن فایل ها با CommonJS Linking Files with CommonJS

  • نصب و پیکربندی Webpack Webpack Installation and Configuration

  • اطلاعات بیشتر در مورد پیکربندی Webpack More on Webpack Configuration

  • در حال اجرا وب پک Running Webpack

  • فایل Bundle.js The Bundle.js File

  • اجرای برنامه Running the App

Webpack چه کاری انجام می دهد؟ What Does Webpack Do?

  • چرا از ابزارهای ساخت استفاده می کنیم؟ Why Do We Use Build Tools?

  • ماژول های جاوا اسکریپت Javascript Modules

  • هدف Webpack The Purpose of Webpack

  • درک خود را آزمایش کنید Test Your Understanding

  • بسته وب در عمل Webpack in Action

  • نحو ماژول جاوا اسکریپت Javascript Module Syntax

  • پیوند دادن فایل ها با CommonJS Linking Files with CommonJS

  • نصب و پیکربندی Webpack Webpack Installation and Configuration

  • اطلاعات بیشتر در مورد پیکربندی Webpack More on Webpack Configuration

  • در حال اجرا وب پک Running Webpack

  • فایل Bundle.js The Bundle.js File

  • اجرای برنامه Running the App

رسیدگی به دارایی های پروژه Handling Project Assets

  • آشنایی با لودرها Introduction to Loaders

  • راه اندازی Babel برای ES2015 Babel Setup for ES2015

  • پیکربندی بابل Babel Configuration

  • Refactor به ماژول های ES2015 Refactor to ES2015 Modules

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

  • لودرهای سبک و CSS The Style and CSS Loaders

  • لودرها مشکل هستند! Loaders are Tricky!

  • افزونه Extract Text The Extract Text Plugin

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

  • فشرده سازی خودکار تصویر Automatic Image Compression

  • مسیرهای عمومی Public Paths

رسیدگی به دارایی های پروژه Handling Project Assets

  • آشنایی با لودرها Introduction to Loaders

  • راه اندازی Babel برای ES2015 Babel Setup for ES2015

  • پیکربندی بابل Babel Configuration

  • Refactor به ماژول های ES2015 Refactor to ES2015 Modules

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

  • لودرهای سبک و CSS The Style and CSS Loaders

  • لودرها مشکل هستند! Loaders are Tricky!

  • افزونه Extract Text The Extract Text Plugin

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

  • فشرده سازی خودکار تصویر Automatic Image Compression

  • مسیرهای عمومی Public Paths

ساختمان برای عملکرد با Webpack Building for Performance with Webpack

  • مقدمه ای بر تقسیم کد Introduction to Code Splitting

  • تقسیم کد در عمل Codesplitting in Practice

  • در حال بارگیری کد بر اساس تقاضا On Demand Code Loading

  • تماس های واردات سیستم System Import Calls

ساختمان برای عملکرد با Webpack Building for Performance with Webpack

  • مقدمه ای بر تقسیم کد Introduction to Code Splitting

  • تقسیم کد در عمل Codesplitting in Practice

  • در حال بارگیری کد بر اساس تقاضا On Demand Code Loading

  • تماس های واردات سیستم System Import Calls

استفاده از Webpack در یک پروژه واقعی Applying Webpack to a Real Project

  • پروژه دنیای واقعی A Real World Project

  • راه اندازی Babel Setting Up Babel

  • حداقل پیکربندی بسته وب Minimum Webpack Config

  • ذخیره دارایی فروشنده Vendor Asset Caching

  • اطلاعات بیشتر در مورد ذخیره سازی فروشنده More on Vendor Caching

  • Refactoring برای تقسیم فروشنده Refactoring for Vendor Splitting

  • اثر تقسیم کد Effect of Code Splitting

  • عیب یابی بسته های فروشنده Troubleshooting Vendor Bundles

  • هش کردن تکه برای شکستن حافظه پنهان Chunk Hashing for Cache Busting

  • جمع بندی مخرب مخرب Cache Busting Wrapup

  • تمیز کردن فایل های پروژه Cleaning Project Files

استفاده از Webpack در یک پروژه واقعی Applying Webpack to a Real Project

  • پروژه دنیای واقعی A Real World Project

  • راه اندازی Babel Setting Up Babel

  • حداقل پیکربندی بسته وب Minimum Webpack Config

  • ذخیره دارایی فروشنده Vendor Asset Caching

  • اطلاعات بیشتر در مورد ذخیره سازی فروشنده More on Vendor Caching

  • Refactoring برای تقسیم فروشنده Refactoring for Vendor Splitting

  • اثر تقسیم کد Effect of Code Splitting

  • عیب یابی بسته های فروشنده Troubleshooting Vendor Bundles

  • هش کردن تکه برای شکستن حافظه پنهان Chunk Hashing for Cache Busting

  • جمع بندی مخرب مخرب Cache Busting Wrapup

  • تمیز کردن فایل های پروژه Cleaning Project Files

سرور توسعه دهنده Webpack Webpack Dev Server

  • مقدمه ای بر Webpack Dev Server Introduction to Webpack Dev Server

  • Gotchas با Webpack Dev Server Gotchas with Webpack Dev Server

سرور توسعه دهنده Webpack Webpack Dev Server

  • مقدمه ای بر Webpack Dev Server Introduction to Webpack Dev Server

  • Gotchas با Webpack Dev Server Gotchas with Webpack Dev Server

موضوعات خاص React React-Specific Topics

  • React Router با Codesplitting React Router with Codesplitting

  • مسیرهای ساده با React Router Codesplitting Plain Routes with React Router Codesplitting

موضوعات خاص React React-Specific Topics

  • React Router با Codesplitting React Router with Codesplitting

  • مسیرهای ساده با React Router Codesplitting Plain Routes with React Router Codesplitting

استقرار مبتنی بر وب پک برای سایت های استاتیک Webpack-Based Deployment for Static Sites

  • گزینه های استقرار Deployment Options

  • آماده سازی تولید Getting Production Ready

  • استقرار با Surge (ساده ترین!) Deployment with Surge (Easiest!)

  • استقرار با صفحات Github Deployment with Github Pages

  • استقرار با AWS S3 Deployment with AWS S3

استقرار مبتنی بر وب پک برای سایت های استاتیک Webpack-Based Deployment for Static Sites

  • گزینه های استقرار Deployment Options

  • آماده سازی تولید Getting Production Ready

  • استقرار با Surge (ساده ترین!) Deployment with Surge (Easiest!)

  • استقرار با صفحات Github Deployment with Github Pages

  • استقرار با AWS S3 Deployment with AWS S3

استقرار مبتنی بر وب پک برای سایت های پویا Webpack-Based Deployment for Dynamic Sites

  • استقرار سرورها Deployment of Servers

  • یکپارچه سازی Node و Webpack Node and Webpack Integration

  • Webpack Middleware در حال توسعه Webpack Middleware in Development

  • Webpack Middleware در حال تولید Webpack Middleware in Production

  • اعزام به هروکو Deployment to Heroku

  • استقرار در AWS Deployment to AWS

  • اطلاعات بیشتر در مورد استقرار AWS More on AWS Deployment

استقرار مبتنی بر وب پک برای سایت های پویا Webpack-Based Deployment for Dynamic Sites

  • استقرار سرورها Deployment of Servers

  • یکپارچه سازی Node و Webpack Node and Webpack Integration

  • Webpack Middleware در حال توسعه Webpack Middleware in Development

  • Webpack Middleware در حال تولید Webpack Middleware in Production

  • اعزام به هروکو Deployment to Heroku

  • استقرار در AWS Deployment to AWS

  • اطلاعات بیشتر در مورد استقرار AWS More on AWS Deployment

موارد اضافی Extras

  • جایزه! Bonus!

موارد اضافی Extras

  • جایزه! Bonus!

نمایش نظرات

آموزش Webpack 2: The Complete Developer's Guide
جزییات دوره
5.5 hours
57
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
25,387
4.8 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Stephen Grider Stephen Grider

معمار مهندسی