webpack 5 资源文件加载指南

2023-09-01 03:26:57

引言

各位前端爱好者，欢迎来到我们关于 webpack 5 的深度探索之旅！在上一篇博文中，我们讨论了如何使用 webpack 5 加载 CSS 文件。今天，我们将把注意力转向加载资源文件，如图片和字体。让我们深入了解如何让你的项目在各个方面都光彩照人！

在 webpack 5 之前，加载资源文件需要使用文件加载器。这些加载器负责将文件转换为可被 JavaScript 识别的格式。例如，图像加载器将图像转换为数据 URL，而字体加载器将字体转换为可用于 CSS 的格式。

在 webpack 5 中，引入了 asset modules 的概念。它们允许你直接导入资源文件，而无需使用文件加载器。这极大地简化了加载资源的过程，并减少了捆绑大小。

加载图像很简单，只需使用 import 语句导入图像文件即可：

import myImage from './myImage.png';

webpack 5 将自动将图像转换为数据 URL 并将其嵌入到捆绑文件中。你也可以通过指定 type 选项来指定其他格式：

import myImage from './myImage.png' assert { type: 'resource' };

这将把图像作为一个单独的文件加载，而不是数据 URL。

加载字体与加载图像类似。你可以使用 import 语句导入字体文件：

import myFont from './myFont.ttf';

webpack 5 将自动将字体转换为可用于 CSS 的格式。你也可以通过指定 type 选项来指定其他格式：

import myFont from './myFont.ttf' assert { type: 'resource' };

这将把字体作为一个单独的文件加载，而不是嵌入到 CSS 中。

webpack 5 允许你加载各种其他类型的资源文件，包括 JSON、CSV 和视频。语法与加载图像和字体类似：

import myData from './myData.json';
import myData from './myData.csv';
import myData from './myData.mp4';

如果你需要对资源加载进行更多控制，你可以使用 webpack 的 asset modules API。此 API 允许你创建自定义规则来处理特定类型的资源。

例如，以下规则将所有图像都转换为 WebP 格式：

module.exports = {
  rules: [
    {
      test: /\.(png|jpg|jpeg)$/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024, // 10 kB
        },
      },
      generator: {
        filename: '[name].[hash][ext]',
      },
    },
  ],
};