我正在使用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"
}
};