javascript - 在Webpack中，如何将HTML字符串当作文件一样使用？

Question

我的问题是关于使用Webpack来处理HTML字符串（而不是文件），就好像我需要将其作为文件一样。这样做的目的是使Webpack有机会检查字符串中的img标记，以便它需要HTML中引用的文件并相应地重写URL。

为了更具体一点，我正在编写一个由Webpack处理的Pug模板。 Webpack的一个很棒的功能是，使用正确的加载器（在本例中为pug-loader），它可以处理模板中的所有资产URL，并用哈希文件名或内联data: URL替换它们，具体取决于Webpack的方式配置。例如，

img(src=require('../images/some-image.png'))

可能会被翻译成

<img src="/images/some-image.543ea62f.png">

现在，作为构建过程的一部分，我有一个来自早期构建步骤的HTML字符串，我想将其包含在哈巴狗模板中。 HTML包含图像URL，但是图像URL是相对的，我想给Webpack一个解析HTML并重写URL的机会。我想允许Webpack要求HTML字符串中引用的图像，就像该字符串正在由 html-loader处理一样。

如果HTML存储在一个外部文件中，那将是微不足道的，因为我可以这样做：

p.my-transcluded-html
  != require('html-loader!../my-html-file.html')

但是我有一个HTML字符串，而不是一个文件，而且我真的不想诉诸于将字符串写入磁盘。我以为我可能会要求提供数据URI（即 data:text/html;base64,...），但这没有用：

p.my-transcluded-html
  - const dataURI = convertHTMLToDataURI(myHTML);
  != require(`html-loader!${dataURI}`)

因此，有没有办法使用 html-loader处理HTML字符串并将结果作为字符串获得，就像我已加载HTML文件一样？

谢谢！

Answer 1

您是否考虑过使用节点读取文件，

let file = fs.readFileSync('path/file.html');

然后使用toString()方法将文件转换为字符串？

let string = file.toString();

我刚刚在Node环境中对其进行了测试，并且可以正常工作，然后可以通过导入模块在JS中的任何位置使用该字符串。该字符串将包含html文件的确切内容。

希望这可以帮助