title: Phaser3 Image Assets Not Loading | 404 (Not Found)
body: <p>I'm following this tutorial to use Phtomstorm's boilerplate build a multi-scene game template. I'm getting a 404 for my logo image that I add in the preload() function of GameScene.js. I feel like I have followed the instructions to the T but am possibly not exposing the asset in webpack properly as I'm new to this tool.</p>
  <p>What am I doing wrong here in getting this logo.png to show on the screen?</p>
  <p>Tutorial - <a href="https://phasertutorials.com/creating-a-phaser-3-template-part-1/" rel="nofollow noreferrer">https://phasertutorials.com/creating-a-phaser-3-template-part-1/</a></p>
  <p>Project Template - <a href="https://github.com/photonstorm/phaser3-project-template.git" rel="nofollow noreferrer">https://github.com/photonstorm/phaser3-project-template.git</a></p>
  <p><strong>index.js</strong></p>
  <pre><code>import Phaser from &quot;phaser&quot;;
  import config from './Config/config';
  import GameScene from './Scenes/GameScene';
   
  class Game extends Phaser.Game {
    constructor () {
      super(config);
      this.scene.add('Game', GameScene);
      this.scene.start('Game');
    }
  }
   
  window.game = new Game();
  </code></pre>
  <p><strong>config.js</strong></p>
  <pre><code>import 'phaser';
   
  export default {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600
  };
  </code></pre>
  <p><strong>GameScene.js</strong></p>
  <pre><code>import 'phaser';
   
  export default class GameScene extends Phaser.Scene {
    constructor () {
      super('Game');
    }
   
    preload () {
      // load images
      this.load.image('logo', 'assets/logo.png');
    }
   
    create () {
      this.add.image(400, 300, 'logo');
    }
  };
  </code></pre>
  <p><strong>Webpack base.js</strong></p>
  <pre><code>const webpack = require(&quot;webpack&quot;);
  const path = require(&quot;path&quot;);
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  const { CleanWebpackPlugin } = require(&quot;clean-webpack-plugin&quot;);
  module.exports = {
    mode: &quot;development&quot;,
    devtool: &quot;eval-source-map&quot;,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;
          }
        },
        {
          test: [/\.vert$/, /\.frag$/],
          use: &quot;raw-loader&quot;
        },
        {
          test: /\.(gif|png|jpe?g|svg|xml)$/i,
          use: &quot;file-loader&quot;
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin({
        root: path.resolve(__dirname, &quot;../&quot;)
      }),
      new webpack.DefinePlugin({
        CANVAS_RENDERER: JSON.stringify(true),
        WEBGL_RENDERER: JSON.stringify(true)
      }),
      new HtmlWebpackPlugin({
        template: &quot;./index.html&quot;
      })
    ]
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/1kfBD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1kfBD.png" alt="enter image description here" /></a></p>
  <p><strong>npm start</strong></p>
  <pre><code>&gt; phaser3-project-template@1.1.1 start
  &gt; webpack-dev-server --config webpack/base.js --open
  
  i ｢wds｣: Project is running at http://localhost:8081/
  i ｢wds｣: webpack output is served from /
  i ｢wds｣: Content not from webpack is served from C:\Users\xeonp\Documents\phaser.io\phaser3-project-template
  Browserslist: caniuse-lite is outdated. Please run next command `npm update`
  i ｢wdm｣: wait until bundle finished: /
  i ｢wdm｣: Hash: a401be8d3773943c3f38
  Version: webpack 4.41.2
  Time: 2313ms
  Built at: 12/06/2020 9:30:36 AM
       Asset       Size  Chunks             Chunk Names
  index.html  158 bytes          [emitted]
     main.js   17.2 MiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi (webpack)-dev-server/client?http://localhost:8081 ./src 40 bytes {main} [built]
  [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
  [./node_modules/phaser/dist/phaser.js] 5.99 MiB {main} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
  [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
  [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
  [./src/Config/config.js] 113 bytes {main} [built]
  [./src/Scenes/GameScene.js] 2.71 KiB {main} [built]
  [./src/index.js] 2.1 KiB {main} [built]
      + 21 hidden modules
  Child html-webpack-plugin for &quot;index.html&quot;:
       1 asset
      Entrypoint undefined = index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 313 bytes {0} [built]
      [./node_modules/lodash/lodash.js] 530 KiB {0} [built]
      [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
  i ｢wdm｣: Compiled successfully.
  i ｢wdm｣: Compiling...
  i ｢wdm｣: Hash: 210a30ea65002a251ebc
  Version: webpack 4.41.2
  Time: 91ms
  Built at: 12/06/2020 9:30:55 AM
       Asset       Size  Chunks             Chunk Names
  index.html  158 bytes          [emitted]
     main.js   17.2 MiB    main  [emitted]  main
  Entrypoint main = main.js
  [./src/index.js] 2.1 KiB {main} [built]
      + 35 hidden modules
  Child html-webpack-plugin for &quot;index.html&quot;:
       1 asset
      Entrypoint undefined = index.html
         4 modules
  i ｢wdm｣: Compiled successfully.
  i ｢wdm｣: Compiling...
  i ｢wdm｣: Hash: 46d83d562089e6944d44
  Version: webpack 4.41.2
  Time: 118ms
  Built at: 12/06/2020 9:31:11 AM
       Asset       Size  Chunks             Chunk Names
  index.html  158 bytes          [emitted]
     main.js   17.2 MiB    main  [emitted]  main
  Entrypoint main = main.js
  [./src/index.js] 2.08 KiB {main} [built]
      + 35 hidden modules
  Child html-webpack-plugin for &quot;index.html&quot;:
       1 asset
      Entrypoint undefined = index.html
         4 modules
  i ｢wdm｣: Compiled successfully.
  </code></pre>
  <p><a href="https://i.stack.imgur.com/SyNvd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SyNvd.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/pIzwI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pIzwI.png" alt="enter image description here" /></a></p>