VueLayers - 对内部文件使用 webpack 外部

Question

我正在尝试以创建 3 个文件的方式配置 webpack。

app.js - 我的所有代码都捆绑在一起 chunk-vendors.js - 来自 node_modules 的代码被捆绑在一起，有一个例外 vuelayers.js - 用于地图，占用太多空间，而且由于它在单个组件中使用，理想情况下它应该与其他所有内容分开加载。

我正在尝试通过外部实现这一点，但我不确定这是正确的方法，因为我仍然想加载本地版本的 VueLayers，而不是通过 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.

我也尝试过这样配置webpack，但是当然不行，因为我没有足够的经验。

module.exports = {

configureWebpack: {

    output: {

        filename: 'app.js',

    },

    externals:{

        moment: 'moment',

        'vuelayers': require('vuelayers/lib/index.umd')

    },
}

Answer 1

类似的东西（未经测试）：

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