html-file-loader

解决html-webpack-plugin中加载本地资源文件的问题

Feature

• html模板中的文件支持依赖分析并重写路径，内置支持匹配script、img、link、audio、video等多种标签
• 支持自定义标签属性及匹配规则，方便扩展诸如懒加载相关的需求
• 支持占位符__uri('xx')在文本中强制解析依赖文件，该api参考fis3

相关配置

module: {
    rules: [
        {
            test: /\.(htm|html)$/i,
            loader: 'html-src-loader',
           options: {
                // 按需配置需要处理的标签
               img: ["src", "data-src"], // 每个标签都可以通过数组指定多个需要替换的属性
               link: ["href"],
               audio: ["src"],
               script: ["src"],
               video: ["src"]
           }
        },
    ]
},
plugins: [
    new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './demo/index.html')
        }
    )
],

默认options为

const defaultTagConfig = {
    img: ["src"],
    link: ["href"],
    audio: ["src"],
    script: ["src"],
    video: ["src"]
}

为什么需要自定义匹配规则

该loader主要借鉴了html-withimg-loader的一些思想，但是html-withimg-loader缺少对于自定义匹配规则的配置，由于原作者貌似已经停止维护了，无法提交PR，因此手动实现一个版本。

在图片懒加载等场景中，我们需要将实际资源保存在如data-src等属性上，则这些属性也是需要被解析依赖的。

进一步来说，如果我们需要某个常规的标签上也需要保存解析资源依赖，则自定义匹配规则可以很方便的进行扩展。