Webpack, jQuery, and loading qTip2

Question

I'm trying to require qTip2, but I'm having problems:

require('jquery/src/sizzle/dist/sizzle.js');
require('jquery/src/jquery.js');
require('jquery-ui/jquery-ui.js');
require('qtip2/jquery.qtip.js');


$(document).ready(function() {
    $('.tooltip').qtip({
        attr: 'tooltip'
    });
});

When I load the bundle I get:

Uncaught TypeError: $(...).qtip is not a function

Which indicates that qTip2 won't load.

My webpack config is:

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: "./source/javascripts/main.js",
    output: {
        path: __dirname,
        filename: "build/bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.jsx?$/, loader: "babel" },
            { test: /jquery\/src\/selector\.js$/, loader: 'amd-define-factory-patcher-loader' },

        ]
    },
    resolve: {
        root: [path.join(__dirname, 'bower_components')]
    },
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
        )
    ]
};

Any help would be great, thanks!

Answer 1

remove jQuery as plugin in webconfig.js

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

then add it like this

window.$ = window.jQuery = require('jquery');
require('qtip2');