webpack配置打包后图片路径出错的解决

Webpack配置打包后图片路径出错的解决 在使用Webpack进行项目打包时，常见的一个问题是图片路径出错的问题。这个问题的出现是因为Webpack在打包时会对图片进行处理，导致图片的路径出错。本文将介绍两种解决该问题的方法。 问题描述 在开发环境下，项目工作正常，但是当打包后，图片不见了，检查元素后发现路径出错了。图片路径是这样的：`background: url(/static/img/bg_camera_tip.bd37151.png)`, 但该路径下文件并不存在。 问题原因 这个问题的原因是Webpack在打包时对图片的处理。Webpack使用url-loader来处理图片文件，这个loader的作用是当文件大小小于limit限制时会返回一个base64串，把图片资源编码为base64串放在CSS文件里，这样就可以减少一次网络请求。但是，如果文件太大了就会导致base64串很长，那放在CSS文件里面就会导致文件很大，CSS的文件下载时间变长，就得不偿失了。 解决方法一 解决这个问题的一种方法是修改url-loader的配置。在webpack.base.conf.js文件中添加一个publicPath参数，目的是修改引用的图片地址，默认是当前路径，那直接改它就可以了。 ```javascript module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, publicPath: '../../', // 你实际项目的引用地址前缀 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] } ``` 解决方法二 另一种解决方法是使用vueLoaderConfig里的cssLoaders方法。在build/vue-loader.conf.js文件中，vueLoaderConfig调用了build/utils.js的cssLoaders方法。 ```javascript if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } ``` 这个方法使用ExtractTextPlugin插件来抽离项目中引用的样式文件到一个独立的CSS文件中，这样就可以一次加载所有的CSS文件，相当于CSS文件并行加载，可以减少网络请求次数。extract参数的值为true时，会调用这个ExtractTextPlugin插件做处理。 总结 在Webpack配置打包后图片路径出错的问题可以通过修改url-loader的配置或使用vueLoaderConfig里的cssLoaders方法来解决。这些方法可以帮助你解决图片路径出错的问题，提高项目的加载速度和用户体验。