Webpack无法提供字体服务问题求助

我来帮你排查这个Webpack字体加载的问题，这种情况通常是因为Webpack没有正确配置来处理字体资源，或者路径解析有问题。下面是几个常见的解决步骤：

1. 配置Webpack处理字体资源的Loader/Asset Modules #

Webpack 默认不会自动处理字体文件（.eot、.woff2、.woff、.ttf 这类格式），你需要在配置中明确告诉它如何处理这些资源：

如果你使用的是Webpack 5+（推荐） #

Webpack 5 引入了 Asset Modules，不需要额外安装loader，直接在webpack.config.js中添加规则：

const path = require('path');

module.exports = {
  module: {
    rules: [
      // 处理字体文件
      {
        test: /\.(eot|woff2|woff|ttf)$/,
        type: 'asset/resource',
        generator: {
          // 指定输出的字体文件目录，和你的项目结构对应
          filename: 'assets/fonts/[name][ext]'
        }
      },
      // 别忘了处理CSS文件的loader（比如css-loader + style-loader）
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

如果你使用的是Webpack 4及以下 #

需要先安装file-loader：

npm install file-loader --save-dev

然后在webpack.config.js中添加规则：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(eot|woff2|woff|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/fonts/[name][ext]'
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

2. 调整CSS中的字体路径 #

你的CSS中使用的是根路径/assets/fonts/...，这可能在Webpack的模块解析中出现问题。建议改为相对路径，比如如果你的CSS文件放在src/css目录下，路径应该调整为：

@font-face{ 
  font-family:IranSans; 
  font-style:normal; 
  font-weight:bold; 
  src:url("../assets/fonts/IranSansWebBold.eot"); 
  src:url("../assets/fonts/IranSansWebBold.eot?#iefix") format("embedded-opentype"),
      url("../assets/fonts/IranSansWebBold.woff2") format("woff2"),
      url("../assets/fonts/IranSansWebBold.woff") format("woff"),
      url("../assets/fonts/IranSansWebBold.ttf") format("truetype"); 
}

如果坚持使用根路径，需要确保Webpack的output.publicPath配置正确，比如：

module.exports = {
  output: {
    publicPath: '/' // 开发环境通常设为根路径，生产环境根据实际部署路径调整
  }
};

3. 确认开发服务器配置（如果使用webpack-dev-server） #

如果你用webpack-dev-server运行开发环境，Webpack 5需要配置devServer.static来确保静态资源能被访问到：

const path = require('path');

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'assets') // 指向你的assets目录
    }
  }
};

Webpack 4及以下则是contentBase：

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'assets')
  }
};

完成以上配置后，重启Webpack开发服务器，应该就能正确加载字体文件了。

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