title: Webpack workflow splitting vendor and app code efficiently
body: <p>I have had trouble finding sufficient Webpack documentation and examples to hash out an ideal dev workflow for my situation. Here are all the features that would make the workflow ideal:</p>
  
  <ol>
  <li><p>Watching, ideally through Gulp, with efficient caching. (Don't think I need hot module replacement and suspect it might not fit into my dev environment well.)</p></li>
  <li><p>Vendor modules (right now I have only npm packages, not all of them exposing UMD globals in their main file, if it came down to that) that are </p>
  
  <p>a. not parsed &amp; re-compiled during watch (so recompilation is faster),</p>
  
  <p>b. do not receive a sourcemap (so browser devtools are faster to respond), and</p>
  
  <p>c. write to a distinct <code>vendor.js</code> bundle that browsers can cache separately from app bundles.</p></li>
  <li><p>App modules that are</p>
  
  <p>a. explicit about all dependencies (i.e. <code>import React from 'react';</code> even if React is actually globally exposed or something via #2),</p>
  
  <p>b. <em>are</em> re-compiled during watch, and</p>
  
  <p>c. <em>do</em> receive a sourcemap.</p></li>
  </ol>
  
  <p>Most of what I have read in documentation or examples has not seemed to hit this workflow on the head.</p>
  
  <p>While I do see in the docs how to create a vendor-specific bundle (reproduced here: <a href="https://stackoverflow.com/questions/26603499/simple-solution-to-share-modules-loaded-via-npm-across-multiple-browserify-or-we/26628468#26628468">Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles</a>), the simple example provided does not address 2a and 2b.</p>
  
  <p>I don't see in the docs any ways to specify different compile-configurations (sourcemaps, etc.) for different chunks, or to create completely separate Webpack bundles with separate config files that can reference each other, unless by globalizing all vendor libraries and using them as externals (?), which isn't ideal ...</p>
  
  <p>Also, I am curious whether Gulp users are using <code>gulp-webpack</code> or instead a setup like that provided in <a href="http://webpack.github.io/docs/usage-with-gulp.html" rel="nofollow noreferrer">http://webpack.github.io/docs/usage-with-gulp.html</a>. (I'm not sure how well the <code>webpack-dev-server</code> would fit into my dev environment so would like to stick to <code>gulp-watch</code> if possible.)</p>
  
  <p>Am I missing something that other Webpack users know about? What's the best way to do this?</p>
  
  <p><em>OR</em> is it possible that Webpack is not the right tool for the job?</p>