web-dev-qa-db-fra.com

Servir des fichiers mp3 à l'aide du chargeur de fichiers webpack

J'ai un problème pour faire fonctionner mes fichiers mp3 à l'aide du chargeur de fichiers webpack.

Voici le problème:

J'ai un fichier mp3 sur mon disque dur, que si j'ouvre en utilisant chrome par exemple "c:\somefolder\somemp3file.mp3" s'ouvre dans un onglet du navigateur et joue très bien.

Cependant, lorsque je sers exactement le même fichier à l'aide de webpack, cela ne fonctionne pas. J'ai configuré le chargeur dans webpack comme ceci:

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

Ensuite, lorsque j'essaie de créer un lien vers le fichier, je l'exige dans mon javascript, comme ceci:

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

cela me renvoie correctement l'url du fichier mp3.

Si j'essaie d'accéder manuellement à localhost:8080 suivi de l'URL renvoyée par require, le lecteur mp3 dans Chrome apparaît comme je m'y attendais, mais le fichier ne peut pas être lu, et il n'est pas possible de cliquer sur le bouton de lecture comme le fichier est corrompu ou quelque chose.

Quelqu'un sait ce que je fais mal ici?

webpackmp3webpack-file-loader
17
Øyvind Bråthen

Utilisez un chargeur de fichiers comme celui-ci:

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

https://stackoverflow.com/a/41158166/11878375 - c'est la bonne réponse, mais définissez le SRC comme ceci:

var path = require('path');

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

Par exemple, j'utilise react-chat-ui avec webpack et voici mon 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'
      }

    ]
  }
};

Et n'oubliez pas d'installer le chargeur de fichiers avant:

npm install file-loader --save-dev
4
Arthur Kupriyanov

Voici comment je traite les fichiers mp3 à l'aide de Webpack dans 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]',
        },
      })
    },
  },

Vous pouvez maintenant écrire <audio src="@/assets/water.mp3"></audio> dans vos modèles et cela devrait fonctionner.

1
Jérôme Pott