title: Can I mark code blocks as production or development only with webpack?
body: <p>I'm building React components and in order to make my code more developer friendly, I'm including things like:</p>
  
  <pre><code>componentDidMount() {
    setTimeout(() =&gt; {
      if (!this.props.setupComplete) 
        console.warn("ComponentX might be stuck. This may mean you forget such and such.");
    }, setupCheckDelay);
  }
  </code></pre>
  
  <p>The idea is to help developers pinpoint common mistakes more quickly. Is there a way to mark this code to tell webpack to simply leave it out of a production build? Or only include it in a development build? E.g., I want something like:</p>
  
  <pre><code>// build-hint-development-only
  ... my checking code
  // end-build-hint
  </code></pre>
  
  <p>such that in a production build,  to the code is left out entirely. My goal is to reduce final code size (and not simply avoid execution).</p>
  
  <p>I've googled around a bit but haven't found anything. I gather I could use dynamic imports + environment variables, and then re-arrange the code such that the development checks are done and a wrapper HOC or something that just never gets included in the development build, but that seems fragile and complex for something pretty simple. The other option would be to put a pre-processor in front of the webpack build that would make a copy of the code without the marked 'dev only' sections, but would add a whole other layer to the process.</p>