用webpack写一个自己的loader（案例：webpack图片不打包问题）

遇到的问题：webpack搭建项目的时候，因为使用file-loader将图片打包，但是index.html的模板中的图片，因为没有被依赖并不会被一并打包。

解决方案：（偷懒可以直接 npm i html-reqimg-loader  --save-dev ）

找到了一个html-withimg-loader，它似乎可以解决这个问题

但是用上了之后发现，它不支持我通过resolve.alias别名引入的图片

解决这个问题也不难，进去改改html-withimg-loader的代码，或者......

我们也可以自己撸一个。

开始干活：

1.创建一个文件夹存放自己的loader

2.module.exports = (source) => {return source}，最简单的loader出来了，可以跳过第三点，往下跑，玩一玩它

3.撸出代码，逻辑上是：

• 正则匹配出src=“xxx”（xxx的路径得写对）
• 把xxx用require（‘xxx’）替换（这里要注意一下细节，不然会变成字符串哦）
• 最后输出字符串module.exports = 替换好的html模板

 

module.exports = (source) => {
  const reg = /src\=\"([\w\/\.\@]+)\"/ig;
  source = source.replace(reg, function (str) {
    let data = reg.exec(str);
    reg.lastIndex = 0;
    if (!data) {return str};
    if (data.indexOf('http') > -1 || data.indexOf('https') > -1) {return str};
    return `src="\$\{require('${data[1]}')\}"`;
  })
  const result = `module.exports = \`${source}\``;
  return result;
}

4.让我们回到webpack.config.js，这里我们直接往rules里加是不行的，所以我们还需要resolveLoader

（这里我是放在loader文件夹里）

把刚刚loader位置配上去（其实也可以publish一个npm包上去哦，这样第四点就可以略过）

5.配置好之后，我们就和往常一样引入这个loader

6.module.rules.test: /\.(htm|html)$/i，我们这样来过滤处理html的文件，module.rules.use: [你的loader名称]

7.跑起来看看吧

---

小尾巴：觉得有用的话就点个赞吧(*^__^*) 

GitHub：https://github.com/cmyh100，来呀，互相关注呀