Webpack原理整理（一）模块化原理

演示项目样例介绍

        这次来介绍下webpack模块化的原理，这次以commonJS模块化为例，先来看看项目的目录结构是怎样的。

         我们再来看看主要的内容，项目的内容非常简单，在index.js中用commonJS模块引入的方法，引入了一个js文件夹下common.js导出的 mul 乘法函数。

进行打包，查看模块化原理        

        我们进行npm run build打包（package.json）script中的build字段要改为webpack打包哦。但是我们打包后的代码会默认的进行一个压缩和丑化。我们可以在我们webpack.config.js文件中进行source-map的设置。

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    devtool: 'source-map',
}

        它能够帮助我们将压缩和丑化的代码映射回原来的代码。这时候我们就可以到打包后的文件中查看源码进行学习了。

        源码中有很多备注和格式复杂，我将一些不必要的东西删除，配合注释整理如下，新手也能很容易看懂。

//将模块引用的信息存储在一个对象中
//key为路径信息，value为模块内容封装的函数
var __webpack_modules__ = {
  "./src/js/common.js":
    (function (module) {
      const mul = (n1, n2) => {
        return n1 * n2
      }
      module.exports = {
        mul
      }
    })
}

//用作缓存的一个对象
var __webpack_module_cache__ = {};

//获取模块内容的函数，moduleId为对象引用的路径
function __webpack_require__(moduleId) {
  //先去缓存对象中查询
  var cachedModule = __webpack_module_cache__[moduleId];
  //如果缓存命中，cachedModule不为undefined，直接返回内容
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  //定义一个含有exports属性的对象，同时缓存起来
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  //去储存模块引用信息的对象中查找
  //第一个参数module为上一步注册的对象
  //其中的exports用来接收模块中module.export语法导出的内容，这也是为什么要创建这么个对象
  //后两个参数在这个简单的例子中，用不上，我们主要理解模块化的原理
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  //返回内容
  return module.exports;
}

//!function(){}()是一个立即执行的一个语法，这也是这个打包程序的入口
!function () {
  //调用__webpack_require__函数，传入引用路径获取模块内容
  const { mul } = __webpack_require__("./src/js/common.js");
  console.log(mul(10, 20));
}();

        这就是webpack中commonJS模块化的一个原理啦，我上面注释解释的很详细啦。最后再附上ES6模块化打包的代码，我就不注释了，也不难的，可以试着读一读。

 

"use strict";
var __webpack_modules__ = {
  "./src/js/main.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        "sum": function () { return sum; }
      });
      const sum = (n1, n2) => {
        return n1 + n2
      }
    })
}
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
  var cachedModule = __webpack_module_cache__[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  return module.exports;
}

!function () {
  __webpack_require__.d = function (exports, definition) {
    for (var key in definition) {
      if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
        Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();

!function () {
  __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

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

var __webpack_exports__ = {};
!function () {
  __webpack_require__.r(__webpack_exports__);
  var _js_main_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/main.js");
  console.log((0, _js_main_js__WEBPACK_IMPORTED_MODULE_0__.sum)(10, 20));
}();