webpack - 一起使用 file-loader 和 html-loader

Question

我正在开发一个角度应用程序，该应用程序需要html将文件提取为纯 HTML 文件，同时应检查是否<img src="...">需要这些图像（作为资产）。另外，图片是基于根路径（so /images/something.png）的，需要相对于 webpackcontext设置（基本路径）进行解析。

我怎样才能做到这一点？无法让 html-loader 与文件加载器很好地配合使用。因为前者输出一个 JS 文件（带有require语句），而后者需要一个纯 HTML 文件。

Answer 1

我通过深入研究相关加载程序的源代码自己找到了解决方案。

基本上，默认情况下它不起作用，因为 file-loader 需要一个“原始”文件，所以如果你想输出一个 HTML 文件，你需要有 html 源，而不是 JS 源。但是，html-loader 接受一个 HTML 文件并输出一个 JS 文件（带有require资产和内容）。

解决方案是这个隐藏得很深且很棒的提取加载器，它解析来自 html-loader 的 JS，将其转换回纯 html，即使使用 hash 进行 cachebusting仍然需要和替换资产。

太完美了，你将输出传递给文件加载器，你终于有了你的 html 文件！

示例配置

就我而言，我的加载器配置如下所示：

'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString())