VueLayers - Using webpack externals for internal files

Question

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')

    },
}

Answer 1

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
                },
            }
        }
    }
}