https://github.com/wzsxyz/html-withimg-loader

webpack的loader，处理html，以支持直接在html中使用img的src加载图片
https://github.com/wzsxyz/html-withimg-loader

Last synced: 3 months ago
JSON representation

webpack的loader，处理html，以支持直接在html中使用img的src加载图片

• Host: GitHub
• URL: https://github.com/wzsxyz/html-withimg-loader
• Owner: wzsxyz
• Created: 2016-06-20T12:59:01.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-08-27T07:31:14.000Z (about 4 years ago)
• Last Synced: 2024-06-20T16:09:31.159Z (5 months ago)
• Language: JavaScript
• Size: 79.1 KB
• Stars: 175
• Watchers: 7
• Forks: 20
• Open Issues: 21
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-github-star - html-withimg-loader

README

        

# html-withimg-loader

webpack处理资源无往不利，但有个问题总是很苦恼，html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。这个loader解决这个问题，图片会被打包，而且路径也处理妥当。额外提供html的include子页面功能。

______________

## 安装

    npm install html-withimg-loader --save

## 使用

    var html = require('html-withimg-loader!../xxx.html');

或者写到配置中：

    loaders: [

        {

            test: /\.(htm|html)$/i,

            loader: 'html-withimg-loader'

        }

    ]

额外支持一项黑科技：

    


        #include("./layout/top.html")

    


子页面将被引入，并且子页面中的img标签同样会进行处理。该语法支持嵌套。

如：xxx.html:

    

    

    

    #include("./handlebars/layout.html")

    示例页面

    

    

    

    

    #include("./handlebars/scripts.html")

    

    

编译结果为：

    示例页面

结合html-webpack-plugin，在入口html中也可以使用img标签加载图片，不会打包失败

plugins:[

    new HtmlWebpackPlugin({

        template: 'html-withimg-loader!'+path.resolve(srcDir, 'xxx.html'),

        filename: 'xxx.html'

    })

]

**注意，必须请求虚拟目录/__build/下的html才是处理后的html，新手可能不知道这个，如：127.0.0.1/__build/xxx.html**

github地址：https://github.com/wzsxyz/html-withimg-loader

## 支持查询参数：

* query.exclude 匹配该参数的图片路径不进行处理。例如：

    {test: /\.html$/, loader: 'html-withimg-loader?exclude=/upload/'},

则如：src="/upload/head.png"这个图片路径将不会被处理。暂不支持正则表达式字符串。

* query.min 默认会去除html中的换行符，配置min=false可不去除

* query.deep deep=false将关闭include语法嵌套子页面的功能

    require('html-withimg-loader?min=false!xxx.html');

## 更新记录：

### 0.1.15

* 增加了对link标签href图片路径的处理

### 0.1.13

* 增加了exclude查询参数，用于排除特定的图片

### 0.1.11

* 进行了一些合理化修改，绝对路径的图片，非静态图片(如以.htm结尾的图片路径)不会再被处理到

### 0.1.10

* 修复img里面data-src这种属性被错误匹配、以及空的src造成编译失败的问题

### 0.1.9

* 修复了编译后图片路径没有引号的问题

### 0.1.8

* 修复了该loader被配置多次时，文件被反复编译引起异常的问题

### 0.1.7

* 修复了min=false时的换行符问题

### 0.1.6:

* 修复了不以/、./、../开头的不规范图片路径造成模块无法找到的问题

### 0.1.5：

* 解决了页面中包含单引号会编译异常的bug