使用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。

如果我尝试手动输入由require返回的url，然后在Chrome中弹出了预期的mp3播放器，但无法播放该文件，并且不可能点击播放按钮，就像文件已损坏或其他原因一样。有人知道我在这里做错了什么吗？

- Øyvind Bråthen

---

当调用require()时，请尝试删除file!。这实际上会导致生成第二个.mp3文件，大约是80字节左右。如果您查看文件，它只是一个字符串的模块导出（指向捆绑的实际.mp3文件的URL）。因此，请将webpack配置保留为原样，然后在js文件中使用var src = require('./../content/somemp3file.mp3'); document.getElementById('myAudio').src = src;。 - Eric Lease

Answer 1

使用file-loader的示例：

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

- nawaz1989

---

SRC 未定义。 - Isaac Pak

Answer 2

从webpack 5开始，资源模块取代了旧的raw-loader、url-loader和file-loader。

在你的webpack.config.js文件中添加以下规则：

   rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif|ogg|mp3|wav)$/i,
        type: 'asset/resource',
      },
   ]

在您的项目 .js 文件中，创建一个音频文件并按如下方式播放：

import myAudioResource from './path-to-your-audio-file/audio.wav';
const myAudio = new Audio(myAudiolResource);
myAudio.play();

你不需要分别配置图像和音频。 asset/resource 可以一次处理所有的 (png|svg|jpg|jpeg|gif|ogg|mp3|wav) 文件。

您可以通过在webpack配置中设置 output.assetModuleFilename 来更改发射文件的文件夹。例如，以下脚本将在 dist/assets/ 文件夹下发出您的图像和音频文件。

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'assets/[hash][ext][query]' // add this line
  },

如需更多信息，请查看官方文档资产模块。

- shen

---

非常感谢您提供详细的答案，只是想提醒一下，有一个拼写错误：myAudiolResource 应该是 myAudioResource。 - NaN

Answer 3

这个答案是正确的，但是定义SRC应该像这样：

var path = require('path');

var SRC = path.resolve(__dirname, 'src/main/js');

例如，我正在使用webpack和react-chat-ui。这是我的webpack.config.js:

const path = require('path');

const SRC = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: './jsx/App.jsx',
  mode: "development",
  output: {
    path:
        '/java/helios-backend/src/main/resources/static/js'
        // __dirname + '/js/'
    ,
    filename: 'bundle.js'
  },
  devtool: '#sourcemap',
  stats: {
   colors: true,
   reasons: true
  },
  module: {
    rules: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loaders: ['babel-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              disable: true, 
            },
          },
        ]},
      {
        test: /\.mp3$/,
        include: SRC,
        loader: 'file-loader'
      }

    ]
  }
};

别忘了在之前安装file-loader：

npm install file-loader --save-dev

- Arthur Kupriyanov

Answer 4

这是我在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>，它应该能够正常工作。

- Jérôme Pott

Answer 5

我的解决方案：安装file-loader。更新webpack.config.js文件：

// webpack.config.js
rules: [
            {
                test: /\.mp3$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }

Project.js：

const smthn = require('../sound.mp3');
const sound = new Audio('./sound.mp3');
(() => sound.play())();

- Alex

---

什么是webpack.config.js？我添加了这个文件，但没有任何变化。 - MAZ

Answer 6

检查 file-loader 的版本，我通过将 file-loader 从 4.x.x 升级到 6.x.x 来解决这个问题，然后将 mp3 添加到普通的 webpack 配置插件设置中以处理文件 =>

// webpack.config.js

      { 
        test: /\.(gif|png|jpe?g|svg|xml|mp3)?$/i,
        use: "file-loader"
      }
      // OR
      {
        test: /\(mp3|wav|mpe?g|ogg)?$/i,
        use: 'file-loader'
      }
      
      // OR BOTH

- alfrednoble

Answer 7

这是我在一个使用React的Electron应用程序中运行成功的代码：

npm install file-loader

然后在webpack.common.js中的module对象和rules数组中添加了以下内容：

  {
    test: /\.(mp3|wav)$/,
    loader: "file-loader",
  }

然后只需从“/your_path/your_sound.wav”导入your_sound

- Vaggelis

---

这是针对旧版本的Webpack。在第5版中不需要额外的加载器。asset/resource类型可以直接完成相同的操作。 - hastrb

Answer 8

// webpack.config.js
{
    test: /\.(mp3|wav)$/,
    loader: 'file-loader',
    query: {
        name: 'media/[name].[ext]'
    }
}

- GrumpyGary