source-map配置

• source-map
• • webpack.config.js中配置
  • 總結(jié)

source-map

概念：構(gòu)建源代碼和打包后代碼映射關(guān)系的一種技術(shù)
作用：追蹤源代碼方便調(diào)試

webpack.config.js中配置

module.exports = { dev-tool: 'source-map' } 配置內(nèi)聯(lián)or外聯(lián)特點(diǎn)

soure-map	外部	錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
inline-source-map	內(nèi)聯(lián)	錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
hidden-source-map	外部	錯(cuò)誤代碼錯(cuò)誤原因但是沒有錯(cuò)誤位置，不能追蹤錯(cuò)誤源代碼 只能提示到構(gòu)建后代碼的錯(cuò)誤位置
eval-source-map	內(nèi)聯(lián)	每一個(gè)文件都生成對(duì)應(yīng)的source-map，同樣能查看錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置
nosources-source-map	外部	有錯(cuò)誤信息但是沒有源代碼
cheap-source-map	外部	錯(cuò)誤只精確到行不能精確到列
cheap-module-source-map	外部	錯(cuò)誤代碼準(zhǔn)確信息和源代碼的錯(cuò)誤位置 module會(huì)將loader的source map加入

• 內(nèi)聯(lián)和外部的區(qū)別：1外部生成文件，內(nèi)聯(lián)沒有。2內(nèi)聯(lián)構(gòu)建速度更快。
• 開發(fā)環(huán)境：
  -速度快（eval>inline>cheap>…）更快的組合一下eval和cheap
  即eval-cheap-source-map>eval-source-map（vue-cli默認(rèn)配置）
  -調(diào)試更友好 source-map 或者cheap-module-source-map 或者cheap-source-map
• 生產(chǎn)環(huán)境：
  -考慮源代碼要不要隱藏？調(diào)試要不要更友好？內(nèi)聯(lián)會(huì)讓代碼體積變大，所以生產(chǎn)環(huán)境不用內(nèi)聯(lián)
  nosources-source-map:全部隱藏
  hidden-source-map:只隱藏源代碼，會(huì)提示構(gòu)建后代碼錯(cuò)誤信息
  常用source-maph/cheap-module-source-map

總結(jié)

常用
生產(chǎn)：eval-source-map
開發(fā)：source-map

總結(jié)

以上是生活随笔為你收集整理的source-map配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。