Как исправить «модуль не найден» для аудиофайлов с помощью загрузчика файлов?Изображения, CSS и JSON работают просто отлично - PullRequest
Новая
       15

Как исправить «модуль не найден» для аудиофайлов с помощью загрузчика файлов?Изображения, CSS и JSON работают просто отлично

2 голосов
/ 27 июня 2019

Я новичок в создании браузерной игры с использованием Typescript / React / Redux / и т. Д.и я пытаюсь реализовать аудио для игры.Я пытался импортировать аудиофайлы таким же образом, как я импортирую файлы изображений и json, но пока безрезультатно.После добавления mp3 в конфигурацию моего веб-пакета с помощью 'file-loader' я пытаюсь импортировать образец mp3-файла, который я помещаю в то же место, что и файл изображения, который мне удалось успешно импортировать, но когда я пытаюсь запустить веб-пакет, онсообщает, что модуль 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'.

1 Ответ

2 голосов
/ 27 июня 2019

Использование require() у меня сработало 

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