Day13 - 闭包应用6 - 构建器打包webpack

全栈然叔
3,023 阅读2分钟

基本概念

完整的手写webpack原理请看

大家一键三连后就可以观看了

🔥 📺 手写webpack

做了一夜动画，让大家十分钟搞懂Webpack

如何实现模块打包

image-20220113184134338

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

image-20220113194430343

  • 整体使用自运行函数 - 任何变量不污染全局
  • 变量 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和背题没啥区别。

365天打卡记录

🔥 创作不易、大家帮然叔 B栈 一键三连

avatar
文章
阅读
粉丝