web-dev-qa-db-ja.com

Webpackファイルローダーを使用してMP3ファイルを提供する

Webpackファイルローダーを使用してmp3ファイルを機能させるのに問題があります。

これは問題です：

ハードディスクにmp3ファイルがあり、chromeたとえば「c：\ somefolder\somemp3file.mp3」を使用して開くと、ブラウザのタブが開き、問題なく再生されます。

ただし、webpackを使用してまったく同じファイルを提供すると機能しません。私はこのようにローダーをwebpackに設定しました：

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

次に、ファイルにリンクしようとすると、次のように、JavaScript内でそれを必要とします。

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

これにより、mp3ファイルのURLが正しく返されます。

localhost:8080に手動で移動してからrequireによって返されたURLを表示しようとすると、Chromeのmp3プレーヤーが期待どおりにポップアップ表示されますが、ファイルを再生できません。ファイルが破損しているなどの理由で再生ボタンをクリックすることはできません。

誰かが私がここで間違っていることを知っていますか？

webpackmp3webpack-file-loader
17
Øyvind Bråthen

次のようなファイルローダーを使用します。

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

https://stackoverflow.com/a/41158166/11878375 -正解ですが、次のようにSRCを定義します。

var path = require('path');

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

たとえば、webpackで react-chat-ui を使用していますが、これは私の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'
      }

    ]
  }
};

そして、前に file-loader をインストールすることを忘れないでください：

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

これは、Nuxt 2でWebpackを使用してmp3ファイルを処理する方法です。

  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>をテンプレートに含めると、機能するはずです。

1
Jérôme Pott