294 - 《Toy Webpack Runtime》

实现了一个简化版的 Webpack Runtime，以下是笔记和代码。

介绍下 Webpack Runtime。 构建工具通常都会需要搭配一套 Runtime 把构建产物跑起来，这个 Runtime 可以很简单，比如 toy-bundler、Rollup、ESBuild，也可以很复杂，比如 Webpack。之所以复杂，是因为，1）他牵连了很多功能，包括 Code Splitting、HMR、MF、CSS 加载和 HMR 等，2）他需要和编译时搭配使用，比如 webpack 的 publicPath 就来自 node 环境的配置项；3）Webpack 还在 Runtime 里引入的插件机制，通过插件挂载的方式支持 Code Splitting、HMR、MF 等，看起来特别绕，4）换个地方 resovle promise 的编写方式也让逻辑更绕，let l; let p = new Promise(resolve => l = resolve); await p; l()，5）为了让代码更小，有大量简写。

以下是部分简写对照表。

• __webpack_require__.i module execution interceptor
  • handle({ id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ })
  • 注入 hmr 处理用
• __webpack_require__.m modules（require 前的 factory）
• __webpack_require__.c cache（require 后的）
• __webpack_require__.f
  • .j
  • .jsonpHmr
  • .remotes
• __webpack_require__.e
  • 调每个 __webpack_require__.f 子属性函数，通过 __webpack_require__.f[key](chunkId, promises) 补充 promises，然后 Promise.all 执行
• __webpack_require__.a
• __webpack_require__.r define __esModule on exports
• __webpack_require__.o 是否有值
• __webpack_require__.l 加载 url 为 script，并绑定 done 函数
  • url 要拼 __webpack_require__.p （publicPath） 和 __webpack_require__.u(chunkId)
  • 加载之后等 webpackJsonpCallback
• __webpack_require__.u 是啥？
  • 函数，返回 chunkId + .async.js
• __webpack_require__.d(exports, definition) define getter functions for harmony exports
• __webpack_require__.n 返回 getDefaultExport 方法
• __webpack_re