首页 > Web开发 > 详细

14 webpack中url-loader的使用

时间:2019-11-17 18:08:02      阅读:81      评论:0      收藏:0      [点我收藏+]

默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是URL地址,都处理不了,需要第三方loader
1.安装loader

cnpm i url-loader file-loader -D   //file-loader是url-loader的内部依赖,在配置文件中不必配置file-loader

2.配置文件webpack.config.js新建第三方的匹配规则

module:{//配置所有第三方loader模块的
    rules:[//第三方模块的匹配规则
    {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7632&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
    //limit给定的值,是图片的大小,单位是byte,如果我们音乐的图片,大于或等于给定的limit值,
    则不会被转为base64格式的字符串,如果图片小于给定的limit值,则会被转为base64的字符串   
    //name=[name].[ext]:name属性指向原来的名称,例test.jpg
    //[hash:8]:取前8位hash值
    ]
}

14 webpack中url-loader的使用

原文:https://www.cnblogs.com/songsongblue/p/11876991.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!