Webpack5 -- Assest Module
💡
原文中文，约2000字，阅读约需5分钟。
📝
内容提要
Webpack5引入了Asset Module，用于加载静态资源，如图片和字体。该模块优化了资源加载方式，包括asset/resource、asset/inline和asset/source等类型。用户可以自定义输出文件名，并通过设置规则控制资源大小的临界值，以决定使用行内或URL形式引入资源，同时支持旧的loader语法。
🎯
关键要点
- Webpack5引入了Asset Module，用于加载静态资源，如图片和字体。
- Asset Module优化了资源加载方式，包括asset/resource、asset/inline和asset/source等类型。
- 用户可以自定义输出文件名，通过修改output.assetModuleFilename。
- 可以设置规则控制资源大小的临界值，决定使用行内或URL形式引入资源。
- 支持旧的loader语法，使用新的行内加载语法以兼容旧的loaders。
❓
延伸问答
Webpack5的Asset Module有什么主要功能？
Webpack5的Asset Module用于加载静态资源，如图片和字体，并优化了资源加载方式。
如何自定义Webpack5中静态资源的输出文件名？
可以通过修改output.assetModuleFilename来自定义输出文件名。
Webpack5中如何控制资源引入的大小临界值？
可以通过设置rules中的dataUrlCondition.maxSize来控制资源引入的大小临界值。
Webpack5的Asset Module支持哪些类型的资源加载？
支持asset/resource、asset/inline和asset/source等类型的资源加载。
如何在Webpack5中使用旧的loader语法？
在使用旧的loader时，需要设置type为'javascript/auto'以防止重复加载资源。
Webpack5的Asset Module如何处理小于8kb的资源？
默认情况下，小于8kb的资源会以行内形式引入，超过则以URL形式引入。
➡️
