Configuring Your Phaser 3 Game With Webpack For Production

const webpack = require('webpack'); // import webpack :)
const path = require('path'); // Node.js module used to manipulate file paths
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
// generates an HTML file for your application by injecting automatically all your generated bundles.
const { CleanWebpackPlugin } = 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.exports = { 
   mode: 'development', // enable webpack's built-in optimizations that correspond to development
   devtool: '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
            include: path.resolve(__dirname, 'src/'), // checks in this path
            exclude: /node_modules/, // exclude node_modules folder
            use: { 
               loader: 'babel-loader',
               options: { 
                  presets: ['env'],
               }, // uses babel-loader to transpile your ES6 code
            },
         },
         { 
            test: [/\.vert$/, /\.frag$/],
            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 CleanWebpackPlugin({
         root: path.resolve(__dirname, '../'),
      }), // specified the path where this plugin will delete the files on each rebuild
      new webpack.DefinePlugin({
         CANVAS_RENDERER: JSON.stringify(true),
         WEBGL_RENDERER: JSON.stringify(true),
      }), // config webpack to handle renderer swapping in our app
      new HtmlWebpackPlugin({
         template: './index.html',
      }), // specify where your HTML template is located
   ],
}

const merge = require('webpack-merge'); // For merging this config with base.js
const TerserPlugin = require('terser-webpack-plugin'); // To minify your JS file in the build folder
const CopyPlugin = require('copy-webpack-plugin'); // To copy your assets to the build folder
const base = require('./base'); // Importing base.js file
module.exports = merge(base, { // Merging this config with base.js config 
   mode: 'production', // enable webpack's built-in optimizations  // that correspond to production
   output: {    
      filename: 'bundle.min.js', // The name of the built JS file
   },  
   devtool: false, // We don't need this in our production
   performance: {    
      maxEntrypointSize: 900000, 
      maxAssetSize: 900000, // These configure the file size limit of your build, webpack send you warnings if it is exceeded
   },  
   optimization: {
      minimizer: [
         new TerserPlugin({
            terserOptions: {
               output: {
                  comments: false, // Tell Terser Plugin to remove comments in your minified file
               },
            },
         }),
      ],
   },  
   plugins: [
      new CopyPlugin({ 
         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   
         ],
      }),
   ],
});