写作不易，未经作者容许禁止以任何模式转载！
如果感觉文章不错，欢送关注、点赞和分享！
掘金原文链接
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 functionfunction __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");总结
原理都是相似的
通过一个webpack_module对象来存储模块化代码
- key为文件名称
- value为文件代码
- 通过webpack_module_cache来缓存模块化代码
- 通通过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...
- 抉择不同的值，生成的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
- 继续分享技术博文，关注微信公众号