【教程】使用webpack搭建pixi.js开发环境

更新于 2月24日  约 16 分钟
本文介绍怎么使用webpack4搭建pixi.js游戏的开发环境,怎么配置babel优化代码(tree shake)、混淆代码、合并代码、并最终将ES6+转换为ES5,怎么优化图片资源并最终发布项目。
这篇文章也被pixi.js官方收录为教程 Webpack tutorial with pixi

欢迎关注专栏 pixijs游戏开发

前提

  • 需要会简单使用nodejs,了解package.json,会简单使用npm initnpm installnpm run命令。
  • 需要稍微了解webpack
  • 需要有google chrome浏览器。
  • 最好会一点git,demo项目pixi-webpack-demo托管在github上,通过切换不同分支演示一步一步项目的构建过程,现在把项目clone下来吧。
  • 为了更容易理解,这里先贴出来项目最终的目录结构。

    .
    ├── dist
    │   ├── index.html
    │   ├── game.min.879458fc.js
    │   └── assets
    │       └── bunny.png
    ├── src
    │   ├── index.html
    │   ├── assets
    │   │   └── bunny.png
    │   └── js
    │       └── main.js
    ├── package.json
    ├── webpack.common.js
    ├── webpack.dev.js
    └── webpack.prod.js

构建环境

  • nodejs:需要node环境,前端项目现在基本都是基于node项目创建的,node的包管理系统和工具链很方便。
  • git:非必须,看demo时候切分支用。

初始化项目

运行git checkout init切换到init分支即可看到这一步的示例。
  • 创建目录pixi-webpack-demo,在pixi-webpack-demo根目录下运行npm init命令初始化项目,按照提示输入项目信息,完成后生成一个package.json文件。
  • 运行npm install --save pixi.js安装依赖。
  • 完成上面两步,package.json文件如下所示:

    {
      "name": "pixi-webpack-demo",
      "version": "1.0.0",
      "description": "make pixi.js game with webpack",
      "main": "src/js/main.js",
      "keywords": ["pixi.js","webpack"],
      "author": "yulijun",
      "license": "MIT",
      "dependencies": {
        "pixi.js": "^5.2.1"
      }
    }
  • 创建文件src/index.html

    <html>
      <head>
        <title>pixi-webpack-demo</title>
      </head>
      <body>
        <canvas id="scene"></canvas>
        <!--这里不需要引入入口js,webpack会自动帮我们引入,“引入webpack”步骤再详细解释它-->
      </body>
    </html>
  • 创建文件src/js/main.js,这个文件是游戏入口文件。

    import * as PIXI from 'pixi.js'
    
    const app = new PIXI.Application({
      width: 720,
      height: 1280,
      backgroundColor: 0x1099bb,
      view: document.querySelector('#scene')
    });
    
    const texture = PIXI.Texture.from('assets/bunny.png');
    const bunny = new PIXI.Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = 160
    bunny.y = 160
    app.stage.addChild(bunny);
    
    app.ticker.add((delta) => {
      bunny.rotation -= 0.01 * delta;
    });

引入webpack

