require动态加载_RingCentralTech丨深入理解webpack的require.context

-- src-- index.ts
// index.ts
console.log(123)


// 源码 https://github.com/MeCKodo/require-context-sourece/blob/master/simple-dist/bundle-only-index.js(function(modules) { // webpackBootstrap// The module cachevar installedModules &＃61; {};// The require functionfunction __webpack_require__(moduleId) {// Check if module is in cacheif(installedModules[moduleId]) {return installedModules[moduleId].exports;}// Create a new module (and put it into the cache)var module &＃61; installedModules[moduleId] &＃61; {i: moduleId,l: false,exports: {}};// Execute the module functionmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);// Flag the module as loadedmodule.l &＃61; true;// Return the exports of the modulereturn module.exports;}// expose the modules object (__webpack_modules__)__webpack_require__.m &＃61; modules;// expose the module cache__webpack_require__.c &＃61; installedModules;// define getter function for harmony exports__webpack_require__.d &＃61; function(exports, name, getter) {if(!__webpack_require__.o(exports, name)) {Object.defineProperty(exports, name, {configurable: false,enumerable: true,get: getter});}};// define __esModule on exports__webpack_require__.r &＃61; function(exports) {Object.defineProperty(exports, &＃39;__esModule&＃39;, { value: true });};// getDefaultExport function for compatibility with non-harmony modules__webpack_require__.n &＃61; function(module) {var getter &＃61; module && module.__esModule ?function getDefault() { return module[&＃39;default&＃39;]; } :function getModuleExports() { return module; };__webpack_require__.d(getter, &＃39;a&＃39;, getter);return getter;};// Object.prototype.hasOwnProperty.call__webpack_require__.o &＃61; function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };// __webpack_public_path____webpack_require__.p &＃61; "";// Load entry module and return exportsreturn __webpack_require__(__webpack_require__.s &＃61; "./src/index.ts");})({"./src/index.ts": (function(module, exports) {console.log(&＃39;123&＃39;);})});


// 源码地址 https://github.com/MeCKodo/require-context-sourece/blob/master/simple-dist/webpack-main.js(function(modules) {// 缓存所有被加载过的模块(文件)var installedModules &＃61; {};// 模块(文件)加载器 moduleId 一般就是文件路径function __webpack_require__(moduleId) {// 走 cacheif (installedModules[moduleId]) {return installedModules[moduleId].exports;}// Create a new module (and put it into the cache) 解释比我清楚var module &＃61; (installedModules[moduleId] &＃61; {i: moduleId,l: false,exports: {}});// 执行我们的模块(文件) 目前就是 ./src/index.ts 并且传入 3 个参数modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);// Flag the module as loaded 解释比我清楚module.l &＃61; true;// Return the exports of the module 解释比我清楚return module.exports;}// 开始加载入口文件return __webpack_require__((__webpack_require__.s &＃61; &＃39;./src/index.ts&＃39;));
})({&＃39;./src/index.ts&＃39;: function(module, exports, __webpack_require__) {console.log(&＃39;123&＃39;);}
});


modules &＃61; {&＃39;./src/index.ts&＃39;: function(module, exports, __webpack_require__) {console.log(&＃39;123&＃39;);}
}


--- src--- demos--- demo1.ts--- demo2.tsindex.ts
// index.ts
// 稍后我们通过源码分析为什么这样写
function importAll(contextLoader: __WebpackModuleApi.RequireContext) {contextLoader.keys().forEach(id &＃61;> console.log(contextLoader(id)));
}const contextLoader &＃61; require.context(&＃39;./demos&＃39;, true, /.ts/);
importAll(contextLoader);


// 编译后代码地址 https://github.com/MeCKodo/require-context-sourece/blob/master/simple-dist/contex-sync.js#L82-L113
{
&＃39;./src/demos sync recursive .ts&＃39;: function(module, exports, __webpack_require__) {var map &＃61; {&＃39;./demo1.ts&＃39;: &＃39;./src/demos/demo1.ts&＃39;,&＃39;./demo2.ts&＃39;: &＃39;./src/demos/demo2.ts&＃39;};// context 加载器&＃xff0c;通过之前的模块加载器 加载模块(文件) function webpackContext(req) {var id &＃61; webpackContextResolve(req);var module &＃61; __webpack_require__(id);return module;}// 通过 moduleId 查找模块(文件)真实路径// 个人在这不喜欢 webpack 内部的一些变量命名&＃xff0c;moduleId 它都会编译为 requestfunction webpackContextResolve(req) {// id 就是真实文件路径var id &＃61; map[req];// 说实话这波操作没看懂&＃xff0c;目前猜测是 webpack 会编译成 0.js 1.js 这样的文件 如果找不到误加载就出个 errorif (!(id &＃43; 1)) {// check for number or stringvar e &＃61; new Error(&＃39;Cannot find module "&＃39; &＃43; req &＃43; &＃39;".&＃39;);e.code &＃61; &＃39;MODULE_NOT_FOUND&＃39;;throw e;}return id;}// 遍历得到所有 moduleIdwebpackContext.keys &＃61; function webpackContextKeys() {return Object.keys(map);};// 获取文件真实路径方法webpackContext.resolve &＃61; webpackContextResolve;// 该模块就是返回一个 context 加载器module.exports &＃61; webpackContext;// 该模块的 moduleId 用于 __webpack_require__ 模块加载器webpackContext.id &＃61; &＃39;./src/demos sync recursive .ts&＃39;;
}


&＃39;./src/index.ts&＃39;: function(module, exports, __webpack_require__) {function importAll(contextLoader) {contextLoader.keys().forEach(function(id) {// 拿到所有 moduleId&＃xff0c;在通过 context 加载器去加载每一个模块return console.log(contextLoader(id));});}var contextLoader &＃61; __webpack_require__(&＃39;./src/demos sync recursive .ts&＃39;);importAll(contextLoader);
}