Feature flagging in webpack

· 165 words · 1 minute read

Agile methodologies allows for smaller release to production fairly quickly. This could result in more feature branches/pull requests being created to enable/disable some feature specially when something needs to be tested on production. Other main advantage to use feature flag is that we don’t need to wait for a feature to be completed before it could be deployed to production. The feature flag for that particular feature could be switched off and once the whole feature is completed, tested and deployed to production, the feature flag can again be turned on.

Webpack allows feature flags which can be used to switch on/off a feature on demand using the DefinePlugin.

As per webpack “The DefinePlugin allows you to create global constants which can be configured at compile time.”

For example, we can create a global constant FEATURE_IN_PROGRESS like below.

new webpack.DefinePlugin({
  FEATURE_IN_PROGRESS: JSON.stringify(true),
});

and can be used directly in the code.

if (FEATURE_IN_PROGRESS) {
  console.log("This feature is still in progress and not production ready");
}