使用HTMLWebpackPlugin时如何通过webpack加载图片？

我正在使用 HTMLWebpackPlugin，在我的模板中我有一个 img 标签：

<img src="./images/logo/png">

如果您注意到，这里我使用相对路径，认为 webpack 将触发在 webpack.config.js 文件中配置的文件加载器，但编译后我在 html 中获得完全相同的 src 属性：

<img src="./images/logo/png">

如何触发 webpack 动态替换这些相对路径，无论我在 webpack 配置中配置了什么？

我不是 webpack 专家，但我通过这样做让它工作：

<img src="<%=require('./src/assets/logo.png')%>">

插件配置

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html'
  }),

根据文档：https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

默认情况下（如果您没有以任何方式指定任何加载程序）后备 lodash 加载程序启动。

The <%= %>表示 lodash 模板

在底层，它使用继承的 webpack 子编译 主配置中的所有加载程序。

Calling require然后，您的 img 路径上的文件将调用文件加载器。

您可能会遇到一些路径问题，但它应该可以工作。