一起使用 file-loader 和 html-loader答案

【问题标题】：Use file-loader and html-loader together一起使用 file-loader 和 html-loader
【发布时间】：2016-08-27 18:51:49
【问题描述】：

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

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

【问题讨论】：

标签： webpack webpack-html-loader webpack-file-loader

【解决方案1】：

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

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

解决方案是这个隐藏得很深且很棒的extract-loader，它解析来自 html-loader 的 JS，将其转换回纯 html，仍然需要资产并且甚至替换 带有用于缓存清除的哈希。

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

示例配置

在我的例子中，我的加载器配置如下：

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

【讨论】：

您描述了解决方案，但没有发布解决方案。配置示例？
file-loader!extract-loader!html-loader 对我来说已经足够了。请注意，对于 html-loader 我也使用了'?root=' + encodeURIComponent(sourcePath.toString())
是的，我一直在努力找出为什么 src="/url" 开始被忽略，直到我读到根 url 默认被忽略。你使用 ?root=，而我切换到相对 url。两者都有效。谢谢。
它不适用于 interpolation 标志：file!extract!html?interpolate.