在在Webpack中用中用url-loader处理图片和字体处理图片和字体
一、处理图片文件一、处理图片文件
默认webpack无法处理css文件中的url地址 在打包时会报错
无论是图片还是字体库 只要是url地址 都无法处理
解决方法：解决方法：
在项目根目录下输入cnpm i url-loader file-loader -D
安装url-loader和file-loader
(url-loader内部依赖于file-loader)
然后在配置文件webpack.config.js中进行配置配置loader：
var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
entry:path.join(__dirname,"./src/main.js"),
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
// 所有webpack插件的配置节点
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,"./src/index.html"),
filename:"index.html"
})
],
// 配置第三方loader模块
module:{
rules:[
// 第三方模块的匹配规则
{test:/\.css$/,use:["style-loader","css-loader"]}, // 处理css文件的loader
{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader"} // 处理图片url的loader
] }
}
使用url-loader打包之后 在页面中 默认会将路径以base64编码编码 减少图片的二次请求
关闭默认的以关闭默认的以base64编码：编码：
进行配置：
给url-loader传参 格式和网页url地址传参完全一致 在url-loader后面加问号传递参数即可
属性名：limit
设定一个大小范围 当图片大于或等于给定的limit值(单位byte) 则不将url转换为base64格式 反之进行转换
格式：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=图片大小"}
如何查看图片大小：如何查看图片大小：
右击图片 – 属性
注注：若图片长度大于三位 每三位要以逗号进行分隔
评论0
最新资源