Using jquery-mobile with Webpack

Question

I am trying to load jquery-mobile using webpack with no luck so far. I am aware that jquery-mobile depends on jquery-ui which in turn depends on jquery.

How do I set up such a scenario in Webpack?

Here is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');
var bower_dir = __dirname + '/bower_components';

module.exports = {

    context: __dirname,
    entry: './assets/js/index.js',         
    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    module: {
        loaders: [
            {test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: "imports?this=>window"}
        ]
    },
    resolve: {
        alias: {
            'jquery': bower_dir + '/jquery/src/jquery.js',
            'jquery-ui': bower_dir + '/jquery-ui/jquery-ui.js',
            'jquery-mobile': bower_dir + '/jquery-mobile/js/jquery.mobile.js'
        }
    }
};

Any help would be much appreciated.

Thank you all in advance.

Answer 1

If you just add the scripts you need to the page in the correct order, you don't need to worry about that in webpack.

All you have to do is tell webpack that those modules are loaded from external references, like so:

{
  externals: {
    'jquery': 'jQuery'
  } 
}

This tells webpack that every time you require('jquery') it will return a globally available variable jQuery.