Обслуживание mp3 файлов с помощью загрузчика файлов webpack

У меня есть проблема с тем, чтобы мои mp3 файлы работали с помощью загрузчика файлов webpack.

Это проблема:

У меня есть mp3 файл на моем жестком диске, который, если я открою, используя хром, например, "c:\somefolder\somemp3file.mp3" открывается на вкладке в браузере и играет просто отлично.

Однако, когда я обслуживаю тот же файл с помощью webpack, он не работает. Я настроил загрузчик в webpack следующим образом:

{
    test: /\.(gif|jpg|png|mp3|aac|ogg)$/,
    loader: 'file'
}

Затем, когда я пытаюсь подключиться к файлу, я требую его внутри своего javascript, например:

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

это правильно возвращает мне url для mp3 файла.

Если я попытаюсь вручную перейти на localhost:8080, за которым следует url, возвращенный require, mp3-плеер в Chrome появится, как я ожидаю, но файл не может быть воспроизведен, и невозможно щелкнуть по игре кнопка, подобная файлу, повреждена или что-то в этом роде.

Кто-нибудь знает, что я здесь делаю неправильно?

Ответ 1

Использовать загрузчик файлов следующим образом:

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

Ответ 2

Вот как я обрабатываю mp3 файлы, используя Webpack в 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]',
        },
      })
    },
  },

Ответ 3

fooobar.com/info/1007657/... - он правильно отвечает, но определяет SRC следующим образом:

var path = require('path');

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

Например, я использую response-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