使用Webpack配置Phaser 3游戏进行生产

I am writing this article to help people that are just starting to learn Phaser 3 and need extra support when deploying their game to production. This tutorial will focus on configuring your app with Webpack, 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 this template and jump to configuring your prod.js in this article (Step 5).

我写这篇文章是为了帮助刚开始学习Phaser 3并在将游戏部署到生产环境时需要额外支持的人们。 本教程将重点介绍如何使用Webpack配置您的应用程序，我将遍历每一行代码，说明它们在做什么以及它们为什么重要。 本教程不会向您展示如何设置Phaser 3游戏，在这种情况下，我建议您从此模板开始，跳到配置本文中的prod.js (第5步)。

第1步：创建Webpack文件 (Step 1: Create webpack files)

First of all, create a webpack folder in the root of your app. Inside this folder, create two files: base.js and prod.js. 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 前者将负责在开发中捆绑您的应用程序，后者将合并到前者中并创建您的产品捆绑包。

步骤2：安装依赖项 (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);
  webpack(很明显);
• path;
  路径;
• html-webpack-plugin;
  html-webpack-plugin;
• clean-webpack-plugin;
  clean-webpack-plugin;
• webpack-merge;
  webpack合并
• terser-webpack-plugin;
  terser-webpack-plugin;
• copy-webpack-plugin;
  复制webpack插件;
• webpack-dev-server;
  webpack-dev-server;
• babel-loader;
  巴别装载机
• file-loader.
  文件加载器。

步骤3：配置package.json (Step 3: Configure package.json)

Now that we installed all of the dependencies and set up the webpack 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 package.json file, inside of "scripts", add these two lines of code:

现在我们已经安装了所有依赖项并设置了webpack文件夹，我们需要告诉我们的应用程序在启动本地服务器以及将应用程序构建到生产环境时该怎么做。 在package.json文件的"scripts"内部，添加以下两行代码：

"build": "webpack --config webpack/prod.js, — this one will be responsible for building the game and creating our production bundle. It calls webpack and uses the prod.js config file inside our webpack folder.

"build": "webpack --config webpack/prod.js, -这将是一个负责建造游戏，创造我们的产品包，它调用的WebPack和使用。 prod.js配置我们的内部文件webpack文件夹。

"start": "webpack-dev-server --config webpack/base.js --open" — this one will be responsible for starting our local server with our webpack-dev-server package. It uses the base.js config file inside our webpack folder.

"start": "webpack-dev-server --config webpack/base.js --open" -这将负责使用webpack-dev-server软件包启动本地服务器。 它使用webpack文件夹中的base.js配置文件。

步骤4：配置base.js文件 (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会执行的操作，它需要知道将捆绑哪些文件以及我们将使用哪些插件。 我做了内联注释，解释了每个步骤：

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 module.exports = { 
   mode: ‘development’, // enable webpack's built-in optimizations // that correspond to development
   devtool: ‘eval-source-map’, // Each module is executed with     // 
   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
   ],
}

步骤5：配置prod.js文件 (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 webpack-merge, which is responsible for merging this config file with base.js. Again, I made inline comments explaining each step:

接下来，让我们定义在构建捆绑包时webpack会做什么，它需要知道哪些文件将被捆绑以及我们将使用哪些插件。 在此文件中，我们使用webpack-merge ，它负责将此配置文件与base.js合并。 同样，我进行了内联注释，解释了每个步骤：

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 filemodule.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   
         ],
      }),
   ],
});

结论 (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 npm run build and a dist folder with your bundle will be created in the root of your app. If you want to deploy it to Netlify, don’t forget to tell them the build command and the resulting folder where your build is.

从根本上讲，这是您需要完成的工作，才能将您的应用程序部署到生产环境中。 之后，您可以简单地运行npm run build并且将在您的应用程序的根目录中创建一个带有捆绑包的dist文件夹。 如果要将其部署到Netlify ，请不要忘记告诉他们build命令以及生成的文件夹。

If you like Phaser 3 games, please check out the first game I built here. Don’t forget to give me a star if you like it.

如果您喜欢Phaser 3游戏，请查看我在此处构建的第一款游戏。 如果喜欢的话，别忘了给我一颗星星。

If you liked this article, make sure to:

如果您喜欢这篇文章，请确保：

• Check out my GitHub profile

  查看我的GitHub个人资料

• Check out my portfolio

  查看我的投资组合

• Visit Microverse, where I recently graduated from

  访问Microverse ，我最近从那里毕业

翻译自: https://medium.com/swlh/configuring-your-phaser-3-game-with-webpack-for-production-795329e15a6f