title: Usage webpack with bower
body: <p>I have a basic ReactJS application. I use webpack and would like to use moduls from bower. I installed <a href="https://www.npmjs.com/package/bower-webpack-plugin" rel="nofollow noreferrer">bower-webpack-plugin</a> and add jquery library in bower.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var BowerWebpackPlugin = require("bower-webpack-plugin");
  var webpack = require("webpack");
  
  module.exports = {
      entry: './index.jsx',
      output: {
          filename: 'bundle.js',
          publicPath: 'http://localhost:8090/assets'
      },
      module: {
          loaders: [
              {
                  //tell webpack to use jsx-loader for all *.jsx files
                  test: /\.jsx$/,
                  loader: 'jsx-loader?insertPragma=React.DOM&amp;harmony'
              }
          ]
      },
      plugins: [
          new BowerWebpackPlugin(),
          new webpack.ProvidePlugin({
              $: 'jquery',
          })
      ],
      externals: {
          //don't bundle the 'react' npm package with our bundle.js
          //but get it from a global 'React' variable
          'react': 'React'
      },
      resolve: {
          extensions: ['', '.js', '.jsx'],
          alias: {
              jquery: "./bower_components/jquery/dist/jquery.js"
          }
      }
  }
  </code></pre>
  
  <p>Edit: Now I am using <a href="http://andrejgajdos.com/setting-up-webpack-for-es6-react-sass-and-bootstrap/" rel="nofollow noreferrer">this webpack config</a> with bower dependencies and without <em>bower-webpack-plugin</em></p>
  
  <p><strong>bower.json</strong></p>
  
  <pre><code>{
    "name": "jquery",
    "version": "2.1.4",
    "main": "dist/jquery.js",
    "license": "MIT",
    "ignore": [
      "**/.*",
      "build",
      "dist/cdn",
      "speed",
      "test",
      "*.md",
      "AUTHORS.txt",
      "Gruntfile.js",
      "package.json"
    ],
    "devDependencies": {
      "sizzle": "2.1.1-jquery.2.1.2",
      "requirejs": "2.1.10",
      "qunit": "1.14.0",
      "sinon": "1.8.1"
    },
    "keywords": [
      "jquery",
      "javascript",
      "library"
    ]
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Basic Property Grid&lt;/title&gt;
      &lt;!-- include react --&gt;
      &lt;script src="./node_modules/react/dist/react-with-addons.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;
          &lt;!-- this is where the root react component will get rendered --&gt;
      &lt;/div&gt;
      &lt;!-- include the webpack-dev-server script so our scripts get reloaded when we make a change --&gt;
      &lt;!-- we'll run the webpack dev server on port 8090, so make sure it is correct --&gt;
      &lt;script src="http://localhost:8090/webpack-dev-server.js"&gt;&lt;/script&gt;
      &lt;!-- include the bundle that contains all our scripts, produced by webpack --&gt;
      &lt;!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 --&gt;
      &lt;script type="text/javascript" src="http://localhost:8090/assets/bundle.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
   $("body").append("This is Hello World by JQuery");
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I open main page, I get error message: "$ is not defined".</p>
  
  <p><strong>project structure</strong></p>
  
  <p><a href="https://i.stack.imgur.com/aBp6K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aBp6K.png" alt="enter image description here"></a></p>