是否有任何 webpack 插件可以解析 html 文件中的静态源？答案

【问题标题】：Is there any webpack plugin can resolve static source in html file?是否有任何 webpack 插件可以解析 html 文件中的静态源？
【发布时间】：2017-04-25 16:04:24
【问题描述】：

例如html包含以下内容

<div class="logo-wrap">
    <!-- /dev is developing directory -->
    <img src="/dev/logo.png">
</div>

解决后。变成了

<div class="logo-wrap">
    <!-- /static is deploying directory and a3z51b2l is file's hash -->
    <!-- meanwhile, it moves logo.png from /dev directory to /static directory -->
    <img src="/static/logo.a3z51b2l.png">
</div>

有没有插件可以做到这一点？

【问题讨论】：

标签： webpack frontend

【解决方案1】：

是的，在静态 HTML 文件中，您可以使用 html-webpack-plugin。默认情况下它使用 EJS 语法，所以在你的 html 文件中你可以这样做：

<img src="<%= require('./local/path/to/img.png') %>" />

并且 webpack 会构建一个具有正确路径的静态 HTML 文件。

【讨论】：