كيف أستطيع تضمين صورة إلى ملفات المشروع باستخدام webpack

تأكد من عدم تضارب المحمل file-loader مع html-loader حيث أن html-loader في الإصدار 1 لا يحمل الصور المضمنة في صفحات HTML، أما في html-loader الإصدار الثاني أصبح يقوم بذلك تلقائياً، وهو لا يحتاج file-loader

في حال أردت استخدام file-loader :تأكد من تنصيب html-loader بالإصدار 1

npm install html-loader@^1.3.0

أما في حال html-loader 2 سيرفع الصور بنفسه أي لاحاجة للقاعدة السابقة

هناك تكوينات مختلفة لـ webpack 4 و webpack 5 نبدأ بـ webpack 4  إذا كنت تستخدم webpack 5  فانتقل لأسفل إلى قسم webpack 5

أول شيء سنفعله هو تثبيت file-loader

npm install --save-dev file-loader

ثم تعديل اعدادت webpack لتستخدم file loader

{

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

    use: [

      {

        loader: "file-loader",

        options: {

          name: "[name].[ext]",

          outputPath: "images",

        },

      },

    ],
},

اعدادات ملف webpack 5

لقد ألغى Webpack 5 أداة تحميل file-loader إذا كنت تستخدم webpack 5  فيجب إجراء بعض التعديلات على الاعدادات الخاصة بك.

module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      }
    ]
  }

أيضًا  لم تعد بحاجة إلى إضافة file-loader في package.json.

عندما تقوم بتعديل اعدادات webpack config الخاص بك  يمكنك الوصول إلى ملفات PNG (أو أي ملحقات ملفات قمت بتكوينها) تمامًا كما هو موضح سابقًا.