Webpack中的sourcemap以及如何在生產和開發環境中合理的設置

 

一 、 從Sourcemap和Data URL提及

（1）什麼是Sourcemap?

咱們在打包中，將開發環境中源代碼通過壓縮，去空格，babel編譯轉化，最終能夠獲得適用於生產環境的項目代碼，這樣處理後的項目代碼和源代碼之間差別性很大，會形成沒法debug的問題。

舉例來講，若是壓縮等處理過的生產環境中的代碼出現bug，調試的時候只能定位到壓縮處理後的代碼的位置，沒法定位到開發環境中的源代碼。

sourcemap就是爲了解決上述代碼定位的問題，簡單理解，就是構建了處理前的代碼和處理後的代碼之間的橋樑。主要是方便開發人員的錯誤定位。這裏的處理操做包括：

I）壓縮，減少體積

II）將多個文件合併成同一個文件

III）其餘語言編譯成javascript，好比TypeScript和CoffeeScript等

（2）什麼是DataURL?

DataURL最先是出如今HTML文件img標籤中的關於圖片的引用，DataURL提供了一種將圖片」嵌入」到HTML中的方法。

 

 

 

 

轉  :  https://blog.csdn.net/liwusen/article/details/79414508

 

http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html