How to use jQuery plus plugins and dependent libraries with Webpack

Question

I am trying to understand how to port an existing set of code to Webpack. Here's my scenario:

I'm using jQuery with Bootstrap, KendoUI, Mockjax, some jQuery plugin-ish libraries (eg bootbox, jQuery BlockUI). Previously (using requireJS), I was able to specify these dependencies in an array in the 'require' of my main app js, and everything was tied together nicely. Like this:

require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});

Using Webpack I've encountered a number of problems:

• When I turn on the 'chunking' feature, my mock endpoints no longer work

• In one case, Webpack is creating a '0.js' file and I have no idea why, nor how to prevent it from doing so.

• In various cases it appears there are two (?) copies of jQuery, such that handlers or references to Kendo widgets don't work anymore

• When I tried to convert some wrapper code from an AMD style (with a 'require' array followed by a function with formal params), I got numerous errors, such as Bootstrap not finding jQuery or everything appearing to load except none of the jQuery event listeners were working.

I've read a bunch of articles, and tried things like:

• using the webpack.ProvidePlugin in my Webpack config

• putting an 'alias' to the unminified jQuery in the resolve object of my Webpack config

• using the imports-loader?jQuery=jquery,$=jquery,this=>window approach in my module: { loaders: {}} Webpack config object

• using the imports-loader approach in my main js in the require

So far, nothing has worked completely. I've gotten close, only to find (for example) that suddenly a Kendo widget doesn't seem to exist under the jQuery selection it previously was working under.

Summary:

I'd like to understand how to make a bulletproof setup so that one and only one instance of jQuery exists, and everything that has jQuery as a dependency/relationship uses that instance everywhere in my code. Further, I'd like to understand how such a thing can be accomplished while using the 'chunking' feature of Webpack. If I separate my Mockjax endpoints (for example) into a separate file, I want them to function for any AJAX call anywhere, be it via Kendo or jQuery. If I define a Kendo widget (say, a dropdown) somewhere, I want to be able to get a handle to it from anywhere using the $('.some-kendo-widget').data('kendoDropDownList) approach.

I'm happy to read more articles if someone has links; I've searched and searched, and just don't seem to have the right vocabulary to find what I need. Surely someone else has faced this though.

Answer 1

For legacy libraries like jQuery UI which rely on a global jQuery we've had to use the ProvidePlugin :

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}),

But I'm just sort of grasping at straws here, good luck!