如何使用文件加载器修复音频文件的'module not found'？图像，CSS和JSON工作正常

Question

我是使用TypeScript/react/redux/etc构建浏览器游戏的新手。并且正在尝试实现游戏音频。我一直在尝试以相同的方式导入音频文件，但到目前为止无济于事。在使用" File-Loader"的WebPack配置中添加MP3之后，我尝试导入我放置在与我能够成功导入的图像文件相同的位置放置的示例MP3文件，但是当我尝试运行Web Pack时，告诉我找不到mp3模块。

示例文件

import React from "react";
import spriteSheet from "../assets/spritesheet.gif";
import audioFile from "../assets/pillRotate.mp3";
import { Gameboard } from "./Gameboard";
export class MainGameComponent extends React.Component {
    render() {
        return (
            <div>
                <img id="spriteSheet" src={spriteSheet} hidden={true} />
                <audio src={audioFile}></audio>
                <Gameboard />
            </div>
        )
    }
}
export default MainGameComponent;

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            { 
                test: /.tsx?$/, 
                use: "awesome-typescript-loader" 
            },
            {
                test: /.(png|jpg|gif|mp3)$/,
                use: 'file-loader',
            },
            {
                test: /.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            title: 'Dr. Mario',
            template: 'index.html',
            filename: './index.html'
        })
    ]
};

[at-loader] ./src/components/maingame.tsx:3:23中的错误 TS2307：找不到模块'../资产/pillrotate.mp3'。

Answer 1

如果使用Create-react-app来设置React项目。您可以尝试在react-app-env.d.ts中添加以下行：

declare module '*.mp3' {
  const src: string;
  export default src;
}

当您尝试在*.tsx中导入mp3文件时，Typescript编译器将尝试找出其声明，就像您导入另一个类文件一样。但是，当您尝试需要mp3文件时，如下：

<audio src={require('./assets/xxx.mp3')}>

ts不会尝试找到其声明，而是将其处理到WebPack Loader。这是为什么通过这种方式没有编译错误的原因。

Answer 2

使用require()为我工作

<img id="spriteSheet" src={require("../assets/spritesheet.gif")} hidden={true} />

Answer 3

使用Typescript导入音频文件时，请确保您在文件名周围没有括号。

import audioFile from "./audio_test_sound.mp3"