تا %60 تخفیف خرید برای 3 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش Webpack قسمت 8: کار با تصاویر

ضمیمه ها

WebpackSample.rar

یکی دیگر از قابلیت های بسیار جالب و کاربری Webpack کار با تصاویر هست. اینکه شما می توانید تصاویر مورد نظر رو داخل فایل های css استفاده کنید و این فایل ها بوسیله Webpack مدیریت شوند. اما همونطور که قابل حدس زدن هست، Webpack به صورت پیش فرض امکان شناسایی فایل های تصویر و مدیریت اون ها رو نداره و باید از loader ها و plugin های مربوط استفاده کنیم.

ابتدا یک تصویر دلخواه را داخل پوشه src کپی کنید (تصویر استفاده شده در این مثال flowers.jpg هست که در فایل ضمیمه موجوده). فایل application.scss رو به صورت زیر تغییر میدیم:

body{
 background-image: url('flowers.jpg');
 background-size: cover;
}

و دستور npm run build رو اجرا می کنیم. اما همونطور که انتظار داشتیم پیام خطا دریافت می کنیم. چون loader ای برای کار با تصاویر نداریم:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

برای رفع این مشکل loader ای با نام url-loader رو نصب می کنیم:

npm install url-loader --save-dev

و در فایل webpack.config.js یک rule جدید برای url-loader به صورت زیر تعریف می کنیم:

{
 test: /\.(png|jpg|gif|svg)$/i,
 use:[
 {
  loader: 'url-loader',
  options: {
   limit: 8192
  }
 }
 ]
}

برای این rule مشخص کردیم که url-loader بر روی فایل هایی با پسوند png و jpg و gif و svg اعمال شود. اما یک گزینه اینجا وجود داره با نام limit که مشخص میکنه در صورتی که حجم فیل 8192 بایت کمتر بود در قالب base64 داخل فایل قرار بگیرد (انکود کردن فایل ها در قالب base64 باعث میشه تا به جای آدرس فایل، محتویات فایل استفاده بشه که باعث کاهش تعداد درخواست ها به سرور میشه). دستور npm run buld رو مجدد اجرا می کنیم. این بار خطای دیگه به صورت زیر دریافت می کنیم:

Error: Cannot find module 'file-loader'

برای رفع این مشکل file-loader که url-loader به اون وابسته هست رو نصب می کنیم:

npm install file-loader --save-dev

قبل از اجرای دستور build یک تغییر دیگه هم باید داخل فایل webpack.config.js بدیم و اون هم مشخص کردن نام فایل خروجی هست:

{
 test: /\.(png|jpg|gif|svg)$/i,
 use:[
 {
  loader: 'url-loader',
  options: {
   limit: 8192,
   name: '[name].[hash:7].[ext]'
  }
 }
 ]
}

همونطور که گفتیم اگر حجم فایل کمتر یا مساوی 8192 بایت باشه، محتویات فایل به صورت base64 داخل فایل قرار میگیرن، در غیر اینصورت فایل با قالبی که بوسیله بخش name مشخص شده، داخل پوشه build کپی شده و البته نام فایل در فایل css هم تغییر میکنه. بخش hash:7 بر اساس محتویات فایل یک عبارت 7 کاراکتری ایجاد میکنه که و داخل نام فایل قرار میده که کمک میکنه در صورت تغییر فایل، در صورت کش شدن فایل استفاده شده در مرورگر، عملیات به روزرسانی برای دریافت فایل انجام بشه.
دستور npm run build رو اجرا می کنیم. اگر داخل پوشه build رو نگاه کنیم محتویات پوشه به صورت زیر هست:

آموزش Webpack

و محتویات فایل application.css هم به صورت زیر تغییر میکنه:

body{background-color:#8b0000;background-image:url(flowers.b0208ba.jpg);background-size:cover}

صفحه index.html رو داخل مرورگر باز می کنیم و میبینیم که تصویر ما در صفحه نمایش داده می شود.

حجم فایل اصلی flowers.jpg حدود 197 کیلوبایت هست که حجم زیادی حساب میشه. بوسیله webpack میشه فایل های تصویر رو compress کرد تا حجم تصاویر کاهش پیدا کنه. برای اینکار از image-webpack-loader استفاده می کنیم. برای نصب این loader دستور زیر رو اجرا می کنیم:

npm install image-webpack-loader --save-dev

اگر از macOs استفاده می کنید، برای استفاده از این loader باید libpng رو بوسیله دستور زیر نصب کنید:

brew install libpng

برای compress شدن تصاویر بخش زیر رو به فایل webpack.config.js اضافه می کنیم:

{
 test: /\.(png|jpg|gif|svg)$/i,
 use:[
 {
  loader: 'url-loader',
  options: {
   limit: 8192,
   name: '[name].[hash:7].[ext]'
  }
 },
 {loader: 'image-webpack-loader'}
 ]
}

دستور npm run build رو اجرا کرده و وارد پوشه build میشیم. دو تصویر متفاوت وجود داره که یکی تصویر اصلی و دیگری تصویر compress شده هست که حجم تصویر حدود 90 کیلوبایت کاهش پیدا کرده:

آموزش Webpack  قسمت 8: کار با تصاویر

اگر محتویات فایل application.css رو ببینیم، آدرس تصویر ما از تصویر compress شده استفاده شده:

body{background-color:#8b0000;background-image:url(flowers.7b441a0.jpg);background-size:cover}

به این نکته توجه داشته باشید که ما در قسمت rule تنها پسوند فایل های تصویر رو تعریف کردیم، اما اگر شما از سایر فایل ها مثل font ها استفاده کرده باشید، باید حتماً rule برای پسوندهای مورد نظرتون تعریف کنید.

کدهای این قسمت به صورت ضمیمه از ابتدای این مطلب قابل دریافت هست. قبل از استفاده از کدها دستور npm install رو برای resolve کردن dependency ها اجرا کنید.

نویسنده: حسین احمدی
منبع: جزیره طراحی و توسعه وب توسینسو
هر گونه نشر و کپی برداری با ذکر نام منبع و نویسنده بلامانع است

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند