通过Webpack传递HTML来处理图像

Question

我在处理Webpack时还有一个有趣的问题。

我正在使用Webpack和Hugo（静态站点生成器）一起进行一些项目。 Webpack负责所有转换，捆绑，缩小等工作，Hugo生成所有内容和静态HTML页面，包括图像处理。雨果必须负责图像，因为我将来会让非技术人员对其进行更新。

我非常希望Webpack能够了解HTML中的图像，以便优化并生成响应式srcset。我已经探索了html-loader，并了解我可以require("html-loader!./file.html");手动传递HTML，然后传递给相应的图像加载器，但有没有办法我可以动态地执行此操作而无需每个我的HTML文件？

这可能是它自己的Webpack配置文件要在（正常）构建之后运行，因为Hugo必须在实际图像源将在HTML中之前编译网站。任何想法都表示赞赏！

Answer 1

Hugo本身具有processing images的能力，并且能够使用Markdown Render Hook Templates或简码生成响应图像所需的srcset。我认为渲染模板是最简单的方法，因为它意味着可以处理使用markdown语法添加的图像，避免在内容文件中使用短代码。

我将Hugo站点部署到Netlify，因此也可以在构建站点的部署中利用其映像优化，尽管由于Hugo在这方面非常有效，所以节省的成本很小。