最近在webpack配置过程，发现官方对这块的配置写的太少了，不少坑，网上搜索结果也不匹配。只好自己配置了。对url-loader 反复的结果反复打包，最终得出了结论：对于css中引入图片的最大的体积値或者更大作为limit值,对于vue页面引用的都放入图片（images即publicPath）文件夹。为什么呢？
test: /\.(jpe?g|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
esModule: false, // 不加的话会有这种情况 img属性src="[object Module]"
limit: 1024 * 100, // 当大于100kb时候，将文件打包到publicPath中
outputPath: 'images', // 将文件打包到哪里
publicPath: 'images/',
name: '[name].[hash:8].[ext]'
}
}
]
options的其他参数我已经有标识，在此不再做解释。
-
options中的publicPath+name=html和css引用路径的全写，那也就意味着，如果publicPath是../images/ 会导致页面上的引用路径出错，而如果publicPath改成了images/，那么css引用的路径会出错,对比以下2张打包图。
publicPath是../images/publicPath是images/ 现在既然知道矛盾问题所在了，所以问题就是如何解决html和css文件引入路径的冲突呢？没错，那就是我前言中的那段加粗的话了。
以上。
