Creating Production Build of Game Using NPM Build and Webpack

Phaser 3
1

Hi,

I don’t have much experience with webpack, I have just been using it for the game development because the example I started from was using it and it seemed to work for me when developing the game. I have used NPM to create production builds of react projects I have done in the past so what I am trying to achieve is to create a build I can deploy. My game is definitely running under development.

What I have done is to run npm build. Not sure if that is right if I have webpack, but it seems to run through and create a dist folder. When it is compiling it does give the warnings below which I have googled and it appears that it is just a warning and can be ignored so not sure if this is causing the issue.

Version: webpack 4.41.2
Time: 18124ms
Built at: 23/05/2020 06:02:51
                               Asset       Size  Chunks                    Chunk Names
7ba809222a8df4955705d20b3a507f87.png   86.8 KiB          [emitted]         
                       bundle.min.js    972 KiB       0  [emitted]  [big]  main
               bundle.min.js.LICENSE    2.9 KiB          [emitted]         
                          index.html  156 bytes          [emitted]         
Entrypoint main [big] = bundle.min.js
 [156] (webpack)/buildin/global.js 472 bytes {0} [built]
[1448] ./src/assets/logo.png 82 bytes {0} [built]
[1449] ./src/index.js + 1 modules 37.9 KiB {0} [built]
       | ./src/index.js 37.8 KiB [built]
       | ./src/include.js 136 bytes [built]
    + 1447 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (879 KiB).                                                          
This can impact web performance.                                             
Assets:                                                                      
  bundle.min.js (972 KiB)                                                    

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (879 KiB). This can impact web performance.                                                                            
Entrypoints:                                                                 
  main (972 KiB)                                                             
      bundle.min.js                                                          
                                                                             

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.                                   
For more info visit https://webpack.js.org/guides/code-splitting/            
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 297 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

When I open the dist folder and open index.html in the browser I get the following CORS errors when the page loads and then I get an error “this.currentConfig” is undefined.

///home/chris/Documents/games/phaser/ZenerLive/dist/src/assets/Sound/bensound-scifi.mp3
file:///home/chris/Documents/games/phaser/ZenerLive/dist/src/assets/bricklogo.png
TypeError: this.currentConfig is undefined

Can anyone advise me on how I could resolve this or what steps I should be taking in order to build the project? I am not familiar with Webpack so I don’t have much of an understanding of what it is for exactly. I was using it because it enabled me to quickly reload my game when making changes to the code and serve it from a port on the development computer. My goal is to just have the code running statically from the production server.

2

Those warnings are of no consequence. They’re just telling you the generated file is big, which is to be expected for a game.

How are you opening the game? The warnings suggest you’re directly opening it in a browser, which will not. You need to run it from a local web server if you want to test it on your machine.

1 Like
3

Hi Telinc,

I am opening it from the development server. I was going to check it on there before uploading, but what you say makes sense so I will try the build on the live server and let you know how that goes.

4

@Telinc1 Many thanks, I have uploaded it to my server and got it working as it did in development.

1 Like