webpack 打包html img src问题

最近，在看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里面了。
后面还有还不知道还有什么坑。
就这样。。。。