Serving mp3 files using the webpack file loader

走远了吗. 提交于 2020-04-29 08:02:53

问题


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

This is the issue:

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.

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'
}

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

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

this correctly returns me the url for the mp3 file.

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?


回答1:


Use file-loader like this:

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



回答2:


https://stackoverflow.com/a/41158166/11878375 - it's correctly answer, but define SRC like this:

var path = require('path');

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

For example, I am using react-chat-ui with webpack and this is my 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'
      }

    ]
  }
};

And do not forget to install the file-loader before:

npm install file-loader --save-dev



回答3:


This is how I process mp3 files using Webpack in Nuxt 2:

  build: {
  
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src',
        },
      },
    },

    extend(config, ctx) {
      config.module.rules.push({
        test: /\.mp3$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      })
    },
  },

Now you can write <audio src="@/assets/water.mp3"></audio> in your templates and it should work.



来源:https://stackoverflow.com/questions/38252453/serving-mp3-files-using-the-webpack-file-loader

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!