我在使用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返回的网址,则Chrome中的mp3播放器会弹出,就像我预期的那样,但无法播放该文件,也无法点击像文件一样的播放按钮已损坏或其他东西。
任何人都知道我在这里做错了什么?
答案 0 :(得分:9)
像这样使用文件加载器:
{
test: /\.mp3$/,
include: SRC,
loader: 'file-loader'
}
答案 1 :(得分:3)
https://stackoverflow.com/a/41158166/11878375-正确的答案,但是像这样定义SRC:
var path = require('path');
var SRC = path.resolve(__dirname, 'src/main/js');
例如,我将react-chat-ui与webpack一起使用,这是我的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
答案 2 :(得分:0)
这是我在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>
,它应该可以正常工作。
答案 3 :(得分:0)
检查文件加载器的版本,我通过将文件加载器从4.xx升级到6.xx,然后添加了 mp3解决了此问题设置为文件的常规Webpack配置插件设置=>
// webpack.config.js
{
test: /\.(gif|png|jpe?g|svg|xml|mp3)?$/i,
use: "file-loader"
}
// OR
{
test: /\(mp3|wav|mpe?g|ogg)?$/i,
use: 'file-loader'
}
// OR BOTH
答案 4 :(得分:0)
我的解决方案:安装文件加载器。更新webpack.config.js:
// webpack.config.js
rules: [
{
test: /\.mp3$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
Project.js:
const smthn = require('../sound.mp3');
const sound = new Audio('./sound.mp3');
(() => sound.play())();
答案 5 :(得分:0)
// webpack.config.js
{
test: /\.(mp3|wav)$/,
loader: 'file-loader',
query: {
name: 'media/[name].[ext]'
}
}