我需要加载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
所以如果有人有同样的错误,寻求你的帮助(
1条答案
按热度按时间nlejzf6q1#
你只需要在公用文件夹后面给予路径