SourceMap

为什么

开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子：

  1. /*
  2.  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
  3.  * This devtool is neither made for production nor for readable output files.
  4.  * It uses "eval()" calls to create a separate source file in the browser devtools.
  5.  * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
  6.  * or disable the default devtool with "devtool: false".
  7.  * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
  8.  */
  9. /******/ (() => { // webpackBootstrap
  10. /******/     "use strict";
  11. /******/     var __webpack_modules__ = ({
  13. /***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/less/index.less":
  14. /*!**********************************************************************************************************!*\
  15.   !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/less/index.less ***!
  16.   \**********************************************************************************************************/
  17. /***/ ((module, __webpack_exports__, __webpack_require__) => {
  19. eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".box2 {\\n  width: 100px;\\n  height: 100px;\\n  background-color: deeppink;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack5/./src/less/index.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js");
  21. /***/ }),
  22. // 其他省略

所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。
所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。

是什么

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

怎么用

通过查看Webpack DevTool 文档可知，SourceMap 的值有很多种情况.
但实际开发时我们只需要关注两种情况即可：

  • 开发模式：cheap-module-source-map

    • 优点：打包编译速度快，只包含行映射
    • 缺点：没有列映射
      1. module.exports = {
      2. // 其他省略
      3. mode: "development",
      4. devtool: "cheap-module-source-map",
      5. };

  • 生产模式：source-map

    • 优点：包含行/列映射
    • 缺点：打包编译速度更慢
      1. module.exports = {
      2. // 其他省略
      3. mode: "production",
      4. devtool: "source-map",
      5. };