webpack - 如何修复 webpack 输出的图像 src 中的 [Object Module]？

Question

我正在尝试使用 Webpack 设置一个现代的普通 Web 启动器。

当我添加webpack-html-loader时我被卡住了和html-loader 。这是发生的事情...

1. 当我使用img时条目中的标签 index.html文件，带有 src像这样的属性( ./imgs/image.png )， src dist 中的属性文件夹替换为 [object Module] 。但是当我删除 uri 之前的点时( ./imgs/image.png 到 /imgs/image.png )， src输出在 dist文件夹与 src 的文件夹完全相同。这没有引用我想要包含的图像。
2. 自 src webpack 输出的值与源完全相同，我尝试粗略地使用 uri到输出文件夹中的图像，如下所示 /dist/img/image.png 。这确实有效，但这并不是一个很好的体验。我很想使用 uri到我的图像 src文件夹并让 webpack 将其替换为 dist在构建时。这可能吗？

这是我的文件结构在 npm run build 之后的样子

- dist
  - imgs
    - image.png
  - index.html
  - main.js
- node_modules
- src
  - index.html
  - imgs
    - image.png
- package.json
- package-lock.json
- webpack.config.js

这是我的 webpack.config.js

const HTMLWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: false
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: "imgs",
              publicPath: "imgs",
              name: "[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html")
    }),
    new CleanWebpackPlugin()
  ]
};

我做了一个 repo here

非常感谢您的宝贵时间

更新(2020 年 2 月 1 日)

评论中有人指出了问题的解决方案。 (When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]')

解决办法是设置esModules反对false在 file-loader像这样规则

{
  test: /\.(png|jpe?g)$/,
  use: [
    {
      loader: "file-loader",
      options: {
        // Here!!!
        esModule: false,
        outputPath: "images",
        publicPath: "images",
        name: "[name].[ext]"
      }
    }
  ]
}

Answer 1

请看一下这篇文章:

When i using file-loader and html-loader in webpack. The src attr of image gonna be like '[object Module]'