• • 此问题在此处已有答案**：

Module parse failed: Unexpected token m in JSON at position 0（6个答案）
2天前关闭。
我正在使用WebPack v5，并且我确实希望使用threejs库中的字体，如answer中所述：

var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
...
}

我已经看过了文档，但我不明白如何才能正确地做到这一点!
下面是我的webpack. config. json：

/* Current Path */
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
/* HTML Template */
const HtmlWebpackPlugin = require('html-webpack-plugin')

const webpack = require('webpack')

module.exports = {
    /* Build Type */
    mode: 'development',
    /* Entry Point */
    entry: {
        main: path.resolve(__dirname, 'src/index.js')
    },
    /* Output Config */
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        clean: true,
        assetModuleFilename: '[name][ext]',
    },
    /* Source Map for Error Debug */
    devtool: 'source-map',
    /* Webpack Server Config */
    devServer: {
        static: {
           directory: path.resolve(__dirname, 'dist') 
        },
        port: 3000,
        open: false,
        hot: true,
        compress: true,
        historyApiFallback: true,
    },
    module: {
        rules: [
        /* Images Loader */
        {
            test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
            type: 'asset/resource',
        },
         /* Style Sheet Loader*/
         {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
            },
        /* GLTF Loader */
        {
            test: /\.glb$/,
            use:
            [
                {
                    loader: 'file-loader',
                    options:
                    {
                        outputPath: 'assets/resource/'
                    }
                }
                ]
            },
        // Json Loader
        {
            test: /\.json$/,
            loader: 'json-loader'
        },
        // Vue Loader
        {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue-loader'
        },
        ]
    },
    plugins: [
        /* Automated HTML Generation */
        new HtmlWebpackPlugin({
            favicon: "./src/favicon.ico",
            title: 'Pacbot GUI',
            filename: 'index.html',
            template: "./src/template.html",
        }),
        // add vue-loader plugin
        new VueLoaderPlugin(),
        /**
         * to remove warn in browser console: runtime-core.esm-bundler.js:3607 
         * Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined..
         */
        new webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true }),
    ],
}

你能告诉我如何加载JSON文件来正确解析字体吗？提前感谢。
我得到这个错误：

GET http://127.0.0.1:3000/fonts/helvetiker_regular.typeface.json
Status 404 Not Found

如果我尝试直接导入它：

import helvetiker_bold from "three/examples/fonts/helvetiker_bold.typeface.json";

我收到另一个错误：

ERROR in ./node_modules/three/examples/fonts/helvetiker_bold.typeface.json
Module parse failed: Unexpected token "m" (0x6D) in JSON at position 0 while parsing near "module.exports = {\"g..."
File was processed with these loaders:
 * ./node_modules/json-loader/index.js
You may need an additional loader to handle the result of these loaders.