درک قدرت Webpack

شنبه ۱۴ مهر ۹۷ توسط محمدسینا مرادی

زمانی که شروع به یادگیری جاوااسکریپت کردم، توجه زیادی به Webpack نداشتم. در ابتدا آن را به عنوان "bundler" مشابه چیزی که ما در Ruby استفاده می کردیم معرفی کردند. من آن را به عنوان یک ابزار درک کردم که کد ها و هر dependency و پکیجی را در یک فایل bundle قابل انتقال تبدیل می کند. اگر چه من فکر نمی کنم که اختلاف زیادی با درک اولیه من با آن وجود داشته باشد، من می خواستم فرصتی پیدا کنم که عمیق تر وارد این بحث شوم و بفهمم که زیر پرده چه چیز هایی وجود دارد. اینجا من از توضیحات خود وبسایت Webpack تصویری آماده کرده ام:

درخواست سوال این است، dependency graph چیست؟ این در واقع همان چیزی است که به نظرتان می رسد. هر فایلی که بر روی دیگری توسعه داده شود این طور گفته می شود که یک dependency بر روی آن فایل دارد. به عنوان یک مبتدی، تجسم این dependency ها و کشیدن آنها کمک فوق العاده ای می کند. اینجا یک مثال را آماده کرده ام که به چگونگی این کار را شرح می دهد:

 

Webpack این dependency graph ها را با یک entry point شروع به ساختن می کند، پیش فرض آن در src/index می باشد، اما شما همچنین می توانید این entry point را خودتان به عنوان entry point های چندگانه نیز پیکربندی کنید. این باید جایی که اولین بارگذاری و logic اپلیکیشن شما قرار دارد باشد. وقتی که Webpack بر روی آن entry point حرکت می کند، این ابزار ماژول های اضافه ای بر پایه آنچه entry point مستقیما توسعه داده است با استفاده از چیز هایی مانند ساختار های "import" و به طور غیر مستقیم می سازد. در نهایت نیز نتیجه به صورت درختی از dependency ها مشابه تصویر بالا می باشد. این مقاله نیز به صورت خلاصه شما را در درک این موضوع راهنمایی می کند:

Webpack ابزاری است که در آن می توانید از یک پیکربندی برای فهماندن builder استفاده کنید تا مشخص کنید که چیز های خاص در نظر شما چگونه باید بارگیری شوند. شما به Webpack توضیح می دهید که چگونه فایل های *.js را بارگیری یا چگونه با فایل هایی مانند .scss یا... رفتار کند. سپس زمانی که شما آن را اجرا کنید، Webpack به درون entry point شما می رود و درون برنامه شما بالا و پایین می پرد و دقیقا چیزی که نیاز دارد و در جایی که نیاز به ترتیب آن دارد و هر قطعه ای که روی آن توسعه داده شده است را شکل دهی می کند. بعدا نیز تا جایی که امکان دارد bundle هایی را بهینه و سایزشان را کوچک می کند و شما نیز بعدا از آن به عنوان script در اپلیکیشن تان استفاده می نمایید.

 وقتی که برنامه های تان بزرگتر و بهتر شوند، ممکن است نیاز پیدا کنید به اندازه نیازتان در پیکربندی Webpack تغییراتی ایجاد کنید، اما نترسید - Webpack کاملا قابل شخصی سازی است! این یک ابزار فوق العاده قدتمند می باشد که می تواند فراتر از کار هایی مانند ساختن ماژول ها را انجام دهد، اما برای پایبند ماندن به اهداف این وبسایت من بیشتر از این جلو نمی روم. 

با بهینه سازی همه فایل های تان و asset های ایستا (استایل شیت ها، فونت ها و تصاویر) Webpack به شما اجازه می دهد بر روی ساختن front end وبسایتتان به جای نگرانی درباره طیف وسیعی از پردازش وظایفی که شاید اصلا علاقه ای به سفارشی سازی آنها نداشته باشید متمرکز شوید. اینها شامل compilation، concatenation، minification، compression و مجموعه ای از پردازش هایی که احتمالا اگر در جاوااسکریپت جدید می بودید توجه زیادی به آنها می کردید. برای پیشرفته تر شدن، Webpack هنوز به شما گزینه هایی برای سفارشی سازی به مقداری که شما دوست دارید را می دهد. همانطور که گفتم، واقعا این ابزار قدرتمند است.
مزایای Webpack در سازگاری آن با بیشتر اپلیکیشن های بزرگ است اما با راحتی استفاده از آن و ساختن تنظیمات به سادگی هر چه بیشتر شما را برای تلاش به یادگیری جاوااسکریپت سوق می دهد. این شاید باعث کندی شما در ابتدا شود، اما وقتی که برنامه های شما به رشد شان ادامه دهند، مزیت Webpack به طور افزایشی بالا می رود. این باعث تقسیم کد ها به صورت ساده تری می شود، شما می توانید کنترل بسیار کاملی بر روی asset های ایستایی که در حال پردازش هستند داشته باشید، این توسعه محصولات پایدار را ترویج می کند و در نهایت نیز باعث افزایش سرعت وبسایتتان می شود.
 
بابت مطالعه این مقاله از شما متشکرم، امیدوارم برای تان مفید واقع شده باشد.

کلیدواژه: JavaScript جاوااسکریپت وب پک Webpack

منابع: medium.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.
مولف:
محمدسینا مرادی
عضو تیم تولید محتوای آرکادمی
مشاهده‌ی پروفایل
آمار و مشخصات:
event
جمعه ۱۳ مهر ۹۷
public
arcademy.ir/+a334
favorite
۳ پسند
comment
۰ دیدگاه
group
۱۷۲ بازدیدکننده
visibility
۲۳۱ بازدید
رده های این مقاله: