一般情况下,webpack无法处理css中的url地址(背景图片、字体等),所以需要使用插件来进行处理
npm i url-loader -d
npm i file-loader -d //基于url-loader的依赖
然后在webpack.config.js进行配置修改
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'},
其中 ? 之后的是传参配置
limit=xxx 设置图片base64转化的阈值,如果图片大于1000kb不适用base64显示,小于则使用base显示
使用的hash网络地址路径
使用的base64地址路径
name=[hash:8]-[name].[ext]
[hash:8]地址路径的前8位用hash的前8位表示
[name].[ext]表示使用图片的原名字(注意如果多个div的图片路径为不同路径,但是使相同名字的话,要加[hash]前缀,否则图片只会显示相同名字的最后一张)