Skip to content

tangxiangmin/html-file-loader

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

html-file-loader

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

Feature

  • html模板中的文件支持依赖分析并重写路径,内置支持匹配scriptimglinkaudiovideo等多种标签
  • 支持自定义标签属性及匹配规则,方便扩展诸如懒加载相关的需求
  • 支持占位符__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等属性上,则这些属性也是需要被解析依赖的。

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

About

a webpack html file loader that resolve file source

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published