Коли я використовую завантажувач файлів та html-завантажувач у 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-завантажувача.

Опція esModule була введена у завантажувач файлів у версії 4.3.0, а в 5.0.0 за замовчуванням встановлено значення true, що може бути переломною зміною.

Джерела:

• історія випуску завантажувача файлів
• відповідне випуск github

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