Webpack 5构建时字体文件未打包至dist目录的解决方法

问题重现 #

字体文件存放在assets/fonts目录，在assets/common/_fonts.scss中通过@font-face引入，已将该文件导入主文件main.scss，但执行Webpack构建后，字体文件未出现在dist目录中。

核心原因 #

你的Webpack配置中，css-loader的url选项被设置为false，这个配置会阻止css-loader解析样式文件中的url()引用，导致Webpack无法识别字体文件作为项目依赖，因此不会将其打包输出到dist目录。

解决步骤 #

1. 修改css-loader配置 #

移除css-loader中的url: false配置（默认值为true，会自动解析url()引用）：

{
  loader: "css-loader",
  // 删除下面的url配置段
  // options: {
  //   url: false
  // },
},

2. 确认字体路径正确性 #

确保_fonts.scss中@font-face的字体路径是相对于当前文件的正确相对路径，示例：

@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/CustomFont.ttf') format('truetype');
  // 其他字体格式配置...
}

3. 验证依赖链路 #

确认main.scss已被入口文件assets/js/index.js引入（Webpack从入口文件开始解析所有依赖），示例：

// index.js
import '../scss/main.scss';

补充说明 #

修改配置后重新执行构建，Webpack会通过asset/resource规则将字体文件输出到dist/fonts目录下，同时自动替换样式文件中的字体路径为输出后的正确路径。

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