title: Difference between System.import() and import()?
body: <p>In <a href="http://webpack.github.io/docs/code-splitting.html#es6-modules" rel="noreferrer">webpack 1 docs is statement</a> that in webpack 2 will use <code>System.import()</code> for dynamic require:</p>
  
  <blockquote>
    <p>Luckily, there is a JavaScript API “loader” specification being
    written to handle the dynamic use case: <code>System.load</code> (or
    <strong><code>System.import</code></strong>). This API will be the native equivalent to the above
    <code>require</code> variations.</p>
  </blockquote>
  
  <p>And during that time all around the web was <a href="http://www.2ality.com/2014/09/es6-modules-final.html#importing-modules-and-loading-scripts" rel="noreferrer">examples</a> of using this <code>System.import()</code>.</p>
  
  <hr>
  
  <p><a href="https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.28" rel="noreferrer">Before releasing webpack 2</a>, authors decide to change <code>System.import()</code> to <code>import()</code>:</p>
  
  <blockquote>
    <p>add <code>import()</code> as Code Splitting construct. It should be used instead of
    <code>System.import</code> when possible. <code>System.import</code> will be deprecated in
    webpack 2 release (removed in webpack 3) <strong>as it's behavior is incorrect
    according to the spec</strong>.</p>
  </blockquote>
  
  <p>This <code>import()</code> is based on <a href="https://github.com/tc39/proposal-dynamic-import" rel="noreferrer">tc39/proposal-dynamic-import</a> specification, and you can read more why they made this change <a href="https://github.com/webpack/webpack/issues/2163" rel="noreferrer">here</a>.</p>
  
  <hr>
  
  <p><strong>Can someone explain difference between <code>System.import()</code> and <code>import()</code>?</strong></p>
  
  <p>Despite different name, usage looks the same:</p>
  
  <pre class="lang-js prettyprint-override"><code>import(modulePath)
    .then(module =&gt; module.default())
    .catch(/* ... */);
  
  System.import(modulePath)
    .then(module =&gt; module.default())
    .catch(/* ... */);
  </code></pre>
  
  <p>But in weback 2 doc is: "<code>System.import()</code> behavior is incorrect according to the spec" - so it suggest that there is difference between <code>System.import()</code> and <code>import()</code>.</p>