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

    },
}

I would suggest you take a look at https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest this would allow you to specify exactly what is included in your chunk-vendors.js (that way you can exclude anything matching vuelayers) — Herz3h, Jul 08 '20 at 10:59

score 0 · Accepted Answer · answered Jul 08 '20 at 13:17

0

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

answered Jul 08 '20 at 13:17

Herz3h

614
5
20

I tried this, and now I get everything bundled in app.js, no chunk-vendors at all – domaci_a_nas Jul 09 '20 at 07:57
Try removing the priority, don't think it's needed. – Herz3h Jul 09 '20 at 08:36
1

You placed me on the right track. What I ended up doing is changing the name to 'large-modules', and setting test function to include only vuelayers and ol from node_modules. Thanks, problem solved. – domaci_a_nas Jul 09 '20 at 09:53

VueLayers - Using webpack externals for internal files

1 Answers1