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

头像
于小懒
    阅读 6 分钟
    15
    本文介绍怎么使用webpack4搭建pixi.js游戏的开发环境，怎么配置babel优化代码(tree shake)、混淆代码、合并代码、并最终将ES6+转换为ES5，怎么优化图片资源并最终发布项目。
    这篇文章也被pixi.js官方收录为教程 Webpack tutorial with pixi

    欢迎关注专栏 pixijs游戏开发

    前提

    • 需要会简单使用nodejs，了解package.json，会简单使用npm init，npm install，npm 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.json中script节加入构建相关命令，然后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以适应更多的浏览器。所有的图片也都进行了压缩处理。

    结尾

    有什么不明白的或者不同的意见欢迎在评论区留言。
    pixi.jswebpacknode.jsgameweb
    于小懒
    191 声望381 粉丝

    长的是深夜，短的是人生。在你成长的这些年里，真正放不下的只有筷子。

    下一篇 »
    【教程】pixi.js拼图游戏教程

    引用和评论

    被 2 篇内容引用
    推荐阅读
    头像
    【PIXI架构】0 - 目录

    于小懒赞 4阅读 4.8k评论 3

    头像
    一个简易的DIY场景H5框架

    Undefined_0赞 5阅读 5k

    头像
    浏览器性能优化

    寒青赞 9阅读 3.7k

    头像
    webpack的入门教程

    小蚊酱赞 2阅读 2.1k

    头像
    前端微服务跨域配置解决办法，devServer为例

    smallStone赞 7阅读 6.5k评论 29

    头像
    解决lodash由于依赖错误导致无法启动的问题

    LYX6666赞 3阅读 1k

    头像
    阿里云ECS服务器部署Node.js项目全过程详解

    kovli赞 1阅读 6k

    0 条评论
    得票最新