Loading images results in 404 (Not Found) - webpack

Question

This is the text of the error

I'm trying to load a few images in my game in Phaser 3.23.0 The images are loaded in the function preload() in the file below

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);

I type

npm run webpack-dev-server --mode development

And starts webpack-dev-server in localhost:8080

Then I get these errors:

These are the errors in the console. Chrome browser.

These are the errors in the network. Chrome browser

These are the errors in the console. Firefox browser.

Firefox is not having any network activity. Not even one request.

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>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


const config = {
  entry: './src/scripts/main.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: {
          loader: 'file-loader?name=/src/assets/[name].[ext]',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'assets/',
          },
        },
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
  output: {
    path: path.resolve(
      __dirname,
      'dist',
    ),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
      template: './src/index.html',
    }),
  ],
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
    config.output.filename = 'main.bundle.js';
  }

  if (argv.mode === 'production') {
    config.plugins.push(new CleanWebpackPlugin());
    config.output.filename = 'main.[hash].bundle.js';
  }

  return config;
};

This is the repo at the time this question was made.

Legends · Accepted Answer · 2020-06-03T08:58:39.287

3

You have a 404.

change you main.js to:

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 });
}

Now execute:

yarn start / npm start

edited Jun 03 '20 at 08:58

answered Jun 02 '20 at 12:08

Legends

21,202
16
97
123

1

It's working! https://imgur.com/a/wTrEOiS Thanks mate. You are a legend as your name states. – Ivan Derlich Jun 02 '20 at 20:59
I commented the require.context('../assets') line and everything stills works fine. What does this function do? I've been reading https://webpack.js.org/guides/dependency-management/ and this https://stackoverflow.com/questions/54059179/what-is-require-context and still don't understand what it does and why is neccesary. – Ivan Derlich Jun 02 '20 at 23:58
Removed it, as it is not necessary here. [This](https://github.com/webpack/docs/wiki/context) explains it better. It can be used with dynamic `require`s, where you don't know upfront which resource will be required exactly. It will copy all the files specified in `require.context` to your dist folder and you will have them available at runtime. – Legends Jun 03 '20 at 09:13

Loading images results in 404 (Not Found) - webpack

1 Answers1