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

Question

我正在尝试使用 Webpack 设置一个现代的 vanilla web starter。

添加webpack-html-loader和时我卡住了html-loader。这是发生了什么......

1. 当我使用img条目index.html文件中的标记时，具有这样的src属性 ( ./imgs/image.png)，文件夹中的src属性将dist替换为[object Module]. 但是当我删除uri( ./imgs/image.pngto /imgs/image.png)之前的点时，文件夹中的src输出dist与src. 这不引用我想要包含的图像。
2. 由于srcwebpack输出的值和源码完全一样，所以我尽量粗暴的使用uri到输出文件夹中的图片像这样/dist/img/image.png。这有效，但不是很好的体验。我很想uri在src文件夹中使用我的图像，并dist在构建时用 webpack 替换它。这可能吗？

这是我的文件结构之后的样子 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()
  ]
};

我在这里做了一个回购

非常感谢您的时间

更新(02-01-2020)

评论中有人指出了解决问题的方法。（当我在 webpack 中使用 file-loader 和 html-loader 时。图像的 src attr 会像 '[object Module]'）

解决方案是像这样在规则中设置esModules对象falsefile-loader

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

Answer 1

请看一下这个帖子：

当我在 webpack 中使用 file-loader 和 html-loader 时。图像的 src attr 将类似于 '[object Module]'

Answer 2

您可以通过 'default' 属性解决 [object module] 错误： require('../../images/svg-1.svg').default