webpack學習之路（七）source map

咱們用webpack打包文件以後，會生成一個編譯壓縮過的js文件。若是出現問題，這種代碼是很難排查問題的，沒法定位到源碼。這種時候就須要source map。

1.source map

簡單說，source map就是一個信息文件，裏面儲存着位置信息。也就是說，轉換後的代碼的每個位置，所對應的轉換前的位置。
有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換後的代碼。這無疑給開發者帶來了很大方便。
-- 《JavaScript Source Map 詳解》

《JavaScript Source Map 詳解》——阮一峯

2.source map的格式

webpack中提供了不少種source map的格式。 官方地址

3.source map關鍵字

• eval：使用eval包裹模塊代碼
• source map：產生.map文件
• cheap：不包含列信息
• inline：將.map做爲DataURI嵌入，不單獨生成.map文件
• module：包含loader的sourcemap

4.source map的使用

通常來講，咱們在開發環境使用，線上環境是關閉的。

咱們來跑一下幾個經常使用格式的例子。

簡單初始化一個項目

.
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── style.css
└── webpack.config.js
複製代碼

4.1 eval

devtool: 'eval'
複製代碼

而後npm run build

咱們能夠在打包文件最下面發現這麼一行代碼，行尾會告訴你源碼的位置

4.2 source-map

webpack.config.js咱們設置一下:

devtool: 'source-map'
複製代碼

build以後咱們發現，會有兩個生成文件

在bundle.js最後一行，會告訴你須要找哪個對應的.map文件

4.3 inline-source-map

webpack.config.js咱們設置一下:

devtool: 'inline-source-map'
複製代碼

build以後咱們發現只有一個文件，這是由於加了inline以後不會獨立生成.map文件，而是把.map文件以dataURL的方式嵌入到頁面裏。

在實際開發環境中，使用source-map或者inline-source-map模式debugger，能夠直接看到源代碼，很是方便。

---

連接文章

webpack學習之路（六）hash/chunkHash/contentHash

webpack學習之路（五）loader初識及經常使用loader介紹

webpack學習之路（四）webpack-hot-middleware實現熱更新

webpack學習之路（三）webpack-dev-middleware

webpack學習之路（二）webpack-dev-server實現熱更新

webpack學習之路（一）基礎配置

I am moving forward.