Creating jQuery-Mobile with webpack

Question

I tried to download jquery-mobile using webpack. But so far no luck.

This is my webpack.config code for jquery and 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 the jquery.mobile file that causes the problems:

(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 this function "this" === "window", when I insert this => window with import-loader, I checked this.

And one more strange moment: if I replaced "this" with "window" as follows:

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

everything is getting good. But I can not change the jquery.mobile file, this may cause problems in the future.

Any help would be greatly appreciated, thanks!

Answer 1

import-loader (npm install imports-loader --save)

jQuery mobile , this (window):

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

: https://webpack.imtqy.com/docs/shimming-modules.html