最近，在看webpack打包图片的一些知识，首先webpack打包图片用的是url-loader;
当前loader下面有一些options
其中的limit：小于当前值的图片会转成base64，大于当前值的会按下面设置的目录输出；
name:设置图片的名字。如‘[name].[ext]’则代表与原图片名字保持一致；
publicPath:在路径名称前拼上的公共路径；
outputPath:设置打包的路径；
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'url-loader',
options: {
// 把较小的图片转换成base64的字符串内嵌在生成的js文件里
limit: 1024 * 1, //10000
// 路径和生产环境下的不同，要与修改后的publickPath相结合
// name: 'images/[name].[ext]?[hash:7]',
name: '[name].[ext]',
publicPath: '../', //会在打包后图片路径拼上该设置
outputPath: 'images/'//输出的图片会生成并放在当前设置的文件夹下
}
}
这样设置后，css里面引入的图片没有问题，可以正常打包，但是html里面通过img src动态引入的图片则不会被打包；
需要在js里面require一下；
filters:{
formatImg(name) {
return require(`../public/images/main_${name}.png`);
},
}
但是，这样require的图片，虽然被打包了，但是图片路径是不对的；
如果base64了之后没有问题，因为已经被base64到js里面了。
由于我们前面已经设置了publicPath，所以打包后的页面img标签里面的图片也会变成src='../images/xx.png'
所以，我们只能让css里面的引入的图片加上'../',html标签引入的不能带'../';
那我们就需要
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: 'css-loader',
publicPath: '../', //这行是重点啊，这样就会在css引入的图片里面加上该配置
})
}
}
},
好了，这下就可以了，当然需要把前面的url-loader里面的publicPath:'../'注释掉。
写在后面：
就这样就写完了，我可是断断续续查了好几天啊
网上大多数都是基于cli的，看解决方案看的我一脸懵逼。
对了，这样就可以不用copy静态图片到dist里面了。
后面还有还不知道还有什么坑。
就这样。。。。
