我正在使用 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
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 路径上调用文件加载器。
您可能会遇到一些路径问题,但它应该可以工作。
关于javascript - 使用 HTMLWebpackPlugin 时如何通过 webpack 加载图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47126503/