title: Dynamically imported modules without relative paths
body: <p>I have a Symfony application that uses React to build the front-end. As of our last release the build size of the react app has become too large and actually runs out of memory on the server trying to compile. I have been attempting to implement code splitting and have the initial page load to be much more efficient. I am running into a problem with the routes.</p>
  
  <p>My router is defined similar to this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import Loadable from 'react-loadable';
  import DelayedLoading from 'components/DelayedLoading';
  export default [
    component: Loadable({loader: () =&gt; import('containers/Page'), loading: DelayedLoading}),
    routes: [
      {
        path: '/',
        component: Loadable({loader: () =&gt; import('containers/MainPage'), loading: DelayedLoading}),
      },
      {
        path: '/foo/bar',
        component: Loadable({loader: () =&gt; import('containers/FooBarPage'), loading: DelayedLoading}),
      },
    ]
  ];</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my webpack config I have defined</p>
  
  <pre><code>module.exports = {
    output: {
      path: path.resolve(__dirname, 'web'),
      filename: 'react/js/[name].js',
    },
  }
  </code></pre>
  
  <p>Any time a path is two or more deep then the chunks try to load from the wrong directory. For example, the <code>foo/bar</code> route above will try to load chunks at <code>foo/react/js/___.js</code>, but chunks loaded from the <code>/</code> route, or any route that is just one deep will correctly load from <code>react/js/___.js</code>.</p>
  
  <p>How can I get all of the chunks to load from <code>react/js</code>?</p>