I'm trying to configure webpack in such a way that it creates 3 files.
app.js - where all of my code is bundled chunk-vendors.js - where the code from node_modules is bundled, with one exception vuelayers.js - used for maps, takes too much space, and since it's used in a single component, it would be ideally loaded separately from everything else.
I'm trying to achieve this with externals, but I'm not sure that is the correct approach, since I still want to load local version of VueLayers, not over CDN. I saw some code examples dynamically creating script tags on mounted event, but I would like those scripts to be loaded from node_modules.
I also tried to configure webpack like this, but of course it doesn't work, since I don't have enough experience with it.
module.exports = {
configureWebpack: {
output: {
filename: 'app.js',
},
externals:{
moment: 'moment',
'vuelayers': require('vuelayers/lib/index.umd')
},
}
Something like (untested):
module.exports = {
//...
optimization: {
splitChunks: {
cacheGroups: {
chunkVendors: {
name: 'chunk-vendors',
chunks: 'all',
test(module, chunks) {
// `module.resource` contains the absolute path of the file on disk.
return module.resource.includes('node_modules') && !module.resource.includes('vuelayers');
}
priority: -10
},
}
}
}
}