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

从 webpack 5 开始，Asset Modules取代了旧的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)一次处理全部。

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

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

有关更多信息，请查看官方文档Asset Modules。

Answer 2

像这样使用文件加载器:

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

Answer 3

/sf/answers/2881071651/ - 这是正确的答案，但像这样定义 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'
      }

    ]
  }
};

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

npm install file-loader --save-dev

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>在模板中编写并且它应该可以工作。