Webpack 2 is not compiling files in the right order

Question

When I run webpack, my javascript assets are not complied in the correct order. The correct order should be

1. Jquery
2. Bootstrap

However the complied bundle file contains Bootstrap first then Jquery. Please see below

webpack.config

var path = require('path');
var webpack = require('webpack');
var extractTextPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');

var jsDestPath = './wwwroot/'; 

const config = {
  entry: {
    css: './Assets/scss/app.scss',
    app: './Assets/js/app.js',
    vendor: './Assets/js/vendor.js'
},
output: {
    path: path.resolve(__dirname, 'wwwroot/js'),
    filename: '[chunkhash].[name].js'
},
module: {
    rules: [
        {
            test: /\.js$/, 
            use: 'babel-loader'
        },
        {
            test: /\.scss$/, 
            loader: extractTextPlugin.extract({
                loader: 'css-loader!sass-loader'
            })
        }
    ]
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest'] //Specify the common bundle's name.
    }),

    new extractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true}),

    new webpack.LoaderOptionsPlugin({
        debug: true,
        minimize: true,
    }),

    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: true,
        }
    }), 

    new cleanWebpackPlugin(['js'], {
        root: jsDestPath,
        verbose: true,
        dry: false
    })      
 ],
}

module.exports = config;

vendor.js

import 'jquery/dist/jquery.js';
import 'bootstrap/dist/js/bootstrap.js';

Answer 1

The order in which modules are present in the webpack output do not necessarily mean that is the order in which they are loaded. webpack will not load (execute) the jQuery module before it is required/imported in the code. In reality, you will see that the execution order will still be correct.

Answer 2

You may need to set

global.jQuery = require('jquery');

In the js file that uses Bootstrap. I ran into this issue when using another js library that depended on jQuery, which I had installed via npm and required into my js file, but it was saying jQuery wasnt found.

The reason for this is a lot of js librarys that use jQuery that have been ported to npm dont seem to use the proper CommonJS method of require()ing jQuery, they simply look for the jQuery definition in the global namespace.