Webpack模块化原理和SourceMap

写作不易，未经作者允许禁止以任何形式转载！
如果觉得文章不错，欢迎关注、点赞和分享！
掘金原文链接

Webpack 模块化

• Webpack 打包的代码，允许我们使用各种各样的模块化，但是最常用的是 CommonJS、ES Module。

• 包括如下原理:

  • CommonJS 模块化实现原理;
  • ES Module 实现原理;
  • CommonJS 加载 ES Module 的原理;
  • ES Module 加载 CommonJS 的原理;

CommonJS：

打包前

const { dateFormat, priceFormat } = require('./js/format');

console.log(dateFormat('abc'));
console.log(priceFormat('abc'));

打包后

// 定义了一个对象
// 模块的路径(key): 函数(value)
var __webpack_modules__ = {
  './src/js/format.js': function (module) {
    const dateFormat = (date) => {
      return '2020-12-12';
    };
    const priceFormat = (price) => {
      return '100.00';
    };

    // 将我们要导出的变量, 放入到module对象中的exports对象
    module.exports = {
      dateFormat,
      priceFormat,
    };
  },
};

// 定义一个对象, 作为加载模块的缓存
var __webpack_module_cache__ = {};

// 是一个函数, 当我们加载一个模块时, 都会通过这个函数来加载
function __webpack_require__(moduleId) {
  // 1.判断缓存中是否已经加载过
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }

  // 2.给module变量和__webpack_module_cache__[moduleId]赋值了同一个对象
  var module = (__webpack_module_cache__[moduleId] = { exports: {} });

  // 3.加载执行模块
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // 4.导出module.exports {dateFormat: function, priceForamt: function}
  return module.exports;
}

// 具体开始执行代码逻辑
!(function () {
  // 1.加载./src/js/format.js
  const { dateFormat, priceFormat } = __webpack_require__('./src/js/format.js');
  console.log(dateFormat('abc'));
  console.log(priceFormat('abc'));
})();

ES Module

打包前

import { sum, mul } from './js/math';

console.log(mul(20, 30));
console.log(sum(20, 30));

打包后

// 1.定义了一个对象, 对象里面放的是我们的模块映射
var __webpack_modules__ = {
  './src/es_index.js': function (
    __unused_webpack_module,
    __webpack_exports__,
    __webpack_require__
  ) {
    // 调用r的目的是记录时一个__esModule -> true
    __webpack_require__.r(__webpack_exports__);

    // _js_math__WEBPACK_IMPORTED_MODULE_0__ == exports
    var _js_math__WEBPACK_IMPORTED_MODULE_0__ =
      __webpack_require__('./src/js/math.js');

    console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.mul(20, 30));
    console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.sum(20, 30));
  },
  './src/js/math.js': function (
    __unused_webpack_module,
    __webpack_exports__,
    __webpack_require__
  ) {
    __webpack_require__.r(__webpack_exports__);

    // 调用了d函数: 给exports设置了一个代理definition
    // exports对象中本身是没有对应的函数
    __webpack_require__.d(__webpack_exports__, {
      sum: function () {
        return sum;
      },
      mul: function () {
        return mul;
      },
    });

    const sum = (num1, num2) => {
      return num1 + num2;
    };
    const mul = (num1, num2) => {
      return num1 * num2;
    };
  },
};

// 2.模块的缓存
var __webpack_module_cache__ = {};

// 3.require函数的实现(加载模块)
function __webpack_require__(moduleId) {
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }
  var module = (__webpack_module_cache__[moduleId] = {
    exports: {},
  });
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  return module.exports;
}

!(function () {
  // __webpack_require__这个函数对象添加了一个属性: d -> 值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
  __webpack_require__.o = function (obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
  };
})();

!(function () {
  // __webpack_require__这个函数对象添加了一个属性: r -> 值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 });
  };
})();

__webpack_require__('./src/es_index.js');

ES Module 和 CommonJS 混合导入导出

打包前

// es module导出内容, CommonJS导入内容
const { sum, mul } = require('./js/math');

// CommonJS导出内容, es module导入内容
import { dateFormat, priceFormat } from './js/format';

