故事背景

小程序项目转h5，taro框架。代码几乎直接ctrlC+ctrlV就可以直接使用，顶多遇到一些样式问题、h5不兼容小程序的问题，改改就完事了，开发过程十分顺利！直到……打包发布到服务器，点开链接后，首页缺失了很多图片……

寻找原因

缺失的都是css里background：url()引入的背景图片，经过一些列问题查找，终于找到原因。 webpack打包时，小于等于8k的图片会被转成base64，大于8k 则转为寻找相对路径（相对于html）的图片文件夹里的图片。

imageUrlLoaderOption: { limit: 8192, //限制打包图片的大小： name: 'images/[name]-[hash:8].[ext]', //images:图片打包的文件夹； //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码 //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。 }

看下我们的打包目录

看下浏览器上背景图路径

问题出现了！css被打包进了css文件夹，所以图片路径就会变成寻找css文件夹里的图片

解决方法

将css直接打包在外层，和index.html平级。加以下代码

miniCssExtractPluginOption: { filename: '[name].css', chunkFilename: '[id].css' }

网上有很多解决方法是说在UrlLoader里，设置publicPath为'../'，但这样html里img标签src路径就会错误。

自问自答

1，为什么小于8k的图片会转为base64呢？

答：因为转成base64会和js一起加载，减少http请求，具体参考正确答案