How can I force individually required lodash modules into a vendor chunk with webpack?
<p>I am requiring lodash modules individually, so that my JS build contains only the lodash code that I need (e.g. <code>import map from 'lodash/map'</code> instead of <code>import _ from 'lodash'</code>. (Actually, I'm using <a href="https://www.npmjs.com/package/babel-plugin-lodash" rel="nofollow">babel-plugin-lodash</a> to automate this.) So nowhere in the code do I actually import the whole of <code>'lodash'</code>.</p>

<p>I would like webpack to put any lodash code that needs to be included into a vendor bundle. Following <a href="https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code" rel="nofollow">the webpack examples out there</a> for splitting vendor and app bundles, I know how to include <em>all</em> of lodash in the vendor bundle (using the CommonsChunkPlugin). But I don't want to just use <code>'lodash'</code> as an entry point and pull in the whole library. Instead, I want to make all the modules that I actually import that start with <code>lodash</code> to end up in the vendor bundle.</p>

<p>Any ideas?</p>

<p><strong>Addition</strong></p>

<p>The situation is further complicated by the fact that I build 3 bundles for each app: a vendor bundle, a bundle of stuff common across apps (which will use lodash modules), and the app-specific code (which will also use lodash modules).</p>

<p>Here are the key parts of my webpack config:</p>

<pre><code>// ...
entry: {
  specificApp: specificAppEntry,
  appCommon: [appCommonEntry],
  vendor: [listOfVendorJsLibraries],
},
// ...
plugins : [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['appCommon', 'vendor'],
    minChunks: Infinity,
  }),
  // ...
],
// ...
</code></pre>