webpack 5 原生支持资源模块，取代 url-loader、file-loader 和 raw-loader；提供 asset/resource、asset/inline、asset/source、asset 四种类型，分别对应文件输出、base64 内联、源码导出和自动阈值分发，默认阈值 8 kib。
Webpack 5 开始原生支持资源模块（Asset Modules），完全取代了过去需要手动安装和配置的 url-loader、file-loader 和 raw-loader。不用再装额外 loader，也不用写冗长的 use 配置，只需在 module.rules 中声明 type 即可。
四种资源模块类型及对应用途
Webpack 5 提供了四个内置模块类型，各自承担不同角色：
-
asset/resource：把文件单独输出到构建目录，导出其 URL 路径 —— 等价于旧版
file-loader -
asset/inline：把文件转为 base64 Data URL 并内联进 JS 模块 —— 等价于
url-loader且limit设为无穷大 -
asset/source：直接导出文件原始内容字符串 —— 等价于
raw-loader -
asset：自动判断 —— 小于阈值转 base64，否则单独输出 —— 等价于
url-loader+file-loader组合效果（默认阈值 8 KiB）
常用图片处理配置示例
以处理 .png、.jpg、.gif、.svg 为例，推荐使用 asset 类型实现智能分发：
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 100 * 1024 // 100KB 以下转 base64
}
},
generator: {
filename: 'img/[name]_[hash:6][ext]'
}
}
]
}
注意：generator.filename 控制输出路径与命名；parser.dataUrlCondition.maxSize 决定 base64 转换临界点。
全局资源路径统一管理
若多个资源模块共用相同输出规则，可提至 output 层级简化配置：
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[contenthash:8].js',
assetModuleFilename: 'assets/[name]_[hash:6][ext]' // 所有 asset 类型资源默认走这里
}
此时 rules 中的 generator 可省略，避免重复定义。
兼容旧代码的注意事项
升级后需检查 JS/CSS 中资源引用方式是否符合 ES 模块规范：
- JS 中必须用
import imgSrc from './logo.png'，不能用字符串路径如'./logo.png'直接拼接 - CSS 中
background: url('./icon.svg')仍可正常工作（webpack 自动解析） - 如果项目中用了
html-webpack-plugin插入图片，确保 HTML 模板里也用import或require引入，否则路径不会被 webpack 处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
