在 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: falsefile-loader添加选项，如下所示：

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

这同样适用于 url-loader。

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

资料来源：

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