javascript - 使用 webpack 加载 MP3 文件

Question

我正在尝试在使用 webpack 的应用程序中加载一个简短的 mp3 文件。但是我无法让它工作。这是我得到的错误。

HTTP load failed with status 404. Load of media resource     http://127.0.0.1:5000/dist022e7b776a752949ddcf677722cde8fb.mp3 failed.

这是我的 webpack.config

var path = require('path');
var webpack = require('webpack');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        index: './js/index.js',
        topics: './js/topics.js',
        plans: './js/plans.js',
        audio_processor: './js/audio_processor.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        publicPath: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(ogg|mp3|wav|mpe?g)$/i,
                use: 'file-loader'
            }
         ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            JQuery: 'jquery'
        }),
        new CleanWebpackPlugin()
    ]
};

这就是我尝试访问文件的方式。

let click_sound = require('../audio/click_sound.mp3');
let audio = new Audio(click_sound);

这是文件夹结构。似乎可以在 dist 文件夹中创建 mp3。我正在尝试从 audio_recorder.js 文件中访问 mp3 文件。

|-- audio
|   `-- click_sound.mp3
|-- css
|   |-- bootstrap.css
|   |-- main.css
|   `-- starter-template.css
|-- dist
|   |-- 022e7b776a752949ddcf677722cde8fb.mp3
|   |-- audio_processor.bundle.js
|   |-- index.bundle.js
|   |-- plans.bundle.js
|   `-- topics.bundle.js
|-- js
|   |-- PlaybackController.js
|   |-- audio_processor.js
|   |-- audio_recorder.js
|   |-- config.json
|   |-- index.js
|   |-- lesson_feedback.js
|   |-- lesson_notation.js
|   |-- plans.js
|   `-- topics.js

谢谢

标签： javascriptaudionpmwebpackmp3