How to define global variables in webpack?

I have a file that defines some global variables
let isClient = !!('undefined' !== typeof window && window.document)

if (isClient) {
 window.global = window
}

global.isClient = isClient
global.isServer = !isClient
global.isChrome = isClient && !!self.chrome && !!window.chrome.webstore;
global.isBlink = isClient && isChrome && !!window.CSS;
global.isFirefox = isClient && self.InstallTrigger;

global.DEBUG = true
Object.defineProperty(global, 'DEBUG', {
 writable: false,
 value: !!('undefined' !== typeof localStorage && +localStorage.getItem('debug'))
})

global.debug = console.log.bind(console)

global.announce = announce function(objects) {
 for (let name in objects) {
 Object.defineProperty(global, name, {
 writable: true,
 value: objects[name]
})
}
}

And configure webpack
const isProduction = 'prod' === process.env.MODE

const config = {
 entry: [
 __dirname + '/globals.js',
 __dirname + '/entry.jsx'
],
 watch: !isProduction,
 output: {
 path: __dirname + '/public',
 filename: 'gay.js',
 comments: false
},
 module: {
 loaders: [
 {test: /\.css$/, loaders: ['style']},
 {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
 {test: /\.less$/, loaders: ['less']},
{
 test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
 loader: "url-loader?limit=10000&minetype=application/font-woff"
},
{
 test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
 loader: "file-loader"
},
{
 test: /\.jsx$/,
 exclude: /(node_modules)/,
 loader: 'babel',
 query: {
 presets: ['es2015', 'react'],
 plugins: ['transform-class-properties']
}
}
]
},
 resolve: {
 modulesDirectories: [__dirname + '/node_modules']
},
 plugins: []
}

if (isProduction) {
config.plugins.push(
 new (require('webpack-uglify-js-plugin'))({
 cacheFolder: '/tmp',
 debug: false,
 minimize: false,
 sourceMap: false,
 compress: {
 warnings: true
}
})
)
}
else {
 config.devtool = 'source-map'
}

module.exports = config

If uglify is enabled, an error that isClient (and other global variables defined in globals.js) does not exist?
Is there a way to define global variables or you have to use require/import?
July 2nd 19 at 18:16
2 answers
July 2nd 19 at 18:18
just import globals.js in entry.the jsx ... and so do you globals.js in a separate bundle is placed, where nothing else
in General, there are a lot of different ways, for different occasions
entry.jsx is loaded last, so I globals.js made a separate entry - Helene_Schuster3 commented on July 2nd 19 at 18:21
July 2nd 19 at 18:20
An example from the documentation for Webpack:
new webpack.DefinePlugin({
 PRODUCTION: JSON.stringify(true)
 VERSION: JSON.stringify("5fa3b9")
 TWO: "1+1"
})


RTFM

Just say how it works. It works by replacing the keys and their string values. For example
if (TEST == true) {
}


the output after applying the plugin with { TEST: JSON.stringify(false) } will be
if (false == true) {
}


after applying to this code, UglifyJS, this branch will be entirely removed from the resulting code.
Why is JSON.stringify - DefinePlugin treats key values as strings that contain JavaScript. Therefore, the Boolean value is { TEST: "false" } and the string value
this { TEST: "\"false\"" }

Find more questions by tags MinifyWebpackReactJavaScript