Webpack打包图片

音频文件执行webpack后没有打包到assets文件夹内~
而且在JS文件内使用

let musicFil = require('../music/yinyue.mp3');
<audio ref='musicBox'src={musicFil} controls="controls" loop='loop'>
       Your browser does not support the audio element.
</audio>

后,播放器就变灰了。。控制台中audio标签的src是

<audio   src="data:audio/mpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJlNzMzMmI4ZThiYTQ5ZDg2NTMzNzdkZjM2YmYyN2MwMS5tcDMiOw==" controls="" loop="">Your browser does not support the audio element.</audio>

成base64编码了?不知道为什么。。囧

但是src='./music/yinyue.mp3'的路径却有效(图片的话两种路径都可以显示出图片)
我的webpack loader的配置如下:

  {
    test: /\.(png|jpg|gif|woff|woff2|mp3)$/,
    loader: 'url-loader?limit:8192'
  },
  {
    test: /\.(mp4|ogg|svg|mp3)$/,
    loader: 'file-loader!'
  }
  module.exports = {
  srcPath: srcPath,
  publicPath: '/assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules
  };

(打包的时候由于图片路径的原因,publicPath我用的 'assets/';用本地服务器测试的时候路径用的'/asset/')

请问为什么mp3文件没办法打包到指定文件夹呢?为什么用require来指定路径时,图片可以但是mp3音频文件就不行了呢?。。

阅读 5.2k
2 个回答

因为 url-loader 会把文件 base64 编码后插入到指定位置。你去掉 url-loader 中的 .mp3 后缀,不让这个 loader 处理音频文件即可。

  {
    test: /\.(png|jpg|gif|woff|woff2|mp3)$/,
    loader: 'url-loader?limit:8192'
  },

这里指定多了个mp3了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题