سلام اشکان هستم و توی این قسمت از آموزش وب پک ۵ میخوایم در مورد لودرها صحبت کنیم و ببینیم چطور میتونیم با وب پک فایلهای css پروژه رو هم بخونیم.
همونطور که توی پست‌های قبلی گفتم اگر قرار باشه هسته اصلی وب پک لودر تمام فرمت‌های مختلف رو توی خودش داشته باشه هم با مفهوم ماژولار بودن وب پک مغایرت داره و هم اینکه وب پک با معرفی کردن مفهوم لودر بار روی دوش خودش رو سبک کرده و اجازه داده تا دولوپر‌های دیگه برای هر فرمتی لودر مخصوص بنویسن.
هدف نهایی وب پک اینه که انواع و اقسام ماژول‌‌ها رو بگیره و بشکل همگون اینها رو خروجی بگیره مثلا شما توی پروژه تون بتونید ماژول CommonJS یا AMD یا ES بنویسید، CSS ایمپورت کنید، انواع فرمت تصویر رو آدرس دهی کنید و وب پک از اینها یک خروجی همگون بگیره یعنی کد ترنسپایل شده نهایی مون از یک نوع باشه برای همین مفهومی رو معرفی کرد به نام loader.
لودرها رو شخص ثالث مینویسه(third party) برای اینکه وب پک بتونه انواع فرمت فایلهای مختلف رو بخونه. برای css و عکس و متن و فایل ویدیو و فایل سه بعدی و هرچیزی که فکر کنید لودر وجود داره.
اصولا شما نباید نگران این باشید که مثلا ده‌ها لودر یا پلاگین وب پک توی پروژه دارید چون قبلا توضیح دادم که اینها قراره توی فاز دولوپمنت استفاده بشن فقط برای همینه که ما با سویچ --save-dev نصبشون میکنیم و توی حجم نهایی پروژه ما موثر نیستند.
هدف نهایی لودرها هم اینه که همه فایل‌ها (بجز جاوااسکریپت) رو به ماژول تبدیل کنند و بدن دست وب پک که دیگه بلده با ماژول چکار کنه.
خوب بیاید استارت لودرها رو با هندل کردن فایلهای css پروژه‌مون بزنیم.
توی پوشه source یک فایل style.css بسازید و یک استایل ساده تعریف کنید.
.hello { color: blue; }
حالا این استایل رو توی فایل app.js لود کنید و کلاس .hello رو به المانی که بصورت داینامیک توی فایل جاوااسکریپ ساختیم بدید، به شکل زیر:
حالا برای تست بیاید وب پک رو اجرا کنیم ببینیم چه اتفاقی میفته
npm start
میبینید که با پیغام خطای زیر مواجه میشیم
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
وب پک در حین باندل کردن پروژه رسید به فایل css مون و دید ازش سر در نمیاره بنابر این به ما گفته که شما برای هندل کردن این نوع فایل احتمالا به یک loader نیاز دارید در حال حاضر هم هیچ لودری برای پردازش این فایل تعریف نشده. خوبه پس بریم تعریف کنیم.
برای این کار ما در واقع به ۲ لودر نیاز داریم اولی کارش اینه که فایل css رو بخونه و بده به دومی که کار اصلی رو انجام میده و یک tag استایل توی head میسازه و استایل‌ها رو کپی میکنه اونجا.
اولی اسمش هست css-loader و دومی اسمش هست style-loader خیلی آسون و قابل فهم.
قدم اول اینه که نصبشون کنیم (dev dependency هستند دیگه خاطرتون که هست)
npm install css-loader style-loader --save-dev
حالا قدم دوم اصل ماجراست کمی دقت کنید برای همه لودرها یکسانه یک بار یاد بگیرید برای همیشه:
فایل webpack.config.js رو باز کنید و یک آبجکت جدید به نام module ایجاد کنید (منطقیه دیگه چون میخوایم بگیم با چه قوانینی و با استفاده از چه لودرهایی برامون ماژول بساز)
داخل آبجکت module یک آرایه بسازید به نام rules توی این آرایه ما همه قوانین رو تعریف میکنیم (رول rule یعنی قانون). اولین قانونی هم که میخوایم تعریف کنیم قانون خوندن cssهاست. تا اینجا فایل مون باید به شکل زیر باشه:
هر rule وب پک ۲ قسمت داره اولین قسمت مسئول پیدا کردن فایل مورد نظره که در این مورد ما میخوایم فایل‌هایی با پسوند .css رو هدف قرار بدیم و این کار رو با رجکس انجام میدیم اگر از regex فراری هستین یا میترسین نگران نباشید همیشه یک فرمت مد نظره همینو فقط باید یاد بگیرید
/\.css$/
من توضیح میدم که همیشه regex داخل // نوشته میشه، اون $ آخرش هم یعنی باید اون چیزی که دنبالش میگردیم با عبارت قبل از $ تموم بشه یعنی اینجا وب پک اسم فایل‌ها رو میخونه هر اسمی که با .css تموم شده باشه این قانون رو براش اعمال میکنه دیگه از این ساده تر نمیشه توضیح داد همیشه هم همینه یعنی بعدا برای قانون فایل jpeg مثلا مینویسید:
/\.jpeg$/
پس ترسی نداره اینو فقط یاد میگیریم. بد نیست که یک پست هم در مورد regex بگذارم چون خیلی جاها به کار میاد یکم عجیب و غریبه اولش ولی وقتی بدونید قوانینش چیه ازش استفاده‌های خوبی میشه کرد.
خوب این از اولین قسمت rule مون دومین قسمت خیلی آسونه فقط میگیم از چه loader یا لودرهایی باید برای این فایل‌هایی که پیدا کرد استفاده کنه که در این حالت css-loader و style-loader رو داریم.
پس یک آبجکت بسازید توی آرایه rules، این آبجکت ۲ تا key/value به قول معروف داره اولی اسم کلیدش test هست و مقدارش اون رجکسی که نوشتیم و دومی اسم کلیدش use هست و یک آرایه از لودر یا لودرهایی که میخوایم استفاده کنیم مثل زیر:
یک نکته آخر اینکه ترتیب نوشتن لودرها توی آرایه‌ی use مهمه، سیستم وب پک اینه که از پایین میره بالا و همونطور که توضیح دادم css-loader اول متن فایل رو میخونه بعد میده با style-loader پس باید از پایین اول css-loader رو معرفی کنیم بعد style-loader.
حالا وب پک رو اجرا کنید و اگر همه قدم‌ها رو درست رفته باشید پابلیش موفقی خواهید داشت و اگر فایل index.html رو باز کنید میبینید که جمله به رنگ آبی در اومده.
اگر به ایرادی برخوردید مثل همیشه کدهای این قسمت رو از مخزن گیت‌هاب پروژه و از branch ۰۴ میتونید دانلود کنید و چک کنید.
مرسی که همراهی میکنید و برنامه نویس موفقی باشید.
