وب پک ۵ - قسمت پنجم

سلام دوستان بریم بدون وقت تلف کردن سراغ قسمت پنجم که چند تا کار میخوایم توی این قسمت انجام بدیم.

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

اول این تصویر رو توی دایکتوری source/ ذخیره کنید بعد فایل عکس رو توی app.js ایمپورت کنید و اون رو به المان داینامیکی که ساختید append کنید باید بعد از تغییراتی که دادید فایل app.js مثل زیر باشه:

حالا باید لودر مخصوص رو انتخاب کنیم... به شکل ساده‌ای میخوایم از لودری به نام file-loader‌ استفاده کنیم. با دستور زیر نصبش کنید:

npm install file-loader --save-dev

و rule مربوط به تصویر رو توی webpack.config.js اضافه کنید:

{ 
    test: /\.png$/,
    use: [&quotfile-loader&quot]
}

هیچی برای آموزش جدید نداشت دقیقا کپی کاری که برای css کردیم فقط با یک لودر متفاوت، اما فرض کنید که ما توی پروژه‌مون چند فرمت مختلف تصویر رو بخوایم استفاده کنیم یعنی یک جایی هم بخوایم فایل jpeg لود کنیم و یک جا gif یا svg لازمه برای هرکدوم یک رول جدید بنویسیم؟ خیر

فقط کافیه که regex تست مون رو به شکل زیر تغییر بدیم:

test: /\.(png|jpg|jpeg|gif|svg)$/

فکر نکنم این هم توضیح اضافه بخواد ما توی پرانتز بین چند انتخاب از عملگر or که با علامت | نشون داده میشه استفاده کردیم یعنی هرکدوم از اینها ممکنه باشه.

حالا شما نه تنها میتونید توی فایل جاوااسکریپتتون از این فرمت‌های تصویری استفاده کنید بلکه میتونید توی فایل css هم این کار رو انجام بدید چون در نهایت css هم توسط لودرهای خودش تبدیل به ماژول جاوااسکریپتی میشه اما یک نکته تستی این وسط خواهد بود که خیلی ظریفه خوب دقت کنید:

یادتونه دفعه پیش بهتون گفتم وب پک فایل کانفیگ رو از پایین به بالا میخونه؟ و ترتیب loaderها مهمه؟ حالا بدونید که ترتیب ruleها هم مهمه و اونها هم از پایین به بالا خونده میشن بنابر این اگر rule تصاویر ما بالای رول css نوشته بشه تصویر ها قابل خوندن نخواهند بود حواستون باشه که اول باید وب پک بفهمه با تصویر چکار کنه بعد بره سراغ css.

برای امتحان یک فایل jpeg توی پوشه source/ کپی کنید و از طریق css اون رو بک گراند المان داینامیک مون قرار بدید و نتیجه رو ببینید.

اگر به مشکلی خوردید یا خواستید کد خودتون رو با من مقایسه کنید فایل‌‌های مربوط به این قسمت رو توی branch 05 مخزن گیت پروژه از اینجا میتونید کلون و استفاده کنید.

به عنوان پیش‌نیاز مبحث بعدی از شما میخوام که با دقت به خروجی فولدر build نگاه کنید و زیر همین پست کامنت کنید که چه نکته ای توجه شما رو جلب میکنه.

ممنون از همراهی همیشگیتون برنامه نویس موفقی باشید