{"id":13671375,"url":"https://github.com/wzsxyz/html-withimg-loader","last_synced_at":"2025-04-27T18:31:05.971Z","repository":{"id":84188122,"uuid":"61547848","full_name":"wzsxyz/html-withimg-loader","owner":"wzsxyz","description":"webpack的loader，处理html，以支持直接在html中使用img的src加载图片","archived":false,"fork":false,"pushed_at":"2020-08-27T07:31:14.000Z","size":81,"stargazers_count":175,"open_issues_count":21,"forks_count":20,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-11T09:43:40.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wzsxyz.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-20T12:59:01.000Z","updated_at":"2024-04-01T07:02:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"896ce2fc-300f-4f2d-92d4-b9530390b3bb","html_url":"https://github.com/wzsxyz/html-withimg-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wzsxyz%2Fhtml-withimg-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wzsxyz%2Fhtml-withimg-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wzsxyz%2Fhtml-withimg-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wzsxyz%2Fhtml-withimg-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wzsxyz","download_url":"https://codeload.github.com/wzsxyz/html-withimg-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187047,"owners_count":21549576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:07.899Z","updated_at":"2025-04-27T18:31:05.688Z","avatar_url":"https://github.com/wzsxyz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# html-withimg-loader\n\nwebpack处理资源无往不利，但有个问题总是很苦恼，html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。这个loader解决这个问题，图片会被打包，而且路径也处理妥当。额外提供html的include子页面功能。\n\n______________\n\n## 安装\n\n    npm install html-withimg-loader --save\n\n## 使用\n\n    var html = require('html-withimg-loader!../xxx.html');\n\n或者写到配置中：\n\n    loaders: [\n        {\n            test: /\\.(htm|html)$/i,\n            loader: 'html-withimg-loader'\n        }\n    ]\n\n额外支持一项黑科技：\n\n    \u003cdiv\u003e\n        #include(\"./layout/top.html\")\n    \u003c/div\u003e\n\n子页面将被引入，并且子页面中的img标签同样会进行处理。该语法支持嵌套。\n\n如：xxx.html:\n\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n    \u003chead\u003e\n    #include(\"./handlebars/layout.html\")\n    \u003ctitle\u003e示例页面\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n    \u003cimg id='test2' src='images/logo.gif' /\u003e\n    \u003cimg id=\"test1\" src=\"./images/test4.jpg\" /\u003e\n    #include(\"./handlebars/scripts.html\")\n    \u003c/body\u003e\n    \u003c/html\u003e\n\n编译结果为：\n\n    \u003c!DOCTYPE html\u003e\u003chtml\u003e\u003chead\u003e\u003cmeta name=\"description\" content=\"\"\u003e\u003cmeta name=\"keywords\" content=\"\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"\u003e\u003ctitle\u003e示例页面\u003c/title\u003e\u003c/head\u003e\u003cbody\u003e\u003cimg id='test2' src=\"/__build/images/logo_f7b644e2086e41139fa132fd229450f4.gif\" /\u003e\u003cimg id=\"test1\" src=\"/__build/images/test4_df538a9696eb4c032286f7f6bc0d1708.jpg\" /\u003e\u003cscript src=\"https://static.yiji.com/resource/lib/jquery/1.11.2/jquery.min.js\"\u003e\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e\n\n结合html-webpack-plugin，在入口html中也可以使用img标签加载图片，不会打包失败\n\nplugins:[\n    new HtmlWebpackPlugin({\n        template: 'html-withimg-loader!'+path.resolve(srcDir, 'xxx.html'),\n        filename: 'xxx.html'\n    })\n]\n\n\n**注意，必须请求虚拟目录/__build/下的html才是处理后的html，新手可能不知道这个，如：127.0.0.1/__build/xxx.html**\n\ngithub地址：https://github.com/wzsxyz/html-withimg-loader\n\n## 支持查询参数：\n\n* query.exclude 匹配该参数的图片路径不进行处理。例如：\n\n    {test: /\\.html$/, loader: 'html-withimg-loader?exclude=/upload/'},\n\n则如：src=\"/upload/head.png\"这个图片路径将不会被处理。暂不支持正则表达式字符串。\n\n* query.min 默认会去除html中的换行符，配置min=false可不去除\n* query.deep deep=false将关闭include语法嵌套子页面的功能\n\n    require('html-withimg-loader?min=false!xxx.html');\n\n## 更新记录：\n\n### 0.1.15\n\n* 增加了对link标签href图片路径的处理\n\n### 0.1.13\n\n* 增加了exclude查询参数，用于排除特定的图片\n\n### 0.1.11\n\n* 进行了一些合理化修改，绝对路径的图片，非静态图片(如以.htm结尾的图片路径)不会再被处理到\n\n### 0.1.10\n\n* 修复img里面data-src这种属性被错误匹配、以及空的src造成编译失败的问题\n\n### 0.1.9\n\n* 修复了编译后图片路径没有引号的问题\n\n### 0.1.8\n\n* 修复了该loader被配置多次时，文件被反复编译引起异常的问题\n\n### 0.1.7\n\n* 修复了min=false时的换行符问题\n\n### 0.1.6:\n\n* 修复了不以/、./、../开头的不规范图片路径造成模块无法找到的问题\n\n### 0.1.5：\n\n* 解决了页面中包含单引号会编译异常的bug","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwzsxyz%2Fhtml-withimg-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwzsxyz%2Fhtml-withimg-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwzsxyz%2Fhtml-withimg-loader/lists"}