Javascript 在404中加载图像结果（未找到）-网页包_Javascript_Webpack_Webpack Dev Server_Phaser

Javascript 在404中加载图像结果（未找到）-网页包

javascript webpack

Javascript 在404中加载图像结果（未找到）-网页包,javascript,webpack,webpack-dev-server,phaser,Javascript,Webpack,Webpack Dev Server,Phaser,这是错误的文本我正在尝试在Phaser3.23.0中的游戏中加载一些图像图像将加载到下面文件中的函数preload（）中 main.js import Phaser from 'phaser'; function preload() { this.load.image('sky', 'assets/sky.png'); this.load.image('ground', 'assets/platform.png'); this.load.image('star', 'asse

这是错误的文本

我正在尝试在Phaser3.23.0中的游戏中加载一些图像图像将加载到下面文件中的函数preload（）中

main.js

import Phaser from 'phaser';

function preload() {
  this.load.image('sky', 'assets/sky.png');
  this.load.image('ground', 'assets/platform.png');
  this.load.image('star', 'assets/star.png');
  this.load.image('bomb', 'assets/bomb.png');
  this.load.spritesheet('dude',
    'assets/dude.png',
    { frameWidth: 32, frameHeight: 48 });
}

function create() {
  this.add.image(400, 300, 'sky');
}

function update() {
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload,
    create,
    update,
  },
};

// eslint-disable-next-line no-unused-vars
const game = new Phaser.Game(config);

const canvas = document.querySelector('canvas');

console.log(game);

我打字

npm run webpack-dev-server --mode development

并在localhost:8080中启动webpack dev服务器

然后我得到这些错误：

这些是控制台中的错误。Chrome浏览器

这些是网络中的错误。浏览器

这些是控制台中的错误。火狐浏览器

Firefox没有任何网络活动。连一个请求都没有

index.html

    <!doctype html> 
    <html lang="en"> 
    <head> 
        <meta charset="UTF-8" />
        <title>Making your first Phaser 3 Game - Part 1</title>
        <style type="text/css">

        </style>
    </head>
    <body>
    </body>
    </html>

是该问题提出时的回购协议。

您有一个404。

将您的

main.js

更改为：

function preload() {
  this.load.image('sky', require("../assets/sky.png").default);
  this.load.image('ground', require("../assets/platform.png").default);
  this.load.image('star', require("../assets/star.png").default);
  this.load.image('bomb', require("../assets/bomb.png").default);
  this.load.spritesheet('dude',
  require("../assets/dude.png").default,
    { frameWidth: 32, frameHeight: 48 });
}

现在执行：

yarn start / npm start

它起作用了！谢谢你，伙计。正如你的名字所说，你是一个传奇人物。我对require.context（'../assets'）行进行了注释，一切正常。这个函数做什么？我一直在读这个，但仍然不明白它是做什么的，为什么是必要的。删除它，因为它在这里是不必要的。更好地解释它。它可以与dynamic

require

s一起使用，在这种情况下，您不知道需要哪些资源。它将把

require.context

中指定的所有文件复制到您的dist文件夹中，您可以在运行时使用这些文件。

yarn start / npm start