一起使用 file-loader 和 html-loader
Use file-loader and html-loader together
我正在开发一个 angular 应用程序，它需要将 html 文件提取为纯 HTML 文件，同时应该检查任何 <img src="...">需要这些图像（作为资产）。此外，图像是基于根路径的（所以/images/something.png），它们需要相对于webpack context设置（基本路径）进行解析。
我怎样才能做到这一点？无法让 html-loader 与 file-loader 很好地配合。由于前者输出一个 JS 文件（带有 require 语句）而后者需要一个普通的 HTML 文件。
我通过深入研究相关加载程序的源代码，自己找到了解决方案。
基本上，默认情况下它不起作用，因为文件加载器需要一个 "raw" 文件，所以如果你想输出一个 HTML 文件，你需要有 html来源，而不是 JS 来源。但是，html-loader 获取一个 HTML 文件并输出一个 JS 文件（带有 require 资产和内容）。
这个解决方案隐藏得很深而且很棒 extract-loader 它解析从 html-loader 出来的 JS，将它转换回普通 html，资产仍然是必需的 and 甚至 替换为用于缓存清除的散列 .
太好了，您将输出传递给文件加载器，您终于拥有了 html 个文件！
示例配置
就我而言，我的加载程序配置如下：
'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString())
我正在开发一个 angular 应用程序，它需要将 html 文件提取为纯 HTML 文件，同时应该检查任何 <img src="...">需要这些图像（作为资产）。此外，图像是基于根路径的（所以/images/something.png），它们需要相对于webpack context设置（基本路径）进行解析。
我怎样才能做到这一点？无法让 html-loader 与 file-loader 很好地配合。由于前者输出一个 JS 文件（带有 require 语句）而后者需要一个普通的 HTML 文件。
我通过深入研究相关加载程序的源代码，自己找到了解决方案。
基本上，默认情况下它不起作用，因为文件加载器需要一个 "raw" 文件，所以如果你想输出一个 HTML 文件，你需要有 html来源，而不是 JS 来源。但是，html-loader 获取一个 HTML 文件并输出一个 JS 文件（带有 require 资产和内容）。
这个解决方案隐藏得很深而且很棒 extract-loader 它解析从 html-loader 出来的 JS，将它转换回普通 html，资产仍然是必需的 and 甚至 替换为用于缓存清除的散列 .
太好了，您将输出传递给文件加载器，您终于拥有了 html 个文件！
示例配置
就我而言，我的加载程序配置如下：
'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString())