making jQuery-Mobile work with webpack

Question

I was trying to load jquery-mobile with webpack. But no luck so far.

This is my webpack.config code for jquery & jquery-mobile:

loaders: [
    {
        test: /jquery.mobile.js$/,
        loader: "imports?define=>false,this=>window"
    },

resolve: {
    alias: {
        "jquery": "jquery/src/jquery",
        "jquery-mobile": "jquery-mobile/dist/jquery.mobile"
    },
},

plugins: [
    new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery"
    }),
]

And this is the function in jquery.mobile file which causes trouble:

(function ( root, doc, factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( [ "jquery" ], function ( $ ) {
            factory( $, root, doc );
            return $.mobile;
        });
    } else {
        // Browser globals
        factory( root.jQuery, root, doc );
    }
}( this, document, function ( jQuery, window, document, undefined ) {
(function( $ ) {
    $.mobile = {};
}( jQuery ));

The problem is that root.jQuery is undefined. Inside that function "this" === "window", as i inject this=>window with imports-loader, i checked that.

And another strange moment: if i replace "this" with "window" like that:

}( window, document, function ( jQuery, window, document, undefined ) {

everything becomes fine. But i can't modify jquery.mobile file, this might cause trouble in the future.

Any help would be much appreciated, thank you!

Answer 1

The following requires the imports-loader (npm install imports-loader --save)

jQuery mobile expects this to be the global context (window):

require("imports?this=>window!jquery-mobile/dist/jquery.mobile.js");

Reference: https://webpack.github.io/docs/shimming-modules.html