# file-loader
## 介绍
1. file-loader可以处理 import/require 方式引入的资源文件，并输出到指定文件夹 ❄ webpack5少用了
## 安装使用
### 安装 `npm install file-loader -D`
### webpack配置
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
use: 'file-loader'
}
]
}
1. 什么都不配置，直接就将资源文件打包在 webpack 配置的打包路径的根目录
2. js中， `require('./img/1.jpg')` 在file-loader 4.X，返回的是资源，在5.x以后返回的是对象，通过 `require('./img/1.jpg').default` 才能拿到资源
3. js中，除了 require 引入资源，还可以用 `import xxx from './img/1.jpg` 的方式引入资源
### webpack配置之重命名、路径
{
test: /\.(png|jpe?g|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:6].[ext]',
// outputPath: 'img' // 一般不这么用，直接在 name 上加上路径
}
}
]
}
1. 常见占位符：
[ext] 处理文件的扩展名
[name] 处理文件的文件名
[hash] 文件的内容，使用MD4的散列函数处理，生成一个128位的hash值（32个十六进制）
[contentHash] 在file-loader中和 hash 一致，但在webpack其他地方不一样
[hash:<length>] hash的长度，默认为32位
[path] 文件相对于webpack配置文件的路径
# url-loader
## 介绍
1. url-loader和file-loader差不多，但是它可以将小图转成base64 (默认将所有图片都转成base64)。 ❄ webpack5少用了
## 安装使用
### 安装 `npm install url-loader -D`
### webpack配置
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
use: 'url-loader'
}
]
}
### webpack配置之重命名、路径
{
test: /\.(png|jpe?g|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[hash:6].[ext]',
limit: 10 * 1024 // 限制转base64的大小，byte，这里是10KB
// outputPath: 'img' // 一般不这么用，直接在 name 上加上路径
}
}
]
}