(一)什麼是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文件裏
還有很多選項可供選擇,詳見官網