webpack5-资源模块

原创已于 2022-10-09 18:26:27 修改 · 366 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

于 2022-10-09 18:07:23 首次发布

介绍Webpack5引入的资源模块(assetmodule)特性，包括asset/resource、asset/inline、asset/source及asset四种类型，及其如何替代原有的file-loader、url-loader等，简化资源文件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资源模块（asset module）:是一种模块类型，它允许使用资源文件（如字体、图标、图片等），而无需配置额外的loader；

我们都知道webpack基于node，默认可使用js、json文件，如果需要使用其他文件需要loader解析，在webpack5之前使用资源文件是需要loader支持的；

资源模块通过添加4种新的模块类型来替换这些loader

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
- 例如页面中的img图片资源，打包的时候是将url打包入代码中，图片资源单独打包并导出对应的url
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
- 例如：一些小的图片会转换为base64将这个data URI打包到代码中
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
- 例如：js文件中用了txt文件中的内容，正常js是不能读取文件内容的通过asset/source可读取（个人觉得原理：通过nodejs读取配置相应的文件并返回）
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

module:{
    rules:[
    {
        test: /\.(png|jpg|jpeg|gif)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {//小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
            maxSize: 8 * 1024,
          },
    },
    generator: {
      filename: 'assets/images/[hash][ext]',
    },
  },
  { test: /\.(woff(2)?|eot|ttf|otf)$/, type: 'asset/resource' }
]
}