title: Webpack with bower support
body: <p>Would I like to load preferably the node packages, and only if not exist, loads the bower package.</p>
  
  <blockquote>
    <p>I would just use the node package only as recommended in Webpack site, but I need to load a library that is just in bower, <a href="https://github.com/Stamplay/stamplay-js-sdk">https://github.com/Stamplay/stamplay-js-sdk</a>  and    <a href="https://github.com/Stamplay/angular-stamplay">https://github.com/Stamplay/angular-stamplay</a></p>
  </blockquote>
  
  <h2>Try with <a href="https://github.com/lpiepiora/bower-webpack-plugin">bower-webpack-plugin</a></h2>
  
  <p>I installed <a href="https://github.com/lpiepiora/bower-webpack-plugin">https://github.com/lpiepiora/bower-webpack-plugin</a></p>
  
  <p>But when I run <code>webpack-dev-server -d --watch</code> the error is displayed in chrome console:</p>
  
  <pre><code>Uncaught TypeError: angular.module is not a function(anonymous function) @ app.js:8__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39
  angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
  Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
  </code></pre>
  
  <h2>Try with ResolverPlugin (see <a href="https://webpack.github.io/docs/usage-with-bower.html">Webpack docs</a>)</h2>
  
  <p>In webpack.config i add..</p>
  
  <pre><code>plugins: [
       ...
      , new webpack.ProvidePlugin({
          Q: 'q',
          store: 'store.js',
          Stamplay: 'stamplay-js-sdk'
      })
      , new webpack.ResolverPlugin(
          [
              new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
          ], ["normal", "loader"]
      )
  
  ],
  ....
  resolve: {
      root: [
          path.join(__dirname, 'node_modules'),
          path.join(__dirname, 'bower_components')
      ],
  </code></pre>
  
  <p>But, like mention <a href="https://github.com/Stamplay/stamplay-js-sdk/issues/15">here</a> the <code>Stamplay</code> object is not correct!</p>
  
  <h2>Trying with CDN and angular-webpack-plugin</h2>
  
  <p>First add script tag into <code>index.html</code> ..</p>
  
  <p>Second, add externals in webpack.config ..</p>
  
  <pre><code>externals: {
      stamplay: 'Stamplay'
  },
  </code></pre>
  
  <p>And finally .. <code>new AngularPlugin</code> into <code>plugins</code> on webpack.config</p>
  
  <p>This way, worsks <strong>but</strong> I cant use <code>angular-stamplay</code>, when I try, a error in module <code>stamplay</code> apper. :(</p>
  
  <p>See branch with <a href="https://github.com/Ridermansb/webpackBowerStarter/tree/stamplay_in_cdn">this change here</a></p>
  
  <p>The full project is here: <a href="https://github.com/Ridermansb/webpackBowerStarter">https://github.com/Ridermansb/webpackBowerStarter</a></p>