webpack require.context实现自动动态加载组件

简化import  或者export各种模块

require.context(directory,useSubdirectories,regExp)

1 directory 要查找的文件路径

2 useSubDirectories 是否查找子目录

3 regExp  要匹配文件的正则

require.context('',true,/.js$/);

返回：

var map = {
    "./A.js": "./src/components/test/components/A.js",
    "./B.js": "./src/components/test/components/B.js",
    "./C.js": "./src/components/test/components/C.js",
    "./D.js": "./src/components/test/components/D.js"
};


function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    var id = map[req];
    if(!(id + 1)) { // check for number or string
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    }
    return id;
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/components/test/components sync recursive \.js$";

reuqire.context()返回webpackContext，有两个静态方法keys和resolove，一个id属性。

keys 返回匹配成功模块的名字组成的数组

resolve 接受一个参数request，request为test文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径

const ctx = require.context('./components/', true, /.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]

demo：

global.js   在main.js中引入
import Vue from 'vue';
function changeStr(str){return str.chartAt(0).toUpperCase()+str.slice(1)}
const requireComponent=require.context('./',false,/.vue$/);

const install=()=>{
requireComponent.keys().forEach(fileName=>{
let config=requireComponent(fileName);
let componentName=changeStr(fileName.replace(/^.//,'').replace0(/.w+$//,''));
Vue.component(componentName,config.default||config);
});
}
export default{install}