title: Webpack code splitting and chunking
body: <p>I do not understand webpack, particularly code splitting and chunking. And I'm new to frontend dev.</p>
  
  <p>Let's say I have a large multipage AngularJS app, where some pages (but not all) use pieces of a large Vendor library that consists of many AMD modules, all in separate files. So I have multiple entry points configured, one for each page. 
  It seems reasonable to make the following bundles:</p>
  
  <ul>
  <li>A bundle for each page, containing my app's code, and maybe css etc</li>
  <li>A bundle containing my vendor's AMD modules (or at least, all the ones that are used by any of my pages)</li>
  <li>A bundle with common libs (e.g Angular, jquery, moment, etc) that are used by more than one of my app pages.</li>
  </ul>
  
  <p>So I make the following webpage config:</p>
  
  <pre><code>//Webpack config.
  var path = require('path');
  var CommonsChunkPlugin = new require("webpack/lib/optimize/CommonsChunkPlugin");
  var glob = require('glob');
  module.exports = {
      context: path.resolve(__dirname, 'app'),
      entry: {
          page1Entry: './page1Entry.js',
          page2Entry: './page2Entry.js', //There are a few more of these
          vendor: glob.sync("../vendor/**/*.js")
      },
      output: {
          filename: '[name].bundle.js',
          chunkFilename: "[id].chunk.js"
      },
      resolve: {
          //Resolve non-relative path declared dependencies from the following directories.
          //This means look in the context root (/app) for my app code.
          //look in vendor folder for the vendor requires
          //everything else look in node_modules
          modulesDirectories: ['vendor', 'app', 'node_modules'],
      },
      plugins: [
          new CommonsChunkPlugin({minChunks: 2, name: "commons"}),
          new CommonsChunkPlugin({name: "vendor", chunks: ['vendor']}),
      ]
  }
  </code></pre>
  
  <p>This is not producing the desired outcome. What I get is something like this:</p>
  
  <ul>
  <li>page1Entry.bundle.js //contains my app code AND some Vendor libs</li>
  <li>page2Entry.bundle.js //contains just my app code</li>
  <li>vendor.bundle.js //pretty much completely empty</li>
  <li>commons.bundle.js //seems about right, has angular etc
  Some numbered chunks are created, e.g.:</li>
  <li>4.chunk.js //small, contains some of my app logic that's used by TWO of my pages. NO vendor libs -- Why is this created?</li>
  <li>6.chunk.js //huge, contains some of my app logic AND some vendor libs -- why?</li>
  </ul>
  
  <p>Also, I see that the deployed code tries to get the numbered chunks from the server, but it's not getting them from my /deploymentcontext/js folder that all the chunks are deployed in - it's trying to load them from the page URL (e.g. <a href="http://my.domain/my/page/4.chunk.js" rel="nofollow">http://my.domain/my/page/4.chunk.js</a>). If I use the output.publicPath to configure this, I have to hardcode the deployment context. How can I fix this?</p>
  
  <p>What am I doing wrong?</p>