图片在webpack中会被当做模块,但是webpack本身无法处理图片,我们需要对应的 loader
代码目录:
演示代码下载链接:https://webchang.lanzous.com/i1NH0kfu4ti 密码:gq4b
使用url-loader
我们在normal.css文件中使用img文件夹下的图片当做背景图片(对于css文件的处理已经提前配置好了)
body {
background-image: url("../img/2.png");
}
如果我们现在直接打包,会报错。
查阅官网 https://www.webpackjs.com/loaders/url-loader/ ,发现我们需要安装 url-loader
npm install --save-dev url-loader
接下里在webpack.config.js文件中进行下面的配置:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 //对图片的大小做限制,8kb
}
}
]
}
]
}
}
当我们安装了 url-loader 时,webpack在加载图片的时候会先将图片的大小和 limit 的限制大小做一个比较。
测试一
我们使用的 2.png图片的大小 小于8kb,打包后在index.html文件中引入打包生成的bundle.js文件,发现html文件显示正常
结论:当加载的图片,小于limit时(如果limit是8192,那么8192 = 1024 * 8,就是8kb),会直接使用 url-loader 对图片进行加载,并将图片编译成base64的字符串形式,此时不需要一个单独的文件来存储该图片。
测试二
我们在css文件中使用1.jpg图片,该图片的大小大于8kb。
body {
background-image: url("../img/1.jpg");
}
重新打包运行,发现报错了。原因在于我们使用的图片大小超过了 在 webpack.config.js中配置的url-loader的limit的大小。提示我们项目中缺少 file-loader
所以,我们需要安装file-loader。
npm install --save-dev file-loader
结论:如果加载的图片的大小 大于 limit时,需要使用file-loader,而file-loader不需要特别配置,只需要安装一下就可以了。
我们重新进行打包,发现在dist文件夹下多了一个图片文件,这个图片就是我们刚使用的图片,它的名字通过hash自动生成的,是唯一的。但是此时index.html文件不能识别图片,通过路径我们可以看出来它会在项目根目录下寻找这个图片,但是此时打包后的图片在dist文件夹下。如图:
我们需要进行配置来解决这个问题:
在 webpack.config.js 文件中的 output属性里增加一条配置
publicPath:"dist/"
接下里重新进行打包,运行,正常。
图片文件处理 – 修改文件名称
我们发现webpack自动帮助我们生成一个非常长的名字
- 这是一个32位hash值,目的是防止名字重复
- 但是,真实开发中,我们可能对打包的图片名字有一定的要求
- 比如,将所有的图片放在一个文件夹中,跟上图片原来的名称,同时也要防止重复
只需要在 url-loader的配置中加一条:
重新打包运行,发现dist文件夹下多了一个img文件夹,img文件夹下放置打包后的图片