title: How does webpack handle multiple files importing the same module React
body: <p>I have a React app which has many components importing the same modules. Does webpack import each module once for each file requesting it, resulting in duplicate code(in this case each import twice for just the two components)? I'm considering re-writing the components so that child components do not need to require the React modules, but maybe I'm solving a problem that doesn't exist. I'd like to avoid many imports of the same react module if it results in duplicate code.</p>
  
  <p>Component 1</p>
  
  <pre><code>import React from "react";
  import { Link } from "react-router";
  import ReactLogo from "elements/ReactLogo";
  
  export default class MainMenu extends React.Component {
      render() {
          return &lt;div&gt;
              &lt;ReactLogo type="svg" /&gt; &lt;ReactLogo type="png" /&gt; &lt;ReactLogo type="jpg" /&gt;
              &lt;h2&gt;MainMenu:&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li&gt;The &lt;Link to="home"&gt;home&lt;/Link&gt; page.&lt;/li&gt;
                  &lt;li&gt;Do something on the &lt;Link to="todo"&gt;todo page&lt;/Link&gt;.&lt;/li&gt;
                  &lt;li&gt;Switch to &lt;Link to="some-page"&gt;some page&lt;/Link&gt;.&lt;/li&gt;
                  &lt;li&gt;Open the chat demo: &lt;Link to="chat" params={{room: "home"}}&gt;Chat&lt;/Link&gt;.&lt;/li&gt;
                  &lt;li&gt;Open the page that shows &lt;Link to="readme"&gt;README.md&lt;/Link&gt;.&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>Component 2 importing the same 3 modules.</p>
  
  <pre><code>import React from "react";
  import { Link } from "react-router";
  import ReactLogo from "elements/ReactLogo";
  
  export default class MainMenu extends React.Component {
      render() {
          return &lt;div&gt;
              &lt;ReactLogo type="svg" /&gt; &lt;ReactLogo type="png" /&gt; &lt;ReactLogo type="jpg" /&gt;
              &lt;h2&gt;MainMenu:&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li&gt;The &lt;Link to="home"&gt;home&lt;/Link&gt; page.&lt;/li&gt;
                  &lt;li&gt;Do something on the &lt;Link to="todo"&gt;todo page&lt;/Link&gt;.&lt;/li&gt;
                  &lt;li&gt;Switch to &lt;Link to="some-page"&gt;some page&lt;/Link&gt;.&lt;/li&gt;
                  &lt;li&gt;Open the chat demo: &lt;Link to="chat" params={{room: "home"}}&gt;Chat&lt;/Link&gt;.&lt;/li&gt;
                  &lt;li&gt;Open the page that shows &lt;Link to="readme"&gt;README.md&lt;/Link&gt;.&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;;
      }
  }
  </code></pre>