一起使用file-loader和html-loader

Question

我正在开发一个角度应用程序,它需要将html文件提取为纯HTML文件,同时应检查是否<img src="...">需要这些图像(作为资源).此外,图像基于根路径(so /images/something.png),它们需要相对于webpack context设置(基本路径)进行解析.

我怎样才能做到这一点？无法让html-loader与文件加载器很好地协同工作.由于前者输出一个JS文件(带有require语句),后者需要一个普通的HTML文件.

Answer 1

我自己通过挖掘有问题的加载器的源代码找到了解决方案.

基本上,默认情况下它不起作用,因为file-loader需要一个"原始"文件,所以如果你想输出一个HTML文件,你需要有html源代码,而不是JS代码.但是,html-loader接受一个HTML文件并输出一个JS文件(包含require资源和内容).

解决方案是这个深度隐藏和奇妙的extract-loader,解析来自html-loader的JS,将其转换回普通的html,资产仍然是必需的,甚至替换为hashbusting的哈希.

这是完美的,你将输出传递给文件加载器,你终于有了你的html文件!

配置示例

就我而言,我的加载器配置如下:

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