# Using Phaser 3 ES6 Webpack boilerplate to import plugins

**URL:** <https://phaser.discourse.group/t/using-phaser-3-es6-webpack-boilerplate-to-import-plugins/9954>\
**Category:** Phaser 3\
**Created:** [July 14, 2021, 6:17pm UTC](https://phaser.discourse.group/t/using-phaser-3-es6-webpack-boilerplate-to-import-plugins/9954 "2021-07-14T18:17:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![somerandomdude](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/somerandomdude/32/3546_2.png) [@somerandomdude](https://phaser.discourse.group/u/somerandomdude)\
**Post date:** [July 14, 2021, 6:17pm UTC](https://phaser.discourse.group/t/using-phaser-3-es6-webpack-boilerplate-to-import-plugins/9954/1 "2021-07-14T18:17:06Z")

</div>

Hello!

I’ve been trying to follow the README to figure out how to install through npm the PhaserMatterCollisionPlugin. I know I have to do something with webpack/base.js:

```javascript
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { PhaserMatterCollisionPlugin } = require("phaser-matter-collision-plugin")

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: [/\.vert$/, /\.frag$/],
        use: "raw-loader"
      },
      {
        test: /\.(gif|png|jpe?g|svg|xml)$/i,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      root: path.resolve(__dirname, "../")
    }),
    new webpack.DefinePlugin({
      CANVAS_RENDERER: JSON.stringify(true),
      WEBGL_RENDERER: JSON.stringify(true)
    }),
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

```

but the format of the file is pretty confusing.

I first need to install the collision plugin through npm, but it seems that doing so results in a window not defined error.

i.e. npm install --save phaser-matter-collision-plugin

I would have then somehow added some stuff to base.js, but I’m doing something wrong.

Full repo and code can be viewed here (in v0.2 folder): [cs325-game-prototypes/Assignments/v0.2 at master · zainulabideenfazal/cs325-game-prototypes · GitHub](https://github.com/zainulabideenfazal/cs325-game-prototypes/tree/master/Assignments/v0.2)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 15, 2021, 2:31am UTC](https://phaser.discourse.group/t/using-phaser-3-es6-webpack-boilerplate-to-import-plugins/9954/2 "2021-07-15T02:31:05Z")

</div>

Don’t change `base.js` at all.

[Import the module](https://www.npmjs.com/package/phaser-matter-collision-plugin#as-a-module) and then [add it to the game config](https://www.npmjs.com/package/phaser-matter-collision-plugin#usage).

---

<div class="post-metadata">

**Author:** ![somerandomdude](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/somerandomdude/32/3546_2.png) [@somerandomdude](https://phaser.discourse.group/u/somerandomdude)\
**Post date:** [July 15, 2021, 1:53pm UTC](https://phaser.discourse.group/t/using-phaser-3-es6-webpack-boilerplate-to-import-plugins/9954/3 "2021-07-15T13:53:57Z")

</div>

Strange, I did that before, but for some reason you added the magic touch and now it works.

Here’s what I did, in case anyone else stumbles on here:

First do npm install --save phaser-matter-collision-plugin

Then in index.js, do `import PhaserMatterCollisionPlugin from "phaser-matter-collision-plugin";`

In index.js also add this to config:

```javascript
plugins: {
        scene: [
            {
                plugin: PhaserMatterCollisionPlugin, //The plugin class
                key: "matterCollision", //Where to store in Scene.systems, such as scene.sys.matterCollision
                mapping: "matterCollision" // Where to store in the Scene, e.g. scene.matterCollision
            }
        ]
    }

```

I did also update phaser from 3.50 to 3.55, so that may have helped.