webpack 5 新体验记（二）：资源模块处理（assetmodules）的配置

webpack 5 的 assetmodules：旨在处理非JavaScript资源（比如图像、视频、字体和文本），可以将文件作为 base64 内联在代码中，也可以将文件输出到文件系统中。

接下来，我将会从以下几个方面来讲解 webpack 5 资源模块的使用。

1. 配置资源模块

webpack 5 使用 module.rules 选项来配置资源模块。module.rules 选项是一个数组，每个元素是一个对象，用于指定要处理的文件类型和要使用的资源模块。

module.rules = [
  {
    test: /\.(png|jpg|jpeg|gif)$/,
    type: 'asset',
    parser: {
      dataUrlCondition: {
        maxSize: 8 * 1024, // 8KB
      },
    },
  },
];

test 选项用于指定要处理的文件类型。type 选项用于指定要使用的资源模块。parser 选项用于指定解析器选项。maxSize 选项用于指定将文件作为 base64 内联在代码中的最大文件大小。

2. 资源模块的处理方式

webpack 5 资源模块有两种处理方式：内联和输出到文件系统。

内联处理是指将文件作为 base64 内联在代码中。这种处理方式适用于小文件，比如图像和字体。

// 将文件作为 base64 内联在代码中
module.rules = [
  {
    test: /\.(png|jpg|jpeg|gif)$/,
    type: 'asset/inline',
  },
];

输出到文件系统处理是指将文件输出到文件系统中。这种处理方式适用于大文件，比如视频和文本。

// 将文件输出到文件系统中
module.rules = [
  {
    test: /\.(mp4|mov|avi)$/,
    type: 'asset/resource',
  },
];

3. 资源模块的输出路径

webpack 5 资源模块的输出路径可以通过 output.assetModuleFilename 选项来指定。output.assetModuleFilename 选项是一个字符串，用于指定资源模块的输出路径。

output: {
  assetModuleFilename: 'assets/[hash][ext]',
},

[hash]占位符用于指定资源模块的文件名哈希值。[ext]占位符用于指定资源模块的文件扩展名。

4. 资源模块的缓存

webpack 5 资源模块的缓存可以通过 cache.type 选项来指定。cache.type 选项可以设置为 memory 或 filesystem。memory 表示将资源模块缓存到内存中。filesystem 表示将资源模块缓存到文件系统中。

cache: {
  type: 'filesystem',
},

5. 资源模块的压缩

webpack 5 资源模块的压缩可以通过 optimization.minimize 选项来启用。optimization.minimize 选项是一个布尔值，用于指定是否压缩资源模块。

optimization: {
  minimize: true,
},

最后，资源模块是一个非常有用的功能，可以帮助我们处理非JavaScript资源。在 webpack 5 中，资源模块已经得到了很大的改进，使用起来更加方便和灵活。