运行git checkout webpack切换到webpack分支即可看到这一步的示例。
  • 运行npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge copy-webpack-plugin imagemin-webpack-plugin html-webpack-plugin安装依赖。
  • 创建webpack.common.js文件,这个是webpack公共配置。

    const path = require('path')
    const HtmlPlugin = require('html-webpack-plugin')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const ImageminPlugin = require('imagemin-webpack-plugin').default
    
    module.exports = {
      //游戏入口文件
      context: path.join(__dirname, 'src'),
      entry: ['./js/main.js'],
      output: {
        //js文件最终发布到哪个路径
        path: path.resolve(__dirname, 'dist'),
     
        //开发调试阶段webpack会自动处理这个文件让html引用到,虽然磁盘上不会有这个文件。
        //但是最终发布项目的时候会生成这个文件,并会插入到index.html中。
        //[hash:8]的意思是生成随机的八位hash值,为了缓存更新问题。
        filename: 'game.min.[hash:8].js',
      },
      target: 'web',
    
    plugins: [
      //拷贝src/assets目录下的所有资源到dist/assets下
      new CopyWebpackPlugin([
        { from: 'assets/',to:'assets/'}
      ], {
        ignore: [],
        debug:'debug',
        copyUnmodified: true
      }),
      
      //优化图片资源,压缩png。
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i ,
    
        //这种方式压缩在mac上效果不太好
        // optipng: {
        //   optimizationLevel: 4
        // },
    
        //这个方式在mac上压缩效果更好,windows上尚未测试有待验证。
        pngquant: {
          verbose:true,
          quality: '80-90',
        }
      })
      
      //拷贝html,插入js。
      ,new HtmlPlugin({
        file:path.join(__dirname,'dist','index.html'),
        template:'./index.html'
      })
    ]
    }
  • 创建webpack.dev.js文件,这个配置文件用于开发调试阶段。

    const path = require('path')
    const merge = require('webpack-merge')
    const common = require('./webpack.common.js')
    
    //和common配置文件合并
    module.exports = merge(common, {
      devtool: 'inline-source-map',
      mode: 'none',
      
      //调试用http服务器配置
      devServer: {
        //调试时候源代码的位置
        contentBase: path.join(__dirname, 'src'),
        
        //服务器端口
        port: 8080,
        
        //服务器地址,注意这里如果配置为`127.0.0.1`的话局域网内其他机器无法访问此服务器。
        host: '0.0.0.0',
        
        //监听本地js文件,有修改的话自动重新刷新页面。
        hot: true
      }
    })
  • 创建webpack.prod.js文件,这个配置文件用于发布项目(稍后在引入babel发布项目步骤再详细介绍,这里暂时先贴出来),这里配置了babel转码、tree shake和生成source map等。

    const merge = require('webpack-merge')
    const common = require('./webpack.common.js')
    module.exports = merge(common, {
      mode:'production',
      devtool: 'source-map',
      module: {
        rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', {
                  'corejs': '3',
                  'useBuiltIns': 'usage'
                }]
              ],
              plugins: ['@babel/plugin-transform-runtime']
            }
          }
        }]
      }
    })
  • package.json中的script配置节增加启动命令。

    {
      "name": "pixi-webpack-demo",
      "version": "1.0.0",
      "description": "make pixi.js game with webpack",
      "main": "src/js/main.js",
      "keywords": ["pixi.js","webpack"],
      "author": "yulijun",
      "license": "MIT",
      "scripts": {
        "start": "webpack-dev-server --open 'google chrome' --config webpack.dev.js"
      },
      "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3",
        "copy-webpack-plugin": "^5.1.1",
        "html-webpack-plugin": "^3.2.0",
        "imagemin-webpack-plugin": "^2.4.2",
        "webpack-merge": "^4.2.2"
      },
      "dependencies": {
        "pixi.js": "^5.2.1"
      }
    }
  • 现已成功引入了webpack,运行npm start启动项目,会自动打开chrome浏览器,我们看到游戏已经跑起来了!尝试修改src/js/main.js文件,保存下,页面会自动刷新,我们的修改也已经能反映到页面上了!

构建项目

运行git checkout master切换到master分支即可看到这最终一步的示例。
  • 引入babel让你能使用最新的ES特性(这些库主要是为了ES6+转ES5,还有些polyfill等等,这里不做过多的解释,具体可参考babel官方文档)。

    • npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
    • npm install --save core-js @babel/runtime
  • 引入rimraf,用于在发布前删除发布目录dist。运行npm install --save-dev rimraf安装依赖。
  • package.jsonscript节加入构建相关命令,然后run npm build就能成功打包了!

    {
      "name": "pixi-webpack-demo",
      "version": "1.0.0",
      "description": "make pixi.js game with webpack",
      "main": "src/js/main.js",
      "scripts": {
        "start": "webpack-dev-server --open 'google chrome' --config webpack.dev.js",
        "clean": "rimraf dist",
        "prebuild": "npm run clean",
        "build": "webpack --config webpack.prod.js"
      },
      "author": "yulijun",
      "keywords": ["pixi.js","webpack"],
      "license": "MIT",
      "devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/plugin-transform-runtime": "^7.8.3",
        "@babel/preset-env": "^7.8.4",
        "babel-loader": "^8.0.6",
        "rimraf": "^3.0.2",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3",
        "copy-webpack-plugin": "^5.1.1",
        "html-webpack-plugin": "^3.2.0",
        "imagemin-webpack-plugin": "^2.4.2",
        "webpack-merge": "^4.2.2"
      },
      "dependencies": {
        "@babel/runtime": "^7.8.4",
        "core-js": "^3.6.4",
        "pixi.js": "^5.2.1"
      }
    }
  • 恭喜你,至此开发和构建环境已经全部完成,可尝试在源码中添加一些es6+语法,然后运行npm run build构建项目,最终打包好的项目会在dist目录中,js已经被混淆并合并,无用的引用通过tree shake已经被去掉了,包尺寸优化到了最小,而且所有es6+的语法均转换为es5以适应更多的浏览器。所有的图片也都进行了压缩处理。

结尾

有什么不明白的或者不同的意见欢迎在评论区留言。
阅读 525更新于 2月24日

推荐阅读
pixijs游戏开发
用户专栏

专注于pixi.js技术进行web游戏开发。聚合优秀的pixi.js资源,让各个水平的pixier在这里都能有所收获。招...

30 人关注
12 篇文章
专栏主页
目录