使用Webpack构建React库时，如何在组件中加载静态文件？

核心问题分析 #

直接使用相对路径引用资源会导致打包后路径不匹配，同时Webpack对WASM文件有特殊处理逻辑，普通loader配置无法适配。

步骤1：修改组件代码，正确导入资源 #

通过import导入资源，让Webpack自动处理路径映射：

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

// 导入资源文件，Webpack会处理最终输出路径
import loaderUrl from "./assets/WebGLExport.loader.js";
import dataUrl from "./assets/WebGLExport.data";
import frameworkUrl from "./assets/WebGLExport.framework.js";
import codeUrl from "./assets/WebGLExport.wasm";

export default function UnityPlayer() {
  const { unityProvider } = useUnityContext({
    loaderUrl,
    dataUrl,
    frameworkUrl,
    codeUrl,
  });

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

步骤2：调整Webpack配置 #

关键修改点： #

• 修正publicPath适配不同部署环境
• 单独处理WASM文件，兼容Webpack的内置规则
• 确保资源输出路径与组件引用路径一致

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',
    // 指定WASM文件输出路径
    webassemblyModuleFilename: './assets/[name].[ext]'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,                
        use: ['ts-loader']
      },
      // 处理JS和data格式文件
      {
        test: /\.(js|data)$/,
        loader: 'file-loader',
        options: {
          name: './assets/[name].[ext]'
        }
      },
      // 单独处理WASM，禁用Webpack内置的asset module规则
      {
        test: /\.wasm$/,
        type: 'javascript/auto',
        loader: 'file-loader',
        options: {
          name: './assets/[name].[ext]'
        }
      }
    ]
  },
  externals: {
    react: 'react'
  },
  resolve: {
    fallback:{
      "crypto": false,
      "path": false,
      "fs": false,
      "ws": false
    },
    extensions: [".tsx", ".ts", ".js", ".data", ".wasm"]
  }
}

步骤3：验证打包结果 #

执行打包命令后，检查dist/assets目录下是否存在所有WebGL资源文件，同时确认dist/index.js中资源路径指向正确位置。

额外优化建议 #

如果使用Webpack 5，推荐用内置的asset/resource替代file-loader，配置更简洁：

{
  test: /\.(js|data|wasm)$/,
  type: 'asset/resource',
  generator: {
    filename: './assets/[name].[ext]'
  }
}

此时需移除单独的WASM规则，保留output.webassemblyModuleFilename配置即可。

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