javascript - Webpack 文件加载器提供图像但不提供音频 (mp3)
问题描述
我正在使用 Webpack 和文件加载器编写一个 TypeScript 应用程序来提供图像和音频。我无法让 webpack 配置处理音频文件。
我越来越GET http://localhost:8080/media/d.mp3 404 (Not Found)
这些图像在开发服务器上工作正常,并且通过下面的 webpack 设置也可以很好地构建。
文件夹结构:
|-public
|---audio
|---images
|-src
|---audio
|---images
如果我将所有扩展名组合成一个字符串并使用单个文件夹,则结果相同。
我的webpack.config.js:
const path = require('path');
module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, 'public/scripts'),
filename: 'bundle.js'
},
devtool: "source-map",
module: {
rules: [{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(scss|sass|css)$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../images/',
publicPath: 'images/',
useRelativePaths: true
}
}
]
},
{
test: /\.(mp3|wav)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../audio/',
publicPath: 'audio/',
useRelativePaths: true
}
}
]
},
]
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
publicPath: '/scripts/'
},
node: {
fs: "empty"
}
};
解决方案
推荐阅读
- c# - 找不到类型或命名空间“NModel”
- python - 生成器在 python 中的 yield return 是什么,这与 return 有什么不同
- node.js - electron - node.js - ng : 无法加载文件路径\ng.ps1,因为在此系统上禁用了运行脚本
- python - Pycharm 2019 未显示 print() 输出;但退出代码 0。我该如何解决?
- asp.net-core - ASP.NET Core - HealtCheck 消息中的异常
- scala - Elastic4S - Jackson 的 ScalaObjectMapper 类未找到并抛出 NoSuchMethodError
- android - 保持一个应用程序android连接到服务器的最佳方法是什么
- arrays - 如何将 find 的结果存储在 bash 数组中,以将结果用作 bash 脚本中的文件路径?
- reactjs - 我应该如何使用反应路由器 v4 处理查询路由?
- arrays - 多查找powershell数组