webpack自定义loader 手写封装loader

一些细节的东西就不说明了,例如webpack的整体配置什么的,这边只是在已有webpack配置的基础上,封装&使用自定义的loader。个人觉得最好的说明方式就是直接上实例:将引用的图片url,根据环境替换成所需要的路径

1.文件目录结构

这边将自定义的static-loader放在文件夹rules内与webpack配置文件同级

(这个存放路径看个人,是可以修改的,这里说明路径地址,是因为webpack配置中需要引用该路径)

2.webpack配置

(1)配置resolveLoader

(webpack默认使用的loader路径为node_modules,可以直接在rules配置引用,

而自定义的loader,不在指定范围内是无法调用到的,即使在一开始声明require也无法正确使用,

便需要在此加入自定义loader的路径,增加webpack调用loader的范围)

(2)增加module.rules

(按照引用别的第三方loader一样配置)

3.封装自定义的功能loader

(格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 )

这只是一个简单的替换路径loader,具体别的需求的loader就可以自己编写内容了

猜你喜欢

转载自blog.csdn.net/leeleejoker/article/details/81083428