Detecting Webpack mode in JavaScript files

Question

I am building a bundle of ReactJS files with Webpack.

Is it possible to detect inside of JSX files which Webpack mode is being used: "none" , "development" , or "production" ?

For example, I would like some console.log() statements and global variables in development mode but not production.

Answer 1

One can build the Webpack bundle for development with:

$ npx webpack --config webpack.config.js --mode=development

and for production with:

$ npx webpack --config webpack.config.js --mode=production

To know whether the current build is in development mode or production mode, webpack.DefinePlugin() should be used in webpack.config.js :

const webpack = require('webpack');

module.exports = (env, argv) => {
    return {
        // other directives...
        plugins: [
            new webpack.DefinePlugin({
                PRODUCTION: JSON.stringify(argv.mode === 'production'),
            }),
        ],
    }
};

Then in the bundled JavaScript files one can have this checking:

if (PRODUCTION) {
    console.log("This is a production build.");
} else {
    console.log("This is a development build.");
}

Note that PRODUCTION here will work not as a global variable, but as a template variable resolved to true or false .