基本概念
完整的手写webpack原理请看
大家一键三连后就可以观看了
如何实现模块打包
网络异常，图片无法展示
|
A模块 a.js
// a.js const time = Date.now() module.exports = 'A:' + time
入口index.js
// index.js const a = require("./a"); console.log(a);
运行webpack打包
npx webpack
网络异常，图片无法展示
|
- 整体使用自运行函数 - 任何变量不污染全局
- 变量 o 为模块集合
var o = { // 原来的a.js 85: (o) => { const r = Date.now(); o.exports = "A:" + r; }, },
- function t 为exports、require模拟函数
r = {}; // 模拟exports对象 function t(e) { // 模拟require函数 var n = r[e]; if (void 0 !== n) return n.exports; var s = (r[e] = { exports: {} }); return o[e](s, s.exports, t), s.exports; }
- 入口为自执行函数 引用o 、t变量形成闭包
(() => { const o = t(85); console.log(o); })();
- 由于function t 是变量提升的所以 require函数也可以在子模块里调用 - 这个大家可以自己实验一下。
面试攻略
- 无
点评
- 闭包处处都有，但是能说出经典应用又是一个难题。说Helloworld和背题没啥区别。
