WebPack 中如何处理字体文件？-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，字体文件是很常见的资源。在使用 WebPack 打包项目时，如何处理字体文件是一个值得探讨的问题。本文将会介绍 WebPack 中如何处理字体文件，包括如何加载和打包。

加载字体文件

在 WebPack 中加载字体文件有两种方式：使用 URL 加载和使用 file-loader 加载。

使用 URL 加载

使用 URL 加载字体文件的方式是直接在 CSS 文件中使用 @font-face，然后在 src 属性中引用字体文件的路径。例如：

@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2'),
       url('./fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

这种方式是比较简单的，但是缺点是字体文件无法被 WebPack 打包，需要手动处理。

使用 file-loader 加载

使用 file-loader 加载字体文件的方式是通过 WebPack 打包，将字体文件转换为 base64 编码的 data URI，并将其嵌入到 CSS 文件中。这种方式需要安装 file-loader：

npm install file-loader --save-dev

然后在 WebPack 配置文件中添加如下规则：

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'fonts'
            }
          }
        ]
      }
    ]
  }
}

这个规则会匹配所有字体文件，使用 file-loader 将其打包到 outputPath 指定的目录下，并将文件名重命名为 [name].[hash].[ext] 的格式。

然后在 CSS 文件中使用相对路径引用字体文件：

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff2') format('woff2'),
       url('../fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

这种方式相对于使用 URL 加载，更加便捷，也更符合 WebPack 的打包机制。

打包字体文件

在 WebPack 中打包字体文件的方式也有两种：使用 file-loader 和使用 url-loader。

使用 file-loader 打包

在前面的例子中已经介绍了如何使用 file-loader 加载字体文件，这里再次提一下，file-loader 可以将字体文件打包到指定目录下，并重命名文件名。这个过程是 WebPack 默认支持的，只需要按照前面的例子配置即可。

使用 url-loader 打包

url-loader 是 file-loader 的一个替代品，它可以将小于指定大小的文件转换为 base64 编码的 data URI，而不是直接打包到指定目录下。这个大小可以通过 options 中的 limit 属性设置，默认为 8KB。如果文件大小大于 limit，url-loader 会自动调用 file-loader 进行处理。

使用 url-loader 打包字体文件的方式与使用 file-loader 类似，只需要将 file-loader 替换为 url-loader，然后在 options 中添加 limit 属性即可：

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 8KB
              name: '[name].[hash].[ext]',
              outputPath: 'fonts'
            }
          }
        ]
      }
    ]
  }
}

这个规则会将小于 8KB 的字体文件转换为 base64 编码的 data URI 嵌入到 CSS 文件中，大于 8KB 的字体文件则会被打包到指定目录下。

总结

字体文件在 Web 开发中是很常见的资源，WebPack 提供了多种方式来加载和打包字体文件。使用 URL 加载字体文件比较简单，但是无法被 WebPack 打包；使用 file-loader 和 url-loader 可以将字体文件打包到指定目录下，并可以重命名文件名，其中 url-loader 还可以将小于指定大小的文件转换为 base64 编码的 data URI。在实际项目中，可以根据具体情况选择适合的方式来处理字体文件。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65731117d2f5e1655dc33a5f