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

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

Вот в чем проблема:

У меня есть mp3-файл на моем жестком диске, который, если я открываю с помощью chrome, например, «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 выскочит, как я и ожидал, но файл не может быть воспроизведен, и невозможно нажать кнопку воспроизведения, как файл испорчен или что-то в этом роде.

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


webpack mp3 webpack-file-loader
person Øyvind Bråthen    schedule 07.07.2016    source источник
comment
Попробуйте удалить file! при вызове require(). Это фактически приводит к генерации второго файла .mp3, вероятно, ~ 80 байт. Если вы посмотрите на файл, это всего лишь экспорт модуля строки (URL-адрес фактического файла .mp3, который входит в комплект). Так что оставьте конфигурацию webpack в том виде, в котором она есть, а в вашем js-файле var src = require('./../content/somemp3file.mp3'); document.getElementById('myAudio').src = src;   -  person Eric Lease    schedule 03.02.2017

Ответы (5)


arrow_upward
17
arrow_downward

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

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

arrow_upward
6
arrow_downward

https://stackoverflow.com/a/41158166/11878375 - это правильный ответ, но определите SRC следующим образом:

var path = require('path');

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

Например, я использую response-chat-ui с веб-пакетом, и это мой веб-пакет. 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
person Arthur Kupriyanov    schedule 31.08.2019

arrow_upward
3
arrow_downward

Вот как я обрабатываю 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]',
        },
      })
    },
  },

Теперь вы можете написать <audio src="@/assets/water.mp3"></audio> в своих шаблонах, и он должен работать.

person Jérôme Pott    schedule 18.03.2019

arrow_upward
0
arrow_downward

Проверьте версию file-loader, я решил эту проблему, обновив file-loader с 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

person alfrednoble    schedule 27.10.2020

arrow_upward
0
arrow_downward

Мое решение: установить файл-загрузчик. Обновите 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())();
person Alex    schedule 08.11.2020