آموزش Webpack

وب پک یک ابزار قدرتمند bundle کردن فایل‌های پروژه‌های جاوا اسکریپتی است که این روز‌ها بسیار محبوب شده و در کتابخانه‌ها و فریمورک‌های زیادی از آن استفاده می‌شود. اگر شما قصد دارید در جاوااسکریپت حرفه‌ای شوید بدون شک باید کار با این ابزار را فرابگیرید. در دوره آموزش وب پک (Webpack) ما سعی می‌کنیم این ابزار را به شکل دقیقی به شما آموزش دهیم.

وب پک (Webpack) چیست؟

جاوااسکریپت در کنار HTML و CSS جز سه اصل طراحی وب به حساب می‌آید. با استفاده از جاوا‌اسکریپت می‌توان DOM مربوط به HTML را تغییر داد و یا به اصطلاح صفحات را پویا کرد.

وقتی که شما از جاوا‌اسکریپت برای ساخت وبسایت خود استفاده ‌می‌کنید باید فایل‌ها و assetهای زیادی مثل تصاویر، فونت‌ها و استایل و... را در پروژه جاوااسکریپتی خودتان مدیریت کنید.

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

برای حل این موضوع، باید از ابزاری با عنوان bundler استفاده کرد. با پیاده‌سازی عملیات bundler ما می‌توانیم تعداد زیادی فایل و ماژول جاوااسکریپتی را با هم ادغام کنیم تا در نهایت فقط یک فایل جاوااسکریپتی داشته باشید.

البته در دوره آموزش وب‌پک دقیقا مشکلی که در صورت استفاده نکردن از bundle‌ها برای پروژه‌های شما پیش می‌آید را به شما نمایش می‌دهیم.

در یک پروژه جاوااسکریپتی ممکن است برای افزایش خوانایی کدها ما در فایل‌های متفاوتی کد بنویسیم. اگر از ابزاری برای bundle کردن این کدها استفاده نکنیم باید فایل‌های مختلف را به ترتیب در سند HTML فراخوانی کنیم که این موضوع می‌تواند شما را دچار مشکلات اساسی کنند. چون با اشتباه لود کردن و یا لود نشدن یکی از فایل‌ها ممکن است کل پروژه شما با ارور مواجه شود.

در کنار این موضوع ماژول‌بندی کردن کد‌های جاوااسکریپت بسیار می‌تواند کاربردی باشد. ما با استفاده از وب پک می‌توانیم کدهای جاوااسکریپت را به شکل ماژول بنویسیم و در نهایت یک فایل خروجی از Webpack برای لود شدن در صفحه وب دریافت کنیم.

چرا وب پک (Webpack)

مانند بخش‌های دیگر از دنیای توسعه وب، به شکل کلی یک استاندارد یا ابزار برای انجام یک کار وجود ندارد. برای مثال شما یک زبان برنامه‌نویسی Back-End خاص ندارید. در حال حاضر برای bundle کردن پروژه‌ها هم به همین شکل است، شما می‌توانید از بین Webpack، Gulp، Browserify، NPM scripts، Grunt و یا ده‌ها مورد مشابه دیگر یکی را انتخاب کنید.

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

قبل از اینکه آموزش وب پک را شروع کنید می‌توانید در اینجا نقطه قوت و ضعف را از وب‌پک مشاهده کنید تا بتوانید براساس آن انتخاب‌تان را به درستی انجام دهید:

نقاط قوت:

• بهترین ابزار برای کار با اپلیکیشن‌های تک صفحه‌ای
• قابلیت کار با هر دو سینتکس ماژول import و require()
• قابلیت بسیار پیشرفته برای code splitting
• قابلیت Hot Reload برای توسعه سریع در فریمورک‌هایی مانند ری‌اکت، ویوجی‌اس و موارد مشابه.
• محبوبترین ابزار ساخت در سال ۲۰۱۶.

نقاط ضعف:

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

پیش‌نیاز آموزش وب پک چیست؟

شما قبل از اینکه شروع به آموزش وب پک کنید باید جاوااسکریپت را به خوبی بلد باشید. هماهنطور که در بالا اشاره کرده‌ایم وب پک یک ابزار bundle کدهای جاوااسکریپتی است.

اگر هنوز جاوااسکریپت را یاد نگرفته‌اید می‌توانید از صفحه آموزش جاوا اسکریپت قدم به قدم با جاوااسکریپت آشنا شوید و بعد شروع به آموزش Webpack کنید.

آموزش وب پک ویژه چه کسانی هست؟

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

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