title: Webpack Async Loading with Dynamic Require
body: <p>I am very new (hours) to webpack.</p>
  
  <p>I'd like to combine async loading, which is awesome, with dynamic requires. Suppose I want to asynchronously require one of two files, './DIRECTORY/FOO' or './DIRECTORY/BAR'. Here's a non-dynamic version that, I think, works as I expect:</p>
  
  <pre><code>if (condition_holds) {
    require.ensure([], function()
                       {
                         require('./DIRECTORY/FOO');
                       });
  }
  else {
    require.ensure([], function()
                       {
                         require('./DIRECTORY/BAR');
                       });
  }
  </code></pre>
  
  <p>And here's my attempt to make this dynamic:</p>
  
  <pre><code>var file_name = condition_holds ? "FOO" : "BAR";
  require.ensure([], function()
                     {
                       require('./DIRECTORY/' + file_name);
                     });
  </code></pre>
  
  <p>However, when I use webpack to compile these pieces of code, I get very different results. For the first (non-static), two different files are produced, one for FOO and one for BAR, and only that file is asynchronously loaded. For the second, only one file is produced, which contains both FOO and BAR. This is not what I was expecting or want. I'd like separate files to be produced, one for each module, and just that module to be asynchronously downloaded.</p>
  
  <p>Is this expected behavior? If so, why, and how can use dynamic requires but still get separate modules, each loaded separately?</p>
  
  <p>Here is my webpack.config.js:</p>
  
  <pre><code>module.exports =
  {
    entry: {
    bundle: './main.js'
    },
    output: {
      path: './public/js/',
      filename: '[name].js',
      publicPath: "/js/"
    }
  };
  </code></pre>