webpack打包处理img

一般情况下，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]前缀，否则图片只会显示相同名字的最后一张）