How to configure splitChunks in webpack 4/5 to get separate vendor files?

406 Views Asked by At

Here's my webpack 3 configuraion.


    function isVendorJS(module) {
      if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) return false
      return module.context && module.context.includes('node_modules')
    }

    const plugins = [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'view-vendor',
        chunks: ['view'],
        minChunks: isVendorJS
      }),

      new webpack.optimize.CommonsChunkPlugin({
        name: 'config-vendor',
        chunks: ['configuration'],
        minChunks: isVendorJS
      }),

      new webpack.optimize.CommonsChunkPlugin({
        name: 'common-vendor',
        chunks: ['config-vendor', 'view-vendor'],
        minChunks: 2
      })
    ]

    return {
      entry: {
        view: 'some path',
        configuration: 'some path'
      }
    }

The goal of it is to have 5 files from 2 entry points:

  • entry file A with local modules used by it
  • entry file B with local modules used by it
  • vendor files used only in A
  • vendor files used only in B
  • vendor files used in both

I also need these files to have fixed names so I could import them in my HTML.

There is a simple configuration

splitChunks: {
  chunks: 'all'
}

Makes almost what I need except that a) it includes my local modules into "only A" and "only B" chunks b) it creates dynamic names for them

I searched for several hours and could not find a solution or reach an understanding of how this entire chunks majic works now, so I ask for help.

0

There are 0 best solutions below