一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
以下内容，有问题请指正。
故事背景：
小程序项目转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请求，具体参考正确答案
总结：
学习webpack很有必要，就这样一件小事我研究了两天=.=
