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



تعداد بازدید ها:
0

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

مقالات آموزشی

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

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

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

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

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

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

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

سخن پایانی

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

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

==

به عنوان حامی، استارتاپ، محصول و خدمات خود را در انتهای مطالب مرتبط مجله فرادرس معرفی کنید.

telegram
twitter