webpack-处理图片等其他资源
1、file-loader
- 处理jpg、png等格式的图片,我们也需要有对应的loader:file-loader
- file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源,并且会将它放到我们输出的文件夹中;
安装:npm install file-loader -D
引入图片资源方式:
require("../img/ali.png").default;
import zznhImage from "../img/ali.png";
配置:
{
test: /\.(png|jpe?g|gif|svg)$/,
use: 'file-loader'
}
配置名称:
我们可以对转化后的文件设置名称,比如保留原来的文件名、扩展名,同时为了防止重复,包含一个hash值等;
通过PlaceHolder:webpack给我们提供了大量的PlaceHolders来显示不同的内容
name:配置名称
outputPath:配置输出的文件夹
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader:'file-loader',
options:{
// 简写 name:"img/[name].[hash:6].[ext]",
name:"[name].[hash:6].[ext]",
outputPath:"img"
}
}
]
}
如果无法显示(与安装的loader版本有关系):在引入图片文件后面添加default
2、url-loader
url-loader和file-loader的工作方式是相似的,但是可以将文件转成base64的URL,会被嵌入到bundle.js中
file-loader只是将文件复制
安装:npm install url-loader -D
配置:
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
name: "img/[name].[hash:6].[ext]",
limit: 100 * 1024
}
}
]
}
优化:设置limit,100kb以下转化base64
- 针对小文件,转化为base64
- 针对大文件,将文件进行复制
- url-loader可以代替file-loader