當webpack進行打包的時候，可能會遇到錯誤和警告信息，那么此時信息的位置很重要。
比如我們一共有a.js、b.js兩個文件，通過webpack后會打包到build.js文件中。此時a.js文件中有錯誤信息，但是提示信息會在build.js文件中輸出，並且輸出結果是通過打包編譯甚至是壓縮后的結果，對我們實際上是沒有幫助的。JavaScript提供了source mao的功能，將編譯后的代碼映射到原始代碼中。此時可以配置webpack來進行文件追蹤。比如一個錯誤來自a.js文件，source map就會告訴你
不同的devtool配置會導致打印和輸出的結果不同
目錄結構：
none的狀態
module.exports = { devtool: 'none', }
輸出結果是build.js文件的結果，也就是打包之后的結果，所以none表示沒有任何的配置，build文件中沒有任何的執行代碼
eval的狀態（默認狀態）
devtool: 'eval'
設置這個狀態表示所有的執行都在build.js文件中，此時的控制台輸出是打包前的文件
source-map的狀態
devtool: 'source-map',
該狀態，打包之后會發現dist文件夾（打包后的文件夾）目錄下多了一個build.js.map文件，此文件記錄了sourceMap信息，也就是如何映射源代碼的信息
所有的相關引入都會sources數組中
build.js.map
build.js文件中也會有注釋，內容是告訴你這個文件的映射文件是哪個
控制台中輸出的也是打包前的文件地址
hidden-source-map的狀態
devtool: 'hidden-source-map',
也會生成一個build.js.map文件
和source-map的不同是build.js最后沒有了注釋，並且瀏覽器的輸出信息是build.js的位置，也就是打包后位置
inline-source-map的狀態
devtool: 'inline-source-map',
打包后沒有了build.js.map文件，而是在build.js文件的最后加了注釋，注釋的內容就是sourceMap文件的地址
瀏覽中輸出的是打包前的文件路徑
eval-source-map的狀態
devtool: 'eval-source-map',
打包后的build文件是通過eval命名執行的
瀏覽器中打印的是打包前的文件路徑，但是文件加了編號
cheap-source-map的狀態
eval-cheap-source-map - 類似 eval-source-map，每個模塊使用 eval() 執行。這是 "cheap(低開銷)" 的 source map，因為它沒有生成列映射(column mapping)，只是映射行數。它會忽略源自 loader 的 source map，並且僅顯示轉譯后的代碼，就像 eval devtool。
devtool: 'cheap-source-map',
和sources-map類似，cheap-source-map生產的build.js.map文件內容比csource-map生產的build.js.map文件的內容要少，並且build.js文件的最后也有sourceMap文件的路徑，瀏覽器顯示的也是打包前的文件路徑
cheap-module-source-map的狀態
在這種情況下，源自 loader 的 source map 會得到更好的處理結果。然而，loader source map 會被簡化為每行一個映射
devtool: 'cheap-module-source-map',
和sources-map類似，cheap-source-map生產的build.js.map文件內容比csource-map生產的build.js.map文件的內容要少，並且build.js文件的最后也有sourceMap文件的路徑，瀏覽器顯示的也是打包前的文件路徑
devtool:https://webpack.docschina.org/configuration/devtool/
開發推薦使用：eval、eval-source-map、cheap-eval-source-map、cheap-module-eval-source-map
生產推薦使用：none、source-map、hidden-source-map、inline-source-map