webpack之SourceMap

(一)什麼是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部分

配置好後,devtool: 'source-map' 會在打包後生成 .map 文件

mode: 'development' 默認開啓source-map

(三)實驗

mode: 'production' 下先來個不加source-map 的,打包後運行,控制檯報錯後,

告訴你打包好後的js文件報錯了

添加source-map 後

會定位到源文件的具體哪行哪列

不過這種方式會在dist文件夾下生成 .map 文件

還有一種 inline-source-map

不會生成.map文件,會把source-map結果嵌入進打包好的js文件裏

 

還有很多選項可供選擇,詳見官網

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章