Webpack构建餐厅页面时dist文件冗余字体问题求助

先排查额外字体的来源 #

• 检查第三方依赖：部分UI库或CSS框架会默认引入自带字体/系统字体包，你可以通过npm ls梳理依赖树，确认是否有这类框架的完整CSS被引入，换成按需引入的方式。
• 检查本地代码：核对所有@font-face规则，确保只声明了你需要的2款自定义字体，避免复制粘贴的代码里夹带多余字体路径，或是CSS中不小心引入了其他字体文件。

调整Webpack字体加载规则 #

确保字体加载器仅匹配你的自定义字体文件，过滤掉无关字体：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        // 仅处理自定义字体所在目录，比如src/fonts/
        include: path.resolve(__dirname, 'src/fonts'),
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  },
  output: {
    clean: true,
    // 保留你原有的其他output配置
  }
};

通过include指定仅处理目标目录下的字体，依赖包或其他目录的字体就不会被打包进dist。

移除不必要的CSS引入 #

如果是第三方依赖带来的冗余字体，尝试不引入依赖的完整CSS，只加载所需组件的样式，或者直接覆盖依赖的字体设置：

/* 在全局CSS中强制替换字体 */
* {
  font-family: '你的自定义字体1', '你的自定义字体2', sans-serif !important;
}

这样既无需打包依赖的字体，又能确保页面统一使用你的自定义字体。

验证打包结果 #

修改配置后执行构建命令（比如npm run build），查看dist/fonts目录，确认仅存在你需要的2款字体。如果仍有冗余，检查HTML文件是否有外链字体标签，或是JS中是否存在动态导入字体的逻辑。

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