Does webpack remove this type of code automatically?

Question

This is a good helper for development mode, but does this code get removed from bundles or is a particular plugin needed to remove it? Seems like it would have to be removed since process is not available in the browser. What setting causes this to happen?

The webpack docs aren't really all that clear about what these options do, just giving vague references: https://webpack.js.org/concepts/targets/ and https://webpack.js.org/concepts/output/

 if (process.env.NODE_ENV !== 'production') { if (typeof nextValue === 'undefined') { console.info(next); throw new Error('React Table: A reducer hook ☝️ just returned undefined! This is not allowed.'); } }

peteb · Accepted Answer · 2020-02-06 17:37:46Z

process.env.NODE_ENV is actually available in the browser because Webpack creates the process variable as a global in code that is output. It is controlled via the Webpack configuration mode.

You can set the mode in your config or the command line. If you use enivornment based Webpack configs (ie. webpack.dev.js, webpack.prod.js) they will automatically set the mode.

webpack --mode=production

So the code continues to exist after babel/webpack gets thru with it. Meaning that it is evaluated at runtime in my production code?
Yes, that is correct. Webpack is adding process.env.NODE_ENV to your bundle. You can then use this to intiialize feature flags and other environment specific controls at runtime.

Collectives™ on Stack Overflow

Does webpack remove this type of code automatically?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related