webpack - 使用 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$/,
    loader: 'file-loader'
}

Answer 2

https://stackoverflow.com/a/41158166/11878375 - 这是正确的答案，但像这样定义SRC：

var path = require('path');

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

例如，我将react-chat-ui与 webpack 一起使用，这是我的 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'
      }

    ]
  }
};

并且不要忘记在之前安装文件加载器：

npm install file-loader --save-dev

Answer 3

这就是我在 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>在你的模板中写了，它应该可以工作了。

Answer 4

我的解决方案：安装文件加载器。更新 webpack.config.js：

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

项目.js：

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

Answer 5

检查文件加载器的版本，我通过将文件加载器从 4.xx 升级到 6.xx 解决了这个问题，然后将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

Answer 6

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