webpack中的require.context

E.g:
    import A from 'components/A'
    import B from 'components/B'
    import C from 'components/C'
    import D from 'components/D'
    ...
    ...    
    components:{
        A, 
        B,
        C,
        D  
    }
    ......

这样很蛋疼，因为每加一个组件，可能都要写这么一句，可以通过自动化完成

1.新建importAll.js文件做自动化处理

importAll.js:


       const importAll = files => {   
             const path = require('path');   
             const modules = {};          
             files.keys().forEach( key => { 
                 const name = path.basename(key, '.vue');
                 modules[name] = files(key).default || files(key)    
             });    
            return modules
        };
        export default importAll
    

2.在需要引入的地方

index.vue:

        import importAll from '@/utils/importAll'
        ...
        ...
        components:importAll(require.context('./',false,/\.vue$/)),

ps:
  require.context有三个参数：
    require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路径useSubdirectories: 是否查找子目录regExp: 要匹配文件的正则