Ketika saya menggunakan file-loader dan html-loader di webpack. Src attr gambar akan menjadi seperti '[Modul objek]'

Saya melakukan proyek dengan webpack4 dari awal. Tetapi ketika saya mencoba untuk menampilkan gambar dalam file html. Saya menghadapi masalah kabel: Setelah npm run build. src tag gambar akan dibuat sebagai <image src="[object Module]". Bagian html adalah:

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

The webpack.config.jsadalah seperti ini:

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

Dan versi dari dua loader ini:

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

Saya tidak tahu apa masalahnya ...

Coba tambahkan esModule: falseopsi ke pemuat file seperti ini:

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

Hal yang sama berlaku untuk url-loader.

Opsi esModule telah diperkenalkan di file-loader di versi 4.3.0 dan di 5.0.0 telah disetel ke true secara default yang bisa menjadi perubahan yang melanggar.

Sumber:

• riwayat rilis file-loader
• masalah github yang relevan

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