Webpack : تحويل الصور إلى webp باستخدام image-webpack-loader

المكون الإضافي image-webpack-loader لا يحول الصور من صيغ الى أخرى، بل مهمته تعديل دقة الصور بصيغها الحالية

تستفيد منه لوضع صورك بدقتها الاصلية اثناء التطوير، وهو يقوم ببناء الموقع وتخفيض دقة الصور لزيادة سرعتها

يمكنك تحويل الصور يدويا الى webp عبر الخدمات المجانية المتاحة مثل هذه الخدمة هنا، ثم استخدام المكون image-webpack-loader لتصغير حجمها

المعلومات الموجودة عن image-webpack-loader مضللة وقليلة نوعا ما. ما يمكنه فعله هو تحسين ملف webp الموجود بالفعل وتقليل حجمه. يمكنك استخدام imagemin-webp لإنشاء صفحات ويب ثم تستطيع استيراد هذه الصفحات إلى ملف ثم تمريره عبر image-webpack-loader و file-loader كالتالي

import React from "react";
import waveImgJpg from "Images/common/wave.jpg";
import waveImgWebP from "Images/webp/wave.webp";
import styles from "IndexStyles/mainContent.scss";

export const MainContent = () => {
    return (
        <picture>
            <source className={styles.waveImg} srcSet={waveImgWebP} type="image/webp" />
            <img className={styles.waveImg} src={waveImgJpg} alt="beatiful wave" title="beatiful wave" />
        </picture>
    );
};

هناك حل أفضل من استخدام image-webpack-loader وهو استخدام imagemin و imagemin-webp:

• تحقق من أنه تم تثبيت magemin & imagemin-webp.
• قم بإنشاء ملف webpack.config.prod.js لإنشاء سكريبت لتحويل الصور. قبل يناء سكريبت webpack.
  تكون المصفوفة ['src/images/*.{jpg,png}'] هي ال input ويكون ال destination هو الخرج:

  const imagemin = require( "imagemin" )
  const webp = require( "imagemin-webp" )
  imagemin( ['src/images/*.{jpg,png}'], {
      destination: 'src/images',
      plugins: [
          webp( { quality: 60 } )
      ]
  } )

  يتم الإخراج من خلال src لتجنب تحميل الأشياء غير المستخدمة في مجلد dist والسماح لمكوِّن إضافي لـ ejs بطلب ملفات .webp مباشرة بواسطة أمر "require".

•  وأخيراً قم بإنشاء prescript في package.json تكون مخصصة لل production.

  "scripts": {
      "preprod": "node webpack.config.prod.js",
      "prod": "npm webpack"
  }