使用 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:somefoldersomemp3file.mp3"在浏览器的一个选项卡中打开并且播放得很好.

I have a mp3 file on my harddisk, that if I open using chrome by for example "c:somefoldersomemp3file.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 文件的 url.

this correctly returns me the url for the mp3 file.

如果我尝试手动转到 localhost:8080 后跟由 require 返回的 url，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屋！