webpack搭建pixi.js开发环境

最新推荐文章于 2023-06-17 17:29:10 发布

曾曾曾同学

最新推荐文章于 2023-06-17 17:29:10 发布

阅读量744

点赞数

分类专栏： pixi.js

原文链接：https://segmentfault.com/a/1190000021724296

版权

pixi.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍怎么使用 webpack4搭建 pixi.js游戏的开发环境，怎么配置 babel优化代码(tree shake)、混淆代码、合并代码、并最终将 ES6+转换为 ES5，怎么优化 图片资源并最终发布项目。

前提

需要会简单使用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以适应更多的浏览器。所有的图片也都进行了压缩处理。

遇到的问题：
解决：npm install gifsicle@4.0.1 --ignore-scripts

曾曾曾同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack搭建pixi.js开发环境

本文介绍怎么使用webpack4搭建pixi.js游戏的开发环境，怎么配置babel优化代码(tree shake)、混淆代码、合并代码、并最终将ES6+转换为ES5，怎么优化图片资源并最终发布项目。前提需要会简单使用nodejs，了解package.json，会简单使用npm init，npm install，npm run命令。需要稍微了解webpack。需要有goo...
复制链接

扫一扫