What I want is to bundle my JavaScript vendor files in a specific order via CommonsChunkPlugin from Webpack.

I'm using the CommonsChunkPlugin for Webpack. The usage from the official documentation 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.

Note: For those who are not familiar with Bootstrap 4, it currently
requires a JavaScript library dependency called Tether.
Tether must be loaded before Bootstrap.

webpack.config.js

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(),

  ],

};

Two things are happening here:

1. vendor.bundle.js contains bootstrap, jquery, tether,
   wowjs


2. bundle.js contains the rest of my application

Bundling order:

correct: jquery, tether, bootstrap, wowjs

incorrect: bootstrap, jquery, tether, wowjs

Notice in my webpack.config.js I ordered them exactly as they should but they are bundled in the incorrect order. It doesn't matter if I rearrange them randomly the result is the same.

After I use Webpack to build my application, the vendor.bundle.js shows me the incorrect order.

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.

My other approach also resulted in the same issue

I also tried import and require in my entry file (in this case, app.jsx) without the use of the CommonChunkPlugin and that also loads my JavaScript libraries in alphabetical order for some reason.

webpack.config.js

module.exports = {

  entry: './app.jsx',



  output: {

    path: __dirname + '/dist',

    filename: 'bundle.js',

  },



  plugins: [

    new webpack.optimize.UglifyJsPlugin(),

  ],

};

app.jsx (entry)

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';

or

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');

The result?

Bootstrap > jQuery > Tether > wowjs

How do I load my vendor files in the correct order?