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

Question

例如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>

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

Answer 1

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

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

并且 webpack 将使用正确的路径构建静态 HTML 文件。

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

Is there any webpack plugin can resolve static source in html file?

frontend

webpack