webpack图片问题解决方案

---

总结下在react中用到图片的情景

从简单到复杂

• 普通的background-image引用，小图居多，大图有限情况

只使用url-loader就ok
{test: /.png$/, loader: "urllimit=8192"}

将小图全部转换为base64格式内联到js里

• background-image引用，小图，大图都有较多

需要url-loader和file-loader搭配使用
小图转换成base64内联，大图使用file-loader发布成一个image文件夹，可以放到cdn或者本地
注意 发布时路径问题output.publicPath决定

• jsx里 img标签图片

如果此类图片较少可以提前直接放到cdn上确保能访问到，在标签内直接写cdn的引用。
如果开发环境时需要在本地有这些图片，jsx中img图片的引用方式
<img src={require('./img/ssq.png')} alt=""/>
此处为图片的真实相对路径
在webapack.config中要对此配置
{test:/\.png$/,loader:"urllimit=8192&name=img/[name].[ext]"}

此处是本地server的图片引用
<img src="/img/ssq.png" alt="" data-reactid=".0.0.1.0">
此处是编译后的代码
n.p+"img/ssq.png"

/注/
{test:/\.png$/,loader:"urllimit=8192&name=img/[name].[ext]"}
可以处理绝大多数图片问题 依赖url-loader&file-loader