JavaScript：使用变量为路径初始化Audio报错、硬编码正常是什么原因？

• webpack静态编译限制：webpack 是在打包编译阶段静态扫描所有依赖的，不会执行你的JS代码推导变量的实际取值。当你给require()传入硬编码的路径字面量时，webpack能直接识别到目标资源，会提前把对应的mp3文件打包进产物、分配正确的访问路径，所以运行正常。
• 当传入变量作为require()参数时，webpack无法在编译阶段确定你要加载的资源，不会把对应的mp3文件纳入打包范围，运行时自然找不到对应模块，报错里的webpackEmptyContext就是webpack未匹配到动态require资源的典型标识。

方案1：半动态路径（推荐，适合路径前缀固定、仅文件名可变的场景） #

把固定的路径前缀硬编码在require里，仅可变部分用变量传入，webpack会自动扫描对应目录下所有符合规则的文件提前打包：

// 仅文件名部分用变量，前缀硬编码
var fileName = "test.mp3"
this.audio = new Audio(require(`../../recordings/${fileName}`))

方案2：使用静态资源目录（适合完全动态路径的场景） #

把所有音频文件放到项目的静态资源目录（比如Vue项目的public文件夹、React项目的public文件夹），不需要用require引入，直接用绝对路径访问即可：

// 假设音频文件放在 public/recordings 目录下
var path = "/recordings/test.mp3"
this.audio = new Audio(path)

静态目录下的资源不会被webpack编译打包，直接通过路径就能访问，不受require静态解析的限制。

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