要处理jpg、png等格式的图片,我们也需要有对应的loader: file-loader
file-loader的作用就是帮助我们处理import/require()等方式引入的一个文件资源,并且会将它放到我们输出的文件夹中;
当然也可以修改它的名字和所在文件夹
安装该loader
npm install file-loader -D
使用require或import引用图片资源
img.src = require('../image/1.jpg').default;
-----------------------
import myImg from '../image/2.jpg';
img.src = myImg;
webpack.config.js
{
test:/\.(png|jpe?g|gif|svg)$/,
use:'file-loader'
}
- 有时候我们处理后的文件名称按照一定的规则进行显示:
比如保留原理的文件名、扩展名,同时为了防止重复,包含一个hash值; - 这个时候我们可以使用PlaceHolder来完成,webpack给我们提供了大量的placeHolders来显示不同的内容
可以在webpack的文档中查阅自己需要的placeHolder; - 最常用的placeHolder
[ext] 处理文件的扩展名;
[name]:处理文件的名称;
[hash]:文件的内容,使用MD4的散列函数处理,生成的一个128bit的hash值(32个16进制)
[hash:< length >]:截取hash的长度,默认32个字符太长了;
[path]:文件相对于webpack配置文件的路径
{
test:/\.(png|jpe?g|gif|svg)$/,
use:[
{
loader:'file-loader',
options:{
name:"img/[name].[hash:6].[ext]",//img目录
}
}
]
}