Serving mp3 files using the webpack file loader

Question

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 c

Answer 1

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

Answer 2

Check the version of the file-loader, I solved this by upgrading the file-loader from 4.x.x to 6.x.x, then add mp3 to the normal webpack config plugin settings for files =>

// 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 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.

Answer 4

My solution: install the file-loader. Update 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())();

Answer 5

Use file-loader like this:

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