Webpack-第 5 篇：Webpack 5 中的资源模块

Webpack-第 5 篇：Webpack 5 中的资源模块

一、资源模块类型（asset/resource、asset/inline 等）介绍

（一）asset/resource

• 作用：将资源处理为单独的文件，并输出到指定的输出目录，同时返回文件的公共 URL。类似于之前使用 file-loader 的功能。
• 适用场景：适用于较大的文件，如图片、字体文件等，将它们作为独立的资源进行管理，方便浏览器进行缓存和加载。

（二）asset/inline

• 作用：将资源转换为 Data URL 形式，并嵌入到 JavaScript 模块中。这样可以减少 HTTP 请求，提高页面的加载速度。
• 适用场景：适用于较小的文件，如小图标、小图片等，将它们内联到代码中，避免额外的请求开销。

（三）asset/source

• 作用：将资源以源代码的形式导出，即直接返回文件的内容。