title: Webpack bundles my files in the wrong order (CommonsChunkPlugin)
body: <p>What I want is to bundle my JavaScript vendor files in a specific order via <code>CommonsChunkPlugin</code> from Webpack.</p>
  
  <p>I'm using the <code>CommonsChunkPlugin</code> for Webpack. The usage from the <a href="https://webpack.js.org/plugins/commons-chunk-plugin/" rel="noreferrer">official documentation</a> is straight forward and easy. It works as intended but I believe the plugin is bundling my files in alphabetical order (could be wrong). There are no options for the plugin to specify the order they should be bundled.</p>
  
  <blockquote>
    <p><strong>Note:</strong> For those who are not familiar with Bootstrap 4, it currently
    requires a JavaScript library dependency called Tether.
    Tether must be loaded before Bootstrap.</p>
  </blockquote>
  
  <p><strong>webpack.config.js</strong><br/></p>
  
  <pre><code>module.exports = {
    entry: {
      app: './app.jsx',
      vendor: ['jquery', 'tether', 'bootstrap', 'wowjs'],
    },
  
    output: {
      path: __dirname + '/dist',
      filename: 'bundle.js',
    },
  
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          filename: 'vendor.bundle.js'
      }),
  
      new webpack.optimize.UglifyJsPlugin(),
    ],
  };
  </code></pre>
  
  <p>Two things are happening here:</p>
  
  <ol>
  <li><code>vendor.bundle.js</code> contains <strong>bootstrap</strong>, <strong>jquery</strong>, <strong>tether</strong>,
  <strong>wowjs</strong></li>
  <li><code>bundle.js</code> contains the rest of my application</li>
  </ol>
  
  <p>Bundling order:<br/>
  <strong>correct:</strong> <code>jquery</code>, <code>tether</code>, <code>bootstrap</code>, <code>wowjs</code><br/>
  <strong>incorrect:</strong> <code>bootstrap</code>, <code>jquery</code>, <code>tether</code>, <code>wowjs</code></p>
  
  <p>Notice in my <strong>webpack.config.js</strong> I ordered them exactly as they should but they are bundled in the <strong>incorrect</strong> order. It doesn't matter if I rearrange them randomly the result is the same.</p>
  
  <p>After I use Webpack to build my application, the <code>vendor.bundle.js</code> shows me the incorrect order.</p>
  
  <p>I know they're bundled incorrectly cause Chrome Dev. Tools tell me there are dependency issues. When I view the file through the tool and my IDE, it is bundled in the incorrect order.</p>
  
  <hr/>
  
  <h2>My other approach also resulted in the same issue</h2>
  
  <p>I also tried <code>import</code> and <code>require</code> in my entry file <em>(in this case, app.jsx)</em> without the use of the <code>CommonChunkPlugin</code> and that also loads my JavaScript libraries in alphabetical order for some reason.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
    entry: './app.jsx',
  
    output: {
      path: __dirname + '/dist',
      filename: 'bundle.js',
    },
  
    plugins: [
      new webpack.optimize.UglifyJsPlugin(),
    ],
  };
  </code></pre>
  
  <p><strong>app.jsx (entry)</strong></p>
  
  <pre><code>import './node_modules/jquery/dist/jquery.min';
  import './node_modules/tether/dist/js/tether.min';
  import './node_modules/bootstrap/dist/js/bootstrap.min';
  import './node_modules/wowjs/dist/wow.min';
  </code></pre>
  
  <p>or</p>
  
  <pre><code>require('./node_modules/jquery/dist/jquery.min');
  require('./node_modules/tether/dist/js/tether.min');
  require('./node_modules/bootstrap/dist/js/bootstrap.min');
  require('./node_modules/wowjs/dist/wow.min');
  </code></pre>
  
  <p><strong>The result?</strong><br/>
  Bootstrap > jQuery > Tether > wowjs</p>
  
  <hr/>
  
  <p>How do I load my vendor files in the correct order?</p>