如何修复webpack输出图像中的对象模块？

Question

我正试着和Webpack建立一个现代化的香草网站。

当我添加webpack-html-loader和html-loader时，我被困住了。下面是发生的事..。

1. 当我使用条目img文件中的index.html标记时，使用类似于以下(./imgs/image.png)的src属性时，dist文件夹中的src属性将被[object Module]替换。但是，当我移除uri (./imgs/image.png to /imgs/image.png)之前的点时，dist文件夹中的src输出与src的输出完全相同。这没有引用我想要包含的图像。
2. 由于webpack输出的src值与源完全相同，所以我尝试将uri用于输出文件夹中的图像，如so /dist/img/image.png。这很管用，但这不是一次很好的经历。我很想在src文件夹中使用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()
  ]
};

我用它做了个回购，这里

非常感谢你抽出时间

更新 (02-01-2020)

评论中有人指出了解决这个问题的方法。(当我在webpack中使用文件加载器和html-加载程序时。图像的src会像‘[对象模块]’一样)

解决方案是在esModules规则中将file-loader对象设置为false，如下所示

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

Answer 1

请看一下这篇文章：

当我在webpack中使用文件加载器和html-加载程序时。图像的src会像‘[对象模块]’一样

Answer 2

您可以通过“默认”属性解决对象模块错误：.default(‘../../映像/SVG-1.svg’)

Answer 3

您可以导入要导入的内容的默认值。例如:没有这样做：

const mySVG = require('./path/to/svg');

执行此操作

const mySVG = require('./path/to/svg').default;