Webpack 5如何正确加载Three.js库中的字体JSON文件？

针对你遇到的两个问题，这里给出具体的解决方案：

问题1：直接导入JSON文件时的解析错误 #

Three.js提供的.typeface.json文件不是纯JSON格式，它们实际上是CommonJS模块（文件开头是module.exports = { ... }），而你配置的json-loader会把它们当成严格JSON解析，导致语法错误。另外，Webpack 5已经原生支持JSON文件处理，不需要额外配置json-loader。

解决步骤： #

1. 移除webpack配置中的json-loader规则：

   // 删掉这段规则
   // {
   //   test: /\.json$/,
   //   loader: 'json-loader'
   // },
   

2. 添加针对.typeface.json文件的资源处理规则，让Webpack正确识别并输出这些文件：

   module: {
     rules: [
       // ... 保留其他已有的规则
       {
         test: /\.typeface\.json$/,
         type: 'asset/resource',
         generator: {
           filename: 'fonts/[name][ext]' // 指定输出到dist/fonts目录
         }
       }
     ]
   }
   

3. 在代码中通过import获取字体文件的URL，再传给FontLoader：

   import helvetikerBoldFontUrl from 'three/examples/fonts/helvetiker_bold.typeface.json';
   
   const loader = new THREE.FontLoader();
   loader.load(helvetikerBoldFontUrl, (font) => {
     // 在这里使用font创建3D文字
     const textGeometry = new THREE.TextGeometry('Hello Three.js', {
       font: font,
       size: 50,
       height: 10
     });
     // ... 后续渲染逻辑
   });
   

问题2：FontLoader加载时的404错误 #

这个错误是因为Webpack没有自动把Three.js的字体文件复制到你的dist目录，导致浏览器请求不到资源。除了上面的import方式，你也可以用copy-webpack-plugin手动复制字体文件：

解决步骤： #

1. 安装copy-webpack-plugin：

   npm install copy-webpack-plugin --save-dev
   

2. 在webpack配置中引入并添加插件：

   const CopyPlugin = require('copy-webpack-plugin');
   
   module.exports = {
     // ... 保留其他配置
     plugins: [
       // ... 保留已有的插件（HtmlWebpackPlugin、VueLoaderPlugin等）
       new CopyPlugin({
         patterns: [
           {
             from: 'node_modules/three/examples/fonts/*.typeface.json',
             to: 'fonts/[name][ext]' // 复制到dist/fonts目录
           }
         ]
       })
     ]
   }
   

3. 这时就可以直接用原始路径加载字体了：

   const loader = new THREE.FontLoader();
   loader.load('fonts/helvetiker_bold.typeface.json', (font) => {
     // 使用font创建3D文字
   });
   

总结 #

两种方案选其一即可：

• 方案一（推荐）：通过import获取资源URL，让Webpack自动处理资源输出，无需手动复制文件
• 方案二：用copy-webpack-plugin复制字体文件到dist目录，保持原有加载路径不变

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