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

Question

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

app.js - 我所有的代码都在这里捆绑 chunk-vendors.js - 捆绑来自 node_modules 的代码，但有一个例外 vuelayers.js - 用于地图，占用太多 space，并且由于它在单个组件中使用，因此最好与其他所有组件分开加载。

我正在尝试通过外部实现这一点，但我不确定这是正确的方法，因为我仍然想加载本地版本的 VueLayers，而不是通过 CDN。 .

我也试过这样配置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
                },
            }
        }
    }
}