2016-07-07 12 views
5

webpackファイルローダーを使用してmp3ファイルを使用する際に問題があります。webpackファイルローダーを使用してmp3ファイルを処理する

これは問題です:ブラウザのタブで開き、:「\ somefolder \ somemp3file.mp3 C」という私が例えばによりクロムを使用して開いた場合、私は私のハードディスク上のmp3ファイルを持っている

うまくいく。

ただし、webpackを使用して同じファイルを提供しても機能しません。私はこのように、私は私のjavascriptの内側にそれを必要とするファイルにリンクしようとしているとき、そして、

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

:私はこのようなWebPACKのでローダーを設定している

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

これは正しく私を返します。 mp3ファイルのURL。

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

ここで間違っていることは誰でも知っていますか?このような

+0

'ファイルを削除してください'あなたが '')(必要に呼び出すときに!。実際には2番目の '.mp3'ファイルが生成されます。恐らく〜80bytesです。ファイルを見ると、文字列(バンドルされている実際の '.mp3'ファイルへのURL)のモジュールのエクスポートだけです。ですから、webpackの設定をそのままにして、jsファイルで 'var src = require( './../ content/somemp3file.mp3'); document.getElementById( 'myAudio')。src = src; ' –

答えて

3

使用するファイル・ローダー:

{ 
    test: /\.mp3$/, 
    include: SRC, 
    loader: 'file-loader' 
} 
関連する問題