Vue 引入指定目录文件夹所有的组件 require.context

require.context

• require.context是webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块，包含目录下所有的模块的引用，同构正则表达式匹配,然后require进来

使用场景

• 我们在一个业务模块的list中要使用components下所有组件，手动一个一个引入如下图
  
  

-改善，使用 require.context 引入

// 导入所有组件
// 以 "dialog-" 开头,以".vue"结尾
const allComponents = require.context('./components', false, /^dialog.*\.vue$/)
let res_components = {}
allComponents.keys().forEach(fileName => {
  let comp = allComponents(fileName)
  res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default {
  name: 'purchase',
  components: res_components,
}
</script>