# webpack 资源模块类型(asset module type)
## 介绍
1. 在webpack5之前，加载图片等其他资源要用到一些loader，如raw-loader、url-loader、file-loader
2. 从webpack5开始，我们可以直接使用资源模块类型（assets module type）替代上面的loader
3. 资源模块类型（assets module type）通过四种心的模块类型，替换上面的loader
asset/resource 发送一个单独文件并导出URL，之前通过使用file-loader实现
asset/inline 导出一个资源的data url，之前通过 url-loader实现
asset/source 导出资源的源代码，之前通过使用 raw-loader 实现
asset在导出一个data URI和发送一个单独的文件之间自动选择，之前通过使用 url-loader，并配置资源体积限制实现
## file-loader 的替代方案 ———— asset/resource （assets module type不需要安装，webpack5直接集成了）
### 配置方法一：直接将资源重命名，放在打包根目录
```
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource'
}
]
}
}
```
### 配置方法二：
1. 通过`assetModuleFilename` 配置路径和重命名, 路径和名称后缀等和 url-loader 的配置一致
```
module.exports = {
output: {
assetModuleFilename: 'img/[name].[hash:6][ext]' // 注意：这里的 [ext] 前面不要加“.”了，跟url-loader等的区别是，它会自动在后缀名前加 “.”
},
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource'
}
]
}
}
```
2. 通过`generator` 配置路径和重命名, 路径和名称后缀等和 url-loader 的配置一致
```
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource' ,
generator: {
filename: 'img/[name].[hash:6][ext]' // 注意：这里的 [ext] 前面不要加“.”了，跟url-loader等的区别是，它会自动在后缀名前加 “.”
}
}
]
}
}
```
## url-loader的替代方案 ———— asset/inline，只会将图片等打包成 base64
```
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset/inline'
}
]
}
}
```
## file-loader 和 url-loader的共同替代方案 ———— asset，会将图片等按照设置的大小打包成 base64
```
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset',
// 打包成图片的地址
generator: {
filename: 'img/[name].[hash:6][ext]'
},
parser: {
// 限制打包成 base64 的大小
dataUrlCondition: {
maxSize: 100 * 1024 // 100kb
}
}
}
]
}
}
```
# 加载字体文件
module.exports = {
module: {
rules: [
{
test: /\.ttf|eot|woff2?$/,
type: 'asset/resource',
generator: {
filename: 'font/[name].[hash:6][ext]'
}
}
]
}
}