this tutorial shows you how to make
pixi.jsgame withwebpackandes6+, how to optimizeimageassets and how to configbabelto optimizejsand convertES6+toES5.
required
-
you should have
nodejsinstalled and have some basic knowledge ofpackage.jsonfile,npm init/install/runcommand. -
you should have
google chromeinstalled for running the project. -
basic knowledge of
webpackandbabel. -
it's better for you to have basic knowledge of
git, the project pixi-webpack-demo is hosted on github, you can learn step by step bygit checkoutdifferent branch, nowgit clonethe project。 -
for easy understanding, paste out the project directory here at the very first.
. ├── 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
[step1] initialize the project
run command
git checkout initto checkoutinitbranch to learn this step.
-
make directory
pixi-webpack-demo, runnpm initcommand underpixi-webpack-demodirectory to initialize the project, fill the information, it will create apackage.jsonfile finally. -
run
npm install --save pixi.jscommand to installpixi.js. -
after finish the two step before the
package.jsonfile should like this:{ "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": "proudcat", "license": "MIT", "dependencies": { "pixi.js": "^5.2.1" } } -
create
src/index.html。<html> <head> <title>pixi-webpack-demo</title> </head> <body> <canvas id="scene"></canvas> <!-- we dont need import the entry js file here, webpack will help us to import the file automatically --> <!-- we will explain more at "[step2] import webpack" --> </body> </html>
-
create entry js file
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; });
[step2] import webpack
run
git checkout webpackcommand to checkoutwebpackbranch to learn this step。
-
run
npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge copy-webpack-plugin imagemin-webpack-plugin html-webpack-plugincommand to install the dependencies of webpack. -
create
webpack.common.jsfile, this file is webpack common configuration.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 directory is src context: path.join(__dirname, 'src'), //entry file of the project,(relative to context) entry: ['./js/main.js'], output: { //distribution directory path: path.resolve(__dirname, 'dist'), /** * webpack will import the file for the index.html automatically,though the js file does not exist on disk. * the js file will generated after webpack build the project, and the js will inserted at index.html automatically. * [hash:8] means unique 8 digit hash generated everytime. **/ filename: 'game.min.[hash:8].js', }, target: 'web', plugins: [ //copy all src/assets to dist/assets new CopyWebpackPlugin([ { from: 'assets/',to:'assets/'} ], { ignore: [], debug:'debug', copyUnmodified: true }), //opimize all image file new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i , // optipng: { // optimizationLevel: 4 // }, //this way seems better on mac. pngquant: { verbose:true, quality: '80-90', } }) //copy html to dist and insert the js reference. ,new HtmlPlugin({ file:path.join(__dirname,'dist','index.html'), template:'./index.html' }) ] }
-
create
webpack.dev.jsfile, the file used for debug phase.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: { //source code directory. contentBase: path.join(__dirname, 'src'), port: 8080, //if host set to 127.0.0.1, you cannot access the server on local network. host: '0.0.0.0', hot: true } })
-
create
webpack.prod.jsfile, the file is used for publishing the project(we will explain more detail at[step3] import babel).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'] } } }] } })
-
create start command at
scriptsection inpackage.jsonfile.{ "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": "proudcat", "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" } } -
now we have import the
webpacksuccessfully, runnpm startto start the project, it will open google chrome browser automatically,the game is running！try to modify thesrc/js/main.jsfile and save,the page will refresh automatically and we can see the modification has taken effect！
[step3] import babel and publish the project
run
git checkout masterto checkoutmasterbranch to learn this final step.
-
with
babel, you can writeES6+code（these lib is used fo converting ES6+ to ES5, and some pollyfill etc. lookbabeldocument for more details）。npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loadernpm install --save core-js @babel/runtime
-
install
rimrafto clean the publish directorydist. runnpm install --save-dev rimrafcommand to install it. -
create build command at
scriptsection inpackage.jsonfile.{ "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": "proudcat", "keywords": ["pixi.js","webpack","pixijs","web","game"], "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", "webpack-merge": "^4.2.2" }, "dependencies": { "@babel/runtime": "^7.8.4", "core-js": "^3.6.4", "pixi.js": "^5.2.1" } } -
congratulations! run
npm run buildcommand, you can build the project now! you will find out the project will be published indistdirectory,jshas combined and optimized,es6+has converted toes5. all image file has been optimized.