title: Managing jQuery plugin dependency in webpack
body: <p>I'm using Webpack in my application, in which I create two entry points - bundle.js for all my JavaScript files/codes, and vendors.js for all libraries like jQuery and React. What do I do in order to use plugins which have jQuery as their dependencies and I want to have them also in vendors.js? What if those plugins have multiple dependencies?</p>
  
  <p>Currently I'm trying to use this jQuery plugin here - <a href="https://github.com/mbklein/jquery-elastic" rel="noreferrer">https://github.com/mbklein/jquery-elastic</a>. The Webpack documentation mentions <a href="https://webpack.js.org/plugins/provide-plugin/" rel="noreferrer">providePlugin</a> and imports-loader. I used providePlugin, but still the jQuery object is not available. Here is how my webpack.config.js looks like-</p>
  
  <pre><code>var webpack = require('webpack');
  var bower_dir = __dirname + '/bower_components';
  var node_dir = __dirname + '/node_modules';
  var lib_dir = __dirname + '/public/js/libs';
  
  var config = {
      addVendor: function (name, path) {
          this.resolve.alias[name] = path;
          this.module.noParse.push(new RegExp(path));
      },
      plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jquery: "jQuery",
              "window.jQuery": "jquery"
          }),
          new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
      ],
      entry: {
          app: ['./public/js/main.js'],
          vendors: ['react','jquery']
      },
      resolve: {
          alias: {
              'jquery': node_dir + '/jquery/dist/jquery.js',
              'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
          }
      },
      output: {
          path: './public/js',
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              { test: /\.js$/, loader: 'jsx-loader' },
              { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
          ]
      }
  };
  config.addVendor('react', bower_dir + '/react/react.min.js');
  config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
  config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');
  
  module.exports = config;
  </code></pre>
  
  <p>But in spite of this, it still throws an error in the browser console:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: jQuery is not defined</p>
  </blockquote>
  
  <p>Similarly, when I use the imports-loader, it throws an error,</p>
  
  <blockquote>
    <p>require is not defined'</p>
  </blockquote>
  
  <p>in this line:</p>
  
  <pre><code>var jQuery = require("jquery")
  </code></pre>
  
  <p>However, I could use the same plugin when I don't add it to my vendors.js file and instead required it in the normal AMD way as how I include my other JavaScript code files, like-</p>
  
  <pre><code>define(
  [
      'jquery',
      'react',
      '../../common-functions',
      '../../libs/jquery.elastic.source'
  ],function($,React,commonFunctions){
      $("#myInput").elastic() //It works
  
  });
  </code></pre>
  
  <p>But this is not what I want to do, as this would mean that jquery.elastic.source.js is bundled along with my JavaScript code in bundle.js, and I want all my jQuery plugins to be in the vendors.js bundle. So how do I go about achieving this?</p>