title: How to configure webpack multicompiler for a nested application?
body: <p>Having webpack config like so:</p>
  
  <pre><code>module.exports = [
    {
      entry: { main: './main/app.js' },
      module: [...]
    }, {
      entry: { sub: './sub/app.js' },
      module: [...]
    }
  ]
  </code></pre>
  
  <p>And <code>main/app.js</code> like so:</p>
  
  <pre><code>import('./foo'); // all files inside ./main should be handled by first config
  import('../sub/bar');  // all files inside ./sub should be handled by second config
  </code></pre>
  
  <p>I'd like to configure webpack so that each config object handles only files in that app's directory. Which means that even though I include files from <code>sub</code> app inside <code>main</code> app, I'd like for all the loaders to only apply to files imported from <code>main</code> app and let <code>sub</code> app files be handled by <code>sub</code> app config.</p>
  
  <p>I've looked through multiple webpack issues and docs, but there doesn't seem to be a solution for this. I hope that perhaps somebody could shine the light how to achieve that.</p>
  
  <p>Using include/exclude does not solve the issue - these will only prevent loaders to being applied to given files, but the main app will still attempt to load them and throw errors that no loader exists for given files.</p>
  
  <p>noParse or webpackIgnorePlugin are also not an option, since <code>sub</code> app is a fully fledged app, which will do other file imports etc. and noParse would break these imports.</p>
  
  <p>Edit: On a higher level, what I'm trying to do is to have one main application that loads multiple sub apps dynamically into the window (using dynamic <code>import()</code>).</p>
  
  <p><strong>Each sub app should have its own webpack config and only that config should be responsible for applying correct loaders. Main app should only serve a the navigation that allows loading the sub apps dynamically, without knowing what loaders they might need.</strong></p>