上一章重学webpack系列(五) -- webpack的devServer实践与原理讲解了，如何利用devServer提高开发效率，这一章我们要探讨的是项目中需要编译的文件如何调试。我们编写的源代码通过编译生成在生产环境中使用的代码，其本身具有很大的差异，那么在这种情况下，我们想要去调试我们的项目，那将会极其的困难，或者说在运行过程中发生了一些没有预料到的错误，想要去定位问题也显得不可能，所以sourceMap能够提供这样的功能方便开发者调试源代码。
什么是sourceMap
sourceMap可以理解成映射源代码与转换过后的代码的桥梁，我们可以通过sourceMap逆向解析出源代码，表现形式为解析过程生成的.map文件，.map文件的阅读极其困难，不过这是开发者不用关注的东西，在客户端点击路径会通过map文件，定位到源代码的。
{
"version":3, // 版本
"file":"add.94e16f2e9cf31b1b0c00.js", // 名称
// Base64 VLQ编码形式，标记依赖关系
"mappings":"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",
// 打包依赖工具来源
"sources":["webpack://webpack/./src/css/index.css","webpack://webpack/./node_modules/css-loader/dist/runtime/api.js","webpack://webpack/./node_modules/css-loader/dist/runtime/sourceMaps.js","webpack://webpack/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js","webpack://webpack/./node_modules/style-loader/dist/runtime/insertBySelector.js","webpack://webpack/./node_modules/style-loader/dist/runtime/insertStyleElement.js","webpack://webpack/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js","webpack://webpack/./node_modules/style-loader/dist/runtime/styleDomAPI.js","webpack://webpack/./node_modules/style-loader/dist/runtime/styleTagTransform.js","webpack://webpack/webpack/bootstrap","webpack://webpack/webpack/runtime/compat get default export","webpack://webpack/webpack/runtime/define property getters","webpack://webpack/webpack/runtime/hasOwnProperty shorthand","webpack://webpack/webpack/runtime/nonce","webpack://webpack/./src/css/index.css?f7ea","webpack://webpack/./src/mkdown/index.md","webpack://webpack/./src/add.js"],
"sourcesContent":["// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".index {\\n color: wheat;\\n background-color: red;\\n font-size: 20px;\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/css/index.css\"],\"names\":[],\"mappings\":\"AAAA;EACE,YAAY;EACZ,qBAAqB;EACrB,eAAe;AACjB\",\"sourcesContent\":[\".index {\\n color: wheat;\\n background-color: red;\\n font-size: 20px;\\n}\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","\"use strict\";\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n\n content += cssWithMappingToString(item);\n\n if (needLayer) {\n content += \"}\";\n }\n\n if (item[2]) {\n content += \"}\";\n }\n\n if (item[4]) {\n content += \"}\";\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n\n\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};","\"use strict\";\n\nmodule.exports = function (item) {\n var content = item[1];\n var cssMapping = item[3];\n\n if (!cssMapping) {\n return content;\n }\n\n if (typeof btoa === \"function\") {\n var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));\n var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n var sourceMapping = \"/*# \".concat(data, \" */\");\n var sourceURLs = cssMapping.sources.map(function (source) {\n return \"/*# sourceURL=\".concat(cssMapping.sourceRoot || \"\").concat(source, \" */\");\n });\n return [content].concat(sourceURLs).concat([sourceMapping]).join(\"\\n\");\n }\n\n return [content].join(\"\\n\");\n};","\"use strict\";\n\nvar stylesInDOM = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n\n return updater;\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n\n stylesInDOM.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};","\"use strict\";\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;","\"use strict\";\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\n\nmodule.exports = insertStyleElement;","\"use strict\";\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = typeof __webpack_nonce__ !== \"undefined\" ? __webpack_nonce__ : null;\n\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;","\"use strict\";\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n\n var needLayer = typeof obj.layer !== \"undefined\";\n\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n\n css += obj.css;\n\n if (needLayer) {\n css += \"}\";\n }\n\n if (obj.media) {\n css += \"}\";\n }\n\n if (obj.supports) {\n css += \"}\";\n }\n\n var sourceMap = obj.sourceMap;\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, styleElement, options.options);\n}\n\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n\n styleElement.parentNode.removeChild(styleElement);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\n\nmodule.exports = domAPI;","\"use strict\";\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n\n styleElement.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","__webpack_require__.nc = undefined;","\n import API from \"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../node_modules/css-loader/dist/cjs.js!./index.css\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n options.insert = insertFn.bind(null, \"head\");\n \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../node_modules/css-loader/dist/cjs.js!./index.css\";\n export default content && content.locals ? content.locals : undefined;\n","// Module\nvar code = \"<h1 id=\\\"about\\\">About</h1> <p>this is About page</p> \";\n// Exports\nexport default code;","// import commonFn from \"./common.js\";\nimport './css/index.css'\n\nimport about from './mkdown/index.md'\n\nexport default function add(a,b){\n return commonFn(a+b)\n}\n\nconsole.log(about)\n\n// wwww\nconst element = document.getElementsByClassName('index')[0];\nconsole.log(element)\nelement.innerHTML = about\n\n// => <h1>About/h1><p>this is About page</p>"],
// 打包所依赖的模块名称集合
"names":["___CSS_LOADER_EXPORT___","push","module","id","exports","cssWithMappingToString","list","toString","this","map","item","content","needLayer","concat","length","join","i","modules","media","dedupe","supports","layer","undefined","alreadyImportedModules","k","_k","cssMapping","btoa","base64","unescape","encodeURIComponent","JSON","stringify","data","sourceMapping","sourceURLs","sources","source","sourceRoot","stylesInDOM","getIndexByIdentifier","identifier","result","modulesToDom","options","idCountMap","identifiers","base","count","indexByIdentifier","obj","css","sourceMap","references","updater","addElementStyle","byIndex","splice","api","domAPI","update","newObj","remove","lastIdentifiers","newList","index","newLastIdentifiers","_i","_index","memo","insert","style","target","styleTarget","document","querySelector","window","HTMLIFrameElement","contentDocument","head","e","getTarget","Error","appendChild","element","createElement","setAttributes","attributes","styleElement","nonce","setAttribute","insertStyleElement","styleTagTransform","apply","parentNode","removeChild","removeStyleElement","styleSheet","cssText","firstChild","createTextNode","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","prop","prototype","hasOwnProperty","call","nc","console","log","getElementsByClassName","innerHTML"],
// 根
"sourceRoot":""
}
sourceMap的基础实践
在webpack.config.js里面配置devtool: "source-map"，表示的意思就是开启sourceMap打包，我们可以来看一下，打包后的文件里面最后一行，我们发现他通过注释的方式引入的当前文件所依赖的sourceMap文件。
假如我们在源代码里面添加一行错误，那打包必定会出现问题。
这里的sourceMap的好处就是帮你把错误在源代码中的位置都标记出来了，假如我们不设置devtool: "source-map"，那效果是下面这样的，只会在打包过后的代码中定位错误。
可见
sourceMap对开发者来讲，真是一大利器呀。当然官方对devtool配置提供了几种预设，以便于我们在不同的开发环境下取舍，做到效率最大化。
特别注意的是，
eval是JavaScript的一个函数，他执行于一个临时的vm里面，如果我们想让他显示执行路径，那我们就必须要这样做 => eval('console.log('a')' //# sourceUrl='./xx/xx.js')
在production开发模式下，一般是不需要配置sourceMap的或者写成none，但是你如果想让线上代码出错的时候也进行提示，我们可以配置devtool:"nosources-source-map"，选择的理由有两点。
- 根据编码规范，我只需要定位
行列信息就够了，能够保证安全问题。 - 根据
webpack-dev-server监听模式下重新构建，打包速度还是挺快的，几乎不怎么受影响。
sourceMap的基本原理
根据开始生成的sourceMap文件我们可以看到大致的格式，这些信息都是数字格式，使用Base64 VLQ进行编码，在二进制位运算基础上操作，具体步骤为：
编码步骤
-
如果数字大于或等于
0，左移一位；如果数字小于0，先取绝对值，然后左移一位，接着将末位置为1； -
取数字最低的
5位，并将数字右移5位； -
如果此时数字为
0，使用Base64编码字符序列输出第2步中取到的5位；如果数字不为0，则将第2步中取到的5位前面补1，使用Base64编码字符序列输出字符并循环第2步；
解码步骤
- 解码步骤就是反编码步骤，可以借助
vql库来实现解码。
Base64编码序列表：
总结
这一章我们主要讨论的是sourceMap在实践中的应用，能够在不同环境中使用不同的配置，确实能够解决一些问题，最后我们也谈论了一下sourcedMap的原理，下一章我们会谈一谈上一章提到的热更新，直通车 >>> 重学webpack系列(七) -- webpack的HMR的实践与原理
