Quando utilizzo file-loader e html-loader nel webpack. Il src attr dell'immagine sarà come '[modulo oggetto]'

Sto facendo un progetto con webpack4 da zero. Ma quando provo a visualizzare un'immagine nel file html. Ho affrontato un problema cablato: dopo npm run build. lo src del tag immagine verrà creato come <image src="[object Module]". La parte html è:

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

L' webpack.config.jsè come questo:

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

E la versione di questi due caricatori:

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

Non riesco a capire quale sia il problema ...

Prova ad aggiungere esModule: falseopzioni al caricatore di file in questo modo:

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

Lo stesso vale per url-loader.

L'opzione esModule è stata introdotta nel caricatore di file nella versione 4.3.0 e in 5.0.0 è stata impostata su true per impostazione predefinita, il che può essere una modifica sostanziale.

fonti:

• cronologia delle versioni del caricatore di file
• rilevante problema github

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