webpack的source map

最新推荐文章于 2024-07-04 20:30:00 发布
最新推荐文章于 2024-07-04 20:30:00 发布
阅读量862 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/106360724
版权

文章目录

demo

代码结构

在这里插入图片描述

原始源代码
  • math.js
//math.js
function add(x,y){
    return x+y;
}
function sub(x,y){
    return x-y;
}

export {
    add,
    sub
}
  • index.js
//index.js
import {add,sub} from "./math.js";
var sum = add(1,2);
var diff = sub(2,1);
document.querySelector("#root").textContent = [sum,diff].join("||");
  • index.html
//index.html
<body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
</body>
  • webpack.config.js
//webpack.config.js
const path = require("path");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
    mode:"development",
    devtool:"source-map",
    entry:"./index.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new CleanWebpackPlugin()
    ]
}
  • package.json
//package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}
编译后的代码
npm run build

在这里插入图片描述

  • bundle.js
//bundle.js
//省略了......
//# sourceMappingURL=bundle.js.map
  • bundle.js.map
//bundle.js.map
{
  "version": 3,
  "sources": [
    "webpack:///webpack/bootstrap",
    "webpack:///./index.js",
    "webpack:///./math.js"
  ],
  "names": [],
  "mappings": ";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;AClFA;AAAA;AAAkC;AAClC,UAAU,oDAAG;AACb,WAAW,oDAAG;AACd,oE;;;;;;;;;;;;ACHA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA",
  "file": "bundle.js",
  "sourcesContent": [
    " \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./index.js\");\n",
    "import {add,sub} from \"./math.js\";\r\nvar sum = add(1,2);\r\nvar diff = sub(2,1);\r\ndocument.querySelector(\"#root\").textContent = [sum,diff].join(\"||\");",
    "function add(x,y){\r\n    return x+y;\r\n}\r\nfunction sub(x,y){\r\n    return x-y;\r\n}\r\n\r\nexport {\r\n    add,\r\n    sub\r\n}"
  ],
  "sourceRoot": ""
}
source map
source map是什么

source map（源映射），是一种文本格式，扩展名是.map。
上面的bundle.js.map就是source map。
source map本质上是一个 JSON文本文档，保存着 编译后的代码 与 原始源代码 的 位置映射关系。
编译后代码的第几列 对应 哪个原始源文件中的第几行第几列，bundle.js.map中的mappings属性记录着这些位置对应关系。

启用source map
  • source map ，更准确地说，是浏览器的能力。想用source map，首先得Enable JavasScript source maps。
    在这里插入图片描述
  • //# sourceMappingURL=bundle.js.map
    bundle.js的最后一行是//# sourceMappingURL=bundle.js.map。这一行告诉浏览器，bundle.js的映射文件是bundle.js.map，所以浏览器会自动加载bundle.js.map，并根据该map文件提供的位置映射关系计算bundle.js中每行代码对应原始源代码中的哪个文件的哪一行。如此一来，调试bundle.js时，在某行打断点，就会跳到对应原始源文件所在行，就和调试原始源文件一样。
    在这里插入图片描述

devtool

source map可以将 编译后的代码 映射到 原始源代码。
但要不要生成 source map、怎么生成 source map，devtool说了算。

值为source-map

可以在开发环境用用，生产环境别想了

  • 调试很方便
    source map独立成文件bundle.js.map，bundle.js最后一行的//# sourceMappingURL=bundle.js.map告诉浏览器，bundle.js的映射文件是bundle.js.map。
    调试bundle.js时，在某行打断点，就会跳到对应原始源文件所在行，就和调试原始源文件一样。
    在这里插入图片描述
//bundle.js
//# sourceMappingURL=bundle.js.map

//bundle.js.map
{
  "mappings": ";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;AClFA;AAAA;AAAkC;AAClC,UAAU,oDAAG;AACb,WAAW,oDAAG;AACd,oE;;;;;;;;;;;;ACHA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA",
  "file": "bundle.js"
}
  • 构建速度很慢
    生成的source map很详细，所以它的构建速度会很慢。
    开发过程中要频繁修改，在"source-map"的情况下npm run build，会让你 等到 花儿 谢了。如果能忍受它的慢，可以在开发环境玩一玩。暴脾气的人们，和它就此别过吧。
  • 不安全
    调试确实很方便，但整个源码都暴露出来了，不安全，所以生产环境还是别想了。
