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.

Do you really need that with webpack? Because you can just add script references to the page and tell webpack that they will be available globally. — thitemple, Apr 01 '16 at 16:30

score 3 · Accepted Answer · answered Apr 02 '16 at 14:47

3

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.

answered Apr 02 '16 at 14:47

thitemple

5,833
4
42
67

So I added jquery.js as a script tag in my gsp file. I added the above externals object to my webpack.config file and my modules are still saying $ is not defined. I added require('jquery'); to the top of my bundled modules but still no joy. Can you explain why this is not working correctly for me ? – me-me Apr 21 '16 at 15:23
You should maybe post a question with more information and some code samples. – thitemple Apr 21 '16 at 15:49

Using jquery-mobile with Webpack

1 Answers1

Linked