webpack中url-loader的使用

使用url-loader的原因：webpack无法处理url地址

1.处理图片url

1. 安装第三方插件
   安装命令

npm i url-loader file-loader -D

url-loader内部依赖file-loader
配置webpack.config.js
在module.exports中新增属性

 module:{
        rules:[
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'}
		]
}

当要处理的文件中有一下.文件，就会找到url-loader进行处理
2. url-loader配置
图片格式
url-loader?limit=字节byte
当图片大小大于或等于该值时，不会转成base64格式的字符串
当图片大小小于该值时，就会转成base64格式的字符串
图片名称
url-loader?name=[name].[ext]
防止被覆盖
url-loader?name=[hash:8]-[name].[ext]

2.处理字体文件url

配置webpack.config.js
在module:rules:中增加一个对象

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

在加载bootstrap中的字体文件时，会无法识别这些后缀，所以要增加