在配置devtool時，webpack給我們提供了四種選項。
- source-map:在一個單獨文件中產生一個完整且功能完全的文件。這個文件具有最好的source map,但是它會減慢打包速度；
- cheap-module-source-map:在一個單獨的文件中產生一個不帶列映射的map，不帶列映射提高了打包速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號）,會對調試造成不便。
- eval-source-map:使用eval打包源文件模塊，在同一個文件中生產干凈的完整版的sourcemap，但是對打包后輸出的JS文件的執行具有性能和安全的隱患。在開發階段這是一個非常好的選項，在生產階段則一定要不開啟這個選項。
- cheap-module-eval-source-map:這是在打包文件時最快的生產source map的方法，生產的 Source map 會和打包后的JavaScript文件同行顯示，沒有影射列，和eval-source-map選項具有相似的缺點。
四種打包模式，有上到下打包速度越來越快，不過同時也具有越來越多的負面作用，較快的打包速度的后果就是對執行和調試有一定的影響。
個人意見是，如果大型項目可以使用source-map，如果是中小型項目使用eval-source-map就完全可以應對，需要強調說明的是，source map只適用於開發階段，上線前記得修改這些調試設置。
1.簡單的配置下:
devtool:'eval-source-map'
前端必學內容：webpack（模塊打包器）
webpack3 學習內容，點擊即可到達
(1).webpack快速入門——如何安裝webpack及注意事項
(2).webpack快速入門——webpack3.X 快速上手一個Demo
(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置
(4).webpack快速入門——配置文件：服務和熱更新
(5).webpack快速入門——CSS文件打包
(6).webpack快速入門——配置JS壓縮，打包
(7).webpack快速入門——插件配置：HTML文件的發布
(8).webpack快速入門——CSS中的圖片處理
(9).webpack快速入門——CSS分離與圖片路徑處理
(10).webpack快速入門——處理HTML中的圖片
(11).webpack快速入門——CSS進階，Less文件的打包和分離
(12).webpack快速入門——CSS進階：SASS文件的打包和分離
(13).webpack快速入門——CSS進階：自動處理CSS3前綴
(14).webpack快速入門——CSS進階：消除未使用的CSS
(15).webpack快速入門——給webpack增加babel支持
(16).webpack快速入門——打包后如何調試
(17).webpack快速入門——實戰技巧：開發和生產並行設置
(18).webpack快速入門——實戰技巧：webpack模塊化配置
(19).webpack快速入門——實戰技巧：優雅打包第三方類庫
(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包
(21).webpack快速入門——實戰技巧：webpack優化黑技能
(22).webpack快速入門——集中拷貝靜態資源
(23).webpack快速入門——Json配置文件使用
如果我的內容對你有幫助，歡迎打賞
