title: How to configure and use jQuery with webpack
body: <p>I have a very simple project to test run jQuery function with webpack. However I ran into errors at the bundle step. Here are the errors:</p>
  
  <pre><code>ERROR in ./~/jQuery/lib/node-jquery.js
  Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
   @ ./~/jQuery/lib/node-jquery.js 5:13-29
  
  ERROR in ./~/jQuery/lib/node-jquery.js
  Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
   @ ./~/jQuery/lib/node-jquery.js 8:28-53
  
  ERROR in ./~/jQuery/lib/node-jquery.js
  Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
   @ ./~/jQuery/lib/node-jquery.js 13:24-43
  
  ERROR in ./~/jQuery/lib/node-jquery.js
  Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
   @ ./~/jQuery/lib/node-jquery.js 17:25-45
  </code></pre>
  
  <p>Here are my config files:<br>
  package.json</p>
  
  <pre><code>{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.jsx",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "babel-core": "^6.17.0",
      "babel-loader": "^6.2.5",
      "babel-preset-es2015": "^6.16.0",
      "babel-preset-react": "^6.16.0",
      "jquery": "^2.2.2",
      "react": "file:node_modules/react",
      "react-dom": "file:node_modules/react-dom",
      "webpack": "^1.13.2",
      "webpack-dev-server": "^1.16.2"
    }
  }
  </code></pre>
  
  <p>webpack.config.js  </p>
  
  <pre><code>var webpack = require('webpack')
  var path = require('path')
  
  var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
  var APP_DIR = path.resolve(__dirname, 'src/client/app');
  
  var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
      path: BUILD_DIR,
      filename: 'bundle.js',
      publicPath: 'public',
    },
    module: {
      loaders: [
        {
  
          test: /\.jsx?/,
          include: APP_DIR,
          loader: 'babel'
        },
        {
          test: /\.css/,
          include: APP_DIR,
        }
      ]
    },
  
  };
  
  module.exports = config;
  </code></pre>
  
  <p>index.jsx:  </p>
  
  <pre><code>import React from 'react'
  import {render} from 'react-dom'
  import $ from 'jQuery'
  
  
  (function () {
  
      $(document).ready(function() {
          console.log("It works!");
      });
  
  })();
  </code></pre>
  
  <p>If I install the mentioned modules (jsdom, xmlhttprequest, ..), the errors will be replaced by very long errors.</p>