Webpack4中的sourcemap食用指南

官方文檔 webpack的官網，給出了十幾種sourcemap

官方文檔看的若是不是很明白能夠看一下這篇博客 Webpack中的sourcemap以及如何在生產和開發環境中合理的設置sourcemap的類型，有詳細的講解eval、soure-map、inline、 cheap、module的做用，webpack的官網出了十幾種sourcemap基本上就是這幾個拼湊在一塊兒的功能

開發環境

官方推薦eval、eval-source-map、cheap-eval-source-map、cheap-module-eval-source-map這四種方式

開發環境中比較推薦cheap-module-eval-source-map的方式，既可以生成準確的便於調試的sourcemap，構建速度也比較快

生成環境

官方推薦none，source-map，hidden-source-map，nosources-source-map這四種方式
none: 就是不生成source map，安全！

source-map: 生成 source map 文件，問題就是不安全，暴露源碼，效果以下

所以官方推薦正確的使用方式是

你應該將你的服務器配置爲，不容許普通用戶訪問 source map 文件！

hidden-source-map: 與 source-map 相同，但不會爲 bundle 添加引用註釋。若是你只想 source map 映射那些源自錯誤報告的錯誤堆棧跟蹤信息，但不想爲瀏覽器開發工具暴露你的 source map，這個選項會頗有用,你不該將 source map 文件部署到 web 服務器。而是隻將其用於錯誤報告工具。其實沒太懂，實際使用中和none的效果同樣

nosources-source-map: 建立的 source map 不包含sourcesContent(源代碼內容)。它能夠用來映射客戶端上的堆棧跟蹤，而無須暴露全部的源代碼。你能夠將 source map 文件部署到 web 服務器。 這仍然會暴露反編譯後的文件名和結構，但它不會暴露原始代碼。效果以下

因此總結一下，生成環境中，使用 source-map 而且將你的服務器配置爲不容許普通用戶訪問 source map 文件的食用很舒服，畢竟能夠舒服的看到報錯信息，若是條件不容許的話使用nosources-source-map也是挺好的，暴露反編譯後的文件名和結構影響通常不大