title: 'jquery is not defined' when using webpack to load bootstrap
body: <p>I am just starting to learn to use Webpack (previously I just use the manual way to include individual scripts separately). And I used <code>bootstrap-loader</code> for loading bootstrap. Here is my webpack.config.js</p>
  
  <pre><code>var path = require("path")
  var webpack = require('webpack')
  var BundleTracker = require('webpack-bundle-tracker')
  
  module.exports = {
      context: __dirname,
  
      entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
  
      output: {
          path: path.resolve('./assets/bundles/'),
          filename: "[name]-[hash].js",
      },
  
      plugins: [
          new BundleTracker({filename: './webpack-stats.json'})
      ],
  
      module: {
          loaders: [
              { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
              { test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
              // images
              { test: /\.png$/, loader: 'url-loader?limit=100000'},
              { test: /\.jpg$/, loader: 'file-loader'},
              // bootstrap image files
              { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=application/font-woff'},
              { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=application/octet-stream'},
              { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
              { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=image/svg+xml'}
          ],
      },
  
      resolve: {
          modulesDirectories: ['node_modules', 'bower_components'],
          extensions: ['', '.js', '.jsx'],
          jquery: './vendor/jquery/jquery.js',
      },
  }
  </code></pre>
  
  <p>And here is my entry.js</p>
  
  <pre><code>global.jQuery = global.$ = require('jquery');
  require('bootstrap-loader');
  </code></pre>
  
  <p>This seems to work. However, I used this before and it did not work:</p>
  
  <pre><code>window.jQuery = window.$ = require('jquery');
  </code></pre>
  
  <p>I found the line above suggested by so many people. But I just simply get errors when load the page. Just some examples: <a href="https://stackoverflow.com/questions/29382444/specify-jquery-for-bootstrap-in-webpack">some SO question</a>, <a href="https://github.com/webpack/webpack/issues/108" rel="noreferrer">webpack issue</a>, <a href="https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack">another SO question</a>.</p>
  
  <p>Later I found <a href="https://stackoverflow.com/questions/37651015/webpack-using-bootstrap-jquery-is-not-defined">this question</a>, and <a href="https://stackoverflow.com/questions/37651015/webpack-using-bootstrap-jquery-is-not-defined">this question</a>. So the page actually works with bootstrap js functionality working as well.</p>
  
  <p>I will add my package.json as well in case it is relevant:</p>
  
  <pre><code>{
    "author": "franklingu",
    "dependencies": {
      "babel": "^6.5.2",
      "babel-core": "^6.13.2",
      "babel-loader": "^6.2.4",
      "bootstrap-loader": "^1.2.0-beta.1",
      "bootstrap-sass": "^3.3.7",
      "extract-text-webpack-plugin": "^1.0.1",
      "jquery": "^3.1.0",
      "node-sass": "^3.8.0",
      "resolve-url-loader": "^1.6.0",
      "sass-loader": "^4.0.0",
      "webpack": "^1.13.1",
      "webpack-bundle-tracker": "0.0.93"
    },
    "devDependencies": {
      "babel-core": "^6.13.2",
      "babel-loader": "^6.2.4",
      "css-loader": "^0.23.1",
      "file-loader": "^0.9.0",
      "node-sass": "^3.8.0",
      "resolve-url-loader": "^1.6.0",
      "sass-loader": "^4.0.0",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack": "^1.13.1"
    }
  }
  </code></pre>
  
  <p>I am new to webpack but I am not new to JS. I am wondering why <code>window.$</code> is not working.</p>
  
  <p>And I wonder, for webpack, why some people suggested this in plugins:</p>
  
  <pre><code>        new webpack.ProvidePlugin({
              'window.jQuery': 'jquery',
              'window.$': 'jquery',
          })
  </code></pre>
  
  <p>Some people are suggesting this (did not work for me either):</p>
  
  <pre><code> resolve: {
      alias: {
          jquery: "jquery/src/jquery"
      }
  }
  </code></pre>
  
  <p>I played with node for a while back then and I remembered that node makes use of request js for loading(I am not very clear about differences between common vs require vs amd though). But why some people mention common js?</p>
  
  <p>I was developing backend for some time and just started frontend--so many questions are popping up. It would just enough if you provide me with some link to some guide to read which can clear my doubts/build my basic understanding of these.</p>