浅读webpack——模块化原理

前言

又是偷懒了快一年。重新回归简书的原因是一位同事百度async原理时，第一篇竟然是我的文章。瞬间腰杆挺直，又坚定了更博的信念。
webpack模块化的原理在网上已经一搜一片。但是对着文章读，始终不是你自己的，切记不能背原理，面试官一深入问，只能嗝屁。

动手

准备2个JS。a.js,b.js。
a.js

let a = require('./b');
a()

b.js

module.exports = function(){
  console.log('hello world')
}

进行webpack编译，生成main.js。
先看看原来的JS都变成什么样了

/* 0 */
(function(module, exports, __webpack_require__) {
  let a = __webpack_require__(1); //b.js变成了1
  a()
}),
/* 1 */
(function(module, exports) {
  module.exports = function(){
    console.log('hello world')
  }
})

1、JS被包在一个函数里，函数提供了module, exports,_webpack_require_参数。
2、原来的require函数变成了_webpack_require_
3、'b.js'文件名变成了模块ID
回过来想也是应该的，浏览器没有module和require，为了不报错，所以需要函数来提供module和require。
再来看下main.js的整体架构

(function(modules) { //自执行函数。module为包裹了函数的a.js,b.js
})([
(function(module, exports, __webpack_require__) {
  console.log(module)
  let a = __webpack_require__(1);
  a()
}),
(function(module, exports) {
  module.exports = function(){
    console.log('hello world')
  }
})
])

整体来说就是个自执行函数。经过处理的a.js,b.js作为参数传入到自执行函数。

function __webpack_require__(moduleId) {
        // 判断模块是否已经缓存过
        if(installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // 没有就初始化一个模块
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };

        //执行被函数包裹后的js
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

        // 记录该模块已经被加载
        module.l = true;

        // 返回 module.exports，比如在b.js中module.exports被函数赋值了 
        return module.exports;
}

到此，捋一下main.js的执行过程
1、_webpack_require_(0)。
2、模块0没有被缓存过，初始化module。
3、从modules数组中取出0模块，即a.js。执行

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

执行_webpack_require_(1)，加载b.js。
4、_webpack_require_函数return module.exports。在b.js中

module.exports = function(){
  console.log('hello world')
}

module.exports已经被赋值，所以得到函数
5、至此，依赖加载完毕,代码也执行完成。
同理再看下ES6的Module
a.js

import a from './b'
function c(){
    a()
}
export default c

b.js

export default function(){
    console.log('hello world')
}

进行webpack编译，生成main.js。
看下原来的JS编译后的样子

[
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./b.js
var b = (function(){
    console.log('hello world')
});
// CONCATENATED MODULE: ./a.js
function c(){
    b()
}
 var a = __webpack_exports__["default"] = (c);
 })
]

在commonjs下，数组长度为2。但在ES6规范下，数组长度是1。exports被剥掉，直接将2个JS粘合在了一起
_webpack_require_.r

  // define __esModule on exports
__webpack_require__.r = function(exports) {
  if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  }
  Object.defineProperty(exports, '__esModule', { value: true });
};

标记了这个模块属于ES6 Module。
其他都和commonjs一致，从_webpack_require_(0)开始

最后，给自己留个问题
为什么commonjs数组分开，而ES module却直接粘合在一起。

最后编辑于：2020.05.26 20:13:22