遇到的问题: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,来呀,互相关注呀