تنظیمات webpack برای پروژه React JS - قسمت چهارم

در قسمت سوم مقاله درباره مدیریت فایل های CSS در سورس برنامه صحبت کردیم. اینکه چطور فایل های CSS رو در برنامه import و داخل فایل bundle.js اضافه کنیم که در کامپوننت ها استفاده بشن. در این قسمت می خوام درباره هندل کردن css preprocessor و فایل های scss یا همون sass صحبت کنم به انضمام نحوه لود کردن فایل ها با file-loader که کمی جلوتر بریم.

پیکربندی webpack برای پروژه React
پیکربندی webpack برای پروژه React

تنظیمات SASS در webpack

برای اینکه بتونیم فایل های scss رو در برنامه هندل کنیم بایستی دو پکیج زیر رو نصب کنیم :

npm install --save-dev sass-loader node-sass

توضیح پکیج ها: برای هندل کردن sass در برنامه باید node-sass رو نصب کنیم که sass رو برامون compile کنه و طبق صحبت های قبلی بایستی loader هر چیزی برای webpack نصب بشه , الان هم باید بیایم sass-loader رو نصب کنیم که webpack بتونه باهاش کار کنه.

بعد حالا میایم فایل style.css که در قسمت سوم ساخته بودیم رو به style.scss تغییر نام میدیم و برای اینکه از عملکرد درست کار مطمئن بشیم فایل رو به این شکل می نویسیم : ( یک Nesting ساده )

https://gist.github.com/buglessir/b159eaaed951bea0ae6c98fd053780c1

حالا باید در فایل index.js هم بجای style.css فایل جدید یعنی style.scss رو import کنیم :

https://gist.github.com/buglessir/48ff9b462462d418577efee3f16aef35

بعد نوبت به webpack میرسه و فایل webpack.config.js رو به این صورت ویرایش کنید :

https://gist.github.com/buglessir/3a920851dac73f8487b9846f2cad811c

در حقیقت الان در خط 23 بعد از css-loader یک sass-loader هم اضافه کردیم که فایل های scss رو هندل کنه. همانطورکه می بینید selector رو در خط 22 مقدار test تغییر دادیم و قراره فایل های scss رو انتخاب کنه که برن برای compile شدن.

حالا یکبار دستور npm run start رو بزنید و خروجی مثل قبل با پس زمینه crimson و متن با رنگ سفید هستش ولی با این تفاوت که اینبار style رو از sass خونده نه css و میتونید بهتر استایل بنویسید.

لود کردن فایل ها و asset در webpack

حالا نوبت به لود کردن فایل یا asset های پروژه میرسه. مثلا png , jpg یا بقیه asset ها که ضروری هستند. مثلا بخواید یک لوگو رو import کنید یا تصویری در صفحه نمایش بدید باید با کمک file-loader اینکار انجام بگیره. پس پکیج زیر رو در root نصب کنید :

npm install --save-dev file-loader

توضیح پکیج بالا: با کمک file-loader شما به webpack این امکان رو میدید که import شدن فایل هارو هندل کنه و بتونید در خروجی کار فایل هارو نمایش بدید.

نکته: وقتی از این پکیج استفاده می کنید بعد از import شدن فایل ها webpack خودش بصورت random یک اسم خاصی رو به این فایل ها میده که بعد از build گرفتن در کنار سورس پروژه قرار میگیرن.

خوب حالا تنظیمات webpack رو به این شکل بنویسیم :

https://gist.github.com/buglessir/cdb04b2b65d8d94a759bf8b0bcb9d3aa

خوب همانطورکه می بینید در خط 26 اومدیم یک selector برای فایل های png , jpg , gif نوشتیم که وقتی این مدل فایل ها در برنامه import شده بودن webpack با کمک file-loader بتونه اونها رو به سورس برنامه اضافه کنه.

حالا میایم یک فایل عکس jpg ساده در فولدر src قرار میدیم و بصورت زیر در داخل index.js اون رو import می کنیم: ( فایل عکس هرچی میتونه باشه , یک عکس jpg همینجوری فعلا بزارید تستی !!! )

https://gist.github.com/buglessir/e31050b6c304041a8ab43f7fee44de01

در کد بالا فایل image.jpg رو با نام img به صفحه اضافه کردیم و در خط 10 طبق syntax خود react اومدیم به src یک تگ img نسبتش دادیم. حالا اگر خروجی رو ببینید همون عکس به زیر تگ h1 اضافه شده.

البته زمانیکه npm run build رو بزنید می بینید مثلا اسم عکس چیزی مثل: 5e469d0eb.jpg شده و این اسم رو همانطورکه گفتم خود webpack بصورت random به asset ها میده و خودش خودکار بعدا این فایل هارو شناسایی و لود می کنه.

نکته: من در selector فقط همون سه فرمت رو گذاشتم. اگر مثل بعدا خواستید svg هم بیارید بایستی طبق همون روال به test داخل rule اضافه اش کنید.

امیدوارم تا به اینجا مقالات مورد توجهتون قرار گرفته باشه.

منتظر قسمت های بعدی باشید , فعلا خدانگهدار