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

·  阅读 1375

基本概念

完整的手写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栈 一键三连

分类:
前端
分类:
前端