通过 Webpack 传递 HTML 处理图像答案

【问题标题】：Passing HTML through Webpack to process images通过 Webpack 传递 HTML 处理图像
【发布时间】：2020-07-16 20:59:34
【问题描述】：

在使用 Webpack 时，我有一个有趣的问题尚未解决。

我将 Webpack 与 Hugo（静态站点生成器）一起用于少数项目。 Webpack 负责所有的转译、捆绑、缩小等，而 Hugo 生成所有的内容和静态 HTML 页面，包括图像的处理。图像必须由 Hugo 负责，因为将来我会让非技术人员更新它们。

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

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

【问题讨论】：

我也很想听听关于这个话题的想法！
我找到了这个包，我正在尝试提取我正在寻找的关于 html-loader 的信息。看来这些人已经想通了。但是，我不想使用完整的包，因为它不是很可配置。我宁愿提取我需要的东西；）npmjs.com/package/hugo-webpack-boilerplate。看看这个文件：github.com/vseventer/hugo-webpack-boilerplate/blob/master/src/…
如果你首先运行hugo 来生成HTML，然后将这些生成的文件提供给Webpack 来发挥它的魔力呢？像webpack-shell-plugin 这样的插件可以帮助定义在构建开始之前运行的命令，在本例中为hugo。这就是我目前正在尝试的。

标签： javascript html webpack hugo

【解决方案1】：

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

我将 Hugo 站点部署到 Netlify，因此也在部署构建站点时利用它们的图像优化，尽管节省很少，因为 Hugo 在这方面非常有效。

【讨论】：