我正试图建立一个现代香草网络启动器与Webpack。
当我添加webpack-html-loader和html-loader时，我卡住了。下面是发生的情况...
1.当我在条目index.html文件中使用img标记时，src属性如下所示（./imgs/image.png），则dist文件夹中的src属性将替换为[object Module]。但是，当我删除uri之前的点时（./imgs/image.png到/imgs/image.png），dist文件夹中的src输出与src的输出完全相同。这没有引用我想要包含的图像。
1.由于webpack输出的src值与源代码完全相同，我尝试使用uri作为输出文件夹中的图像，就像/dist/img/image.png一样。但这并不是一次很好的经历。我想在src文件夹中使用一个uri到我的图像，并让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()
  ]
};

我把它买回来了here
非常感谢您抽出时间

更新（2020年1月2日）

有人在评论中指出了一个解决问题的方法。（当我在webpack中使用file-loader和html-loader时。图像的src属性会像'[object Module]'）
解决方案是在file-loader规则中将esModules对象设置为false，如下所示

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