使用 webpack 创建 React 库时如何在 React 组件中加载静态文件

Question

我正在尝试创建自定义反应库，并希望从反应组件内的资产文件夹中加载一些文件[js，data，wasm]，但我无法加载我尝试了多个加载器的那些文件。 如果有人可以提供帮助，那将会非常有帮助，我基本上正在尝试使用 webgl 构建创建一个通用包。

this is my component 

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

export default function UnityPlayer() {
        const { unityProvider } = useUnityContext({      
        loaderUrl: "./assets/WebGLExport.loader.js", //i tried import loaderUrl from ... as well
        dataUrl: "./assets/WebGLExport.data",
        frameworkUrl:"./assets/WebGLExport.framework.js",
        codeUrl: "./assets/WebGLExport.wasm",
      
    });

    return <Unity unityProvider={unityProvider} />;
}

this is webpack config, i tried multiple ways,

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    mode: "production",
    output: {
        publicPath: '',
        path: path.resolve(__dirname, "dist"),
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'dt-lib'
    },
    module: {
        rules: [
            {
                test: /\.tsx?/,                
                use: ['ts-loader']
            },
            // {
            //     test: /\.script\.js$/,
            //     use: [
            //       {
            //         loader: 'script-loader',
            //         options: {
            //           useStrict: false,
            //         },
            //       },
            //     ]
            //   },
            {
                test: /\.(js|data|wasm)$/,
                loader: 'file-loader',
                options: {
                    name: './assets/[name].[ext]'
                }
            },     
            // {
            //     test: /\.(js|data|wasm)$/,
            //     loader: 'url-loader',
            //     options: {
            //         limit:false
            //     }
            // },      
        ]
    },
    externals: {
        react: 'react'
    },
    resolve: {
        fallback:{
            "crypto":false,
            "path":false,
            "fs":false,
            "ws":false
        },
        extensions: [".tsx", ".ts", ".js", ".data", ".wasm"]
    }
}

Answer 1

您是否尝试过使用

require

或

import

来正确解析路径，因为 Webpack 将在构建时处理这些路径？

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

// Use require for dynamic asset loading
export default function UnityPlayer() {
    const { unityProvider } = useUnityContext({
        loaderUrl: require("./assets/WebGLExport.loader.js"),
        dataUrl: require("./assets/WebGLExport.data"),
        frameworkUrl: require("./assets/WebGLExport.framework.js"),
        codeUrl: require("./assets/WebGLExport.wasm"),
    });

    return <Unity unityProvider={unityProvider} />;
}