console.log(sum(20, 30));
console.log(mul(20, 30));

console.log(dateFormat('aaa'));
console.log(priceFormat('bbb'));

console.log(abc);

打包后

var __webpack_modules__ = {
  './src/index.js': function (
    __unused_webpack_module,
    __webpack_exports__,
    __webpack_require__
  ) {
    'use strict';
    __webpack_require__.r(__webpack_exports__);
    var _js_format__WEBPACK_IMPORTED_MODULE_0__ =
      __webpack_require__('./src/js/format.js');
    var _js_format__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(
      _js_format__WEBPACK_IMPORTED_MODULE_0__
    );

    // es module导出内容, CommonJS导入内容
    const math = __webpack_require__('./src/js/math.js');

    // CommonJS导出内容, es module导入内容
    console.log(math.sum(20, 30));
    console.log(math.mul(20, 30));
    console.log(
      _js_format__WEBPACK_IMPORTED_MODULE_0___default().dateFormat('aaa')
    );
    console.log(
      _js_format__WEBPACK_IMPORTED_MODULE_0___default().priceFormat('bbb')
    );
  },
  './src/js/format.js': function (module) {
    const dateFormat = (date) => {
      return '2020-12-12';
    };
    const priceFormat = (price) => {
      return '100.00';
    };
    module.exports = {
      dateFormat,
      priceFormat,
    };
  },

  './src/js/math.js': function (
    __unused_webpack_module,
    __webpack_exports__,
    __webpack_require__
  ) {
    __webpack_require__.r(__webpack_exports__);
    __webpack_require__.d(__webpack_exports__, {
      sum: function () {
        return sum;
      },
      mul: function () {
        return mul;
      },
    });
    const sum = (num1, num2) => {
      return num1 + num2;
    };

    const mul = (num1, num2) => {
      return num1 * num2;
    };
  },
};

var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {
  // Check if module is in cache
  if (__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].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;
}

!(function () {
  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function (module) {
    var getter =
      module && module.__esModule
        ? function () {
            return module['default'];
          }
        : function () {
            return module;
          };
    __webpack_require__.d(getter, { a: getter });
    return getter;
  };
})();

/* webpack/runtime/define property getters */
!(function () {
  // define getter functions for harmony exports
  __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],
        });
      }
    }
  };
})();

/* webpack/runtime/hasOwnProperty shorthand */
!(function () {
  __webpack_require__.o = function (obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
  };
})();

/* webpack/runtime/make namespace object */
!(function () {
  // 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 });
  };
})();

__webpack_require__('./src/index.js');

总结

原理都是类似的

1. 通过一个 webpack_module 对象来存储模块化代码
   • key 为文件名称
   • value 为文件代码
2. 通过 webpack_module_cache 来缓存模块化代码
3. 通过 webpack_require 来从 webpack_module_cache 或 webpack_module 中读取并从引入代码

认识 Source-Map

参考文档

• 我们的代码通常运行在浏览器上时，是通过打包压缩的:

  • 也就是真实跑在浏览器上的代码，和我们编写的代码其实是有差异的;
  • 比如 ES6 的代码可能被转换成 ES5;
  • 比如对应的代码行号、列号在经过编译后肯定会不一致;
  • 比如代码进行丑化压缩时，会将编码名称等修改;
  • 比如我们使用了 TypeScript 等方式编写的代码，最终转换成 JavaScript;

• 通过 SourceMap 可以调试这种转换后不一致的代码

  • source-map 是从已转换的代码，映射到原始的源文件;
  • 使浏览器可以重构原始源并在调试器中显示重建的原始源;
  • 更容易定位到源文件错误

如何使用 SourceMap

• 第一步:根据源文件，生成 source-map 文件，webpack 在打包时，可以通过配置生成 source-map;

  devtool:'source-map'

• 第二步:在转换后的代码，最后添加一个注释，它指向 sourcemap;

  //# sourceMappingURL=common.bundle.js.map

• 浏览器会根据我们的注释，查找相应的 source-map，并且根据 source-map 还原我们的代码，方便进行调试。

