场景我们在开发项目的时候，会遇到一个组件需要加载多个组件。一般情况下，我们会用下面的方式引入：importAfrom'./components/a.vue'importBfrom'./components/b.vue'importCfrom'./components/c.vue'组件:{A,B,C}，或者直接使用异步组件：components:{A:resolve=>require(['./components/a.vue'],resolve),B:resolve=>require(['./components/b.vue'],resolve),c:resolve=>require(['./components/c.vue'],resolve),},只引入三个还可以，但是如果需要引入怎么办许多？代码看起来凌乱，不易维护，也不优雅。今天尝试在webpack中使用require.context，完美解决了这个问题。官方文档其实VUE官方提供了这个方案；传送门的基本用法requires.context接收三个参数：需要查找的文件夹目录（required）是否查找其后代目录，默认为false以匹配文件名这可以通过在我们的组件中引入正则表达式来实现：constrequireComponent=require.context(//其组件目录的相对路径'./components',//是否查询其子目录false,//匹配基础组件的文件名正则表达式/Base[A-Z]\w+\.(vue|js)$/)我们可以在控制台上打印这个requireComponent，我们将得到以下内容：return\_\_webpack\_require\_\_(id);}没仔细看，后面再深挖；应用于项目的代码如下：在libs文件夹下创建requireComponents.js文件/**使用require.context动态导入指定目录下的所有.vue组件并注册为全局组件**/importVuefrom'vue'constrequireAreaComponent=require.context(//其组件目录的相对路径'../view/components/AreaBudgetManagement/ReportsCheckTemplate/childTemplate',//是否查询其子目录false,//正则表达式匹配的文件名基础组件/Base[A-Z]\w+\.(vue|js)$/)constrequireProjectComponent=require.context(//其组件目录的相对路径'../view/components/GroupBudgetManagement/ReportsCheckTemplate/childTemplate',//是否查询其子目录false,//匹配基础组件文件名的正则表达式/基础[A-Z]\w+\.(vue|js)$/)console.log("rrequireProjectComponent",requireProjectComponent)constrequireComp=(r)=>{r.keys().forEach(fileName=>{//获取组件配置constcomponentConfig=r(fileName)//获取组件的PascalCase名称constcomponentName=upperFirst(camelCase(//获取文件名，不考虑目录深度fileName.split('/').pop().replace(/\.\w+$/,'')))//全局注册组件Vue...}//在区域和组中注册详情页的所有组件[requireAreaComponent,requireProjectComponent].forEach(item=>requireComp(item))main.js`import'@/libs/requireComponents'`这个相当于全局注册，当我们需要使用的地方直接使用。require.context还有其他用途，比如在文件夹中查找js文件：constrequireJs=require.context('../api',false,/\.js$/)letfileNames=requireJs.keys();console.log("fileNames",fileNames)打印：希望对还在importfromimportfromimportfromimportfromimportfromimport的同学有所帮助~
