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

تا قسمت دوم مقاله تقریبا یک پروژه react رو با webpack از صفر کانفیگ کردیم و خروجی کار رو دیدیم. بصورت عملیاتی هم با webpack-cli و dev-server کار کردیم و متوجه شدیم که چجوری میشه یک پروژه رو در حالت development یا production اجرا کرد و دستورات متداول رو در cmd بررسی کردیم.

در این قسمت قصد داریم یکم ماژولار تر کار کنیم و فایل های css رو به داخل پروژه بیاریم و کمی کار رو کامل تر انجام بدیم. تا اینجا صرفا از babel-loader برای فایل های js استفاده کردیم و گفتیم که اگر بخوایم فایل های بیشتر رو لود کنیم , کارهای متنوع انجام بدیم یا مثلا asset ها یا css رو به پروژه اضافه کنیم بایستی لودر مخصوص اون رو اول نصب و بعدا در rule هامون بنویسیم.

توجه: متاسفانه بخاطر مشکلی که ویرگول در نمایش کدها داشت از Gist های GitHub استفاده کردم و برای لود شدن کدهای زیر لطفا کمی صبر کنید و اولش امکان داره فضای خالی بهتون نشون بده !!!

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

تنظیمات css برای webpack

برای شروع ابتدا بایستی این دو پکیج (loader) رو نصب کنیم :

npm install --save-dev css-loader style-loader

این دو پکیج رو توضیح بدم که: css-loader برای هندل کردن import فایل های css در فایل های جاوا اسکریپت بصورت ماژول هستش و style-loader برای نوشتن کدهای css بصورت inline-style داخل فایل bundle.js بعد از build گرفتن , که به نوعی میگن css in js file و کلا حرکت جالبیه !!!

بعد از نصب باید rule مورد نظر رو داخل webpack.config.js به این شکل بنویسیم :

https://gist.github.com/buglessir/3272c9e0ab5dd3cb7ba2c5c729797e17

در کد بالا یعنی اومدیم تعریف کردیم که فایل های css رو پیدا کن و اگر import شده بودند با استفاده از دو loader تعریف شده خواندن و اضافه کردن به فایل bundle.js رو انجام بده.

ولی قبلش برای تست من اومدم داخل فولدر src یک فایل به نام style.css ساختم و این کدهارو داخلش نوشتم که خروجی رو ببینیم چی میشه :

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

کار خاصی نکردم فقط یک رنگ زمینه و رنگ به نوشته ها دادم که خروجی رو تست کنیم.

و حالا اومدم با import فایل css رو به index.js ام به این شکل اضافه کردم :

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

حالا اگر دستور npm run start رو بزنید و خروجی کار رو ببینید , رنگ زمینه اعمال شده و متن با رنگ سفید نمایش داده میشه. البته این فقط شروع کار هستش و در قسمت بعدی نحوه هندل کردن sass و فایل های استایل با فرمت scss رو بهتون توضیح خواهم داد.

موفق باشید