如何为Webpacker添加字体加载器？及解决字体解析报错问题

Webpacker其实默认已经包含了基础的字体处理逻辑，但如果你需要自定义加载规则（比如指定输出路径、文件名格式），可以按照以下步骤操作：

• 打开项目根目录下的config/webpack/environment.js文件
• 添加字体加载规则，这里提供两种常用配置方案：

方案1：使用file-loader（兼容Webpack 4及以下）

const { environment } = require('@rails/webpacker')

// 追加字体加载器规则
environment.loaders.append('fonts', {
  test: /\.(woff2?|eot|ttf|otf)$/, // 匹配常见的字体格式
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash:8].[ext]', // 生成带哈希的文件名，避免缓存问题
        outputPath: 'fonts/', // 字体文件输出到packs/fonts目录
        publicPath: '/packs/fonts/' // 页面引用时的基础路径
      }
    }
  ]
})

module.exports = environment

方案2：使用Webpack 5 Asset Modules（官方推荐）

const { environment } = require('@rails/webpacker')

// 添加asset resource规则处理字体
environment.config.module.rules.push({
  test: /\.(woff2?|eot|ttf|otf)$/,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[name].[hash:8][ext]' // 输出路径和文件名规则
  }
})

module.exports = environment

配置完成后，重启Webpack开发服务器（bin/webpack-dev-server）让配置生效。

这个错误本质是Webpack在你指定的路径下找不到对应的字体文件，或者没有正确配置字体文件的解析规则，我给你几个排查和解决的步骤：

步骤1：确认字体文件的实际位置 #

先检查/Users/me/dev/projects/my-app/app/javascript/packs/styles/fonts/element-icons.woff这个路径是否真的存在？

• 如果你的字体文件是放在app/javascript/assets/fonts或者app/javascript/fonts目录下，那CSS里的引用路径应该是../assets/fonts/element-icons.woff或者../fonts/element-icons.woff（取决于你的styles文件夹和fonts文件夹的层级关系）

步骤2：确保Webpacker配置了字体解析规则 #

如果文件位置没问题，那需要确认Webpacker能识别字体文件的导入。可以用我第一个问题里的任意一种配置，把字体加载规则添加到config/webpack/environment.js中，确保Webpack知道如何处理这些字体文件。

步骤3：调整CSS中的引用路径 #

举个例子，如果你的项目结构是这样的：

app/javascript/
├── packs/
│   └── styles/
│       └── your-style.css
└── fonts/
    └── element-icons.woff

那在your-style.css里应该这样引用字体：

@font-face {
  font-family: 'element-icons';
  src: url('../../fonts/element-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

重点是相对路径要准确，从当前CSS文件所在位置指向字体文件的路径。

步骤4：重启Webpack开发服务器 #

修改配置或者文件路径后，一定要重启bin/webpack-dev-server，否则Webpack不会读取新的配置或文件位置。

内容的提问来源于stack exchange，提问作者user2167582