source maps

Webpack打包生成的.map后綴文件，使得我們的開發調試更加方便，它能幫助我們鏈接到斷點對應的源代碼的位置進行調試（//# souceURL），而devtool就是用來指定source-maps的配置方式的。以下是官方文檔的說明：

source maps

開發工具(Devtool)

此選項控制是否生成，以及如何生成 Source Map。以下是官方文檔的配置選項：

devtool配置選項

其中一些值適用於開發環境（ 從表格中各種方式的構建速度來看，可以看出eval方式可大幅提高持續構建效率，這對經常需要邊改邊調的同學而言非常重要），一些適用於生產環境。對於開發環境，通常希望更快速的 Source Map，需要添加到 bundle 中以增加體積為代價，但是對於生產環境，則希望更精准的 Source Map，需要從 bundle 中分離並獨立存在。

對於開發環境

eval 每個模塊都使用 eval() 執行，並且都有 //@ sourceURL。此選項會相當快地構建。主要缺點是，由於會映射到轉換后的代碼，而不是映射到原始代碼，所以不能正確的顯示行數。
inline-source-map - SourceMap 轉換為 DataUrl 后添加到 bundle 中。
eval-source-map - 每個模塊使用 eval() 執行，並且 SourceMap 轉換為 DataUrl 后添加到 eval() 中。初始化 SourceMap 時比較慢，但是會在重構建時提供很快的速度，並且生成實際的文件。行數能夠正確映射，因為會映射到原始代碼中。
cheap-module-eval-source-map - 就像 eval-source-map，每個模塊使用 eval() 執行，並且 SourceMap 轉換為 DataUrl 后添加到 eval() 中。"低開銷"是因為它沒有生成列映射(column map)，只是映射行數。

對於生產環境

source-map - 生成完整的 SourceMap，輸出為獨立文件。由於在 bundle 中添加了引用注釋，所以開發工具知道在哪里去找到 SourceMap。
hidden-source-map - 和 source-map 相同，但是沒有在 bundle 中添加引用注釋。如果你只想要 SourceMap 映射錯誤報告中的錯誤堆棧跟蹤信息，但不希望將 SourceMap 暴露給瀏覽器開發工具。
cheap-source-map - 不帶列映射(column-map)的 SourceMap，忽略加載的 Source Map。
cheap-module-source-map - 不帶列映射(column-map)的 SourceMap，將加載的 Source Map 簡化為每行單獨映射。
nosources-source-map - 創建一個沒有 sourcesContent 的 SourceMap。它可以用來映射客戶端（譯者注：指瀏覽器）上的堆棧跟蹤，而不會暴露所有的源碼。