vue如何根据路由划分模块

Question

根据学到的一些知识，了解到webpack会找到所有import()的调用，将传入的参数处理成一个正则，如：

import('./app'+path+'/util') => /^./app.*/util$/ 

上述import参数中的所有变量，都会被替换为【.*】，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。

---

现在假如有以下几个文件，关于多页面vue配置这里假设已经都搭建完成，多个htmlwebpackplugin，多个entry，执行spawnSync执行 shell语句等等，现在假设控制台输入node build a或node build b来生成的dist文件。预想尝试通过设置webpack的process.env.NODE_MODULE来require不同模块分路由打包，因为路由是根据后台数据动态生成，通过后端menu来映射前端文件路径行程路由

_import_a.js 代表a号系统，里面包括属于自己的main函数，app.vue, index.html，还有其他好多开发的页面等等

module.exports = file => import(/* webpackChunkName: "[request]" */ 'views/a' + file + '.vue')

_import_b.js 代表b号系统，里面包括属于自己的main函数，app.vue, index.html，还有其他好多开发的页面等等

module.exports = file => import(/* webpackChunkName: "[request]" */ 'views/a' + file + '.vue')

router.js

const _import = require('_import_' + process.env.NODE_MODULE)
function traverseMenu(menu) {
    if(menu == null || menu.length === 0) {
        return [];
    }
    return menu.map((item) => {
        return {        
            path: item.path,
            component: () => _import(item.component),
            name: item.name,
            icon: item.icon,
            meta: item.meta,
            chidren: traverseMenu(menu.children)
        }
    })
}
Router.addRoutes(traverseMenu(menu));

但是打包出来的每次都是所有，有没有好的解决办法，感谢赐教

---

后续尝试

• 使用switch-case或者通过对象来map来获取无效
• 使用new Function('', 'return require('_import_' + process.env.NODE_MODULE)')()无效
• 使用eval('require')(_import_' + process.env.NODE_MODULE)无效

Answer 1

已经解决，具体做法如下

1. 在vue-cli中使用process.env.VUE_APP_MODULE_ENV, webpack可以在definePlugin中定义，但貌似没有效果，后续在研究
2. 使用require和() => import都可以，关键是要确定你要打包文件路径不能有变量
3. 最重要的一点，不要使用const module = process.env.VUE_APP_MODULE_ENV的表达式，通过下面最朴素的表达式获取，不要使用switch-case

let _import
if(process.env.VUE_APP_MODULE_ENV === 'xx') {
    // _import = () => import('@/modules/a/_import_a')
    _import = require('@/modules/a/_import_a')
} else {
    // ..
}