值为inline-source-map

可以在开发环境用用，生产环境别想了

  • 调试很方便
    source map不独立成文件，而是以base64的格式嵌在bundle.js里。
    调试bundle.js时，在某行打断点，就会跳到对应原始源文件所在行，就和调试原始源文件一样。
    在这里插入图片描述
//bundle.js
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vaW5kZXguanMiLCJ3ZWJwYWNrOi8vLy4vbWF0aC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO1FBQUE7UUFDQTs7UUFFQTtRQUNBOztRQUVBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7OztRQUdBO1FBQ0E7O1FBRUE7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7UUFDQSwwQ0FBMEMsZ0NBQWdDO1FBQzFFO1FBQ0E7O1FBRUE7UUFDQTtRQUNBO1FBQ0Esd0RBQXdELGtCQUFrQjtRQUMxRTtRQUNBLGlEQUFpRCxjQUFjO1FBQy9EOztRQUVBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQSx5Q0FBeUMsaUNBQWlDO1FBQzFFLGdIQUFnSCxtQkFBbUIsRUFBRTtRQUNySTtRQUNBOztRQUVBO1FBQ0E7UUFDQTtRQUNBLDJCQUEyQiwwQkFBMEIsRUFBRTtRQUN2RCxpQ0FBaUMsZUFBZTtRQUNoRDtRQUNBO1FBQ0E7O1FBRUE7UUFDQSxzREFBc0QsK0RBQStEOztRQUVySDtRQUNBOzs7UUFHQTtRQUNBOzs7Ozs7Ozs7Ozs7O0FDbEZBO0FBQUE7QUFBa0M7QUFDbEMsVUFBVSxvREFBRztBQUNiLFdBQVcsb0RBQUc7QUFDZCxvRTs7Ozs7Ozs7Ozs7O0FDSEE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImJ1bmRsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIiBcdC8vIFRoZSBtb2R1bGUgY2FjaGVcbiBcdHZhciBpbnN0YWxsZWRNb2R1bGVzID0ge307XG5cbiBcdC8vIFRoZSByZXF1aXJlIGZ1bmN0aW9uXG4gXHRmdW5jdGlvbiBfX3dlYnBhY2tfcmVxdWlyZV9fKG1vZHVsZUlkKSB7XG5cbiBcdFx0Ly8gQ2hlY2sgaWYgbW9kdWxlIGlzIGluIGNhY2hlXG4gXHRcdGlmKGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdKSB7XG4gXHRcdFx0cmV0dXJuIGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdLmV4cG9ydHM7XG4gXHRcdH1cbiBcdFx0Ly8gQ3JlYXRlIGEgbmV3IG1vZHVsZSAoYW5kIHB1dCBpdCBpbnRvIHRoZSBjYWNoZSlcbiBcdFx0dmFyIG1vZHVsZSA9IGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdID0ge1xuIFx0XHRcdGk6IG1vZHVsZUlkLFxuIFx0XHRcdGw6IGZhbHNlLFxuIFx0XHRcdGV4cG9ydHM6IHt9XG4gXHRcdH07XG5cbiBcdFx0Ly8gRXhlY3V0ZSB0aGUgbW9kdWxlIGZ1bmN0aW9uXG4gXHRcdG1vZHVsZXNbbW9kdWxlSWRdLmNhbGwobW9kdWxlLmV4cG9ydHMsIG1vZHVsZSwgbW9kdWxlLmV4cG9ydHMsIF9fd2VicGFja19yZXF1aXJlX18pO1xuXG4gXHRcdC8vIEZsYWcgdGhlIG1vZHVsZSBhcyBsb2FkZWRcbiBcdFx0bW9kdWxlLmwgPSB0cnVlO1xuXG4gXHRcdC8vIFJldHVybiB0aGUgZXhwb3J0cyBvZiB0aGUgbW9kdWxlXG4gXHRcdHJldHVybiBtb2R1bGUuZXhwb3J0cztcbiBcdH1cblxuXG4gXHQvLyBleHBvc2UgdGhlIG1vZHVsZXMgb2JqZWN0IChfX3dlYnBhY2tfbW9kdWxlc19fKVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5tID0gbW9kdWxlcztcblxuIFx0Ly8gZXhwb3NlIHRoZSBtb2R1bGUgY2FjaGVcbiBcdF9fd2VicGFja19yZXF1aXJlX18uYyA9IGluc3RhbGxlZE1vZHVsZXM7XG5cbiBcdC8vIGRlZmluZSBnZXR0ZXIgZnVuY3Rpb24gZm9yIGhhcm1vbnkgZXhwb3J0c1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5kID0gZnVuY3Rpb24oZXhwb3J0cywgbmFtZSwgZ2V0dGVyKSB7XG4gXHRcdGlmKCFfX3dlYnBhY2tfcmVxdWlyZV9fLm8oZXhwb3J0cywgbmFtZSkpIHtcbiBcdFx0XHRPYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgbmFtZSwgeyBlbnVtZXJhYmxlOiB0cnVlLCBnZXQ6IGdldHRlciB9KTtcbiBcdFx0fVxuIFx0fTtcblxuIFx0Ly8gZGVmaW5lIF9fZXNNb2R1bGUgb24gZXhwb3J0c1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5yID0gZnVuY3Rpb24oZXhwb3J0cykge1xuIFx0XHRpZih0eXBlb2YgU3ltYm9sICE9PSAndW5kZWZpbmVkJyAmJiBTeW1ib2wudG9TdHJpbmdUYWcpIHtcbiBcdFx0XHRPYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgU3ltYm9sLnRvU3RyaW5nVGFnLCB7IHZhbHVlOiAnTW9kdWxlJyB9KTtcbiBcdFx0fVxuIFx0XHRPYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgJ19fZXNNb2R1bGUnLCB7IHZhbHVlOiB0cnVlIH0pO1xuIFx0fTtcblxuIFx0Ly8gY3JlYXRlIGEgZmFrZSBuYW1lc3BhY2Ugb2JqZWN0XG4gXHQvLyBtb2RlICYgMTogdmFsdWUgaXMgYSBtb2R1bGUgaWQsIHJlcXVpcmUgaXRcbiBcdC8vIG1vZGUgJiAyOiBtZXJnZSBhbGwgcHJvcGVydGllcyBvZiB2YWx1ZSBpbnRvIHRoZSBuc1xuIFx0Ly8gbW9kZSAmIDQ6IHJldHVybiB2YWx1ZSB3aGVuIGFscmVhZHkgbnMgb2JqZWN0XG4gXHQvLyBtb2RlICYgOHwxOiBiZWhhdmUgbGlrZSByZXF1aXJlXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLnQgPSBmdW5jdGlvbih2YWx1ZSwgbW9kZSkge1xuIFx0XHRpZihtb2RlICYgMSkgdmFsdWUgPSBfX3dlYnBhY2tfcmVxdWlyZV9fKHZhbHVlKTtcbiBcdFx0aWYobW9kZSAmIDgpIHJldHVybiB2YWx1ZTtcbiBcdFx0aWYoKG1vZGUgJiA0KSAmJiB0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnICYmIHZhbHVlICYmIHZhbHVlLl9fZXNNb2R1bGUpIHJldHVybiB2YWx1ZTtcbiBcdFx0dmFyIG5zID0gT2JqZWN0LmNyZWF0ZShudWxsKTtcbiBcdFx0X193ZWJwYWNrX3JlcXVpcmVfXy5yKG5zKTtcbiBcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KG5zLCAnZGVmYXVsdCcsIHsgZW51bWVyYWJsZTogdHJ1ZSwgdmFsdWU6IHZhbHVlIH0pO1xuIFx0XHRpZihtb2RlICYgMiAmJiB0eXBlb2YgdmFsdWUgIT0gJ3N0cmluZycpIGZvcih2YXIga2V5IGluIHZhbHVlKSBfX3dlYnBhY2tfcmVxdWlyZV9fLmQobnMsIGtleSwgZnVuY3Rpb24oa2V5KSB7IHJldHVybiB2YWx1ZVtrZXldOyB9LmJpbmQobnVsbCwga2V5KSk7XG4gXHRcdHJldHVybiBucztcbiBcdH07XG5cbiBcdC8vIGdldERlZmF1bHRFeHBvcnQgZnVuY3Rpb24gZm9yIGNvbXBhdGliaWxpdHkgd2l0aCBub24taGFybW9ueSBtb2R1bGVzXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm4gPSBmdW5jdGlvbihtb2R1bGUpIHtcbiBcdFx0dmFyIGdldHRlciA9IG1vZHVsZSAmJiBtb2R1bGUuX19lc01vZHVsZSA/XG4gXHRcdFx0ZnVuY3Rpb24gZ2V0RGVmYXVsdCgpIHsgcmV0dXJuIG1vZHVsZVsnZGVmYXVsdCddOyB9IDpcbiBcdFx0XHRmdW5jdGlvbiBnZXRNb2R1bGVFeHBvcnRzKCkgeyByZXR1cm4gbW9kdWxlOyB9O1xuIFx0XHRfX3dlYnBhY2tfcmVxdWlyZV9fLmQoZ2V0dGVyLCAnYScsIGdldHRlcik7XG4gXHRcdHJldHVybiBnZXR0ZXI7XG4gXHR9O1xuXG4gXHQvLyBPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGxcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubyA9IGZ1bmN0aW9uKG9iamVjdCwgcHJvcGVydHkpIHsgcmV0dXJuIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChvYmplY3QsIHByb3BlcnR5KTsgfTtcblxuIFx0Ly8gX193ZWJwYWNrX3B1YmxpY19wYXRoX19cbiBcdF9fd2VicGFja19yZXF1aXJlX18ucCA9IFwiXCI7XG5cblxuIFx0Ly8gTG9hZCBlbnRyeSBtb2R1bGUgYW5kIHJldHVybiBleHBvcnRzXG4gXHRyZXR1cm4gX193ZWJwYWNrX3JlcXVpcmVfXyhfX3dlYnBhY2tfcmVxdWlyZV9fLnMgPSBcIi4vaW5kZXguanNcIik7XG4iLCJpbXBvcnQge2FkZCxzdWJ9IGZyb20gXCIuL21hdGguanNcIjtcclxudmFyIHN1bSA9IGFkZCgxLDIpO1xyXG52YXIgZGlmZiA9IHN1YigyLDEpO1xyXG5kb2N1bWVudC5xdWVyeVNlbGVjdG9yKFwiI3Jvb3RcIikudGV4dENvbnRlbnQgPSBbc3VtLGRpZmZdLmpvaW4oXCJ8fFwiKTsiLCJmdW5jdGlvbiBhZGQoeCx5KXtcclxuICAgIHJldHVybiB4K3k7XHJcbn1cclxuZnVuY3Rpb24gc3ViKHgseSl7XHJcbiAgICByZXR1cm4geC15O1xyXG59XHJcblxyXG5leHBvcnQge1xyXG4gICAgYWRkLFxyXG4gICAgc3ViXHJcbn0iXSwic291cmNlUm9vdCI6IiJ9
  • 构建速度很慢
    devtool:"inline-source-map"的构建速度也很慢，如果能忍受，可以在开发环境中用用。
  • 不安全、包体积大
    调试倒是方便了，整个源码都暴露了，不安全。
    另外，由于source map以base64的格式嵌在bundle.js里，所以bundle.js的体积会变大，所以生产环境还是别想了。
