How to add jquery plugins using webpack?

Question

I am using webpack with angular 2 for my web appllication i need to add a jquery slider to my app , so i am using a jquery plugin for that .

My webpack config for jquery is

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

above ProvidePlugin gives $ and jQuery to all over my app , but i need to import the jquery plugin also to my app

Answer 1

Normally a jQuery plugin would be imported where required, rather than globally.

For example:

import 'jquery.waterwheelCarousel.min.js';

This will cause the plugin file to be loaded and as jQuery is provided globally, it should cause the plugin function to be made available on the jQuery object ( $("#carousel").waterwheelCarousel() )

If you want to made it globally available instead, look at https://webpack.github.io/docs/configuration.html#entry

Answer 2

in main.ts include

import 'jquery';

once.

then in webpack config

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