title: Typescript conditional import
body: <p>I have an API with the following interface (just for the sake of example)</p>
  
  <pre><code>export type FrogAPI = {
    getFrogs(): Promise&lt;Frog[]&gt;
    putFrogs(frogs: Frog[]): Promise&lt;void&gt;
  }
  </code></pre>
  
  <p>I have 2 versions of this, 1 mock version which reads and writes from localStorage:</p>
  
  <pre><code>export class LocalStorageFrogAPI implements FrogAPI {
    getFrogs(): Promise&lt;Frog[]&gt; {
      return Promise.resolve(JSON.parse(localStorage.getItem('@frogApi/frogs')))
    }
    // ...
  }
  </code></pre>
  
  <p>And a real version which works with remote apis:</p>
  
  <pre><code>export class HttpFrogAPI implements FrogAPI {
    getFrogs(): Promise&lt;Frog[]&gt; {
      return fetch('/frogs').then((res) =&gt; res.json())
    }
    // ...
  }
  </code></pre>
  
  <p>For development I'm using the localStorage one, for production the http one.</p>
  
  <p><strong>Question</strong>: How do I conditional import the right one, so at <strong>build</strong> time only the right sources are included in the output js? This is important because both files became quite bulky. I also don't want to expose the localStorage version at all in production for security reasons.</p>
  
  <p>If I do this:</p>
  
  <pre><code>const ApiConstructor = process.env.ENV === 'development' 
      ? require('./LocalStorageFrogAPI')
      : require('./HttpFrogAPI')
  
  export const API = new ApiConstructor() as FrogAPI
  </code></pre>
  
  <p>Both sources will still be included in the generated output. What's the right way of only having the right one in the output js? Is possible with some webpack config?</p>