I am writing this article to help people that are just starting to learn and need extra support when deploying their game to production. This tutorial will focus on configuring your app with , I will run through each line of code explaining what they are doing and why they are important. This tutorial won’t show you how to set up your Phaser 3 game, in that case I recommend you to start with and jump to configuring your in this article (Step 5). Phaser 3 Webpack this template prod.js Step 1: Create webpack files First of all, create a folder in the root of your app. Inside this folder, create two files: and . The former will be responsible for bundling your app both in development, the latter will be merged to the former and create your production bundle. webpack base.js prod.js Step 2: Install dependencies Before starting with the configuration files, you need to install the dependencies we will need. Below is the list of required modules used in this tutorial: webpack (obviously); path; html-webpack-plugin; clean-webpack-plugin; webpack-merge; terser-webpack-plugin; copy-webpack-plugin; webpack-dev-server; babel-loader; file-loader. Step 3: Configure package.json Now that we installed all of the dependencies and set up the folder, we need to tell our app what to do when we start our local server and when we build our app to production. In your file, inside of , add these two lines of code: webpack package.json "scripts" — this one will be responsible for building the game and creating our production bundle. It calls webpack and uses the config file inside our folder. "build": "webpack --config webpack/prod.js, prod.js webpack — this one will be responsible for starting our local server with our package. It uses the config file inside our folder. "start": "webpack-dev-server --config webpack/base.js --open" webpack-dev-server base.js webpack Step 4: Configure base.js file First, let’s define what webpack will do when we start our local server or build bundle, it needs to know which files will be bundled and which plugins we will be using. I made inline comments explaining each step: webpack = ( ); path = ( ); HtmlWebpackPlugin = ( ); { CleanWebpackPlugin } = ( ); .exports = { : , devtool: , : { : [ 
         { : , include: path.resolve(__dirname, ), exclude: , use: { : , : { : [ ],
               }, },
         },
         { : [ , /\.frag$/], : ,
         }, { : , : ,
         }, ],
   }, : [ CleanWebpackPlugin({ : path.resolve(__dirname, ),
      }), webpack.DefinePlugin({ : .stringify( ), : .stringify( ),
      }), HtmlWebpackPlugin({ : ,
      }), ],
} const require 'webpack' // import webpack :) const require 'path' // Node.js module used to manipulate file paths const require 'html-webpack-plugin' // generates an HTML file for your application by injecting automatically all your generated bundles. const require 'clean-webpack-plugin' // this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild. module mode 'development' // enable webpack's built-in optimizations that correspond to development 'eval-source-map' // Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files module rules test /\.js$/ // checks for files with .js extension in the path specified below 'src/' // checks in this path /node_modules/ // exclude node_modules folder loader 'babel-loader' options presets 'env' // uses babel-loader to transpile your ES6 code test /\.vert$/ use 'raw-loader' // in case you need to use Vertex and Fragment shaders, this loader will bundle them for you. test /\.(gif|png|jpe?g|svg|xml)$/i use 'file-loader' // in case you need to use images, this loader will bundle them for you plugins new root '../' // specified the path where this plugin will delete the files on each rebuild new CANVAS_RENDERER JSON true WEBGL_RENDERER JSON true // config webpack to handle renderer swapping in our app new template './index.html' // specify where your HTML template is located Step 5: Configure prod.js file Next, let’s define what webpack will do when we build bundle, it needs to know which files will be bundled and which plugins we will be using. In this file, we use , which is responsible for merging this config file with . Again, I made inline comments explaining each step: webpack-merge base.js merge = ( ); TerserPlugin = ( ); CopyPlugin = ( ); base = ( ); .exports = merge(base, { mode: , output: { : , }, : , performance: { : , : , }, : { : [ TerserPlugin({ : { : { : , },
            },
         }),
      ],
   }, : [ CopyPlugin({ : [
            { : , : }, ],
      }),
   ],
}); const require 'webpack-merge' // For merging this config with base.js const require 'terser-webpack-plugin' // To minify your JS file in the build folder const require 'copy-webpack-plugin' // To copy your assets to the build folder const require './base' // Importing base.js file module // Merging this config with base.js config 'production' // enable webpack's built-in optimizations  // that correspond to production filename 'bundle.min.js' // The name of the built JS file devtool false // We don't need this in our production maxEntrypointSize 900000 maxAssetSize 900000 // These configure the file size limit of your build, webpack send you warnings if it is exceeded optimization minimizer new terserOptions output comments false // Tell Terser Plugin to remove comments in your minified file plugins new patterns from './src/assets' to 'src/assets' // Configure the path from where webpack will copy your assets from and the path where it will put it when the build is done, change it according to your app organization Conclusion That’s basically what needs to be done for you to be able to deploy your app to production. After that, you can simply run and a folder with your bundle will be created in the root of your app. If you want to deploy it to , don’t forget to tell them the build command and the resulting folder where your build is. npm run build dist Netlify If you like Phaser 3 games, please check out the first game I built . Don’t forget to give me a star if you like it. here If you liked this article, make sure to: Check out my GitHub profile Check out my portfolio Visit , where I recently graduated from Microverse Also behind paywall published on: https://medium.com/swlh/configuring-your-phaser-3-game-with-webpack-for-production-795329e15a6f

Configuring Your Phaser 3 Game With Webpack For Production

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

6 Common HTML and CSS Interview Question and Answers

Babel: Your first code transformations

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

How to Setup Webpack and Babel 7 for React

How To Test API Requests Using Promises

6 Common HTML and CSS Interview Question and Answers

Babel: Your first code transformations

ELI5: Babel and the gang

How to Fetch Date with Promise.all and Async / Await

How to Setup Webpack and Babel 7 for React

How To Test API Requests Using Promises

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps