How To Set Up PixiJS v5 Project With NPM and Webpack

As we all know the new PixiJS v5 is already here and I decided to share with you my setup using NPM, Webpack and consumable PixiJS components. It’s not for very beginners and I’m not going to explain every little detail but just an idea of a very lightweight configuration.

I hope somebody will save some time with this article and will learn something new!

What is the best part of it?

Usually even if my projects are large then anyway they are quite simple and I don’t even use a lot of features from the PixiJS bundle. It means that plenty of redundant code are stored in the final JS file and make players wait longer while a game is being loaded.

PixiJS v5 has taken a big step forward in optimizing our bundles and now we can use only those parts of PixiJS that we actually need. It’s better if I just show you!

NPM

I’m not going to write too much about usual things like Babel, you probably already know all this information or you can easily learn it from literally everywhere on the internet.

Let’s imagine that we start from an empty folder. We’ve already issued npm init -y and now we install following tools as dev dependencies:

@babel/core
@babel/preset-env
babel-loader
webpack
webpack-cli
webpack-dev-server
copy-webpack-plugin (this one is for copying files from build/assets to dist/assets folder)
html-webpack-plugin
uglifyjs-webpack-plugin

Also I usually add these scripts to package.json:

production - to make an uglified build
build - to make a usual build
start - to run the project in a browser with hot reloading

Webpack

Here everything is super simple. Config for running the project locally:

Config for building the final distribution:

babel-loader translates our JS files following babel configuration (see below).

copy-webpack-plugin copies all files from build folder to dist in order to keep dist removable (UPD: new versions of copy-webpack-plugin use new configs, so make sure that you install v5.0.3 or better install the last version having read how to set up it correctly).

uglifyjs-webpack-plugin reduces the final JS bundle by 6 KB more in the current case removing all comments.

html-webpack-plugin puts <script> tag into the html file with hash of the bundle. Thus it saves us from constant clearing cache in the browser or putting unique values at the end of “src” parameter on our own.

Babel

I store .babelrc configuration in the root of a project.

That’s all about configuration, now let’s get down to PixiJS

PixiJS v5

First of all let’s look at the usual way of importing PixiJS. After

npm i pixi.js

I got following in the package.json:

"dependencies": {
  "pixi.js": "^5.0.4"
}

Let’s import it in the main index.js file

import { Application } from 'pixi.js'

and as long as it still imports whole PixiJS, after

npm run production

we get 316 KB for main.js file. To be fair we need to notice that it’s still nice because PixiJS v4 was much larger, but let’s go on and make it even less!

npm uni pixi.js
npm i @pixi/app

It’s quite obvious that the last line is the key moment here because we install only “app” module without redundant features. Let’s now import and use something from it:

npm run production

The final JS bundle now is just 150 KB. You will say that it’s still too much for just App module and you’re going to be right, because in those 150 KB we also have:

@pixi/constants
@pixi/core
@pixi/display
@pixi/math
@pixi/runner
@pixi/settings
@pixi/ticker
@pixi/utils

It means that all modules that you’re definitely going to use (like core, display, ticker etc.) already imported but, as I think, it’s better to explicitly install needed ones in order to have them in the package.json file. It means that if you want to use Container from Display module, then since it was installed with App of course you can import it without installing through NPM

import { Container } from '@pixi/display'

but better to install it explicitly:

npm i @pixi/display

In order to make some little demo and repo let’s create a spinning sprite. For this whole thing we need following packages (as I said before we install everything explicitly):

npm i @pixi/app
npm i @pixi/core
npm i @pixi/loaders
npm i @pixi/sprite
npm i @pixi/ticker

This is what we have in our index.js:

And the final JS bundle is just 197 KB!

I hope you took something useful from the article and thanks for reading! :)

Demo: https://anvoevodin.name/demos/pixijs_v5_setup

Git repo: https://github.com/ANVoevodin/pixijs_v5_setup

Find out which classes in which packages are located: https://github.com/pixijs/pixi.js/tree/master/packages

There will be more articles on the subject soon, so don’t miss them and subscribe here, on LinkedIn and Twitter!

UPD: One more extremely useful tool was shared by Matt Karl in responses: https://pixijs.io/customize/. There you can select all packages that you want to use and get the complete code not only for bundlers, but also directly for browsers as script tags! It guarantees that all connections between classes and plugins will be correct!