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 release builds. If you perform logging in your development build but not in the release 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 release 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');
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) });
When defining values forprocess
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.
Use a different service URL in production/development builds:
new webpack.DefinePlugin({ 'SERVICE_URL': JSON.stringify('http://dev.example.com') });
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/plugins/define-plugin