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)特點

soure-map	外部	錯誤代碼準確信息和源代碼的錯誤位置
inline-source-map	內(nèi)聯(lián)	錯誤代碼準確信息和源代碼的錯誤位置
hidden-source-map	外部	錯誤代碼錯誤原因但是沒有錯誤位置，不能追蹤錯誤源代碼 只能提示到構(gòu)建后代碼的錯誤位置
eval-source-map	內(nèi)聯(lián)	每一個文件都生成對應的source-map，同樣能查看錯誤代碼準確信息和源代碼的錯誤位置
nosources-source-map	外部	有錯誤信息但是沒有源代碼
cheap-source-map	外部	錯誤只精確到行不能精確到列
cheap-module-source-map	外部	錯誤代碼準確信息和源代碼的錯誤位置 module會將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默認配置）
  -調(diào)試更友好 source-map 或者cheap-module-source-map 或者cheap-source-map
• 生產(chǎn)環(huán)境：
  -考慮源代碼要不要隱藏？調(diào)試要不要更友好？內(nèi)聯(lián)會讓代碼體積變大，所以生產(chǎn)環(huán)境不用內(nèi)聯(lián)
  nosources-source-map:全部隱藏
  hidden-source-map:只隱藏源代碼，會提示構(gòu)建后代碼錯誤信息
  常用source-maph/cheap-module-source-map

總結(jié)

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

總結(jié)

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

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