webpack 获取http://localhost:3000/assets/audio/Too_Late.mp3 404(Not Found)

oiopk7p5  于 2023-06-23  发布在  Webpack
关注(0)|答案(1)|浏览(138)

我需要加载mp3文件到我的播放器,但当我试图启动我的webpack服务器,我捕捉错误(screeshots),我发现,有一些与webpack配置和我shoud设置publicPath,e devServer设置,但没有工作,所以我看了所有的答案,并没有找到解决方案...
WebPack配置:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PostCssPresetEnv = require('postcss-preset-env');

const mode = process.env.NODE_ENV || 'development';

const devMode = mode === 'development';
const target = devMode ? 'web' : 'browserslist';
const devtool = devMode ? 'source-map' : undefined;

module.exports = {
    mode,
    target,
    devtool,
    devServer: {
        port: 3000,
        open: true,
        hot: true, 
    },
    entry: ['@babel/polyfill', path.resolve(__dirname, 'src/app/js', 'index.js')],
    output: {
        path: path.resolve(__dirname, 'src/app/dist'),
        clean: true,
        filename: 'index.[contenthash].js',
        assetModuleFilename: 'assets/[name][ext]',

    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/app', 'index.html'),
        }),
        new MiniCssExtractPlugin({
            filename: 'index.[contenthash].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
                test: /\.s?css$/i,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [PostCssPresetEnv],
                            },
                        },
                    },
                    'sass-loader',
                ],
            },
            {
                test: /\.(ttf|otf|woff|woff2)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name][ext]'
                }
            },
            {
                test: /\.mp3$/,
                loader: 'file-loader',
            },
            {
                test: /\.(jpeg|jpg|png|gif|webp|svg)$/i,
                use: [
                    {
                      loader: 'image-webpack-loader',
                      options: {
                        mozjpeg: {
                          progressive: true,
                        },
                        optipng: {
                          enabled: false,
                        },
                        pngquant: {
                          quality: [0.65, 0.90],
                          speed: 4
                        },
                        gifsicle: {
                          interlaced: false,
                        },
                        webp: {
                          quality: 75
                        }
                      }
                    },
                  ],
                type: 'asset/resource',
            },
            {
               test: /\.m?js$/i,
               exclude: /(node_modules|bower_components)/,
               use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                },
               },
            },
        ],
    },
}

JS:

import '../index.html';
import '../scss/style.scss';
import {data} from './data.js';

const AudioController = {
    state: {
        audios: [],
    },

    
    init() {
        this.initVariables();
        this.renderAudios();
    },

    initVariables() {
        this.audioList = document.querySelector('.items');
    },

    renderAudios() {
        data.forEach((item) => {
            const audio = new Audio(`../../assets/audio/${item.link}`);
            
            audio.addEventListener('loadeddata', () => {
                const newItem = { ...item, duration: audio.duration, audio };
                
                this.state.audios = [ ...this.state.audios, newItem ];
                
            })
        })
    }

}

AudioController.init();

数据对象:

export const data = [
    {
      id: 1,
      link: "Hurt_You.mp3",
      genre: "R&B",
      track: "Hurt You",
      group: "The Weeknd",
      year: 2020,
    },
    {
      id: 2,
      link: "In_Your_Eyes.mp3",
      genre: "R&B",
      track: "In Your Eyes",
      group: "The Weeknd",
      year: 2020,
    },
    {
      id: 3,
      link: "The_Hills.mp3",
      genre: "R&B",
      track: "The Hills",
      group: "The Weeknd",
      year: 2020,
    },
    {
      id: 4,
      link: "Too_Late.mp3",
      genre: "R&B",
      track: "Too Late",
      group: "The Weeknd",
      year: 2020,
    },
  ];

我收到的错误:enter image description here
所以如果有人有同样的错误,寻求你的帮助(

nlejzf6q

nlejzf6q1#

你只需要在公用文件夹后面给予路径

相关问题