How to use jQuery plus plugins and dependent libraries with Webpack

[Travis]

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 (e.g. 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.

[Plamen]

Hi,

The scenario you are trying to achieve is rather a web pack issue than a kendo ui issue. In such cases in order to achieve the most appropriate answer I would rather recommend you to refer to some webpack specific forums regarding a possible solution.

Regards,
Plamen
Telerik by Progress

[Travis]

Thanks Plamen. I understand it's not a Kendo issue per se; I was hoping that others may have already solved this in a common way when using Kendo (particularly the NPM version), and these forums seemed like a good way to reach such folks.