webpack چیست

بعد از این که در مورد جاوااسکریپت و متعلقات آن مقالات متفاوتی نوشتیم مثل جاوااسکریپت چیست، جی کوئری چیست، نود جی اس چیست و انگولار چیست خیلی از کاربران در مورد وب پک پرسیده بودند. در این مقاله میخواهیم جواب سوال webpack چیست را به صورت کامل دهیم تا با مفهموم وب پک به صورت کامل آشنا شوید. پس اگر میخواهید بدونید webpack چیست با ما همراه باشید.

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

باندلینگ چیست؟

ادغام و به هم وصل کردن تعداد زیادی فایل در جاوااسکریپت باعث می شود که مرورگر فقط یک درخواست برای دریافت کلیه فایل ها ارسال و در پاسخ، یک فایل، حاوی کلیه اسکریپت ها یا استایل های مورد نظر دریافت کند. به این کار باندلینگ می گوییم.

مشکل باندلینگ:

در فرایند باندلینگ یک نکته مهم وجود دارد، فایل ها و ماژول های جاوااسکریپت ممکن است به همدیگر وابستگی داشته باشند و همچنین طبعا تاخر و تقدم قرار گیری هم مهم است. پس ما نیاز به یک ابزار باندلینگ هوشمند داریم که بتواند این وابستگی ها را به نحو مناسبی کشف و مدیریت کند. در این راستا ابزار های متعددی مانند گرانت، گالپ، uglify و … وجود دارند که برخی از این مشکلات را حل می کنند. ما نیاز به یک ابزار کامل داریم که همه این ویژگی ها را داشته باشد. که در این موقع میتوانیم از وب پک استفاده کنیم.

webpack چیست

وب پک (webpack) یک ماژول باندلر قدرتمند برای برنامه های کاربردی مدرن جاوااسکریپت است. وقتی وب پک برنامه شما را پردازش می کند، به صورت بازگشتی، یک گراف وابستگی از هر ماژولی که برنامه شما نیاز دارد، می سازد. سپس تمام آن ماژول ها را در درون فایل های باندل های کوچکی (اکثرا یک ماژول) قرار می دهد که توسط مرورگر لود می شود.

پیش فرض‌های کار با webpack

دو پیش فرض مهم در شروع به کار با وب پک از این قرارند:

• وب پک برای نصب Asset‌‌ های سمت کلاینت شما از NPM استفاده می‌کند و انتظار دارد که شما نیز این پکیج منیجر بهره ببرید و به طور مثال از bower استفاده نکنید.
• استفاده از یک سیستم ماژولار ( اینکه از کدام یک استفاده می‌کنید مهم نیست Commonjs ، amd ، es6 و…)

نصب webpack و شروع کار

بعد جواب دادن به سوال webpack چیست به سراغ نصب webpack و شروع کار میرویم. webpack یکی از صد‌ها ماژول‌های نوشته شده‌ با استفاده از پلتفرم nodejs (مقاله: نود جی اس چیست) می‌باشد. پس اول از همه چیز در صورتیکه nodejs بر روی سیستم شما نصب نیست، آن را دریافت و نصب کنید.
قبل از شروع به کار بهتر است که یک محیط کار تمیز ( یک فولدر خالی) را آماده کنید و سپس با اجرای دستور npm init، یک بستر برای کار با npm را داشته باشیم. می‌توانید به صورت دستی نیز یک فایل package.json را اضافه کنید و گزینه‌های مدنظرتان را به آن اضافه کنید.

نکته مهم: وب پک در انجام یک وظیفه، تخصص وافری دارد و آن وظیفه نیز پردازش فایل‌های ورودی و خروجی داده شده به آن است که با استفاده از کامپوننت‌هایی که با نام loader از آن نام می‌برد، این وظیفه را انجام می‌دهد. با استفاده از این لودرها شما نتیجه‌ای را که از یک TaskRunner انتظار دارید، خواهید گرفت؛ مانند ترنسپایل کردن ماژول‌ها، بسته بندی ماژول‌ها، Minify کردن آنها، که این عمل توسط وب پک امکان انجام دارد، ترکیب فایل‌های Css با فایل‌های جاوا اسکریپت برنامه است. این کار برای تصاویر و فونت‌های برنامه نیز قابل انجام است.