Webpack 5 新特性：Asset Modules 资源模块怎么用

Webpack 5 引入了许多新特性和改进，其中之一就是 Asset Modules（资源模块）。Asset Modules 是一种新的资源处理方式，它允许我们在不借助 file-loader、url-loader 或 raw-loader 的情况下，直接处理项目中的静态资源（如图片、字体、JSON 文件等）。本文将详细介绍 Asset Modules 的使用方法，并通过示例帮助大家更好地理解这一新特性。

1. 什么是 Asset Modules？

在 Webpack 5 之前，处理静态资源通常需要借助一些额外的 loader，比如 file-loader、url-loader 或 raw-loader。这些 loader 的作用是将资源文件转换为模块，并输出到构建目录中。

Webpack 5 引入了 Asset Modules，它是一种内置的资源处理方式，可以直接在配置中使用，而无需安装额外的 loader。Asset Modules 提供了四种资源处理模式：

1. asset/resource：将资源文件输出到输出目录，并返回文件的 URL（类似于 file-loader）。
2. asset/inline：将资源文件转换为 base64 编码的 Data URL（类似于 url-loader 的 limit 选项）。
3. asset/source：将资源文件的内容作为字符串导出（类似于 raw-loader）。
4. asset：根据文件大小自动选择 asset/resource 或 asset/inline（类似于 url-loader 的自动模式）。

2. 如何使用 Asset Modules？

2.1 基本配置

要使用 Asset Modules，首先需要在 Webpack 配置文件中定义资源文件的处理规则。以下是一个简单的配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

在这个配置中，我们使用 type: 'asset/resource' 来处理图片文件。当 Webpack 遇到 .png、.jpg、.jpeg、.gif 或 .svg 文件时，它会将这些文件输出到输出目录，并返回文件的 URL。

2.2 输出文件名

默认情况下，Asset Modules 会将资源文件输出到输出目录，并使用文件的哈希值作为文件名。如果你想自定义输出文件名，可以使用 generator 选项：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]',
        },
      },
    ],
  },
};

在这个配置中，我们将图片文件输出到 images 目录，并使用原始文件名作为输出文件名。

2.3 自动选择资源类型

如果你希望根据文件大小自动选择 asset/resource 或 asset/inline，可以使用 type: 'asset'，并通过 parser.dataUrlCondition 设置文件大小的阈值：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8KB
          },
        },
      },
    ],
  },
};

在这个配置中，如果图片文件小于 8KB，Webpack 会将其转换为 base64 编码的 Data URL；否则，会将其输出到输出目录。

2.4 处理字体文件

Asset Modules 也可以用来处理字体文件。以下是一个处理字体文件的配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
    ],
  },
};

在这个配置中，我们将字体文件输出到 fonts 目录，并使用原始文件名作为输出文件名。

2.5 处理 JSON 文件

Asset Modules 还可以用来处理 JSON 文件。以下是一个处理 JSON 文件的配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/i,
        type: 'asset/source',
      },
    ],
  },
};

在这个配置中，Webpack 会将 JSON 文件的内容作为字符串导出。

3. 示例项目

为了更好地理解 Asset Modules 的使用方法，我们来看一个完整的示例项目。

3.1 项目结构

my-project/
├── src/
│   ├── index.js
│   ├── styles.css
│   ├── images/
│   │   ├── logo.png
│   │   └── background.jpg
│   └── fonts/
│       ├── font.woff
│       └── font.woff2
├── package.json
└── webpack.config.js

3.2 配置文件

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8KB
          },
        },
        generator: {
          filename: 'images/[name][ext]',
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
    ],
  },
};

3.3 入口文件

// src/index.js
import './styles.css';
import logo from './images/logo.png';
import background from './images/background.jpg';
import font from './fonts/font.woff2';

const img1 = document.createElement('img');
img1.src = logo;
document.body.appendChild(img1);

const img2 = document.createElement('img');
img2.src = background;
document.body.appendChild(img2);

const style = document.createElement('style');
style.innerHTML = `
  @font-face {
    font-family: 'MyFont';
    src: url(${font}) format('woff2');
  }
  body {
    font-family: 'MyFont';
  }
`;
document.head.appendChild(style);

3.4 样式文件

/* src/styles.css */
body {
  background-color: #f0f0f0;
}

3.5 构建结果

运行 webpack 命令后，项目会构建出以下文件结构：

dist/
├── bundle.js
├── images/
│   ├── logo.png
│   └── background.jpg
└── fonts/
    └── font.woff2

4. 总结

Webpack 5 的 Asset Modules 提供了一种更简洁、更高效的方式来处理静态资源。通过内置的资源处理功能，我们不再需要依赖 file-loader、url-loader 或 raw-loader，而是可以直接在 Webpack 配置中使用 asset/resource、asset/inline、asset/source 或 asset 来处理资源文件。

本文详细介绍了 Asset Modules 的使用方法，并通过一个完整的示例项目展示了如何在实际项目中使用这一新特性。希望本文能帮助你更好地理解和使用 Webpack 5 的 Asset Modules。