是否有任何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文件。