WebPack学习

98 阅读1分钟

1. webpack打包原理等问题

参考 juejin.cn/post/694346…

2. loader 和 plugin 有什么区别

参考 juejin.cn/post/686178…

3. webpack_require的实现

  • __webpack_modules__存放了编译后的各个文件模块的JS内容,
  • __webpack_module_cache__ 用来做模块缓存。
  • __webpack_require__Webpack内部实现的一套依赖引入函数
  1. 先检查缓存cache是否有该模块,有则返回
  2. 没有则初始化一个新的module,并添加到cache中
  3. 执行该新模块,并返回module.exports
var __webpack_modules__ = ({
    'file-A-path': ((modules) => { 
        // ...
    }) ,
    'index-file-path': ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => { 
        // ... 
    })
}) 

// The module cache 
var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) { 
    // Check if module is in cache 
    var cachedModule = __webpack_module_cache__[moduleId]; 
    if (cachedModule !== undefined) { 
        return cachedModule.exports; 
    } 
    // Create a new module (and put it into the cache) 
    var module = __webpack_module_cache__[moduleId] = { 
        // no module.id needed 
        // no module.loaded needed 
            exports: {} 
    }; 
    // Execute the module function
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    // Return the exports of the module 
    return module.exports; 
}