title: Unable to use webpack dynamic import because of static publicPath
body: <p>I love the ability to dynamically import a chunk using the <code>import</code> command in webpack 3. Unfortunately it seems as if it can only be used if the resources are in a rather static directory configuration on the server.</p>
  
  <p>In my environment the html pages generated dynamically in the backend (let's say <code>http:/localhost/app</code>). All other resources (js, css, images, etc.) are in a different directory (let's say <code>http:/localhost/res</code>) but additionally <code>res</code> is not static but can rather change dynamically in the backend.</p>
  
  <p>As long as I do not use any dynamic imports everything works as expected but when trying to dynamically load any chunks this fails because webpack by default expects the chunks to be in <code>http:/localhost/app</code> and I cannot use <code>publicPath</code> because the url where the resources are is dynamic.</p>
  
  <p>Is there any way to (runtime) configure webpack into loading the resources relative to the path where the current resource is located.
  If for example the chunk <code>page1.js</code> located in <code>http:/localhost/resA</code> dynamically loads the chunk <code>sub1.js</code> he should look for it in <code>http:/localhost/resA</code> instead of <code>http:/localhost/app</code>.</p>
  
  <p><strong>generated html will be available at <code>http:/localhost/app/page1</code>:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="http:/localhost/resA/page1.bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>file <code>src/page1.js</code> will be available as <code>http:/localhost/resA/page1.bundle.js</code>:</strong></p>
  
  <pre><code>import(/* webpackChunkName: "sub1" */ './sub1').then(({MyClass}) =&gt; {/*...*/});
  </code></pre>
  
  <p><strong>file <code>src/sub1</code> will be available as <code>http:/localhost/resA/sub1.bundle.js</code>:</strong></p>
  
  <pre><code>export class MyClass {};
  </code></pre>
  
  <p><strong>file `webpack.config.js':</strong></p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  
  function config(env) {
      return {
          entry: {
              index: ['./src/page1.js']
          },
          output: {
              filename: '[name].bundle.js',
              chunkFilename: '[name].bundle.js',
              path: path.resolve(__dirname, 'dist'),
              publicPath: './'
          },
          module: {
              rules: [
                  {
                      test: /\.js$/i,
                      include: /src/,
                      exclude: /node_modules/,
                      use: {
                          loader: 'babel-loader'
                      }
                  }
              ]
          },
          devtool: 'source-map'
      };
  }
  
  module.exports = config;
  </code></pre>