WebpackでファイルローダーとHTMLローダーを使用する場合 画像のソース属性は「[オブジェクトモジュール]」のようになります

私はゼロからwebpack4でプロジェクトをやっています。しかし、htmlファイルで画像を表示しようとすると、有線の問題に直面しました：後npm run build。イメージタグのソースはとして構築され<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'
      ]
  }

そして、これら2つのローダーのバージョン：

"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ではデフォルトでtrueに設定されていますが、これは重大な変更になる可能性があります。

出典：

• ファイルローダーのリリース履歴
• 関連するgithubの問題

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