Webpack引入MP3音频失败：点击Div播放时出现404错误求助

核心问题 #

你直接用字符串路径../../sounds/24.mp3创建Audio实例，Webpack不会解析字符串里的文件路径，导致这个mp3文件根本没被打包到输出目录，自然会返回404。

解决步骤 #

1. 修改JS代码，正确导入音频文件 #

把硬编码的路径改成通过import导入音频资源，让Webpack处理路径并返回打包后的资源URL：

// 导入音频文件，Webpack会自动处理路径并输出打包后的资源地址
import audioSrc from '../../sounds/24.mp3';

const audio = new Audio(audioSrc);
// 给目标Div绑定点击播放事件
document.querySelector('.target-div').addEventListener('click', () => {
  // 播放时捕获错误，避免浏览器自动播放策略拦截导致的报错
  audio.play().catch(err => {
    console.error('音频播放失败:', err);
  });
});

2. 优化Webpack配置（Webpack5推荐方案） #

Webpack 5已内置资源处理模块，无需依赖file-loader，可以把mp3的规则替换为：

{
  test: /\.mp3$/i,
  type: 'asset/resource',
  // 可选：指定输出到sounds目录，方便资源管理
  generator: {
    filename: 'sounds/[name][ext]'
  }
}

如果坚持使用file-loader，需在配置中指定输出路径，确保资源被打包到正确位置：

{
  test: /\.mp3$/i,
  use: {
    loader: 'file-loader',
    options: {
      name: 'sounds/[name].[ext]'
    }
  }
}

3. 清理冗余依赖（可选） #

如果改用Webpack5内置的资源模块，可卸载file-loader：

npm uninstall file-loader

额外注意事项 #

• 浏览器的自动播放策略会拦截非用户触发的音频播放，必须把play()绑定在点击等用户交互事件内
• 确认../../sounds/24.mp3相对于当前JS文件的路径完全正确

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