基于Webpack实现从多个导入中动态选择音效资源

方案1：对象映射（简单直接） #

把所有导入的音效文件存到一个键值对对象里，键就是你要传入setSound的字符串参数，值是对应的音效资源。这种方式既安全又通用，完全规避eval的风险，也比switch灵活得多。

代码示例：

// 导入所有音效
import pop1 from "Assets/sounds/right/pop-1.mp3";
import pop2 from "Assets/sounds/right/pop-2.mp3";
import tic from "Assets/sounds/right/tic.mp3";
import toc from "Assets/sounds/right/toc.mp3";
// ...其他音效文件

// 创建音效映射对象
const soundMap = {
  pop1,
  pop2,
  tic,
  toc
  // ...对应新增音效的键值对
};

// 实现setSound函数
function setSound(soundName) {
  // 先校验音效是否存在，避免报错
  if (!soundMap[soundName]) {
    console.warn(`音效${soundName}不存在`);
    return;
  }
  // 这里编写你的音效使用逻辑，比如创建Audio实例播放
  const audio = new Audio(soundMap[soundName]);
  audio.play();
}

调用时直接用setSound("pop1")即可，后续新增音效只需要在soundMap里补充对应的键值对，不需要修改函数逻辑。

方案2：Webpack批量导入（适合大量音效） #

如果音效文件数量极多，手动逐个导入太繁琐，可以用Webpack提供的require.context批量加载指定目录下的所有音效，自动生成映射对象，省掉重复的导入代码。

代码示例：

// 利用require.context批量加载目标目录下的mp3文件
// 参数说明：目标目录、是否遍历子目录、匹配文件的正则
const soundContext = require.context("Assets/sounds/right", false, /\.mp3$/);

// 自动生成音效映射：键为文件名（可自定义格式），值为音效资源
const soundMap = {};
soundContext.keys().forEach(key => {
  // 从路径中提取文件名，比如将"./pop-1.mp3"转为"pop1"
  const soundName = key.replace(/^\.\/|\.mp3$/g, "").replace("-", "");
  soundMap[soundName] = soundContext(key);
});

// 通用的setSound函数
function setSound(soundName) {
  if (!soundMap[soundName]) {
    console.warn(`音效${soundName}不存在`);
    return;
  }
  const audio = new Audio(soundMap[soundName]);
  audio.play();
}

这种方案的优势是新增音效文件后，无需修改代码，Webpack会自动将新文件加入映射，特别适合音效数量多、更新频繁的场景。

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