เมื่อฉันใช้ file-loader และ html-loader ใน webpack src attr ของภาพจะเป็นเช่น '[วัตถุโมดูล]'

ฉันกำลังทำโครงการกับ webpack4 ตั้งแต่เริ่มต้น แต่เมื่อฉันพยายามที่จะแสดงภาพในไฟล์ html ผมประสบปัญหาแบบใช้สาย: npm run buildหลังจาก src <image src="[object Module]"ของแท็กภาพที่จะได้รับการสร้างขึ้นเป็น ส่วน html คือ:

<img src="images/main_background.jpg">

webpack.config.jsเป็นเช่นนี้

   // ignore ...
   {
    test: /\.html$/,
    use: [
       {loader: 'html-loader'}
    ]
   },
   {
      test: /\.(jpeg|jpg|png)$/,
      use: [
        'file-loader'
      ]
  }

และเวอร์ชั่นของรถตักสองคันนี้:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

ฉันไม่ทราบว่าปัญหาคืออะไร ...

ลองเพิ่มesModule: falseตัวเลือกในตัวโหลดไฟล์เช่น:

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

เช่นเดียวกับ url-loader

ตัวเลือก esModule ได้รับการแนะนำในตัวโหลดไฟล์ในเวอร์ชัน 4.3.0 และใน 5.0.0 ถูกตั้งค่าเป็นจริงโดยค่าเริ่มต้นซึ่งอาจเป็นการเปลี่ยนแปลงที่ผิดพลาด

แหล่งที่มา:

• ประวัติรีลีสตัวโหลดไฟล์
• ปัญหา GitHub ที่เกี่ยวข้อง

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},