用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模板