1

If I have an if statement like this:

if(__DEV__) {
  // do stuff
}

Is there a way using webpack to strip these if statement blocks out?

In no uncertain terms or do I state anywhere in this question that I want to reference environment variables.

Could the pedant who marked this as a duplicate RTFQ?

dagda1
  • 26,856
  • 59
  • 237
  • 450
  • See https://github.com/petehunt/webpack-howto#6-feature-flags – Felix Kling Dec 27 '17 at 14:17
  • @Louis this is completely different. Where am I asking how to reference environment variables? I am asking how to strip out __DEV___. – dagda1 Dec 27 '17 at 14:28
  • @dagda1 The one answer you got is a rehashing of the answers on the other question. Felix Kling's link points to a page that could be an answer to the other question. So yeah, the evidence points to your question being a duplicate. Maybe you are reading too much into the word "environment" in the other question's title. It means your "build environment", generally. Often people use `process.env` (the process environment variables), but that's not *required*. Sometimes you want `__DEV__` there, sometimes you want it to be eliminated. Your build *environment* determines that. – Louis Dec 27 '17 at 14:41
  • @dagda1 `DefinePlugin` can be used to change *any variable*. Where the variable comes from is entirely irrelevant. You could change internal variables of a third party library if you wanted to. – Louis Dec 27 '17 at 14:45
  • Webpack will never strip those code blocks. You could use the `DefinePlugin` to "hardcode" `__DEV__` to a constant (like `true` or `false`), so the code would end up looking like `if (false) { /* ... */ }` which means whatever is inside the braces is dead code. Webpack wont eliminate these because most likely you want to see the code being generated when developing. UglifyJS, on the other hand, will eliminate dead code during minification, but this process is intended only for production builds (like when running `webpack -p` or something, depending on the version of Webpack you are using). – Armando Pérez Marqués Dec 27 '17 at 17:41

1 Answers1

1

You can define a plugin in your webpack configuration. In your configuration, you'll want to add a plugin like this:

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
    })
  ]
}

By doing this, you'll replace all references to __DEV__ with the value of the BUILD_DEV env var.

Since you'll likely already have NODE_ENV set when building with webpack, you can take advantage of that. Here's another way using NODE_ENV:

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production'
    })
  ]
}

As @Felix Kling mentioned in a comment, you can also use this technique to define multiple feature flags as seen here: https://github.com/petehunt/webpack-howto#6-feature-flags

If you make a build where NODE_ENV=production, you'll have dead code. I believe this dead code is removed when you run your minification tool. See here: https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems-fb8512c86edf

Derek Hopper
  • 2,110
  • 12
  • 19