（5）webpack中url-loader的使用
2024-10-09 05:07:13
为什么要使用url-loader
在前面已经介绍了css文件可以使用第三方loader去加载。
在一个项目中，也不仅仅只有html，js和css文件，还有图片文件，字体文件等等。当我们给一个css样式设置背景图片时：
你会发现，webpack打包的时候会报错。
报错：无法处理这种格式的文件，解决这个问题就需要url-loader或者file-loader。
安装url-loader
- 安装url-loader，
cnpm install url-loader file-loader –D - 在webpack.config.js中配置第三方loader
这个时候重新启动项目，你会发现图片被加载为：
我们会发现，图片的url地址被默认转化为了base64格式，如果一张图片太大的话，这样的转换反而降低效率，我们希望在图片比较小的时候加载为base64,图片较大则加载原始图片。
在webpack.config.js中如下配置：
像在url上加参数一样给url-loader设置一个limit参数（单位字节），大于或等于给定的limit值，则不会被转为base64格式的字符串，如果小于给定的limit值，则会被转为base64字符串。
我们可以发现图片的后缀已经是.png格式了，但是名称还不是图片原来的名称， 因为webpack在打包的时候防止名称重复，自动设置了hash名，如果想要使用图片原始的名称作为路径，则还需要给url-loader增加一个参数
参数分析：- name： 文件的名称
- hash-8: 取8位hash值作为文件名前缀
- name: 使用图片原始的名称
- ext：使用图片原始的后缀名
解释为什么webpack会自动给图片设置hash名，防止名称重复
如果我们在两个文件夹中分别引入两个图片名称的图片。如下所示
在html页面中新建两个div
在css样式中，分别引入这两张图片
看看webpack打包后的样式：
我们明明引入了两张不同的图片，但是他们却引入了同一张图片，因为webpack打包之后，图片会被存放在 / 目录下的内存中，仔细观察图片中的url地址，就会发现跟我们的在css样式中的引入路径并不一样，所以会出现引入同一张图片的问题。
解决问题：在url-loader中使用图片原始名称的时候，添加hash值来区别是不是同一张图片
最新文章
- 序列流 SequenceInputStream
- Code Hunters: Hello, world!
- LintCode 子树
- vs2008+qt进行开发
- 在模型中获取网络数据，刷新tableView
- 思科27亿美元收购网络安全公司Sourcefire
- 【 转】 C/C++结构体和联合体的区别
- JS与浏览器的几个兼容性问题
- 从Nest到Nesk -- 模块化Node框架的实践
- c语言文件中关于while(!feof(fp)) 循环多输出一次的问题
- 看完此文还不懂NB-IoT，你就过来掐死我吧...【转】
- 经测试，foreach循环比linq的效率高
- Echarts报错 Can't read property 'getWidth' of null
- Hibernate 再接触 事务隔离机制
- Dbutils 连接数据库
- 【LOJ】#6436. 「PKUSC2018」神仙的游戏
- VMware Ubuntu NAT 不能上网
- openal 基础知识2
- Codeforces Round #474-E(树形dp)
- Struts2的Action中访问servletAPI方式