当我在webpack中使用文件加载器和HTML加载器时。图像的src属性将类似于“ [对象模块]”

我正在从头开始使用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中已默认将其设置为true，这可能是一个重大更改。

资料来源：

• 文件加载器的发行历史
• 相关的github问题

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