webpack配置打包后图片路径出错的解决
问题
项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了。
图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在。
打包后文件目录如下:
可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了
方法一
查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理。
module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] }
它的作用是当文件大小小于limit限制时会返回一个base64串,其实就是把图片资源编码为base64串放在CSS文件里,这样就可以减少一次网络请求,因为每一张图片都是需要从服务端去下载的。但是如果文件太大了就会导致base64串很长,那放在CSS文件里面就会导致文件很大,CSS的文件下载时间变长,就得不偿失了,所以会有一个limit参数,在这个范围内的才会被转成base64串,它的单位是字节。对于这个问题,该loader还提供了一个publicPath参数,目的是修改引用的图片地址,默认是当前路径,那直接改它就可以了,即在options节点下添加一个参数publicPath: '../../'。
module: { rules: [ ... { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, publicPath: '../../', //你实际项目的引用地址前缀 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ... ] }
方法二
webpack.base.conf.js里还有一条规则,每一个vue文件都会经过vueLoaderConfig处理
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, ... ] }
vueLoaderConfig位于build/vue-loader.conf.js,它又调用了build/utils.js的cssLoaders的方法。
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) }
如果是生产环境options.extract值为true,会调用这个ExtractTextPlugin插件做处理,它的作用是抽离项目中引用的样式文件到一个独立的CSS文件中,这样就可以一次加载所有的CSS文件,相当于CSS文件并行加载,可以减少网络请求次数,更多优点及使用可以查看ExtractTextWebpackPlugin。回到这个问题,它还有一个参数就是publicPath,可以覆盖所指定的loader的publicPath配置,那么就跟前面的配置一样,可以给所有的loader统一配置引用文件的路径地址。
另外这里的user:loader实际上是返回一系列的loader的集合,cssLoaders的返回是
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
这也就是即便你没有在webpack.base.conf.js中配置sass-loader也能使用SASS语法的原因。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python自学成才之路 死锁的解决方案
- C++核心准则T.40: 使用函数对象向算法传递操作
- web页面性能优化总结及原理解释
- C++核心准则T.41:在模板概念中只对本质属性定义需求
- Linux实用技巧——mail发送邮件命令以及中文乱码解决
- Julia机器学习实战——使用Random Forest随机森林进行字符图像识别
- Python函数——Numpy size()
- Day 1:二维数组中查找
- Day 2:替换空格
- Prometheus监控神器-Kubernetes篇(三)
- julia简易教程——安装Julia+jupyter notebooks
- Julia 终于正式发布了
- awk 列求和计算
- C++复习笔记——0_零碎问题及解决笔记
- C++复习笔记——C++ 关键字