سلام اشکان هستم و در ادامه سری آموزشی وب پک ۵ میخوایم در مورد نوشتن فایل کانفیگ صحبت کنیم مثل همیشه کد‌های مربوط به هر قسمت رو میتونید از اینجا پیدا کنید کافیه که branch مربوط به هر قسمت (این قسمت 03) رو انتخاب کنید و کلون یا دانلود کنید.
از نسخه ۴ وب پک، الزام استفاده از فایل کانفیگ برداشته شد و همونطور که توی قسمت قبل دیدید ما بدون هیچ فایل کانفیگی تونستیم با اجرای دستور webpack کدهامون رو اصطلاحا ترنسپایل کنیم اما خوب تنظیمات پیشفرض وب پک علاوه بر اینکه در ۹۰٪ مواقع کافی نیستند، محدودیت خودشون رو هم دارند مثلا شما رو محدود میکنند که حتما فایلهای ترنسپایل شده توی یک فولدر به نام dist ذخیره بشن و فایل باندل رو حتما main.js اسم گذاری میکنه یا فایل ورودی شما باید حتما اسمش index.js و توی یک پوشه به نام src باشه.
توی این قسمت نمیخوایم کار عجیب و غریبی بکنیم چون برنامه این نیست که گیج بشیم فعلا آروم آروم میخوایم عملکرد وب پک رو کشف کنیم پس یک فایل کانفیگ ساده مینویسیم که همین‌ها رو بتونیم کاستومایز کنیم بعدا شروع میکنیم به شاخ و برگ دادن به فایل کانفیگمون.
توی root پروژه قبلی یک فایل بسازید به نام webpack.config.js و وب پک بصورت اتوماتیک فایلی با این اسم رو به عنوان کانفیگ خودش لود میکنه (توی قسمت‌های بعد میبینیم که چرا نیاز میشه که اسم این فایل تغییر کنه و چطور باید به وب پک بفهمونیم که فایل کانفیگمون کدومه)
به این شکل فایل رو کانفیگ کنید
قدم به قدم فایل رو بررسی میکنیم اول یک توضیح در مورد این قضیه require و module.exports بدم برای کسانی که نمیدونن چرا بعضی وقت‌‌ها ما این سینتکس رو میبینیم یا گاه اوقات میبینیم که از import from و export یا export default یا سبک‌های دیگه استفاده میشه.
واقعیت اینه که جاوااسکریپت در اصل کانسپتی به نام ماژول توی خودش نداره بنابر این بصورت رقابتی اومدن یک سری فرمت برای ماژولار کردن اختراع کردن مثلا معروف‌هاش یکی AMD هست (مخفف Asynchronous Module Definition) که مخصوص browserهاست و میاد با تابع define یک ماژول رو تعریف میکنه، یکی دیگه از این معروفا CommonJS هست که بهش CJS هم میگن و خیلی معروف شد چون Node.js از روشش برای ماژولار کردن استفاده میکنه که همین require و module.exports هست (که البته نقطه ضعف نود‌جی‌اس به حساب میاد و Deno هم که احتمالا یه سری آموزشی ازش شروع میکنیم داره به وسیله سازنده Nodejs نوشته میشه که از ساختارهای جدیدتر استفاده میکنه) و ESM رو هم داریم که ES5 و ES6ش خیلی معروفن و احتمالا اسمشونو شنیدید که از ساختار import و export استفاده میکنن.
پس در جریان باشید که اینجا داریم کانفیگ وب پک رو با CommonJS مینویسیم و داریم با روش CSJ یک ماژول تعریف میکنیم به همین سادگی.
خط ۱ یک لایبراری به نام path رو فراخوانی کردیم که بعدا توی کانفیگمون بتونیم باهاش مسیر بدیم.
اصل قضایا توی module.exports داره اتفاق میفته یعنی کانفیگ ما اونجاست و خیلی هم واضحه ۲ تا موردو ما تنظیم کردیم یکی اینکه نقطه شروعمون entry point چه فایلی هست و یکی هم اینکه خروجی output ما کجاست، بجای فولدر src ما دوست داریم اسم فولدر source باشه، بجای فایل index.js اسم فایل رو app.js در نظر گرفتیم و میخوایم فایلهای ترنسپایل شده رو بریزه برامون توی یک فولدر به اسم build و اسم باندل رو بذاره app.bundle.js
حالا کافیه اسم فولدر و فایل ورودی رو مطابق بالا عوض کنید و یک فولدر بسازید به نام build و فایل index.html رو توش کپی کنید و آدرس رفرنس توی index.html رو هم تصحیح کنید.
و دوباره دستور npm start رو اجرا کنید
میبینید که وب پک اتوماتیک فایل کانفیگ رو پیدا میکنه و مطابق تنظیمات جدید خروجی رو ایجاد میکنه.
در واقع کار جدیدی نکردیم و فقط یاد گرفتیم که چطور به وب پک دستور بدیم که خودش یک قدم رو به جلوست.
حالا یک امتحان کوچیک برای شما... فولدرهای dist و build رو کلا از پروژه پاک کنید و وب پک رو اجرا کنید و ببینید چه اتفاقی میفته... توی قسمت بعد میخوایم یک قدم جلوتر بریم و یکم کارمون رو اتوماتیک تر کنیم.
ممنون که همراهم بودید و برنامه نویس موفقی باشید.
