前端的業務越來越龐大，導致我們需要引入的js等靜態資原始檔的體積也越來越大，不得不使用壓縮js檔案的方式來提高載入的效率。

編譯工具的誕生，極大地方便了我們處理js檔案的這一過程，但壓縮後的js檔案極難閱讀，也難以除錯，所以就產生了sourcemap這個功能。

webpack開啟sourcemap功能可以通過壓縮程式碼的堆疊行、列號定位到原始碼的具體位置，我們就以webpack為例來看看如何利用sourcemap反向定位線上原始碼。

SourceMap是一種對映關係。當專案執行後，如果出現錯誤，我們可以利用sourceMap反向定位到原始碼。在chrome瀏覽器裡邊解析當然是非常強大，也非常方便了，但是我們想對線上的壓縮程式碼進行逆向定位，像這樣遠端解析就有些難度了。解析工具就是npm：source-map；

正常的sourceMap配置如下：

const path = require('path');

module.exports = {
  devtool: 'source-map', // SourceMap的模式（見下表）
  entry: './src/index.js',  // 入口檔案
  output: {
    filename: 'bundle.js',  // 檔名
    path: path.resolve(__dirname, 'dist')  // 資料夾
  }
}

SourceMap不同模式的特點（見下表）

webpack版本不同，生成source-map的方式也不同，今天我們就以webpack2.0+ 、和webpack4.0+這兩個版本來講講sourcemap的配置和解析，其他版本沒試過，原理相同，心累