webpack - 在 webpack 中使用 file-loader 和 html-loader 时，图片的 src attr 为 '[object Module]'

Question

我正在从头开始使用 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",

我无法弄清楚是什么问题...

Answer 1

尝试添加 esModule: false文件加载器的选项，如下所示:

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

这同样适用于 url-loader。

esModule 选项已在 4.3.0 版的 file-loader 中引入，在 5.0.0 中它已默认设置为 true，这可能是一个重大更改。

资料来源:

file-loader release history

relevant github issue