[英]VueLayers - Using webpack externals for internal files
I'm trying to configure webpack in such a way that it creates 3 files.我正在尝试以创建 3 个文件的方式配置 webpack。
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. app.js - 我的所有代码都被捆绑在一起 chunk-vendors.js - 来自 node_modules 的代码被捆绑在一起,有一个例外 vuelayers.js - 用于地图,占用太多空间,并且因为它在单个组件中使用,理想情况下,它将与其他所有内容分开加载。
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.我正在尝试通过外部实现这一点,但我不确定这是正确的方法,因为我仍然想加载本地版本的 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 . 我看到一些代码示例在挂载事件上动态创建脚本标签,但我希望从 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.我也试过像这样配置webpack,但是当然不行,因为我没有足够的经验。
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
},
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.