我有一个Vue / Webpack项目，它包含一个核心应用程序和一组品牌模块 . 这些模块不仅仅是一个标志和一个主题;它们包括一组默认存储值，以及要使用的路径/视图的定义 .

整个捆绑在一个s3桶中，我们屏蔽重定向各个URL以指向它 . 当用户登陆网站时：1）核心应用程序被加载，2）它查看域以确定需要哪个品牌模块，以及3）它对相应模块执行异步请求 .

我的代码目前看起来像这样：

App.vue

...
.mounted () {
    if (this.$route.params.sitename === 'strawberry') {
        import(/* webpackChunkName: "strawberry" */ '@/strawberry');
    }
    else if (this.$route.params.sitename === 'chocolate') {
        import(/* webpackChunkName: "chocolate" */ '@/chocolate');
    }
    else {
        import(/* webpackChunkName: "vanilla" */ '@/vanilla');
    }
}

理想情况下，我会用以下内容替换上面的内容：

...
.mounted () {
    import('@/' + this.$route.params.sitename);
}

但是如果我没有明确列出所有可能的导入，webpack将不会在构建时编译这些块 .

那么，这样的事情可能吗？有没有办法给webpack一个未引用的文件列表，以便在构建时编译？如果是这样，我如何在我的代码中引用它们？它会自动匹配 @/strawberry 与 strawberry.chunk 吗？

不太重要的后续行动：app.mounted是最好的地方吗？

vue.js webpack webpack-4