Webpack 5 资源加载指南：图像、字体和文件处理秘籍

2023-09-23 18:13:47

新的资产模块类型

Webpack 5引入了一个新的资产模块类型（asset module type），这是一种更简单、更统一的方式来加载和处理各种资源。它可以自动选择最合适的加载器来处理特定的文件类型，例如，对于图像，它会使用image-webpack-loader，对于字体，它会使用file-loader。

资产模块类型有四种不同的类型：

资源（asset）：这种类型会将文件作为一个资源加载，这意味着它将被复制到输出目录中。
源（source）：这种类型会将文件作为一个源加载，这意味着它将被解析成模块。
内联（inline）：这种类型会将文件内联到代码中，这意味着它将被包含在输出的JavaScript文件中。
数据URI （data uri）：这种类型会将文件转换为数据URI，这意味着它将被编码为base64字符串并包含在输出的JavaScript文件中。

如何使用资产模块类型

要使用资产模块类型，你只需要在webpack配置中指定文件的类型。例如，要将图像加载为资源，你可以使用以下配置：

{
  test: /\.(png|jpg|svg)$/,
  type: 'asset',
}

要将字体加载为源，你可以使用以下配置：

{
  test: /\.(ttf|woff|woff2)$/,
  type: 'source',
}

要将文件内联到代码中，你可以使用以下配置：

{
  test: /\.(txt|csv)$/,
  type: 'inline',
}

要将文件转换为数据URI，你可以使用以下配置：

{
  test: /\.(png|jpg|svg)$/,
  type: 'data uri',
}

高级配置

资产模块类型提供了许多高级配置选项，你可以使用这些选项来控制文件的加载和处理方式。例如，你可以指定文件的最大大小，超过这个大小的文件将被转换为数据URI。你还可以指定文件的输出目录，以及是否将文件哈希化。

更多关于资产模块类型的信息，请参阅Webpack官方文档：https://webpack.js.org/guides/asset-modules/

替代方案

如果你不想使用资产模块类型，你仍然可以使用传统的加载器来加载和处理资源。例如，你可以使用file-loader来加载文件，使用url-loader来加载图像和字体，以及使用raw-loader来加载源文件。

以下是这些加载器的示例配置：

{
  test: /\.(png|jpg|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: '[name].[ext]',
        outputPath: 'images/',
      },
    },
  ],
}

{
  test: /\.(ttf|woff|woff2)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/',
      },
    },
  ],
}

{
  test: /\.txt$/,
  use: [
    {
      loader: 'raw-loader',
    },
  ],
}