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.
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.