آموزش Webpack — مجموعه مقالات مجله فرادرس

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

مقالات آموزش Webpack در مجله فرادرس

ما در مجله فرادرس در طی چند مقاله به معرفی امکانات و قابلیت‌های وب‌پک پرداخته‌ایم. فهرست این مقالات را می‌توانید در ادامه ملاحظه کنید.

• آموزش جامع Webpack (بخش اول) — از صفر تا صد

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

این نخستین بخش از سری مقالات آموزش جامع Webpack است که کتابخانه Webpack و هر آن چه به آن مربوط است را معرفی می‌کند. هدف این مقاله آن است که خواننده را به ساده‌ترین روش ممکن با این ابزار آشنا کند. در ابتدا اندکی از تاریخچه این ابزار مرور شده است تا خواننده به عنوان یک توسعه‌دهنده فرانت‌اند با روند شکل‌گیری آن آشنا شود و بداند که چگونه به این نقطه رسیده است. ابزارهای این چنینی موجب استقلال توسعه‌دهنده می‌شوند و همچنین باعث می‌شوند به عنوان مهندسان واقعی حرفی برای گفتن داشته باشند.

• آموزش جامع Webpack (بخش دوم: آشنایی مقدماتی) — از صفر تا صد

در این بخش از سری مقالات آموزش جامع Webpack با برخی مبانی این ابزار مهم جاوا اسکریپت آشنا می‌شویم. این موارد شامل روش آغاز یک پروژه، قراردادهای سنتی پیکربندی پروژه، تفکیک ماژول در عمل و راه‌اندازی اسکریپت‌های NPM می‌شوند.

• آموزش جامع Webpack (بخش سوم: فایل پیکربندی و سرور توسعه محلی) — از صفر تا صد

در این بخش از سری مقالات آموزش وب پک، نخستین فایل پیکربندی را می‌سازیم، با روش استفاده از loader آشنا می‌شویم و یک سرور توسعه محلی را راه‌اندازی می‌کنیم.

• آموزش جامع Webpack (بخش چهارم: ماژول‌ها در وب پک) — از صفر تا صد

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

• آموزش جامع Webpack (بخش پنجم: ایمپورت دینامیک و افراز کد) — از صفر تا صد

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

• آموزش جامع Webpack (بخش ششم و پایانی: React Router) — از صفر تا صد

در این بخش با روش اضافه کردن پشتیبانی JSX روی Babel آشنا می‌شویم. از آنجا که وظیفه transpile کردن بر عهده Weback نیست و Babel این کار را انجام می‌دهد، باید کاری کنیم که بتواند JSX را بخواند و transpile کند.

سخن پایانی

Webpack جدیدترین و پیشرفته‌ترین ابزار توسعه فرانت‌اند محسوب می‌شود. این ابزار ماژول‌ساز همراه با اغلب گردش کارهای مدرن فرانت‌اند از قبیل Babel ،ReactJS و CommonJS عملکرد مناسبی دارد. با این حال این ابزار می‌تواند همه فایل‌های فرانت‌اند مانند HTML ،CSS و حتی تصاویر را نیز بسته‌بندی کند؛ Webpack موجب می‌شود که کنترل بیشتری روی تعداد درخواست‌های HTTP داشته باشید. همچنین امکان مصرف راحت‌تر پکیج‌ها از npm را فراهم ساخته است.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های جاوا اسکریپت
• آموزش JavaScript ES6 (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• ساخت اپلیکیشن های مدرن با Webpack — به زبان ساده
• آموزش جامع Webpack (بخش اول) — از صفر تا صد

==