اشکان
اشکان
خواندن ۲ دقیقه·۴ سال پیش

وب پک ۵- قسمت اول


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

اول اینکه شما در ۲ حالت (احتمالا) به وب‌پک نیاز پیدا میکنید یکی وقتی که میخواید خوب و صحیح و ماژولار کد بنویسید و در نهایت وب پک قراره این ماژول‌های تر و تمیزی که شما نوشتید رو سر هم کنه (در اصطلاح میگیم باندل Bundle کنه) و از مثلا چندین فایل جاوااسکریپ و لایبراری‌های متفرقه که استفاده کردید یک یا دو فایل خروجی بگیره و یکی هم وقتی میخواید ازش به عنوان یک Task Runner استفاده کنید مثلا توی کدتون یک یا چند لایبراری ایمپورت کردید و استفاده نشده بصورت خودکار بفهمه و اینها رو دور بریزه براتون(به این میگیم tree shaking) یا کدتون رو براتون کم حجم(میگیم مینیفای Minify کردن) و ناخوانا(میگیم آگلیفای Uglify کردن) کنه که به دست نااهل اگر افتاد خیلی ازش سر در نیاره و کلی کارهای باحال دیگه ای که کم کم راجع بهشون مینویسیم (قراره این آموزش چندین سری کوتاه باشه که گیج کننده نباشه).

وب پک میتونه از صدها فایل پروژه (سمت چپ) خروجی سمت راست رو بده
وب پک میتونه از صدها فایل پروژه (سمت چپ) خروجی سمت راست رو بده


پس اینو تا اینجا فهمیدیم که "وب پک یک ماژول باندلر و یک تسک رانر است."

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

خوب یه نکته این وسط وجود داره: شما ممکنه یک پروژه ساده داشته باشید که چندتا فایل html و جاوااسکریپت و تصویر داشته باشه یا ممکنه پروژه شما خیلی پیچیده باشه مثلا فایل‌های سه‌بعدی لود کنید یا ویدیو با فرمت‌های مختلف نشون بدید یا تصویرهایی که استفاده میکنید ممکنه هرکدوم فرمت خودشون رو داشته باشه، یا ممکنه بجای اینکه استایل‌هاتون رو inline بنویسید توی فایل css نوشته باشید یا از Sass یا Less استفاده کرده باشید. هزاران ترکیب مختلف میتونیم اسم ببریم از امکاناتی که توی یک پروژه وب ممکنه استفاده شده باشه.

آیا قراره وب پک رو که نصب میکنید همه اینها رو ساپورت کنه؟ قاعدتا نه! این اصلا با ذات استفاده از وب پک نمیخونه. قرار اینه که وب پک خودش به برنامه نویسی ماژولار کمک کنه پس خودش هم باید ماژولار باشه بنابر این شما بر اساس نوع پروژه‌ای که دارید و امکاناتی که استفاده میکنید از اکستنشن‌های وب پک استفاده میکنید.

ما ۲ جور اکستنشن داریم برای وب پک یکی loaderها هستند که کارشون خوندن فرمت‌های مختلفه مثلا اگه شما تایپ‌اسکریپت مینویسید فایل‌های ts و tsx شما لودر خودشون رو داره یا مثلا فایل css لودر خودش رو داره. هرچی که دارید استفاده میکنید باید لودرش رو نصب کنید و توی فایل تنظیمات وب پک کانفیگ کنید.

توی قسمت دوم یک پروژه ساده با وب پک میسازیم

https://virgool.io/@ashcan/%D9%88%D8%A8-%D9%BE%DA%A9-%DB%B5-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-kin4abd67mg6
webpackوب پکوب‌پکweb packbundle
فول ستک اگه آدمیزاد بود
شاید از این پست‌ها خوشتان بیاید