title: What is the best practice for importing angularjs using webpack?
body: <p>How do you use Webpack and AngularJS together, and how about template loading and on demand fetching of resources?</p>
  
  <p>An example of a well written <code>webpack.config.js</code> file for this purpose would be very much appreciated.</p>
  
  <p>All code snippets displayed here can be accessed at <a href="https://github.com/jibiabraham/faber-seed" rel="noreferrer">this github repo</a>. Code has been generously adapted from <a href="https://github.com/packetloop/angular-webpack" rel="noreferrer">this packetloop git repo</a>.</p>
  
  <p><strong>webpack.config.json</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var path = require('path');
  var ResolverPlugin = require("webpack/lib/ResolverPlugin");
  
  var config = {
    context: __dirname,
    entry: ['webpack/hot/dev-server', './app/app.js'],
    output: {
      path: './build',
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: /\.css$/,
        loader: "style!css-loader"
      }, {
        test: /\.scss$/,
        loader: "style!css!sass?outputStyle=expanded"
      }, {
        test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
        loader: "file"
      }, {
        test: /\.html$/,
        loader: "ngtemplate?relativeTo=" + path.join(__dirname, 'app/') + "!raw"
      }]
    },
    // Let webpack know where the module folders are for bower and node_modules
    // This lets you write things like - require('bower/&lt;plugin&gt;') anywhere in your code base
    resolve: {
      modulesDirectories: ['node_modules', 'lib/bower_components'],
      alias: {
        'npm': __dirname + '/node_modules',
        'vendor': __dirname + '/app/vendor/',
        'bower': __dirname + '/lib/bower_components'
      }
    },
    plugins: [
      // This is to help webpack know that it has to load the js file in bower.json#main
      new ResolverPlugin(
        new ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
      )
    ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p>To import AngularJS into the main <code>app.js</code> you do the following:</p>
  
  <p><strong>app/vendor/angular.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>'use strict';
  
  if (!global.window.angular) {
    require('bower/angular/angular');
  }
  var angular = global.window.angular;
  module.exports = angular;
  </code></pre>
  
  <p>And then use it in <code>app.js</code> like so,</p>
  
  <p><strong>app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>...
  var angular = require('vendor/angular');
  
  // Declare app level module
  var app = angular.module('myApp', []);
  
  ...
  </code></pre>
  
  <p>Is the following correct? Is there an easier way to do this? I've seen a few (not a lot by any standards) posts which listed another method.</p>
  
  <p>From <a href="http://www.reddit.com/r/angularjs/comments/252z6x/what_are_best_practices_for_bundling_angularjs/chdidgy" rel="noreferrer">this reddit post comment</a></p>
  
  <pre><code>// Add to webpack.config.js#module#loaders array
      {
        test: /[\/]angular\.js$/,
        loader: "exports?angular"
      }
  </code></pre>
  
  <p>There is also another plugin which is in development right now, at <a href="https://github.com/stackfull/angular-seed" rel="noreferrer">stackfull/angular-seed</a>. It seems to be in the right direction, but is really really hard to use right now.</p>
  
  <p>Webpack is way awesome, but the lack of documentation and samples are killing it.</p>