本文介绍怎么使用webpack搭建pixi.js游戏的开发环境，怎么配置babel将ES6+代码最终转换为ES5，怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目。
前提
为了更容易理解，这里先贴出来项目最终的目录结构
. ├── dist │ ├── index.html │ ├── game.min.js │ └── assets │ └── bunny.png ├── src │ ├── index.html │ ├── assets │ │ └── bunny.png │ └── js │ ├── main.js │ └── scene.js ├── gulpfile.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 and gulp", "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></canvas> <!-- 注意这里的game.min.js文件，稍微在“引入webpack”步骤详细解释它--> <script type="text/javascript" src="https://www.jb51.net/game.min.js" charset="utf-8"></script> </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安装依赖。
创建webpack.common.js文件，这个是webpack公共配置。
const path = require('path') module.exports = { //游戏入口文件 entry: ['./src/js/main.js'], output: { //js文件最终发布到哪个路径 path: path.resolve(__dirname, 'dist'), //注意这个名字和刚才html里面的名字必须一致。 //开发阶段webpack会自动处理这个文件让html引用到，虽然磁盘上不会有这个文件。 //但是最终发布项目的时候会生成这个文件。 filename: 'https://www.jb51.net/game.min.js', }, target: 'web' }
创建webpack.dev.js文件，这个配置文件用于开发调试阶段。
const path = require('path') const merge = require('webpack-merge') const common = require('./webpack.common.js') module.exports = merge(common, { devtool: 'inline-source-map', mode: 'none', devServer: { //调试时候源代码的位置 contentBase: path.join(__dirname, 'src'), port: 8080, host: '0.0.0.0', 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 and gulp", "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", "webpack-merge": "^4.2.2" }, "dependencies": { "pixi.js": "^5.2.1" } }