آموزش Webpack

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

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

اگر شما با webpack آشنایی نداشته باشید احتمالا از خودتان می‌پرسید اصلا چرا باید webpack را یاد بگیرم؟ مزیت Webpack چیست؟ قبل از به وجود آمدن دنیای مدرن وب امروزی، برنامه‌هایی که برای وب نوشته می‌شدند شکل جالبی نداشتند، چرا که مثلا 10 فایل مختلف جاوا اسکریپت را جداگانه بارگذاری می‌کردند. ممکن است بپرسید چرا؟ اگر شما هم در زمینه وب کار کرده باشید می‌دانید که توسعه وب در یک فایل کار بسیار سختی است و بسیار راحت‌تر است که کد‌های خود را به صورت منطقی جدا کرده و در فایل‌های جداگانه قرار دهیم. مشکل آنجاست که برخی از این فایل‌ها به برخی دیگر از این فایل‌ها وابسته هستند، بنابراین اگر ترتیب بارگذاری آن‌ها را رعایت نکنیم با مشکل مواجه خواهیم شد. از طرف دیگر اگر بخواهیم 10 فایل مختلف جاوا اسکریپت یا CSS را درون index.html بارگذاری کنیم تعداد درخواست‌ها به سرور به شکل وحشتناکی بالا می‌رود بنابراین نمی‌توانیم این فایل‌ها را همینگونه رها کنیم.

بعدها برای حل این مشکل ابزارهایی مانند grunt و gulp به وجود آمدند که به ما کمک می‌کردند تمام فایل‌های جاوا اسکریپت خود را به صورت خودکار در یک فایل ادغام کنیم تا دیگر مشکلات قبل را نداشته باشیم اما این ابزارها هم ناقص بودند چرا که توانایی تشخیص dependency یا وابستگی‌ها را ندارند. یعنی نمی‌توانند بفهمند چه فایل‌هایی و چه کدهایی به یکدیگر وابسته هستند. به همین دلیل برای حل این مشکل یک ابزار دیگر به نام require.js به میان آمد که تا حد قابل قبولی کار می‌کند اما از نظر قدرت و امکانات به هیچ عنوان به پای Webpack نمی‌رسد.

webpack یک static module bundler برای برنامه‌های جاوا اسکریپتی مدرن است. یعنی کدهای شما را آنالیز و تمام ماژول‌ها و وابستگی‌های آن را لیست می‌کند. سپس با توجه به این وابستگی‌ها، تمام کدهای شما را در یک فایل واحد برمی‌گرداند. شما می‌توانید تفاوت سورس کد یک پروژه را با Webpack و بدون webpack مشاهده کنید:

محیط برنامه ما بدون Webpack (بدون ادغام دستی فایل ها):

محیط برنامه ما با webpack (ادغام خودکار فایل ها):

متوجه قدرت webpack شدید؟

درباره سری آموزش Webpack روکسو

این دوره نیاز به هیچ دانش قبلی نسبت به webpack ندارد و آموزش webpack را از صفر تا صد شروع می‌کنیم. تنها موردی که باید با آن آشنایی نسبی داشته باشید زبان جاوا اسکریپت است. در این دوره می‌خواهیم به آموزش webpack به صورت عملی می‌پردازیم، بنابراین ابتدا یک برنامه بسیار بسیار ساده جاوا اسکریپتی می‌سازیم که از دو فایل جاوا اسکریپت تشکیل شده‌ است و به عنوان مدل ما کار می‌کند. سپس انواع و اقسام قابلیت‌های webpack را روی همین برنامه به شما نشان خواهیم داد. در واقع ابتدا یک فایل configuration بسیار ساده برای webpack می‌سازیم. در مرحله بعد با loader ها آشنا می‌شویم که به ما کمک می‌کنند فایل‌های دیگری مانند تصاویر، CSS و ... را با webpack پیاده‌سازی کنیم. سپس با pluginها آشنا خواهیم شد و قابلیت‌هایی نظیر ادغام تمام فایل‌های CSS در یک فایل جداگانه را بررسی خواهیم کرد. در مرحله بعد به تفاوت‌های بین development (توسعه) و production (مرحله اجرایی سایت) می‌پردازیم و در مورد انواع بهینه‌سازی‌ها صحبت خواهیم کرد. در نهایت در رابطه با multipage applicationها (برنامه‌های چند صفحه‌ای - در مقابل SPAها) و تقسیم کد صحبت خواهیم کرد. البته در قسمت آخر یک مثال با فریم‌ورک express هم خواهیم داشت.

برای همراهی با این آموزش به چه چیزهایی نیاز دارم؟

در قدم اول باید دانش قابل قبولی از زبان جاوا اسکریپت داشته باشید چرا که اکثر پروژه‌های ما حول محور این زبان می‌چرخد. همچنین از شما انتظار می رود که با زبان HTML نیز آشنا باشید. بنابراین زبان جاوا اسکریپت و HTML از ضروریات این دوره هستند. از آنجایی که این دوره مخصوص افراد تازه‌وارد به دنیای برنامه‌نویسی نیست از شما انتظار دارم که روش کار با مرورگرها را یاد داشته باشید (ترجیحا کروم) و یک ویرایشگر کد برای کدنویسی نصب کرده باشید (معمولا Visual Studio Code یا phpstorm یا Atom و ...).

اگر به تازگی وارد دنیای برنامه‌نویسی شده‌اید پیشنهاد می‌کنم ابتدا با مسائل پایه‌ای آشنا شوید و پس از درک بدیهیات به این دوره برگردید. همچنین از آنجایی که قرار است پکیج‌های مختلفی را با استفاده از npm نصب کنیم و همچنین فایل‌های پیکربندی Webpack از دستورات nodejs استفاده می‌کنند باید آخرین نسخه Nodejs را نصب کرده باشید.

در نهایت باید آمادگی لازم برای کار با ترمینال را داشته باشید. منظور از آمادگی، یاد داشتن نیست بلکه آمادگی برای یاد گرفتن است. همچنین مهم نیست از چه ترمینالی استفاده می‌کنید (چه git bash، چه command prompt خود ویندوز و چه نرم افزارهای مختلف دیگر). اگر از ویندوز استفاده می‌کنید، پیشنهاد ما به شما استفاده از ترمینال خود Visual Studio Code است (که از همان CMD ویندوز استفاده می‌کند) یا حتی بهتر است که از cmder یا git bash استفاده کنید (آن‌ها را نصب کرده و سپس از ترمینال vscode استفاده کنید) اما هر گزینه دیگری که دوست دارید نیز کار می‌کند و الزامی به استفاده از این موارد نیست.

در قسمت پائین، درس‌های این سری آموزشی را مشاهده کنید.