React项目不使用public文件夹设置Twilio GaussianBlurBackgroundProcessor的assetPath

云原生阿岚

2026-9-26

解决方案

你遇到的开发模式资源找不到问题，核心原因是CopyWebpackPlugin默认在开发模式下的复制行为不会同步到webpack-dev-server的内存静态资源目录，同时路径映射需要和Twilio的assetPath配置对齐，按以下步骤修改即可：

修正webpack配置，让复制行为在开发+生产模式都生效

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production';
  return {
    // 保留你原有的其他webpack配置
    output: {
      // 保留原有output配置，确保publicPath为'/'
      publicPath: '/',
    },
    devServer: {
      // 保留原有devServer配置，新增以下内容
      static: {
        directory: path.join(__dirname, 'build'),
        publicPath: '/',
      },
      devMiddleware: {
        // 开发模式下强制写入磁盘，避免内存资源找不到的问题
        writeToDisk: !isProd,
      }
    },
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: "node_modules/@twilio/video-processors/dist/build",
            to: "static/blur",
            noErrorOnMissing: false,
            // 强制所有模式都执行复制，不会跳过开发模式
            force: true
          },
        ],
      }),
      // 保留你原有的其他插件
    ]
  }
}

初始化GaussianBlurBackgroundProcessor时指定assetsPath
注意路径末尾必须加斜杠，避免Twilio拼接资源地址出错：

import { GaussianBlurBackgroundProcessor } from '@twilio/video-processors';

const blurProcessor = new GaussianBlurBackgroundProcessor({
  // 和CopyPlugin配置的输出路径完全对齐
  assetsPath: '/static/blur/',
  blurFilterRadius: 10,
  // 其他你需要的自定义配置
});