文件处理
开发项目的时候，会使用许多文件资源，比如各种格式的图片，Svg，字体图标等等，这些都是需要配置相应的Loader转换之后，Webpack才能够正确解析它们。在本章节，我们将介绍如何在Webpack中处理各种文件资源。
处理图片资源
针对各种类型的图片处理最常用的就是File-loader和Url-loader。
File-loader的使用
File-loader的使用很简单，如其他Loader使用一样，需要在module.rules中进行配置：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
}
}
]
}
]
}
}
配置完成后，使用url() ,require或者import引入图片资源，该 loader会对相应资源进行处理，并提供相关资源的访问路径。
值得注意的是当你使用require引入图片资源的时候，需要特殊的处理，因为File-loader新版本默认使用了esModule语法，所以require引入的资源是一个[object module]，导致图片不显示。可以使用如下两种办法解决：
1.配置File-loader，关闭esModule
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false
}
}
]
}
]
}
}
2 在使用require引入图片的时候，使用default属性取值,例如reqire(‘./xxx/xxx.png).default。
通过配置name选项可以规范打包后产生的图片名称和路径：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'dirname/[hash:8].[ext]'
}
}
]
}
]
}
}
使用该配置，就会在最后的输出目录中新增dirname目录，里面存放的就是相关的图片资源。图片资源的名称是有8位数的hash值和资源扩展名构成的。
除了使用name选项配置输出图片资源的路径，还可以使用outputPath进行输出路径的配置：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: "driname"
}
}
]
},
]
}
}
该配置和使用name配置输出路径拥有相同的效果。
Url-loader的使用
Url-loader也可以用来处理图片资源的处理，相对于File-loader，Url-loader可以通过配置limit，当资源小于limit指定的大小的时候，会返回base64格式的DataURL，实现图片资源内敛，来减少资源的加载。如下配置：
module.exports = {
module: {
rules: [
{
test: /\.(jpg|png|gif|JPG|PNG)$/,
loader: 'url-loader',
options: {
esModule: false,
limit: 90000,
name: 'dist/images/[hash:5].[ext]',
fallback: 'file-loader',
}
}
]
}
}
当资源小于设置的临界值的时候，就会返回Base64格式的DataURL，fallback表示图片资源大小超出限制的时候，使用什么工具进行处理，默认是file-loader。
处理Svg
Svg由于其矢量不失帧的特点，在项目中需要使用样式展现单一的icon的时候，备受欢迎。同样要使用Svg也需要相应的Loader进行处理。使用File-loader和Url-loader也可以处理Svg，这里介绍一下Svg的内联处理，配置如下：
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
'svg-inline-loader'
]
}
]
}
}
该Loader可以保留Svg的格式并把Svg注入到项目代码中，实现Svg的内敛加载。
使用Svg-inline-loader可以精细化展现Svg的标签，更多配置请前往https://www.npmjs.com/package/svg-inline-loader进行查阅。
处理字体图标
这里演示一下如何在Webpack中集成阿里矢量图，需要使用的Loader为Url-loader或者File-loader。配置如下：
module.exports = {
module: {
rules: [
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
}
]
}
]
}
}
之后在入口文件中引入iconfont.css文件，给dom元素添加对应的className，即可正确使用字体图标。
本章节提供案例源码下载:https://gitee.com/mvc_ydb/webpack/blob/master/handleFile.zip