遇到的问题: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模板