在Webpack中⽤url-loader处理图⽚和字体的问题Webpack 是⼀个前端资源加载/打包⼯具。它将根据模块的依赖关系进⾏静态分析，然后将这些模块按照指定的规则⽣成对应的静态资源。⼀、处理图⽚⽂件
默认webpack⽆法处理css⽂件中的url地址在打包时会报错
⽆论是图⽚还是字体库只要是url地址都⽆法处理
解决⽅法：
在项⽬根⽬录下输⼊cnpm i url-loader file-loader -D
安装url-loader和file-loader
(url-loader内部依赖于file-loader)
然后在配置⽂件fig.js中进⾏配置loader：
var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")
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=图⽚⼤⼩"}
如何查看图⽚⼤⼩：
css渐入渐出动画
右击图⽚ - 属性
注：若图⽚长度⼤于三位每三位要以逗号进⾏分隔
496886要写成496,886
例：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886"}
若不进⾏base64的转换
图⽚的名称会默认变成⼀串Hash字符串以防⽌图⽚重名
可通过配置不使⽤默认的改名为Hash字符串：
在url-loader后⾯加上name=[name].[ext]即可
[name]意为：之前是什么名称打包之后也叫什么名称
[ext]意为：之前是什么后缀名打包之后也叫什么后缀名
例：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[name].[ext]"}
否则由于打包后的url引⽤的直接是⽂件名.后缀名的格式若有重名的图⽚即使不在同⼀个⽂件夹下
也会出现引⼊的图⽚重复
为避免此问题需要将名称改为不重复的
若既要不改⽂件名⼜要避免图⽚重复问题
可配置为：{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"}
name=[hash:8]-[name].[ext]的意思是：在图⽚前⾯带上32位hash值的前8位中间⽤短横杠进⾏连接具体的hash值长度可根据需要设置但不能超过32 因为hash值最⼤只有32位⼆、处理字体⽂件
在main.js⾥引⼊字体⽂件：
若通过路径的形式引⼊node_modules中相关的⽂件可省略node_modules
若不写node_modules 默认会从node_modules⾥查
例：
bootstrap.css⽂件在node_modules/bootstrap/dist/css下
但在引⼊的时候可以这么写：
import "bootstrap/dist/css/bootstrap.css"
然后同样在fig.js中进⾏配置即可：
字体⽂件也是使⽤url-loader进⾏处理
var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")
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"]},
{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=496,886&name=[hash:8]-[name].[ext]"},
{test:/\.ttf|eot|svg|woff|woff2$/,use:"url-loader"} // 处理字体⽂件的loader
]
}
}
到此这篇关于在Webpack中⽤url-loader处理图⽚和字体的⽂章就介绍到这了，更多相关在Webpack中⽤url-loader处理图⽚和字体内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。