webpack的require

应用webpack整理文件和node处理文件

序言

伴随着新项目扩大，会把一个大控制模块分为小控制模块，然后应用import导进，少量控制模块也许不费劲费力，可是当新项目扩大以后，将会是一个很大的难题，那么我们有方法去解决这些问题吗？

不出所料，自然就是有些。webpack的require.context. 一开始大家也许会那样：

import Vue from 'vue'
import a from './components/a.vue'
import b from './components/b.vue'
import c from './components/c.vue'
import d from './components/d.vue'

Vue.components(a.name,a)
Vue.components(b.name,b)
Vue.components(c.name,c)
Vue.components(d.name,d)

require.context是何许人也？

require.context是webpack编译程序所提供的一个作用，可以帮助大家掌握到某一文件夹名称中的文档，甚至子文件文件。

require.context(directory:String, includeSubdirs:Boolean /* 可供选择的，初始值是 true */, filter:RegExp /* 可供选择的 */)

• directory:也是需要获取文件的路线
• includeSubdirs：是不是查找根目录
• filter：查找怎么样的文档，一般使用正则表达式

按这个复写刚刚我们自己的事例就要这样：

import { createApp } from 'vue'
import App from './App.vue'
const path = require('path')
const list = require.context('./views/components', false, /\.vue$/);
const app= createApp(App)
list.keys().forEach(element => {
    const com = list(element)
    console.log(path.basename(element,'.vue'))
    app.component(path.basename(element,'.vue'), com.default)
});
app.mount('#app')

那是不是简易很多了啦？

返回list是啥

大家在控制面板直接打印的可以看到解决代码，是这样子：

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


function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
function webpackContextResolve(req) {
if(!__webpack_require__.o(map, req)) {
var e = new Error("Cannot find module '"   req   "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
}
return map[req];
}
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src/views/components sync \\.vue$";

从编码中可以看到，map目标里的是我们储放元件的详细地址。实行require.context给大家回到了webpackContext函数公式，最后我们启用了 静态方法keys(),keys()将map对象键取出，如：

后边极致循环系统这一二维数组，并用path.basename取下文件夹名称。最后我们实行list这一函数公式并把文件夹名称传进来（刚才说到实行require.context会回到一个函数）,其实就是运行代码里的webpackContext()函数公式，再执行webpackContextResolve函数公式回到文档的路线，再用__webpack_require__导进这一文档。 直接打印的信息是这样子：

第一次以外还提供2个方法与一个特性：

• keys():回到配对取得成功的名称二维数组
• resolve(): 回到主要参数相匹配模块途径