webpack打包静态资源遇到的问题

在使用vue项目的时候，如果遇到图片大于10KB的图片时，在本地开发环境没有问题，但当打包到服务器上时，就会发现assets下大于10KB的图片找不到了，查找图片读取的路径，发现图片路径多了一层/static/css,而小于10KB的图片会被编译成base64的代码。所以不存在引用路径的问题。再查看其它项目，大于10KB的图片一样能被正确引用，查看打包后的文件发现其它项目没有独立打包出来的CSS文件，CSS代码全打包到了JS中。

在网上查询后，终于发现问题所在，css是被JS引入或者写在vue中的，css文件首先会被less，postcss处理，然后再被ExtractTextPlugin处理，ExtractTextPlugin将JS中的css全部抽离到app.css文件中，首先将options.extract设为false，关闭抽离css功能，这样就可以将css代码打包到JS中，不会产生CSS引用图片路径出错的问题了，现在的问题就确定是ExtractTextPlugin抽离CSS文件时没有转换资源引入路径，通过查询资料得知，可以通过添加publicPath:"../../"解决该问题。该配置在vue项目build下的utils中。

也有人说通过将webpack中assetsPublicPath写为服务器上的绝对路径，但是这种方法太过繁琐，也不够优雅，没有从根本上解决这个问题。一般来说，assetsPublicPath写为'./'相对路径就好了。就能正确引用打包出来的js和css文件了。

文章参考：http://www.jb51.net/article/134448.htm