Webpack Define plugin replacement is evaluated but not injected

user_8744740 0
Viewed 107

I have JS library foo which is being built with webpack which includes and builds the source code of the Phaser 3 library. Phaser 3 uses the define plugin to exclude parts of itself, for example replacing "typeof CANVAS_RENDERER" with false.

The issue I'm running into is this. when i include this block in my webpack config

    new webpack.DefinePlugin({
        "typeof CANVAS_RENDERER": JSON.stringify(false),
    }),

the kind of output i get is this

if (typeof WEBGL_RENDERER && typeof CANVAS_RENDERER)
{}

if (typeof WEBGL_RENDERER && !typeof CANVAS_RENDERER)
{
    WebGLRenderer = __webpack_require__(/*! ../renderer/webgl/WebGLRenderer */ "../node_modules/phaser/src/renderer/webgl/WebGLRenderer.js");

    //  Force the type to WebGL, regardless what was requested
    config.renderType = CONST.WEBGL;

    game.renderer = new WebGLRenderer(game);
}

Where typeof CANVAS_RENDERER has obviously been evalutated to false and as a result the function body has been optmised out but it didnt replace the original statement causing the code to go down the empty path when its run.

phaser-framework webpack javascript
1 Answers

It seems that, if the plugin can't resolve each part of the if clause, in your case typeof WEBGL_RENDERER(since this is not defined in the new webpack.DefinePlugin), it doesn't resolve the rest.

With other words, if you define both in the plugin it should work:

new webpack.DefinePlugin({
    "typeof CANVAS_RENDERER": JSON.stringify(false),
    "typeof WEBGL_RENDERER": JSON.stringify(true),
}),

Atleast that solved the described problem, in my test setup.

user_16792860
Related