Using jQuery-mobile module with Webpack

Question

I have been banging my head around this for a few days and not able to find a solution. I have a cordova mobile app done with jQuery and I am trying to package it using webpack. The problem is that I am unable to require('jquery-mobile') in any module or globally. I have tried many things. Requiring the module locally

1. var $ = require('jquery-mobile')
2. var $=require("imports?this=>window!jquery-mobile/dist/jquery.mobile.js");

Importing it as a global pluigin

plugins:[
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      $.mobile: 'jquery-mobile'
    })
  ]

I get the error that Module not found: Error: Can't resolve 'jquery'. It is still there in my node-modules.

My package.json has

 "dependencies": {
    "@auth0/cordova": "^0.2.0",
    "auth0-js": "^8.8.0",
    "cordova": "^6.5.0",
    "cordova-android": "^6.2.3",
    "cordova-browser": "^4.1.0",
    "cordova-ios": "~4.4.0",
    "cordova-plugin-customurlscheme": "^4.3.0",
    "cordova-plugin-inappbrowser": "~1.7.1",
    "cordova-plugin-safariviewcontroller": "^1.4.7",
    "cordova-plugin-whitelist": "~1.3.2",
    "grunt-cli": "^1.2.0",
    "imports-loader": "^0.7.1",
    "jquery": "1.9.1",
    "jquery-mobile": "^1.4.0"
  },
  "devDependencies": {
    "cordova": "^6.5.0",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.16.0",
    "expose-loader": "^0.7.3",
    "webpack": "^3.5.2"
  }

I have checked the following resources

1. Issues with jQuery Mobile, NPM, and WebPack
2. making jQuery-Mobile work with webpack
3. https://github.com/styleguidist/react-styleguidist/issues/541
4. https://webpack.github.io/docs/shimming-modules.html

There are many other ways of importing jquery-mobile using webpack, e.g script-loader but due to my poor understanding of webpack I am quite lost at this point.

EDIT 1: My webpack.config.js file

const path = require('path');
const webpack = require('webpack');

const config = {

  context: __dirname,

  entry: ['babel-polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, './www'),
    filename: 'index.js'
  },
  plugins:[
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      $.mobile:'jquery-mobile'
    })
  ],

  devtool: 'source-map',
}
module.exports = config;

EDIT 2: So now I have changed my package.json to the latest version of jQuery-mobile and built that module using grunt I obtained the /dist folder

"dependencies": {
        "@auth0/cordova": "^0.2.0",
        "auth0-js": "^8.8.0",
        "cordova": "^6.5.0",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "~4.4.0",
        "cordova-plugin-customurlscheme": "^4.3.0",
        "cordova-plugin-inappbrowser": "~1.7.1",
        "cordova-plugin-safariviewcontroller": "^1.4.7",
        "cordova-plugin-whitelist": "~1.3.2",
        "grunt-cli": "^1.2.0",
        "imports-loader": "^0.7.1",
        "jquery-mobile": "^1.5.0-alpha.1"
    },

and I changed my webpack.config.js to

const path = require('path');
const webpack = require('webpack');

const config = {

  context: __dirname,

  entry: ['babel-polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, './www'),
    filename: 'index.js'
  },
  resolve: {
    alias: {
      "jquery": "jquery/src/jquery",
      "jquery-mobile": "jquery-mobile/dist/jquery.mobile"
    }
  },
  plugins:[
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.ProvidePlugin({
      "$.mobile": "jquery-mobile",
      "jQuery.mobile": "jquery-mobile",
      "window.jQuery.mobile": "jquery-mobile"
    })
  ],
  module: {
        loaders: [
    {
        test: /jquery.mobile.js$/,
        loader: "imports-loader?define=>false,this=>window"
    }
    ]
   },
  devtool: 'source-map',
}
module.exports = config;

The build is successful. But I have a piece of test code to change the page content which uses both jQuery and jQuery-mobile and that doesn't seem to work. I get the error that

TypeError: n.pageContainer is undefined

So basically $.mobile.pageContainer is not recognized as a jquery-mobile object.

My code

module1.prototype.loadPage = function(page, options) {
  console.log("inside LOAD PAGE");
  if (typeof options === "undefined") {
    options = {showLoadMsg: false, changeHash: true};
  }

  if ($("#"+page).length === 0) {
    $.each(app.allModules, function(id, module) {
      console.log(app.allModules);
      if (id === page) {
        $.mobile.pageContainer.pagecontainer("load",module.html, {role: "page"});
      }
    });
    setTimeout(function(){
      $.mobile.pageContainer.pagecontainer("change", "#" + page, options);
    }, 100);
  }
  else {
    setTimeout(function() {

      $.mobile.pageContainer.pagecontainer("change", "#" + page, options);
    }, 0);
  }
}

Answer 1

So I was unable to import the modules as global. I simply did on top of the file

require('jquery'),
require('jquery-mobile');

I was able to use $.mobile in that js file. But ran into a bunch of other problems.