Phaser 3 and Webpack and unresolved png files

Phaser 3
1

Hey y’all, I’m attempting to serve up a bundled js file to my server using webpack. Everything seems to be going to fine until we get to the png files, for some reason- despite the png files being added to the dist folder with a hashed named- the images won’t resolve and I get a 404 error for each of the assets. This is what my webpack file looks like, I’d appreciate any suggestions for resources to look into to solve this problem.

const path = require('path');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

  // production mode
  mode: "production",

  // input file
  entry: "./src/main.js",

  // output file
  output: {
      //route for findind assets
      publicPath: "/dist/",
      // file name
      filename: "bundle.js",
      // complete path
      path: path.resolve(__dirname, 'dist'),
      // assetModuleFilename: 'dist/assets/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      }
    ]
  },
}
2

Not sure if this is any use to you, but I also recently had an issue with png files not being resolved although in mine they weren’t moving to the dist folder. However the config below now works in case it contains any clues for you…

const path = require(‘path’);
const CopyWebpackPlugin = require(“copy-webpack-plugin”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);

module.exports = {
entry: ‘./src/index.ts’,
mode: “development”,
devtool: “eval-source-map”,
module: {
rules: [
{
test: [/.js$/, /.ts$/],
exclude: /node_modules/,
use: {
loader: “babel-loader”
},
resolve: {
fullySpecified: false
}
},
{
// test: /.(gif|png|jpe?g|svg|xml)$/i,
test: /.png$/,
type: ‘asset/resource’
}

]

},
plugins: [
// new CleanWebpackPlugin({
// root: path.resolve(__dirname, “…/”)
// }),
new webpack.DefinePlugin({
CANVAS_RENDERER: JSON.stringify(true),
WEBGL_RENDERER: JSON.stringify(true)
}),
new CopyWebpackPlugin({
patterns: [
{
from: “src/assets/”,
to: “assets/”,
},
],
}),
new HtmlWebpackPlugin({
template: “./index.html”
})
],

resolve: {
extensions: [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’, ‘.ts’]
}

}