source-map是什么君珠？
source-map是webpack提供最好的幾個(gè)功能之一，是為了提供源代碼到構(gòu)建后代碼映射技術(shù)（如果構(gòu)建后代碼出錯(cuò)了甲馋，通過映射可以追蹤源代碼的錯(cuò)誤）
如何使用
module.exports = {
entry: '',
output: {},
module:{},
plugins: [],
mode: 'development',
devServer: {},
// 使用 source-map
devtool: 'eval-source-map'
}
source-map有哪些模式
- source-map: 外部
- 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
- inline-source-map: 內(nèi)聯(lián)
- 只生成一個(gè)內(nèi)聯(lián)source-map
- 錯(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，都在eval
- 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
- nosource-source-map: 外部
- 錯(cuò)誤代碼準(zhǔn)確信息硬梁，但是沒有人任何源代碼信息
- cheap-source-map: 外部
- 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
- 只能精確到行前硫，但是不能精確到行的哪一塊出錯(cuò)
- cheap-module-source-map: 外部
- 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
- module會(huì)將loader的source-map加入
PS：
內(nèi)聯(lián)和外部的區(qū)別：
- 外部生成了文件，內(nèi)聯(lián)沒有
- 內(nèi)聯(lián)構(gòu)建速度更快
開發(fā)環(huán)境和生產(chǎn)環(huán)境選擇
- 開發(fā)環(huán)境：速度快荧止，調(diào)試友好
-
速度快（eval>inline>cheap>...）
- eval-cheap-source-map 這個(gè)組合最快
- eval-source-map
-
調(diào)試更友好
- source-map
- cheap-module-source-map
- cheap-source-map
一般開發(fā)環(huán)境用 eval-source-map
-
- 生產(chǎn)環(huán)境：源代碼要不要隱藏屹电，調(diào)試要不要友好
內(nèi)聯(lián)會(huì)讓體積變大，所以生產(chǎn)環(huán)境不要用內(nèi)聯(lián)
nosource-source-map: 全部代碼隱藏
hidden-source-map: 只隱藏源代碼跃巡，會(huì)提示構(gòu)建后代碼錯(cuò)誤信息
一般生產(chǎn)環(huán)境用 source-map
