Webpack 字体资源重定向配置

在 Webpack 中重定向字体资源到自定义文件夹，可以通过配置 file-loader 或 url-loader 来实现。以下是几种常见的配置方法：

方法一：使用 file-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'  // 自定义文件夹路径
            }
          }
        ]
      }
    ]
  }
};

方法二：使用 url-loader（适合小字体文件）

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8KB的字体转为base64
              name: '[name].[ext]',
              outputPath: 'fonts/'  // 自定义文件夹路径
            }
          }
        ]
      }
    ]
  }
};

方法三：Webpack 5 内置资源模块

如果你使用的是 Webpack 5，可以使用内置的资源模块：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'  // 自定义文件夹路径
        }
      }
    ]
  }
};

高级配置：添加公共路径

如果需要为字体资源添加公共路径：

{
  loader: 'file-loader',
  options: {
    name: '[name].[ext]',
    outputPath: 'fonts/',
    publicPath: '../fonts/'  // 相对于CSS文件的路径
  }
}

注意事项

1. 确保你的自定义文件夹路径与项目结构匹配
2. 如果使用 CSS 预处理器，可能需要调整字体引用路径
3. 在生产环境中，考虑添加文件哈希以利用浏览器缓存：

name: '[name].[hash:8].[ext]'

以上配置可以根据你的具体项目需求进行调整。