webpack 背景图路径错误导致图片出不来

自己学习webpack的时候，打包之后，发现 img标签中的src图片能够现实出来，但是css中的背景图不能显示出来？？？

解决：配置url-loader

              {
                    test:/\.(gif|png|jpg)\??.*$/,
                    use:{
                        loader:"url-loader",
                        options:{
                            limit: 1024,
                            name:"[name].[ext]",
                            outputPath:"assets/image",  //会将图片资源都打包到 
                                                          dist/assets/images/下
                            publicPath: '../../assets/image'
                        },
                    }
                },

如图： url-loader中用正则匹配图片后，options参数中配置跟路径有关的两个选项 outputpath 和 publicPath

这两个长的很像，

其中，

outputpath : 主要是针对生成的图片路径  

                    比如，开发时，图片路径都是在src/assets/images 下， 如果不加 outputpath ，打包时就会把图片都打包在dist目录

下 ，而不是 dist/assets/images/XXX.png 这种路径下了。

所以，ouputpath是跟生成的图片路径有关。

 

publicPath :  这个则是生成的页面中对图片路径的引用时，加上publicPath。

 

如上案例， 如果不加上这个参数，背景图生成的路径会变得很糟糕。不按自己的预期进行

多了个assets的目录， 然后图片没有出来。

这个时候在浏览器输入生成的图片路径 （http://localhost:8080/assets/image/contact.png）是ok的，图片有出来。

 

html中的img标签的中图片资源引用也是错的~

加上 publicPath ，让文件引用直接使用publicPath+资源名~，这时图片路径就正确啦~~