feat: add options

Author: tangxiangmin

README.md

@@ -17,7 +17,14 @@ module: {
         {
             test: /\.(htm|html)$/i,
             loader: 'html-src-loader',
-            options: {} // todo
+           options: {
+                // 按需配置需要处理的标签
+               img: ["src", "data-src"], // 每个标签都可以通过数组指定多个需要替换的属性
+               link: ["href"],
+               audio: ["src"],
+               script: ["src"],
+               video: ["src"]
+           }
         },
     ]
 },
@@ -28,6 +35,16 @@ plugins: [
     )
 ],
 ```
+默认`options`为
+```js
+const defaultTagConfig = {
+    img: ["src"],
+    link: ["href"],
+    audio: ["src"],
+    script: ["src"],
+    video: ["src"]
+}
+```
 
 ## 为什么需要自定义匹配规则
 该loader主要借鉴了[html-withimg-loader](https://github.com/wzsxyz/html-withimg-loader)的一些思想，但是`html-withimg-loader`缺少对于自定义匹配规则的配置，由于原作者貌似已经停止维护了，无法提交PR，因此手动实现一个版本。

demo/webpack.config.js

@@ -42,7 +42,13 @@ module.exports = (env) => {
                 {
                     test: /\.(htm|html)$/i,
                     loader: 'html-file-loader',
-                    options: {} // todo
+                    options: {
+                        img: ["src", "data-src"],
+                        link: ["href"],
+                        audio: ["src"],
+                        script: ["src"],
+                        video: ["src"]
+                    }
                 },
             ]
         },

src/loader.js

@@ -1,13 +1,13 @@
-// const loaderUtils = require("loader-utils");
+const loaderUtils = require("loader-utils");
 
 const replaceUtil = require('./replace')
-
 module.exports = function (source) {
     this.cacheable();
-
     const callback = this.async();
 
-    let content = replaceUtil.replace(source)
+    let options = loaderUtils.getOptions(this)
+
+    let content = replaceUtil.replace(source, options)
 
     callback(null, `module.exports = \`${content}\``);
 }

src/replace.js

@@ -1,6 +1,5 @@
-// todo 开放配置接口
-const tagsConfig = {
-    img: ["src", "data-src"],
+const defaultTagConfig = {
+    img: ["src"],
     link: ["href"],
     audio: ["src"],
     script: ["src"],
@@ -13,7 +12,7 @@ function replaceAllSemicolon(content) {
 }
 
 // 使用正则解析img、audio、script、link等标签的文件引用
-function replaceTag(content) {
+function replaceTag(content, tagsConfig) {
     // todo 增加其他标签的解析方式
     const re = /<(img|link|audio|script).*?\/?>/g
     return content.replace(re, (tag) => {
@@ -23,7 +22,7 @@ function replaceTag(content) {
             let attrs = tagsConfig[tagName]
             Array.isArray(attrs) && attrs.forEach(attr => {
                 tag = tag.replace(new RegExp(`${attr}=(['"])(.*?)\\1`), function (match, $1, source) {
-                    // 不管$1捕获的是单引号还是双引号，都将属性替换为"双引号包围  
+                    // 不管$1捕获的是单引号还是双引号，都将属性替换为"双引号包围
                     return `${attr}="\` + require('${source}') + \`"`
                 })
             })
@@ -33,8 +32,10 @@ function replaceTag(content) {
 }
 
 module.exports = {
-    replace(content) {
-        return replaceTag(replaceAllSemicolon(content))
+    replace(content, options) {
+
+        let config = Object.assign({}, defaultTagConfig, options)
+        return replaceTag(replaceAllSemicolon(content), config)
     },
     replaceAllSemicolon,
     replaceTag

test/replace.test.js

@@ -63,6 +63,23 @@ describe('Replace', () => {
             expect(result).equal(`<img src="\` + require('./assets/placeholder.png') + \`" data-src="\` + require('./assets/1.png') + \`" alt="">`)
         })
 
+        // todo
+        it('should not replace when resource start with http?', () => {
+            const input = `<img src='http://shymean.com/assets/1.png' alt="">`
+
+            const result = replaceTag(input)
+
+            expect(result).equal(input)
+        })
+        
+        it('should not replace when resource start with https', () => {
+            const input = `<img src='https://shymean.com/assets/1.png' alt="">`
+
+            const result = replaceTag(input)
+
+            expect(result).equal(input)
+        })
+
     })
 })