使用Webpack文件加载器提供mp3文件 [英] Serving mp3 files using the webpack file loader

问题描述

使用webpack文件加载器使mp3文件无法正常工作.

I have a problem with getting my mp3 files to work using the webpack file loader.

这是问题所在

我的硬盘上有一个mp3文件，如果我使用chrome打开例如"c:\ somefolder \ somemp3file.mp3"，则会在浏览器的标签页中打开该文件，并可以正常播放.

I have a mp3 file on my harddisk, that if I open using chrome by for example "c:\somefolder\somemp3file.mp3" opens up in a tab in the browser and plays just fine.

但是，当我使用webpack提供完全相同的文件时，它不起作用.我已经在webpack中配置了加载器，如下所示:

However, when I serve the exact same file using webpack it does not work. I have configured the loader in webpack like this:

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

然后，当我尝试链接到文件时，我需要在JavaScript中使用它，如下所示:

Then, when I'm trying to link to the file I require it inside my javascript, like this:

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

这正确地向我返回了mp3文件的网址.

this correctly returns me the url for the mp3 file.

如果我尝试手动转到localhost:8080，然后输入require返回的网址，则Chrome中的mp3播放器会像我期望的那样弹出，但是该文件无法播放，并且无法单击该播放按钮(例如文件已损坏).

If I try to manually go to localhost:8080 followed by the url returned by require, the mp3 player in Chrome pops up like I expect it to, but the file cannot be played, and it's not possible to click on the play button like the file is corrupted or something.

有人知道我在做什么错吗?

Anyone knows what I'm doing wrong here?

推荐答案

使用文件加载器，如下所示:

Use file-loader like this:

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

这篇关于使用Webpack文件加载器提供mp3文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！