值为hidden-source-map

不适合开发环境，生产环境可以用用

  • 调试稍有不便
    source map独立成文件bundle.js.map，但bundle.js最后一行没有//# sourceMappingURL=bundle.js.map。也就是说，虽然有映射文件，但浏览器并不知道映射文件在哪儿。因此，调试bundle.js时不会跳到原始源文件，稍稍增加了一点调试难度。
    在这里插入图片描述
//bundle.js.map
{
  "mappings": ";QAAA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;AClFA;AAAA;AAAkC;AAClC,UAAU,oDAAG;AACb,WAAW,oDAAG;AACd,oE;;;;;;;;;;;;ACHA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA",
   "file": "bundle.js",
}
  • 构建速度很慢
    devtool:"hidden-source-map"的构建速度也很慢。
  • 安全
    源码被隐藏，所以增加了一点点调试难度，但也因此保证了源码安全
值为cheap-source-map

推荐开发环境中使用，生产环境别想了

  • 调试很方便
    source map独立成文件bundle.js.map，bundle.js最后一行的//# sourceMappingURL=bundle.js.map告诉浏览器，bundle.js的映射文件是bundle.js.map。
    调试bundle.js时，在某行打断点，就会跳到对应原始源文件所在行，就和调试原始源文件一样。
    在这里插入图片描述)
