Creating Production Build of Game Using NPM Build and Webpack


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.                                             
  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.                                                                            
  main (972 KiB)                                                             

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            
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.

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.

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

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.

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

1 Like