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

Question

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

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

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

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

如何触发 webpack 以动态替换这些相对路径，以及我在 webpack 配置中配置的任何内容？

Answer 1

我不是 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

By default (if you don't specify any loader in any way) a fallback lodash loader kicks in.

<%= %>表示一个lodash模板

Under the hood it is using a webpack child compilation which inherits all loaders from your main configuration.

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

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