webpack使用图片配置
程序员文章站
2024-02-01 14:29:22
...
- 在webpack中加载图片时,需要知道图片的大小。在加载图片之前,在src文件夹下创建img文件夹用来存放图片
- 将图片导入img文件夹下之后,安装url-loader,命令为:npm install --save-dev url-loader,之后在webpack.config.js文件的rules中添加以下内容
// 导入图片
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// limit代表图片最大的大小,图片小于limit时,在加载该图片时会将图片编译为base64形式的字符串
// 超过limit的图片会被压缩到dist文件夹中
limit: 12000,
// 对打包到dist文件的图片进行重新命名
// 加上中括号代表这是一个变量,根据要打包的图片进行相应的修改
// [name]代表图片名称;[hash:8]代表8位自动生成的哈希值;[ext]代表图片的后缀名
name: 'img/[name].[hash:8].[ext]'
}
}
]
}
- 其中limit代表图片的大小,单位为B,小于limit的图片与大于limit的图片会执行不同的操作来显示在页面上
小于limit的图片
- 在进行以上操作之后,对css文件进行修改,将该图片显示为背景图片
body {
background-image: url("../img/test1.jpg") ;
}
- 对项目进行打包,可以正常显示该图片
- 在显示图片时,webpack会将该图片编译为base64字符串进行调用
大于limit的图片
- 首先将该图片设置为背景图片
body {
background-image: url("../img/test2.png") ;
}
- 大于limit的图片,首先需要安装file-loader,命令为:npm install file-loader --save-dev
- 安装成功之后,对项目进行打包后,发现会将该图片打包到dist文件夹中,并且使用哈希值命名,不方便我们使用,需要在打包时规定打包之后的图片的命名方式
- 在weboack.config.js文件中的options的属性中添加name属性,格式为:img/[name].[hash:8].[ext]。代表打包后的图片存放在dist文件夹下的img文件夹中,并且名称为图片的名称.8位任意哈希值.后缀名
options: {
// limit代表图片最大的大小,图片小于limit时,在加载该图片时会将图片编译为base64形式的字符串
// 超过limit的图片会被压缩到dist文件夹中
limit: 12000,
// 对打包到dist文件的图片进行重新命名
// 加上中括号代表这是一个变量,根据要打包的图片进行相应的修改
// [name]代表图片名称;[hash:8]代表8位自动生成的哈希值;[ext]代表图片的后缀名
name: 'img/[name].[hash:8].[ext]'
}
5. 当打包项目之后,无法在页面中显示该图片信息。在页面中无法获取到打包后图片的路径,在webpack.config.js文件的output属性中添加publicPath,代表打包所有的url地址时默认在开头添加publicPath的内容
output: {
// 出口文件的路径,使用绝对路径
path: path.resolve(__dirname, 'dist'),
// 出口文件名称
filename: 'bundle.js',
// 添加dist文件夹路径,当在项目中出现url地址时,会默认在最前面添加publicPath的内容
publicPath: 'dist/'
}
- 打包项目,背景图片正常显示
上一篇: 前端基础总结之html 01
下一篇: Vue双向数据绑定原理解析及代码实现