• 在 Chrome 中，我们可以按照如下的方式打开 source-map:

  • √Enable JavaScript source maps
  • √Enable CSS source maps

• 最初 source-map 生成的文件带下是原始文件的 10 倍，第二版减少了约 50%，第三版又减少了 50%，所以目前一个 133kb 的文件，最终的 source-map 的大小大概在 300kb。

• 目前的 source-map 长什么样子？

  • version:当前使用的版本，也就是最新的第三版;
  • sources:从哪些文件转换过来的 source-map 和打包的代码(最初始的文件);
  • names:转换前的变量和属性名称(因为目前使用的是 development 模式，所以不需要保留转换前的名称);
  • mappings:source-map 用来和源文件映射的信息(比如位置信息等)，一串 base64 VLQ(veriable- length quantity 可变长度值)编码;
  • file:打包后的文件(浏览器加载的文件);
  • sourceContent:转换前的具体代码信息(和 sources 是对应的关系);
  • sourceRoot:所有的 sources 相对的根目录;

生成 SourceMap

如何在使用 webpack 打包的时候，生成对应的 source-map?

• webpack 为我们提供了非常多的选项(目前是 26 个)，来处理 source-map;

• 参考文档：https://webpack.docschina.org/configuration/devtool/

• 选择不同的值，生成的 source-map 会稍微有差异，打包的过程也会有性能的差异，可以根据不同的情况进行 选择;

下面几个值不会生成 source-map

• false:不使用 source-map，也就是没有任何和 source-map 相关的内容。

• none:production 模式下的默认值（什么值都不写），不生成 source-map。

• eval:development 模式下的默认值，不生成 source-map

  • 但是它会在 eval 执行的代码中，添加 //# sourceURL=;
  • 它会被浏览器在执行时解析，并且在调试面板中生成对应的一些文件目录，方便我们调试代码;

使用 source-map 的值

• source-map

  • 生成独立的 source-map 文件，并在打包后的 JS 文件中有一个注释指向 source-map 文件；
    • 注释： `` //# sourceMappingURL=bundle.js.map`

• eval-source-map

  • source-map 以 DataUrl 的形式添加到 eval 函数后面

• inline-source-map

  • source-map 以 DataUrl 的形式添加到打包后的 JS 文件后面（注释）

• cheap-source-map:

  • 会生成 source-map，但是会更加高效一些(cheap 低开销)，因为它没有生成列映射(Column Mapping)
  • 因为在开发中，我们只需要行信息通常就可以定位到错误了

• cheap-module-source-map:

  • 会生成 source-map，类似于 cheap-source-map，但是对源自 loader 的 source-map 处理会更好。
  • 对源自 loader 的 source-map 处理会更好，官方也没有给出很好的解释 其实是如果 loader 对我们的源码进行了特殊的处理，比如 babel,会恢复成源文件的代码模块格式，例如不会删除自定义的空行。

• hidden-source-map:

  • 会生成 sourcemap，但是不会对 source-map 文件进行引用;
  • 相当于删除了打包文件中对 sourcemap 的引用注释
  • # sourceMappingURL=bundle.js.map
  • 如果手动添加进来，那么 source-map 就会生效了

• nosources-source-map:

  • 会生成 sourcemap，但是生成的 sourcemap 只有错误信息的提示，不会生成源代码文件;
  • 点击错误信息也无法查看源码

多个值的组合

• 事实上，webpack 提供给我们的 26 个值，是可以进行多组合的。

• 组合的规则如下:

• inline-|hidden-|eval:三个值时三选一;

• nosources:可选值;

• cheap 可选值，并且可以跟随 module 的值;

那么在开发中，最佳的实践是什么呢?

• 开发阶段:推荐使用 source-map 或者 cheap-module-source-map

  • 这分别是 vue 和 react 使用的值，可以获取调试信息，方便快速开发;

• 测试阶段:推荐使用 source-map 或者 cheap-module-source-map

  • 测试阶段我们也希望在浏览器下看到正确的错误提示;

• 发布阶段:false、缺省值(不写)

---

掘金原文链接

掘金：前端 LeBron

知乎：前端 LeBron

持续分享技术博文，关注微信公众号 👇🏻