The DefinePlugin
allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and production builds. If you perform logging in your development build but not in the production build you might use a global constant to determine whether logging takes place. That's where DefinePlugin
shines, set it and forget it rules for development and production builds.
new webpack.DefinePlugin({
// Definitions...
});
Each key passed into DefinePlugin
is an identifier or multiple identifiers joined with .
.
typeof
to the key, it's only defined for typeof calls.The values will be inlined into the code allowing a minification pass to remove the redundant conditional.
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});
console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');
When defining values for
process
prefer'process.env.NODE_ENV': JSON.stringify('production')
overprocess: { env: { NODE_ENV: JSON.stringify('production') } }
. Using the latter will overwrite theprocess
object which can break compatibility with some modules that expect other values on the process object to be defined.
Note that because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with alternate quotes, such as
'"production"'
, or by usingJSON.stringify('production')
.
index.js
if (!PRODUCTION) {
console.log('Debug info');
}
if (PRODUCTION) {
console.log('Production log');
}
After passing through webpack with no minification results in:
if (!true) {
console.log('Debug info');
}
if (true) {
console.log('Production log');
}
and then after a minification pass results in:
console.log('Production log');
Enable/disable features in production/development build using feature flags.
new webpack.DefinePlugin({
'NICE_FEATURE': JSON.stringify(true),
'EXPERIMENTAL_FEATURE': JSON.stringify(false)
});
Use a different service URL in production/development builds:
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify('https://dev.example.com')
});