لماذا يتم تهشير / تقطيع لأسماء الملفات في ويب باك webpach hash file name

أجبتك في سؤال سابق أنها مفيدة لتفادي حدوث خطا في حال كان لديك صورتين مثلا بنفس الاسم، وسوف تلاحظ أن ملف html في dist قام بتضمين الصور بشكل صحيح بالاسم المعدل، حيث أن ويباك ستعمل على تحزيم الملفات و تضمينهم بالشكل الصحيح وأنت لا علاقة لك بما في داخل dist ولا يفرق اسماء ملفات الصور.

هذه ليست صور عشوائية، بل يتم عمل Hashing لأسماء الملفات لكي لا تتكرر اثنين بنفس الاسم، كما تلاحظ جميعهم بنفس المجلد (توليد سلسلة نصية مميزة لكل ملف، بالاعتماد على تقطيع الاسم)

يمكنك تجريب تثبيت  html_loader بالإصدار 1

npm i html_loader@1.3.2

وهذه الميزة قادمة من تحديث الميزات، فلن يضعوها لتسبب مشكلة، بل لحل مشكلة (يمكن أن المشكلة واجت المطورين وليس بالضرورة واجهتك أنت) فالتحديث لحل مشاكل عامة و خاصة

يمكنك تجريب تعديل ملف إعداد ويباك بإضاقة hashFilenames: false

module.exports = {
  webpack: {
    hashFilenames: false
  }
}

وتجريب ضبط اسم الملف الناتج ليكون بلا تهشير

{
  test: /.*\.(gif|png|jpe?g|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '/images/[name].[ext]',   // المسار المراد رفع الصور عليه
      }
    },
  ]
}

طالما استخدمنا file_loader لرفع الملفات، لا نستخدم html_loader بإصدار جديد بل 1

وعلى كل حال، ويب باك ترفع الملفات من تلقاء نفسها

وفي آخر تحديث لويب باك يمكنك تعديل الخاصية assetModuleFilename بما يلي:

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[name][ext]'
  },

إقرأ عن Webpack 5 - Asset Modules

لما اعمل install بيطلع الerror ده

بتاريخ 17 دقائق مضت قال Mohamed Montaser3:

لما اعمل install بيطلع الerror ده

ممكن تعدل أمر التثبيت ليصبح npm i html_loader@^1.3.2