Question

我有一个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.mount是执行此操作的最佳位置吗？

在Webpack构建上编译未引用的块

App.vue

0 个答案: