使用webpack搭建pixi.js开发环境

本文介绍怎么使用 webpack搭建 pixi.js游戏的开发环境，怎么配置 babel将 ES6+代码最终转换为 ES5，怎么利用 gulp将 webpack和其他脚本粘合一起优化项目并最终发布项目。

前提

• 需要会简单使用nodejs，了解package.json，会简单使用npm init，npm install，npm run命令。
• 需要稍微了解webpack和gulp。
• 需要有google chrome浏览器。
• 最好会一点git，demo项目pixi-webpack-demo托管在github上，通过切换不同分支演示一步一步项目的构建过程，现在把项目clone下来吧。

• 为了更容易理解，这里先贴出来项目最终的目录结构

  .
  ├── 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。

• 创建文件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: '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"
    }
  }

• 现已成功引入了webpack，运行npm start启动项目，会自动打开chrome浏览器，我们看到游戏已经跑起来了！尝试修改src/js/main.js文件，保存下，页面会自动刷新，我们的修改也已经能反映到页面上了！

构建项目

运行 git checkout master切换到 master分支即可看到这最终一步的示例。

• 引入babel让你能使用最新的ES特性（这些库主要是为了ES6+转ES5，还有些pollyfill等等，这里不做过多的解释，具体可参考babel官方文档）。

  • npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
  • npm install --save core-js @babel/runtime
• 引入gulp，运行npm install --save-dev gulp gulp-if gulp-imagemin rimraf安装依赖。

• 创建gulpfile.js

  const {
    src,
    dest,
    parallel
  } = require('gulp')
  const path = require('path')
  const gulpif = require('gulp-if')
  const imagemin = require('gulp-imagemin')
  const webpack = require('webpack')
  const webpack_config = require('./webpack.prod')
  
  function copyAssets() {
    return src(['src/**/*', '!src/js/**'])
      .pipe(gulpif(
        file => path.extname(file.relative) === '.png',
        imagemin([imagemin.optipng({
          optimizationLevel: 3
        })], {
          verbose: true
        })))
      .pipe(dest('dist'))
  }
  
  function jsBundle(next) {
    const compiler = webpack(webpack_config)
    compiler.run((err, stats) => {
      if (err || stats.hasErrors()) {
        console.error(stats.toJson().errors)
      }
      next()
    })
  }
  
  exports.dist = parallel(copyAssets, jsBundle)

• 在package.json中script节加入构建相关命令，然后run npm build就能成功打包了！

  {
    "name": "pixi-webpack-demo",
    "version": "1.0.0",
    "description": "make pixi.js game with webpack and gulp",
    "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": "gulp dist"
    },
    "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",
      "gulp": "^4.0.0",
      "gulp-if": "^2.0.2",
      "gulp-imagemin": "^4.1.0",
      "webpack": "^4.41.5",
      "webpack-cli": "^3.3.10",
      "webpack-dev-server": "^3.10.3",
      "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已经被混淆并合并为game.min.js，无用的引用通过tree shake已经被去掉了，包尺寸优化到了最小，而且所有es6+的语法均转换为es5以适应更多的浏览器。所有的图片也都进行了压缩处理。

结尾

有什么不明白的或者不同的意见欢迎在评论区留言。

项目里之所以引用到gulp是因为没有找到webpack优化图片的插件，如果有小伙伴知道好用的插件，请务必不要吝啬，留言给我。