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

پیش نیازهای دوره آموزش webpack

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

دوره آموزش webpack مناسب چه افرادی است؟

• برنامه نویسان و توسعه دهندگان وبسایت ها
• توسعه دهندگان فرانت اند که قصد ارتقاء دانش خود را دارند
• برنامه نویسان جاوا اسکریپت که قصد ماژولار کردن فایل های جاوا اسکریپت را دارند
• علاقه مندان به یادگیری کار با سیستم های ساخت یا همان Script Builder
• و سایر کاربران علاقه مند به یادگیری برنامه نویسی سایت

سرفصل های دوره آموزش webpack

• webpack چیست؟
• شیوه ایجاد javascript modules
• آموزش کار با ES Modules
• طریقه نصب webpack
• کار با تنظیمات webpack
• بررسی خروجی webpack
• آشنایی با loader
• ایجاد فایل Module
• طریقه load css
• شیوه load sass
• load Image, font, jQuery and bootstrap
• تست روی سرور
• آشنایی با babel
• پیاده سازی babel loader
• استخراج کد های css
• مدیریت کش مرورگر
• ایجاد خودکار MTML
• ESLint plugin
• فایل config
• code splitting
• آشنایی با federation modules

وب پک یا Webpack چیست؟

Webpack یک باندلر قدرتمند برای پروژه های جاوااسکریپتی می باشد که از محبوبیت زیادی در بین برنامه نویسان برخوردار است. جاوااسکریپت در کنار HTML و CSS از اجزای اصلی برنامه نویسی فرانت است. هنگام استفاده از جاوااسکریپت در پروژه ها شما باید فایل های زیادی شامل تصاویر، استایل ها، فونت ها و … را مدیریت کنید. برای تعداد کم شاید متوجه اهمیت موضوع نشوید اما کار زمانی سخت می شود که تعداد این فایل ها زیاد شده و وبسایت نیازمند توسعه باشد. در آموزش webpack تمامی این موارد مورد بررسی و بحث قرار خواهند گرفت.

معرفی ویژگی‌ و کاربردهای Webpack

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

مزایا و معایب Webpack

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

مزایای استفاده از Webpack

• ابزاری حرفه ای برای کار با وب اپلیکیشن های Single Page
• امکان استفاده از هر دو سینتکس ماژول import و require()
• در اختیار گذاشتن قابلیت حرفه ای برای code splitting
• ویژگی Hot Reload در جهت توسعه سریع برای فریمورک‌های React، ویوجی‌اس و سایر موارد مشابه
• تبدیل شدن به محبوب ترین ابزار ساخت در سال 2016

معایب استفاده از Webpack

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

چرا وب پک (Webpack) ؟

بیایید فرض کنیم چیزی به عنوان وب پک وجود ندارد. ما برای اضافه کردن هر ویژگی به سایت خود باید یک لینک جدید از فایل جاوا اسکریپتی خود را به صفحه اضافه کنیم. چه اتفاقی خواهد افتاد؟ ممکن از ده ها لینک به صفحه ما اضافه شده و کد نوشته شده را شلوغ کنند. شلوغی کد به کنار؛ فرض کنید بنا به درخواست کارفرما قصد ارتقا و بروزرسانی وبسایت را داریم. چگونه باید بخشی را بدون از دست دادن سایر بخش ها بروزرسانی کنیم؟ وابستگی در کدهای ما غوغا میکند و دست ما بسته خواهد بود.

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

چنانچه هرگونه انتقاد، پیشنهاد و یا سوالی در مورد دوره آموزش webpack دارید میتوانید در ادامه همین صفحه از بخش دیدگاه‌ها با ما درمیان گذاشته و یا از بخش مشاوره رایگان دانشجویار استفاده کنید