//bundle.js
//# sourceMappingURL=bundle.js.map

//bundle.js.map
{
  "mappings": ";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;AClFA;AAAA;AAAA;AACA;AACA;AACA;;;;;;;;;;;;ACHA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;A",
  "file": "bundle.js",
}
  • 构建速度比较快
值bundle.js.map的size
source-map3.98KiB
hidden-source-map3.98KiB
cheap-source-map3.89KiB

"cheap-source-map"时生成的source map体积小点儿，因为不包含列信息，所以构建速度快一些。

  • 不安全
    调试倒是方便了，但暴露了源码，不安全，所以不适合生产环境。
小结
devtool特点使用场景
source-map调试方便，构建速度慢，不安全脾气好的，可以在开发环境上用用，生产环境上别用
inline-source-map调试方便，构建速度慢，不安全，包体积大脾气好的，可以在开发环境上用用，生产环境上别用
hidden-source-map调试稍有不便，构建速度慢，安全不适合开发环境，生产环境上可以用用
cheap-source-map调试方便，构建速度比较快，不安全推荐在开发环境上使用，生产环境上别用
参考文章

JavaScript Source Map 详解
JavaScript的Source Map (sourceURL / sourceMappingURL)
使用source map
devtool
devtool demo

richest_qi
关注
专栏目录
Webpack Sourcemap文件泄露漏洞
天天学安全专属博客
09-12 3101
Webpack Sourcemap文件泄露漏洞
HOW - Webpack SourceMap 源码映射原理和生产环境问题定位技巧
weixin_58540586的博客
03-22 587
Webpack SourceMap 源码映射原理和生产环境问题定位技巧。
webpack-sources:Webpack的源代码处理类-Source code
03-25
webpack源 包含多个表示Source类。 可以要求Source提供源代码，大小，源映射和哈希。 Source 所有源的基类。 公开方法 所有方法都应视为昂贵，因为它们可能需要进行计算。 source Source . prototype . source ( ) - > String | Buffer 以字符串或缓冲区（表示二进制源）的形式返回表示的源代码。 buffer Source . prototype . buffer ( ) - > Buffer 返回表示的源代码为Buffer。 字符串将转换为utf-8。 size Source . prototype . size ( ) - > Number 返回所表示源代码的大小（以字节为单位）。 map Source . prototype . map ( options ?: Object ) - > Objec
sourcemap
crystalNB的专栏
12-05 1259
SourceMap 的文件内容是js对象，其个字段是： - version：Source map的版本，目前为3。 　　- file：转换后的文件名。 　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。 　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。 　　- names：转换前的所有变量名和属性名。 　　- map
Webpack: 基于Sourcemap源码映射原理与使用技巧
最新发布
Wang的专栏
07-04 1126
Sourcemap 协议最初由 Google 设计并率先在 Closure Inspector 实现，它的主要作用就是将经过压缩、混淆、合并的产物代码还原回未打包的原始形态，帮助开发者在生产环境中精确定位问题发生的行列位置，例如：在 Webpack 内部，这段生成 Sourcemap 映射数据的逻辑并不复杂，一句话总结：在钩子遍历产物文件assets数组，调用提供的map方法，最终计算出asset与源码之间的映射关系。
webpack学习_使用source map
努力学习的肥宅
09-11 147
追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确告诉你 在这里只使用inline-source-map选项(source map有很多选项,其他的请详细阅读webpack指南) webpack.config.js modul...
什么是SourceMap
xiasohuai的博客
09-01 4147
什么是SourceMap？ 我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。 在项目开发完进行打包后...
Webpack source-map 详解
Web_boom的博客
01-28 1178
2.3 source-map文件分)* inline-source-map：会生成sourcemap，但是source-map是以DataUrl添加到bundle文件的后面!
webpack之SourceMap
Luckyzhoufangbing的博客
06-07 886
（一）什么是sourceMap sourceMap其实是一个映射关系，比如打包后的js文件（如dist目录下main.js第78行报错了），sourceMap能够找到（dist目录下main.js第78行）对应的打包前的源文件（是哪个文件夹下的哪一行） （二）用法 在 webpack.config.js 中 module.exports 里面加一行 devtool: 'source-map' devtool有很多source-map形式，详情见webpack手册devtool部分 配置好.
webpack的sourcemap各种参数详解
doomliu的博客
05-17 566
webpack配置中的devtool字段可以允许我们控制sourcemap的生成，提供开发时候的代码定位功能 关于sourcemap可以参考 sourcemap详解 1. sourcemap关键字 sourcemap关键字如下 eval 使用eval包裹代码模块（这个代码块是转译后的代码，并未进行打包和压缩） eval包裹每个代码块时候，会在后面增加"sourceURL"（和sourcemap里的"sourceMappingURL"不同）用来定位到原文件。 eval模式优势在于，它是将每个模块单独eval
source-map-loader:从模块中提取 sourceMappingURL 注释并将其提供给 webpack
08-04
源映射加载器 从现有源文件（从它们的sourceMappingURL ）中提取源映射。 入门 首先，您需要安装source-map-loader ： npm i -D source-map-loader 然后将插件添加到您的webpack配置中。 例如： 文件.js import css from "file.css" ; webpack.config.js module . exports = { module : { rules : [ { test : / \. js $ / , enforce : "pre" , use : [ "source-map-loader" ] , } , ] , } , } ; source-map-loader从所有 JavaScript
Sourcemap是什么？Sourcemap的作用及用法概括
m0_67401545的博客
03-23 1942
什么是Sourcemap Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。 Sourcemap的作用 简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁，方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式，在
webpack--插件
xuan的博客
07-07 742
1、插件没有像 loader 那样的独立运行环境（loader-runner）2、只能在 webpack 里面运行 三、插件使用 四、开发一个最简单的插件 1、src/demo-plugin.js 2、加入到 webpack 配置中 五、插件中如何获取传递的参数 通过插件的构造函数进行获取 六、插件的错误处理 （1）参数校验阶段可以直接 throw 的方式抛出 （2）通过 compilation 对象的 warnings 和 errors 接收 七、插件扩展：
Source Map的概念
wanhongbo029的博客
11-16 2803
source map顾名思义，就是代码地图，为什么会有这个东西呢，具体的起源等有时间在追溯，先看看这个东西是怎么用的，有什么用。 提到source map，说的最多的是javascript source map，其实并不仅仅是javascrip程序需要生成source map，其他的代码也需要，比如css（尤其是对于一个大型的前端样式库，比如bootstrap等）。 现代javascript程...
一文了解source-map
p1967914901的博客
12-02 1272
一文了解source-map一文了解source-map背景举例source-mapevaleval-source-mapinline-source-mapcheap-source-mapcheap-module-source-map总结开发环境生产环境 一文了解source-map 背景 作为一个开发工程师——无论是什么开发，要求开发环境最不可少的一点功能就是——debug功能。 当我们通过webpack 将我们的源码打包成了 bundle.js 。 试想：实际上客户端(浏览器)读取的是打包后的bundl
[译]什么是SourceMap
奇舞周刊
04-10 577
原文链接: https://web.dev/source-maps/使用 SourceMap 来提升 web 调试体验。今天，我们要讨论的是 SourceMap，这是现代 Web 开发中至关重要的工具，它能够显著地简化调试工作。在本文中，我们将探讨 SourceMap 的基础知识，包括它们的生成方式以及它们如何改善调试体验。SourceMap 的必要性以前，我们使用纯 HTML、CSS 和 Jav...
webpack打包之sourcemap
我的博客简介
08-01 6673
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
webpack---优化_source-map
weixin_43390711的博客
05-31 187
webpack---优化_source-map
webpack的sourceMap
05-13
webpack的sourceMap是一种映射文件，它可以将打包后的代码映射回原始的源代码，方便我们进行调试和定位问题。在webpack的配置中，我们可以通过设置devtool选项来开启sourceMap。 常用的devtool选项包括： - source...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值