我們先來看看文檔對這 7 種模式的解釋：

創新互聯擁有一支富有激情的企業網站制作團隊，在互聯網網站建設行業深耕十多年，專業且經驗豐富。十多年網站優化營銷經驗，我們已為1000+中小企業提供了做網站、成都做網站解決方案，按需網站策劃，設計滿意，售后服務無憂。所有客戶皆提供一年免費網站維護!

模式	解釋
eval	每個module會封裝到 eval 里包裹起來執行，并且會在末尾追加注釋 //@ sourceURL.
source-map	生成一個SourceMap文件.
hidden-source-map	和 source-map 一樣，但不會在 bundle 末尾追加注釋.
inline-source-map	生成一個 DataUrl 形式的 SourceMap 文件.
eval-source-map	每個module會通過eval()來執行，并且生成一個DataUrl形式的SourceMap.
cheap-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，同時 loader 的 sourcemap 也被簡化為只包含對應行的。

注1：

webpack不僅支持這 7 種，而且它們還是可以任意組合上面的eval、inline、hidden關鍵字，就如文檔所說，你可以設置 souremap 選項為 cheap-module-inline-source-map。

注2：

如果你的modules里面已經包含了SourceMaps，你需要用source-map-loader來和合并生成一個新的 SourceMaps。

使用結果有何不同

下面我們將列出這 7 種模式打包編譯后的結果，從中看看他們的異同：

eval

webpackJsonp([1],[ 
function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceURL=webpack:///./src/js/index.js?'
  )
 }, 
function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'
  )
 }, 
function(module,exports,__webpack_require__){  
 eval(
   ...   
 //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
  )
 },
...])

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：淺談webpackdevtool里的7種SourceMap模式-創新互聯
當前鏈接：http://www.yijiale78.com/article20/djgsco.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、云服務器、域名注冊、用戶體驗、營銷型網站建設、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