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.