如何通过Webpack file-loader正确动态加载ONNX模型？

1. 确保Webpack能追踪到模型文件 #

Webpack只会打包被代码显式引用的文件，若仅将模型放在src/assets/models目录但未在代码中引入，file-loader不会自动处理。针对多模型动态加载需求，可通过以下方式批量引入：

// 批量加载src/assets/models下的所有.onnx文件
const modelContext = require.context('./assets/models', false, /\.onnx$/);
const modelPaths = modelContext.keys().map(key => modelContext(key));

若需按需加载单个模型：

async function loadModel(modelName) {
  // file-loader会返回处理后的文件路径，通过default获取
  const modelPath = await import(`./assets/models/${modelName}.onnx`);
  // 后续使用modelPath.default访问模型路径
}

2. 完善file-loader配置细节 #

检查配置中的路径参数，确保输出和访问路径正确：

module: {
  rules: [
    {
      test: /\.(glb|onnx)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            outputPath: 'assets/resource/',
            publicPath: 'assets/resource/' // 若部署在子路径，可改为'/assets/resource/'
          }
        }
      ]
    }
  ]
}

• outputPath控制文件输出到构建目录的位置（如dist/assets/resource/）
• publicPath确保运行时能正确访问到模型文件

3. 适配Webpack 5+版本（推荐方案） #

Webpack 5已内置asset modules替代file-loader，无需额外安装依赖，配置更简洁：

module: {
  rules: [
    {
      test: /\.(glb|onnx)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'assets/resource/[name][ext][query]'
      }
    }
  ]
}

此配置会自动将模型文件复制到指定输出目录，并返回正确的访问路径。

4. 验证构建结果 #

运行Webpack构建命令后，前往构建输出目录（通常为dist）下的assets/resource/文件夹，检查是否存在ONNX文件；同时查看打包后的代码，确认生成的模型路径是否符合预期。

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