kstratis kstratis - 5 months ago 130
Javascript Question

Using jquery-mobile with Webpack

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


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.


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.