How can I force individual lodash modules into a vendor chunk using webpack?

Question

I need lodash modules separately, so my JS assembly contains only the lodash code I need (for example, import map from 'lodash/map'instead import _ from 'lodash'. (Actually, I use babel-plugin-lodash to automate this.) So I haven’t actually imported everything anywhere in the code 'lodash'.

I would like webpack to put any lodash code that should be included with the provider. Following the examples of a web package for separating provider and application packages, I know how to include all lodash in a provider package (using CommonsChunkPlugin). But I do not want to just use it 'lodash'as an entry point and pull out the entire library. Instead, I want all the modules that I imported to start with lodashto get into the vendor kit.

Any ideas?

Adding

The situation is further complicated by the fact that I create 3 packages for each application: a set of providers, a set of applications common for applications (which will use lodash modules) and application code (which will also use lodash).

Here are the key parts of my webpack configuration:

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

Answer 1

minChunks : https://webpack.imtqy.com/docs/list-of-plugins.html#commonschunkplugin

, , node_modules/lodash.

. , , node_modules vendor:

import path from 'path'

import webpack from 'webpack'

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module, count) {
    return (
      module.resource &&
      module.resource.indexOf(path.resolve('node_modules')) === 0
    )
  }
})

---

CommonsChunkPlugin, :

  minChunks: function(module, count) {
    return module.resource && module.resource.indexOf('lodash') !== -1
  }