Angular项目引入TTF字体报错：Module parse failed，无Webpack配置文件

嘿，作为Angular新手遇到这个问题太正常啦——毕竟Angular CLI默认把Webpack的配置给封装起来了，咱们不用直接去折腾Webpack配置文件就能搞定这个字体加载的问题！下面给你两种解决方案，优先推荐第一种简单的：

方案一：利用Angular CLI默认的资源处理（新手友好） #

Angular CLI已经帮我们预设了资源目录的处理规则，只要把字体文件放到指定位置，就能自动被打包处理：

1. 移动字体文件到assets目录
   在你的项目src文件夹下，新建assets/fonts目录（如果没有的话），把BOOKOS.TTF移动到这个文件夹里。

2. 修改@font-face的路径
   打开app.component.css，把字体路径改成相对于组件的路径（或者绝对路径）：

   @font-face {
     font-family: bookman;
     src: url('./assets/fonts/BOOKOS.TTF');
     /* 或者用绝对路径写法：/assets/fonts/BOOKOS.TTF，两种都可以 */
   }
   

3. 确认assets配置（可选）
   打开项目根目录的angular.json文件，找到projects -> [你的项目名] -> architect -> build -> options -> assets，确保里面包含"src/assets"这一项（默认CLI创建的项目都会有）：

   "assets": [
     "src/favicon.ico",
     "src/assets"
   ]
   

做完这些之后，重启一下开发服务器，编译失败的问题应该就消失了！

方案二：扩展Webpack配置（进阶需求） #

如果你不想移动字体文件，或者需要更自定义的打包规则，可以通过@angular-builders/custom-webpack来扩展Webpack配置：

1. 安装依赖
   在终端里运行下面的命令：

   npm install @angular-builders/custom-webpack file-loader --save-dev
   

2. 创建自定义Webpack配置文件
   在项目根目录新建webpack.config.js，写入你需要的loader规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
           loader: 'file-loader',
           options: {
             name: 'assets/[name].[hash].[ext]'
           }
         }
       ]
     }
   };
   

3. 修改Angular CLI配置
   打开angular.json，把build和serve的builder替换成自定义webpack的版本：

   • 找到projects -> [你的项目名] -> architect -> build，修改builder并添加customWebpackConfig：

     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // 保留原来的其他配置，比如outputPath、index、main等
     }
     

   • 同样，找到projects -> [你的项目名] -> architect -> serve，修改builder：

     "builder": "@angular-builders/custom-webpack:dev-server"
     

最后重启开发服务器，字体就能正常加载了。

为什么你原来的方法会失败？ #

你之前把字体文件放在了src目录之外（路径是../../../BOOKOS.TTF），而Angular CLI默认只会处理src目录下的资源，尤其是assets目录里的文件，所以外部的字体文件无法被默认的Webpack规则识别，才会出现“需要合适的loader”的错误。

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