1条回答我要回复

    樱木1220天前

      在官方定义中,Webpack 是一个现代 Javascript 应用静态模块打包器。它统一了 Javascript 在发展过程中出现的各种模块化方案,我们可以认为 Webpack 是 Javascript 模块化的统一解决方案。

      如果有对 Javascript 各种模块化方案还不是很了解的小伙伴,建议阅读《Javascript 模块的发展史》。

      在 Webpack 对源代码的编译过程中,包含了一个模块打包的工作,其实就是 Webpack 从入口文件开始,逐级地将源代码中各个模块的依赖关系分析出来,输入最终的打包文件。

      接下来让我们以 CommonJS 和 ES6 的模块机制为例,来更深入地理解 Webpack 的模块打包机制。

      如下 webpack.config.js 的简单配置,在下述例子中,都是以该配置为准的。// webpack.config.js
      const path = require('path');

      module.exports = {
      entry: './src/index.js',
      output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
      },
      mode:'development'
      };
      CommonJS

      在 CommonJS 的模块机制中,使用 require 引入模块,module.exports/exports 输出模块。

      模块文件 bar.js 和入口文件 index.js 分别如下:
      // src/bar.js
      var num = 1;
      function addNum(){
      num++;
      }

      module.exports = {
      num: num,
      addNum: addNum
      }
      // src/index.js
      var bar = require('./bar.js');

      console.log(bar.num) // 1
      bar.addNum();
      console.log(bar.num); // 1
      运行 webpack 命令后,我们可得到最终的输出文件 bundle.js,最终生成的 bundle.js 文件中的内容实际上是一个自执行函数,其传入的参数 modules 对象包含了入口文件以及各个依赖模块,形式如下:{
      "./src/bar.js":(function (module, exports) {}),
      "./src/index.js":(function (module, exports, __webpack_require__) {})
      }
      在 modules 对象中,各个属性名为文件路径字符串,属性值为一个函数,其中包含了文件源代码中的内容,而源代码中的引入输出功能则是通过自定义的方式来实现的。

      其中的关键便是 __webpack_require__ 方法:var installedModules = {};
      // The require function
      function __webpack_require__(moduleId) {
      // Check if module is in cache
      if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
      }
      // Create a new module (and put it into the cache)
      var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
      };
      // Execute the module function
      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
      // Flag the module as loaded
      module.l = true;

      // Return the exports of the module
      return module.exports;
      }
      __webpack_require__ 方法接收模块唯一的 moduleId 作为参数,其主要做了以下几件事:
      判断该模块是否存在缓存对象中,若是则返回缓存对象中对应模块,若否则定义模块对象并存储进缓存对象中; 执行 modules 对象中对应模块的函数(在函数中会将该模块输出的内容存储进 module.exports 中); 返回该模块 module.exports
      所以,在最终生成的自执行函数中,除了对一些变量、方法的定义外,其最终返回了对入口文件的引用:return __webpack_require__(__webpack_require__.s = "./src/index.js");
      接下来便会按我们的预期去执行 __webpack_require__ 函数,传入的 moduleId 为 ./src/index.js,所以会执行 modules 对象中相应的属性值函数:// modules 对象中 ./src/index.js 对应函数
      (function(module, exports, __webpack_require__) {
      eval("// src/index.jsnvar bar = __webpack_require__(/*! ./bar.js */ "./src/bar.js");nnconsole.log(bar.num) // 1nbar.addNum();nconsole.log(bar.num); // 1nn//# sourceURL=webpack:///./src/index.js?");
      })
      可以看到,在该函数中使用自定义的 __webpack_require__ 方法去替代了 CommonJS 中的 require 方法引入 bar.js 模块,并执行相应代码。
      而在引入 ./src/bar.js 所对应的属性值函数时,也会执行函数内的代码:// modules 对象中 ./src/bar.js 对应函数
      (function(module, exports) {
      eval("var num = 1;nfunction addNum() {n num++;n}nnmodule.exports = {n num: num,n addNum: addNumn}nn//# sourceURL=webpack:///./src/bar.js?");
      })
      我们会发现该函数的实际内容与 bar.js 模块的内容是一模一样的,但实际上不同的是函数中 module.exports 并不是属于 CommonJS 模块的语法,而是函数中传进来的 module 对象的属性,这个 module 是 Webpack 中自定义的模块对象,形式如下:var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
      };
      在 Webpack 中正是通过这种方式实现模块内容的输出。

      至此,Webpack 已经实现了 CommonJS 模块的引入输出功能,接下来我们再来深究 CommonJS 模块输出的一个特性:CommonJS 模块输出的是值的缓存,不存在动态更新。

      上述的例子,在 index.js 文件中先输出 num 的值,然后再调用 addNum 方法,最后再输出 num 的值,会发现 num 的值没有改变。因为 addNum 方法改变的是 bar.js 中 num 的值,而在 bar.js 中的输出是以浅拷贝的方式。

      所以,在执行 ./src/bar.js 对应属性值函数时,可以发现如下代码:module.exports = {n num: num,n addNum: addNumn}
      这也表明了在 Webpack 中模块的输出实现方式依旧遵循 CommonJS 模块输出的特性,输出其实是以浅拷贝的方式来实现的(注意这点,会与下述 ES6 中的 export 输出的特性做比较)。
       
      ES6
      在 ES6 模块化方案中,使用 import 引入模块,export 或 export default 输出模块。

      export
      // src/bar.js
      var num = 1;
      function addNum(){
      num++;
      }

      export { num, addNum }
      // src/index.js
      import { num, addNum } from './bar.js';

      console.log(num) // 1
      addNum();
      console.log(num); // 2
      运行 webpack 命令后,同样地输出一个 bundle.js 文件,在 bundle.js 文件中同样是一个自执行函数,与 CommonJS 模块打包出来的文件基本上是一致的,不同的是在 modules 对象中对应的属性值函数不同。

      ES6 模块机制中输出的特性是:export 语句输出的接口,与其对应的值是动态绑定关系。

      在 modules 对象 中 ./src/index.js 对应的属性值函数为:// modules 对象中 ./src/index.js 对应函数
      (function (module, __webpack_exports__, __webpack_require__) {
      "use strict";
      eval("__webpack_require__.r(__webpack_exports__);n/* harmony import */ var _bar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar.js */ "./src/bar.js");nnnconsole.log(_bar_js__WEBPACK_IMPORTED_MODULE_0__["num"]) // 1nObject(_bar_js__WEBPACK_IMPORTED_MODULE_0__["addNum"])();nconsole.log(_bar_js__WEBPACK_IMPORTED_MODULE_0__["num"]); // 2nn//# sourceURL=webpack:///./src/index.js?");
      })
      ./src/bar.js 对应的属性值函数为:// modules 对象中 ./src/bar.js 对应函数
      (function (module, __webpack_exports__, __webpack_require__) {
      "use strict";
      eval("__webpack_require__.r(__webpack_exports__);n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "num", function() { return num; });n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addNum", function() { return addNum; });nvar num = 1;nfunction addNum() {n num++;n}nnnn//# sourceURL=webpack:///./src/bar.js?");
      })
      可以看出其不是直接通过 module.exports 浅拷贝的方式来实现的,而是通过一个 __webpack_require__.d 方法来实现:__webpack_require__.d = function (exports, name, getter) {
      if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
      }
      };
      该方法主要是直接通过定义对象属性的 getter,来实现对引入变量的访问仍是原先模块的内部变量。

      而为什么仅仅定义了 getter 而不定义 setter 呢,是因为在 ES6 模块中,import命令输入的变量都是只读的,因为它的本质是输入接口;如果引入对变量是一个对象,改写变量的属性则是允许的。

      export default
      // src/bar.js
      var num = 1;
      function getNum(){
      return num;
      }

      export default getNum
      // src/index.js
      import getNum from './bar.js';

      console.log(getNum()) // 1
      同样的执行 webpack 命令打包得到 bundle.js。

      在 modules 对象 中 ./src/index.js 对应的属性值函数为:// modules 对象中 ./src/index.js 对应函数
      (function (module, __webpack_exports__, __webpack_require__) {
      "use strict";
      eval("__webpack_require__.r(__webpack_exports__);n/* harmony import */ var _bar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar.js */ "./src/bar.js");nnnconsole.log(Object(_bar_js__WEBPACK_IMPORTED_MODULE_0__["default"])()) // 1nnn//# sourceURL=webpack:///./src/index.js?");
      })
      在 modules 对象 中 ./src/bar.js 对应的属性值函数为:// modules 对象中 ./src/bar.js 对应函数
      (function (module, __webpack_exports__, __webpack_require__) {
      "use strict";
      eval("__webpack_require__.r(__webpack_exports__);nvar num = 1;nfunction getNum(){n return num;n}nn/* harmony default export */ __webpack_exports__["default"] = (getNum);nn//# sourceURL=webpack:///./src/bar.js?");
      })
      对于 export.default 来说,其特性与 CommonJS 类似,输出也是以浅拷贝的方式来进行的,不同的是其是存储在 module.exports 中的 default 属性中的,而在入口文件中则是通过对象的 default 属性来访问的。

       

    请先登录后,再回复