Webpack Define plugin replacement is evaluated but not injected-CodePudding

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.

CodePudding user response：

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 problem in my test setup.