使用webpack文件加载器提供mp3文件

Question

我有一个问题，使用webpack文件加载器让我的mp3文件工作。

这是问题所在：

我的硬盘上有一个mp3文件，如果我使用chrome打开例如“c：\ somefolder \ somemp3file.mp3”在浏览器的选项卡中打开并播放就好了。

但是，当我使用webpack提供完全相同的文件时，它不起作用。我在webpack中配置了这样的加载器：

{
    test: /\.(gif|jpg|png|mp3|aac|ogg)$/,
    loader: 'file'
}

然后，当我尝试链接到文件时，我需要在我的javascript中，如下所示：

require('file!./../content/somemp3file.mp3');

这正确地返回了我的mp3文件的URL。

如果我尝试手动转到localhost:8080，然后是require返回的url，Chrome中的mp3播放器就像我预期的那样弹出，但文件无法播放，并且无法点击播放按钮，就像文件一样腐败或什么的。

谁知道我在这里做错了什么？

Answer 1

像这样使用文件加载器：

{
    test: /\.mp3$/,
    include: SRC,
    loader: 'file-loader'
}

Answer 2

这是我在Nuxt 2中使用Webpack处理mp3文件的方法：

  build: {
  
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src',
        },
      },
    },

    extend(config, ctx) {
      config.module.rules.push({
        test: /\.mp3$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      })
    },
  },

现在你可以在模板中编写<audio src="@/assets/water.mp3"></audio>，它应该可以工作。