如何使用文件加载器修复音频文件的“找不到模块”？图像、CSS 和 JSON 工作正常

Question

我是使用 Typescript/React/Redux/等构建浏览器游戏的新手。并且正在尝试为游戏实现音频。我一直在尝试以与导入图像和 json 文件相同的方式导入音频文件，但到目前为止无济于事。使用“文件加载器”将 mp3 添加到我的 webpack 配置后，我尝试导入一个示例 mp3 文件，该文件与我能够成功导入的图像文件放在同一位置，但是当我尝试运行 webpack 时，它告诉我找不到 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 中的错误：找不到模块“../assets/pillRotate.mp3”。

Answer 1

如果您使用 create-react-app 来设置您的 React 项目。您可以尝试在您的react-app-env.d.ts:

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

当您尝试在 中导入mp3文件时*.tsx，打字稿编译器将尝试找出其声明，就像您导入另一个类文件一样。但是当你尝试要求一个mp3文件时，像这样：

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

ts 不会试图找到它的声明，而是将它处理给 webpack 加载器。这就是为什么以这种方式没有编译错误。

Answer 2

使用require()对我有用

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